Wizard (update)

[ulde01]

Design decision 2021-05-05

Changes

• The wizard now comes with a logotype
• The header takes up the full width and contains the wizard name
• The step navigation has been increased to 320 px (20 rem) width
• The states in the step navigation have been clarified and also communicates the states with icons
• The step buttons have arrows and are sticky in desktop
• The close-button has a circular background on hover (desktop). The same close-button is always visible in a mobile design

Page in Design Library

https://designlibrary.sebgroup.com/components/component-wizard

Change log in Github

https://github.com/sebgroup/ng-wizard/releases

Reasoning

The wizard has been built so that more teams can reuse the same code. At the same time we gave the design a face lift.

If you're using angular or if you're in need of a wizard as part of a separate flow, we suggest that you use our new wizard component for angular which makes it really easy to create wizards using standard routes in angular (one route =one step).

If this issue is irrelevant to you, please comment and close. Thank you!
/Ulrika