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.

Note: 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.

Note: 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. The example below shows how to use the summary prop effectively.

Percentage and showEndpoint

• The percentage prop is used to indicate the progress of the accumulator. It should be a number between 0 and 100, representing the percentage of completion.
• The showEndpoint prop, when set to true, 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 our Badge component, which can be customized with different options (you can read more about it in the Badge documentation).

Note: 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	Description
badge	BadgeProps	-	-	Badge to display with the accumulator
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Call-to-action link or button See Link props See Button props
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	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	3	-	HTML heading level (1-6) for the label
label	string	-		Main title/label of the accumulator
metadata	string	-	-	Metadata information (e.g., "Last updated...")
paragraph	string	-	-	Descriptive paragraph text
percentage	number	0		Progress percentage (0-100)
popover	AccumulatorPopoverProps	-	-	Optional popover with additional information
showEndpoint	boolean	false	-	If true, it will display a visual end point on the ProgressBar
subText	string	-	-	Additional text displayed below the label
summary	AccumulatorSummaryProps	-		Summary information about current and target values

Below are the link(s) to the relevant GitHub type files:

Accumulator.types.ts

Accumulator Classes

Class Name	Description
.abyss-accumulator-root	Accumulator root container
.abyss-accumulator-headers	Container for header elements
.abyss-accumulator-label	Accumulator title/label
.abyss-accumulator-popover	Information popover component
.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
.abyss-accumulator-progress-bar	Progress bar showing percentage
.abyss-accumulator-badge	Status badge component
.abyss-accumulator-paragraph	Descriptive paragraph text
.abyss-accumulator-metadata	Metadata information text
.abyss-accumulator-link	Call-to-action link
.abyss-accumulator-button	Call-to-action button

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

Note: Click on the token row to copy the token to your clipboard.

Search tokens

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