import { Timeline } from '@uhg-abyss/mobile';

type

variant

headingWeight

currentStep

<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" variant="secondary">
        Button
      </Button>
    }
  />
</Timeline>

Timeline Props & Usage

The currentStep prop is used to define the active timeline step. currentStep is required. To get the fully complete state for the timeline, currentStep should be set to be greater than the total number of steps. For example, if there are 3 steps, currentStep should be set to 4 to show the timeline as fully complete.

variant is used to select the step variant, The options are default, warning, error, and info.

Use the type prop to select what timeline type is most appropriate for you. 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.

headingWeight is used to modify the heading's fontWeight of every non-active step.

Use content to add custom components inside of the active step card.

Use button to add a button to the active step card.

Timeline.Step Props & Usage

Timeline.Step is used to display an individual step, each step has access to the props below providing the ability to manipulate the data displayed. Timeline.Step must be a direct child of Timeline.

isDisabled will disable the step. When a step is disabled, it can still be accessed by Timeline via currentStep. A disabled step will not animate when active/complete.

heading defines the step's Heading.

date defines the date value displayed below heading, if a Date object is passed into date it will be formatted MM/DD/YYYY.

Use paragraph to add a paragraph below date.

content is used to add custom components to the bottom of the step.

Timeline Props

Prop Name	Type	Default	Description
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
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-card	Timeline card root
abyss-timeline-card-heading	Timeline card heading
abyss-timeline-combo-card	Timeline active step card root
abyss-timeline-combo-card-button-wrapper	Timeline active step card button wrapper
abyss-timeline-combo-card-content	Timeline active step card content
abyss-timeline-combo-card-heading	Timeline active step card heading
abyss-timeline-combo-card-paragraph	Timeline active step card paragraph
abyss-timeline-root	Timeline root element
abyss-timeline-step-wrapper	Timeline step wrapper

Timeline.Step Classes

Class Name	Description
abyss-timeline-step-content	Timeline step content
abyss-timeline-step-dashed-track	Timeline step dashed track
abyss-timeline-step-date-status	Timeline step date status
abyss-timeline-step-heading	Timeline step heading
abyss-timeline-step-paragraph	Timeline step paragraph
abyss-timeline-step-root	Timeline step root element
abyss-timeline-step-solid-track	Timeline step solid track
abyss-timeline-step-status-indicator	Timeline step status indicator

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

Search tokens

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	Shadow Color: rgba(0,0,0,0.16) Shadow Offset: Width: 0 Height: 2 Shadow Opacity: 1 Shadow Radius: 4

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