Stepper Specification

Stepper Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Accessibility
6. Assumptions and Limitations
7. References

Owned by

Astrea

Developer Name: Martin Evtimov, Viktor Kombov

Designer Name

Requires approval from

• Peer Developer: Monika Kirkova | Date:
• Design Manager: Svilen Dimchevski | Date:

Signed off by

• Product Owner: Radoslav Mirchev | Date: 22-Aug-22
• Platform Architect Damyan Petev | Date:

Revision History

Version	Users	Date	Notes
1	Teodosia Hristodorova	Date 19-July-2022	Names of Developers and Designers
1.01	Teodosia Hristodorova	Date 19-July-2022	Initial specification version

1. Overview

Objectives

The stepper conveys the progression of a sequence of individual steps indicating how much of a workflow has been completed and how much is left. It usually shows as a vertical or horizontal line with connected, numbered elements indicating the individual steps. Another commonly used name for a stepper component is wizard.

Provide igc-stepper component that supports the following features:

• inform the user about the history of actions.
• inform the user about the current progress.
• inform the user about which and how many steps remain.
• show the direction of movement.
• support an arbitrary number of steps, usually, 3-5 are optimal.
• support numbering as a way to show the order of steps.
• support icons and visuals to better describe each individual step.
• support a horizontal layout for desktop and vertical for mobile.

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

• Sign off
• Available prototypes and Figma designs
• Created file structure in Indigo_Platform

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

• Story 1: As a developer, I want to be able to choose the stepper layout, so that I can show a horizontal one on desktop and a vertical one on smartphone screens.
• Story 2: As a developer, I want to be able to choose whether steps are mandatory or optional, so that I can have proper validation at the end of the flow.
• Story 3: As a developer, I want to be able to define arbitrary layout as the content for a step, so that I can create progressive forms and onboarding flows without being constrained.
• Story 4: As a developer, I want to be able to define the position of the title for step, so that I can place it before, after, above or below the visual indication.
• Story 5: As a developer, I want to be able to customize the visual step element, so that I can add a graphic element in it.
• Story 6: As a developer, I want to be able to choose the type of line that connects the steps. Possible options are dashed, solid and doted.
• Story 7: As a developer, I want to be able to define the stepper as strictly linear (gated mode vs. ungated mode where you navigate steps freely), so that I don't let users to move to the next step unless everything up to it has been completed.
• Story 8: As a developer, I want to be able to choose the animations applied to the stepper when the active step is changing.

End-user stories:

• Story 1: As an end-user, I want to have a clear visual indication of what I should expect from each step, so that I know which ones are relevant/important to me.
• Story 2: As an end-user, I want to have a clear visual indication for the step I am currently at, so that I know approximately how much is left.
• Story 3: As an end-user, I want to have a clear visual indication for completed and uncompleted steps, so that I can finish what is left.
• Story 4: As an end-user, I want to have a clear visual indication for optional steps, so that I can skip them if they are not relevant.
• Story 5: As an end-user, I want to navigate between the steps with the keyboard one at a time, so that I can fill a progressive form more quickly.
• Story 6: As an end-user, I want to observe the progress of a multistep process, so that I can e.g. track the delivery of an order.

3. Functionality

3.1. End-User Experience

The stepper is a collection of step header elements that let you navigate to different pieces of details for each step and the details view itself.

Nesting steppers into each other is frustrating and destroys the UX.

Design Handoff- https://www.figma.com/file/iBiSKAZJ56Z3Pd0zertjHb/Stepper-Design-Handoff?node-id=0%3A1

3.2. Developer Experience

• The developer should be able to add multiple steps.
• The developer should be able to customize the indicator of the steps.
• The developer should be able to customize the title of the steps.
• The developer should be able to customize the subtitle of the steps.
• The developer should be able to customize the content of the steps.

<igc-stepper>
    <igc-step>
       <div part="indicator"></div>
       <p part="title">Home</p>
       <p part="sub-title">Home Sub Title</p>
       <div>
          ...
       </div
    </igc-step>
</igc-stepper>

• The developer should be able to customize the active, invalid and completed indicator state.

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

Keys	Description
Arrow Up	Focuses the previous step in a vertical stepper.
Arrow Down	Focuses the next step in a vertical stepper.
Arrow Left	Focuses the previous step in a horizontal stepper.
Arrow Right	Focuses the next step in a horizontal stepper.
Home	Focuses the first step of the stepper.
End	Focuses the last step of the stepper.
Enter / Space	Activates the currently focused step.
Tab	Moves the focus to the next tabbable element.
Shift + Tab	Moves the focus to the previous tabbable element.

