import { Timeline } from '@uhg-abyss/mobile';( <Timeline currentStep={1} paragraph="Paragraph text in the active step card"> <Timeline.Step heading="Application Received and Processing" date={new Date(2024, 6, 17)} paragraph="Paragraph would go here" /> <Timeline.Step heading="CMS Determination" date={new Date(2024, 6, 19)} paragraph="Paragraph would go here" /> <Timeline.Step heading="Determination Outcome" /> <Timeline.Step heading="UCard Shipped" /> <Timeline.Step heading="Plan coverage begins" date={new Date(2025, 1, 1)} paragraph="Paragraph would go here" content={ <Button size="small" type="outline"> Button </Button> } /> </Timeline>);Steps
Use the Timeline.Step subcomponent to define each step in the Timeline. The steps are rendered in the same order they are defined, so the first child will be the first step, the second child will be the second step, and so on.
This section covers the props available for Timeline.Step.
Heading
Use the heading prop to set the heading of the step. This prop is required.
Date
Use the date prop to set the date of the step. This prop accepts either a string or a Date object. If a Date object is passed, it will be formatted as MM/DD/YYYY.
Paragraph
Use the paragraph prop to add descriptive text below the date for the step.
Content
Use the content prop to add custom components to the bottom of the step.
Current step
Use the currentStep prop to set the currently active step in the Timeline. This prop accepts the 1-indexed step number (i.e. 1 is the first step, not 0).
Note
If the value of currentStep is higher than the number of steps, the Timeline will display all steps as complete.
Current step completion state
By default, the currentStep will be in progress. Use the activeStepCompletionState prop to change the completion state of the current step. The available states are 'in-progress' and 'completed'. The default value is 'in-progress'.
Tip
Use 'completed' to indicate that the current step in the process is complete, but the next step has not yet begun.
Variant
Use the variant prop to change the color palette of the Timeline. The available variants are 'default', 'warning', 'error', and 'info'. The default value is 'default'.
Note
Only the active step will change appearance based on the variant.
Type
Use the type prop to change the layout of the Timeline. The default type is 'combo'.
'combo'displays the active step card with the steps contained in a card directly below.'card'wraps the steps within a card.'card'does NOT contain the active step card.'progress'displays only the timeline steps without any wrapper.
Combo
The 'combo' type includes an active step card that can display additional content using the following props (rendered in order):
| Prop | Purpose | Placement |
|---|---|---|
paragraph | Descriptive text explaining the current step | Below the heading |
content | Informational components (text, lists, links) | Below paragraph |
button | Call-to-action button | Below content |
Card
Progress
Heading weight
Use the headingWeight prop to modify the font weight of all non-active step headings. The default value is '$core.font-weight.regular'.
Footer
Use the footer prop to add content at the very bottom of the Timeline, below all timeline steps.
Timeline Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| activeStepCompletionState | 'in-progress' | 'completed' | in-progress | Defines the completion state of the active timeline step |
| button | node | - | Button lives inside the top card of type 'combo'. The button is placed at the bottom of the card below 'content' |
| children | node | - | Timeline steps |
| content | node | - | Content lives inside the top card of type 'combo'. The content is placed at the bottom of the card above 'button' |
| currentStep | number | - | The active timeline step |
| footer | node | - | content placed at the bottom of the timeline |
| headingAccessibilityRole | AccessibilityRole | 'header' | Accessibility role for the heading of the Timeline |
| headingWeight | string | number | $core.font-weight.regular | Defines the heading weight of all inactive timeline steps |
| paragraph | string | - | Custom description placed inside the active step card |
| type | 'combo' | 'card' | 'progress' | combo | Defines the layout type of the timeline (combo, card, or progress) |
| variant | 'default' | 'warning' | 'error' | 'info' | default | Defines the color palette of timeline |
Timeline.Step Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| content | node | - | Customizable content that is displayed at the bottom of the step |
| date | string | Date | - | The date displayed under title and above paragraph |
| heading | string | - | The step heading, a heading is required for every step |
| paragraph | string | - | Text displayed below step |
Timeline Classes
| Class Name | Description |
|---|---|
| abyss-timeline-root | Timeline root element |
| abyss-timeline-combo-card | Timeline active step card root |
| abyss-timeline-combo-card-eyebrow | Timeline active step card eyebrow |
| abyss-timeline-combo-card-heading | Timeline active step card heading |
| abyss-timeline-combo-card-paragraph | Timeline active step card paragraph |
| abyss-timeline-combo-card-content | Timeline active step card content |
| abyss-timeline-combo-card-button-wrapper | Timeline active step card button wrapper |
| abyss-timeline-card | Timeline card root |
| abyss-timeline-card-heading | Timeline card heading |
| abyss-timeline-step-wrapper | Timeline step wrapper |
Timeline.Step Classes
| Class Name | Description |
|---|---|
| abyss-timeline-step-root | Timeline step root element |
| abyss-timeline-step-status-indicator | Timeline step status indicator |
| abyss-timeline-step-solid-track | Timeline step solid track |
| abyss-timeline-step-dashed-track | Timeline step dashed track |
| abyss-timeline-step-content | Timeline step content |
| abyss-timeline-step-heading | Timeline step heading |
| abyss-timeline-step-date-status | Timeline step date status |
| abyss-timeline-step-paragraph | Timeline step paragraph |
Timeline Translations
| Translation Key | Value |
|---|---|
| disabled | Disabled |
| Timeline.history | Timeline History |
| Timeline.currentStep | Current Step |
| Timeline.step | Step |
| Timeline.active | In Progress |
| Timeline.incomplete | Not Completed |
| Timeline.complete | Completed |
Timeline Tokens
| Token Name | Value | |
|---|---|---|
| timeline.color.icon.complete | #002677 | |
| timeline.color.icon.active | #FFFFFF | |
| timeline.color.surface.container | #FFFFFF | |
| timeline.color.surface.track.default | #002677 | |
| timeline.color.surface.track.error | #990000 | |
| timeline.color.surface.track.warning | #C24E14 | |
| timeline.color.surface.track.info | #196ECF | |
| timeline.color.surface.track.complete | #002677 | |
| timeline.color.surface.indicator.default | #002677 | |
| timeline.color.surface.indicator.error | #990000 | |
| timeline.color.surface.indicator.warning | #C24E14 | |
| timeline.color.surface.indicator.info | #196ECF | |
| timeline.color.surface.indicator.complete | #002677 | |
| timeline.color.surface.indicator.active | #002677 | |
| timeline.color.text.heading | #002677 | |
| timeline.color.text.paragraph.default | #002677 | |
| timeline.color.text.paragraph.warning | #C24E14 | |
| timeline.color.text.paragraph.error | #990000 | |
| timeline.color.text.paragraph.info | #196ECF | |
| timeline.color.text.paragraph.complete | #323334 | |
| timeline.color.text.paragraph.incomplete | #323334 | |
| timeline.color.text.status.default | #002677 | |
| timeline.color.text.status.warning | #C24E14 | |
| timeline.color.text.status.error | #990000 | |
| timeline.color.text.status.info | #196ECF | |
| timeline.color.text.status.complete | #323334 | |
| timeline.color.text.status.incomplete | #323334 | |
| timeline.color.text.step-heading.default | #002677 | |
| timeline.color.text.step-heading.warning | #C24E14 | |
| timeline.color.text.step-heading.error | #990000 | |
| timeline.color.text.step-heading.info | #196ECF | |
| timeline.color.text.step-heading.complete | #323334 | |
| timeline.color.text.step-heading.incomplete | #323334 | |
| timeline.color.border.container | #CBCCCD | |
| timeline.color.border.heading | #CBCCCD | |
| timeline.color.border.indicator | #4B4D4F | |
| timeline.color.border.track | #4B4D4F | |
| timeline.border-radius.all.container | 12 | |
| timeline.border-radius.all.indicator | 500 | |
| timeline.border-radius.all.track | 500 | |
| timeline.border-width.all.container | 0.5 | |
| timeline.border-width.all.indicator | 1 | |
| timeline.border-width.all.track | 1 | |
| timeline.border-width.bottom.heading | 0.5 | |
| timeline.sizing.all.icon.complete | 24 | |
| timeline.sizing.all.icon.active | 24 | |
| timeline.sizing.all.indicator.width | 32 | |
| timeline.sizing.all.indicator.height | 32 | |
| timeline.spacing.padding.all.container | 16 | |
| timeline.spacing.padding.all.complete-indicator | 8 | |
| timeline.spacing.padding.top.heading | 24 | |
| timeline.spacing.padding.bottom.heading | 16 | |
| timeline.spacing.padding.bottom.step | 24 | |
| timeline.spacing.padding.bottom.date-status | 4 | |
| timeline.spacing.padding.right.container | 16 | |
| timeline.spacing.gap.horizontal.heading | 16 | |
| timeline.spacing.gap.horizontal.indicator | 8 | |
| timeline.spacing.gap.horizontal.date-status | 4 | |
| timeline.spacing.gap.vertical.track | 8 | |
| timeline.spacing.gap.vertical.copy | 4 | |
| timeline.spacing.gap.vertical.content | 12 | |
| timeline.spacing.gap.vertical.container | 16 | |
| timeline.box-shadow.container |
|
Timeline Classes
| V2 | V1 | Status |
|---|---|---|
| timeline-card | timeline-card | Unchanged |
| - | timeline-card-divider | Removed |
| timeline-card-heading | timeline-card-heading | Unchanged |
| timeline-combo-card | timeline-combo-card | Unchanged |
| timeline-combo-card-button-wrapper | timeline-combo-card-button-wrapper | Unchanged |
| timeline-combo-card-content | timeline-combo-card-content | Unchanged |
| - | timeline-combo-card-date | Removed |
| - | timeline-combo-card-eyebrow | Removed |
| timeline-combo-card-heading | timeline-combo-card-title | Renamed |
| timeline-combo-card-paragraph | timeline-combo-card-description | Renamed |
| - | timeline-combo-card-text-wrapper | Removed |
| timeline-root | timeline-root | Unchanged |
| timeline-step-wrapper | timeline-step-wrapper | Unchanged |
Timeline.Step Classes
| V2 | V1 | Status |
|---|---|---|
| - | timeline-step-bottom-wrapper | Removed |
| - | timeline-step-bottom-wrapper-left | Removed |
| timeline-step-content | - | Added |
| - | timeline-step-content-wrapper | Removed |
| timeline-step-dashed-track | - | Added |
| - | timeline-step-date | Removed |
| timeline-step-date-description | - | Added |
| timeline-step-heading | timeline-step-title | Renamed |
| - | timeline-step-icon | Removed |
| - | timeline-step-icon-wrapper | Removed |
| timeline-step-paragraph | timeline-step-description | Renamed |
| - | timeline-step-progress-bar-dash | Removed |
| - | timeline-step-progress-bar-wrapper | Removed |
| timeline-step-root | - | Added |
| timeline-step-solid-track | - | Added |
| timeline-step-status-indicator | - | Added |
| - | timeline-step-top-wrapper | Removed |
| - | timeline-step-top-wrapper-left | Removed |
Timeline Props
| V2 | V1 | Status |
|---|---|---|
| button | button | Unchanged |
| children | children | Unchanged |
| content | content | Unchanged |
| currentStep | currentStep | Unchanged |
| footer | footer | Unchanged |
| headingWeight | titleWeight | Renamed |
| paragraph | description | Renamed |
| type | type | Unchanged |
| variant | variant | Unchanged |
Timeline.Step Props
| V2 | V1 | Status |
|---|---|---|
| content | content | Unchanged |
| date | date | Unchanged |
| heading | title | Renamed |
| - | isDisabled | Removed |
| paragraph | description | Renamed |