import { Accumulator } from '@uhg-abyss/web/ui/Accumulator';Overview
The Accumulator component is designed to accumulate and display multiple loading states in a visually appealing manner. It provides a progress bar, summary information, and optional metadata, making it suitable for various use cases where tracking progress is essential.
Label and subText
The label prop is used to display the main title of the accumulator, while the subText (optional) prop provides additional context or information related to the accumulator's state.
The label is rendered as an h3 element by default, but you can change the heading level using the headingLevel prop.
Popover
The popover (optional) prop allows you to provide additional information in a popover format. It includes a title and content, which can be used to give context or details about the accumulator's state.
Summary
The summary prop is used to display a summary of the accumulator's state. It can include information such as the current value and target value, providing a quick overview of progress.
Even though both fields are open fields, it is recommended to use the current field to represent the current value and the target field to represent the target value as it helps maintain consistency across different accumulators.
Percentage and showEndpoint
- The
percentageprop is used to indicate the progress of the accumulator. It should be a number between 0 and 100, representing the percentage of completion. - The
showEndpointprop, when set totrue, displays the endpoint of the progress bar, providing a visual cue for the completion point.
Paragraph and metadata
The paragraph (optional) prop allows you to add additional descriptive text to the accumulator, while the metadata (optional) prop can be used to display information such as the last updated date or other relevant details.
Badge
- The
badge(optional) prop allows you to display a badge under the progress bar. This uses ourBadgecomponent, which can be customized with different options (you can read more about it in the Badge documentation).
The badge will only be displayed if the percentage is 100.
Call to action (cta)
The cta (optional) prop allows you to add a call to action button or link. It uses our Link and Button components. You need to pass a type prop with a value of button or link, and then provide the appropriate props for each type.
Accumulator Props
| Name | Type | Default | Required | A11y | Description |
|---|---|---|---|---|---|
badge | BadgeProps | undefined | Badge to display with the accumulator. See the Badge accessibility guidance for its sub-component requirements. | |||
className | string | undefined | CSS class name to apply to each element within the component | |||
css | CSSProperties | Partial<Record<"abyss-accumulator-button" | "abyss-accumulator-label" | "abyss-accumulator-link" | "abyss-accumulator-summary" | "abyss-accumulator-metadata" | ... 8 more ... | "abyss-accumulator-popover", CSSProperties>> | undefined | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information | |||
cta | AccumulatorCtaProps | undefined | Call-to-action link or button See Linkopens in a new window props See Buttonopens in a new window props | |||
data-testid | string | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | |||
disableDefaultProviderProps | boolean | undefined | false | If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored. | ||
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 3 | HTML heading level (1-6) for the label | ||
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |||
label | string | Main title/label of the accumulator; used as its accessible name for screen readers. | |||
metadata | string | undefined | Metadata information (e.g., "Last updated...") | |||
paragraph | string | undefined | Descriptive paragraph text | |||
percentage | number | 0 | Progress percentage (0-100) | ||
popover | AccumulatorPopoverProps | undefined | Optional popover with additional information | |||
showEndpoint | boolean | undefined | false | If true, it will display a visual end point on the ProgressBar | ||
slotProps | AccumulatorSlotPropsMap | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | |||
subText | string | undefined | Additional text displayed below the label | |||
summary | AccumulatorSummaryProps | Summary information about current and target values | |||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Accumulator Classes
| Class Name | Description |
|---|---|
| .abyss-accumulator-badge | Status badge component |
| .abyss-accumulator-button | Call-to-action button |
| .abyss-accumulator-headers | Container for header elements |
| .abyss-accumulator-label | Accumulator title/label |
| .abyss-accumulator-link | Call-to-action link |
| .abyss-accumulator-metadata | Metadata information text |
| .abyss-accumulator-paragraph | Descriptive paragraph text |
| .abyss-accumulator-popover | Information popover component. |
| .abyss-accumulator-progress-bar | Progress bar showing percentage |
| .abyss-accumulator-root | Accumulator root container |
| .abyss-accumulator-subtext | Subtext below the label |
| .abyss-accumulator-summary | Summary information container |
| .abyss-accumulator-summary-current | Current value in summary |
| .abyss-accumulator-summary-target | Target value in summary |
The Accumulator component is designed with accessibility in mind. It uses the label and subText props to provide clear context for screen readers.
Component Tokens
Click on the token row to copy the token to your clipboard.
Accumulator Tokens
| Token Name | Value | |
|---|---|---|
| accumulator.color.text.label.complete | #323334 | |
| accumulator.color.text.sub-label | #323334 | |
| accumulator.color.text.summary.current | #4B4D4F | |
| accumulator.color.text.summary.target | #323334 | |
| accumulator.color.text.paragraph | #4B4D4F | |
| accumulator.color.text.metadata | #4B4D4F | |
| accumulator.color.surface.progress-bar | #149E8F | |
| accumulator.spacing.gap.vertical.container | 8px | |
| accumulator.spacing.gap.vertical.heading | 4px | |
| accumulator.spacing.gap.horizontal.label | 4px |