Skip to content

Commit 7060296

Browse files
TheSonOfThompTheSonOfThomp
committed
adds DeleteWizardStepContents
1 parent 18c52da commit 7060296

File tree

9 files changed

+114
-13
lines changed

9 files changed

+114
-13
lines changed

‎.changeset/delete-wizard-1.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+
Adds DeleteWizardStepContents

‎packages/wizard/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export { WizardSubComponentProperties } from './constants';
12
export { Wizard, type WizardProps } from './Wizard';
23
export {
34
useWizardContext,

‎templates/delete-wizard/package.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
{
1+
{
22
"name": "@lg-templates/delete-wizard",
3-
"version": "0.0.1",
3+
"version": "0.1.0-local.1",
44
"description": "LeafyGreen UI Kit Delete Wizard",
55
"main": "./dist/umd/index.js",
66
"module": "./dist/esm/index.js",
@@ -42,5 +42,10 @@
4242
},
4343
"bugs": {
4444
"url": "https://jira.mongodb.org/projects/LG/summary"
45+
},
46+
"devDependencies": {
47+
"@faker-js/faker": "^10.1.0",
48+
"@leafygreen-ui/icon": "workspace:^",
49+
"@leafygreen-ui/typography": "workspace:^"
4550
}
4651
}

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

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,63 @@
1-
21
import React from 'react';
3-
import { StoryFn } from '@storybook/react';
2+
import { faker } from '@faker-js/faker';
3+
import { StoryObj } from '@storybook/react';
4+
5+
import { css } from '@leafygreen-ui/emotion';
6+
import BeakerIcon from '@leafygreen-ui/icon/Beaker';
7+
import { BackLink, Body } from '@leafygreen-ui/typography';
48

59
import { DeleteWizard } from '.';
610

11+
faker.seed(0);
12+
713
export default {
8-
title: 'Components/DeleteWizard',
14+
title: 'Templates/DeleteWizard',
915
component: DeleteWizard,
10-
}
11-
12-
const Template: StoryFn<typeof DeleteWizard> = (props) => (
13-
<DeleteWizard {...props} />
14-
);
15-
16-
export const Basic = Template.bind({});
16+
};
1717

18+
export const LiveExample: StoryObj<typeof DeleteWizard> = {
19+
render: _args => (
20+
<div
21+
className={css`
22+
margin: -100px;
23+
`}
24+
>
25+
<DeleteWizard
26+
className={css`
27+
outline: 1px solid red;
28+
height: 100vh;
29+
width: 100vw;
30+
`}
31+
>
32+
<DeleteWizard.Header
33+
pageTitle="Demo Wizard"
34+
resourceName={faker.database.mongodbObjectId() + '4'}
35+
resourceIcon={<BeakerIcon />}
36+
backLink={<BackLink href="#">Back</BackLink>}
37+
className={css`
38+
margin-inline: 72px;
39+
`}
40+
/>
41+
<DeleteWizard.Step>
42+
<DeleteWizard.StepContent
43+
className={css`
44+
margin-inline: 72px;
45+
`}
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+
}}
58+
/>
59+
</DeleteWizard.Step>
60+
</DeleteWizard>
61+
</div>
62+
),
63+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { css } from '@leafygreen-ui/emotion';
22

33
export const wizardWrapperStyles = css`
4+
position: relative;
45
display: flex;
56
flex-direction: column;
6-
position: relative;
77
overflow: scroll;
88
`;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
DeleteWizardHeader,
1515
DeleteWizardHeaderKey,
1616
} from './DeleteWizardHeader';
17+
import { DeleteWizardStepContents } from './DeleteWizardStepContents';
1718

1819
export const DeleteWizard = CompoundComponent(
1920
({ children, className }: DeleteWizardProps) => {
@@ -30,6 +31,7 @@ export const DeleteWizard = CompoundComponent(
3031
displayName: 'DeleteWizard',
3132
Header: DeleteWizardHeader,
3233
Step: Wizard.Step,
34+
StepContent: DeleteWizardStepContents,
3335
Footer: DeleteWizardFooter,
3436
},
3537
);

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { ComponentProps } from 'react';
2+
3+
import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
4+
import { css, cx } from '@leafygreen-ui/emotion';
5+
6+
import { DeleteWizardCompoundComponentProperties } from './compoundComponentProperties';
7+
8+
export const DeleteWizardStepContents = CompoundSubComponent(
9+
({ children, className, ...rest }: ComponentProps<'div'>) => {
10+
return (
11+
<div
12+
className={cx(
13+
css`
14+
flex-grow: 1;
15+
`,
16+
className,
17+
)}
18+
{...rest}
19+
>
20+
{children}
21+
</div>
22+
);
23+
},
24+
{
25+
displayName: 'DeleteWizardStepContents',
26+
key: DeleteWizardCompoundComponentProperties.StepContent,
27+
},
28+
);

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { WizardSubComponentProperties } from '@leafygreen-ui/wizard';
2+
3+
export const DeleteWizardCompoundComponentProperties = {
4+
Header: 'DeleteWizardHeader',
5+
Step: WizardSubComponentProperties.Step,
6+
StepContent: 'DeleteWizardStepContent',
7+
Footer: WizardSubComponentProperties.Footer,
8+
};

‎templates/delete-wizard/tsconfig.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,18 @@
1818
{
1919
"path": "../../packages/emotion"
2020
},
21+
{
22+
"path": "../../packages/icon"
23+
},
2124
{
2225
"path": "../../packages/lib"
2326
},
2427
{
2528
"path": "../../packages/tokens"
2629
},
30+
{
31+
"path": "../../packages/typography"
32+
},
2733
{
2834
"path": "../../packages/wizard"
2935
},

0 commit comments

Comments
 (0)