Skip to content

Commit 1ddc91c

Browse files
committed
Update README.md
1 parent baf18eb commit 1ddc91c

File tree

1 file changed

+55
-1
lines changed

1 file changed

+55
-1
lines changed

templates/delete-wizard/README.md

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
21
# Delete Wizard
32

43
![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/delete-wizard.svg)
4+
55
#### [View on MongoDB.design](https://www.mongodb.design/component/delete-wizard/live-example/)
66

77
## Installation
@@ -24,3 +24,57 @@ yarn add @leafygreen-ui/delete-wizard
2424
npm install @leafygreen-ui/delete-wizard
2525
```
2626

27+
```tsx
28+
<DeleteWizard>
29+
<DeleteWizard.Header
30+
pageTitle="Demo Delete Wizard"
31+
/>
32+
<DeleteWizard.Step requiresAcknowledgement>
33+
<DeleteWizard.StepContent>
34+
<div>Step 1 contents<div>
35+
</DeleteWizard.StepContent>
36+
<DeleteWizard.Footer
37+
primaryButtonProps={{
38+
children: 'Continue to next step',
39+
}}
40+
/>
41+
</DeleteWizard.Step>
42+
43+
<DeleteWizard.Step requiresAcknowledgement>
44+
<DeleteWizard.StepContent>
45+
<div>Step 2 contents<div>
46+
</DeleteWizard.StepContent>
47+
<DeleteWizard.Footer
48+
primaryButtonProps={{
49+
leftGlyph: <TrashIcon />,
50+
variant: 'danger',
51+
children: 'Delete my thing',
52+
onClick: handleDelete,
53+
}}
54+
/>
55+
</DeleteWizard.Step>
56+
</DeleteWizard>
57+
```
58+
59+
### DeleteWizard
60+
61+
Establishes a context, and only renders the `activeStep` (managed internally, or provided with the `activeStep` prop). Accepts a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children.
62+
63+
`DeleteWizard` and all sub-components include template styling.
64+
65+
### DeleteWizard.Header
66+
67+
A convenience wrapper around `CanvasHeader`
68+
69+
### DeleteWizard.Step
70+
71+
A convenience wrapper around `Wizard.Step` to ensure the correct context.
72+
Like the basic `Wizard.Step`, of `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. (see the Wizard and DeleteWizard demos in Storybook)
73+
74+
### DeleteWizard.StepContent
75+
76+
A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning
77+
78+
### DeleteWizard.Footer
79+
80+
A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template

0 commit comments

Comments
 (0)