Skip to content

Commit 4fab471

Browse files
TheSonOfThompTheSonOfThomp
authored
[LG-5562] feat(Wizard) Updates Wizard API (#3336)
* rm step wrapper * rm descendants dep * export WizardProvider * delete-wizard-demo private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx * Update pnpm Update package.json * fix wizard changes * Adds `requiresAcknowledgement` prop to Wizard.Step * Implements `isAcknowledged` state inside provider * Update Wizard.stories.tsx * rm delete demo * Update wizard.md * rm temp changesets * Update README.md * Update WizardStep.spec.tsx * footer tests * Update Wizard.spec.tsx * update package json * update provider props * revert toast changes? * Update .npmrc * Update pnpm-lock.yaml * Update WizardStep.spec.tsx * exports form footer types * Update WizardFooter.types.ts * adds `totalSteps` to wizard context * fix bad merge * updates readme * updates tsdoc * fixes tests * fixes ack reset test * Update WizardStep.spec.tsx * fixes stories
1 parent cb44c9e commit 4fab471

26 files changed

+1010
-304
lines changed

‎.changeset/form-footer-interfaces.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/form-footer': minor
3+
---
4+
5+
Exports button prop interfaces

‎.changeset/wizard.md‎

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

5-
Initial Wizard package release
5+
Initial Wizard package release.
6+
7+
See [README.md](./README.md) for usage guidelines

‎packages/form-footer/src/FormFooter.types.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,30 @@ type OmittedSplitButtonProps = Omit<
2020
'children' | 'variant'
2121
>;
2222

23-
type BackStandardButtonProps = ButtonPropsOmittingVariant & {
23+
export type BackStandardButtonProps = ButtonPropsOmittingVariant & {
2424
variant?: Extract<ButtonVariant, 'default' | 'dangerOutline'>;
2525
};
26-
type BackSplitButtonProps = OmittedSplitButtonProps & {
26+
export type BackSplitButtonProps = OmittedSplitButtonProps & {
2727
variant?: Extract<SplitButtonVariant, 'default' | 'danger'>;
2828
};
29-
type BackButtonProps = BackStandardButtonProps | BackSplitButtonProps;
29+
export type BackButtonProps = BackStandardButtonProps | BackSplitButtonProps;
3030

31-
type CancelStandardButtonProps = ButtonPropsOmittingVariant;
32-
type CancelSplitButtonProps = OmittedSplitButtonProps;
33-
type CancelButtonProps = CancelStandardButtonProps | CancelSplitButtonProps;
31+
export type CancelStandardButtonProps = ButtonPropsOmittingVariant;
32+
export type CancelSplitButtonProps = OmittedSplitButtonProps;
33+
export type CancelButtonProps =
34+
| CancelStandardButtonProps
35+
| CancelSplitButtonProps;
3436

35-
type PrimaryStandardButtonProps = ButtonPropsOmittingVariant &
37+
export type PrimaryStandardButtonProps = ButtonPropsOmittingVariant &
3638
ButtonPropsWithRequiredChildren & {
3739
variant?: Extract<ButtonVariant, 'primary' | 'danger'>;
3840
};
39-
type PrimarySplitButtonProps = OmittedSplitButtonProps & {
41+
export type PrimarySplitButtonProps = OmittedSplitButtonProps & {
4042
variant?: Extract<SplitButtonVariant, 'primary' | 'danger'>;
4143
};
42-
type PrimaryButtonProps = PrimaryStandardButtonProps | PrimarySplitButtonProps;
44+
export type PrimaryButtonProps =
45+
| PrimaryStandardButtonProps
46+
| PrimarySplitButtonProps;
4347

4448
export interface FormFooterProps
4549
extends React.ComponentProps<'footer'>,

‎packages/form-footer/src/index.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,16 @@ export {
55
default,
66
default as FormFooter,
77
} from './FormFooter';
8-
export { type FormFooterProps } from './FormFooter.types';
8+
export {
9+
type BackButtonProps,
10+
type BackSplitButtonProps,
11+
type BackStandardButtonProps,
12+
type CancelButtonProps,
13+
type CancelSplitButtonProps,
14+
type CancelStandardButtonProps,
15+
type FormFooterProps,
16+
type PrimaryButtonProps,
17+
type PrimarySplitButtonProps,
18+
type PrimaryStandardButtonProps,
19+
} from './FormFooter.types';
920
export { getLgIds } from './utils';

‎packages/wizard/README.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,88 @@ yarn add @leafygreen-ui/wizard
2323
```shell
2424
npm install @leafygreen-ui/wizard
2525
```
26+
27+
```tsx
28+
<Wizard>
29+
<Wizard.Step>
30+
<div>Step 1 contents<div>
31+
<Wizard.Footer
32+
primaryButtonProps={{
33+
children: 'Continue',
34+
variant: 'primary'
35+
}}
36+
/>
37+
</Wizard.Step>
38+
39+
<Wizard.Step requiresAcknowledgement>
40+
<div>Step 2 contents<div>
41+
<Wizard.Footer
42+
primaryButtonProps={{
43+
children: 'Delete',
44+
variant: 'danger'
45+
}}
46+
/>
47+
</Wizard.Step>
48+
</Wizard>
49+
```
50+
51+
### Wizard
52+
53+
The `Wizard` component establishes a context with an internal state, and will render only the `activeStep`.
54+
55+
You can also control the Wizard externally using the `activeStep` and `onStepChange` callback.
56+
57+
```tsx
58+
<Wizard
59+
activeStep={0}
60+
onStepChange={() => {
61+
/* do something */
62+
}}
63+
/>
64+
```
65+
66+
Note: When the `activeStep` is externally controlled, ensure that the provided `activeStep` index is valid relative to the count of steps available. If the zero-indexed `activeStep` value exceeds the count of steps provided (or is negative), nothing will render inside the Wizard. (i.e. passing `activeStep={2}` to a Wizard with only 2 steps, nothing will render)
67+
68+
### Wizard.Step
69+
70+
Defines a discrete step in the wizard. Only the step matching the internal (or provided) `activeStep` index will be displayed.
71+
72+
Both `Wizard` and `Wizard.Step` are only wrapped in a `Fragment` to allow for more versatile styling.
73+
74+
#### `requiresAcknowledgement`
75+
76+
If `requiresAcknowledgement` is true, the step must be acknowledged for the Footer's primary button to be enabled. By default (or when explicitly set to `false`) the primary button will always be enabled.
77+
78+
To set a step to be acknowledged, call `setIsAcknowledged` provided from the `useWizardStepContext` hook.
79+
e.g.
80+
81+
```tsx
82+
// App.tsx
83+
<Wizard.Step requiresAcknowledgement>
84+
<MyWizardStepContents />
85+
<Wizard.Footer
86+
primaryButtonProps={{
87+
children: 'Delete', // This button will be disabled until the step has been acknowledged
88+
}}
89+
/>
90+
</Wizard.Step>;
91+
92+
// MyWizardStepContents.tsx
93+
const MyWizardStepContents = () => {
94+
const { isAcknowledged, setAcknowledged } = useWizardStepContext();
95+
96+
return (
97+
<>
98+
<Checkbox
99+
label="Acknowledge"
100+
checked={isAcknowledged}
101+
onChange={e => setAcknowledged(e.target.checked)}
102+
/>
103+
</>
104+
);
105+
};
106+
```
107+
108+
### Wizard.Footer
109+
110+
The `Wizard.Footer` is a convenience wrapper around the `FormFooter` component. Each step should render its own Footer component

‎packages/wizard/package.json‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
21
{
32
"name": "@leafygreen-ui/wizard",
4-
"version": "0.0.1",
3+
"version": "0.1.0-local.1",
54
"description": "LeafyGreen UI Kit Wizard",
65
"main": "./dist/umd/index.js",
76
"module": "./dist/esm/index.js",
@@ -28,21 +27,28 @@
2827
"access": "public"
2928
},
3029
"dependencies": {
31-
"@leafygreen-ui/button": "workspace:^",
3230
"@leafygreen-ui/compound-component": "workspace:^",
33-
"@leafygreen-ui/descendants": "workspace:^",
3431
"@leafygreen-ui/emotion": "workspace:^",
3532
"@leafygreen-ui/form-footer": "workspace:^",
3633
"@leafygreen-ui/hooks": "workspace:^",
3734
"@leafygreen-ui/lib": "workspace:^",
3835
"@leafygreen-ui/polymorphic": "workspace:^",
3936
"@leafygreen-ui/tokens": "workspace:^",
40-
"@leafygreen-ui/typography": "workspace:^",
4137
"@lg-tools/test-harnesses": "workspace:^"
4238
},
43-
"devDependencies" : {
39+
"devDependencies": {
40+
"@faker-js/faker": "^8.0.0",
41+
"@leafygreen-ui/button": "workspace:^",
42+
"@leafygreen-ui/badge": "workspace:^",
43+
"@leafygreen-ui/banner": "workspace:^",
44+
"@leafygreen-ui/card": "workspace:^",
45+
"@leafygreen-ui/checkbox": "workspace:^",
46+
"@leafygreen-ui/expandable-card": "workspace:^",
4447
"@leafygreen-ui/icon": "workspace:^",
45-
"@faker-js/faker": "^8.0.0"
48+
"@leafygreen-ui/loading-indicator": "workspace:^",
49+
"@leafygreen-ui/segmented-control": "workspace:^",
50+
"@leafygreen-ui/skeleton-loader": "workspace:^",
51+
"@leafygreen-ui/typography": "workspace:^"
4652
},
4753
"homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/wizard",
4854
"repository": {

0 commit comments

Comments
 (0)