Skip to content

Commit 297b64e

Browse files
marissahuysentruytmarissahuysentruyt
committed
docs(standarddialog): docs migration to storybook
1 parent df377fa commit 297b64e

File tree

3 files changed

+298
-19
lines changed

3 files changed

+298
-19
lines changed

‎components/dialog/stories/dialog.mdx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
2+
3+
import * as DialogStories from './dialog.stories';
4+
5+
<Meta of={DialogStories} title="Docs" />
6+
7+
<Title of={DialogStories} />
8+
<Description of={DialogStories} />
9+
10+
## Variants
11+
12+
### Small
13+
14+
<Canvas of={DialogStories.Small} />
15+
16+
### Medium (default)
17+
18+
<Canvas of={DialogStories.Default} />
19+
20+
### Large
21+
22+
<Canvas of={DialogStories.Large} />
23+
24+
### Dismissible
25+
26+
A dialog that can be dismissed without taking an actions. Dismissible dialogs should never have buttons.
27+
28+
<Canvas of={DialogStories.Dismissible} />
29+
30+
### No divider
31+
32+
Dialogs can forgo the divider if they have content that spans the entire width of the dialog.
33+
34+
<Canvas of={DialogStories.NoDivider} />
35+
36+
### Hero
37+
38+
Dialogs can have a hero header.
39+
40+
<Canvas of={DialogStories.WithHero} />
41+
42+
### Scrolling
43+
44+
A dialog without `.spectrum-Dialog--alert` can expand to a larger size to house larger contents.
45+
46+
<Canvas of={DialogStories.WithScroll} />
47+
48+
### Fullscreen
49+
50+
A fullscreen dialog will automatically fill almost all of the available screen space.
51+
52+
<Canvas of={DialogStories.Fullscreen} />
53+
54+
### Fullscreen takover
55+
56+
A fullscreen takeover dialog will fill all of the available screen space.
57+
58+
<Canvas of={DialogStories.FullscreenTakeover} />
59+
60+
## Properties
61+
62+
The component accepts the following inputs (properties):
63+
64+
<ArgTypes />

‎components/dialog/stories/dialog.stories.js

Lines changed: 198 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { Template as Typography } from "@spectrum-css/typography/stories/templat
44