Note:

• By design when the user presses the Tab key over the step header the focus will move to the step content container. In case the container should be skipped the developer should set the content container tabInex to -1.

3.5. API

IgcStepperComponent

Options

Name	Description	Type	Default value	Valid values
steps	Gets the steps that are rendered in the stepper.	IgcStepComponent[]
orientation	Gets/sets the orientation of the stepper.	horizontal | vertical	horizontal
stepType	Gets/sets the type of the steps in the stepper.	indicator | title | full	indicator
titlePosition	Gets/sets the position of the titles in the stepper.Default value is bottom when the stepper is horizontally orientated and end when the layout is set to vertical.	bottom | top | end | start	bottom
linear	Whether the validity of previous steps should be checked and only in case, it's valid to be able to move forward or not.	boolean	false
contentTop	Whether the content of the steps should be displayed above the steps header when the stepper orientation is Horizontal.	boolean	false

Methods

Name	Description	Return type	Parameters
navigateTo	Activates the step given by index.	void	index: number
next	Activates the next enabled step.	void	N/A
prev	Activates the previous enabled step.	void	N/A
reset	Resets the stepper to its initial state.	void	N/A

Events

Name	Description	Cancelable	Parameters
igcActiveStepChanging	Emitted when the active step is about to change.	true	{ oldIndex: number, newIndex: number, owner: IgcStepperComponent}
igcActiveStepChanged	Emitted when the active step is changed.	false	{ index: number, owner: IgcStepperComponent}

IgcStepComponent

Options

Name	Description	Type	Default value	Valid values
index	Gets the step index inside of the stepper.	number
isValid	Gets/sets whether the step is valid.	boolean	true
active	Gets/sets whether the step is activе.	boolean	false
optional	Gets/sets whether the step is optional.	boolean	false
disabled	Gets/sets whether the step is interactable.	boolean	false
complete	Gets/sets whether the step is completed.	boolean	false

4. Test Scenarios

Basic

• Should render a stepper containing a sequence of steps
• Should not allow activating a step with the next/prev methods when disabled is set to true
• Should not allow moving forward to the next step in linear mode if the previous step is invalid
• Should emit ing and ed events when a step is activated
• Should be able to cancel the igcActiveStepChanging event
• Should expand a step through UI by activating it
• Should expand a step through API by activating it
• Should determine the steps that are marked as visited based on the active step
• Should determine the steps that are disabled in linear mode based on the validity of the active step

Appearance

• Should apply the appropriate class to a stepper in horizontal mode
• Should indicate the currently active step
• Should indicate that a step is completed
• Should indicate that a step is invalid
• Should render the visual step element according to the specified stepType
• Should place the title in the step element according to the specified title position when stepType is set to “full”
• Should indicate each step with a corresponding number when igxStepIndicator is not specified in the step template and stepType is either “indicator” or “full”
• Should be able to display the steps' content above the steps headers when the stepper is horizontally orientated
• Should render step indicator and title when such are defined in the template
• Should allow overriding the default invalid, completed and active indicators
• Should render dynamically added step and properly set the linear disabled steps with its addition
• Should activate the first accessible step and clear the visited steps collection when the stepper is reset

Keyboard Navigation

• Should navigate to the stepper (if the focus is before stepper) on TAB key press
• Should navigate to the stepper (if the focus is after stepper) on SHIFT + TAB key press
• Should navigate to the next step in vertical orientation on Arrow Down key press
• Should navigate to the previous step in vertical orientation on Arrow Up key press
• Should navigate to the next step in horizontal orientation on Arrow Right key press
• Should navigate to the previous step in horizontal orientation on Arrow Left key press
• Should navigate to first step on Home key press
• Should navigate to last step on End key press
• Should activate the currently focused step on Enter/Space key press
• Should specify tabIndex=”0” for the active step and tabIndex=”-1” for the other steps

Aria

• Should render proper role and orientation attributes for the stepper
• Should render proper aria attributes for each step

5. Accessibility

ARIA Support

• The HTML stepper element has an implicit role tablist.
• If the stepper element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a stepper element is horizontal.
• Each step element within the stepper element has a role tab.
• The content panel for each step element has a role tabpanel.
• Each step element has aria-controls property referring to its associated stepper element.
• The active step element has the state aria-selected set to true and all other step elements have it set to false.

RTL Support

6. Assumptions and Limitations

Assumptions	Limitation Notes

7. References

Specify all referenced external sources