Skip to content

Commit 31c9260

Browse files
marissahuysentruytmarissahuysentruyt
committed
docs(standarddialog): docs migration to storybook
1 parent f30cac5 commit 31c9260

File tree

3 files changed

+276
-18
lines changed

3 files changed

+276
-18
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: 186 additions & 10 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,44 @@ 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: {
90+
name: "Scroll (max height)",
91+
description: "Max height for a dialog that is intended to scroll",
92+
type: { name: "boolean" },
93+
table: {
94+
type: { summary: "boolean" },
95+
category: "Component",
96+
},
97+
control: {type: "text"},
98+
}
4999
},
50100
args: {
51101
rootClass: "spectrum-Dialog",
52-
isDismissable: true,
102+
isDismissible: false,
103+
hasDivider: true,
53104
showModal: false,
54105
isOpen: true,
106+
size: "medium",
107+
hasHeroImage: false,
55108
},
56109
parameters: {
57110
actions: {
@@ -65,17 +118,140 @@ export default {
65118
},
66119
};
67120

121+
const ExampleContent = Typography({
122+
semantics: "body",
123+
size: "m",
124+
content: [
125+
"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."
126+
]
127+
});
128+
68129
export const Default = Template.bind({});
69130
Default.args = {
70131
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
71132
showModal: true,
72133
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-
}),
134+
() => ExampleContent
135+
],
136+
};
137+
138+
/*
139+
* Stories for the MDX "docs" only.
140+
*/
141+
export const Small = Template.bind({});
142+
Small.tags = ["docs-only"];
143+
Small.parameters = {
144+
chromatic: {disabledSnapshot: true}
145+
};
146+
Small.args = {
147+
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
148+
showModal: true,
149+
size: "small",
150+
content: [
151+
() => ExampleContent
152+
],
153+
};
154+
155+
export const Large = Template.bind({});
156+
Large.tags = ["docs-only"];
157+
Large.parameters = {
158+
chromatic: {disabledSnapshot: true}
159+
};
160+
Large.args = {
161+
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
162+
showModal: true,
163+
size: "large",
164+
content: [
165+
() => ExampleContent
166+
],
167+
};
168+
169+
export const Dismissible = Template.bind({});
170+
Dismissible.tags = ["docs-only"];
171+
Dismissible.parameters = {
172+
chromatic: {disabledSnapshot: true}
173+
};
174+
Dismissible.args = {
175+
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
176+
showModal: true,
177+
isDismissible: true,
178+
content: [
179+
() => ExampleContent
180+
],
181+
};
182+
183+
export const NoDivider = Template.bind({});
184+
NoDivider.tags = ["docs-only"];
185+
NoDivider.parameters = {
186+
chromatic: {disabledSnapshot: true}
187+
};
188+
NoDivider.args = {
189+
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
190+
showModal: true,
191+
hasDivider: false,
192+
content: [
193+
() => ExampleContent
194+
],
195+
};
196+
197+
export const WithHero = Template.bind({});
198+
WithHero.tags = ["docs-only"];
199+
WithHero.parameters = {
200+
chromatic: {disabledSnapshot: true},
201+
docs: {
202+
story: {
203+
height: "650px",
204+
},
205+
},
206+
};
207+
WithHero.args = {
208+
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
209+
showModal: true,
210+
hasHeroImage: true,
211+
heroImageUrl: "example-card-portrait.png",
212+
content: [
213+
() => ExampleContent
214+
],
215+
};
216+
217+
export const WithScroll = Template.bind({});
218+
WithScroll.args = {
219+
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
220+
showModal: true,
221+
maxHeight: 400,
222+
content: [
223+
() => ExampleContent, ExampleContent, ExampleContent, ExampleContent
224+
],
225+
};
226+
WithScroll.tags = ["docs-only"];
227+
WithScroll.parameters = {
228+
chromatic: {disabledSnapshot: true},
229+
};
230+
231+
export const Fullscreen = Template.bind({});
232+
Fullscreen.tags = ["docs-only"];
233+
Fullscreen.parameters = {
234+
chromatic: {disabledSnapshot: true},
235+
};
236+
Fullscreen.args = {
237+
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
238+
showModal: true,
239+
size: "fullscreen",
240+
content: [
241+
() => ExampleContent
242+
],
243+
};
244+
245+
export const FullscreenTakeover = Template.bind({});
246+
FullscreenTakeover.tags = ["docs-only"];
247+
FullscreenTakeover.parameters = {
248+
chromatic: {disabledSnapshot: true},
249+
};
250+
FullscreenTakeover.args = {
251+
heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
252+
showModal: true,
253+
size: "fullscreenTakeover",
254+
content: [
255+
() => ExampleContent
80256
],
81257
};

‎components/dialog/stories/template.js

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,18 @@ import "../index.css";
1414

1515
export const Template = ({
1616
rootClass = "spectrum-Dialog",
17-
isDismissable = true,
17+
isDismissible = true,
18+
hasDivider = true,
1819
isOpen = true,
1920
showModal = false,
2021
heading,
2122
content = [],
2223
customClasses = [],
2324
id,
25+
size = "medium",
26+
hasHeroImage = false,
27+
heroImageUrl,
28+
maxHeight,
2429
...globals
2530
}) => {
2631
const { scale } = globals;
@@ -31,25 +36,38 @@ export const Template = ({
3136
class=${classMap({
3237
[rootClass]: true,
3338
[`${rootClass}--${scale}`]: true,
34-
[`${rootClass}--dismissable`]: isDismissable,
39+
[`${rootClass}--${size}`]: typeof size !== "undefined",
40+
[`${rootClass}--dismissable`]: isDismissible,
41+
[`${rootClass}--noDivider`]: !hasDivider,
3542
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
3643
})}
3744
id=${ifDefined(id)}
3845
role="dialog"
3946
tabindex="-1"
4047
aria-modal="true"
48+
style="max-height: ${ifDefined(maxHeight)}px;"
4149
>
4250
<div class="${rootClass}-grid">
43-
${when(heading, () => [
44-
html`<h1 class="${rootClass}-heading">${heading}</h1>`,
45-
Divider({
51+
${when(hasHeroImage, () =>
52+
html`
53+
<div
54+
class="spectrum-Dialog-hero"
55+
style="background-image:url(${heroImageUrl})">
56+
</div>
57+
`
58+
)}
59+
<h1 class="${rootClass}-heading">${heading}</h1>
60+
${when(hasDivider, () =>
61+
Divider({
4662
horizontal: true,
4763
customClasses: [`${rootClass}-divider`],
4864
...globals,
4965
}),
50-
])}
51-
<section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section>
52-
${when(isDismissable, () =>
66+
)}
67+
<section class="${rootClass}-content">
68+
${content.map((c) => (typeof c === "function" ? c({}) : c))}
69+
</section>
70+
${when(isDismissible, () =>
5371
CloseButton({
5472
customClasses: [`${rootClass}-closeButton`],
5573
...globals,

0 commit comments

Comments
 (0)