@khanacademy/wonder-blocks-modal 2.3.7 → 2.3.9

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 (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/docs.md +4 -491
  3. package/package.json +3 -3
  4. package/src/components/__tests__/modal-launcher.test.js +1 -1
  5. package/src/components/__tests__/modal-panel.test.js +6 -15
  6. package/src/components/__tests__/one-pane-dialog.test.js +36 -8
  7. package/building-blocks.md +0 -136
  8. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -3473
  9. package/src/__tests__/generated-snapshot.test.js +0 -846
  10. package/src/components/modal-launcher.md +0 -0
  11. package/src/components/one-pane-dialog.md +0 -250
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap DELETED
@@ -1,3473 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`wonder-blocks-modal example 1 1`] = `
4
- <div
5
- className=""
6
- style={
7
- {
8
- "alignItems": "center",
9
- "borderStyle": "solid",
10
- "borderWidth": 0,
11
- "boxSizing": "border-box",
12
- "display": "flex",
13
- "flexDirection": "column",
14
- "margin": 0,
15
- "minHeight": 0,
16
- "minWidth": 0,
17
- "padding": 32,
18
- "position": "relative",
19
- "zIndex": 0,
20
- }
21
- }
22
- >
23
- <button
24
- aria-disabled={false}
25
- className=""
26
- onBlur={[Function]}
27
- onClick={[Function]}
28
- onDragStart={[Function]}
29
- onFocus={[Function]}
30
- onKeyDown={[Function]}
31
- onKeyUp={[Function]}
32
- onMouseDown={[Function]}
33
- onMouseEnter={[Function]}
34
- onMouseLeave={[Function]}
35
- onMouseUp={[Function]}
36
- onTouchCancel={[Function]}
37
- onTouchEnd={[Function]}
38
- onTouchStart={[Function]}
39
- role="button"
40
- style={
41
- {
42
- "::MozFocusInner": {
43
- "border": 0,
44
- },
45
- ":focus": {
46
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
47
- },
48
- "alignItems": "center",
49
- "background": "#1865f2",
50
- "border": "none",
51
- "borderRadius": 4,
52
- "boxSizing": "border-box",
53
- "color": "#ffffff",
54
- "cursor": "pointer",
55
- "display": "inline-flex",
56
- "height": 40,
57
- "justifyContent": "center",
58
- "margin": 0,
59
- "outline": "none",
60
- "paddingBottom": 0,
61
- "paddingLeft": 16,
62
- "paddingRight": 16,
63
- "paddingTop": 0,
64
- "position": "relative",
65
- "textDecoration": "none",
66
- "touchAction": "manipulation",
67
- "userSelect": "none",
68
- }
69
- }
70
- tabIndex={0}
71
- type="button"
72
- >
73
- <span
74
- className=""
75
- style={
76
- {
77
- "MozOsxFontSmoothing": "grayscale",
78
- "WebkitFontSmoothing": "antialiased",
79
- "alignItems": "center",
80
- "display": "inline-block",
81
- "fontFamily": "Lato, "Noto Sans", sans-serif",
82
- "fontSize": 16,
83
- "fontWeight": "bold",
84
- "lineHeight": "20px",
85
- "overflow": "hidden",
86
- "pointerEvents": "none",
87
- "textOverflow": "ellipsis",
88
- "whiteSpace": "nowrap",
89
- }
90
- }
91
- >
92
- OnePaneDialog
93
- </span>
94
- </button>
95
- </div>
96
- `;
97
-
98
- exports[`wonder-blocks-modal example 2 1`] = `
99
- <div
100
- className=""
101
- style={
102
- {
103
- "alignItems": "center",
104
- "borderStyle": "solid",
105
- "borderWidth": 0,
106
- "boxSizing": "border-box",
107
- "display": "flex",
108
- "flexDirection": "column",
109
- "margin": 0,
110
- "minHeight": 0,
111
- "minWidth": 0,
112
- "padding": 32,
113
- "position": "relative",
114
- "zIndex": 0,
115
- }
116
- }
117
- >
118
- <button
119
- aria-disabled={false}
120
- className=""
121
- onBlur={[Function]}
122
- onClick={[Function]}
123
- onDragStart={[Function]}
124
- onFocus={[Function]}
125
- onKeyDown={[Function]}
126
- onKeyUp={[Function]}
127
- onMouseDown={[Function]}
128
- onMouseEnter={[Function]}
129
- onMouseLeave={[Function]}
130
- onMouseUp={[Function]}
131
- onTouchCancel={[Function]}
132
- onTouchEnd={[Function]}
133
- onTouchStart={[Function]}
134
- role="button"
135
- style={
136
- {
137
- "::MozFocusInner": {
138
- "border": 0,
139
- },
140
- ":focus": {
141
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
142
- },
143
- "alignItems": "center",
144
- "background": "#1865f2",
145
- "border": "none",
146
- "borderRadius": 4,
147
- "boxSizing": "border-box",
148
- "color": "#ffffff",
149
- "cursor": "pointer",
150
- "display": "inline-flex",
151
- "height": 40,
152
- "justifyContent": "center",
153
- "margin": 0,
154
- "outline": "none",
155
- "paddingBottom": 0,
156
- "paddingLeft": 16,
157
- "paddingRight": 16,
158
- "paddingTop": 0,
159
- "position": "relative",
160
- "textDecoration": "none",
161
- "touchAction": "manipulation",
162
- "userSelect": "none",
163
- }
164
- }
165
- tabIndex={0}
166
- type="button"
167
- >
168
- <span
169
- className=""
170
- style={
171
- {
172
- "MozOsxFontSmoothing": "grayscale",
173
- "WebkitFontSmoothing": "antialiased",
174
- "alignItems": "center",
175
- "display": "inline-block",
176
- "fontFamily": "Lato, "Noto Sans", sans-serif",
177
- "fontSize": 16,
178
- "fontWeight": "bold",
179
- "lineHeight": "20px",
180
- "overflow": "hidden",
181
- "pointerEvents": "none",
182
- "textOverflow": "ellipsis",
183
- "whiteSpace": "nowrap",
184
- }
185
- }
186
- >
187
- Open modal
188
- </span>
189
- </button>
190
- </div>
191
- `;
192
-
193
- exports[`wonder-blocks-modal example 3 1`] = `
194
- <div
195
- className=""
196
- style={
197
- {
198
- "alignItems": "stretch",
199
- "borderStyle": "solid",
200
- "borderWidth": 0,
201
- "boxSizing": "border-box",
202
- "display": "flex",
203
- "flexDirection": "column",
204
- "margin": 0,
205
- "minHeight": 0,
206
- "minWidth": 0,
207
- "padding": 0,
208
- "position": "relative",
209
- "zIndex": 0,
210
- }
211
- }
212
- >
213
- <div
214
- className=""
215
- onKeyDown={[Function]}
216
- onKeyUp={[Function]}
217
- style={
218
- {
219
- "alignItems": "stretch",
220
- "borderStyle": "solid",
221
- "borderWidth": 0,
222
- "boxSizing": "border-box",
223
- "display": "flex",
224
- "flexDirection": "column",
225
- "margin": 0,
226
- "minHeight": 0,
227
- "minWidth": 0,
228
- "padding": 0,
229
- "position": "relative",
230
- "width": "fit-content",
231
- "zIndex": 0,
232
- }
233
- }
234
- >
235
- <span
236
- aria-atomic="true"
237
- aria-live="polite"
238
- aria-relevant="additions text"
239
- className=""
240
- data-test-id="dropdown-live-region"
241
- style={
242
- {
243
- "border": 0,
244
- "clip": "rect(0,0,0,0)",
245
- "height": 1,
246
- "margin": -1,
247
- "overflow": "hidden",
248
- "padding": 0,
249
- "position": "absolute",
250
- "width": 1,
251
- }
252
- }
253
- />
254
- <button
255
- aria-expanded="false"
256
- aria-haspopup="menu"
257
- className=""
258
- disabled={false}
259
- onBlur={[Function]}
260
- onClick={[Function]}
261
- onDragStart={[Function]}
262
- onFocus={[Function]}
263
- onKeyDown={[Function]}
264
- onKeyUp={[Function]}
265
- onMouseDown={[Function]}
266
- onMouseEnter={[Function]}
267
- onMouseLeave={[Function]}
268
- onMouseUp={[Function]}
269
- onTouchCancel={[Function]}
270
- onTouchEnd={[Function]}
271
- onTouchStart={[Function]}
272
- style={
273
- {
274
- "::MozFocusInner": {
275
- "border": 0,
276
- },
277
- ":focus": {
278
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
279
- },
280
- "alignItems": "center",
281
- "background": "none",
282
- "border": "none",
283
- "borderRadius": 4,
284
- "boxSizing": "border-box",
285
- "color": "#1865f2",
286
- "cursor": "pointer",
287
- "display": "inline-flex",
288
- "height": 40,
289
- "justifyContent": "center",
290
- "margin": 0,
291
- "outline": "none",
292
- "position": "relative",
293
- "textDecoration": "none",
294
- "touchAction": "manipulation",
295
- }
296
- }
297
- tabIndex={0}
298
- type="button"
299
- >
300
- <div
301
- className=""
302
- style={
303
- {
304
- "alignItems": "stretch",
305
- "borderStyle": "solid",
306
- "borderWidth": 0,
307
- "boxSizing": "border-box",
308
- "display": "flex",
309
- "flexDirection": "column",
310
- "margin": 0,
311
- "minHeight": 0,
312
- "minWidth": 0,
313
- "padding": 0,
314
- "position": "relative",
315
- "zIndex": 0,
316
- }
317
- }
318
- >
319
- <span
320
- className=""
321
- style={
322
- {
323
- "MozOsxFontSmoothing": "grayscale",
324
- "WebkitFontSmoothing": "antialiased",
325
- "alignItems": "center",
326
- "display": "inline-block",
327
- "fontFamily": "Lato, "Noto Sans", sans-serif",
328
- "fontSize": 16,
329
- "fontWeight": "bold",
330
- "lineHeight": "20px",
331
- "overflow": "hidden",
332
- "pointerEvents": "none",
333
- "textAlign": "left",
334
- "textOverflow": "ellipsis",
335
- "userSelect": "none",
336
- "whiteSpace": "nowrap",
337
- }
338
- }
339
- >
340
- actions
341
- </span>
342
- </div>
343
- <div
344
- aria-hidden="true"
345
- className=""
346
- style={
347
- {
348
- "MsFlexBasis": 4,
349
- "MsFlexPreferredSize": 4,
350
- "WebkitFlexBasis": 4,
351
- "alignItems": "stretch",
352
- "borderStyle": "solid",
353
- "borderWidth": 0,
354
- "boxSizing": "border-box",
355
- "display": "flex",
356
- "flexBasis": 4,
357
- "flexDirection": "column",
358
- "flexShrink": 0,
359
- "margin": 0,
360
- "minHeight": 0,
361
- "minWidth": 0,
362
- "padding": 0,
363
- "position": "relative",
364
- "width": 4,
365
- "zIndex": 0,
366
- }
367
- }
368
- />
369
- <svg
370
- className=""
371
- height={16}
372
- style={
373
- {
374
- "display": "inline-block",
375
- "flexGrow": 0,
376
- "flexShrink": 0,
377
- "verticalAlign": "text-bottom",
378
- }
379
- }
380
- viewBox="0 0 16 16"
381
- width={16}
382
- >
383
- <path
384
- d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
385
- fill="currentColor"
386
- />
387
- </svg>
388
- </button>
389
- </div>
390
- </div>
391
- `;
392
-
393
- exports[`wonder-blocks-modal example 4 1`] = `
394
- <div
395
- className=""
396
- style={
397
- {
398
- "alignItems": "center",
399
- "borderStyle": "solid",
400
- "borderWidth": 0,
401
- "boxSizing": "border-box",
402
- "display": "flex",
403
- "flexDirection": "column",
404
- "margin": 0,
405
- "minHeight": 0,
406
- "minWidth": 0,
407
- "padding": 32,
408
- "position": "relative",
409
- "zIndex": 0,
410
- }
411
- }
412
- >
413
- <button
414
- aria-disabled={false}
415
- className=""
416
- onBlur={[Function]}
417
- onClick={[Function]}
418
- onDragStart={[Function]}
419
- onFocus={[Function]}
420
- onKeyDown={[Function]}
421
- onKeyUp={[Function]}
422
- onMouseDown={[Function]}
423
- onMouseEnter={[Function]}
424
- onMouseLeave={[Function]}
425
- onMouseUp={[Function]}
426
- onTouchCancel={[Function]}
427
- onTouchEnd={[Function]}
428
- onTouchStart={[Function]}
429
- role="button"
430
- style={
431
- {
432
- "::MozFocusInner": {
433
- "border": 0,
434
- },
435
- ":focus": {
436
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
437
- },
438
- "alignItems": "center",
439
- "background": "#1865f2",
440
- "border": "none",
441
- "borderRadius": 4,
442
- "boxSizing": "border-box",
443
- "color": "#ffffff",
444
- "cursor": "pointer",
445
- "display": "inline-flex",
446
- "height": 40,
447
- "justifyContent": "center",
448
- "margin": 0,
449
- "outline": "none",
450
- "paddingBottom": 0,
451
- "paddingLeft": 16,
452
- "paddingRight": 16,
453
- "paddingTop": 0,
454
- "position": "relative",
455
- "textDecoration": "none",
456
- "touchAction": "manipulation",
457
- "userSelect": "none",
458
- }
459
- }
460
- tabIndex={0}
461
- type="button"
462
- >
463
- <span
464
- className=""
465
- style={
466
- {
467
- "MozOsxFontSmoothing": "grayscale",
468
- "WebkitFontSmoothing": "antialiased",
469
- "alignItems": "center",
470
- "display": "inline-block",
471
- "fontFamily": "Lato, "Noto Sans", sans-serif",
472
- "fontSize": 16,
473
- "fontWeight": "bold",
474
- "lineHeight": "20px",
475
- "overflow": "hidden",
476
- "pointerEvents": "none",
477
- "textOverflow": "ellipsis",
478
- "whiteSpace": "nowrap",
479
- }
480
- }
481
- >
482
- Open modal with initial focus
483
- </span>
484
- </button>
485
- </div>
486
- `;
487
-
488
- exports[`wonder-blocks-modal example 5 1`] = `
489
- <div
490
- className=""
491
- style={
492
- {
493
- "alignItems": "center",
494
- "borderStyle": "solid",
495
- "borderWidth": 0,
496
- "boxSizing": "border-box",
497
- "display": "flex",
498
- "flexDirection": "column",
499
- "margin": 0,
500
- "minHeight": 0,
501
- "minWidth": 0,
502
- "padding": 32,
503
- "position": "relative",
504
- "zIndex": 0,
505
- }
506
- }
507
- >
508
- <button
509
- aria-disabled={false}
510
- className=""
511
- onBlur={[Function]}
512
- onClick={[Function]}
513
- onDragStart={[Function]}
514
- onFocus={[Function]}
515
- onKeyDown={[Function]}
516
- onKeyUp={[Function]}
517
- onMouseDown={[Function]}
518
- onMouseEnter={[Function]}
519
- onMouseLeave={[Function]}
520
- onMouseUp={[Function]}
521
- onTouchCancel={[Function]}
522
- onTouchEnd={[Function]}
523
- onTouchStart={[Function]}
524
- role="button"
525
- style={
526
- {
527
- "::MozFocusInner": {
528
- "border": 0,
529
- },
530
- ":focus": {
531
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
532
- },
533
- "alignItems": "center",
534
- "background": "#1865f2",
535
- "border": "none",
536
- "borderRadius": 4,
537
- "boxSizing": "border-box",
538
- "color": "#ffffff",
539
- "cursor": "pointer",
540
- "display": "inline-flex",
541
- "height": 40,
542
- "justifyContent": "center",
543
- "margin": 0,
544
- "outline": "none",
545
- "paddingBottom": 0,
546
- "paddingLeft": 16,
547
- "paddingRight": 16,
548
- "paddingTop": 0,
549
- "position": "relative",
550
- "textDecoration": "none",
551
- "touchAction": "manipulation",
552
- "userSelect": "none",
553
- }
554
- }
555
- tabIndex={0}
556
- type="button"
557
- >
558
- <span
559
- className=""
560
- style={
561
- {
562
- "MozOsxFontSmoothing": "grayscale",
563
- "WebkitFontSmoothing": "antialiased",
564
- "alignItems": "center",
565
- "display": "inline-block",
566
- "fontFamily": "Lato, "Noto Sans", sans-serif",
567
- "fontSize": 16,
568
- "fontWeight": "bold",
569
- "lineHeight": "20px",
570
- "overflow": "hidden",
571
- "pointerEvents": "none",
572
- "textOverflow": "ellipsis",
573
- "whiteSpace": "nowrap",
574
- }
575
- }
576
- >
577
- Open flexible modal
578
- </span>
579
- </button>
580
- </div>
581
- `;
582
-
583
- exports[`wonder-blocks-modal example 6 1`] = `
584
- <div
585
- className=""
586
- style={
587
- {
588
- "alignItems": "stretch",
589
- "borderStyle": "solid",
590
- "borderWidth": 0,
591
- "boxSizing": "border-box",
592
- "display": "flex",
593
- "flexDirection": "column",
594
- "height": 512,
595
- "margin": 0,
596
- "minHeight": 0,
597
- "minWidth": 0,
598
- "padding": 0,
599
- "position": "relative",
600
- "zIndex": 0,
601
- }
602
- }
603
- >
604
- <div
605
- className=""
606
- style={
607
- {
608
- "alignItems": "center",
609
- "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
610
- "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
611
- "backgroundSize": "20px 20px",
612
- "borderStyle": "solid",
613
- "borderWidth": 0,
614
- "bottom": 0,
615
- "boxSizing": "border-box",
616
- "display": "flex",
617
- "flexDirection": "row",
618
- "justifyContent": "center",
619
- "left": 0,
620
- "margin": 0,
621
- "minHeight": 0,
622
- "minWidth": 0,
623
- "padding": 0,
624
- "position": "absolute",
625
- "right": 0,
626
- "top": 0,
627
- "zIndex": 0,
628
- }
629
- }
630
- >
631
- <div
632
- className=""
633
- style={
634
- {
635
- "alignItems": "stretch",
636
- "borderStyle": "solid",
637
- "borderWidth": 0,
638
- "boxSizing": "border-box",
639
- "display": "flex",
640
- "flexDirection": "row",
641
- "height": "81.25%",
642
- "margin": 0,
643
- "maxHeight": 200,
644
- "maxWidth": 300,
645
- "minHeight": 0,
646
- "minWidth": 0,
647
- "padding": 0,
648
- "position": "relative",
649
- "width": "93.75%",
650
- "zIndex": 0,
651
- }
652
- }
653
- >
654
- <div
655
- className=""
656
- style={
657
- {
658
- "alignItems": "stretch",
659
- "borderStyle": "solid",
660
- "borderWidth": 0,
661
- "bottom": 0,
662
- "boxSizing": "border-box",
663
- "display": "flex",
664
- "flexDirection": "column",
665
- "left": 0,
666
- "margin": 0,
667
- "minHeight": 0,
668
- "minWidth": 0,
669
- "padding": 0,
670
- "pointerEvents": "none",
671
- "position": "absolute",
672
- "right": 0,
673
- "top": 0,
674
- "zIndex": -1,
675
- }
676
- }
677
- >
678
- <div
679
- className=""
680
- style={
681
- {
682
- "alignItems": "stretch",
683
- "background": "url(/blue-blob.png)",
684
- "backgroundSize": "cover",
685
- "borderStyle": "solid",
686
- "borderWidth": 0,
687
- "boxSizing": "border-box",
688
- "display": "flex",
689
- "flexDirection": "column",
690
- "height": 306,
691
- "left": -60,
692
- "margin": 0,
693
- "minHeight": 0,
694
- "minWidth": 0,
695
- "padding": 0,
696
- "position": "absolute",
697
- "top": 0,
698
- "width": 294,
699
- "zIndex": 0,
700
- }
701
- }
702
- />
703
- </div>
704
- <div
705
- aria-labelledby="uid-modal-0-wb-id"
706
- aria-modal="true"
707
- className=""
708
- role="dialog"
709
- style={
710
- {
711
- "alignItems": "stretch",
712
- "borderRadius": 4,
713
- "borderStyle": "solid",
714
- "borderWidth": 0,
715
- "boxSizing": "border-box",
716
- "display": "flex",
717
- "flexDirection": "column",
718
- "height": "100%",
719
- "margin": 0,
720
- "minHeight": 0,
721
- "minWidth": 0,
722
- "overflow": "hidden",
723
- "padding": 0,
724
- "position": "relative",
725
- "width": "100%",
726
- "zIndex": 0,
727
- }
728
- }
729
- >
730
- <div
731
- className=""
732
- style={
733
- {
734
- "alignItems": "stretch",
735
- "background": "white",
736
- "borderStyle": "solid",
737
- "borderWidth": 0,
738
- "boxSizing": "border-box",
739
- "display": "flex",
740
- "flex": "1 1 auto",
741
- "flexDirection": "column",
742
- "height": "100%",
743
- "margin": 0,
744
- "minHeight": 0,
745
- "minWidth": 0,
746
- "overflow": "hidden",
747
- "padding": 0,
748
- "position": "relative",
749
- "width": "100%",
750
- "zIndex": 0,
751
- }
752
- }
753
- >
754
- <button
755
- aria-label="Close modal"
756
- className=""
757
- disabled={false}
758
- onBlur={[Function]}
759
- onClick={[Function]}
760
- onDragStart={[Function]}
761
- onFocus={[Function]}
762
- onKeyDown={[Function]}
763
- onKeyUp={[Function]}
764
- onMouseDown={[Function]}
765
- onMouseEnter={[Function]}
766
- onMouseLeave={[Function]}
767
- onMouseUp={[Function]}
768
- onTouchCancel={[Function]}
769
- onTouchEnd={[Function]}
770
- onTouchStart={[Function]}
771
- style={
772
- {
773
- "::MozFocusInner": {
774
- "border": 0,
775
- },
776
- ":focus": {
777
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
778
- },
779
- "alignItems": "center",
780
- "background": "none",
781
- "border": "none",
782
- "boxSizing": "border-box",
783
- "color": "rgba(33,36,44,0.64)",
784
- "cursor": "pointer",
785
- "display": "inline-flex",
786
- "height": 40,
787
- "justifyContent": "center",
788
- "margin": -8,
789
- "outline": "none",
790
- "padding": 0,
791
- "position": "absolute",
792
- "right": 16,
793
- "textDecoration": "none",
794
- "top": 16,
795
- "touchAction": "manipulation",
796
- "width": 40,
797
- "zIndex": 1,
798
- }
799
- }
800
- tabIndex={0}
801
- type="button"
802
- >
803
- <svg
804
- className=""
805
- height={24}
806
- style={
807
- {
808
- "display": "inline-block",
809
- "flexGrow": 0,
810
- "flexShrink": 0,
811
- "verticalAlign": "text-bottom",
812
- }
813
- }
814
- viewBox="0 0 24 24"
815
- width={24}
816
- >
817
- <path
818
- d="M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
819
- fill="currentColor"
820
- />
821
- </svg>
822
- </button>
823
- <div
824
- className=""
825
- style={
826
- {
827
- "alignItems": "stretch",
828
- "borderStyle": "solid",
829
- "borderWidth": 0,
830
- "boxShadow": "0px 1px 0px rgba(33,36,44,0.16)",
831
- "boxSizing": "border-box",
832
- "display": "flex",
833
- "flexDirection": "column",
834
- "margin": 0,
835
- "minHeight": 66,
836
- "minWidth": 0,
837
- "padding": "24px 32px",
838
- "position": "relative",
839
- "width": "100%",
840
- "zIndex": 0,
841
- }
842
- }
843
- >
844
- <h3
845
- className=""
846
- id="uid-modal-0-wb-id"
847
- style={
848
- {
849
- "@media (maxWidth: 1023px)": {
850
- "fontSize": 22,
851
- "lineHeight": "26px",
852
- },
853
- "@media (minWidth: 1024px)": {
854
- "fontSize": 24,
855
- "lineHeight": "28px",
856
- },
857
- "MozOsxFontSmoothing": "grayscale",
858
- "WebkitFontSmoothing": "antialiased",
859
- "display": "block",
860
- "fontFamily": "Lato, "Noto Sans", sans-serif",
861
- "fontWeight": 700,
862
- "marginBottom": 0,
863
- "marginTop": 0,
864
- "paddingRight": 16,
865
- }
866
- }
867
- >
868
- Single-line title
869
- </h3>
870
- </div>
871
- <div
872
- className=""
873
- style={
874
- {
875
- "alignItems": "stretch",
876
- "borderStyle": "solid",
877
- "borderWidth": 0,
878
- "boxSizing": "border-box",
879
- "display": "block",
880
- "flex": 1,
881
- "flexDirection": "column",
882
- "margin": 0,
883
- "minHeight": 0,
884
- "minWidth": 0,
885
- "overflow": "auto",
886
- "padding": 0,
887
- "position": "relative",
888
- "zIndex": 0,
889
- }
890
- }
891
- >
892
- <div
893
- className=""
894
- style={
895
- {
896
- "alignItems": "stretch",
897
- "borderStyle": "solid",
898
- "borderWidth": 0,
899
- "boxSizing": "border-box",
900
- "display": "flex",
901
- "flex": 1,
902
- "flexDirection": "column",
903
- "margin": 0,
904
- "minHeight": "100%",
905
- "minWidth": 0,
906
- "padding": 32,
907
- "position": "relative",
908
- "zIndex": 0,
909
- }
910
- }
911
- >
912
- <div
913
- className=""
914
- style={
915
- {
916
- "alignItems": "stretch",
917
- "borderStyle": "solid",
918
- "borderWidth": 0,
919
- "boxSizing": "border-box",
920
- "display": "flex",
921
- "flexDirection": "column",
922
- "margin": 0,
923
- "minHeight": 0,
924
- "minWidth": 0,
925
- "padding": 0,
926
- "position": "relative",
927
- "zIndex": 0,
928
- }
929
- }
930
- >
931
- <span
932
- className=""
933
- style={
934
- {
935
- "MozOsxFontSmoothing": "grayscale",
936
- "WebkitFontSmoothing": "antialiased",
937
- "display": "block",
938
- "fontFamily": "Lato, "Noto Sans", sans-serif",
939
- "fontSize": 16,
940
- "fontWeight": 400,
941
- "lineHeight": "22px",
942
- }
943
- }
944
- >
945
- Hello World!
946
- </span>
947
- </div>
948
- </div>
949
- </div>
950
- </div>
951
- </div>
952
- <div
953
- className=""
954
- style={
955
- {
956
- "alignItems": "stretch",
957
- "borderStyle": "solid",
958
- "borderWidth": 0,
959
- "bottom": 0,
960
- "boxSizing": "border-box",
961
- "display": "flex",
962
- "flexDirection": "column",
963
- "left": 0,
964
- "margin": 0,
965
- "minHeight": 0,
966
- "minWidth": 0,
967
- "padding": 0,
968
- "pointerEvents": "none",
969
- "position": "absolute",
970
- "right": 0,
971
- "top": 0,
972
- "zIndex": 1,
973
- }
974
- }
975
- >
976
- <div
977
- className=""
978
- style={
979
- {
980
- "alignItems": "stretch",
981
- "background": "url(/asteroid.png)",
982
- "backgroundSize": "cover",
983
- "borderStyle": "solid",
984
- "borderWidth": 0,
985
- "boxSizing": "border-box",
986
- "display": "flex",
987
- "flexDirection": "column",
988
- "height": 260,
989
- "left": -5,
990
- "margin": 0,
991
- "minHeight": 0,
992
- "minWidth": 0,
993
- "padding": 0,
994
- "position": "absolute",
995
- "top": -10,
996
- "width": 418,
997
- "zIndex": 0,
998
- }
999
- }
1000
- />
1001
- </div>
1002
- </div>
1003
- </div>
1004
- </div>
1005
- `;
1006
-
1007
- exports[`wonder-blocks-modal example 7 1`] = `
1008
- <div
1009
- className=""
1010
- style={
1011
- {
1012
- "alignItems": "stretch",
1013
- "borderStyle": "solid",
1014
- "borderWidth": 0,
1015
- "boxSizing": "border-box",
1016
- "display": "flex",
1017
- "flexDirection": "column",
1018
- "height": 512,
1019
- "margin": 0,
1020
- "minHeight": 0,
1021
- "minWidth": 0,
1022
- "padding": 0,
1023
- "position": "relative",
1024
- "zIndex": 0,
1025
- }
1026
- }
1027
- >
1028
- <div
1029
- className=""
1030
- style={
1031
- {
1032
- "alignItems": "center",
1033
- "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
1034
- "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
1035
- "backgroundSize": "20px 20px",
1036
- "borderStyle": "solid",
1037
- "borderWidth": 0,
1038
- "bottom": 0,
1039
- "boxSizing": "border-box",
1040
- "display": "flex",
1041
- "flexDirection": "row",
1042
- "justifyContent": "center",
1043
- "left": 0,
1044
- "margin": 0,
1045
- "minHeight": 0,
1046
- "minWidth": 0,
1047
- "padding": 0,
1048
- "position": "absolute",
1049
- "right": 0,
1050
- "top": 0,
1051
- "zIndex": 0,
1052
- }
1053
- }
1054
- >
1055
- <div
1056
- className=""
1057
- style={
1058
- {
1059
- "alignItems": "stretch",
1060
- "borderStyle": "solid",
1061
- "borderWidth": 0,
1062
- "boxSizing": "border-box",
1063
- "display": "flex",
1064
- "flexDirection": "row",
1065
- "height": "81.25%",
1066
- "margin": 0,
1067
- "maxHeight": 624,
1068
- "maxWidth": 576,
1069
- "minHeight": 0,
1070
- "minWidth": 0,
1071
- "padding": 0,
1072
- "position": "relative",
1073
- "width": "93.75%",
1074
- "zIndex": 0,
1075
- }
1076
- }
1077
- >
1078
- <div
1079
- aria-labelledby="uid-modal-1-wb-id"
1080
- aria-modal="true"
1081
- className=""
1082
- data-test-id="one-pane-dialog-above"
1083
- role="dialog"
1084
- style={
1085
- {
1086
- "alignItems": "stretch",
1087
- "borderRadius": 4,
1088
- "borderStyle": "solid",
1089
- "borderWidth": 0,
1090
- "boxSizing": "border-box",
1091
- "display": "flex",
1092
- "flexDirection": "column",
1093
- "height": "100%",
1094
- "margin": 0,
1095
- "minHeight": 0,
1096
- "minWidth": 0,
1097
- "overflow": "hidden",
1098
- "padding": 0,
1099
- "position": "relative",
1100
- "width": "100%",
1101
- "zIndex": 0,
1102
- }
1103
- }
1104
- >
1105
- <div
1106
- className=""
1107
- data-test-id="one-pane-dialog-above-panel"
1108
- style={
1109
- {
1110
- "alignItems": "stretch",
1111
- "background": "white",
1112
- "borderStyle": "solid",
1113
- "borderWidth": 0,
1114
- "boxSizing": "border-box",
1115
- "display": "flex",
1116
- "flex": "1 1 auto",
1117
- "flexDirection": "column",
1118
- "height": "100%",
1119
- "margin": 0,
1120
- "minHeight": 0,
1121
- "minWidth": 0,
1122
- "overflow": "hidden",
1123
- "padding": 0,
1124
- "position": "relative",
1125
- "width": "100%",
1126
- "zIndex": 0,
1127
- }
1128
- }
1129
- >
1130
- <button
1131
- aria-label="Close modal"
1132
- className=""
1133
- data-test-id="one-pane-dialog-above-close"
1134
- disabled={false}
1135
- onBlur={[Function]}
1136
- onClick={[Function]}
1137
- onDragStart={[Function]}
1138
- onFocus={[Function]}
1139
- onKeyDown={[Function]}
1140
- onKeyUp={[Function]}
1141
- onMouseDown={[Function]}
1142
- onMouseEnter={[Function]}
1143
- onMouseLeave={[Function]}
1144
- onMouseUp={[Function]}
1145
- onTouchCancel={[Function]}
1146
- onTouchEnd={[Function]}
1147
- onTouchStart={[Function]}
1148
- style={
1149
- {
1150
- "::MozFocusInner": {
1151
- "border": 0,
1152
- },
1153
- ":focus": {
1154
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
1155
- },
1156
- "alignItems": "center",
1157
- "background": "none",
1158
- "border": "none",
1159
- "boxSizing": "border-box",
1160
- "color": "rgba(33,36,44,0.64)",
1161
- "cursor": "pointer",
1162
- "display": "inline-flex",
1163
- "height": 40,
1164
- "justifyContent": "center",
1165
- "margin": -8,
1166
- "outline": "none",
1167
- "padding": 0,
1168
- "position": "absolute",
1169
- "right": 16,
1170
- "textDecoration": "none",
1171
- "top": 16,
1172
- "touchAction": "manipulation",
1173
- "width": 40,
1174
- "zIndex": 1,
1175
- }
1176
- }
1177
- tabIndex={0}
1178
- type="button"
1179
- >
1180
- <svg
1181
- className=""
1182
- height={24}
1183
- style={
1184
- {
1185
- "display": "inline-block",
1186
- "flexGrow": 0,
1187
- "flexShrink": 0,
1188
- "verticalAlign": "text-bottom",
1189
- }
1190
- }
1191
- viewBox="0 0 24 24"
1192
- width={24}
1193
- >
1194
- <path
1195
- d="M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
1196
- fill="currentColor"
1197
- />
1198
- </svg>
1199
- </button>
1200
- <div
1201
- className=""
1202
- data-test-id="one-pane-dialog-above-header"
1203
- style={
1204
- {
1205
- "alignItems": "stretch",
1206
- "borderStyle": "solid",
1207
- "borderWidth": 0,
1208
- "boxShadow": "0px 1px 0px rgba(33,36,44,0.16)",
1209
- "boxSizing": "border-box",
1210
- "display": "flex",
1211
- "flexDirection": "column",
1212
- "margin": 0,
1213
- "minHeight": 66,
1214
- "minWidth": 0,
1215
- "padding": "24px 32px",
1216
- "position": "relative",
1217
- "width": "100%",
1218
- "zIndex": 0,
1219
- }
1220
- }
1221
- >
1222
- <h3
1223
- className=""
1224
- data-test-id="one-pane-dialog-above-header-title"
1225
- id="uid-modal-1-wb-id"
1226
- style={
1227
- {
1228
- "@media (maxWidth: 1023px)": {
1229
- "fontSize": 22,
1230
- "lineHeight": "26px",
1231
- },
1232
- "@media (minWidth: 1024px)": {
1233
- "fontSize": 24,
1234
- "lineHeight": "28px",
1235
- },
1236
- "MozOsxFontSmoothing": "grayscale",
1237
- "WebkitFontSmoothing": "antialiased",
1238
- "display": "block",
1239
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1240
- "fontWeight": 700,
1241
- "marginBottom": 0,
1242
- "marginTop": 0,
1243
- "paddingRight": 16,
1244
- }
1245
- }
1246
- >
1247
- Single-line title
1248
- </h3>
1249
- <span
1250
- className=""
1251
- data-test-id="one-pane-dialog-above-header-subtitle"
1252
- style={
1253
- {
1254
- "MozOsxFontSmoothing": "grayscale",
1255
- "WebkitFontSmoothing": "antialiased",
1256
- "color": "rgba(33,36,44,0.64)",
1257
- "display": "block",
1258
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1259
- "fontSize": 14,
1260
- "fontWeight": 400,
1261
- "lineHeight": "18px",
1262
- "marginTop": 8,
1263
- }
1264
- }
1265
- >
1266
- Subtitle that provides additional context to the title
1267
- </span>
1268
- </div>
1269
- <div
1270
- className=""
1271
- style={
1272
- {
1273
- "alignItems": "stretch",
1274
- "borderStyle": "solid",
1275
- "borderWidth": 0,
1276
- "boxSizing": "border-box",
1277
- "display": "block",
1278
- "flex": 1,
1279
- "flexDirection": "column",
1280
- "margin": 0,
1281
- "minHeight": 0,
1282
- "minWidth": 0,
1283
- "overflow": "auto",
1284
- "padding": 0,
1285
- "position": "relative",
1286
- "zIndex": 0,
1287
- }
1288
- }
1289
- >
1290
- <div
1291
- className=""
1292
- style={
1293
- {
1294
- "alignItems": "stretch",
1295
- "borderStyle": "solid",
1296
- "borderWidth": 0,
1297
- "boxSizing": "border-box",
1298
- "display": "flex",
1299
- "flex": 1,
1300
- "flexDirection": "column",
1301
- "margin": 0,
1302
- "minHeight": "100%",
1303
- "minWidth": 0,
1304
- "padding": 32,
1305
- "paddingBottom": 32,
1306
- "position": "relative",
1307
- "zIndex": 0,
1308
- }
1309
- }
1310
- >
1311
- <div
1312
- className=""
1313
- style={
1314
- {
1315
- "alignItems": "stretch",
1316
- "borderStyle": "solid",
1317
- "borderWidth": 0,
1318
- "boxSizing": "border-box",
1319
- "display": "flex",
1320
- "flexDirection": "column",
1321
- "margin": "0 auto",
1322
- "maxWidth": 544,
1323
- "minHeight": 0,
1324
- "minWidth": 0,
1325
- "padding": 0,
1326
- "position": "relative",
1327
- "zIndex": 0,
1328
- }
1329
- }
1330
- >
1331
- <span
1332
- className=""
1333
- style={
1334
- {
1335
- "MozOsxFontSmoothing": "grayscale",
1336
- "WebkitFontSmoothing": "antialiased",
1337
- "display": "block",
1338
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1339
- "fontSize": 16,
1340
- "fontWeight": 400,
1341
- "lineHeight": "22px",
1342
- }
1343
- }
1344
- >
1345
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.
1346
- </span>
1347
- <span
1348
- className=""
1349
- style={
1350
- {
1351
- "MozOsxFontSmoothing": "grayscale",
1352
- "WebkitFontSmoothing": "antialiased",
1353
- "display": "block",
1354
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1355
- "fontSize": 16,
1356
- "fontWeight": 400,
1357
- "lineHeight": "22px",
1358
- }
1359
- }
1360
- >
1361
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.
1362
- </span>
1363
- <span
1364
- className=""
1365
- style={
1366
- {
1367
- "MozOsxFontSmoothing": "grayscale",
1368
- "WebkitFontSmoothing": "antialiased",
1369
- "display": "block",
1370
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1371
- "fontSize": 16,
1372
- "fontWeight": 400,
1373
- "lineHeight": "22px",
1374
- }
1375
- }
1376
- >
1377
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.
1378
- </span>
1379
- </div>
1380
- </div>
1381
- </div>
1382
- <div
1383
- className=""
1384
- style={
1385
- {
1386
- "alignItems": "center",
1387
- "borderStyle": "solid",
1388
- "borderWidth": 0,
1389
- "boxShadow": "0px -1px 0px rgba(33,36,44,0.16)",
1390
- "boxSizing": "border-box",
1391
- "display": "flex",
1392
- "flex": "0 0 auto",
1393
- "flexDirection": "row",
1394
- "justifyContent": "flex-end",
1395
- "margin": 0,
1396
- "minHeight": 64,
1397
- "minWidth": 0,
1398
- "padding": 0,
1399
- "paddingBottom": 8,
1400
- "paddingLeft": 16,
1401
- "paddingRight": 16,
1402
- "paddingTop": 8,
1403
- "position": "relative",
1404
- "zIndex": 0,
1405
- }
1406
- }
1407
- >
1408
- <button
1409
- aria-disabled={false}
1410
- className=""
1411
- onBlur={[Function]}
1412
- onClick={[Function]}
1413
- onDragStart={[Function]}
1414
- onFocus={[Function]}
1415
- onKeyDown={[Function]}
1416
- onKeyUp={[Function]}
1417
- onMouseDown={[Function]}
1418
- onMouseEnter={[Function]}
1419
- onMouseLeave={[Function]}
1420
- onMouseUp={[Function]}
1421
- onTouchCancel={[Function]}
1422
- onTouchEnd={[Function]}
1423
- onTouchStart={[Function]}
1424
- role="button"
1425
- style={
1426
- {
1427
- "::MozFocusInner": {
1428
- "border": 0,
1429
- },
1430
- ":focus": {
1431
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
1432
- },
1433
- "alignItems": "center",
1434
- "background": "#1865f2",
1435
- "border": "none",
1436
- "borderRadius": 4,
1437
- "boxSizing": "border-box",
1438
- "color": "#ffffff",
1439
- "cursor": "pointer",
1440
- "display": "inline-flex",
1441
- "height": 40,
1442
- "justifyContent": "center",
1443
- "margin": 0,
1444
- "outline": "none",
1445
- "paddingBottom": 0,
1446
- "paddingLeft": 16,
1447
- "paddingRight": 16,
1448
- "paddingTop": 0,
1449
- "position": "relative",
1450
- "textDecoration": "none",
1451
- "touchAction": "manipulation",
1452
- "userSelect": "none",
1453
- }
1454
- }
1455
- tabIndex={0}
1456
- type="button"
1457
- >
1458
- <span
1459
- className=""
1460
- style={
1461
- {
1462
- "MozOsxFontSmoothing": "grayscale",
1463
- "WebkitFontSmoothing": "antialiased",
1464
- "alignItems": "center",
1465
- "display": "inline-block",
1466
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1467
- "fontSize": 16,
1468
- "fontWeight": "bold",
1469
- "lineHeight": "20px",
1470
- "overflow": "hidden",
1471
- "pointerEvents": "none",
1472
- "textOverflow": "ellipsis",
1473
- "whiteSpace": "nowrap",
1474
- }
1475
- }
1476
- >
1477
- Button (no-op)
1478
- </span>
1479
- </button>
1480
- </div>
1481
- </div>
1482
- </div>
1483
- <div
1484
- className=""
1485
- style={
1486
- {
1487
- "alignItems": "stretch",
1488
- "borderStyle": "solid",
1489
- "borderWidth": 0,
1490
- "bottom": 0,
1491
- "boxSizing": "border-box",
1492
- "display": "flex",
1493
- "flexDirection": "column",
1494
- "left": 0,
1495
- "margin": 0,
1496
- "minHeight": 0,
1497
- "minWidth": 0,
1498
- "padding": 0,
1499
- "pointerEvents": "none",
1500
- "position": "absolute",
1501
- "right": 0,
1502
- "top": 0,
1503
- "zIndex": 1,
1504
- }
1505
- }
1506
- >
1507
- <div
1508
- className=""
1509
- style={
1510
- {
1511
- "alignItems": "stretch",
1512
- "background": "url(/modal-above.png)",
1513
- "backgroundSize": "cover",
1514
- "borderStyle": "solid",
1515
- "borderWidth": 0,
1516
- "boxSizing": "border-box",
1517
- "display": "flex",
1518
- "flexDirection": "column",
1519
- "height": 496,
1520
- "left": -100,
1521
- "margin": 0,
1522
- "minHeight": 0,
1523
- "minWidth": 0,
1524
- "padding": 0,
1525
- "position": "absolute",
1526
- "top": -20,
1527
- "width": 787,
1528
- "zIndex": 0,
1529
- }
1530
- }
1531
- />
1532
- </div>
1533
- </div>
1534
- </div>
1535
- </div>
1536
- `;
1537
-
1538
- exports[`wonder-blocks-modal example 8 1`] = `
1539
- <div
1540
- className=""
1541
- style={
1542
- {
1543
- "alignItems": "stretch",
1544
- "borderStyle": "solid",
1545
- "borderWidth": 0,
1546
- "boxSizing": "border-box",
1547
- "display": "flex",
1548
- "flexDirection": "column",
1549
- "height": 512,
1550
- "margin": 0,
1551
- "minHeight": 0,
1552
- "minWidth": 0,
1553
- "padding": 0,
1554
- "position": "relative",
1555
- "zIndex": 0,
1556
- }
1557
- }
1558
- >
1559
- <div
1560
- className=""
1561
- style={
1562
- {
1563
- "alignItems": "center",
1564
- "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
1565
- "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
1566
- "backgroundSize": "20px 20px",
1567
- "borderStyle": "solid",
1568
- "borderWidth": 0,
1569
- "bottom": 0,
1570
- "boxSizing": "border-box",
1571
- "display": "flex",
1572
- "flexDirection": "row",
1573
- "justifyContent": "center",
1574
- "left": 0,
1575
- "margin": 0,
1576
- "minHeight": 0,
1577
- "minWidth": 0,
1578
- "padding": 0,
1579
- "position": "absolute",
1580
- "right": 0,
1581
- "top": 0,
1582
- "zIndex": 0,
1583
- }
1584
- }
1585
- >
1586
- <div
1587
- className=""
1588
- style={
1589
- {
1590
- "alignItems": "stretch",
1591
- "borderStyle": "solid",
1592
- "borderWidth": 0,
1593
- "boxSizing": "border-box",
1594
- "display": "flex",
1595
- "flexDirection": "row",
1596
- "height": "81.25%",
1597
- "margin": 0,
1598
- "maxHeight": 624,
1599
- "maxWidth": 576,
1600
- "minHeight": 0,
1601
- "minWidth": 0,
1602
- "padding": 0,
1603
- "position": "relative",
1604
- "width": "93.75%",
1605
- "zIndex": 0,
1606
- }
1607
- }
1608
- >
1609
- <div
1610
- aria-labelledby="uid-modal-2-wb-id"
1611
- aria-modal="true"
1612
- className=""
1613
- role="dialog"
1614
- style={
1615
- {
1616
- "alignItems": "stretch",
1617
- "borderRadius": 4,
1618
- "borderStyle": "solid",
1619
- "borderWidth": 0,
1620
- "boxSizing": "border-box",
1621
- "display": "flex",
1622
- "flexDirection": "column",
1623
- "height": "100%",
1624
- "margin": 0,
1625
- "minHeight": 0,
1626
- "minWidth": 0,
1627
- "overflow": "hidden",
1628
- "padding": 0,
1629
- "position": "relative",
1630
- "width": "100%",
1631
- "zIndex": 0,
1632
- }
1633
- }
1634
- >
1635
- <div
1636
- className=""
1637
- style={
1638
- {
1639
- "alignItems": "stretch",
1640
- "background": "white",
1641
- "borderStyle": "solid",
1642
- "borderWidth": 0,
1643
- "boxSizing": "border-box",
1644
- "display": "flex",
1645
- "flex": "1 1 auto",
1646
- "flexDirection": "column",
1647
- "height": "100%",
1648
- "margin": 0,
1649
- "minHeight": 0,
1650
- "minWidth": 0,
1651
- "overflow": "hidden",
1652
- "padding": 0,
1653
- "position": "relative",
1654
- "width": "100%",
1655
- "zIndex": 0,
1656
- }
1657
- }
1658
- >
1659
- <button
1660
- aria-label="Close modal"
1661
- className=""
1662
- disabled={false}
1663
- onBlur={[Function]}
1664
- onClick={[Function]}
1665
- onDragStart={[Function]}
1666
- onFocus={[Function]}
1667
- onKeyDown={[Function]}
1668
- onKeyUp={[Function]}
1669
- onMouseDown={[Function]}
1670
- onMouseEnter={[Function]}
1671
- onMouseLeave={[Function]}
1672
- onMouseUp={[Function]}
1673
- onTouchCancel={[Function]}
1674
- onTouchEnd={[Function]}
1675
- onTouchStart={[Function]}
1676
- style={
1677
- {
1678
- "::MozFocusInner": {
1679
- "border": 0,
1680
- },
1681
- ":focus": {
1682
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
1683
- },
1684
- "alignItems": "center",
1685
- "background": "none",
1686
- "border": "none",
1687
- "boxSizing": "border-box",
1688
- "color": "rgba(33,36,44,0.64)",
1689
- "cursor": "pointer",
1690
- "display": "inline-flex",
1691
- "height": 40,
1692
- "justifyContent": "center",
1693
- "margin": -8,
1694
- "outline": "none",
1695
- "padding": 0,
1696
- "position": "absolute",
1697
- "right": 16,
1698
- "textDecoration": "none",
1699
- "top": 16,
1700
- "touchAction": "manipulation",
1701
- "width": 40,
1702
- "zIndex": 1,
1703
- }
1704
- }
1705
- tabIndex={0}
1706
- type="button"
1707
- >
1708
- <svg
1709
- className=""
1710
- height={24}
1711
- style={
1712
- {
1713
- "display": "inline-block",
1714
- "flexGrow": 0,
1715
- "flexShrink": 0,
1716
- "verticalAlign": "text-bottom",
1717
- }
1718
- }
1719
- viewBox="0 0 24 24"
1720
- width={24}
1721
- >
1722
- <path
1723
- d="M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
1724
- fill="currentColor"
1725
- />
1726
- </svg>
1727
- </button>
1728
- <div
1729
- className=""
1730
- style={
1731
- {
1732
- "alignItems": "stretch",
1733
- "borderStyle": "solid",
1734
- "borderWidth": 0,
1735
- "boxShadow": "0px 1px 0px rgba(33,36,44,0.16)",
1736
- "boxSizing": "border-box",
1737
- "display": "flex",
1738
- "flexDirection": "column",
1739
- "margin": 0,
1740
- "minHeight": 66,
1741
- "minWidth": 0,
1742
- "padding": "24px 32px",
1743
- "position": "relative",
1744
- "width": "100%",
1745
- "zIndex": 0,
1746
- }
1747
- }
1748
- >
1749
- <div
1750
- className=""
1751
- style={
1752
- {
1753
- "alignItems": "stretch",
1754
- "borderStyle": "solid",
1755
- "borderWidth": 0,
1756
- "boxSizing": "border-box",
1757
- "color": "rgba(33,36,44,0.64)",
1758
- "display": "flex",
1759
- "flexDirection": "column",
1760
- "margin": 0,
1761
- "marginBottom": 8,
1762
- "minHeight": 0,
1763
- "minWidth": 0,
1764
- "padding": 0,
1765
- "position": "relative",
1766
- "zIndex": 0,
1767
- }
1768
- }
1769
- >
1770
- <nav
1771
- aria-label="Breadcrumbs"
1772
- >
1773
- <ol
1774
- className=""
1775
- style={
1776
- {
1777
- "display": "flex",
1778
- "listStyle": "none",
1779
- "margin": 0,
1780
- "overflow": "hidden",
1781
- "padding": 0,
1782
- }
1783
- }
1784
- >
1785
- <li
1786
- className=""
1787
- style={
1788
- {
1789
- "alignItems": "center",
1790
- "display": "flex",
1791
- "justifyContent": "center",
1792
- "marginRight": 4,
1793
- }
1794
- }
1795
- >
1796
- Bread
1797
- <svg
1798
- aria-hidden={true}
1799
- className=""
1800
- height={16}
1801
- style={
1802
- {
1803
- "marginLeft": 4,
1804
- }
1805
- }
1806
- viewBox="0 0 16 16"
1807
- width={16}
1808
- >
1809
- <circle
1810
- cx="8"
1811
- cy="9"
1812
- r="1.5"
1813
- />
1814
- </svg>
1815
- </li>
1816
- <li
1817
- className=""
1818
- style={
1819
- {
1820
- "alignItems": "center",
1821
- "display": "flex",
1822
- "justifyContent": "center",
1823
- "marginRight": 4,
1824
- }
1825
- }
1826
- >
1827
- Crumb
1828
- <svg
1829
- aria-hidden={true}
1830
- className=""
1831
- height={16}
1832
- style={
1833
- {
1834
- "marginLeft": 4,
1835
- }
1836
- }
1837
- viewBox="0 0 16 16"
1838
- width={16}
1839
- >
1840
- <circle
1841
- cx="8"
1842
- cy="9"
1843
- r="1.5"
1844
- />
1845
- </svg>
1846
- </li>
1847
- <li
1848
- aria-current="page"
1849
- className=""
1850
- style={
1851
- {
1852
- "alignItems": "center",
1853
- "display": "flex",
1854
- "justifyContent": "center",
1855
- "marginRight": 4,
1856
- }
1857
- }
1858
- >
1859
- Trail
1860
- </li>
1861
- </ol>
1862
- </nav>
1863
- </div>
1864
- <h3
1865
- className=""
1866
- id="uid-modal-2-wb-id"
1867
- style={
1868
- {
1869
- "@media (maxWidth: 1023px)": {
1870
- "fontSize": 22,
1871
- "lineHeight": "26px",
1872
- },
1873
- "@media (minWidth: 1024px)": {
1874
- "fontSize": 24,
1875
- "lineHeight": "28px",
1876
- },
1877
- "MozOsxFontSmoothing": "grayscale",
1878
- "WebkitFontSmoothing": "antialiased",
1879
- "display": "block",
1880
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1881
- "fontWeight": 700,
1882
- "marginBottom": 0,
1883
- "marginTop": 0,
1884
- "paddingRight": 16,
1885
- }
1886
- }
1887
- >
1888
- Multi-line title that wraps to show how this component adjusts with longer content
1889
- </h3>
1890
- </div>
1891
- <div
1892
- className=""
1893
- style={
1894
- {
1895
- "alignItems": "stretch",
1896
- "borderStyle": "solid",
1897
- "borderWidth": 0,
1898
- "boxSizing": "border-box",
1899
- "display": "block",
1900
- "flex": 1,
1901
- "flexDirection": "column",
1902
- "margin": 0,
1903
- "minHeight": 0,
1904
- "minWidth": 0,
1905
- "overflow": "auto",
1906
- "padding": 0,
1907
- "position": "relative",
1908
- "zIndex": 0,
1909
- }
1910
- }
1911
- >
1912
- <div
1913
- className=""
1914
- style={
1915
- {
1916
- "alignItems": "stretch",
1917
- "borderStyle": "solid",
1918
- "borderWidth": 0,
1919
- "boxSizing": "border-box",
1920
- "display": "flex",
1921
- "flex": 1,
1922
- "flexDirection": "column",
1923
- "margin": 0,
1924
- "minHeight": "100%",
1925
- "minWidth": 0,
1926
- "padding": 32,
1927
- "paddingBottom": 32,
1928
- "position": "relative",
1929
- "zIndex": 0,
1930
- }
1931
- }
1932
- >
1933
- <div
1934
- className=""
1935
- style={
1936
- {
1937
- "alignItems": "stretch",
1938
- "borderStyle": "solid",
1939
- "borderWidth": 0,
1940
- "boxSizing": "border-box",
1941
- "display": "flex",
1942
- "flexDirection": "column",
1943
- "margin": 0,
1944
- "minHeight": 0,
1945
- "minWidth": 0,
1946
- "padding": 0,
1947
- "position": "relative",
1948
- "zIndex": 0,
1949
- }
1950
- }
1951
- >
1952
- <span
1953
- className=""
1954
- style={
1955
- {
1956
- "MozOsxFontSmoothing": "grayscale",
1957
- "WebkitFontSmoothing": "antialiased",
1958
- "display": "block",
1959
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1960
- "fontSize": 16,
1961
- "fontWeight": 400,
1962
- "lineHeight": "22px",
1963
- }
1964
- }
1965
- >
1966
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.
1967
- </span>
1968
- </div>
1969
- </div>
1970
- </div>
1971
- <div
1972
- className=""
1973
- style={
1974
- {
1975
- "alignItems": "center",
1976
- "borderStyle": "solid",
1977
- "borderWidth": 0,
1978
- "boxShadow": "0px -1px 0px rgba(33,36,44,0.16)",
1979
- "boxSizing": "border-box",
1980
- "display": "flex",
1981
- "flex": "0 0 auto",
1982
- "flexDirection": "row",
1983
- "justifyContent": "flex-end",
1984
- "margin": 0,
1985
- "minHeight": 64,
1986
- "minWidth": 0,
1987
- "padding": 0,
1988
- "paddingBottom": 8,
1989
- "paddingLeft": 16,
1990
- "paddingRight": 16,
1991
- "paddingTop": 8,
1992
- "position": "relative",
1993
- "zIndex": 0,
1994
- }
1995
- }
1996
- >
1997
- <div
1998
- className=""
1999
- style={
2000
- {
2001
- "alignItems": "stretch",
2002
- "borderStyle": "solid",
2003
- "borderWidth": 0,
2004
- "boxSizing": "border-box",
2005
- "display": "flex",
2006
- "flexDirection": "row",
2007
- "justifyContent": "flex-end",
2008
- "margin": 0,
2009
- "minHeight": 0,
2010
- "minWidth": 0,
2011
- "padding": 0,
2012
- "position": "relative",
2013
- "zIndex": 0,
2014
- }
2015
- }
2016
- >
2017
- <button
2018
- aria-disabled={false}
2019
- className=""
2020
- onBlur={[Function]}
2021
- onClick={[Function]}
2022
- onDragStart={[Function]}
2023
- onFocus={[Function]}
2024
- onKeyDown={[Function]}
2025
- onKeyUp={[Function]}
2026
- onMouseDown={[Function]}
2027
- onMouseEnter={[Function]}
2028
- onMouseLeave={[Function]}
2029
- onMouseUp={[Function]}
2030
- onTouchCancel={[Function]}
2031
- onTouchEnd={[Function]}
2032
- onTouchStart={[Function]}
2033
- role="button"
2034
- style={
2035
- {
2036
- "::MozFocusInner": {
2037
- "border": 0,
2038
- },
2039
- ":focus": {
2040
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2041
- },
2042
- "alignItems": "center",
2043
- "background": "none",
2044
- "border": "none",
2045
- "borderRadius": 4,
2046
- "boxSizing": "border-box",
2047
- "color": "#1865f2",
2048
- "cursor": "pointer",
2049
- "display": "inline-flex",
2050
- "height": 40,
2051
- "justifyContent": "center",
2052
- "margin": 0,
2053
- "marginRight": 16,
2054
- "outline": "none",
2055
- "paddingBottom": 0,
2056
- "paddingLeft": 0,
2057
- "paddingRight": 0,
2058
- "paddingTop": 0,
2059
- "position": "relative",
2060
- "textDecoration": "none",
2061
- "touchAction": "manipulation",
2062
- "userSelect": "none",
2063
- }
2064
- }
2065
- tabIndex={0}
2066
- type="button"
2067
- >
2068
- <span
2069
- className=""
2070
- style={
2071
- {
2072
- "MozOsxFontSmoothing": "grayscale",
2073
- "WebkitFontSmoothing": "antialiased",
2074
- "alignItems": "center",
2075
- "display": "inline-block",
2076
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2077
- "fontSize": 16,
2078
- "fontWeight": "bold",
2079
- "lineHeight": "20px",
2080
- "overflow": "hidden",
2081
- "pointerEvents": "none",
2082
- "position": "relative",
2083
- "textOverflow": "ellipsis",
2084
- "whiteSpace": "nowrap",
2085
- }
2086
- }
2087
- >
2088
- Tertiary action
2089
- </span>
2090
- </button>
2091
- <button
2092
- aria-disabled={false}
2093
- className=""
2094
- onBlur={[Function]}
2095
- onClick={[Function]}
2096
- onDragStart={[Function]}
2097
- onFocus={[Function]}
2098
- onKeyDown={[Function]}
2099
- onKeyUp={[Function]}
2100
- onMouseDown={[Function]}
2101
- onMouseEnter={[Function]}
2102
- onMouseLeave={[Function]}
2103
- onMouseUp={[Function]}
2104
- onTouchCancel={[Function]}
2105
- onTouchEnd={[Function]}
2106
- onTouchStart={[Function]}
2107
- role="button"
2108
- style={
2109
- {
2110
- "::MozFocusInner": {
2111
- "border": 0,
2112
- },
2113
- ":focus": {
2114
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2115
- },
2116
- "alignItems": "center",
2117
- "background": "none",
2118
- "border": "none",
2119
- "borderRadius": 4,
2120
- "boxSizing": "border-box",
2121
- "color": "#1865f2",
2122
- "cursor": "pointer",
2123
- "display": "inline-flex",
2124
- "height": 40,
2125
- "justifyContent": "center",
2126
- "margin": 0,
2127
- "marginRight": 16,
2128
- "outline": "none",
2129
- "paddingBottom": 0,
2130
- "paddingLeft": 0,
2131
- "paddingRight": 0,
2132
- "paddingTop": 0,
2133
- "position": "relative",
2134
- "textDecoration": "none",
2135
- "touchAction": "manipulation",
2136
- "userSelect": "none",
2137
- }
2138
- }
2139
- tabIndex={0}
2140
- type="button"
2141
- >
2142
- <span
2143
- className=""
2144
- style={
2145
- {
2146
- "MozOsxFontSmoothing": "grayscale",
2147
- "WebkitFontSmoothing": "antialiased",
2148
- "alignItems": "center",
2149
- "display": "inline-block",
2150
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2151
- "fontSize": 16,
2152
- "fontWeight": "bold",
2153
- "lineHeight": "20px",
2154
- "overflow": "hidden",
2155
- "pointerEvents": "none",
2156
- "position": "relative",
2157
- "textOverflow": "ellipsis",
2158
- "whiteSpace": "nowrap",
2159
- }
2160
- }
2161
- >
2162
- Secondary action
2163
- </span>
2164
- </button>
2165
- <button
2166
- aria-disabled={false}
2167
- className=""
2168
- onBlur={[Function]}
2169
- onClick={[Function]}
2170
- onDragStart={[Function]}
2171
- onFocus={[Function]}
2172
- onKeyDown={[Function]}
2173
- onKeyUp={[Function]}
2174
- onMouseDown={[Function]}
2175
- onMouseEnter={[Function]}
2176
- onMouseLeave={[Function]}
2177
- onMouseUp={[Function]}
2178
- onTouchCancel={[Function]}
2179
- onTouchEnd={[Function]}
2180
- onTouchStart={[Function]}
2181
- role="button"
2182
- style={
2183
- {
2184
- "::MozFocusInner": {
2185
- "border": 0,
2186
- },
2187
- ":focus": {
2188
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2189
- },
2190
- "alignItems": "center",
2191
- "background": "#1865f2",
2192
- "border": "none",
2193
- "borderRadius": 4,
2194
- "boxSizing": "border-box",
2195
- "color": "#ffffff",
2196
- "cursor": "pointer",
2197
- "display": "inline-flex",
2198
- "height": 40,
2199
- "justifyContent": "center",
2200
- "margin": 0,
2201
- "marginRight": 16,
2202
- "outline": "none",
2203
- "paddingBottom": 0,
2204
- "paddingLeft": 16,
2205
- "paddingRight": 16,
2206
- "paddingTop": 0,
2207
- "position": "relative",
2208
- "textDecoration": "none",
2209
- "touchAction": "manipulation",
2210
- "userSelect": "none",
2211
- }
2212
- }
2213
- tabIndex={0}
2214
- type="button"
2215
- >
2216
- <span
2217
- className=""
2218
- style={
2219
- {
2220
- "MozOsxFontSmoothing": "grayscale",
2221
- "WebkitFontSmoothing": "antialiased",
2222
- "alignItems": "center",
2223
- "display": "inline-block",
2224
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2225
- "fontSize": 16,
2226
- "fontWeight": "bold",
2227
- "lineHeight": "20px",
2228
- "overflow": "hidden",
2229
- "pointerEvents": "none",
2230
- "textOverflow": "ellipsis",
2231
- "whiteSpace": "nowrap",
2232
- }
2233
- }
2234
- >
2235
- Primary action
2236
- </span>
2237
- </button>
2238
- </div>
2239
- </div>
2240
- </div>
2241
- </div>
2242
- </div>
2243
- </div>
2244
- </div>
2245
- `;
2246
-
2247
- exports[`wonder-blocks-modal example 9 1`] = `
2248
- <div
2249
- className=""
2250
- style={
2251
- {
2252
- "alignItems": "stretch",
2253
- "borderStyle": "solid",
2254
- "borderWidth": 0,
2255
- "boxSizing": "border-box",
2256
- "display": "flex",
2257
- "flexDirection": "column",
2258
- "height": 512,
2259
- "margin": 0,
2260
- "minHeight": 0,
2261
- "minWidth": 0,
2262
- "padding": 0,
2263
- "position": "relative",
2264
- "zIndex": 0,
2265
- }
2266
- }
2267
- >
2268
- <div
2269
- className=""
2270
- style={
2271
- {
2272
- "alignItems": "center",
2273
- "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
2274
- "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
2275
- "backgroundSize": "20px 20px",
2276
- "borderStyle": "solid",
2277
- "borderWidth": 0,
2278
- "bottom": 0,
2279
- "boxSizing": "border-box",
2280
- "display": "flex",
2281
- "flexDirection": "row",
2282
- "justifyContent": "center",
2283
- "left": 0,
2284
- "margin": 0,
2285
- "minHeight": 0,
2286
- "minWidth": 0,
2287
- "padding": 0,
2288
- "position": "absolute",
2289
- "right": 0,
2290
- "top": 0,
2291
- "zIndex": 0,
2292
- }
2293
- }
2294
- >
2295
- <div
2296
- className=""
2297
- style={
2298
- {
2299
- "alignItems": "stretch",
2300
- "borderStyle": "solid",
2301
- "borderWidth": 0,
2302
- "boxSizing": "border-box",
2303
- "display": "flex",
2304
- "flexDirection": "row",
2305
- "height": "81.25%",
2306
- "margin": 0,
2307
- "maxHeight": 624,
2308
- "maxWidth": 576,
2309
- "minHeight": 0,
2310
- "minWidth": 0,
2311
- "padding": 0,
2312
- "position": "relative",
2313
- "width": "93.75%",
2314
- "zIndex": 0,
2315
- }
2316
- }
2317
- >
2318
- <div
2319
- aria-labelledby="uid-modal-3-wb-id"
2320
- aria-modal="true"
2321
- className=""
2322
- role="dialog"
2323
- style={
2324
- {
2325
- "alignItems": "stretch",
2326
- "borderRadius": 4,
2327
- "borderStyle": "solid",
2328
- "borderWidth": 0,
2329
- "boxSizing": "border-box",
2330
- "display": "flex",
2331
- "flexDirection": "column",
2332
- "height": "100%",
2333
- "margin": 0,
2334
- "minHeight": 0,
2335
- "minWidth": 0,
2336
- "overflow": "hidden",
2337
- "padding": 0,
2338
- "position": "relative",
2339
- "width": "100%",
2340
- "zIndex": 0,
2341
- }
2342
- }
2343
- >
2344
- <div
2345
- className=""
2346
- style={
2347
- {
2348
- "alignItems": "stretch",
2349
- "background": "white",
2350
- "borderStyle": "solid",
2351
- "borderWidth": 0,
2352
- "boxSizing": "border-box",
2353
- "display": "flex",
2354
- "flex": "1 1 auto",
2355
- "flexDirection": "column",
2356
- "height": "100%",
2357
- "margin": 0,
2358
- "minHeight": 0,
2359
- "minWidth": 0,
2360
- "overflow": "hidden",
2361
- "padding": 0,
2362
- "position": "relative",
2363
- "width": "100%",
2364
- "zIndex": 0,
2365
- }
2366
- }
2367
- >
2368
- <button
2369
- aria-label="Close modal"
2370
- className=""
2371
- disabled={false}
2372
- onBlur={[Function]}
2373
- onClick={[Function]}
2374
- onDragStart={[Function]}
2375
- onFocus={[Function]}
2376
- onKeyDown={[Function]}
2377
- onKeyUp={[Function]}
2378
- onMouseDown={[Function]}
2379
- onMouseEnter={[Function]}
2380
- onMouseLeave={[Function]}
2381
- onMouseUp={[Function]}
2382
- onTouchCancel={[Function]}
2383
- onTouchEnd={[Function]}
2384
- onTouchStart={[Function]}
2385
- style={
2386
- {
2387
- "::MozFocusInner": {
2388
- "border": 0,
2389
- },
2390
- ":focus": {
2391
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2392
- },
2393
- "alignItems": "center",
2394
- "background": "none",
2395
- "border": "none",
2396
- "boxSizing": "border-box",
2397
- "color": "rgba(33,36,44,0.64)",
2398
- "cursor": "pointer",
2399
- "display": "inline-flex",
2400
- "height": 40,
2401
- "justifyContent": "center",
2402
- "margin": -8,
2403
- "outline": "none",
2404
- "padding": 0,
2405
- "position": "absolute",
2406
- "right": 16,
2407
- "textDecoration": "none",
2408
- "top": 16,
2409
- "touchAction": "manipulation",
2410
- "width": 40,
2411
- "zIndex": 1,
2412
- }
2413
- }
2414
- tabIndex={0}
2415
- type="button"
2416
- >
2417
- <svg
2418
- className=""
2419
- height={24}
2420
- style={
2421
- {
2422
- "display": "inline-block",
2423
- "flexGrow": 0,
2424
- "flexShrink": 0,
2425
- "verticalAlign": "text-bottom",
2426
- }
2427
- }
2428
- viewBox="0 0 24 24"
2429
- width={24}
2430
- >
2431
- <path
2432
- d="M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
2433
- fill="currentColor"
2434
- />
2435
- </svg>
2436
- </button>
2437
- <div
2438
- className=""
2439
- style={
2440
- {
2441
- "alignItems": "stretch",
2442
- "borderStyle": "solid",
2443
- "borderWidth": 0,
2444
- "boxShadow": "0px 1px 0px rgba(33,36,44,0.16)",
2445
- "boxSizing": "border-box",
2446
- "display": "flex",
2447
- "flexDirection": "column",
2448
- "margin": 0,
2449
- "minHeight": 66,
2450
- "minWidth": 0,
2451
- "padding": "24px 32px",
2452
- "position": "relative",
2453
- "width": "100%",
2454
- "zIndex": 0,
2455
- }
2456
- }
2457
- >
2458
- <h3
2459
- className=""
2460
- id="uid-modal-3-wb-id"
2461
- style={
2462
- {
2463
- "@media (maxWidth: 1023px)": {
2464
- "fontSize": 22,
2465
- "lineHeight": "26px",
2466
- },
2467
- "@media (minWidth: 1024px)": {
2468
- "fontSize": 24,
2469
- "lineHeight": "28px",
2470
- },
2471
- "MozOsxFontSmoothing": "grayscale",
2472
- "WebkitFontSmoothing": "antialiased",
2473
- "display": "block",
2474
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2475
- "fontWeight": 700,
2476
- "marginBottom": 0,
2477
- "marginTop": 0,
2478
- "paddingRight": 16,
2479
- }
2480
- }
2481
- >
2482
- Dialog with multi-step footer
2483
- </h3>
2484
- </div>
2485
- <div
2486
- className=""
2487
- style={
2488
- {
2489
- "alignItems": "stretch",
2490
- "borderStyle": "solid",
2491
- "borderWidth": 0,
2492
- "boxSizing": "border-box",
2493
- "display": "block",
2494
- "flex": 1,
2495
- "flexDirection": "column",
2496
- "margin": 0,
2497
- "minHeight": 0,
2498
- "minWidth": 0,
2499
- "overflow": "auto",
2500
- "padding": 0,
2501
- "position": "relative",
2502
- "zIndex": 0,
2503
- }
2504
- }
2505
- >
2506
- <div
2507
- className=""
2508
- style={
2509
- {
2510
- "alignItems": "stretch",
2511
- "borderStyle": "solid",
2512
- "borderWidth": 0,
2513
- "boxSizing": "border-box",
2514
- "display": "flex",
2515
- "flex": 1,
2516
- "flexDirection": "column",
2517
- "margin": 0,
2518
- "minHeight": "100%",
2519
- "minWidth": 0,
2520
- "padding": 32,
2521
- "paddingBottom": 32,
2522
- "position": "relative",
2523
- "zIndex": 0,
2524
- }
2525
- }
2526
- >
2527
- <div
2528
- className=""
2529
- style={
2530
- {
2531
- "alignItems": "stretch",
2532
- "borderStyle": "solid",
2533
- "borderWidth": 0,
2534
- "boxSizing": "border-box",
2535
- "display": "flex",
2536
- "flexDirection": "column",
2537
- "margin": 0,
2538
- "minHeight": 0,
2539
- "minWidth": 0,
2540
- "padding": 0,
2541
- "position": "relative",
2542
- "zIndex": 0,
2543
- }
2544
- }
2545
- >
2546
- <span
2547
- className=""
2548
- style={
2549
- {
2550
- "MozOsxFontSmoothing": "grayscale",
2551
- "WebkitFontSmoothing": "antialiased",
2552
- "display": "block",
2553
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2554
- "fontSize": 16,
2555
- "fontWeight": 400,
2556
- "lineHeight": "22px",
2557
- }
2558
- }
2559
- >
2560
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.
2561
- </span>
2562
- </div>
2563
- </div>
2564
- </div>
2565
- <div
2566
- className=""
2567
- style={
2568
- {
2569
- "alignItems": "center",
2570
- "borderStyle": "solid",
2571
- "borderWidth": 0,
2572
- "boxShadow": "0px -1px 0px rgba(33,36,44,0.16)",
2573
- "boxSizing": "border-box",
2574
- "display": "flex",
2575
- "flex": "0 0 auto",
2576
- "flexDirection": "row",
2577
- "justifyContent": "flex-end",
2578
- "margin": 0,
2579
- "minHeight": 64,
2580
- "minWidth": 0,
2581
- "padding": 0,
2582
- "paddingBottom": 8,
2583
- "paddingLeft": 16,
2584
- "paddingRight": 16,
2585
- "paddingTop": 8,
2586
- "position": "relative",
2587
- "zIndex": 0,
2588
- }
2589
- }
2590
- >
2591
- <div
2592
- className=""
2593
- style={
2594
- {
2595
- "alignItems": "center",
2596
- "borderStyle": "solid",
2597
- "borderWidth": 0,
2598
- "boxSizing": "border-box",
2599
- "display": "flex",
2600
- "flexDirection": "row",
2601
- "justifyContent": "space-between",
2602
- "margin": 0,
2603
- "minHeight": 0,
2604
- "minWidth": 0,
2605
- "padding": 0,
2606
- "position": "relative",
2607
- "width": "100%",
2608
- "zIndex": 0,
2609
- }
2610
- }
2611
- >
2612
- <span
2613
- className=""
2614
- style={
2615
- {
2616
- "MozOsxFontSmoothing": "grayscale",
2617
- "WebkitFontSmoothing": "antialiased",
2618
- "display": "block",
2619
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2620
- "fontSize": 16,
2621
- "fontWeight": 700,
2622
- "lineHeight": "20px",
2623
- }
2624
- }
2625
- >
2626
- Step 1 of 4
2627
- </span>
2628
- <div
2629
- className=""
2630
- style={
2631
- {
2632
- "alignItems": "stretch",
2633
- "borderStyle": "solid",
2634
- "borderWidth": 0,
2635
- "boxSizing": "border-box",
2636
- "display": "flex",
2637
- "flexDirection": "row",
2638
- "justifyContent": "flex-end",
2639
- "margin": 0,
2640
- "minHeight": 0,
2641
- "minWidth": 0,
2642
- "padding": 0,
2643
- "position": "relative",
2644
- "zIndex": 0,
2645
- }
2646
- }
2647
- >
2648
- <button
2649
- aria-disabled={false}
2650
- className=""
2651
- onBlur={[Function]}
2652
- onClick={[Function]}
2653
- onDragStart={[Function]}
2654
- onFocus={[Function]}
2655
- onKeyDown={[Function]}
2656
- onKeyUp={[Function]}
2657
- onMouseDown={[Function]}
2658
- onMouseEnter={[Function]}
2659
- onMouseLeave={[Function]}
2660
- onMouseUp={[Function]}
2661
- onTouchCancel={[Function]}
2662
- onTouchEnd={[Function]}
2663
- onTouchStart={[Function]}
2664
- role="button"
2665
- style={
2666
- {
2667
- "::MozFocusInner": {
2668
- "border": 0,
2669
- },
2670
- ":focus": {
2671
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2672
- },
2673
- "alignItems": "center",
2674
- "background": "none",
2675
- "border": "none",
2676
- "borderRadius": 4,
2677
- "boxSizing": "border-box",
2678
- "color": "#1865f2",
2679
- "cursor": "pointer",
2680
- "display": "inline-flex",
2681
- "height": 40,
2682
- "justifyContent": "center",
2683
- "margin": 0,
2684
- "outline": "none",
2685
- "paddingBottom": 0,
2686
- "paddingLeft": 0,
2687
- "paddingRight": 0,
2688
- "paddingTop": 0,
2689
- "position": "relative",
2690
- "textDecoration": "none",
2691
- "touchAction": "manipulation",
2692
- "userSelect": "none",
2693
- }
2694
- }
2695
- tabIndex={0}
2696
- type="button"
2697
- >
2698
- <span
2699
- className=""
2700
- style={
2701
- {
2702
- "MozOsxFontSmoothing": "grayscale",
2703
- "WebkitFontSmoothing": "antialiased",
2704
- "alignItems": "center",
2705
- "display": "inline-block",
2706
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2707
- "fontSize": 16,
2708
- "fontWeight": "bold",
2709
- "lineHeight": "20px",
2710
- "overflow": "hidden",
2711
- "pointerEvents": "none",
2712
- "position": "relative",
2713
- "textOverflow": "ellipsis",
2714
- "whiteSpace": "nowrap",
2715
- }
2716
- }
2717
- >
2718
- Previous
2719
- </span>
2720
- </button>
2721
- <div
2722
- aria-hidden="true"
2723
- className=""
2724
- style={
2725
- {
2726
- "MsFlexBasis": 16,
2727
- "MsFlexPreferredSize": 16,
2728
- "WebkitFlexBasis": 16,
2729
- "alignItems": "stretch",
2730
- "borderStyle": "solid",
2731
- "borderWidth": 0,
2732
- "boxSizing": "border-box",
2733
- "display": "flex",
2734
- "flexBasis": 16,
2735
- "flexDirection": "column",
2736
- "flexShrink": 0,
2737
- "margin": 0,
2738
- "minHeight": 0,
2739
- "minWidth": 0,
2740
- "padding": 0,
2741
- "position": "relative",
2742
- "width": 16,
2743
- "zIndex": 0,
2744
- }
2745
- }
2746
- />
2747
- <button
2748
- aria-disabled={false}
2749
- className=""
2750
- onBlur={[Function]}
2751
- onClick={[Function]}
2752
- onDragStart={[Function]}
2753
- onFocus={[Function]}
2754
- onKeyDown={[Function]}
2755
- onKeyUp={[Function]}
2756
- onMouseDown={[Function]}
2757
- onMouseEnter={[Function]}
2758
- onMouseLeave={[Function]}
2759
- onMouseUp={[Function]}
2760
- onTouchCancel={[Function]}
2761
- onTouchEnd={[Function]}
2762
- onTouchStart={[Function]}
2763
- role="button"
2764
- style={
2765
- {
2766
- "::MozFocusInner": {
2767
- "border": 0,
2768
- },
2769
- ":focus": {
2770
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2771
- },
2772
- "alignItems": "center",
2773
- "background": "#1865f2",
2774
- "border": "none",
2775
- "borderRadius": 4,
2776
- "boxSizing": "border-box",
2777
- "color": "#ffffff",
2778
- "cursor": "pointer",
2779
- "display": "inline-flex",
2780
- "height": 40,
2781
- "justifyContent": "center",
2782
- "margin": 0,
2783
- "outline": "none",
2784
- "paddingBottom": 0,
2785
- "paddingLeft": 16,
2786
- "paddingRight": 16,
2787
- "paddingTop": 0,
2788
- "position": "relative",
2789
- "textDecoration": "none",
2790
- "touchAction": "manipulation",
2791
- "userSelect": "none",
2792
- }
2793
- }
2794
- tabIndex={0}
2795
- type="button"
2796
- >
2797
- <span
2798
- className=""
2799
- style={
2800
- {
2801
- "MozOsxFontSmoothing": "grayscale",
2802
- "WebkitFontSmoothing": "antialiased",
2803
- "alignItems": "center",
2804
- "display": "inline-block",
2805
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2806
- "fontSize": 16,
2807
- "fontWeight": "bold",
2808
- "lineHeight": "20px",
2809
- "overflow": "hidden",
2810
- "pointerEvents": "none",
2811
- "textOverflow": "ellipsis",
2812
- "whiteSpace": "nowrap",
2813
- }
2814
- }
2815
- >
2816
- Next
2817
- </span>
2818
- </button>
2819
- </div>
2820
- </div>
2821
- </div>
2822
- </div>
2823
- </div>
2824
- </div>
2825
- </div>
2826
- </div>
2827
- `;
2828
-
2829
- exports[`wonder-blocks-modal example 10 1`] = `
2830
- <div
2831
- className=""
2832
- style={
2833
- {
2834
- "alignItems": "stretch",
2835
- "borderStyle": "solid",
2836
- "borderWidth": 0,
2837
- "boxSizing": "border-box",
2838
- "display": "flex",
2839
- "flexDirection": "column",
2840
- "height": 512,
2841
- "margin": 0,
2842
- "minHeight": 0,
2843
- "minWidth": 0,
2844
- "padding": 0,
2845
- "position": "relative",
2846
- "zIndex": 0,
2847
- }
2848
- }
2849
- >
2850
- <div
2851
- className=""
2852
- style={
2853
- {
2854
- "alignItems": "center",
2855
- "backgroundImage": "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
2856
- "backgroundPosition": "0 0, 0 10px, 10px -10px, -10px 0px",
2857
- "backgroundSize": "20px 20px",
2858
- "borderStyle": "solid",
2859
- "borderWidth": 0,
2860
- "bottom": 0,
2861
- "boxSizing": "border-box",
2862
- "display": "flex",
2863
- "flexDirection": "row",
2864
- "justifyContent": "center",
2865
- "left": 0,
2866
- "margin": 0,
2867
- "minHeight": 0,
2868
- "minWidth": 0,
2869
- "padding": 0,
2870
- "position": "absolute",
2871
- "right": 0,
2872
- "top": 0,
2873
- "zIndex": 0,
2874
- }
2875
- }
2876
- >
2877
- <div
2878
- className=""
2879
- style={
2880
- {
2881
- "alignItems": "stretch",
2882
- "borderStyle": "solid",
2883
- "borderWidth": 0,
2884
- "boxSizing": "border-box",
2885
- "display": "flex",
2886
- "flexDirection": "row",
2887
- "height": "60.42%",
2888
- "margin": 0,
2889
- "maxWidth": 888,
2890
- "minHeight": 308,
2891
- "minWidth": 0,
2892
- "padding": 0,
2893
- "position": "relative",
2894
- "width": "86.72%",
2895
- "zIndex": 0,
2896
- }
2897
- }
2898
- >
2899
- <div
2900
- className=""
2901
- style={
2902
- {
2903
- "alignItems": "stretch",
2904
- "borderStyle": "solid",
2905
- "borderWidth": 0,
2906
- "bottom": 0,
2907
- "boxSizing": "border-box",
2908
- "display": "flex",
2909
- "flexDirection": "column",
2910
- "left": 0,
2911
- "margin": 0,
2912
- "minHeight": 0,
2913
- "minWidth": 0,
2914
- "padding": 0,
2915
- "pointerEvents": "none",
2916
- "position": "absolute",
2917
- "right": 0,
2918
- "top": 0,
2919
- "zIndex": -1,
2920
- }
2921
- }
2922
- >
2923
- <div
2924
- className=""
2925
- style={
2926
- {
2927
- "alignItems": "stretch",
2928
- "background": "url(/blue-blob.png)",
2929
- "backgroundSize": "cover",
2930
- "borderStyle": "solid",
2931
- "borderWidth": 0,
2932
- "boxSizing": "border-box",
2933
- "display": "flex",
2934
- "flexDirection": "column",
2935
- "height": 306,
2936
- "left": -60,
2937
- "margin": 0,
2938
- "minHeight": 0,
2939
- "minWidth": 0,
2940
- "padding": 0,
2941
- "position": "absolute",
2942
- "top": 100,
2943
- "width": 294,
2944
- "zIndex": 0,
2945
- }
2946
- }
2947
- />
2948
- </div>
2949
- <div
2950
- aria-modal="true"
2951
- className=""
2952
- role="dialog"
2953
- style={
2954
- {
2955
- "alignItems": "stretch",
2956
- "borderRadius": 4,
2957
- "borderStyle": "solid",
2958
- "borderWidth": 0,
2959
- "boxSizing": "border-box",
2960
- "display": "flex",
2961
- "flexDirection": "column",
2962
- "height": "100%",
2963
- "margin": 0,
2964
- "minHeight": 0,
2965
- "minWidth": 0,
2966
- "overflow": "hidden",
2967
- "padding": 0,
2968
- "position": "relative",
2969
- "width": "100%",
2970
- "zIndex": 0,
2971
- }
2972
- }
2973
- >
2974
- <div
2975
- className=""
2976
- style={
2977
- {
2978
- "alignItems": "stretch",
2979
- "borderStyle": "solid",
2980
- "borderWidth": 0,
2981
- "boxSizing": "border-box",
2982
- "display": "flex",
2983
- "flex": 1,
2984
- "flexDirection": "row",
2985
- "margin": 0,
2986
- "minHeight": 0,
2987
- "minWidth": 0,
2988
- "padding": 0,
2989
- "position": "relative",
2990
- "zIndex": 0,
2991
- }
2992
- }
2993
- >
2994
- <div
2995
- className=""
2996
- style={
2997
- {
2998
- "alignItems": "stretch",
2999
- "background": "#0b2149",
3000
- "borderStyle": "solid",
3001
- "borderWidth": 0,
3002
- "boxSizing": "border-box",
3003
- "color": "#ffffff",
3004
- "display": "flex",
3005
- "flex": "1 1 auto",
3006
- "flexDirection": "column",
3007
- "height": "100%",
3008
- "margin": 0,
3009
- "minHeight": 0,
3010
- "minWidth": 0,
3011
- "overflow": "hidden",
3012
- "padding": 0,
3013
- "position": "relative",
3014
- "width": "100%",
3015
- "zIndex": 0,
3016
- }
3017
- }
3018
- >
3019
- <div
3020
- className=""
3021
- style={
3022
- {
3023
- "alignItems": "stretch",
3024
- "borderStyle": "solid",
3025
- "borderWidth": 0,
3026
- "boxSizing": "border-box",
3027
- "display": "block",
3028
- "flex": 1,
3029
- "flexDirection": "column",
3030
- "margin": 0,
3031
- "minHeight": 0,
3032
- "minWidth": 0,
3033
- "overflow": "auto",
3034
- "padding": 0,
3035
- "position": "relative",
3036
- "zIndex": 0,
3037
- }
3038
- }
3039
- >
3040
- <div
3041
- className=""
3042
- style={
3043
- {
3044
- "alignItems": "stretch",
3045
- "borderStyle": "solid",
3046
- "borderWidth": 0,
3047
- "boxSizing": "border-box",
3048
- "display": "flex",
3049
- "flex": 1,
3050
- "flexDirection": "column",
3051
- "margin": 0,
3052
- "minHeight": "100%",
3053
- "minWidth": 0,
3054
- "padding": 32,
3055
- "position": "relative",
3056
- "zIndex": 0,
3057
- }
3058
- }
3059
- >
3060
- <div
3061
- className=""
3062
- style={
3063
- {
3064
- "alignItems": "stretch",
3065
- "borderStyle": "solid",
3066
- "borderWidth": 0,
3067
- "boxSizing": "border-box",
3068
- "display": "flex",
3069
- "flexDirection": "column",
3070
- "margin": 0,
3071
- "minHeight": 0,
3072
- "minWidth": 0,
3073
- "padding": 0,
3074
- "position": "relative",
3075
- "zIndex": 0,
3076
- }
3077
- }
3078
- >
3079
- <h1
3080
- className=""
3081
- style={
3082
- {
3083
- "@media (maxWidth: 1023px)": {
3084
- "fontSize": 28,
3085
- "lineHeight": "32px",
3086
- },
3087
- "@media (minWidth: 1024px)": {
3088
- "fontSize": 36,
3089
- "lineHeight": "40px",
3090
- },
3091
- "MozOsxFontSmoothing": "grayscale",
3092
- "WebkitFontSmoothing": "antialiased",
3093
- "display": "block",
3094
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3095
- "fontWeight": 900,
3096
- "marginBottom": 0,
3097
- "marginTop": 0,
3098
- }
3099
- }
3100
- >
3101
- Sidebar
3102
- </h1>
3103
- <span
3104
- className=""
3105
- style={
3106
- {
3107
- "MozOsxFontSmoothing": "grayscale",
3108
- "WebkitFontSmoothing": "antialiased",
3109
- "display": "block",
3110
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3111
- "fontSize": 16,
3112
- "fontWeight": 400,
3113
- "lineHeight": "22px",
3114
- }
3115
- }
3116
- >
3117
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
3118
- </span>
3119
- </div>
3120
- </div>
3121
- </div>
3122
- </div>
3123
- <div
3124
- className=""
3125
- style={
3126
- {
3127
- "alignItems": "stretch",
3128
- "background": "white",
3129
- "borderStyle": "solid",
3130
- "borderWidth": 0,
3131
- "boxSizing": "border-box",
3132
- "display": "flex",
3133
- "flex": "1 1 auto",
3134
- "flexDirection": "column",
3135
- "height": "100%",
3136
- "margin": 0,
3137
- "minHeight": 0,
3138
- "minWidth": 0,
3139
- "overflow": "hidden",
3140
- "padding": 0,
3141
- "position": "relative",
3142
- "width": "100%",
3143
- "zIndex": 0,
3144
- }
3145
- }
3146
- >
3147
- <button
3148
- aria-label="Close modal"
3149
- className=""
3150
- disabled={false}
3151
- onBlur={[Function]}
3152
- onClick={[Function]}
3153
- onDragStart={[Function]}
3154
- onFocus={[Function]}
3155
- onKeyDown={[Function]}
3156
- onKeyUp={[Function]}
3157
- onMouseDown={[Function]}
3158
- onMouseEnter={[Function]}
3159
- onMouseLeave={[Function]}
3160
- onMouseUp={[Function]}
3161
- onTouchCancel={[Function]}
3162
- onTouchEnd={[Function]}
3163
- onTouchStart={[Function]}
3164
- style={
3165
- {
3166
- "::MozFocusInner": {
3167
- "border": 0,
3168
- },
3169
- ":focus": {
3170
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
3171
- },
3172
- "alignItems": "center",
3173
- "background": "none",
3174
- "border": "none",
3175
- "boxSizing": "border-box",
3176
- "color": "rgba(33,36,44,0.64)",
3177
- "cursor": "pointer",
3178
- "display": "inline-flex",
3179
- "height": 40,
3180
- "justifyContent": "center",
3181
- "margin": -8,
3182
- "outline": "none",
3183
- "padding": 0,
3184
- "position": "absolute",
3185
- "right": 16,
3186
- "textDecoration": "none",
3187
- "top": 16,
3188
- "touchAction": "manipulation",
3189
- "width": 40,
3190
- "zIndex": 1,
3191
- }
3192
- }
3193
- tabIndex={0}
3194
- type="button"
3195
- >
3196
- <svg
3197
- className=""
3198
- height={24}
3199
- style={
3200
- {
3201
- "display": "inline-block",
3202
- "flexGrow": 0,
3203
- "flexShrink": 0,
3204
- "verticalAlign": "text-bottom",
3205
- }
3206
- }
3207
- viewBox="0 0 24 24"
3208
- width={24}
3209
- >
3210
- <path
3211
- d="M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
3212
- fill="currentColor"
3213
- />
3214
- </svg>
3215
- </button>
3216
- <div
3217
- className=""
3218
- style={
3219
- {
3220
- "alignItems": "stretch",
3221
- "borderStyle": "solid",
3222
- "borderWidth": 0,
3223
- "boxSizing": "border-box",
3224
- "display": "block",
3225
- "flex": 1,
3226
- "flexDirection": "column",
3227
- "margin": 0,
3228
- "minHeight": 0,
3229
- "minWidth": 0,
3230
- "overflow": "auto",
3231
- "padding": 0,
3232
- "position": "relative",
3233
- "zIndex": 0,
3234
- }
3235
- }
3236
- >
3237
- <div
3238
- className=""
3239
- style={
3240
- {
3241
- "alignItems": "stretch",
3242
- "borderStyle": "solid",
3243
- "borderWidth": 0,
3244
- "boxSizing": "border-box",
3245
- "display": "flex",
3246
- "flex": 1,
3247
- "flexDirection": "column",
3248
- "margin": 0,
3249
- "minHeight": "100%",
3250
- "minWidth": 0,
3251
- "padding": 32,
3252
- "position": "relative",
3253
- "zIndex": 0,
3254
- }
3255
- }
3256
- >
3257
- <div
3258
- className=""
3259
- style={
3260
- {
3261
- "alignItems": "stretch",
3262
- "borderStyle": "solid",
3263
- "borderWidth": 0,
3264
- "boxSizing": "border-box",
3265
- "display": "flex",
3266
- "flexDirection": "column",
3267
- "margin": 0,
3268
- "minHeight": 0,
3269
- "minWidth": 0,
3270
- "padding": 0,
3271
- "position": "relative",
3272
- "zIndex": 0,
3273
- }
3274
- }
3275
- >
3276
- <h1
3277
- className=""
3278
- style={
3279
- {
3280
- "@media (maxWidth: 1023px)": {
3281
- "fontSize": 28,
3282
- "lineHeight": "32px",
3283
- },
3284
- "@media (minWidth: 1024px)": {
3285
- "fontSize": 36,
3286
- "lineHeight": "40px",
3287
- },
3288
- "MozOsxFontSmoothing": "grayscale",
3289
- "WebkitFontSmoothing": "antialiased",
3290
- "display": "block",
3291
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3292
- "fontWeight": 900,
3293
- "marginBottom": 0,
3294
- "marginTop": 0,
3295
- }
3296
- }
3297
- >
3298
- Contents
3299
- </h1>
3300
- <span
3301
- className=""
3302
- style={
3303
- {
3304
- "MozOsxFontSmoothing": "grayscale",
3305
- "WebkitFontSmoothing": "antialiased",
3306
- "display": "block",
3307
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3308
- "fontSize": 16,
3309
- "fontWeight": 400,
3310
- "lineHeight": "22px",
3311
- }
3312
- }
3313
- >
3314
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3315
- </span>
3316
- <div
3317
- aria-hidden="true"
3318
- className=""
3319
- style={
3320
- {
3321
- "MsFlexBasis": 16,
3322
- "MsFlexPreferredSize": 16,
3323
- "WebkitFlexBasis": 16,
3324
- "alignItems": "stretch",
3325
- "borderStyle": "solid",
3326
- "borderWidth": 0,
3327
- "boxSizing": "border-box",
3328
- "display": "flex",
3329
- "flexBasis": 16,
3330
- "flexDirection": "column",
3331
- "flexShrink": 0,
3332
- "margin": 0,
3333
- "minHeight": 0,
3334
- "minWidth": 0,
3335
- "padding": 0,
3336
- "position": "relative",
3337
- "width": 16,
3338
- "zIndex": 0,
3339
- }
3340
- }
3341
- />
3342
- <button
3343
- aria-disabled={false}
3344
- className=""
3345
- onBlur={[Function]}
3346
- onClick={[Function]}
3347
- onDragStart={[Function]}
3348
- onFocus={[Function]}
3349
- onKeyDown={[Function]}
3350
- onKeyUp={[Function]}
3351
- onMouseDown={[Function]}
3352
- onMouseEnter={[Function]}
3353
- onMouseLeave={[Function]}
3354
- onMouseUp={[Function]}
3355
- onTouchCancel={[Function]}
3356
- onTouchEnd={[Function]}
3357
- onTouchStart={[Function]}
3358
- role="button"
3359
- style={
3360
- {
3361
- "::MozFocusInner": {
3362
- "border": 0,
3363
- },
3364
- ":focus": {
3365
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
3366
- },
3367
- "alignItems": "center",
3368
- "background": "#1865f2",
3369
- "border": "none",
3370
- "borderRadius": 4,
3371
- "boxSizing": "border-box",
3372
- "color": "#ffffff",
3373
- "cursor": "pointer",
3374
- "display": "inline-flex",
3375
- "height": 40,
3376
- "justifyContent": "center",
3377
- "margin": 0,
3378
- "outline": "none",
3379
- "paddingBottom": 0,
3380
- "paddingLeft": 16,
3381
- "paddingRight": 16,
3382
- "paddingTop": 0,
3383
- "position": "relative",
3384
- "textDecoration": "none",
3385
- "touchAction": "manipulation",
3386
- "userSelect": "none",
3387
- }
3388
- }
3389
- tabIndex={0}
3390
- type="button"
3391
- >
3392
- <span
3393
- className=""
3394
- style={
3395
- {
3396
- "MozOsxFontSmoothing": "grayscale",
3397
- "WebkitFontSmoothing": "antialiased",
3398
- "alignItems": "center",
3399
- "display": "inline-block",
3400
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3401
- "fontSize": 16,
3402
- "fontWeight": "bold",
3403
- "lineHeight": "20px",
3404
- "overflow": "hidden",
3405
- "pointerEvents": "none",
3406
- "textOverflow": "ellipsis",
3407
- "whiteSpace": "nowrap",
3408
- }
3409
- }
3410
- >
3411
- Primary action
3412
- </span>
3413
- </button>
3414
- </div>
3415
- </div>
3416
- </div>
3417
- </div>
3418
- </div>
3419
- </div>
3420
- <div
3421
- className=""
3422
- style={
3423
- {
3424
- "alignItems": "stretch",
3425
- "borderStyle": "solid",
3426
- "borderWidth": 0,
3427
- "bottom": 0,
3428
- "boxSizing": "border-box",
3429
- "display": "flex",
3430
- "flexDirection": "column",
3431
- "left": 0,
3432
- "margin": 0,
3433
- "minHeight": 0,
3434
- "minWidth": 0,
3435
- "padding": 0,
3436
- "pointerEvents": "none",
3437
- "position": "absolute",
3438
- "right": 0,
3439
- "top": 0,
3440
- "zIndex": 1,
3441
- }
3442
- }
3443
- >
3444
- <div
3445
- className=""
3446
- style={
3447
- {
3448
- "alignItems": "stretch",
3449
- "background": "url(/asteroid.png)",
3450
- "backgroundSize": "cover",
3451
- "borderStyle": "solid",
3452
- "borderWidth": 0,
3453
- "boxSizing": "border-box",
3454
- "display": "flex",
3455
- "flexDirection": "column",
3456
- "height": 400,
3457
- "left": 50,
3458
- "margin": 0,
3459
- "minHeight": 0,
3460
- "minWidth": 0,
3461
- "padding": 0,
3462
- "position": "absolute",
3463
- "top": -35,
3464
- "width": 650,
3465
- "zIndex": 0,
3466
- }
3467
- }
3468
- />
3469
- </div>
3470
- </div>
3471
- </div>
3472
- </div>
3473
- `;