Skip to content

Commit 63eb3fb

Browse files
TheSonOfThompTheSonOfThomp
committed
Exports DeleteWizard . Header and Step wrappers
1 parent 7060296 commit 63eb3fb

File tree

12 files changed

+246
-62
lines changed

12 files changed

+246
-62
lines changed

‎.changeset/delete-wizard-1.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
'@lg-templates/delete-wizard': minor
33
---
44

5-
Adds DeleteWizardStepContents
5+
Adds `DeleteWizardStepContents`

‎.changeset/delete-wizard-2.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@lg-templates/delete-wizard': minor
3+
---
4+
5+
Exports `DeleteWizard.Header` and `DeleteWizard.Step` wrappers. Re-exports wizard hooks to ensure correct context

‎templates/delete-wizard/src/DeleteWizard.stories.tsx‎

Lines changed: 95 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,123 @@
1+
/* eslint-disable no-console */
12
import React from 'react';
23
import { faker } from '@faker-js/faker';
34
import { StoryObj } from '@storybook/react';
45

56
import { css } from '@leafygreen-ui/emotion';
67
import BeakerIcon from '@leafygreen-ui/icon/Beaker';
8+
import TrashIcon from '@leafygreen-ui/icon/Trash';
79
import { BackLink, Body } from '@leafygreen-ui/typography';
810

11+
import { ExampleStepContent } from './testUtils/ExampleStepContent';
912
import { DeleteWizard } from '.';
1013

1114
faker.seed(0);
15+
const demoResourceName = faker.database.mongodbObjectId();
16+
const demoSteps = [
17+
{
18+
description: faker.lorem.paragraph(),
19+
content: faker.lorem.paragraphs(24),
20+
},
21+
{
22+
description: faker.lorem.paragraph(),
23+
content: faker.lorem.paragraphs(24),
24+
},
25+
];
1226

1327
export default {
1428
title: 'Templates/DeleteWizard',
1529
component: DeleteWizard,
1630
};
1731

1832
export const LiveExample: StoryObj<typeof DeleteWizard> = {
19-
render: _args => (
20-
<div
21-
className={css`
22-
margin: -100px;
23-
`}
24-
>
25-
<DeleteWizard
33+
parameters: {
34+
controls: {
35+
exclude: ['children', 'onStepChange'],
36+
},
37+
},
38+
args: {
39+
activeStep: undefined,
40+
},
41+
render: args => {
42+
const handleCancel = () => {
43+
console.log('[STORYBOOK]: Cancelling wizard. Reloading iFrame');
44+
window.location.reload();
45+
};
46+
47+
const handleDelete = () => {
48+
alert('[STORYBOOK]: Deleting thing!');
49+
console.log('[STORYBOOK]: Deleting thing! Reloading iFrame');
50+
window.location.reload();
51+
};
52+
53+
return (
54+
<div
2655
className={css`
27-
outline: 1px solid red;
28-
height: 100vh;
29-
width: 100vw;
56+
margin: -100px;
3057
`}
3158
>
32-
<DeleteWizard.Header
33-
pageTitle="Demo Wizard"
34-
resourceName={faker.database.mongodbObjectId() + '4'}
35-
resourceIcon={<BeakerIcon />}
36-
backLink={<BackLink href="#">Back</BackLink>}
59+
<DeleteWizard
60+
activeStep={args.activeStep}
3761
className={css`
38-
margin-inline: 72px;
62+
height: 100vh;
63+
width: 100vw;
3964
`}
40-
/>
41-
<DeleteWizard.Step>
42-
<DeleteWizard.StepContent
65+
>
66+
<DeleteWizard.Header
67+
pageTitle="Demo Delete Wizard"
68+
resourceName={demoResourceName}
69+
resourceIcon={<BeakerIcon />}
70+
backLink={<BackLink href="#">Back</BackLink>}
4371
className={css`
4472
margin-inline: 72px;
4573
`}
46-
>
47-
{faker.lorem
48-
.paragraphs(12)
49-
.split('\n')
50-
.map((p, i) => (
51-
<Body key={i}>{p}</Body>
52-
))}
53-
</DeleteWizard.StepContent>
54-
<DeleteWizard.Footer
55-
primaryButtonProps={{
56-
children: 'Continue',
57-
}}
5874
/>
59-
</DeleteWizard.Step>
60-
</DeleteWizard>
61-
</div>
62-
),
75+
<DeleteWizard.Step requiresAcknowledgement>
76+
<DeleteWizard.StepContent>
77+
<ExampleStepContent
78+
index={0}
79+
description={demoSteps[0].description}
80+
content={demoSteps[0].content.split('\n').map((p, i) => (
81+
<Body key={i}>{p}</Body>
82+
))}
83+
/>
84+
</DeleteWizard.StepContent>
85+
<DeleteWizard.Footer
86+
cancelButtonProps={{
87+
children: 'Cancel wizard',
88+
onClick: handleCancel,
89+
}}
90+
primaryButtonProps={{
91+
children: 'Continue to next step',
92+
}}
93+
/>
94+
</DeleteWizard.Step>
95+
96+
<DeleteWizard.Step requiresAcknowledgement>
97+
<DeleteWizard.StepContent>
98+
<ExampleStepContent
99+
index={1}
100+
description={demoSteps[1].description}
101+
content={demoSteps[1].content.split('\n').map((p, i) => (
102+
<Body key={i}>{p}</Body>
103+
))}
104+
/>
105+
</DeleteWizard.StepContent>
106+
<DeleteWizard.Footer
107+
cancelButtonProps={{
108+
children: 'Cancel wizard',
109+
onClick: handleCancel,
110+
}}
111+
primaryButtonProps={{
112+
leftGlyph: <TrashIcon />,
113+
variant: 'danger',
114+
children: 'Delete my thing',
115+
onClick: handleDelete,
116+
}}
117+
/>
118+
</DeleteWizard.Step>
119+
</DeleteWizard>
120+
</div>
121+
);
122+
},
63123
};

