Product Details

The High Velocity front-end app displays product details in an accordion. The hv-ui product details package provides the components that make up the UI; they are built using Radix's Accordion component.

There are five components available:

• Accordion: wrapper that contains the parts of the accordion and controls state
• AccordionItem: wrapper that contains the parts of a collapsible section
• AccordionTrigger: toggles the collapsed state of its associated item
• AccordionContent: the collapsible content for an item
• DetailsList: an unordered list that renders and array of items (currently unused)

Example

Preview

...content

Code

  import {
      Accordion,
      AccordionItem,
      AccordionTrigger,
      AccordionContent,
      DetailsList,
  } from '@hv/ui/product-details';

  <ProductDetails.Accordion>
      <ProductDetails.AccordionItem id='details'>
          <ProductDetails.AccordionTrigger>
          <span>Product Details</span>
          </ProductDetails.AccordionTrigger>
          <ProductDetails.AccordionContent>
          <div className='p-4'>...content</div>
          </ProductDetails.AccordionContent>
      </ProductDetails.AccordionItem>
          <ProductDetails.AccordionItem id='sustainability'>
          <ProductDetails.AccordionTrigger>
              <span>Sustainability</span>
          </ProductDetails.AccordionTrigger>
          <ProductDetails.AccordionContent>
              <div className='p-4'>...content</div>
          </ProductDetails.AccordionContent>
      </ProductDetails.AccordionItem>
      <ProductDetails.AccordionItem id='care'>
          <ProductDetails.AccordionTrigger>
              <span>Product Care</span>
          </ProductDetails.AccordionTrigger>
          <ProductDetails.AccordionContent>
              <div className='p-4'>...content</div>
          </ProductDetails.AccordionContent>
      </ProductDetails.AccordionItem>
  </ProductDetails.Accordion>

Accordion

The Accordion component has a default value of ['details'] and is given a type of multiple, which allows more than one accordion to be open at the same time.

Property	Description	Type
className	Additional classes for styling the element	String
children	Accordion child components	ReactNode
props	Radix accordion properties	AccordionPrimitive.Accordion

Accordion Item

Property	Description	Type
id	A unique value for the item	String
children	Accordion Item child components	ReactNode

Accordion Trigger

The AccordionTrigger contains a Heading component that will render an <h2> heading element. Its styles can not be overridden; customizations can be made directly to the component source file.

Property	Description	Type
children	Accordion Trigger heading	ReactNode

Accordion Content

Property	Description	Type
children	Content to display	ReactNode

Details List

The DetailsList component will take an array of children and render them in an unordered list. This component is not currently used in the High Velocity front-end app.

Property	Description	Type
children	List items to display	ReactNode[]