You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Prompt:
In the newly created package, create the Wizard component.
Note: these docs mention `Wizard.Step` and `Wizard.Footer`. DO NOT create these yet. They will be created later
The `@leafygreen-ui/wizard` is a general-purpose, multi-step page template, designed to create guided in-app flows and wizards:
Based on the MultiStepWizard component in MMS, and intended to be used in the Product Deletion template.
Feature Overview:
- Takes in all Steps in the flow as children.
- Renders the appropriate content for the current step
- Internally handles step changing (with optional external control)
Non-goals:
- We will not be implementing this across MMS (MultiStepWizard is currently used in 26 files)
- This will not support different url routes per step
Wizard component
The root flow component. Controls the rendering of the appropriate step based on a controlled prop, or uncontrolled internal state.
Example
```tsx
const [activeStep, setActiveStep] = useState(0)
<Wizard activeStep={activeStep}>
<Wizard.Step
title="Step 1"
description={<>Some description with a <Link>link</Link></>}
>
Some Content. Lorem ipsum dolor.
</Wizard.Step>
<Wizard.Step />
<Wizard.Step />
<Wizard.Footer
backButtonProps={{ onClick: setActiveStep(x--) }}
cancelButtonProps={{}}
primaryButtonProps={{ onClick: setActiveStep(x++), variant: 'danger', disabled }}
/>
</Wizard>
```
Props:
```ts
activeStep?: number;
onStepChange?: (step: number) => void
showStepper?: boolean; // omit for v1
```
State:
`[activeStep, setActiveStep] = useState<number> // if none provided as a prop`
Events:
- `onStepChange` : fired when the activeStep changes
- this should still fire when controlled?
Rendering:
- Renders the appropriate Step based on the activeStep prop/state
- Renders the Footer element, with enabled/hidden buttons based on the activeStep
- If activeStep === 0, hides back button
- Injects setActiveStep into Back and Primary buttons (if uncontrolled)
0 commit comments