55
/**
66
* A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions.
7+
*
8+
* Alert variants have been removed from Dialog to their own component, [Alert Dialog](/docs/components-alert-dialog--docs).
79
*/
810
export default {
911
title: "Dialog",
@@ -19,8 +21,27 @@ export default {
1921
control: { type: "text" },
2022
},
2123
content: { table: { disable: true } },
22-
isDismissable: {
23-
name: "Dismissable",
24+
size: {
25+
name: "Size",
26+
type: { name: "string", required: true },
27+
table: {
28+
type: { summary: "string" },
29+
category: "Component",
30+
},
31+
options: ["small", "medium", "large", "fullscreen", "fullscreenTakeover"],
32+
control: "select",
33+
},
34+
isDismissible: {
35+
name: "Dismissible",
36+
type: { name: "boolean" },
37+
table: {
38+
type: { summary: "boolean" },
39+
category: "Component",
40+
},
41+
control: "boolean",
42+
},
43+
hasDivider: {
44+
name: "Divider",
2445
type: { name: "boolean" },
2546
table: {
2647
type: { summary: "boolean" },
@@ -46,12 +67,36 @@ export default {
4667
},
4768
control: "boolean",
4869
},
70+
hasHeroImage: {
71+
name: "Has hero image",
72+
type: { name: "boolean" },
73+
table: {
74+
type: { summary: "boolean" },
75+
category: "Component",
76+
},
77+
control: "boolean",
78+
},
79+
heroImageUrl: {
80+
name: "Hero Image",
81+
type: { name: "string" },
82+
table: {
83+
type: { summary: "string" },
84+
category: "Component",
85+
},
86+
control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" },
87+
if: { arg: "hasHeroImage", truthy: true },
88+
},
89+
maxHeight: { table: { disable: true } },
90+
buttons: { table: { disable: true } },
4991
},
5092
args: {
5193
rootClass: "spectrum-Dialog",
52-
isDismissable: true,
94+
isDismissible: false,
95+
hasDivider: true,
5396
showModal: false,
5497
isOpen: true,
98+
size: "medium",
99+
hasHeroImage: false,
55100
},
56101
parameters: {
57102
actions: {
@@ -65,17 +110,159 @@ export default {
65110
},
66111
};
67112

113+
const ExampleContent = Typography({
114+
semantics: "body",
115+
size: "m",
116+
content: [
117+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl."
118+
]
119+
});
120+
121+
const ExampleButtons = [{
122+
variant: "secondary",
123+
treatment: "outline",
124+
label: "Remind me later"
125+
}, {
126+
treatment: "fill",
127+
label: "Enable",
128+
variant: "accent"
129+
}];
130+
68131
export const Default = Template.bind({});
69132
Default.args = {
70-
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
133+
heading: "Disclaimer",
134+
showModal: true,
135+
buttons: ExampleButtons,
136+
content: [
137+
() => ExampleContent
138+
],
139+
};
140+
141+
/*
142+
* Stories for the MDX "docs" only.
143+
*/
144+
export const Small = Template.bind({});
145+
Small.tags = ["docs-only"];
146+
Small.parameters = {
147+
chromatic: {disabledSnapshot: true}
148+
};
149+
Small.args = {
150+
heading: "Disclaimer",
151+
showModal: true,
152+
buttons: ExampleButtons,
153+
size: "small",
154+
content: [
155+
() => ExampleContent
156+
],
157+
};
158+
159+
export const Large = Template.bind({});
160+
Large.tags = ["docs-only"];
161+
Large.parameters = {
162+
chromatic: {disabledSnapshot: true}
163+
};
164+
Large.args = {
165+
heading: "Disclaimer",
166+
showModal: true,
167+
buttons: ExampleButtons,
168+
size: "large",
169+
content: [
170+
() => ExampleContent
171+
],
172+
};
173+
174+
export const Dismissible = Template.bind({});
175+
Dismissible.tags = ["docs-only"];
176+
Dismissible.parameters = {
177+
chromatic: {disabledSnapshot: true}
178+
};
179+
Dismissible.args = {
180+
heading: "Disclaimer",
181+
showModal: true,
182+
isDismissible: true,
183+
content: [
184+
() => ExampleContent
185+
],
186+
};
187+
188+
export const NoDivider = Template.bind({});
189+
NoDivider.tags = ["docs-only"];
190+
NoDivider.parameters = {
191+
chromatic: {disabledSnapshot: true}
192+
};
193+
NoDivider.args = {
194+
heading: "Disclaimer",
195+
showModal: true,
196+
isDismissible: true,
197+
hasDivider: false,
198+
content: [
199+
() => ExampleContent
200+
],
201+
};
202+
203+
export const WithHero = Template.bind({});
204+
WithHero.tags = ["docs-only"];
205+
WithHero.parameters = {
206+
chromatic: {disabledSnapshot: true},
207+
docs: {
208+
story: {
209+
height: "650px",
210+
},
211+
},
212+
};
213+
WithHero.args = {
214+
heading: "Disclaimer",
215+
isDismissible: true,
216+
showModal: true,
217+
buttons: ExampleButtons,
218+
hasHeroImage: true,
219+
heroImageUrl: "example-card-portrait.png",
220+
content: [
221+
() => ExampleContent
222+
],
223+
};
224+
225+
export const WithScroll = Template.bind({});
226+
WithScroll.args = {
227+
heading: "Disclaimer",
228+
showModal: true,
229+
buttons: ExampleButtons,
230+
maxHeight: 400,
231+
content: [
232+
() => ExampleContent, ExampleContent, ExampleContent, ExampleContent
233+
],
234+
};
235+
WithScroll.tags = ["docs-only"];
236+
WithScroll.parameters = {
237+
chromatic: {disabledSnapshot: true},
238+
};
239+
240+
export const Fullscreen = Template.bind({});
241+
Fullscreen.tags = ["docs-only"];
242+
Fullscreen.parameters = {
243+
chromatic: {disabledSnapshot: true},
244+
};
245+
Fullscreen.args = {
246+
heading: "Disclaimer",
247+
showModal: true,
248+
buttons: ExampleButtons,
249+
size: "fullscreen",
250+
content: [
251+
() => ExampleContent
252+
],
253+
};
254+
255+
export const FullscreenTakeover = Template.bind({});
256+
FullscreenTakeover.tags = ["docs-only"];
257+
FullscreenTakeover.parameters = {
258+
chromatic: {disabledSnapshot: true},
259+
};
260+
FullscreenTakeover.args = {
261+
heading: "Disclaimer",
71262
showModal: true,
263+
buttons: ExampleButtons,
264+
size: "fullscreenTakeover",
72265
content: [
73-
() => Typography({
74-
semantics: "body",
75-
size: "m",
76-
content: [
77-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis."
78-
]
79-
}),
266+
() => ExampleContent
80267
],
81268
};

‎components/dialog/stories/template.js

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
55
import { when } from "lit/directives/when.js";
66

77
import { Template as Button } from "@spectrum-css/button/stories/template.js";
8+
import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
89
import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
910
import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
1011
import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
@@ -14,13 +15,19 @@ import "../index.css";
1415

1516
export const Template = ({
1617
rootClass = "spectrum-Dialog",
17-
isDismissable = true,
18+
isDismissible = true,
19+
hasDivider = true,
1820
isOpen = true,
1921
showModal = false,
2022
heading,
2123
content = [],
24+
buttons,
2225
customClasses = [],
2326
id,
27+
size = "medium",
28+
hasHeroImage = false,
29+
heroImageUrl,
30+
maxHeight,
2431
...globals
2532
}) => {
2633
const { scale } = globals;
@@ -31,25 +38,46 @@ export const Template = ({
3138
class=${classMap({
3239
[rootClass]: true,
3340
[`${rootClass}--${scale}`]: true,
34-
[`${rootClass}--dismissable`]: isDismissable,
41+
[`${rootClass}--${size}`]: typeof size !== "undefined",
42+
[`${rootClass}--dismissable`]: isDismissible,
43+
[`${rootClass}--noDivider`]: !hasDivider,
3544
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
3645
})}
3746
id=${ifDefined(id)}
3847
role="dialog"
3948
tabindex="-1"
4049
aria-modal="true"
50+
style="max-height: ${ifDefined(maxHeight)}px;"
4151
>
4252
<div class="${rootClass}-grid">
43-
${when(heading, () => [
44-
html`<h1 class="${rootClass}-heading">${heading}</h1>`,
45-
Divider({
53+
${when(hasHeroImage, () =>
54+
html`
55+
<div
56+
class="spectrum-Dialog-hero"
57+
style="background-image:url(${heroImageUrl})">
58+
</div>
59+
`
60+
)}
61+
<h1 class="${rootClass}-heading">${heading}</h1>
62+
${when(hasDivider, () =>
63+
Divider({
4664
horizontal: true,
4765
customClasses: [`${rootClass}-divider`],
4866
...globals,
4967
}),
50-
])}
51-
<section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section>
52-
${when(isDismissable, () =>
68+
)}
69+
<section class="${rootClass}-content">
70+
${content.map((c) => (typeof c === "function" ? c({}) : c))}
71+
</section>
72+
<div class="${rootClass}-buttonGroup">
73+
${ButtonGroup({
74+
items: buttons,
75+
onclick: () => {
76+
updateArgs({ isOpen: !isOpen });
77+
},
78+
})}
79+
</div>
80+
${when(isDismissible, () =>
5381
CloseButton({
5482
customClasses: [`${rootClass}-closeButton`],
5583
...globals,

0 commit comments

Comments
 (0)