@spectrum-web-components/dialog 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/custom-elements.json +22 -0
  2. package/package.json +11 -12
  3. package/src/DialogBase.d.ts +1 -0
  4. package/src/DialogBase.dev.js +19 -3
  5. package/src/DialogBase.dev.js.map +2 -2
  6. package/src/DialogBase.js +3 -3
  7. package/src/DialogBase.js.map +3 -3
  8. package/LICENSE +0 -201
  9. package/stories/dialog-base.stories.js +0 -196
  10. package/stories/dialog-base.stories.js.map +0 -7
  11. package/stories/dialog-wrapper.stories.js +0 -578
  12. package/stories/dialog-wrapper.stories.js.map +0 -7
  13. package/stories/dialog.stories.js +0 -510
  14. package/stories/dialog.stories.js.map +0 -7
  15. package/stories/images.js +0 -4
  16. package/stories/images.js.map +0 -7
  17. package/stories/index.js +0 -30
  18. package/stories/index.js.map +0 -7
  19. package/test/benchmark/basic-test.js +0 -20
  20. package/test/benchmark/basic-test.js.map +0 -7
  21. package/test/dialog-base.test-vrt.js +0 -5
  22. package/test/dialog-base.test-vrt.js.map +0 -7
  23. package/test/dialog-base.test.js +0 -106
  24. package/test/dialog-base.test.js.map +0 -7
  25. package/test/dialog-memory.test.js +0 -5
  26. package/test/dialog-memory.test.js.map +0 -7
  27. package/test/dialog-wrapper.test-vrt.js +0 -5
  28. package/test/dialog-wrapper.test-vrt.js.map +0 -7
  29. package/test/dialog-wrapper.test.js +0 -320
  30. package/test/dialog-wrapper.test.js.map +0 -7
  31. package/test/dialog.test-vrt.js +0 -5
  32. package/test/dialog.test-vrt.js.map +0 -7
  33. package/test/dialog.test.js +0 -221
  34. package/test/dialog.test.js.map +0 -7
