Stepper component

[benlister-okta]

DES-6996

Summary

Adds Stepper component

• Supports vertical and horizontal layouts
• Variants: numeric (1) and non-numeric •
• Supports optionally clickable steps (both all clickable or only completed steps clickable)
• Has both a label and customizable description field
• Has optional pagination-like navigation controls (next/previous as well as "dot" navigation, like on a carousel)
• This component is based off MUI Stepper

Component checklist

Code structure

• Organize code using a modular component architecture.
• Use semantic HTML for clear and meaningful structure.
• Break down complex components into smaller, reusable parts.

Accessibility implementation

• Apply ARIA attributes to indicate roles and relationships.
• Test focus management and ensure interactive elements are keyboard accessible.
• Provide visual alternatives for auditory elements.

Internationalization (i18n) implementation

• Separate any text content from the component's code for translation.

Documentation

• Include code snippets, demos, and examples for various use cases.
• Provide guidance on customization and handling special cases.

Finalize code

• Interaction designers, UI eng and visual designers need to review that the Storybook code matches the intended Figma design
• Interaction designers need to confirm Storybook code matches Supernova
• Interaction and visual designers merge Figma and code at the same time

QA

• Include necessary unit tests to continuously verify component functionality
• Screen reader test error/success states or message
• Test edge cases and error scenarios to validate robustness