Stepper component

[leonid]

A stepper component is a user interface element that guides users through a multi-step process.

Here are the key features a stepper component must have:

• Step Indicators: Visual indicators for each step, showing the current step and the steps completed.
• Navigation Controls: Buttons or controls to navigate between steps (e.g., Next, Previous).
• Step Content: The ability to display different content for each step.
• Validation: Optional validation for each step to ensure the user completes necessary actions before proceeding.
• Progress Tracking: Visual feedback on the user's progress through the steps.
• Customizable: Ability to customize the appearance and behavior of the stepper.
• Accessibility: Keyboard navigation and screen reader support to ensure accessibility.
• Linear and Non-linear Modes: Support for both linear (sequential) and non-linear (non-sequential) step navigation.
• Responsive Design: Adaptable to different screen sizes and orientations.
• Error Handling: Display error messages or indicators for steps with validation errors.

These features ensure that the stepper component is versatile, user-friendly, and accessible.

Requirements

• Implement components: Stepper, StepperItem
• Implement horizontal and vertical modes
• Add Step hooks, like before-step-enter or validate
• Use v-model to provide selected Step
• Implement sequential and non-linear step selection
• Provide scoped slot for custom Step content
• Apply styles to ensure the components is visually appealing and responsive.
• Add demos according design mockups
• Provide unit tests for every new source code
• Provide documentation with describing types in stepper.doc.md

Optional:

1. Add stories
2. Add visual regression tests
3. Add performance tests

Special requests

• Stepper label must fill full width of parent container

Mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=815-490

Checklist

• Features
• Typescript types
• Unit tests
• Storybook (optional)
• Documentation