package/stories/dialog.stories.js DELETED
@@ -1,510 +0,0 @@
1
- "use strict";
2
- import { html } from "@spectrum-web-components/base";
3
- import "@spectrum-web-components/dialog/sp-dialog.js";
4
- import { landscape } from "./images.js";
5
- import "@spectrum-web-components/button/sp-button.js";
6
- export default {
7
- title: "Dialog",
8
- component: "sp-dialog"
9
- };
10
- export const small = () => {
11
- return html`
12
- <sp-dialog size="s">
13
- <h2 slot="heading">Disclaimer</h2>
14
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
15
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
16
- augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
17
- Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
18
- ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
19
- elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
20
- interdum consectetur libero id faucibus nisl. Diam volutpat commodo
21
- sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
22
- suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
23
- neque egestas congue. Rhoncus est pellentesque elit ullamcorper
24
- dignissim cras lobortis.
25
- </sp-dialog>
26
- `;
27
- };
28
- export const medium = () => {
29
- return html`
30
- <sp-dialog size="m">
31
- <h2 slot="heading">Disclaimer</h2>
32
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
33
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
34
- augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
35
- Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
36
- ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
37
- elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
38
- interdum consectetur libero id faucibus nisl. Diam volutpat commodo
39
- sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
40
- suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
41
- neque egestas congue. Rhoncus est pellentesque elit ullamcorper
42
- dignissim cras lobortis.
43
- </sp-dialog>
44
- `;
45
- };
46
- export const large = () => {
47
- return html`
48
- <sp-dialog size="l">
49
- <h2 slot="heading">Disclaimer</h2>
50
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
51
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
52
- augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
53
- Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
54
- ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
55
- elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
56
- interdum consectetur libero id faucibus nisl. Diam volutpat commodo
57
- sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
58
- suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
59
- neque egestas congue. Rhoncus est pellentesque elit ullamcorper
60
- dignissim cras lobortis.
61
- </sp-dialog>
62
- `;
63
- };
64
- export const dismissable = () => {
65
- return html`
66
- <sp-dialog size="m" dismissable>
67
- <h2 slot="heading">Disclaimer</h2>
68
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
69
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
70
- augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
71
- Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
72
- ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
73
- elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
74
- interdum consectetur libero id faucibus nisl. Diam volutpat commodo
75
- sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
76
- suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
77
- neque egestas congue. Rhoncus est pellentesque elit ullamcorper
78
- dignissim cras lobortis.
79
- </sp-dialog>
80
- `;
81
- };
82
- export const noDivider = () => {
83
- return html`
84
- <sp-dialog size="m" dismissable no-divider>
85
- <h2 slot="heading">Disclaimer</h2>
86
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
87
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
88
- augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
89
- Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
90
- ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
91
- elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
92
- interdum consectetur libero id faucibus nisl. Diam volutpat commodo
93
- sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
94
- suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
95
- neque egestas congue. Rhoncus est pellentesque elit ullamcorper
96
- dignissim cras lobortis.
97
- </sp-dialog>
98
- `;
99
- };
100
- export const hero = () => {
101
- return html`
102
- <sp-dialog size="m" dismissable no-divider>
103
- <div slot="hero" style="background-image: url(${landscape})"></div>
104
- <h2 slot="heading">Disclaimer</h2>
105
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
106
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
107
- augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
108
- Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
109
- ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
110
- elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
111
- interdum consectetur libero id faucibus nisl. Diam volutpat commodo
112
- sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
113
- suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
114
- neque egestas congue. Rhoncus est pellentesque elit ullamcorper
115
- dignissim cras lobortis.
116
- </sp-dialog>
117
- `;
118
- };
119
- export const alertConfirmation = () => {
120
- return html`
121
- <sp-dialog>
122
- <h2 slot="heading">Enable Smart Filters?</h2>
123
- Smart filters are nondestructive and will preserve your original
124
- images.
125
- <sp-button variant="secondary" treatment="outline" slot="button">
126
- Cancel
127
- </sp-button>
128
- <sp-button variant="accent" slot="button">Enable</sp-button>
129
- </sp-dialog>
130
- `;
131
- };
132
- export const alertInformation = () => {
133
- return html`
134
- <sp-dialog>
135
- <h2 slot="heading">Enable Smart Filters?</h2>
136
- Smart filters are nondestructive and will preserve your original
137
- images.
138
- <sp-button variant="secondary" treatment="outline" slot="button">
139
- Cancel
140
- </sp-button>
141
- <sp-button variant="primary" treatment="outline" slot="button">
142
- Enable
143
- </sp-button>
144
- </sp-dialog>
145
- `;
146
- };
147
- export const alertDestructive = () => {
148
- return html`
149
- <sp-dialog>
150
- <h2 slot="heading">Enable Smart Filters?</h2>
151
- Smart filters are nondestructive and will preserve your original
152
- images.
153
- <sp-button variant="secondary" treatment="outline" slot="button">
154
- Cancel
155
- </sp-button>
156
- <sp-button variant="negative" slot="button">Enable</sp-button>
157
- </sp-dialog>
158
- `;
159
- };
160
- export const alertError = () => {
161
- return html`
162
- <sp-dialog error>
163
- <h2 slot="heading">Enable Smart Filters?</h2>
164
- Smart filters are nondestructive and will preserve your original
165
- images.
166
- <sp-button variant="secondary" treatment="outline" slot="button">
167
- Cancel
168
- </sp-button>
169
- <sp-button variant="primary" treatment="outline" slot="button">
170
- Enable
171
- </sp-button>
172
- </sp-dialog>
173
- `;
174
- };
175
- export const alertErrorWithLongTitle = () => {
176
- return html`
177
- <sp-dialog error>
178
- <h2 slot="heading">Unable to Share Project to Behance Community</h2>
179
- Smart filters are nondestructive and will preserve your original
180
- images.
181
- <sp-button variant="secondary" treatment="outline" slot="button">
182
- Cancel
183
- </sp-button>
184
- <sp-button variant="primary" treatment="outline" slot="button">
185
- Enable
186
- </sp-button>
187
- </sp-dialog>
188
- `;
189
- };
190
- export const fullscreen = () => {
191
- return html`
192
- <sp-dialog mode="fullscreen" dismissable>
193
- <h2 slot="heading">Enable Smart Filters?</h2>
194
- <p>
195
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
196
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
197
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
198
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
199
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
200
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
201
- sunt in culpa qui officia deserunt mollit anim id est laborum.
202
- </p>
203
- <p>
204
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
205
- accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
206
- quae ab illo inventore veritatis et quasi architecto beatae
207
- vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
208
- voluptas sit aspernatur aut odit aut fugit, sed quia
209
- consequuntur magni dolores eos qui ratione voluptatem sequi
210
- nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
211
- sit amet, consectetur, adipisci velit, sed quia non numquam eius
212
- modi tempora incidunt ut labore et dolore magnam aliquam quaerat
213
- voluptatem. Ut enim ad minima veniam, quis nostrum
214
- exercitationem ullam corporis suscipit laboriosam, nisi ut
215
- aliquid ex ea commodi consequatur? Quis autem vel eum iure
216
- reprehenderit qui in ea voluptate velit esse quam nihil
217
- molestiae consequatur, vel illum qui dolorem eum fugiat quo
218
- voluptas nulla pariatur?
219
- </p>
220
- <p>
221
- At vero eos et accusamus et iusto odio dignissimos ducimus qui
222
- blanditiis praesentium voluptatum deleniti atque corrupti quos
223
- dolores et quas molestias excepturi sint occaecati cupiditate
224
- non provident, similique sunt in culpa qui officia deserunt
225
- mollitia animi, id est laborum et dolorum fuga. Et harum quidem
226
- rerum facilis est et expedita distinctio. Nam libero tempore,
227
- cum soluta nobis est eligendi optio cumque nihil impedit quo
228
- minus id quod maxime placeat facere possimus, omnis voluptas
229
- assumenda est, omnis dolor repellendus. Temporibus autem
230
- quibusdam et aut officiis debitis aut rerum necessitatibus saepe
231
- eveniet ut et voluptates repudiandae sint et molestiae non
232
- recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
233
- ut aut reiciendis voluptatibus maiores alias consequatur aut
234
- perferendis doloribus asperiores repellat.
235
- </p>
236
- <p>
237
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
238
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
239
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
240
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
241
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
242
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
243
- sunt in culpa qui officia deserunt mollit anim id est laborum.
244
- </p>
245
- <p>
246
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
247
- accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
248
- quae ab illo inventore veritatis et quasi architecto beatae
249
- vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
250
- voluptas sit aspernatur aut odit aut fugit, sed quia
251
- consequuntur magni dolores eos qui ratione voluptatem sequi
252
- nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
253
- sit amet, consectetur, adipisci velit, sed quia non numquam eius
254
- modi tempora incidunt ut labore et dolore magnam aliquam quaerat
255
- voluptatem. Ut enim ad minima veniam, quis nostrum
256
- exercitationem ullam corporis suscipit laboriosam, nisi ut
257
- aliquid ex ea commodi consequatur? Quis autem vel eum iure
258
- reprehenderit qui in ea voluptate velit esse quam nihil
259
- molestiae consequatur, vel illum qui dolorem eum fugiat quo
260
- voluptas nulla pariatur?
261
- </p>
262
- <p>
263
- At vero eos et accusamus et iusto odio dignissimos ducimus qui
264
- blanditiis praesentium voluptatum deleniti atque corrupti quos
265
- dolores et quas molestias excepturi sint occaecati cupiditate
266
- non provident, similique sunt in culpa qui officia deserunt
267
- mollitia animi, id est laborum et dolorum fuga. Et harum quidem
268
- rerum facilis est et expedita distinctio. Nam libero tempore,
269
- cum soluta nobis est eligendi optio cumque nihil impedit quo
270
- minus id quod maxime placeat facere possimus, omnis voluptas
271
- assumenda est, omnis dolor repellendus. Temporibus autem
272
- quibusdam et aut officiis debitis aut rerum necessitatibus saepe
273
- eveniet ut et voluptates repudiandae sint et molestiae non
274
- recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
275
- ut aut reiciendis voluptatibus maiores alias consequatur aut
276
- perferendis doloribus asperiores repellat.
277
- </p>
278
- <p>
279
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
280
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
281
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
282
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
283
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
284
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
285
- sunt in culpa qui officia deserunt mollit anim id est laborum.
286
- </p>
287
- <p>
288
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
289
- accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
290
- quae ab illo inventore veritatis et quasi architecto beatae
291
- vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
292
- voluptas sit aspernatur aut odit aut fugit, sed quia
293
- consequuntur magni dolores eos qui ratione voluptatem sequi
294
- nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
295
- sit amet, consectetur, adipisci velit, sed quia non numquam eius
296
- modi tempora incidunt ut labore et dolore magnam aliquam quaerat
297
- voluptatem. Ut enim ad minima veniam, quis nostrum
298
- exercitationem ullam corporis suscipit laboriosam, nisi ut
299
- aliquid ex ea commodi consequatur? Quis autem vel eum iure
300
- reprehenderit qui in ea voluptate velit esse quam nihil
301
- molestiae consequatur, vel illum qui dolorem eum fugiat quo
302
- voluptas nulla pariatur?
303
- </p>
304
- <p>
305
- At vero eos et accusamus et iusto odio dignissimos ducimus qui
306
- blanditiis praesentium voluptatum deleniti atque corrupti quos
307
- dolores et quas molestias excepturi sint occaecati cupiditate
308
- non provident, similique sunt in culpa qui officia deserunt
309
- mollitia animi, id est laborum et dolorum fuga. Et harum quidem
310
- rerum facilis est et expedita distinctio. Nam libero tempore,
311
- cum soluta nobis est eligendi optio cumque nihil impedit quo
312
- minus id quod maxime placeat facere possimus, omnis voluptas
313
- assumenda est, omnis dolor repellendus. Temporibus autem
314
- quibusdam et aut officiis debitis aut rerum necessitatibus saepe
315
- eveniet ut et voluptates repudiandae sint et molestiae non
316
- recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
317
- ut aut reiciendis voluptatibus maiores alias consequatur aut
318
- perferendis doloribus asperiores repellat.
319
- </p>
320
- <div slot="footer">
321
- Anything in the footer is sticky and aligned right.
322
- </div>
323
- <sp-button variant="secondary" treatment="outline" slot="button">
324
- Cancel
325
- </sp-button>
326
- <sp-button variant="accent" slot="button">Enable</sp-button>
327
- </sp-dialog>
328
- `;
329
- };
330
- export const fullscreenTakeover = () => {
331
- return html`
332
- <sp-dialog mode="fullscreenTakeover">
333
- <h2 slot="heading">Enable Smart Filters?</h2>
334
- <p>
335
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
336
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
337
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
338
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
339
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
340
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
341
- sunt in culpa qui officia deserunt mollit anim id est laborum.
342
- </p>
343
- <p>
344
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
345
- accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
346
- quae ab illo inventore veritatis et quasi architecto beatae
347
- vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
348
- voluptas sit aspernatur aut odit aut fugit, sed quia
349
- consequuntur magni dolores eos qui ratione voluptatem sequi
350
- nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
351
- sit amet, consectetur, adipisci velit, sed quia non numquam eius
352
- modi tempora incidunt ut labore et dolore magnam aliquam quaerat
353
- voluptatem. Ut enim ad minima veniam, quis nostrum
354
- exercitationem ullam corporis suscipit laboriosam, nisi ut
355
- aliquid ex ea commodi consequatur? Quis autem vel eum iure
356
- reprehenderit qui in ea voluptate velit esse quam nihil
357
- molestiae consequatur, vel illum qui dolorem eum fugiat quo
358
- voluptas nulla pariatur?
359
- </p>
360
- <p>
361
- At vero eos et accusamus et iusto odio dignissimos ducimus qui
362
- blanditiis praesentium voluptatum deleniti atque corrupti quos
363
- dolores et quas molestias excepturi sint occaecati cupiditate
364
- non provident, similique sunt in culpa qui officia deserunt
365
- mollitia animi, id est laborum et dolorum fuga. Et harum quidem
366
- rerum facilis est et expedita distinctio. Nam libero tempore,
367
- cum soluta nobis est eligendi optio cumque nihil impedit quo
368
- minus id quod maxime placeat facere possimus, omnis voluptas
369
- assumenda est, omnis dolor repellendus. Temporibus autem
370
- quibusdam et aut officiis debitis aut rerum necessitatibus saepe
371
- eveniet ut et voluptates repudiandae sint et molestiae non
372
- recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
373
- ut aut reiciendis voluptatibus maiores alias consequatur aut
374
- perferendis doloribus asperiores repellat.
375
- </p>
376
- <p>
377
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
378
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
379
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
380
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
381
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
382
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
383
- sunt in culpa qui officia deserunt mollit anim id est laborum.
384
- </p>
385
- <p>
386
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
387
- accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
388
- quae ab illo inventore veritatis et quasi architecto beatae
389
- vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
390
- voluptas sit aspernatur aut odit aut fugit, sed quia
391
- consequuntur magni dolores eos qui ratione voluptatem sequi
392
- nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
393
- sit amet, consectetur, adipisci velit, sed quia non numquam eius
394
- modi tempora incidunt ut labore et dolore magnam aliquam quaerat
395
- voluptatem. Ut enim ad minima veniam, quis nostrum
396
- exercitationem ullam corporis suscipit laboriosam, nisi ut
397
- aliquid ex ea commodi consequatur? Quis autem vel eum iure
398
- reprehenderit qui in ea voluptate velit esse quam nihil
399
- molestiae consequatur, vel illum qui dolorem eum fugiat quo
400
- voluptas nulla pariatur?
401
- </p>
402
- <p>
403
- At vero eos et accusamus et iusto odio dignissimos ducimus qui
404
- blanditiis praesentium voluptatum deleniti atque corrupti quos
405
- dolores et quas molestias excepturi sint occaecati cupiditate
406
- non provident, similique sunt in culpa qui officia deserunt
407
- mollitia animi, id est laborum et dolorum fuga. Et harum quidem
408
- rerum facilis est et expedita distinctio. Nam libero tempore,
409
- cum soluta nobis est eligendi optio cumque nihil impedit quo
410
- minus id quod maxime placeat facere possimus, omnis voluptas
411
- assumenda est, omnis dolor repellendus. Temporibus autem
412
- quibusdam et aut officiis debitis aut rerum necessitatibus saepe
413
- eveniet ut et voluptates repudiandae sint et molestiae non
414
- recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
415
- ut aut reiciendis voluptatibus maiores alias consequatur aut
416
- perferendis doloribus asperiores repellat.
417
- </p>
418
- <p>
419
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
420
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
421
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
422
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
423
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
424
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
425
- sunt in culpa qui officia deserunt mollit anim id est laborum.
426
- </p>
427
- <p>
428
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem
429
- accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
430
- quae ab illo inventore veritatis et quasi architecto beatae
431
- vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
432
- voluptas sit aspernatur aut odit aut fugit, sed quia
433
- consequuntur magni dolores eos qui ratione voluptatem sequi
434
- nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
435
- sit amet, consectetur, adipisci velit, sed quia non numquam eius
436
- modi tempora incidunt ut labore et dolore magnam aliquam quaerat
437
- voluptatem. Ut enim ad minima veniam, quis nostrum
438
- exercitationem ullam corporis suscipit laboriosam, nisi ut
439
- aliquid ex ea commodi consequatur? Quis autem vel eum iure
440
- reprehenderit qui in ea voluptate velit esse quam nihil
441
- molestiae consequatur, vel illum qui dolorem eum fugiat quo
442
- voluptas nulla pariatur?
443
- </p>
444
- <p>
445
- At vero eos et accusamus et iusto odio dignissimos ducimus qui
446
- blanditiis praesentium voluptatum deleniti atque corrupti quos
447
- dolores et quas molestias excepturi sint occaecati cupiditate
448
- non provident, similique sunt in culpa qui officia deserunt
449
- mollitia animi, id est laborum et dolorum fuga. Et harum quidem
450
- rerum facilis est et expedita distinctio. Nam libero tempore,
451
- cum soluta nobis est eligendi optio cumque nihil impedit quo
452
- minus id quod maxime placeat facere possimus, omnis voluptas
453
- assumenda est, omnis dolor repellendus. Temporibus autem
454
- quibusdam et aut officiis debitis aut rerum necessitatibus saepe
455
- eveniet ut et voluptates repudiandae sint et molestiae non
456
- recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
457
- ut aut reiciendis voluptatibus maiores alias consequatur aut
458
- perferendis doloribus asperiores repellat.
459
- </p>
460
- <div slot="footer">
461
- Anything in the footer is sticky and aligned right.
462
- </div>
463
- <sp-button variant="secondary" treatment="outline" slot="button">
464
- Cancel
465
- </sp-button>
466
- <sp-button variant="accent" slot="button">Enable</sp-button>
467
- </sp-dialog>
468
- `;
469
- };
470
- export const forcedScrolling = () => html`
471
- <style>
472
- .container {
473
- max-height: 300px;
474
- border: 1px solid white;
475
- }
476
- </style>
477
- <div class="container">
478
- <sp-dialog size="m">
479
- <h2 slot="heading">Disclaimer</h2>
480
- <div class="contents">
481
- The contents of this dialog is specifically prepared to force
482
- scrolling, allowing us to test whether the scroll bar is
483
- appopriately activated in this context.
484
- <span style="color: red;">
485
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
486
- do eiusmod tempor incididunt ut labore et dolore magna
487
- aliqua. Auctor augue mauris augue neque gravida. Libero
488
- volutpat sed ornare arcu. Quisque egestas diam in arcu
489
- cursus euismod quis viverra.
490
- </span>
491
- <span style="color: green;">
492
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
493
- do eiusmod tempor incididunt ut labore et dolore magna
494
- aliqua. Auctor augue mauris augue neque gravida. Libero
495
- volutpat sed ornare arcu. Quisque egestas diam in arcu
496
- cursus euismod quis viverra.
497
- </span>
498
- <span style="color: blue;">
499
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
500
- do eiusmod tempor incididunt ut labore et dolore magna
501
- aliqua. Auctor augue mauris augue neque gravida. Libero
502
- volutpat sed ornare arcu. Quisque egestas diam in arcu
503
- cursus euismod quis viverra.
504
- </span>
505
- </div>
506
- <sp-button slot="button">Footer button</sp-button>
507
- </sp-dialog>
508
- </div>
509
- `;
510
- //# sourceMappingURL=dialog.stories.js.map
package/stories/dialog.stories.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["dialog.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport { landscape } from './images.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nexport default {\n title: 'Dialog',\n component: 'sp-dialog',\n};\n\nexport const small = (): TemplateResult => {\n return html`\n <sp-dialog size=\"s\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const medium = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const large = (): TemplateResult => {\n return html`\n <sp-dialog size=\"l\">\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const dismissable = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const noDivider = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const hero = (): TemplateResult => {\n return html`\n <sp-dialog size=\"m\" dismissable no-divider>\n <div slot=\"hero\" style=\"background-image: url(${landscape})\"></div>\n <h2 slot=\"heading\">Disclaimer</h2>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor\n augue mauris augue neque gravida. Libero volutpat sed ornare arcu.\n Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac\n ut consequat semper viverra nam libero justo laoreet. Enim ut tellus\n elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse\n interdum consectetur libero id faucibus nisl. Diam volutpat commodo\n sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae\n suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum\n neque egestas congue. Rhoncus est pellentesque elit ullamcorper\n dignissim cras lobortis.\n </sp-dialog>\n `;\n};\n\nexport const alertConfirmation = (): TemplateResult => {\n return html`\n <sp-dialog>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertInformation = (): TemplateResult => {\n return html`\n <sp-dialog>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertDestructive = (): TemplateResult => {\n return html`\n <sp-dialog>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"negative\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertError = (): TemplateResult => {\n return html`\n <sp-dialog error>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const alertErrorWithLongTitle = (): TemplateResult => {\n return html`\n <sp-dialog error>\n <h2 slot=\"heading\">Unable to Share Project to Behance Community</h2>\n Smart filters are nondestructive and will preserve your original\n images.\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"primary\" treatment=\"outline\" slot=\"button\">\n Enable\n </sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreen = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreen\" dismissable>\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const fullscreenTakeover = (): TemplateResult => {\n return html`\n <sp-dialog mode=\"fullscreenTakeover\">\n <h2 slot=\"heading\">Enable Smart Filters?</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n quae ab illo inventore veritatis et quasi architecto beatae\n vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia\n voluptas sit aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos qui ratione voluptatem sequi\n nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor\n sit amet, consectetur, adipisci velit, sed quia non numquam eius\n modi tempora incidunt ut labore et dolore magnam aliquam quaerat\n voluptatem. Ut enim ad minima veniam, quis nostrum\n exercitationem ullam corporis suscipit laboriosam, nisi ut\n aliquid ex ea commodi consequatur? Quis autem vel eum iure\n reprehenderit qui in ea voluptate velit esse quam nihil\n molestiae consequatur, vel illum qui dolorem eum fugiat quo\n voluptas nulla pariatur?\n </p>\n <p>\n At vero eos et accusamus et iusto odio dignissimos ducimus qui\n blanditiis praesentium voluptatum deleniti atque corrupti quos\n dolores et quas molestias excepturi sint occaecati cupiditate\n non provident, similique sunt in culpa qui officia deserunt\n mollitia animi, id est laborum et dolorum fuga. Et harum quidem\n rerum facilis est et expedita distinctio. Nam libero tempore,\n cum soluta nobis est eligendi optio cumque nihil impedit quo\n minus id quod maxime placeat facere possimus, omnis voluptas\n assumenda est, omnis dolor repellendus. Temporibus autem\n quibusdam et aut officiis debitis aut rerum necessitatibus saepe\n eveniet ut et voluptates repudiandae sint et molestiae non\n recusandae. Itaque earum rerum hic tenetur a sapiente delectus,\n ut aut reiciendis voluptatibus maiores alias consequatur aut\n perferendis doloribus asperiores repellat.\n </p>\n <div slot=\"footer\">\n Anything in the footer is sticky and aligned right.\n </div>\n <sp-button variant=\"secondary\" treatment=\"outline\" slot=\"button\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\" slot=\"button\">Enable</sp-button>\n </sp-dialog>\n `;\n};\n\nexport const forcedScrolling = (): TemplateResult => html`\n <style>\n .container {\n max-height: 300px;\n border: 1px solid white;\n }\n </style>\n <div class=\"container\">\n <sp-dialog size=\"m\">\n <h2 slot=\"heading\">Disclaimer</h2>\n <div class=\"contents\">\n The contents of this dialog is specifically prepared to force\n scrolling, allowing us to test whether the scroll bar is\n appopriately activated in this context.\n <span style=\"color: red;\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Auctor augue mauris augue neque gravida. Libero\n volutpat sed ornare arcu. Quisque egestas diam in arcu\n cursus euismod quis viverra.\n </span>\n <span style=\"color: green;\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Auctor augue mauris augue neque gravida. Libero\n volutpat sed ornare arcu. Quisque egestas diam in arcu\n cursus euismod quis viverra.\n </span>\n <span style=\"color: blue;\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Auctor augue mauris augue neque gravida. Libero\n volutpat sed ornare arcu. Quisque egestas diam in arcu\n cursus euismod quis viverra.\n </span>\n </div>\n <sp-button slot=\"button\">Footer button</sp-button>\n </sp-dialog>\n </div>\n`;\n"],
5
- "mappings": ";AAYA,SAAS,YAA4B;AAErC,OAAO;AACP,SAAS,iBAAiB;AAC1B,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBX;AAEO,aAAM,cAAc,MAAsB;AAC7C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBX;AAEO,aAAM,YAAY,MAAsB;AAC3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBX;AAEO,aAAM,OAAO,MAAsB;AACtC,SAAO;AAAA;AAAA,4DAEiD,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerE;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWX;AAEO,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaX;AAEO,aAAM,0BAA0B,MAAsB;AACzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaX;AAEO,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0IX;AAEO,aAAM,qBAAqB,MAAsB;AACpD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0IX;AAEO,aAAM,kBAAkB,MAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }