Skip to content

Commit b53e9f9

Browse files
committed
Creates basic Wizard.tsx component
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)
1 parent cbe1c5f commit b53e9f9

File tree

1 file changed

+1
-0
lines changed

1 file changed

+1
-0
lines changed

packages/wizard/src/Wizard/Wizard.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export function Wizard({
88
onStepChange,
99
children,
1010
}: WizardProps) {
11+
// TODO: replace with `useControlledValue`
1112
// Internal state for uncontrolled mode
1213
const [internalActiveStep, setInternalActiveStep] = useState<number>(0);
1314

0 commit comments

Comments
 (0)