mi6
Adding error variant to Ic-Stepper
Summary
Adding error and warning options for Ic-Stepper
💬 Description
Currently Ic-Stepper only has blue for current and green for success. Adding options for error and warning to reflect the state of that page.
💰 Use value
It will help give it more functionality and allow for users to clearly see if there are warnings or errors on certain pages. Increases the usability of steppers and users can clearly see which pages have issues. Users don't have to click through the pages to see issues, they can simply tell from the stepper that a certain page has issues.
📝 Acceptance Criteria
If a page has required fields for example and they haven't been filled but other boxes on that page perhaps have been filled, the stepper should indicate theres an error on that page. If a page has a reason to showing a yellow alert, then in the stepper that page icon should indicate warning.
✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance If there's written guidance or documentation, include a link to it here.
Additional info
Tell us anything else useful to help us understand your suggestion.
- Renamed Atoms/Step property to State for consistency
- Added new states to affected atoms for warning and error, keeping style and colours consistent with elsewhere in design system
For reference, steppers with states exist in other design systems;
- https://carbondesignsystem.com/components/progress-indicator/usage/
- https://www.lightningdesignsystem.com/2e1ef8501/p/64d280-progress-indicator
- https://cloudscape.design/components/steps/?tabId=playground
Stepper warning text isn't WCAG against page header colour, would need to change status/warning/default to change from Yellow/900 to Yellow/1000
Static chip contrast also doesn't meet WCAG against header background as a UI component ...could change to arch/500
- Remove warning state, stepper is not intended to have partially completed steps
- Error state is fine, but guidance would need to ensure page displays full error detail (eg against a form field missing mandatory info)