StepTracker

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<StepTracker current={1} steps={['First', 'Second', 'Third']} />

<StepTracker current={1} steps={['First', 'Second', 'Third']} />

Introduction

import { StepTracker } from '@telus-uds/ds-allium'

StepTracker component shows the current position in a sequence of steps. At wide viewports (lg and xl), all steps are labelled, and the current step is highlighted; at narrower viewports, progress through the steps is shown but only the current step has a visible label.

Accessibility

Keep in mind that in its current implementation this is not an interactive component and can’t be used to navigate between steps. The application must provide its own navigation mechanism and state control. That is the main reason the component assumes the progressbar role in terms of accessibility. This also makes it extremely important to make sure you set the necessary accessibility attributes on controls used to modify the state of the step tracker.

That said, you can also pass standard a11y props to the StepTracker component, including the ones that are specific to the progressbar role. By default the following props are used:

• accessibilityRole (role): progressbar,
• accessibilityLabel (aria-label): Step I of N: <Current Step Label>,
• accessibilityLevel (aria-level): 1,
• accessibilityValue.min (aria-valuemin): 0,
• accessibilityValue.max (aria-valuemax): steps.length - 1,
• accessibilityValue.now (aria-valuenow): current,
• accessibilityValue.text (aria-valuetext): <Current Step Label>,

Platform considerations

The component is available on both native platforms and web.

Props

Name	Type	Default	Description
copy	'en' | 'fr' | dictionaryContentShape	'en'
current	number	0
dictionary	{ en, fr }	{ en: { stepLabel: 'Step %{stepNumber}', stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}' }, fr: { stepLabel: 'Étape %{stepNumber}', stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}' } }
steps	Array<string>	[]
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type
tokens	completedIcon	icon
	completedIconColor	color
	completedIconSize	size
	connectorColor	color
	connectorCompletedColor	color
	connectorCompletedHeight	border
	connectorHeight	border
	connectorMinWidth	size
	containerPaddingBottom	size
	containerPaddingLeft	size
	containerPaddingRight	size
	containerPaddingTop	size
	knobBackgroundColor	color
	knobBorderColor	color
	knobBorderWidth	border
	knobCompletedBackgroundColor	color
	knobCompletedBorderColor	color
	knobCompletedPaddingLeft	size
	knobCompletedPaddingTop	size
	knobCurrentBackgroundColor	color
	knobCurrentBorderColor	color
	knobCurrentBorderWidth	border
	knobCurrentInnerColor	color
	knobCurrentInnerSize	size
	knobCurrentPaddingLeft	size
	knobCurrentPaddingTop	size
	knobSize	size
	labelColor	color
	labelCurrentColor	color
	labelCurrentFontWeight	fontWeight
	labelCurrentFontName	fontName
	labelDirection	direction
	labelFontSize	fontSize
	labelFontWeight	fontWeight
	labelFontName	fontName
	labelGap	size
	labelLineHeight	lineHeight
	labelMarginTop	size
	labelPaddingLeft	size
	labelPaddingRight	size
	showStepLabel	show
	showStepName	show
	showStepTrackerLabel	show

Figma

Variants

This component does not have any stylistic variants.

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support