Totals

The hv-ui totals package provides components to display pricing, with the option to use an accordion. There are eight components available:

• Total: flex wrapper for the display of the TotalLabel and TotalValue
• TotalLabel: the description of the total being displayed
• TotalValue: the value being displayed
• TotalAccordionTrigger: optional accordion trigger for displaying totals content in an accordion
• TotalAccordion: optional accordion for totals content
• TotalValueAccordion: wrapper to position content
• TotalAccordionContent: optional accordion content
• TotalsContainer: wrapper for totals components

Example

Preview

Subtotal

$999.00

Discount

-$10.00

Total

$989.00

Code

  import {
      Total,
      TotalAccordion,
      TotalAccordionContent,
      TotalAccordionTrigger,
      TotalLabel,
      TotalValue, 
      TotalsContainer,
  } from '@hv/ui/totals';

  <TotalsContainer>
      <Total>
          <TotalLabel>Subtotal</TotalLabel>
          <TotalValue>$999.00</TotalValue>
      </Total>

      <Total>
          <TotalLabel>Discount</TotalLabel>
          <TotalValue>-$10.00</TotalValue>
      </Total>
      <TotalAccordion value='promoCodes'>
          <TotalAccordionTrigger>Promo Codes</TotalAccordionTrigger>
          <TotalAccordionContent >
          <div>....promo form content</div>
          </TotalAccordionContent>
      </TotalAccordion>
      <Total>
          <TotalLabel>Total</TotalLabel>
          <TotalValue>$989.00</TotalValue>
      </Total>

  </TotalsContainer>

Total

Property	Description	Type
className	Additional classes for styling the element.	String
props	Additional div properties from HTML attributes.	HTMLDivElement

Total Label

Property	Description	Type
className	Additional classes for styling the element.	String
props	Additional div properties from HTML attributes.	HTMLDivElement

Total Value

Property	Description	Type
className	Additional classes for styling the element.	String
props	Additional div properties from HTML attributes.	HTMLDivElement

Total Accordion Trigger

Property	Description	Type
className	Additional classes for styling the element.	String
props	Additional div properties from HTML attributes.	HTMLDivElement

Total Accordion

Property	Description	Type
className	Additional classes for styling the element.	String
value	The controlled stateful value of the accordion item whose content is expanded	String
props	Additional div properties from HTML attributes.	HTMLDivElement

Total Value Accordion

Property	Description	Type
className	Additional classes for styling the element.	String
props	Additional div properties from HTML attributes.	HTMLDivElement

Total Accordion Content

Property	Description	Type
className	Additional classes for styling the element.	String
props	Additional div properties from HTML attributes.	HTMLDivElement

Totals Container

Property	Description	Type
className	Additional classes for styling the element.	String
props	Additional div properties from HTML attributes.	HTMLDivElement