StepNavigation

import {
  StepNavigation,
  StepNavigationItem,
} from "@wfp/react";

<StepNavigation selectedStep={1} vertical>
  <StepNavigationItem
    label="1. Done step"
    helperText="Helper text"
    page={0}
  />
  <StepNavigationItem
    label="2. Current step"
    page={1}
    helperText="Helper text"
  />
  <StepNavigationItem
    label="3. Upcoming step"
    helperText="Helper text"
    page={2}
  />
  <StepNavigationItem
    label="4. Warning step"
    page={3}
    status="warning"
    helperText="Warning message"
  />
  <StepNavigationItem
    label="5. Error step"
    page={4}
    status="error"
    helperText="Error message"
  />
  <StepNavigationItem
    label="6. In progress step"
    page={5}
    status="in-progress"
    helperText="Helper text"
  />
</StepNavigation>;