Add a Stepper/Wizard component to Pajamas

Description

While working on some updates to the Jira integration, I found that a Stepper (or wizard like) type of integration would work best for users that are setting up the integration for the first time.

See related issue: gitlab-org/gitlab#221287

I would like to use this issue to collect feedback from other stage groups to understand:

If there is a need for a reusable stepper component?
If yes, will our teams requirements be satisfied by the standard Stepper types, mentioned in the resources section?

Reference:

Proposal:

Add a Stepper component.

Stepper

A Stepper (or Wizard) is a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones.

–Source: https://www.nngroup.com/articles/wizards/

Steppers convey progress through numbered steps. They can be useful in chunking information down to smaller amounts of information and into logical steps.

They may also display feedback message after a step is saved.

Usage

Should be used for processes that are performed only occasionally. For example, when signing up for a new account or setting up a third-party integration.

Do

When lots of data is requested from the user
Save users' time by pre-populate fields with when possible. For example, if in Step 1, we ask the user to sign into their Jira integration and on Step 2 we ask them for their Jira project they would like to link, we should provide them with either a dropdown that contains a list of their projects, or an auto-complete type of input form, vs. a static input field.
Group steps in a logic order

Don't

Nest Steppers
Create too many steps. Try to limit the amount of steps to 3-5

Types

Horizontal
Vertical
Linear
Non-linear
Non-linear (Expanded)

Horizontal

This variant is recommended and it best used with 5 steps or less.

Vertical

Use this variant when horizontal space is limited or when resizing the Horizontal variant down to mobile.

Material Design - vertical stepper example
Link to example

Linear

This is relates to how the Stepper behaves. Linear means that information needs to be entered in a specific order. For example, the user is required to enter the correct information in Step 1, in order to be able to proceed to Step 2.

Non-linear

Non-linear behavior allows the user to enter information out of order. For example, information can be first entered into Step 3, and then can be later entered into Step 1 and Step 2.

Vertical, Non-linear (Expanded)

This variant is exposes all the steps by default. This variant is great for flows that generally don't have more than 3 steps.

Figma file

View Figma file →

Checklist

Make sure the following are completed before closing the issue:

Edited Aug 10, 2021 by Libor Vanc