Skip to content

Commit e469e71

Browse files
committed
Update wizard.md
1 parent 801c490 commit e469e71

File tree

1 file changed

+72
-1
lines changed

1 file changed

+72
-1
lines changed

.changeset/wizard.md

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,75 @@
22
'@leafygreen-ui/wizard': minor
33
---
44

5-
Initial Wizard package release
5+
Initial Wizard package release.
6+
7+
```tsx
8+
<Wizard>
9+
<Wizard.Step>
10+
<div>Step 1 contents<div>
11+
<Wizard.Footer
12+
primaryButtonProps={{
13+
children: 'Continue',
14+
variant: 'primary'
15+
}}
16+
/>
17+
</Wizard.Step>
18+
19+
<Wizard.Step requiresAcknowledgement>
20+
<div>Step 2 contents<div>
21+
<Wizard.Footer
22+
primaryButtonProps={{
23+
children: 'Delete',
24+
variant: 'danger'
25+
}}
26+
/>
27+
</Wizard.Step>
28+
</Wizard>
29+
```
30+
31+
### Wizard
32+
The `Wizard` component establishes a context with an internal state, and will render only the `activeStep`.
33+
34+
You can also control the Wizard externally using the `activeStep` and `onStepChange` callback.
35+
Note: if you externally control the state, you opt out of the automatic range validation, and you must ensure that the provided `activeStep` index is valid relative to the `Wizard.Step`s provided.
36+
37+
### Wizard.Step
38+
Defines a discrete step in the wizard. Only the step matching the internal (or provided) `activeStep` index will be displayed.
39+
40+
Both `Wizard` and `Wizard.Step` are only wrapped in a `Fragment` to allow for more versatile styling.
41+
42+
#### `requiresAcknowledgement`
43+
44+
If `requiresAcknowledgement` is true, the step must have `isAcknowledged` set in context, (or passed in as a controlled prop) for the Footer's primary button to be enabled.
45+
46+
e.g.
47+
```tsx
48+
// App.tsx
49+
<Wizard.Step requiresAcknowledgement>
50+
<MyWizardStepContents />
51+
<Wizard.Footer
52+
primaryButtonProps={{
53+
children: 'Delete', // This button will be disabled until the step has been acknowledged
54+
}}
55+
/>
56+
</Wizard.Step>
57+
58+
// MyWizardStepContents.tsx
59+
const MyWizardStepContents = () => {
60+
const { isAcknowledged, setAcknowledged } = useWizardStepContext();
61+
62+
return (
63+
<>
64+
<Checkbox
65+
label="Acknowledge"
66+
checked={isAcknowledged}
67+
onChange={(e)=> setAcknowledged(e.target.checked)}
68+
/>
69+
</>
70+
)
71+
}
72+
```
73+
74+
### Wizard.Footer
75+
The `Wizard.Footer` is a convenience wrapper around the `FormFooter` component. Each step should render its own Footer component
76+

0 commit comments

Comments
 (0)