Progress Tracker - React

import { ProgressTracker } from '@sky-uk/ui-core';

Progress Tracker visualises a set of related steps through the user journey.

Progress Tracker should only be used for linear journeys (i.e the checkout process). It should not be used for any non-linear journeys (discovery pages, buy pages, product configuration).

Width of the component is governed by the parent container. Recommended settings are $maxWidth={{ xs: '320px', md: container(6) }}.

<Box $maxWidth={{ xs: '320px', md: container(6) }} $width="100%">
  <ProgressTracker progress={2.5} steps={[
      { name: 'Account' },
      { name: 'Delivery' },
      { name: 'Payment' },
      { name: 'Complete' }
    ]}
  />
</Box>

Props

steps

Steps data are provided as an array of objects with a name property. Maximum recommended number of steps is 4.

<Box $maxWidth={{ xs: '320px', md: container(6) }} $width="100%">
  <ProgressTracker progress={1.5} steps={[
      { name: 'Account' },
      { name: 'Delivery' },
      { name: 'Payment' },
      { name: 'Complete' }
    ]}
  />
</Box>

progress

Use progress property to change the state of the steps and indicate the progress within the user journey.

If there are multiple pages to one step, then you can use decimal number to indicate the percentage progress of the current step.

function Example() {
  const [progress, setProgress] = React.useState(0);

  const increaseProgress = event => {
    event.stopPropagation();
    setProgress(progress + 0.25);
  };
  const decreaseProgress = event => {
    event.stopPropagation();
    setProgress(progress - 0.25);
  };

  return (
    <Box $maxWidth={{ xs: '320px', md: container(6) }} $width="100%">
      <ProgressTracker progress={progress} steps={[
          { name: 'Account' },
          { name: 'Delivery' },
          { name: 'Payment' },
          { name: 'Complete' }
        ]}
        $marginBottom={6}
      />

      <Button onClick={decreaseProgress} $marginRight={4} $marginLeft={7}>
        –25%
      </Button>

      <Button onClick={increaseProgress} $marginRight={6}>
        +25%
      </Button>

      <Text>Progress: {progress}</Text>
    </Box>
  );
}

$appearance

• default
• light

<Box $maxWidth={{xs: '320px', md: container(6)}} $width="100%">
  <ProgressTracker $appearance="light" progress={2.5} steps={[
      {name: 'Account' },
      {name: 'Delivery' },
      {name: 'Payment' },
      {name: 'Complete' }
    ]}
  />
</Box>

Translatable Fields

The ProgressTracker component has visually hidden labels that describe name, state and progress of the steps. The format of the labels is Name of the step, 1 of 4, state & N% of step completed.

These labels could be translated using the the following fields:

• progressTracker.roleDescription - visually hidden label of the component role. Default value is Progress tracker
• progressTracker.complete - visually hidden label of the completed steps. Default value is complete
• progressTracker.inProgress - visually hidden label of the in-progress steps. Default value is currently in progress
• progressTracker.pending - visually hidden label of the pending steps. Default value is incomplete
• progressTracker.stepDivider - visually hidden label of a divider, e.g. 1 of 4. Default value is of
• progressTracker.progressCompleted - visually hidden label of the progress of a completed step, e.g. 50% of step completed. Default value is of step completed

For more on translatable fields, view the useTranslation docs here: useTranslation