‎templates/delete-wizard/src/DeleteWizard/DeleteWizard.tsx‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,62 @@ import {
55
findChild,
66
} from '@leafygreen-ui/compound-component';
77
import { cx } from '@leafygreen-ui/emotion';
8-
import { Wizard } from '@leafygreen-ui/wizard';
8+
import { useWizardContext, Wizard } from '@leafygreen-ui/wizard';
99

10+
import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
1011
import { wizardWrapperStyles } from './DeleteWizard.styles';
1112
import { DeleteWizardProps } from './DeleteWizard.types';
1213
import { DeleteWizardFooter } from './DeleteWizardFooter';
13-
import {
14-
DeleteWizardHeader,
15-
DeleteWizardHeaderKey,
16-
} from './DeleteWizardHeader';
17-
import { DeleteWizardStepContents } from './DeleteWizardStepContents';
14+
import { DeleteWizardHeader } from './DeleteWizardHeader';
15+
import { DeleteWizardStep } from './DeleteWizardStep';
16+
import { DeleteWizardStepContent } from './DeleteWizardStepContents';
17+
18+
/**
19+
* A re-export of `useWizardContext` specifically for this DeleteWizard
20+
*/
21+
export const useDeleteWizardContext = useWizardContext;
1822

23+
/**
24+
* The parent DeleteWizard component.
25+
* Pass a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children
26+
*/
1927
export const DeleteWizard = CompoundComponent(
20-
({ children, className }: DeleteWizardProps) => {
21-
const header = findChild(children, DeleteWizardHeaderKey);
28+
({ activeStep, onStepChange, children, className }: DeleteWizardProps) => {
29+
const header = findChild(children, DeleteWizardSubComponentKeys.Header);
2230

2331
return (
2432
<div className={cx(wizardWrapperStyles, className)}>
2533
{header}
26-
<Wizard>{children}</Wizard>
34+
<Wizard activeStep={activeStep} onStepChange={onStepChange}>
35+
{children}
36+
</Wizard>
2737
</div>
2838
);
2939
},
3040
{
3141
displayName: 'DeleteWizard',
42+
/**
43+
* A wrapper around the {@link CanvasHeader} component for embedding into a DeleteWizard
44+
*/
3245
Header: DeleteWizardHeader,
33-
Step: Wizard.Step,
34-
StepContent: DeleteWizardStepContents,
46+
47+
/**
48+
* A simple wrapper around Wizard.Step to ensure correct Wizard context
49+
*/
50+
Step: DeleteWizardStep,
51+
52+
/**
53+
* A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning
54+
*/
55+
StepContent: DeleteWizardStepContent,
56+
57+
/**
58+
* A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template.
59+
* Render this inside of each Step with the relevant button props for that Step.
60+
*
61+
* Back and Primary buttons trigger onStepChange.
62+
* Automatically renders the "Back" button for all Steps except the first
63+
*/
3564
Footer: DeleteWizardFooter,
3665
},
3766
);

‎templates/delete-wizard/src/DeleteWizard/DeleteWizard.types.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { ComponentProps } from 'react';
22

3-
export interface DeleteWizardProps extends ComponentProps<'div'> {
4-
header?: React.ReactNode;
5-
}
3+
import { WizardProps } from '@leafygreen-ui/wizard';
4+
5+
export interface DeleteWizardProps
6+
extends WizardProps,
7+
Omit<ComponentProps<'div'>, 'children'> {}

‎templates/delete-wizard/src/DeleteWizard/DeleteWizardHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { CanvasHeader } from '@leafygreen-ui/canvas-header';
22
import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
33

4-
export const DeleteWizardHeaderKey = 'Header' as const;
4+
import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
55

66
/**
77
* A wrapper around the {@link CanvasHeader} component for embedding into a DeleteWizard
88
*/
99
export const DeleteWizardHeader = CompoundSubComponent(CanvasHeader, {
1010
displayName: 'DeleteWizardHeader',
11-
key: DeleteWizardHeaderKey,
11+
key: DeleteWizardSubComponentKeys.Header,
1212
});

‎templates/delete-wizard/src/DeleteWizard/DeleteWizardStep.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
3+
import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
4+
import {
5+
useWizardStepContext,
6+
Wizard,
7+
WizardStepProps,
8+
} from '@leafygreen-ui/wizard';
9+
10+
import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
11+
12+
export const useDeleteWizardStepContext = useWizardStepContext;
13+
14+
/**
15+
* A wrapper around Wizard.Step
16+
*/
17+
export const DeleteWizardStep = CompoundSubComponent(
18+
(props: WizardStepProps) => {
19+
return <Wizard.Step {...props} />;
20+
},
21+
{
22+
displayName: 'DeleteWizardStep',
23+
key: DeleteWizardSubComponentKeys.Step,
24+
},
25+
);

‎templates/delete-wizard/src/DeleteWizard/DeleteWizardStepContents.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import React, { ComponentProps } from 'react';
33
import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
44
import { css, cx } from '@leafygreen-ui/emotion';
55

6-
import { DeleteWizardCompoundComponentProperties } from './compoundComponentProperties';
6+
import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
77

8-
export const DeleteWizardStepContents = CompoundSubComponent(
8+
/**
9+
* A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning
10+
*/
11+
export const DeleteWizardStepContent = CompoundSubComponent(
912
({ children, className, ...rest }: ComponentProps<'div'>) => {
1013
return (
1114
<div
@@ -22,7 +25,7 @@ export const DeleteWizardStepContents = CompoundSubComponent(
2225
);
2326
},
2427
{
25-
displayName: 'DeleteWizardStepContents',
26-
key: DeleteWizardCompoundComponentProperties.StepContent,
28+
displayName: 'DeleteWizardStepContent',
29+
key: DeleteWizardSubComponentKeys.StepContent,
2730
},
2831
);

‎templates/delete-wizard/src/DeleteWizard/compoundComponentProperties.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { WizardSubComponentProperties } from '@leafygreen-ui/wizard';
22

3-
export const DeleteWizardCompoundComponentProperties = {
4-
Header: 'DeleteWizardHeader',
3+
export const DeleteWizardSubComponentKeys = {
4+
Header: 'isDeleteWizardHeader',
55
Step: WizardSubComponentProperties.Step,
6-
StepContent: 'DeleteWizardStepContent',
6+
StepContent: 'isDeleteWizardStepContent',
77
Footer: WizardSubComponentProperties.Footer,
88
};

‎templates/delete-wizard/src/DeleteWizard/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
2-
export { DeleteWizard } from './DeleteWizard';
1+
export { DeleteWizard, useDeleteWizardContext } from './DeleteWizard';
32
export { type DeleteWizardProps } from './DeleteWizard.types';
3+
export { useDeleteWizardStepContext } from './DeleteWizardStep';

0 commit comments

Comments
 (0)