Journey Progress

Purpose

The molecule shows a user how far along a journey (for example a multi-page application form) and how many more steps they need complete.

Example

320 Journeyprogress
680 Journeyprogress

Description

This molecule should be used to display how far through a process a user is and how much further they have to go.

Elements

The molecule takes a set of labels, one for each step as `steps` and the current active step in `activeStep` props for React.

The ticks and colours are automatically displayed when the current step is lower/equal to or higher than the current step being displayed in the code, so it handles everything automatically, regardless of how many steps you give the molecule.

Added by: