Stepper

[oscarcarlstrom]

Stepper

New <Stepper> component in beta. It can be used to render a series of steps that the user has to go through.

The current step is set on the <Stepper> using the currentStep prop.

It is possible for the user to navigate between the steps using the <Link> component. A step can be either pending or completed. This is defined by the isCompleted prop on each step. The progress on each step is displayed by rendering a <ProgressBar> component in each <Step>. The value of the progress bar is given as a number representing percentage of completion. So why both a <ProgressBar> and isCompeted? Beacause: when used with a form, a step can be 100% filled out, but not submitted yet. It may also contain validation errors even though all fields are filled out.

On smaller screens where all the steps can not fit horizontally we use horizontal scrolling with clickable chevron icons that acts as scroll indicators/scroll click areas. These are not accessible through keyboard navigation, but this is intentional: keyboard users can just use the arrow keys to scroll instead. Screen reader users will not have any need for them either.

Screen.Recording.2025-12-12.at.13.28.14.mov

TBD

• Should this component support custom content instead of the numbers in the circles? We may add support for this later if we decide that this is something we should support.
• Should this component be used as non navigation / custom ul / ol? We need to discuss this.
• Should we extract all the styles to the grunnmuren-tailwind package? If so, we should probably start working on doing this for all components. We should also consider adding grunnmuren-tailwind as a peer dependency to grunnmuren-react (in reality it already is, because the react components are using classes and the theme set up by grunnmuren-tailwind)

[oscarcarlstrom]

Er mange changesets her, men denne komponenten er avhenig av alle disse endringene.