Stepper

[Febakke]

Related issues or relevant information?

• Design new concept for form navigation Altinn/app-frontend-react#97
• As a user I would like to see my progress in the application Altinn/app-frontend-react#188 (Progress indicator made for "Elevundersøkelsen")

Related research:

• https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7127577055029796864-0JVK?utm_source=share&utm_medium=member_ios

Other Stepper components

• Carbon progress-indicator: https://carbondesignsystem.com/components/progress-indicator/usage/
• Carbon progress-bar: https://carbondesignsystem.com/components/progress-bar/usage/
• Gov UK: https://design-system.service.gov.uk/patterns/step-by-step-navigation/
• Fælles designsystem: https://designsystem.dk/komponenter/trinindikator/
• Entur: https://design.entur.org/komponenter/navigasjon/stepper
• Nav: https://aksel.nav.no/komponenter/core/stepper
• Atlassian: https://atlassian.design/components/progress-tracker/examples (See also progress bar and progress indicator)
• Mattilsynet: https://design.mattilsynet.no/?path=/docs/designsystem-steps--docs&globals=theme:Light+large
• Gjensidige: https://www.gjensidige.builders/docs/core/?path=/story/packages-builders-components-progress--step-horizontal

Specification and requirements

• Add specification and requirements

Issue: #85

[mrosvik]

See examples from Enova and Udir in Figma:

[eirikbacker]

In Mattilsynet, we experience stepper is not necessarily the correct pattern to show progress of forms, as it takes a lot of space, needs to vary between mobile and desktop and can be confusing if steps appear/disapear. Stepper is very practical to show timelines though.
Inspiration from Fortum: