a11y-theme-builder icon indicating copy to clipboard operation
a11y-theme-builder copied to clipboard

[TB] Create Stepper component

Open aaronreed708 opened this issue 7 months ago • 3 comments

Problem/Concern

Related to #820. The UI design that accompanies #820 introduces a stepper component that will be shown at the top of the Theme Builder pages as the user works their way through the 3 steps to define a design system. This stepper component should also be available to Theme Builder users to see how a stepper may be impacted by design system changes that they make. So this issue is to:

  • [ ] Introduce a Stepper as a component available for selection in the left nav contained in the Components tab.
  • [ ] When it is selected, a stepper should be displayed in the Example section displayed in the right nav panel with appropriate styling
    • [ ] appropriate default styling for MuiStepper-root, etc. should be defined in Theme.jsx

@lwnoble please comment in this issue as far as requirements. For example, which CSS variables should affect a Stepper? I assume its primary color will come from --button and text will use the --body1Xxxx values like Checkbox? Do you have any display variations that you want? I guess we'd want a 3 step stepper where the first step is complete, the second is current and the third has yet to happen? But do you want a vertical one or a stepper with just images? Should it have any hover behavior?

Proposed Solution

Implement the stepper behavior as shown in the wireframes beginning here: https://www.figma.com/design/Co8gYdDmE64Wv90eWy9FwE/Mentorship---Edit-Theme-Builder-Colors-and-Themes?node-id=218-22943&t=Apr853j3wmXxgTi0-4

aaronreed708 avatar Jul 26 '24 05:07 aaronreed708