ProgressSteps

Usage

The ProgressSteps component visually represents a user's progress through a sequential process, such as a multi-step form or a tutorial.

• Use for linear processes with a clear start and end.
• Avoid for non-sequential or optional steps.
• Ensure the steps are clear and concise.
• The ProgressSteps can function as a navigation tool, enabling users to return to previously completed steps. This feature is particularly useful in processes where revisiting earlier steps is necessary for editing or reviewing purposes.

Types

There are 2 types of Progress Steps based on the use-case:

• Labeled Progress Steps - are used to visually represent each step of a process, accompanied by textual descriptions. They are used when detailed guidance is needed, especially in complex, unfamiliar workflows or for first-time users.
• Unlabeled Progress Steps - visually indicate the progress of a process without textual descriptions for each step. They are suitable for minimalistic designs, familiar processes, or situations where screen space is limited, like in mobile applications.

Anatomy and Behavior

ProgressSteps consists of more than one (1) Progress Step Items connected in between with (2) Progress Lines.

1. Progress Step Item - depicts each individual step in the process. It can optionally be clickable and represent the clickable area. It consists of 3 parts:
   1. Container - clickable area.
   2. Status indicator - changes states visually depending on the status of the completion of the steps in the process. These are defined in each project individually.
   3. Label - concisely and clearly describes each step in the process. It can only wrap down and have maximum of 3 lines. In cases where the words are too long try to find shorter alternatives to avoid letting the word to be too close to the next Progress Step Item Label.
2. Progress Lines - connects the Progress Step Items and also indicates with color change the status of the completion of the step.

Behavior:

• Clickable steps to navigate to any completed step.
• Automatic progression upon completing a step.
• It is possible to jump along different steps in the process only if they were already completed, and this will not affect their status unless a change is made in a previous step in the process that would affect the subsequent steps. In this case the subsequent steps change the status back to being Uncompleted (greyed out) and you can not jump along them unless you finish the steps in the correct order. However, for better usability, previously fulfilled user inputs in the subsequent steps should be stored as a cache in the respective input fields, unless in the context of the application individual fields are reset to null on purpose (due to dependence on the modified previous steps).

States

• Progress Step Item has Completed, Current and Uncompleted states (steps in the process). Completed state can either be Completed last step or Not, as a boolean property. Completed last step behaves and has the same properties as the Completed state, but can only be assigned to the last step item in the process and it is also visually distinguished to represent that the whole process is finished.
• Only Completedstates (Completed last step and Not) can be clickable and therefore can have :hover, :active, :focus and disabled states.
• Uncompleted states are unreachable (Disabled) steps in the process, shown as faded.

Gaps and Sizes

PROGRESS STEP ITEM

• Container width: Hugs the contents (adapts to the label width).
• Container height: Hugs the contents (adapts to the total heights of status indicator, gap and label height.)
• Label width: Hugs the required text width, but with the min. width of 4XL and max. width of 5XL. Text that is more than that will wrap down.
• Label height: Hugs the text height and can have maximum of 3 lines when text wraps down (not recommended).
• Status indicator diameter: M plus
• Status indicator margins: 2XS
• Gap between Label and Status indicator: S

PROGRESS STEPS

• Progress lines length: Responsive - fills the available space that is set by designer for the overall ProgressSteps bar.
• Progress line thickness: Unit
• Gap between Progress line and Progress Step Item: negative L (or if it is counted from the Status indicators to the start of the line then S) (???)
• Alignment: Progress lines are center aligned with the Status indicators (this is achieved in Figma by introducing a S padding on top of the Progress line).
• Overall width of the ProgressSteps bar: adjusted by designer for each use-case.

INFO

Note: Text Input component’s width scales responsively to adapt to the viewport and screen size. Therefore maximum and minimum allowed width should be adjusted according to the use case in every application.

Tokens

SCSS Variable

Value

$progressSteps-uncompleted-statusIndicator-color

--color-grey-80

$progressSteps-uncompleted-label-color

--color-grey-70

$progressSteps-uncompleted-progressLine-color

--color-grey-80

$progressSteps-current-color

--bds-brand-primary-color

$progressSteps-completed-color

--bds-brand-primary-color

$progressSteps-completed-statusIndicator-color--locked

--bds-brand-bgColor--locked

$progressSteps-completed-label-color--locked

--bds-brand-primary-color-locked

$progressSteps-completed-progressLine-color

--bds-brand-primary-color

$progressSteps-completed-statusIndicator-boxShadow

--embossed-1--grey-95

$progressSteps-completed-statusIndicator-boxShadow--hover

--embossed-2--grey-95

$progressSteps-visited-progressLine-color

--bds-brand-primary-color

$progressSteps-unvisited-progressLine-color

--color-grey-80

$progressSteps-label-text: %label-1;

Properties

export interface ProgressStepsProps {
  modelValue: string;
  steps: ProgressStepItemProps[];
  //whether or not labels should be displayed
  labeled?: boolean;
};

export interface ProgressStepItemProps {
  id: string;
  text?: string;
  disabled?: boolean;
  completed: boolean;
  // if not provided, it will be calculated based on the index
  lastItem?: boolean;
}

Configurations

Company	Type	ProgressSteps
		small	medium	big
	-	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed
	labeled	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed
	-	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed
	labeled	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed
	-	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed
	labeled	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed
	-	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed
	labeled	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed	Uncompleted Current Completed intermediate Completed

In order to test this component we simulate a button that takes the user to the corresponding next pages of the process. The button can only be clicked, once the corresponding step is completed (this would most likely be triggered by an event that is emitted when all necessary input has been given by the user).

Developer notes

ProgressSteps holds a modelValue that refers to the current step id. It is a modelValue (two-way binding) because the id will be updated by the component in case the user clicks on a completed step.

const currentStep = ref<string>('current');

const steps: ProgressStepsProps['steps'] = $ref([
  { text: 'Uncompleted', id: 'uncompleted', disabled: false, completed: false },
  { text: 'Current', id: 'current', disabled: false, completed: false },
  { text: 'Completed intermediate', id: 'intermediate', disabled: false, completed: true },
  { text: 'Completed', id: 'completed', disabled: false, completed: true, lastItem: true },
]);

<template>
  <ProgressSteps 
    v-model="currentStep" 
    :steps="steps" 
  />
</template>