@khanacademy/wonder-blocks-dropdown 2.8.2 → 2.9.0

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 (16) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/es/index.js +18 -9
  3. package/dist/index.js +41 -30
  4. package/docs.md +4 -11
  5. package/package.json +9 -10
  6. package/src/components/__docs__/single-select.stories.js +54 -0
  7. package/src/components/__tests__/single-select.test.js +95 -0
  8. package/src/components/dropdown-core.js +7 -7
  9. package/src/components/multi-select.js +1 -1
  10. package/src/components/single-select.js +42 -4
  11. package/src/index.js +2 -1
  12. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -4548
  13. package/src/__tests__/generated-snapshot.test.js +0 -1612
  14. package/src/components/action-menu.md +0 -338
  15. package/src/components/multi-select.md +0 -718
  16. package/src/components/single-select.md +0 -520
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap DELETED
@@ -1,4548 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`wonder-blocks-dropdown example 1 1`] = `
4
- <div
5
- className=""
6
- style={
7
- {
8
- "alignItems": "stretch",
9
- "borderStyle": "solid",
10
- "borderWidth": 0,
11
- "boxSizing": "border-box",
12
- "display": "flex",
13
- "flexDirection": "row",
14
- "justifyContent": "flex-end",
15
- "margin": 0,
16
- "minHeight": 0,
17
- "minWidth": 0,
18
- "padding": 0,
19
- "position": "relative",
20
- "zIndex": 0,
21
- }
22
- }
23
- >
24
- <div
25
- className=""
26
- onKeyDown={[Function]}
27
- onKeyUp={[Function]}
28
- style={
29
- {
30
- "alignItems": "stretch",
31
- "borderStyle": "solid",
32
- "borderWidth": 0,
33
- "boxSizing": "border-box",
34
- "display": "flex",
35
- "flexDirection": "column",
36
- "margin": 0,
37
- "minHeight": 0,
38
- "minWidth": 0,
39
- "padding": 0,
40
- "position": "relative",
41
- "width": "fit-content",
42
- "zIndex": 0,
43
- }
44
- }
45
- >
46
- <span
47
- aria-atomic="true"
48
- aria-live="polite"
49
- aria-relevant="additions text"
50
- className=""
51
- data-test-id="dropdown-live-region"
52
- style={
53
- {
54
- "border": 0,
55
- "clip": "rect(0,0,0,0)",
56
- "height": 1,
57
- "margin": -1,
58
- "overflow": "hidden",
59
- "padding": 0,
60
- "position": "absolute",
61
- "width": 1,
62
- }
63
- }
64
- />
65
- <button
66
- aria-expanded="false"
67
- aria-haspopup="menu"
68
- className=""
69
- data-test-id="teacher-menu"
70
- disabled={false}
71
- onBlur={[Function]}
72
- onClick={[Function]}
73
- onDragStart={[Function]}
74
- onFocus={[Function]}
75
- onKeyDown={[Function]}
76
- onKeyUp={[Function]}
77
- onMouseDown={[Function]}
78
- onMouseEnter={[Function]}
79
- onMouseLeave={[Function]}
80
- onMouseUp={[Function]}
81
- onTouchCancel={[Function]}
82
- onTouchEnd={[Function]}
83
- onTouchStart={[Function]}
84
- style={
85
- {
86
- "::MozFocusInner": {
87
- "border": 0,
88
- },
89
- ":focus": {
90
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
91
- },
92
- "alignItems": "center",
93
- "background": "none",
94
- "border": "none",
95
- "borderRadius": 4,
96
- "boxSizing": "border-box",
97
- "color": "#1865f2",
98
- "cursor": "pointer",
99
- "display": "inline-flex",
100
- "height": 40,
101
- "justifyContent": "center",
102
- "margin": 0,
103
- "outline": "none",
104
- "position": "relative",
105
- "textDecoration": "none",
106
- "touchAction": "manipulation",
107
- }
108
- }
109
- tabIndex={0}
110
- type="button"
111
- >
112
- <div
113
- className=""
114
- style={
115
- {
116
- "alignItems": "stretch",
117
- "borderStyle": "solid",
118
- "borderWidth": 0,
119
- "boxSizing": "border-box",
120
- "display": "flex",
121
- "flexDirection": "column",
122
- "margin": 0,
123
- "minHeight": 0,
124
- "minWidth": 0,
125
- "padding": 0,
126
- "position": "relative",
127
- "zIndex": 0,
128
- }
129
- }
130
- >
131
- <span
132
- className=""
133
- style={
134
- {
135
- "MozOsxFontSmoothing": "grayscale",
136
- "WebkitFontSmoothing": "antialiased",
137
- "alignItems": "center",
138
- "display": "inline-block",
139
- "fontFamily": "Lato, "Noto Sans", sans-serif",
140
- "fontSize": 16,
141
- "fontWeight": "bold",
142
- "lineHeight": "20px",
143
- "overflow": "hidden",
144
- "pointerEvents": "none",
145
- "textAlign": "left",
146
- "textOverflow": "ellipsis",
147
- "userSelect": "none",
148
- "whiteSpace": "nowrap",
149
- }
150
- }
151
- >
152
- Betsy Appleseed
153
- </span>
154
- </div>
155
- <div
156
- aria-hidden="true"
157
- className=""
158
- style={
159
- {
160
- "MsFlexBasis": 4,
161
- "MsFlexPreferredSize": 4,
162
- "WebkitFlexBasis": 4,
163
- "alignItems": "stretch",
164
- "borderStyle": "solid",
165
- "borderWidth": 0,
166
- "boxSizing": "border-box",
167
- "display": "flex",
168
- "flexBasis": 4,
169
- "flexDirection": "column",
170
- "flexShrink": 0,
171
- "margin": 0,
172
- "minHeight": 0,
173
- "minWidth": 0,
174
- "padding": 0,
175
- "position": "relative",
176
- "width": 4,
177
- "zIndex": 0,
178
- }
179
- }
180
- />
181
- <svg
182
- className=""
183
- height={16}
184
- style={
185
- {
186
- "display": "inline-block",
187
- "flexGrow": 0,
188
- "flexShrink": 0,
189
- "verticalAlign": "text-bottom",
190
- }
191
- }
192
- viewBox="0 0 16 16"
193
- width={16}
194
- >
195
- <path
196
- 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"
197
- fill="currentColor"
198
- />
199
- </svg>
200
- </button>
201
- </div>
202
- </div>
203
- `;
204
-
205
- exports[`wonder-blocks-dropdown example 2 1`] = `
206
- <div
207
- className=""
208
- style={
209
- {
210
- "alignItems": "stretch",
211
- "borderStyle": "solid",
212
- "borderWidth": 0,
213
- "boxSizing": "border-box",
214
- "display": "flex",
215
- "flexDirection": "row",
216
- "margin": 0,
217
- "minHeight": 0,
218
- "minWidth": 0,
219
- "padding": 0,
220
- "position": "relative",
221
- "zIndex": 0,
222
- }
223
- }
224
- >
225
- <div
226
- aria-hidden="true"
227
- className=""
228
- style={
229
- {
230
- "alignItems": "stretch",
231
- "borderStyle": "solid",
232
- "borderWidth": 0,
233
- "boxSizing": "border-box",
234
- "display": "flex",
235
- "flexDirection": "column",
236
- "flexGrow": 1,
237
- "margin": 0,
238
- "minHeight": 0,
239
- "minWidth": 0,
240
- "padding": 0,
241
- "position": "relative",
242
- "zIndex": 0,
243
- }
244
- }
245
- />
246
- <div
247
- className=""
248
- onKeyDown={[Function]}
249
- onKeyUp={[Function]}
250
- style={
251
- {
252
- "alignItems": "stretch",
253
- "borderStyle": "solid",
254
- "borderWidth": 0,
255
- "boxSizing": "border-box",
256
- "display": "flex",
257
- "flexDirection": "column",
258
- "margin": 0,
259
- "minHeight": 0,
260
- "minWidth": 0,
261
- "padding": 0,
262
- "position": "relative",
263
- "width": 100,
264
- "zIndex": 0,
265
- }
266
- }
267
- >
268
- <span
269
- aria-atomic="true"
270
- aria-live="polite"
271
- aria-relevant="additions text"
272
- className=""
273
- data-test-id="dropdown-live-region"
274
- style={
275
- {
276
- "border": 0,
277
- "clip": "rect(0,0,0,0)",
278
- "height": 1,
279
- "margin": -1,
280
- "overflow": "hidden",
281
- "padding": 0,
282
- "position": "absolute",
283
- "width": 1,
284
- }
285
- }
286
- />
287
- <button
288
- aria-expanded="false"
289
- aria-haspopup="menu"
290
- className=""
291
- disabled={false}
292
- onBlur={[Function]}
293
- onClick={[Function]}
294
- onDragStart={[Function]}
295
- onFocus={[Function]}
296
- onKeyDown={[Function]}
297
- onKeyUp={[Function]}
298
- onMouseDown={[Function]}
299
- onMouseEnter={[Function]}
300
- onMouseLeave={[Function]}
301
- onMouseUp={[Function]}
302
- onTouchCancel={[Function]}
303
- onTouchEnd={[Function]}
304
- onTouchStart={[Function]}
305
- style={
306
- {
307
- "::MozFocusInner": {
308
- "border": 0,
309
- },
310
- ":focus": {
311
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
312
- },
313
- "alignItems": "center",
314
- "background": "none",
315
- "border": "none",
316
- "borderRadius": 4,
317
- "boxSizing": "border-box",
318
- "color": "#1865f2",
319
- "cursor": "pointer",
320
- "display": "inline-flex",
321
- "height": 40,
322
- "justifyContent": "center",
323
- "margin": 0,
324
- "outline": "none",
325
- "position": "relative",
326
- "textDecoration": "none",
327
- "touchAction": "manipulation",
328
- }
329
- }
330
- tabIndex={0}
331
- type="button"
332
- >
333
- <div
334
- className=""
335
- style={
336
- {
337
- "alignItems": "stretch",
338
- "borderStyle": "solid",
339
- "borderWidth": 0,
340
- "boxSizing": "border-box",
341
- "display": "flex",
342
- "flexDirection": "column",
343
- "margin": 0,
344
- "minHeight": 0,
345
- "minWidth": 0,
346
- "padding": 0,
347
- "position": "relative",
348
- "zIndex": 0,
349
- }
350
- }
351
- >
352
- <span
353
- className=""
354
- style={
355
- {
356
- "MozOsxFontSmoothing": "grayscale",
357
- "WebkitFontSmoothing": "antialiased",
358
- "alignItems": "center",
359
- "display": "inline-block",
360
- "fontFamily": "Lato, "Noto Sans", sans-serif",
361
- "fontSize": 16,
362
- "fontWeight": "bold",
363
- "lineHeight": "20px",
364
- "overflow": "hidden",
365
- "pointerEvents": "none",
366
- "textAlign": "left",
367
- "textOverflow": "ellipsis",
368
- "userSelect": "none",
369
- "whiteSpace": "nowrap",
370
- }
371
- }
372
- >
373
- Betsy Appleseed
374
- </span>
375
- </div>
376
- <div
377
- aria-hidden="true"
378
- className=""
379
- style={
380
- {
381
- "MsFlexBasis": 4,
382
- "MsFlexPreferredSize": 4,
383
- "WebkitFlexBasis": 4,
384
- "alignItems": "stretch",
385
- "borderStyle": "solid",
386
- "borderWidth": 0,
387
- "boxSizing": "border-box",
388
- "display": "flex",
389
- "flexBasis": 4,
390
- "flexDirection": "column",
391
- "flexShrink": 0,
392
- "margin": 0,
393
- "minHeight": 0,
394
- "minWidth": 0,
395
- "padding": 0,
396
- "position": "relative",
397
- "width": 4,
398
- "zIndex": 0,
399
- }
400
- }
401
- />
402
- <svg
403
- className=""
404
- height={16}
405
- style={
406
- {
407
- "display": "inline-block",
408
- "flexGrow": 0,
409
- "flexShrink": 0,
410
- "verticalAlign": "text-bottom",
411
- }
412
- }
413
- viewBox="0 0 16 16"
414
- width={16}
415
- >
416
- <path
417
- 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"
418
- fill="currentColor"
419
- />
420
- </svg>
421
- </button>
422
- </div>
423
- </div>
424
- `;
425
-
426
- exports[`wonder-blocks-dropdown example 3 1`] = `
427
- <div
428
- className=""
429
- style={
430
- {
431
- "alignItems": "stretch",
432
- "borderStyle": "solid",
433
- "borderWidth": 0,
434
- "boxSizing": "border-box",
435
- "display": "flex",
436
- "flexDirection": "row",
437
- "margin": 0,
438
- "minHeight": 0,
439
- "minWidth": 0,
440
- "padding": 0,
441
- "position": "relative",
442
- "zIndex": 0,
443
- }
444
- }
445
- >
446
- <div
447
- className=""
448
- onKeyDown={[Function]}
449
- onKeyUp={[Function]}
450
- style={
451
- {
452
- "alignItems": "stretch",
453
- "borderStyle": "solid",
454
- "borderWidth": 0,
455
- "boxSizing": "border-box",
456
- "display": "flex",
457
- "flexDirection": "column",
458
- "margin": 0,
459
- "minHeight": 0,
460
- "minWidth": 0,
461
- "padding": 0,
462
- "position": "relative",
463
- "width": "fit-content",
464
- "zIndex": 0,
465
- }
466
- }
467
- >
468
- <span
469
- aria-atomic="true"
470
- aria-live="polite"
471
- aria-relevant="additions text"
472
- className=""
473
- data-test-id="dropdown-live-region"
474
- style={
475
- {
476
- "border": 0,
477
- "clip": "rect(0,0,0,0)",
478
- "height": 1,
479
- "margin": -1,
480
- "overflow": "hidden",
481
- "padding": 0,
482
- "position": "absolute",
483
- "width": 1,
484
- }
485
- }
486
- />
487
- <button
488
- aria-expanded="false"
489
- aria-haspopup="menu"
490
- className=""
491
- disabled={false}
492
- onBlur={[Function]}
493
- onClick={[Function]}
494
- onDragStart={[Function]}
495
- onFocus={[Function]}
496
- onKeyDown={[Function]}
497
- onKeyUp={[Function]}
498
- onMouseDown={[Function]}
499
- onMouseEnter={[Function]}
500
- onMouseLeave={[Function]}
501
- onMouseUp={[Function]}
502
- onTouchCancel={[Function]}
503
- onTouchEnd={[Function]}
504
- onTouchStart={[Function]}
505
- style={
506
- {
507
- "::MozFocusInner": {
508
- "border": 0,
509
- },
510
- ":focus": {
511
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
512
- },
513
- "alignItems": "center",
514
- "background": "none",
515
- "border": "none",
516
- "borderRadius": 4,
517
- "boxSizing": "border-box",
518
- "color": "#1865f2",
519
- "cursor": "pointer",
520
- "display": "inline-flex",
521
- "height": 40,
522
- "justifyContent": "center",
523
- "margin": 0,
524
- "outline": "none",
525
- "position": "relative",
526
- "textDecoration": "none",
527
- "touchAction": "manipulation",
528
- }
529
- }
530
- tabIndex={0}
531
- type="button"
532
- >
533
- <div
534
- className=""
535
- style={
536
- {
537
- "alignItems": "stretch",
538
- "borderStyle": "solid",
539
- "borderWidth": 0,
540
- "boxSizing": "border-box",
541
- "display": "flex",
542
- "flexDirection": "column",
543
- "margin": 0,
544
- "minHeight": 0,
545
- "minWidth": 0,
546
- "padding": 0,
547
- "position": "relative",
548
- "zIndex": 0,
549
- }
550
- }
551
- >
552
- <span
553
- className=""
554
- style={
555
- {
556
- "MozOsxFontSmoothing": "grayscale",
557
- "WebkitFontSmoothing": "antialiased",
558
- "alignItems": "center",
559
- "display": "inline-block",
560
- "fontFamily": "Lato, "Noto Sans", sans-serif",
561
- "fontSize": 16,
562
- "fontWeight": "bold",
563
- "lineHeight": "20px",
564
- "overflow": "hidden",
565
- "pointerEvents": "none",
566
- "textAlign": "left",
567
- "textOverflow": "ellipsis",
568
- "userSelect": "none",
569
- "whiteSpace": "nowrap",
570
- }
571
- }
572
- >
573
- Assignments
574
- </span>
575
- </div>
576
- <div
577
- aria-hidden="true"
578
- className=""
579
- style={
580
- {
581
- "MsFlexBasis": 4,
582
- "MsFlexPreferredSize": 4,
583
- "WebkitFlexBasis": 4,
584
- "alignItems": "stretch",
585
- "borderStyle": "solid",
586
- "borderWidth": 0,
587
- "boxSizing": "border-box",
588
- "display": "flex",
589
- "flexBasis": 4,
590
- "flexDirection": "column",
591
- "flexShrink": 0,
592
- "margin": 0,
593
- "minHeight": 0,
594
- "minWidth": 0,
595
- "padding": 0,
596
- "position": "relative",
597
- "width": 4,
598
- "zIndex": 0,
599
- }
600
- }
601
- />
602
- <svg
603
- className=""
604
- height={16}
605
- style={
606
- {
607
- "display": "inline-block",
608
- "flexGrow": 0,
609
- "flexShrink": 0,
610
- "verticalAlign": "text-bottom",
611
- }
612
- }
613
- viewBox="0 0 16 16"
614
- width={16}
615
- >
616
- <path
617
- 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"
618
- fill="currentColor"
619
- />
620
- </svg>
621
- </button>
622
- </div>
623
- </div>
624
- `;
625
-
626
- exports[`wonder-blocks-dropdown example 4 1`] = `
627
- <div
628
- className=""
629
- style={
630
- {
631
- "alignItems": "stretch",
632
- "borderStyle": "solid",
633
- "borderWidth": 0,
634
- "boxSizing": "border-box",
635
- "display": "flex",
636
- "flexDirection": "row",
637
- "margin": 0,
638
- "minHeight": 0,
639
- "minWidth": 0,
640
- "padding": 0,
641
- "position": "relative",
642
- "zIndex": 0,
643
- }
644
- }
645
- >
646
- <div
647
- className=""
648
- onKeyDown={[Function]}
649
- onKeyUp={[Function]}
650
- style={
651
- {
652
- "alignItems": "stretch",
653
- "borderStyle": "solid",
654
- "borderWidth": 0,
655
- "boxSizing": "border-box",
656
- "display": "flex",
657
- "flexDirection": "column",
658
- "margin": 0,
659
- "minHeight": 0,
660
- "minWidth": 0,
661
- "padding": 0,
662
- "position": "relative",
663
- "width": "fit-content",
664
- "zIndex": 0,
665
- }
666
- }
667
- >
668
- <span
669
- aria-atomic="true"
670
- aria-live="polite"
671
- aria-relevant="additions text"
672
- className=""
673
- data-test-id="dropdown-live-region"
674
- style={
675
- {
676
- "border": 0,
677
- "clip": "rect(0,0,0,0)",
678
- "height": 1,
679
- "margin": -1,
680
- "overflow": "hidden",
681
- "padding": 0,
682
- "position": "absolute",
683
- "width": 1,
684
- }
685
- }
686
- />
687
- <button
688
- aria-expanded="false"
689
- aria-haspopup="menu"
690
- className=""
691
- disabled={true}
692
- onBlur={[Function]}
693
- onClick={[Function]}
694
- onDragStart={[Function]}
695
- onFocus={[Function]}
696
- onKeyDown={[Function]}
697
- onKeyUp={[Function]}
698
- onMouseDown={[Function]}
699
- onMouseEnter={[Function]}
700
- onMouseLeave={[Function]}
701
- onMouseUp={[Function]}
702
- onTouchCancel={[Function]}
703
- onTouchEnd={[Function]}
704
- onTouchStart={[Function]}
705
- style={
706
- {
707
- "::MozFocusInner": {
708
- "border": 0,
709
- },
710
- ":focus": {
711
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
712
- },
713
- "alignItems": "center",
714
- "background": "none",
715
- "border": "none",
716
- "borderRadius": 4,
717
- "boxSizing": "border-box",
718
- "color": "rgba(33,36,44,0.32)",
719
- "cursor": "default",
720
- "display": "inline-flex",
721
- "height": 40,
722
- "justifyContent": "center",
723
- "margin": 0,
724
- "outline": "none",
725
- "position": "relative",
726
- "textDecoration": "none",
727
- "touchAction": "manipulation",
728
- }
729
- }
730
- tabIndex={0}
731
- type="button"
732
- >
733
- <div
734
- className=""
735
- style={
736
- {
737
- "alignItems": "stretch",
738
- "borderStyle": "solid",
739
- "borderWidth": 0,
740
- "boxSizing": "border-box",
741
- "display": "flex",
742
- "flexDirection": "column",
743
- "margin": 0,
744
- "minHeight": 0,
745
- "minWidth": 0,
746
- "padding": 0,
747
- "position": "relative",
748
- "zIndex": 0,
749
- }
750
- }
751
- >
752
- <span
753
- className=""
754
- style={
755
- {
756
- "MozOsxFontSmoothing": "grayscale",
757
- "WebkitFontSmoothing": "antialiased",
758
- "alignItems": "center",
759
- "display": "inline-block",
760
- "fontFamily": "Lato, "Noto Sans", sans-serif",
761
- "fontSize": 16,
762
- "fontWeight": "bold",
763
- "lineHeight": "20px",
764
- "overflow": "hidden",
765
- "pointerEvents": "none",
766
- "textAlign": "left",
767
- "textOverflow": "ellipsis",
768
- "userSelect": "none",
769
- "whiteSpace": "nowrap",
770
- }
771
- }
772
- >
773
- Empty
774
- </span>
775
- </div>
776
- <div
777
- aria-hidden="true"
778
- className=""
779
- style={
780
- {
781
- "MsFlexBasis": 4,
782
- "MsFlexPreferredSize": 4,
783
- "WebkitFlexBasis": 4,
784
- "alignItems": "stretch",
785
- "borderStyle": "solid",
786
- "borderWidth": 0,
787
- "boxSizing": "border-box",
788
- "display": "flex",
789
- "flexBasis": 4,
790
- "flexDirection": "column",
791
- "flexShrink": 0,
792
- "margin": 0,
793
- "minHeight": 0,
794
- "minWidth": 0,
795
- "padding": 0,
796
- "position": "relative",
797
- "width": 4,
798
- "zIndex": 0,
799
- }
800
- }
801
- />
802
- <svg
803
- className=""
804
- height={16}
805
- style={
806
- {
807
- "display": "inline-block",
808
- "flexGrow": 0,
809
- "flexShrink": 0,
810
- "verticalAlign": "text-bottom",
811
- }
812
- }
813
- viewBox="0 0 16 16"
814
- width={16}
815
- >
816
- <path
817
- 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"
818
- fill="currentColor"
819
- />
820
- </svg>
821
- </button>
822
- </div>
823
- </div>
824
- `;
825
-
826
- exports[`wonder-blocks-dropdown example 5 1`] = `
827
- <div
828
- className=""
829
- style={
830
- {
831
- "alignItems": "stretch",
832
- "borderStyle": "solid",
833
- "borderWidth": 0,
834
- "boxSizing": "border-box",
835
- "display": "flex",
836
- "flexDirection": "row",
837
- "margin": 0,
838
- "minHeight": 0,
839
- "minWidth": 0,
840
- "padding": 0,
841
- "position": "relative",
842
- "zIndex": 0,
843
- }
844
- }
845
- >
846
- <div
847
- className=""
848
- onKeyDown={[Function]}
849
- onKeyUp={[Function]}
850
- style={
851
- {
852
- "alignItems": "stretch",
853
- "borderStyle": "solid",
854
- "borderWidth": 0,
855
- "boxSizing": "border-box",
856
- "display": "flex",
857
- "flexDirection": "column",
858
- "margin": 0,
859
- "minHeight": 0,
860
- "minWidth": 0,
861
- "padding": 0,
862
- "position": "relative",
863
- "width": "fit-content",
864
- "zIndex": 0,
865
- }
866
- }
867
- >
868
- <span
869
- aria-atomic="true"
870
- aria-live="polite"
871
- aria-relevant="additions text"
872
- className=""
873
- data-test-id="dropdown-live-region"
874
- style={
875
- {
876
- "border": 0,
877
- "clip": "rect(0,0,0,0)",
878
- "height": 1,
879
- "margin": -1,
880
- "overflow": "hidden",
881
- "padding": 0,
882
- "position": "absolute",
883
- "width": 1,
884
- }
885
- }
886
- />
887
- <button
888
- aria-expanded="false"
889
- aria-haspopup="menu"
890
- className=""
891
- data-test-id="teacher-menu"
892
- disabled={false}
893
- onBlur={[Function]}
894
- onClick={[Function]}
895
- onDragStart={[Function]}
896
- onFocus={[Function]}
897
- onKeyDown={[Function]}
898
- onKeyUp={[Function]}
899
- onMouseDown={[Function]}
900
- onMouseEnter={[Function]}
901
- onMouseLeave={[Function]}
902
- onMouseUp={[Function]}
903
- onTouchCancel={[Function]}
904
- onTouchEnd={[Function]}
905
- onTouchStart={[Function]}
906
- style={
907
- {
908
- "::MozFocusInner": {
909
- "border": 0,
910
- },
911
- ":focus": {
912
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
913
- },
914
- "alignItems": "center",
915
- "background": "none",
916
- "border": "none",
917
- "borderRadius": 4,
918
- "boxSizing": "border-box",
919
- "color": "#1865f2",
920
- "cursor": "pointer",
921
- "display": "inline-flex",
922
- "height": 40,
923
- "justifyContent": "center",
924
- "margin": 0,
925
- "outline": "none",
926
- "position": "relative",
927
- "textDecoration": "none",
928
- "touchAction": "manipulation",
929
- }
930
- }
931
- tabIndex={0}
932
- type="button"
933
- >
934
- <div
935
- className=""
936
- style={
937
- {
938
- "alignItems": "stretch",
939
- "borderStyle": "solid",
940
- "borderWidth": 0,
941
- "boxSizing": "border-box",
942
- "display": "flex",
943
- "flexDirection": "column",
944
- "margin": 0,
945
- "minHeight": 0,
946
- "minWidth": 0,
947
- "padding": 0,
948
- "position": "relative",
949
- "zIndex": 0,
950
- }
951
- }
952
- >
953
- <span
954
- className=""
955
- style={
956
- {
957
- "MozOsxFontSmoothing": "grayscale",
958
- "WebkitFontSmoothing": "antialiased",
959
- "alignItems": "center",
960
- "display": "inline-block",
961
- "fontFamily": "Lato, "Noto Sans", sans-serif",
962
- "fontSize": 16,
963
- "fontWeight": "bold",
964
- "lineHeight": "20px",
965
- "overflow": "hidden",
966
- "pointerEvents": "none",
967
- "textAlign": "left",
968
- "textOverflow": "ellipsis",
969
- "userSelect": "none",
970
- "whiteSpace": "nowrap",
971
- }
972
- }
973
- >
974
- Betsy Appleseed
975
- </span>
976
- </div>
977
- <div
978
- aria-hidden="true"
979
- className=""
980
- style={
981
- {
982
- "MsFlexBasis": 4,
983
- "MsFlexPreferredSize": 4,
984
- "WebkitFlexBasis": 4,
985
- "alignItems": "stretch",
986
- "borderStyle": "solid",
987
- "borderWidth": 0,
988
- "boxSizing": "border-box",
989
- "display": "flex",
990
- "flexBasis": 4,
991
- "flexDirection": "column",
992
- "flexShrink": 0,
993
- "margin": 0,
994
- "minHeight": 0,
995
- "minWidth": 0,
996
- "padding": 0,
997
- "position": "relative",
998
- "width": 4,
999
- "zIndex": 0,
1000
- }
1001
- }
1002
- />
1003
- <svg
1004
- className=""
1005
- height={16}
1006
- style={
1007
- {
1008
- "display": "inline-block",
1009
- "flexGrow": 0,
1010
- "flexShrink": 0,
1011
- "verticalAlign": "text-bottom",
1012
- }
1013
- }
1014
- viewBox="0 0 16 16"
1015
- width={16}
1016
- >
1017
- <path
1018
- 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"
1019
- fill="currentColor"
1020
- />
1021
- </svg>
1022
- </button>
1023
- </div>
1024
- </div>
1025
- `;
1026
-
1027
- exports[`wonder-blocks-dropdown example 6 1`] = `
1028
- <div
1029
- className=""
1030
- style={
1031
- {
1032
- "alignItems": "stretch",
1033
- "borderStyle": "solid",
1034
- "borderWidth": 0,
1035
- "boxSizing": "border-box",
1036
- "display": "flex",
1037
- "flexDirection": "row",
1038
- "margin": 0,
1039
- "minHeight": 0,
1040
- "minWidth": 0,
1041
- "padding": 0,
1042
- "position": "relative",
1043
- "zIndex": 0,
1044
- }
1045
- }
1046
- >
1047
- <div
1048
- className=""
1049
- onKeyDown={[Function]}
1050
- onKeyUp={[Function]}
1051
- style={
1052
- {
1053
- "alignItems": "stretch",
1054
- "borderStyle": "solid",
1055
- "borderWidth": 0,
1056
- "boxSizing": "border-box",
1057
- "display": "flex",
1058
- "flexDirection": "column",
1059
- "margin": 0,
1060
- "minHeight": 0,
1061
- "minWidth": 0,
1062
- "padding": 0,
1063
- "position": "relative",
1064
- "width": "fit-content",
1065
- "zIndex": 0,
1066
- }
1067
- }
1068
- >
1069
- <span
1070
- aria-atomic="true"
1071
- aria-live="polite"
1072
- aria-relevant="additions text"
1073
- className=""
1074
- data-test-id="dropdown-live-region"
1075
- style={
1076
- {
1077
- "border": 0,
1078
- "clip": "rect(0,0,0,0)",
1079
- "height": 1,
1080
- "margin": -1,
1081
- "overflow": "hidden",
1082
- "padding": 0,
1083
- "position": "absolute",
1084
- "width": 1,
1085
- }
1086
- }
1087
- />
1088
- <button
1089
- aria-expanded="false"
1090
- aria-haspopup="menu"
1091
- className=""
1092
- disabled={false}
1093
- onBlur={[Function]}
1094
- onClick={[Function]}
1095
- onDragStart={[Function]}
1096
- onFocus={[Function]}
1097
- onKeyDown={[Function]}
1098
- onKeyUp={[Function]}
1099
- onMouseDown={[Function]}
1100
- onMouseEnter={[Function]}
1101
- onMouseLeave={[Function]}
1102
- onMouseUp={[Function]}
1103
- onTouchCancel={[Function]}
1104
- onTouchEnd={[Function]}
1105
- onTouchStart={[Function]}
1106
- style={
1107
- {
1108
- "::MozFocusInner": {
1109
- "border": 0,
1110
- },
1111
- ":focus": {
1112
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
1113
- },
1114
- "alignItems": "center",
1115
- "background": "none",
1116
- "border": "none",
1117
- "borderRadius": 4,
1118
- "boxSizing": "border-box",
1119
- "color": "#1865f2",
1120
- "cursor": "pointer",
1121
- "display": "inline-flex",
1122
- "height": 40,
1123
- "justifyContent": "center",
1124
- "margin": 0,
1125
- "outline": "none",
1126
- "position": "relative",
1127
- "textDecoration": "none",
1128
- "touchAction": "manipulation",
1129
- }
1130
- }
1131
- tabIndex={0}
1132
- type="button"
1133
- >
1134
- <div
1135
- className=""
1136
- style={
1137
- {
1138
- "alignItems": "stretch",
1139
- "borderStyle": "solid",
1140
- "borderWidth": 0,
1141
- "boxSizing": "border-box",
1142
- "display": "flex",
1143
- "flexDirection": "column",
1144
- "margin": 0,
1145
- "minHeight": 0,
1146
- "minWidth": 0,
1147
- "padding": 0,
1148
- "position": "relative",
1149
- "zIndex": 0,
1150
- }
1151
- }
1152
- >
1153
- <span
1154
- className=""
1155
- style={
1156
- {
1157
- "MozOsxFontSmoothing": "grayscale",
1158
- "WebkitFontSmoothing": "antialiased",
1159
- "alignItems": "center",
1160
- "display": "inline-block",
1161
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1162
- "fontSize": 16,
1163
- "fontWeight": "bold",
1164
- "lineHeight": "20px",
1165
- "overflow": "hidden",
1166
- "pointerEvents": "none",
1167
- "textAlign": "left",
1168
- "textOverflow": "ellipsis",
1169
- "userSelect": "none",
1170
- "whiteSpace": "nowrap",
1171
- }
1172
- }
1173
- >
1174
- Betsy Appleseed
1175
- </span>
1176
- </div>
1177
- <div
1178
- aria-hidden="true"
1179
- className=""
1180
- style={
1181
- {
1182
- "MsFlexBasis": 4,
1183
- "MsFlexPreferredSize": 4,
1184
- "WebkitFlexBasis": 4,
1185
- "alignItems": "stretch",
1186
- "borderStyle": "solid",
1187
- "borderWidth": 0,
1188
- "boxSizing": "border-box",
1189
- "display": "flex",
1190
- "flexBasis": 4,
1191
- "flexDirection": "column",
1192
- "flexShrink": 0,
1193
- "margin": 0,
1194
- "minHeight": 0,
1195
- "minWidth": 0,
1196
- "padding": 0,
1197
- "position": "relative",
1198
- "width": 4,
1199
- "zIndex": 0,
1200
- }
1201
- }
1202
- />
1203
- <svg
1204
- className=""
1205
- height={16}
1206
- style={
1207
- {
1208
- "display": "inline-block",
1209
- "flexGrow": 0,
1210
- "flexShrink": 0,
1211
- "verticalAlign": "text-bottom",
1212
- }
1213
- }
1214
- viewBox="0 0 16 16"
1215
- width={16}
1216
- >
1217
- <path
1218
- 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"
1219
- fill="currentColor"
1220
- />
1221
- </svg>
1222
- </button>
1223
- </div>
1224
- <div
1225
- aria-hidden="true"
1226
- className=""
1227
- style={
1228
- {
1229
- "MsFlexBasis": 16,
1230
- "MsFlexPreferredSize": 16,
1231
- "WebkitFlexBasis": 16,
1232
- "alignItems": "stretch",
1233
- "borderStyle": "solid",
1234
- "borderWidth": 0,
1235
- "boxSizing": "border-box",
1236
- "display": "flex",
1237
- "flexBasis": 16,
1238
- "flexDirection": "column",
1239
- "flexShrink": 0,
1240
- "margin": 0,
1241
- "minHeight": 0,
1242
- "minWidth": 0,
1243
- "padding": 0,
1244
- "position": "relative",
1245
- "width": 16,
1246
- "zIndex": 0,
1247
- }
1248
- }
1249
- />
1250
- <button
1251
- aria-disabled={false}
1252
- className=""
1253
- onBlur={[Function]}
1254
- onClick={[Function]}
1255
- onDragStart={[Function]}
1256
- onFocus={[Function]}
1257
- onKeyDown={[Function]}
1258
- onKeyUp={[Function]}
1259
- onMouseDown={[Function]}
1260
- onMouseEnter={[Function]}
1261
- onMouseLeave={[Function]}
1262
- onMouseUp={[Function]}
1263
- onTouchCancel={[Function]}
1264
- onTouchEnd={[Function]}
1265
- onTouchStart={[Function]}
1266
- role="button"
1267
- style={
1268
- {
1269
- "::MozFocusInner": {
1270
- "border": 0,
1271
- },
1272
- ":focus": {
1273
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
1274
- },
1275
- "alignItems": "center",
1276
- "background": "#1865f2",
1277
- "border": "none",
1278
- "borderRadius": 4,
1279
- "boxSizing": "border-box",
1280
- "color": "#ffffff",
1281
- "cursor": "pointer",
1282
- "display": "inline-flex",
1283
- "height": 40,
1284
- "justifyContent": "center",
1285
- "margin": 0,
1286
- "outline": "none",
1287
- "paddingBottom": 0,
1288
- "paddingLeft": 16,
1289
- "paddingRight": 16,
1290
- "paddingTop": 0,
1291
- "position": "relative",
1292
- "textDecoration": "none",
1293
- "touchAction": "manipulation",
1294
- "userSelect": "none",
1295
- }
1296
- }
1297
- tabIndex={0}
1298
- type="button"
1299
- >
1300
- <span
1301
- className=""
1302
- style={
1303
- {
1304
- "MozOsxFontSmoothing": "grayscale",
1305
- "WebkitFontSmoothing": "antialiased",
1306
- "alignItems": "center",
1307
- "display": "inline-block",
1308
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1309
- "fontSize": 16,
1310
- "fontWeight": "bold",
1311
- "lineHeight": "20px",
1312
- "overflow": "hidden",
1313
- "pointerEvents": "none",
1314
- "textOverflow": "ellipsis",
1315
- "whiteSpace": "nowrap",
1316
- }
1317
- }
1318
- >
1319
- Open ActionMenu programatically
1320
- </span>
1321
- </button>
1322
- </div>
1323
- `;
1324
-
1325
- exports[`wonder-blocks-dropdown example 7 1`] = `
1326
- <div
1327
- className=""
1328
- onKeyDown={[Function]}
1329
- onKeyUp={[Function]}
1330
- style={
1331
- {
1332
- "alignItems": "stretch",
1333
- "borderStyle": "solid",
1334
- "borderWidth": 0,
1335
- "boxSizing": "border-box",
1336
- "display": "flex",
1337
- "flexDirection": "column",
1338
- "margin": 0,
1339
- "minHeight": 0,
1340
- "minWidth": 0,
1341
- "padding": 0,
1342
- "position": "relative",
1343
- "width": "fit-content",
1344
- "zIndex": 0,
1345
- }
1346
- }
1347
- >
1348
- <span
1349
- aria-atomic="true"
1350
- aria-live="polite"
1351
- aria-relevant="additions text"
1352
- className=""
1353
- data-test-id="dropdown-live-region"
1354
- style={
1355
- {
1356
- "border": 0,
1357
- "clip": "rect(0,0,0,0)",
1358
- "height": 1,
1359
- "margin": -1,
1360
- "overflow": "hidden",
1361
- "padding": 0,
1362
- "position": "absolute",
1363
- "width": 1,
1364
- }
1365
- }
1366
- />
1367
- <span
1368
- className=""
1369
- data-test-id="teacher-menu-custom-opener"
1370
- disabled={false}
1371
- onBlur={[Function]}
1372
- onClick={[Function]}
1373
- onDragStart={[Function]}
1374
- onFocus={[Function]}
1375
- onKeyDown={[Function]}
1376
- onKeyUp={[Function]}
1377
- onMouseDown={[Function]}
1378
- onMouseEnter={[Function]}
1379
- onMouseLeave={[Function]}
1380
- onMouseUp={[Function]}
1381
- onTouchCancel={[Function]}
1382
- onTouchEnd={[Function]}
1383
- onTouchStart={[Function]}
1384
- style={
1385
- {
1386
- "MozOsxFontSmoothing": "grayscale",
1387
- "WebkitFontSmoothing": "antialiased",
1388
- "display": "block",
1389
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1390
- "fontSize": 16,
1391
- "fontWeight": 700,
1392
- "lineHeight": "20px",
1393
- }
1394
- }
1395
- tabIndex={0}
1396
- >
1397
- Custom opener
1398
- </span>
1399
- </div>
1400
- `;
1401
-
1402
- exports[`wonder-blocks-dropdown example 8 1`] = `
1403
- <div
1404
- className=""
1405
- style={
1406
- {
1407
- "alignItems": "stretch",
1408
- "borderStyle": "solid",
1409
- "borderWidth": 0,
1410
- "boxSizing": "border-box",
1411
- "display": "flex",
1412
- "flexDirection": "row",
1413
- "margin": 0,
1414
- "minHeight": 0,
1415
- "minWidth": 0,
1416
- "padding": 0,
1417
- "position": "relative",
1418
- "zIndex": 0,
1419
- }
1420
- }
1421
- >
1422
- <div
1423
- className=""
1424
- onKeyDown={[Function]}
1425
- onKeyUp={[Function]}
1426
- style={
1427
- {
1428
- "alignItems": "stretch",
1429
- "borderStyle": "solid",
1430
- "borderWidth": 0,
1431
- "boxSizing": "border-box",
1432
- "display": "flex",
1433
- "flexDirection": "column",
1434
- "margin": 0,
1435
- "maxWidth": 190,
1436
- "minHeight": 0,
1437
- "minWidth": 170,
1438
- "padding": 0,
1439
- "position": "relative",
1440
- "width": "fit-content",
1441
- "zIndex": 0,
1442
- }
1443
- }
1444
- >
1445
- <span
1446
- aria-atomic="true"
1447
- aria-live="polite"
1448
- aria-relevant="additions text"
1449
- className=""
1450
- data-test-id="dropdown-live-region"
1451
- style={
1452
- {
1453
- "border": 0,
1454
- "clip": "rect(0,0,0,0)",
1455
- "height": 1,
1456
- "margin": -1,
1457
- "overflow": "hidden",
1458
- "padding": 0,
1459
- "position": "absolute",
1460
- "width": 1,
1461
- }
1462
- }
1463
- />
1464
- <button
1465
- aria-expanded="false"
1466
- aria-haspopup="listbox"
1467
- className=""
1468
- data-test-id="fruit-select"
1469
- disabled={false}
1470
- onBlur={[Function]}
1471
- onClick={[Function]}
1472
- onDragStart={[Function]}
1473
- onFocus={[Function]}
1474
- onKeyDown={[Function]}
1475
- onKeyUp={[Function]}
1476
- onMouseDown={[Function]}
1477
- onMouseEnter={[Function]}
1478
- onMouseLeave={[Function]}
1479
- onMouseUp={[Function]}
1480
- onTouchCancel={[Function]}
1481
- onTouchEnd={[Function]}
1482
- onTouchStart={[Function]}
1483
- style={
1484
- {
1485
- "::MozFocusInner": {
1486
- "border": 0,
1487
- },
1488
- "alignItems": "center",
1489
- "background": "#ffffff",
1490
- "borderColor": "rgba(33,36,44,0.16)",
1491
- "borderRadius": 4,
1492
- "borderStyle": "solid",
1493
- "borderWidth": 1,
1494
- "boxSizing": "border-box",
1495
- "color": "rgba(33,36,44,0.64)",
1496
- "display": "inline-flex",
1497
- "height": 40,
1498
- "justifyContent": "space-between",
1499
- "margin": 0,
1500
- "outline": "none",
1501
- "paddingLeft": 16,
1502
- "paddingRight": 12,
1503
- "position": "relative",
1504
- "textDecoration": "none",
1505
- "touchAction": "manipulation",
1506
- "whiteSpace": "nowrap",
1507
- }
1508
- }
1509
- tabIndex={0}
1510
- type="button"
1511
- >
1512
- <span
1513
- className=""
1514
- style={
1515
- {
1516
- "MozOsxFontSmoothing": "grayscale",
1517
- "WebkitFontSmoothing": "antialiased",
1518
- "display": "block",
1519
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1520
- "fontSize": 16,
1521
- "fontWeight": 400,
1522
- "lineHeight": "20px",
1523
- "marginRight": 8,
1524
- "overflow": "hidden",
1525
- "textOverflow": "ellipsis",
1526
- "userSelect": "none",
1527
- "whiteSpace": "nowrap",
1528
- }
1529
- }
1530
- >
1531
- Choose a fruit
1532
- </span>
1533
- <svg
1534
- aria-hidden="true"
1535
- className=""
1536
- height={16}
1537
- style={
1538
- {
1539
- "display": "inline-block",
1540
- "flexGrow": 0,
1541
- "flexShrink": 0,
1542
- "minWidth": 16,
1543
- "verticalAlign": "text-bottom",
1544
- }
1545
- }
1546
- viewBox="0 0 16 16"
1547
- width={16}
1548
- >
1549
- <path
1550
- 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"
1551
- fill="rgba(33,36,44,0.64)"
1552
- />
1553
- </svg>
1554
- </button>
1555
- </div>
1556
- </div>
1557
- `;
1558
-
1559
- exports[`wonder-blocks-dropdown example 9 1`] = `
1560
- <div
1561
- className=""
1562
- style={
1563
- {
1564
- "alignItems": "stretch",
1565
- "borderStyle": "solid",
1566
- "borderWidth": 0,
1567
- "boxSizing": "border-box",
1568
- "display": "flex",
1569
- "flexDirection": "row",
1570
- "margin": 0,
1571
- "minHeight": 0,
1572
- "minWidth": 0,
1573
- "padding": 0,
1574
- "position": "relative",
1575
- "zIndex": 0,
1576
- }
1577
- }
1578
- >
1579
- <div
1580
- className=""
1581
- onKeyDown={[Function]}
1582
- onKeyUp={[Function]}
1583
- style={
1584
- {
1585
- "alignItems": "stretch",
1586
- "borderStyle": "solid",
1587
- "borderWidth": 0,
1588
- "boxSizing": "border-box",
1589
- "display": "flex",
1590
- "flexDirection": "column",
1591
- "margin": 0,
1592
- "minHeight": 0,
1593
- "minWidth": 0,
1594
- "padding": 0,
1595
- "position": "relative",
1596
- "width": "fit-content",
1597
- "zIndex": 0,
1598
- }
1599
- }
1600
- >
1601
- <span
1602
- aria-atomic="true"
1603
- aria-live="polite"
1604
- aria-relevant="additions text"
1605
- className=""
1606
- data-test-id="dropdown-live-region"
1607
- style={
1608
- {
1609
- "border": 0,
1610
- "clip": "rect(0,0,0,0)",
1611
- "height": 1,
1612
- "margin": -1,
1613
- "overflow": "hidden",
1614
- "padding": 0,
1615
- "position": "absolute",
1616
- "width": 1,
1617
- }
1618
- }
1619
- />
1620
- <button
1621
- aria-expanded="false"
1622
- aria-haspopup="listbox"
1623
- className=""
1624
- disabled={false}
1625
- onBlur={[Function]}
1626
- onClick={[Function]}
1627
- onDragStart={[Function]}
1628
- onFocus={[Function]}
1629
- onKeyDown={[Function]}
1630
- onKeyUp={[Function]}
1631
- onMouseDown={[Function]}
1632
- onMouseEnter={[Function]}
1633
- onMouseLeave={[Function]}
1634
- onMouseUp={[Function]}
1635
- onTouchCancel={[Function]}
1636
- onTouchEnd={[Function]}
1637
- onTouchStart={[Function]}
1638
- style={
1639
- {
1640
- "::MozFocusInner": {
1641
- "border": 0,
1642
- },
1643
- "alignItems": "center",
1644
- "background": "#ffffff",
1645
- "borderColor": "rgba(33,36,44,0.16)",
1646
- "borderRadius": 4,
1647
- "borderStyle": "solid",
1648
- "borderWidth": 1,
1649
- "boxSizing": "border-box",
1650
- "color": "#21242c",
1651
- "display": "inline-flex",
1652
- "height": 40,
1653
- "justifyContent": "space-between",
1654
- "margin": 0,
1655
- "outline": "none",
1656
- "paddingLeft": 16,
1657
- "paddingRight": 12,
1658
- "position": "relative",
1659
- "textDecoration": "none",
1660
- "touchAction": "manipulation",
1661
- "whiteSpace": "nowrap",
1662
- }
1663
- }
1664
- tabIndex={0}
1665
- type="button"
1666
- >
1667
- <span
1668
- className=""
1669
- style={
1670
- {
1671
- "MozOsxFontSmoothing": "grayscale",
1672
- "WebkitFontSmoothing": "antialiased",
1673
- "display": "block",
1674
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1675
- "fontSize": 16,
1676
- "fontWeight": 400,
1677
- "lineHeight": "20px",
1678
- "marginRight": 8,
1679
- "overflow": "hidden",
1680
- "textOverflow": "ellipsis",
1681
- "userSelect": "none",
1682
- "whiteSpace": "nowrap",
1683
- }
1684
- }
1685
- >
1686
- Banana juice
1687
- </span>
1688
- <svg
1689
- aria-hidden="true"
1690
- className=""
1691
- height={16}
1692
- style={
1693
- {
1694
- "display": "inline-block",
1695
- "flexGrow": 0,
1696
- "flexShrink": 0,
1697
- "minWidth": 16,
1698
- "verticalAlign": "text-bottom",
1699
- }
1700
- }
1701
- viewBox="0 0 16 16"
1702
- width={16}
1703
- >
1704
- <path
1705
- 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"
1706
- fill="rgba(33,36,44,0.64)"
1707
- />
1708
- </svg>
1709
- </button>
1710
- </div>
1711
- </div>
1712
- `;
1713
-
1714
- exports[`wonder-blocks-dropdown example 10 1`] = `
1715
- <div
1716
- className=""
1717
- style={
1718
- {
1719
- "alignItems": "stretch",
1720
- "borderStyle": "solid",
1721
- "borderWidth": 0,
1722
- "boxSizing": "border-box",
1723
- "display": "flex",
1724
- "flexDirection": "row",
1725
- "margin": 0,
1726
- "minHeight": 0,
1727
- "minWidth": 0,
1728
- "padding": 0,
1729
- "position": "relative",
1730
- "zIndex": 0,
1731
- }
1732
- }
1733
- >
1734
- <div
1735
- className=""
1736
- onKeyDown={[Function]}
1737
- onKeyUp={[Function]}
1738
- style={
1739
- {
1740
- "alignItems": "stretch",
1741
- "borderStyle": "solid",
1742
- "borderWidth": 0,
1743
- "boxSizing": "border-box",
1744
- "display": "flex",
1745
- "flexDirection": "column",
1746
- "margin": 0,
1747
- "minHeight": 0,
1748
- "minWidth": 0,
1749
- "padding": 0,
1750
- "position": "relative",
1751
- "width": "fit-content",
1752
- "zIndex": 0,
1753
- }
1754
- }
1755
- >
1756
- <span
1757
- aria-atomic="true"
1758
- aria-live="polite"
1759
- aria-relevant="additions text"
1760
- className=""
1761
- data-test-id="dropdown-live-region"
1762
- style={
1763
- {
1764
- "border": 0,
1765
- "clip": "rect(0,0,0,0)",
1766
- "height": 1,
1767
- "margin": -1,
1768
- "overflow": "hidden",
1769
- "padding": 0,
1770
- "position": "absolute",
1771
- "width": 1,
1772
- }
1773
- }
1774
- />
1775
- <button
1776
- aria-expanded="false"
1777
- aria-haspopup="listbox"
1778
- className=""
1779
- disabled={true}
1780
- onBlur={[Function]}
1781
- onClick={[Function]}
1782
- onDragStart={[Function]}
1783
- onFocus={[Function]}
1784
- onKeyDown={[Function]}
1785
- onKeyUp={[Function]}
1786
- onMouseDown={[Function]}
1787
- onMouseEnter={[Function]}
1788
- onMouseLeave={[Function]}
1789
- onMouseUp={[Function]}
1790
- onTouchCancel={[Function]}
1791
- onTouchEnd={[Function]}
1792
- onTouchStart={[Function]}
1793
- style={
1794
- {
1795
- "::MozFocusInner": {
1796
- "border": 0,
1797
- },
1798
- "alignItems": "center",
1799
- "background": "#f7f8fa",
1800
- "borderColor": "rgba(33,36,44,0.16)",
1801
- "borderRadius": 4,
1802
- "borderStyle": "solid",
1803
- "borderWidth": 1,
1804
- "boxSizing": "border-box",
1805
- "color": "rgba(33,36,44,0.64)",
1806
- "cursor": "auto",
1807
- "display": "inline-flex",
1808
- "height": 40,
1809
- "justifyContent": "space-between",
1810
- "margin": 0,
1811
- "outline": "none",
1812
- "paddingLeft": 16,
1813
- "paddingRight": 12,
1814
- "position": "relative",
1815
- "textDecoration": "none",
1816
- "touchAction": "manipulation",
1817
- "whiteSpace": "nowrap",
1818
- }
1819
- }
1820
- tabIndex={0}
1821
- type="button"
1822
- >
1823
- <span
1824
- className=""
1825
- style={
1826
- {
1827
- "MozOsxFontSmoothing": "grayscale",
1828
- "WebkitFontSmoothing": "antialiased",
1829
- "display": "block",
1830
- "fontFamily": "Lato, "Noto Sans", sans-serif",
1831
- "fontSize": 16,
1832
- "fontWeight": 400,
1833
- "lineHeight": "20px",
1834
- "marginRight": 8,
1835
- "overflow": "hidden",
1836
- "textOverflow": "ellipsis",
1837
- "userSelect": "none",
1838
- "whiteSpace": "nowrap",
1839
- }
1840
- }
1841
- >
1842
- Banana juice
1843
- </span>
1844
- <svg
1845
- aria-hidden="true"
1846
- className=""
1847
- height={16}
1848
- style={
1849
- {
1850
- "display": "inline-block",
1851
- "flexGrow": 0,
1852
- "flexShrink": 0,
1853
- "minWidth": 16,
1854
- "verticalAlign": "text-bottom",
1855
- }
1856
- }
1857
- viewBox="0 0 16 16"
1858
- width={16}
1859
- >
1860
- <path
1861
- 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"
1862
- fill="rgba(33,36,44,0.32)"
1863
- />
1864
- </svg>
1865
- </button>
1866
- </div>
1867
- </div>
1868
- `;
1869
-
1870
- exports[`wonder-blocks-dropdown example 11 1`] = `
1871
- <div
1872
- className=""
1873
- style={
1874
- {
1875
- "alignItems": "stretch",
1876
- "borderStyle": "solid",
1877
- "borderWidth": 0,
1878
- "boxSizing": "border-box",
1879
- "display": "flex",
1880
- "flexDirection": "row",
1881
- "margin": 0,
1882
- "minHeight": 0,
1883
- "minWidth": 0,
1884
- "padding": 0,
1885
- "position": "relative",
1886
- "zIndex": 0,
1887
- }
1888
- }
1889
- >
1890
- <div
1891
- className=""
1892
- style={
1893
- {
1894
- "alignItems": "stretch",
1895
- "backgroundColor": "#0b2149",
1896
- "borderStyle": "solid",
1897
- "borderWidth": 0,
1898
- "boxSizing": "border-box",
1899
- "display": "flex",
1900
- "flexDirection": "row",
1901
- "height": 200,
1902
- "justifyContent": "flex-end",
1903
- "margin": 0,
1904
- "minHeight": 0,
1905
- "minWidth": 0,
1906
- "padding": 0,
1907
- "paddingRight": 10,
1908
- "paddingTop": 10,
1909
- "position": "relative",
1910
- "width": 350,
1911
- "zIndex": 0,
1912
- }
1913
- }
1914
- >
1915
- <div
1916
- className=""
1917
- onKeyDown={[Function]}
1918
- onKeyUp={[Function]}
1919
- style={
1920
- {
1921
- "alignItems": "stretch",
1922
- "borderStyle": "solid",
1923
- "borderWidth": 0,
1924
- "boxSizing": "border-box",
1925
- "display": "flex",
1926
- "flexDirection": "column",
1927
- "margin": 0,
1928
- "minHeight": 0,
1929
- "minWidth": 0,
1930
- "padding": 0,
1931
- "position": "relative",
1932
- "width": "fit-content",
1933
- "zIndex": 0,
1934
- }
1935
- }
1936
- >
1937
- <span
1938
- aria-atomic="true"
1939
- aria-live="polite"
1940
- aria-relevant="additions text"
1941
- className=""
1942
- data-test-id="dropdown-live-region"
1943
- style={
1944
- {
1945
- "border": 0,
1946
- "clip": "rect(0,0,0,0)",
1947
- "height": 1,
1948
- "margin": -1,
1949
- "overflow": "hidden",
1950
- "padding": 0,
1951
- "position": "absolute",
1952
- "width": 1,
1953
- }
1954
- }
1955
- />
1956
- <button
1957
- aria-expanded="false"
1958
- aria-haspopup="listbox"
1959
- className=""
1960
- disabled={false}
1961
- onBlur={[Function]}
1962
- onClick={[Function]}
1963
- onDragStart={[Function]}
1964
- onFocus={[Function]}
1965
- onKeyDown={[Function]}
1966
- onKeyUp={[Function]}
1967
- onMouseDown={[Function]}
1968
- onMouseEnter={[Function]}
1969
- onMouseLeave={[Function]}
1970
- onMouseUp={[Function]}
1971
- onTouchCancel={[Function]}
1972
- onTouchEnd={[Function]}
1973
- onTouchStart={[Function]}
1974
- style={
1975
- {
1976
- "::MozFocusInner": {
1977
- "border": 0,
1978
- },
1979
- "alignItems": "center",
1980
- "background": "transparent",
1981
- "borderColor": "rgba(255,255,255,0.50)",
1982
- "borderRadius": 4,
1983
- "borderStyle": "solid",
1984
- "borderWidth": 1,
1985
- "boxSizing": "border-box",
1986
- "color": "rgba(255,255,255,0.50)",
1987
- "display": "inline-flex",
1988
- "height": 40,
1989
- "justifyContent": "space-between",
1990
- "margin": 0,
1991
- "outline": "none",
1992
- "paddingLeft": 16,
1993
- "paddingRight": 12,
1994
- "position": "relative",
1995
- "textDecoration": "none",
1996
- "touchAction": "manipulation",
1997
- "whiteSpace": "nowrap",
1998
- }
1999
- }
2000
- tabIndex={0}
2001
- type="button"
2002
- >
2003
- <span
2004
- className=""
2005
- style={
2006
- {
2007
- "MozOsxFontSmoothing": "grayscale",
2008
- "WebkitFontSmoothing": "antialiased",
2009
- "display": "block",
2010
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2011
- "fontSize": 16,
2012
- "fontWeight": 400,
2013
- "lineHeight": "20px",
2014
- "marginRight": 8,
2015
- "overflow": "hidden",
2016
- "textOverflow": "ellipsis",
2017
- "userSelect": "none",
2018
- "whiteSpace": "nowrap",
2019
- }
2020
- }
2021
- >
2022
- Choose a drink
2023
- </span>
2024
- <svg
2025
- aria-hidden="true"
2026
- className=""
2027
- height={16}
2028
- style={
2029
- {
2030
- "display": "inline-block",
2031
- "flexGrow": 0,
2032
- "flexShrink": 0,
2033
- "minWidth": 16,
2034
- "verticalAlign": "text-bottom",
2035
- }
2036
- }
2037
- viewBox="0 0 16 16"
2038
- width={16}
2039
- >
2040
- <path
2041
- 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"
2042
- fill="#ffffff"
2043
- />
2044
- </svg>
2045
- </button>
2046
- </div>
2047
- </div>
2048
- </div>
2049
- `;
2050
-
2051
- exports[`wonder-blocks-dropdown example 12 1`] = `
2052
- <div
2053
- className=""
2054
- style={
2055
- {
2056
- "alignItems": "stretch",
2057
- "borderStyle": "solid",
2058
- "borderWidth": 0,
2059
- "boxSizing": "border-box",
2060
- "display": "flex",
2061
- "flexDirection": "row",
2062
- "margin": 0,
2063
- "minHeight": 0,
2064
- "minWidth": 0,
2065
- "padding": 0,
2066
- "position": "relative",
2067
- "zIndex": 0,
2068
- }
2069
- }
2070
- >
2071
- <div
2072
- className=""
2073
- onKeyDown={[Function]}
2074
- onKeyUp={[Function]}
2075
- style={
2076
- {
2077
- "alignItems": "stretch",
2078
- "borderStyle": "solid",
2079
- "borderWidth": 0,
2080
- "boxSizing": "border-box",
2081
- "display": "flex",
2082
- "flexDirection": "column",
2083
- "margin": 0,
2084
- "minHeight": 0,
2085
- "minWidth": 0,
2086
- "padding": 0,
2087
- "position": "relative",
2088
- "width": "fit-content",
2089
- "zIndex": 0,
2090
- }
2091
- }
2092
- >
2093
- <span
2094
- aria-atomic="true"
2095
- aria-live="polite"
2096
- aria-relevant="additions text"
2097
- className=""
2098
- data-test-id="dropdown-live-region"
2099
- style={
2100
- {
2101
- "border": 0,
2102
- "clip": "rect(0,0,0,0)",
2103
- "height": 1,
2104
- "margin": -1,
2105
- "overflow": "hidden",
2106
- "padding": 0,
2107
- "position": "absolute",
2108
- "width": 1,
2109
- }
2110
- }
2111
- />
2112
- <button
2113
- aria-expanded="false"
2114
- aria-haspopup="listbox"
2115
- className=""
2116
- disabled={true}
2117
- onBlur={[Function]}
2118
- onClick={[Function]}
2119
- onDragStart={[Function]}
2120
- onFocus={[Function]}
2121
- onKeyDown={[Function]}
2122
- onKeyUp={[Function]}
2123
- onMouseDown={[Function]}
2124
- onMouseEnter={[Function]}
2125
- onMouseLeave={[Function]}
2126
- onMouseUp={[Function]}
2127
- onTouchCancel={[Function]}
2128
- onTouchEnd={[Function]}
2129
- onTouchStart={[Function]}
2130
- style={
2131
- {
2132
- "::MozFocusInner": {
2133
- "border": 0,
2134
- },
2135
- "alignItems": "center",
2136
- "background": "#f7f8fa",
2137
- "borderColor": "rgba(33,36,44,0.16)",
2138
- "borderRadius": 4,
2139
- "borderStyle": "solid",
2140
- "borderWidth": 1,
2141
- "boxSizing": "border-box",
2142
- "color": "rgba(33,36,44,0.64)",
2143
- "cursor": "auto",
2144
- "display": "inline-flex",
2145
- "height": 40,
2146
- "justifyContent": "space-between",
2147
- "margin": 0,
2148
- "outline": "none",
2149
- "paddingLeft": 16,
2150
- "paddingRight": 12,
2151
- "position": "relative",
2152
- "textDecoration": "none",
2153
- "touchAction": "manipulation",
2154
- "whiteSpace": "nowrap",
2155
- }
2156
- }
2157
- tabIndex={0}
2158
- type="button"
2159
- >
2160
- <span
2161
- className=""
2162
- style={
2163
- {
2164
- "MozOsxFontSmoothing": "grayscale",
2165
- "WebkitFontSmoothing": "antialiased",
2166
- "display": "block",
2167
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2168
- "fontSize": 16,
2169
- "fontWeight": 400,
2170
- "lineHeight": "20px",
2171
- "marginRight": 8,
2172
- "overflow": "hidden",
2173
- "textOverflow": "ellipsis",
2174
- "userSelect": "none",
2175
- "whiteSpace": "nowrap",
2176
- }
2177
- }
2178
- >
2179
- empty
2180
- </span>
2181
- <svg
2182
- aria-hidden="true"
2183
- className=""
2184
- height={16}
2185
- style={
2186
- {
2187
- "display": "inline-block",
2188
- "flexGrow": 0,
2189
- "flexShrink": 0,
2190
- "minWidth": 16,
2191
- "verticalAlign": "text-bottom",
2192
- }
2193
- }
2194
- viewBox="0 0 16 16"
2195
- width={16}
2196
- >
2197
- <path
2198
- 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"
2199
- fill="rgba(33,36,44,0.32)"
2200
- />
2201
- </svg>
2202
- </button>
2203
- </div>
2204
- </div>
2205
- `;
2206
-
2207
- exports[`wonder-blocks-dropdown example 13 1`] = `
2208
- <div
2209
- className=""
2210
- style={
2211
- {
2212
- "alignItems": "stretch",
2213
- "borderStyle": "solid",
2214
- "borderWidth": 0,
2215
- "boxSizing": "border-box",
2216
- "display": "flex",
2217
- "flexDirection": "column",
2218
- "margin": 0,
2219
- "minHeight": 0,
2220
- "minWidth": 0,
2221
- "padding": 0,
2222
- "position": "relative",
2223
- "zIndex": 0,
2224
- }
2225
- }
2226
- >
2227
- <label
2228
- className=""
2229
- htmlFor="unique-single-select"
2230
- id="label-for-single-select"
2231
- style={
2232
- {
2233
- "MozOsxFontSmoothing": "grayscale",
2234
- "WebkitFontSmoothing": "antialiased",
2235
- "display": "block",
2236
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2237
- "fontSize": 16,
2238
- "fontWeight": 700,
2239
- "lineHeight": "20px",
2240
- }
2241
- }
2242
- >
2243
- Associated label element
2244
- </label>
2245
- <div
2246
- className=""
2247
- onKeyDown={[Function]}
2248
- onKeyUp={[Function]}
2249
- style={
2250
- {
2251
- "alignItems": "stretch",
2252
- "borderStyle": "solid",
2253
- "borderWidth": 0,
2254
- "boxSizing": "border-box",
2255
- "display": "flex",
2256
- "flexDirection": "column",
2257
- "margin": 0,
2258
- "minHeight": 0,
2259
- "minWidth": 0,
2260
- "padding": 0,
2261
- "position": "relative",
2262
- "width": "fit-content",
2263
- "zIndex": 0,
2264
- }
2265
- }
2266
- >
2267
- <span
2268
- aria-atomic="true"
2269
- aria-live="polite"
2270
- aria-relevant="additions text"
2271
- className=""
2272
- data-test-id="dropdown-live-region"
2273
- style={
2274
- {
2275
- "border": 0,
2276
- "clip": "rect(0,0,0,0)",
2277
- "height": 1,
2278
- "margin": -1,
2279
- "overflow": "hidden",
2280
- "padding": 0,
2281
- "position": "absolute",
2282
- "width": 1,
2283
- }
2284
- }
2285
- />
2286
- <button
2287
- aria-expanded="false"
2288
- aria-haspopup="listbox"
2289
- aria-labelledby="label-for-single-select"
2290
- className=""
2291
- disabled={false}
2292
- id="unique-single-select"
2293
- onBlur={[Function]}
2294
- onClick={[Function]}
2295
- onDragStart={[Function]}
2296
- onFocus={[Function]}
2297
- onKeyDown={[Function]}
2298
- onKeyUp={[Function]}
2299
- onMouseDown={[Function]}
2300
- onMouseEnter={[Function]}
2301
- onMouseLeave={[Function]}
2302
- onMouseUp={[Function]}
2303
- onTouchCancel={[Function]}
2304
- onTouchEnd={[Function]}
2305
- onTouchStart={[Function]}
2306
- style={
2307
- {
2308
- "::MozFocusInner": {
2309
- "border": 0,
2310
- },
2311
- "alignItems": "center",
2312
- "background": "#ffffff",
2313
- "borderColor": "rgba(33,36,44,0.16)",
2314
- "borderRadius": 4,
2315
- "borderStyle": "solid",
2316
- "borderWidth": 1,
2317
- "boxSizing": "border-box",
2318
- "color": "#21242c",
2319
- "display": "inline-flex",
2320
- "height": 40,
2321
- "justifyContent": "space-between",
2322
- "margin": 0,
2323
- "outline": "none",
2324
- "paddingLeft": 16,
2325
- "paddingRight": 12,
2326
- "position": "relative",
2327
- "textDecoration": "none",
2328
- "touchAction": "manipulation",
2329
- "whiteSpace": "nowrap",
2330
- }
2331
- }
2332
- tabIndex={0}
2333
- type="button"
2334
- >
2335
- <span
2336
- className=""
2337
- style={
2338
- {
2339
- "MozOsxFontSmoothing": "grayscale",
2340
- "WebkitFontSmoothing": "antialiased",
2341
- "display": "block",
2342
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2343
- "fontSize": 16,
2344
- "fontWeight": 400,
2345
- "lineHeight": "20px",
2346
- "marginRight": 8,
2347
- "overflow": "hidden",
2348
- "textOverflow": "ellipsis",
2349
- "userSelect": "none",
2350
- "whiteSpace": "nowrap",
2351
- }
2352
- }
2353
- >
2354
- First element
2355
- </span>
2356
- <svg
2357
- aria-hidden="true"
2358
- className=""
2359
- height={16}
2360
- style={
2361
- {
2362
- "display": "inline-block",
2363
- "flexGrow": 0,
2364
- "flexShrink": 0,
2365
- "minWidth": 16,
2366
- "verticalAlign": "text-bottom",
2367
- }
2368
- }
2369
- viewBox="0 0 16 16"
2370
- width={16}
2371
- >
2372
- <path
2373
- 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"
2374
- fill="rgba(33,36,44,0.64)"
2375
- />
2376
- </svg>
2377
- </button>
2378
- </div>
2379
- </div>
2380
- `;
2381
-
2382
- exports[`wonder-blocks-dropdown example 14 1`] = `
2383
- <div
2384
- className=""
2385
- style={
2386
- {
2387
- "alignItems": "stretch",
2388
- "borderStyle": "solid",
2389
- "borderWidth": 0,
2390
- "boxSizing": "border-box",
2391
- "display": "flex",
2392
- "flexDirection": "row",
2393
- "margin": 0,
2394
- "minHeight": 0,
2395
- "minWidth": 0,
2396
- "padding": 0,
2397
- "position": "relative",
2398
- "zIndex": 0,
2399
- }
2400
- }
2401
- >
2402
- <div
2403
- className=""
2404
- onKeyDown={[Function]}
2405
- onKeyUp={[Function]}
2406
- style={
2407
- {
2408
- "alignItems": "stretch",
2409
- "borderStyle": "solid",
2410
- "borderWidth": 0,
2411
- "boxSizing": "border-box",
2412
- "display": "flex",
2413
- "flexDirection": "column",
2414
- "margin": 0,
2415
- "minHeight": 0,
2416
- "minWidth": 0,
2417
- "padding": 0,
2418
- "position": "relative",
2419
- "width": "fit-content",
2420
- "zIndex": 0,
2421
- }
2422
- }
2423
- >
2424
- <span
2425
- aria-atomic="true"
2426
- aria-live="polite"
2427
- aria-relevant="additions text"
2428
- className=""
2429
- data-test-id="dropdown-live-region"
2430
- style={
2431
- {
2432
- "border": 0,
2433
- "clip": "rect(0,0,0,0)",
2434
- "height": 1,
2435
- "margin": -1,
2436
- "overflow": "hidden",
2437
- "padding": 0,
2438
- "position": "absolute",
2439
- "width": 1,
2440
- }
2441
- }
2442
- />
2443
- <button
2444
- aria-expanded="false"
2445
- aria-haspopup="listbox"
2446
- className=""
2447
- disabled={false}
2448
- onBlur={[Function]}
2449
- onClick={[Function]}
2450
- onDragStart={[Function]}
2451
- onFocus={[Function]}
2452
- onKeyDown={[Function]}
2453
- onKeyUp={[Function]}
2454
- onMouseDown={[Function]}
2455
- onMouseEnter={[Function]}
2456
- onMouseLeave={[Function]}
2457
- onMouseUp={[Function]}
2458
- onTouchCancel={[Function]}
2459
- onTouchEnd={[Function]}
2460
- onTouchStart={[Function]}
2461
- style={
2462
- {
2463
- "::MozFocusInner": {
2464
- "border": 0,
2465
- },
2466
- "alignItems": "center",
2467
- "background": "#ffffff",
2468
- "borderColor": "rgba(33,36,44,0.16)",
2469
- "borderRadius": 4,
2470
- "borderStyle": "solid",
2471
- "borderWidth": 1,
2472
- "boxSizing": "border-box",
2473
- "color": "rgba(33,36,44,0.64)",
2474
- "display": "inline-flex",
2475
- "height": 40,
2476
- "justifyContent": "space-between",
2477
- "margin": 0,
2478
- "outline": "none",
2479
- "paddingLeft": 16,
2480
- "paddingRight": 12,
2481
- "position": "relative",
2482
- "textDecoration": "none",
2483
- "touchAction": "manipulation",
2484
- "whiteSpace": "nowrap",
2485
- }
2486
- }
2487
- tabIndex={0}
2488
- type="button"
2489
- >
2490
- <span
2491
- className=""
2492
- style={
2493
- {
2494
- "MozOsxFontSmoothing": "grayscale",
2495
- "WebkitFontSmoothing": "antialiased",
2496
- "display": "block",
2497
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2498
- "fontSize": 16,
2499
- "fontWeight": 400,
2500
- "lineHeight": "20px",
2501
- "marginRight": 8,
2502
- "overflow": "hidden",
2503
- "textOverflow": "ellipsis",
2504
- "userSelect": "none",
2505
- "whiteSpace": "nowrap",
2506
- }
2507
- }
2508
- >
2509
- Choose
2510
- </span>
2511
- <svg
2512
- aria-hidden="true"
2513
- className=""
2514
- height={16}
2515
- style={
2516
- {
2517
- "display": "inline-block",
2518
- "flexGrow": 0,
2519
- "flexShrink": 0,
2520
- "minWidth": 16,
2521
- "verticalAlign": "text-bottom",
2522
- }
2523
- }
2524
- viewBox="0 0 16 16"
2525
- width={16}
2526
- >
2527
- <path
2528
- 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"
2529
- fill="rgba(33,36,44,0.64)"
2530
- />
2531
- </svg>
2532
- </button>
2533
- </div>
2534
- <div
2535
- aria-hidden="true"
2536
- className=""
2537
- style={
2538
- {
2539
- "MsFlexBasis": 16,
2540
- "MsFlexPreferredSize": 16,
2541
- "WebkitFlexBasis": 16,
2542
- "alignItems": "stretch",
2543
- "borderStyle": "solid",
2544
- "borderWidth": 0,
2545
- "boxSizing": "border-box",
2546
- "display": "flex",
2547
- "flexBasis": 16,
2548
- "flexDirection": "column",
2549
- "flexShrink": 0,
2550
- "margin": 0,
2551
- "minHeight": 0,
2552
- "minWidth": 0,
2553
- "padding": 0,
2554
- "position": "relative",
2555
- "width": 16,
2556
- "zIndex": 0,
2557
- }
2558
- }
2559
- />
2560
- <button
2561
- aria-disabled={false}
2562
- className=""
2563
- onBlur={[Function]}
2564
- onClick={[Function]}
2565
- onDragStart={[Function]}
2566
- onFocus={[Function]}
2567
- onKeyDown={[Function]}
2568
- onKeyUp={[Function]}
2569
- onMouseDown={[Function]}
2570
- onMouseEnter={[Function]}
2571
- onMouseLeave={[Function]}
2572
- onMouseUp={[Function]}
2573
- onTouchCancel={[Function]}
2574
- onTouchEnd={[Function]}
2575
- onTouchStart={[Function]}
2576
- role="button"
2577
- style={
2578
- {
2579
- "::MozFocusInner": {
2580
- "border": 0,
2581
- },
2582
- ":focus": {
2583
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
2584
- },
2585
- "alignItems": "center",
2586
- "background": "#1865f2",
2587
- "border": "none",
2588
- "borderRadius": 4,
2589
- "boxSizing": "border-box",
2590
- "color": "#ffffff",
2591
- "cursor": "pointer",
2592
- "display": "inline-flex",
2593
- "height": 40,
2594
- "justifyContent": "center",
2595
- "margin": 0,
2596
- "outline": "none",
2597
- "paddingBottom": 0,
2598
- "paddingLeft": 16,
2599
- "paddingRight": 16,
2600
- "paddingTop": 0,
2601
- "position": "relative",
2602
- "textDecoration": "none",
2603
- "touchAction": "manipulation",
2604
- "userSelect": "none",
2605
- }
2606
- }
2607
- tabIndex={0}
2608
- type="button"
2609
- >
2610
- <span
2611
- className=""
2612
- style={
2613
- {
2614
- "MozOsxFontSmoothing": "grayscale",
2615
- "WebkitFontSmoothing": "antialiased",
2616
- "alignItems": "center",
2617
- "display": "inline-block",
2618
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2619
- "fontSize": 16,
2620
- "fontWeight": "bold",
2621
- "lineHeight": "20px",
2622
- "overflow": "hidden",
2623
- "pointerEvents": "none",
2624
- "textOverflow": "ellipsis",
2625
- "whiteSpace": "nowrap",
2626
- }
2627
- }
2628
- >
2629
- Open SingleSelect programatically
2630
- </span>
2631
- </button>
2632
- </div>
2633
- `;
2634
-
2635
- exports[`wonder-blocks-dropdown example 15 1`] = `
2636
- <div
2637
- className=""
2638
- onKeyDown={[Function]}
2639
- onKeyUp={[Function]}
2640
- style={
2641
- {
2642
- "alignItems": "stretch",
2643
- "borderStyle": "solid",
2644
- "borderWidth": 0,
2645
- "boxSizing": "border-box",
2646
- "display": "flex",
2647
- "flexDirection": "column",
2648
- "margin": 0,
2649
- "minHeight": 0,
2650
- "minWidth": 0,
2651
- "padding": 0,
2652
- "position": "relative",
2653
- "width": "fit-content",
2654
- "zIndex": 0,
2655
- }
2656
- }
2657
- >
2658
- <span
2659
- aria-atomic="true"
2660
- aria-live="polite"
2661
- aria-relevant="additions text"
2662
- className=""
2663
- data-test-id="dropdown-live-region"
2664
- style={
2665
- {
2666
- "border": 0,
2667
- "clip": "rect(0,0,0,0)",
2668
- "height": 1,
2669
- "margin": -1,
2670
- "overflow": "hidden",
2671
- "padding": 0,
2672
- "position": "absolute",
2673
- "width": 1,
2674
- }
2675
- }
2676
- />
2677
- <h2
2678
- className=""
2679
- data-test-id="single-select-custom-opener"
2680
- disabled={false}
2681
- onBlur={[Function]}
2682
- onClick={[Function]}
2683
- onDragStart={[Function]}
2684
- onFocus={[Function]}
2685
- onKeyDown={[Function]}
2686
- onKeyUp={[Function]}
2687
- onMouseDown={[Function]}
2688
- onMouseEnter={[Function]}
2689
- onMouseLeave={[Function]}
2690
- onMouseUp={[Function]}
2691
- onTouchCancel={[Function]}
2692
- onTouchEnd={[Function]}
2693
- onTouchStart={[Function]}
2694
- style={
2695
- {
2696
- "@media (maxWidth: 1023px)": {
2697
- "fontSize": 24,
2698
- "lineHeight": "28px",
2699
- },
2700
- "@media (minWidth: 1024px)": {
2701
- "fontSize": 28,
2702
- "lineHeight": "32px",
2703
- },
2704
- "MozOsxFontSmoothing": "grayscale",
2705
- "WebkitFontSmoothing": "antialiased",
2706
- "display": "block",
2707
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2708
- "fontWeight": 700,
2709
- "marginBottom": 0,
2710
- "marginTop": 0,
2711
- }
2712
- }
2713
- tabIndex={0}
2714
- >
2715
- Choose a juice
2716
- </h2>
2717
- </div>
2718
- `;
2719
-
2720
- exports[`wonder-blocks-dropdown example 16 1`] = `
2721
- <div
2722
- className=""
2723
- style={
2724
- {
2725
- "alignItems": "stretch",
2726
- "borderStyle": "solid",
2727
- "borderWidth": 0,
2728
- "boxSizing": "border-box",
2729
- "display": "flex",
2730
- "flexDirection": "row",
2731
- "margin": 0,
2732
- "minHeight": 0,
2733
- "minWidth": 0,
2734
- "padding": 0,
2735
- "position": "relative",
2736
- "zIndex": 0,
2737
- }
2738
- }
2739
- >
2740
- <div
2741
- className=""
2742
- onKeyDown={[Function]}
2743
- onKeyUp={[Function]}
2744
- style={
2745
- {
2746
- "alignItems": "stretch",
2747
- "borderStyle": "solid",
2748
- "borderWidth": 0,
2749
- "boxSizing": "border-box",
2750
- "display": "flex",
2751
- "flexDirection": "column",
2752
- "margin": 0,
2753
- "minHeight": 0,
2754
- "minWidth": 0,
2755
- "padding": 0,
2756
- "position": "relative",
2757
- "width": "100%",
2758
- "zIndex": 0,
2759
- }
2760
- }
2761
- >
2762
- <span
2763
- aria-atomic="true"
2764
- aria-live="polite"
2765
- aria-relevant="additions text"
2766
- className=""
2767
- data-test-id="dropdown-live-region"
2768
- style={
2769
- {
2770
- "border": 0,
2771
- "clip": "rect(0,0,0,0)",
2772
- "height": 1,
2773
- "margin": -1,
2774
- "overflow": "hidden",
2775
- "padding": 0,
2776
- "position": "absolute",
2777
- "width": 1,
2778
- }
2779
- }
2780
- />
2781
- <button
2782
- aria-expanded="false"
2783
- aria-haspopup="listbox"
2784
- className=""
2785
- disabled={false}
2786
- onBlur={[Function]}
2787
- onClick={[Function]}
2788
- onDragStart={[Function]}
2789
- onFocus={[Function]}
2790
- onKeyDown={[Function]}
2791
- onKeyUp={[Function]}
2792
- onMouseDown={[Function]}
2793
- onMouseEnter={[Function]}
2794
- onMouseLeave={[Function]}
2795
- onMouseUp={[Function]}
2796
- onTouchCancel={[Function]}
2797
- onTouchEnd={[Function]}
2798
- onTouchStart={[Function]}
2799
- style={
2800
- {
2801
- "::MozFocusInner": {
2802
- "border": 0,
2803
- },
2804
- "alignItems": "center",
2805
- "background": "#ffffff",
2806
- "borderColor": "rgba(33,36,44,0.16)",
2807
- "borderRadius": 4,
2808
- "borderStyle": "solid",
2809
- "borderWidth": 1,
2810
- "boxSizing": "border-box",
2811
- "color": "rgba(33,36,44,0.64)",
2812
- "display": "inline-flex",
2813
- "height": 40,
2814
- "justifyContent": "space-between",
2815
- "margin": 0,
2816
- "outline": "none",
2817
- "paddingLeft": 16,
2818
- "paddingRight": 12,
2819
- "position": "relative",
2820
- "textDecoration": "none",
2821
- "touchAction": "manipulation",
2822
- "whiteSpace": "nowrap",
2823
- }
2824
- }
2825
- tabIndex={0}
2826
- type="button"
2827
- >
2828
- <span
2829
- className=""
2830
- style={
2831
- {
2832
- "MozOsxFontSmoothing": "grayscale",
2833
- "WebkitFontSmoothing": "antialiased",
2834
- "display": "block",
2835
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2836
- "fontSize": 16,
2837
- "fontWeight": 400,
2838
- "lineHeight": "20px",
2839
- "marginRight": 8,
2840
- "overflow": "hidden",
2841
- "textOverflow": "ellipsis",
2842
- "userSelect": "none",
2843
- "whiteSpace": "nowrap",
2844
- }
2845
- }
2846
- >
2847
- Select a fruit
2848
- </span>
2849
- <svg
2850
- aria-hidden="true"
2851
- className=""
2852
- height={16}
2853
- style={
2854
- {
2855
- "display": "inline-block",
2856
- "flexGrow": 0,
2857
- "flexShrink": 0,
2858
- "minWidth": 16,
2859
- "verticalAlign": "text-bottom",
2860
- }
2861
- }
2862
- viewBox="0 0 16 16"
2863
- width={16}
2864
- >
2865
- <path
2866
- 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"
2867
- fill="rgba(33,36,44,0.64)"
2868
- />
2869
- </svg>
2870
- </button>
2871
- </div>
2872
- </div>
2873
- `;
2874
-
2875
- exports[`wonder-blocks-dropdown example 17 1`] = `
2876
- <div
2877
- className=""
2878
- style={
2879
- {
2880
- "alignItems": "stretch",
2881
- "borderStyle": "solid",
2882
- "borderWidth": 0,
2883
- "boxSizing": "border-box",
2884
- "display": "flex",
2885
- "flexDirection": "row",
2886
- "margin": 0,
2887
- "minHeight": 0,
2888
- "minWidth": 0,
2889
- "padding": 0,
2890
- "position": "relative",
2891
- "zIndex": 0,
2892
- }
2893
- }
2894
- >
2895
- <div
2896
- className=""
2897
- onKeyDown={[Function]}
2898
- onKeyUp={[Function]}
2899
- style={
2900
- {
2901
- "alignItems": "stretch",
2902
- "borderStyle": "solid",
2903
- "borderWidth": 0,
2904
- "boxSizing": "border-box",
2905
- "display": "flex",
2906
- "flexDirection": "column",
2907
- "margin": 0,
2908
- "minHeight": 0,
2909
- "minWidth": 170,
2910
- "padding": 0,
2911
- "position": "relative",
2912
- "width": "fit-content",
2913
- "zIndex": 0,
2914
- }
2915
- }
2916
- >
2917
- <span
2918
- aria-atomic="true"
2919
- aria-live="polite"
2920
- aria-relevant="additions text"
2921
- className=""
2922
- data-test-id="dropdown-live-region"
2923
- style={
2924
- {
2925
- "border": 0,
2926
- "clip": "rect(0,0,0,0)",
2927
- "height": 1,
2928
- "margin": -1,
2929
- "overflow": "hidden",
2930
- "padding": 0,
2931
- "position": "absolute",
2932
- "width": 1,
2933
- }
2934
- }
2935
- />
2936
- <button
2937
- aria-expanded="false"
2938
- aria-haspopup="listbox"
2939
- className=""
2940
- data-test-id="palette"
2941
- disabled={false}
2942
- onBlur={[Function]}
2943
- onClick={[Function]}
2944
- onDragStart={[Function]}
2945
- onFocus={[Function]}
2946
- onKeyDown={[Function]}
2947
- onKeyUp={[Function]}
2948
- onMouseDown={[Function]}
2949
- onMouseEnter={[Function]}
2950
- onMouseLeave={[Function]}
2951
- onMouseUp={[Function]}
2952
- onTouchCancel={[Function]}
2953
- onTouchEnd={[Function]}
2954
- onTouchStart={[Function]}
2955
- style={
2956
- {
2957
- "::MozFocusInner": {
2958
- "border": 0,
2959
- },
2960
- "alignItems": "center",
2961
- "background": "#ffffff",
2962
- "borderColor": "rgba(33,36,44,0.16)",
2963
- "borderRadius": 4,
2964
- "borderStyle": "solid",
2965
- "borderWidth": 1,
2966
- "boxSizing": "border-box",
2967
- "color": "rgba(33,36,44,0.64)",
2968
- "display": "inline-flex",
2969
- "height": 40,
2970
- "justifyContent": "space-between",
2971
- "margin": 0,
2972
- "outline": "none",
2973
- "paddingLeft": 16,
2974
- "paddingRight": 12,
2975
- "position": "relative",
2976
- "textDecoration": "none",
2977
- "touchAction": "manipulation",
2978
- "whiteSpace": "nowrap",
2979
- }
2980
- }
2981
- tabIndex={0}
2982
- type="button"
2983
- >
2984
- <span
2985
- className=""
2986
- style={
2987
- {
2988
- "MozOsxFontSmoothing": "grayscale",
2989
- "WebkitFontSmoothing": "antialiased",
2990
- "display": "block",
2991
- "fontFamily": "Lato, "Noto Sans", sans-serif",
2992
- "fontSize": 16,
2993
- "fontWeight": 400,
2994
- "lineHeight": "20px",
2995
- "marginRight": 8,
2996
- "overflow": "hidden",
2997
- "textOverflow": "ellipsis",
2998
- "userSelect": "none",
2999
- "whiteSpace": "nowrap",
3000
- }
3001
- }
3002
- >
3003
- Color palette
3004
- </span>
3005
- <svg
3006
- aria-hidden="true"
3007
- className=""
3008
- height={16}
3009
- style={
3010
- {
3011
- "display": "inline-block",
3012
- "flexGrow": 0,
3013
- "flexShrink": 0,
3014
- "minWidth": 16,
3015
- "verticalAlign": "text-bottom",
3016
- }
3017
- }
3018
- viewBox="0 0 16 16"
3019
- width={16}
3020
- >
3021
- <path
3022
- 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"
3023
- fill="rgba(33,36,44,0.64)"
3024
- />
3025
- </svg>
3026
- </button>
3027
- </div>
3028
- </div>
3029
- `;
3030
-
3031
- exports[`wonder-blocks-dropdown example 18 1`] = `
3032
- <div
3033
- className=""
3034
- style={
3035
- {
3036
- "alignItems": "stretch",
3037
- "borderStyle": "solid",
3038
- "borderWidth": 0,
3039
- "boxSizing": "border-box",
3040
- "display": "flex",
3041
- "flexDirection": "row",
3042
- "margin": 0,
3043
- "minHeight": 0,
3044
- "minWidth": 0,
3045
- "padding": 0,
3046
- "position": "relative",
3047
- "zIndex": 0,
3048
- }
3049
- }
3050
- >
3051
- <div
3052
- className=""
3053
- onKeyDown={[Function]}
3054
- onKeyUp={[Function]}
3055
- style={
3056
- {
3057
- "alignItems": "stretch",
3058
- "borderStyle": "solid",
3059
- "borderWidth": 0,
3060
- "boxSizing": "border-box",
3061
- "display": "flex",
3062
- "flexDirection": "column",
3063
- "margin": 0,
3064
- "minHeight": 0,
3065
- "minWidth": 170,
3066
- "padding": 0,
3067
- "position": "relative",
3068
- "width": "100%",
3069
- "zIndex": 0,
3070
- }
3071
- }
3072
- >
3073
- <span
3074
- aria-atomic="true"
3075
- aria-live="polite"
3076
- aria-relevant="additions text"
3077
- className=""
3078
- data-test-id="dropdown-live-region"
3079
- style={
3080
- {
3081
- "border": 0,
3082
- "clip": "rect(0,0,0,0)",
3083
- "height": 1,
3084
- "margin": -1,
3085
- "overflow": "hidden",
3086
- "padding": 0,
3087
- "position": "absolute",
3088
- "width": 1,
3089
- }
3090
- }
3091
- />
3092
- <button
3093
- aria-expanded="false"
3094
- aria-haspopup="listbox"
3095
- className=""
3096
- disabled={false}
3097
- onBlur={[Function]}
3098
- onClick={[Function]}
3099
- onDragStart={[Function]}
3100
- onFocus={[Function]}
3101
- onKeyDown={[Function]}
3102
- onKeyUp={[Function]}
3103
- onMouseDown={[Function]}
3104
- onMouseEnter={[Function]}
3105
- onMouseLeave={[Function]}
3106
- onMouseUp={[Function]}
3107
- onTouchCancel={[Function]}
3108
- onTouchEnd={[Function]}
3109
- onTouchStart={[Function]}
3110
- style={
3111
- {
3112
- "::MozFocusInner": {
3113
- "border": 0,
3114
- },
3115
- "alignItems": "center",
3116
- "background": "#ffffff",
3117
- "borderColor": "rgba(33,36,44,0.16)",
3118
- "borderRadius": 4,
3119
- "borderStyle": "solid",
3120
- "borderWidth": 1,
3121
- "boxSizing": "border-box",
3122
- "color": "rgba(33,36,44,0.64)",
3123
- "display": "inline-flex",
3124
- "height": 40,
3125
- "justifyContent": "space-between",
3126
- "margin": 0,
3127
- "outline": "none",
3128
- "paddingLeft": 16,
3129
- "paddingRight": 12,
3130
- "position": "relative",
3131
- "textDecoration": "none",
3132
- "touchAction": "manipulation",
3133
- "whiteSpace": "nowrap",
3134
- }
3135
- }
3136
- tabIndex={0}
3137
- type="button"
3138
- >
3139
- <span
3140
- className=""
3141
- style={
3142
- {
3143
- "MozOsxFontSmoothing": "grayscale",
3144
- "WebkitFontSmoothing": "antialiased",
3145
- "display": "block",
3146
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3147
- "fontSize": 16,
3148
- "fontWeight": 400,
3149
- "lineHeight": "20px",
3150
- "marginRight": 8,
3151
- "overflow": "hidden",
3152
- "textOverflow": "ellipsis",
3153
- "userSelect": "none",
3154
- "whiteSpace": "nowrap",
3155
- }
3156
- }
3157
- >
3158
- Solar system
3159
- </span>
3160
- <svg
3161
- aria-hidden="true"
3162
- className=""
3163
- height={16}
3164
- style={
3165
- {
3166
- "display": "inline-block",
3167
- "flexGrow": 0,
3168
- "flexShrink": 0,
3169
- "minWidth": 16,
3170
- "verticalAlign": "text-bottom",
3171
- }
3172
- }
3173
- viewBox="0 0 16 16"
3174
- width={16}
3175
- >
3176
- <path
3177
- 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"
3178
- fill="rgba(33,36,44,0.64)"
3179
- />
3180
- </svg>
3181
- </button>
3182
- </div>
3183
- </div>
3184
- `;
3185
-
3186
- exports[`wonder-blocks-dropdown example 19 1`] = `
3187
- <div
3188
- className=""
3189
- style={
3190
- {
3191
- "alignItems": "stretch",
3192
- "borderStyle": "solid",
3193
- "borderWidth": 0,
3194
- "boxSizing": "border-box",
3195
- "display": "flex",
3196
- "flexDirection": "row",
3197
- "margin": 0,
3198
- "minHeight": 0,
3199
- "minWidth": 0,
3200
- "padding": 0,
3201
- "position": "relative",
3202
- "zIndex": 0,
3203
- }
3204
- }
3205
- >
3206
- <div
3207
- className=""
3208
- onKeyDown={[Function]}
3209
- onKeyUp={[Function]}
3210
- style={
3211
- {
3212
- "alignItems": "stretch",
3213
- "borderStyle": "solid",
3214
- "borderWidth": 0,
3215
- "boxSizing": "border-box",
3216
- "display": "flex",
3217
- "flexDirection": "column",
3218
- "margin": 0,
3219
- "minHeight": 0,
3220
- "minWidth": 0,
3221
- "padding": 0,
3222
- "position": "relative",
3223
- "width": "fit-content",
3224
- "zIndex": 0,
3225
- }
3226
- }
3227
- >
3228
- <span
3229
- aria-atomic="true"
3230
- aria-live="polite"
3231
- aria-relevant="additions text"
3232
- className=""
3233
- data-test-id="dropdown-live-region"
3234
- style={
3235
- {
3236
- "border": 0,
3237
- "clip": "rect(0,0,0,0)",
3238
- "height": 1,
3239
- "margin": -1,
3240
- "overflow": "hidden",
3241
- "padding": 0,
3242
- "position": "absolute",
3243
- "width": 1,
3244
- }
3245
- }
3246
- />
3247
- <button
3248
- aria-expanded="false"
3249
- aria-haspopup="listbox"
3250
- className=""
3251
- disabled={false}
3252
- onBlur={[Function]}
3253
- onClick={[Function]}
3254
- onDragStart={[Function]}
3255
- onFocus={[Function]}
3256
- onKeyDown={[Function]}
3257
- onKeyUp={[Function]}
3258
- onMouseDown={[Function]}
3259
- onMouseEnter={[Function]}
3260
- onMouseLeave={[Function]}
3261
- onMouseUp={[Function]}
3262
- onTouchCancel={[Function]}
3263
- onTouchEnd={[Function]}
3264
- onTouchStart={[Function]}
3265
- style={
3266
- {
3267
- "::MozFocusInner": {
3268
- "border": 0,
3269
- },
3270
- "alignItems": "center",
3271
- "background": "#ffffff",
3272
- "borderColor": "rgba(33,36,44,0.16)",
3273
- "borderRadius": 4,
3274
- "borderStyle": "solid",
3275
- "borderWidth": 1,
3276
- "boxSizing": "border-box",
3277
- "color": "#21242c",
3278
- "display": "inline-flex",
3279
- "height": 40,
3280
- "justifyContent": "space-between",
3281
- "margin": 0,
3282
- "outline": "none",
3283
- "paddingLeft": 16,
3284
- "paddingRight": 12,
3285
- "position": "relative",
3286
- "textDecoration": "none",
3287
- "touchAction": "manipulation",
3288
- "whiteSpace": "nowrap",
3289
- }
3290
- }
3291
- tabIndex={0}
3292
- type="button"
3293
- >
3294
- <span
3295
- className=""
3296
- style={
3297
- {
3298
- "MozOsxFontSmoothing": "grayscale",
3299
- "WebkitFontSmoothing": "antialiased",
3300
- "display": "block",
3301
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3302
- "fontSize": 16,
3303
- "fontWeight": 400,
3304
- "lineHeight": "20px",
3305
- "marginRight": 8,
3306
- "overflow": "hidden",
3307
- "textOverflow": "ellipsis",
3308
- "userSelect": "none",
3309
- "whiteSpace": "nowrap",
3310
- }
3311
- }
3312
- >
3313
- Sophie
3314
- </span>
3315
- <svg
3316
- aria-hidden="true"
3317
- className=""
3318
- height={16}
3319
- style={
3320
- {
3321
- "display": "inline-block",
3322
- "flexGrow": 0,
3323
- "flexShrink": 0,
3324
- "minWidth": 16,
3325
- "verticalAlign": "text-bottom",
3326
- }
3327
- }
3328
- viewBox="0 0 16 16"
3329
- width={16}
3330
- >
3331
- <path
3332
- 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"
3333
- fill="rgba(33,36,44,0.64)"
3334
- />
3335
- </svg>
3336
- </button>
3337
- </div>
3338
- </div>
3339
- `;
3340
-
3341
- exports[`wonder-blocks-dropdown example 20 1`] = `
3342
- <div
3343
- className=""
3344
- style={
3345
- {
3346
- "alignItems": "center",
3347
- "borderStyle": "solid",
3348
- "borderWidth": 0,
3349
- "boxSizing": "border-box",
3350
- "display": "flex",
3351
- "flexDirection": "column",
3352
- "margin": 0,
3353
- "minHeight": 0,
3354
- "minWidth": 0,
3355
- "padding": 0,
3356
- "position": "relative",
3357
- "zIndex": 0,
3358
- }
3359
- }
3360
- >
3361
- <button
3362
- aria-disabled={false}
3363
- className=""
3364
- onBlur={[Function]}
3365
- onClick={[Function]}
3366
- onDragStart={[Function]}
3367
- onFocus={[Function]}
3368
- onKeyDown={[Function]}
3369
- onKeyUp={[Function]}
3370
- onMouseDown={[Function]}
3371
- onMouseEnter={[Function]}
3372
- onMouseLeave={[Function]}
3373
- onMouseUp={[Function]}
3374
- onTouchCancel={[Function]}
3375
- onTouchEnd={[Function]}
3376
- onTouchStart={[Function]}
3377
- role="button"
3378
- style={
3379
- {
3380
- "::MozFocusInner": {
3381
- "border": 0,
3382
- },
3383
- ":focus": {
3384
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
3385
- },
3386
- "alignItems": "center",
3387
- "background": "#1865f2",
3388
- "border": "none",
3389
- "borderRadius": 4,
3390
- "boxSizing": "border-box",
3391
- "color": "#ffffff",
3392
- "cursor": "pointer",
3393
- "display": "inline-flex",
3394
- "height": 40,
3395
- "justifyContent": "center",
3396
- "margin": 0,
3397
- "outline": "none",
3398
- "paddingBottom": 0,
3399
- "paddingLeft": 16,
3400
- "paddingRight": 16,
3401
- "paddingTop": 0,
3402
- "position": "relative",
3403
- "textDecoration": "none",
3404
- "touchAction": "manipulation",
3405
- "userSelect": "none",
3406
- }
3407
- }
3408
- tabIndex={0}
3409
- type="button"
3410
- >
3411
- <span
3412
- className=""
3413
- style={
3414
- {
3415
- "MozOsxFontSmoothing": "grayscale",
3416
- "WebkitFontSmoothing": "antialiased",
3417
- "alignItems": "center",
3418
- "display": "inline-block",
3419
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3420
- "fontSize": 16,
3421
- "fontWeight": "bold",
3422
- "lineHeight": "20px",
3423
- "overflow": "hidden",
3424
- "pointerEvents": "none",
3425
- "textOverflow": "ellipsis",
3426
- "whiteSpace": "nowrap",
3427
- }
3428
- }
3429
- >
3430
- Open modal!
3431
- </span>
3432
- </button>
3433
- </div>
3434
- `;
3435
-
3436
- exports[`wonder-blocks-dropdown example 21 1`] = `
3437
- <div
3438
- className=""
3439
- style={
3440
- {
3441
- "alignItems": "stretch",
3442
- "borderStyle": "solid",
3443
- "borderWidth": 0,
3444
- "boxSizing": "border-box",
3445
- "display": "flex",
3446
- "flexDirection": "row",
3447
- "margin": 0,
3448
- "minHeight": 0,
3449
- "minWidth": 0,
3450
- "padding": 0,
3451
- "position": "relative",
3452
- "zIndex": 0,
3453
- }
3454
- }
3455
- >
3456
- <div
3457
- className=""
3458
- onKeyDown={[Function]}
3459
- onKeyUp={[Function]}
3460
- style={
3461
- {
3462
- "alignItems": "stretch",
3463
- "borderStyle": "solid",
3464
- "borderWidth": 0,
3465
- "boxSizing": "border-box",
3466
- "display": "flex",
3467
- "flexDirection": "column",
3468
- "margin": 0,
3469
- "minHeight": 0,
3470
- "minWidth": 0,
3471
- "padding": 0,
3472
- "position": "relative",
3473
- "width": "fit-content",
3474
- "zIndex": 0,
3475
- }
3476
- }
3477
- >
3478
- <span
3479
- aria-atomic="true"
3480
- aria-live="polite"
3481
- aria-relevant="additions text"
3482
- className=""
3483
- data-test-id="dropdown-live-region"
3484
- style={
3485
- {
3486
- "border": 0,
3487
- "clip": "rect(0,0,0,0)",
3488
- "height": 1,
3489
- "margin": -1,
3490
- "overflow": "hidden",
3491
- "padding": 0,
3492
- "position": "absolute",
3493
- "width": 1,
3494
- }
3495
- }
3496
- />
3497
- <button
3498
- aria-expanded="false"
3499
- aria-haspopup="listbox"
3500
- className=""
3501
- disabled={true}
3502
- onBlur={[Function]}
3503
- onClick={[Function]}
3504
- onDragStart={[Function]}
3505
- onFocus={[Function]}
3506
- onKeyDown={[Function]}
3507
- onKeyUp={[Function]}
3508
- onMouseDown={[Function]}
3509
- onMouseEnter={[Function]}
3510
- onMouseLeave={[Function]}
3511
- onMouseUp={[Function]}
3512
- onTouchCancel={[Function]}
3513
- onTouchEnd={[Function]}
3514
- onTouchStart={[Function]}
3515
- style={
3516
- {
3517
- "::MozFocusInner": {
3518
- "border": 0,
3519
- },
3520
- "alignItems": "center",
3521
- "background": "#f7f8fa",
3522
- "borderColor": "rgba(33,36,44,0.16)",
3523
- "borderRadius": 4,
3524
- "borderStyle": "solid",
3525
- "borderWidth": 1,
3526
- "boxSizing": "border-box",
3527
- "color": "rgba(33,36,44,0.64)",
3528
- "cursor": "auto",
3529
- "display": "inline-flex",
3530
- "height": 40,
3531
- "justifyContent": "space-between",
3532
- "margin": 0,
3533
- "outline": "none",
3534
- "paddingLeft": 16,
3535
- "paddingRight": 12,
3536
- "position": "relative",
3537
- "textDecoration": "none",
3538
- "touchAction": "manipulation",
3539
- "whiteSpace": "nowrap",
3540
- }
3541
- }
3542
- tabIndex={0}
3543
- type="button"
3544
- >
3545
- <span
3546
- className=""
3547
- style={
3548
- {
3549
- "MozOsxFontSmoothing": "grayscale",
3550
- "WebkitFontSmoothing": "antialiased",
3551
- "display": "block",
3552
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3553
- "fontSize": 16,
3554
- "fontWeight": 400,
3555
- "lineHeight": "20px",
3556
- "marginRight": 8,
3557
- "overflow": "hidden",
3558
- "textOverflow": "ellipsis",
3559
- "userSelect": "none",
3560
- "whiteSpace": "nowrap",
3561
- }
3562
- }
3563
- >
3564
- empty
3565
- </span>
3566
- <svg
3567
- aria-hidden="true"
3568
- className=""
3569
- height={16}
3570
- style={
3571
- {
3572
- "display": "inline-block",
3573
- "flexGrow": 0,
3574
- "flexShrink": 0,
3575
- "minWidth": 16,
3576
- "verticalAlign": "text-bottom",
3577
- }
3578
- }
3579
- viewBox="0 0 16 16"
3580
- width={16}
3581
- >
3582
- <path
3583
- 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"
3584
- fill="rgba(33,36,44,0.32)"
3585
- />
3586
- </svg>
3587
- </button>
3588
- </div>
3589
- </div>
3590
- `;
3591
-
3592
- exports[`wonder-blocks-dropdown example 22 1`] = `
3593
- <div
3594
- className=""
3595
- style={
3596
- {
3597
- "alignItems": "stretch",
3598
- "borderStyle": "solid",
3599
- "borderWidth": 0,
3600
- "boxSizing": "border-box",
3601
- "display": "flex",
3602
- "flexDirection": "column",
3603
- "margin": 0,
3604
- "minHeight": 0,
3605
- "minWidth": 0,
3606
- "padding": 0,
3607
- "position": "relative",
3608
- "zIndex": 0,
3609
- }
3610
- }
3611
- >
3612
- <label
3613
- className=""
3614
- htmlFor="unique-multi-select"
3615
- id="label-for-multi-select"
3616
- style={
3617
- {
3618
- "MozOsxFontSmoothing": "grayscale",
3619
- "WebkitFontSmoothing": "antialiased",
3620
- "display": "block",
3621
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3622
- "fontSize": 16,
3623
- "fontWeight": 700,
3624
- "lineHeight": "20px",
3625
- }
3626
- }
3627
- >
3628
- Associated label element
3629
- </label>
3630
- <div
3631
- className=""
3632
- onKeyDown={[Function]}
3633
- onKeyUp={[Function]}
3634
- style={
3635
- {
3636
- "alignItems": "stretch",
3637
- "borderStyle": "solid",
3638
- "borderWidth": 0,
3639
- "boxSizing": "border-box",
3640
- "display": "flex",
3641
- "flexDirection": "column",
3642
- "margin": 0,
3643
- "minHeight": 0,
3644
- "minWidth": 0,
3645
- "padding": 0,
3646
- "position": "relative",
3647
- "width": "fit-content",
3648
- "zIndex": 0,
3649
- }
3650
- }
3651
- >
3652
- <span
3653
- aria-atomic="true"
3654
- aria-live="polite"
3655
- aria-relevant="additions text"
3656
- className=""
3657
- data-test-id="dropdown-live-region"
3658
- style={
3659
- {
3660
- "border": 0,
3661
- "clip": "rect(0,0,0,0)",
3662
- "height": 1,
3663
- "margin": -1,
3664
- "overflow": "hidden",
3665
- "padding": 0,
3666
- "position": "absolute",
3667
- "width": 1,
3668
- }
3669
- }
3670
- />
3671
- <button
3672
- aria-expanded="false"
3673
- aria-haspopup="listbox"
3674
- aria-labelledby="label-for-multi-select"
3675
- className=""
3676
- disabled={false}
3677
- id="unique-multi-select"
3678
- onBlur={[Function]}
3679
- onClick={[Function]}
3680
- onDragStart={[Function]}
3681
- onFocus={[Function]}
3682
- onKeyDown={[Function]}
3683
- onKeyUp={[Function]}
3684
- onMouseDown={[Function]}
3685
- onMouseEnter={[Function]}
3686
- onMouseLeave={[Function]}
3687
- onMouseUp={[Function]}
3688
- onTouchCancel={[Function]}
3689
- onTouchEnd={[Function]}
3690
- onTouchStart={[Function]}
3691
- style={
3692
- {
3693
- "::MozFocusInner": {
3694
- "border": 0,
3695
- },
3696
- "alignItems": "center",
3697
- "background": "#ffffff",
3698
- "borderColor": "rgba(33,36,44,0.16)",
3699
- "borderRadius": 4,
3700
- "borderStyle": "solid",
3701
- "borderWidth": 1,
3702
- "boxSizing": "border-box",
3703
- "color": "#21242c",
3704
- "display": "inline-flex",
3705
- "height": 40,
3706
- "justifyContent": "space-between",
3707
- "margin": 0,
3708
- "outline": "none",
3709
- "paddingLeft": 16,
3710
- "paddingRight": 12,
3711
- "position": "relative",
3712
- "textDecoration": "none",
3713
- "touchAction": "manipulation",
3714
- "whiteSpace": "nowrap",
3715
- }
3716
- }
3717
- tabIndex={0}
3718
- type="button"
3719
- >
3720
- <span
3721
- className=""
3722
- style={
3723
- {
3724
- "MozOsxFontSmoothing": "grayscale",
3725
- "WebkitFontSmoothing": "antialiased",
3726
- "display": "block",
3727
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3728
- "fontSize": 16,
3729
- "fontWeight": 400,
3730
- "lineHeight": "20px",
3731
- "marginRight": 8,
3732
- "overflow": "hidden",
3733
- "textOverflow": "ellipsis",
3734
- "userSelect": "none",
3735
- "whiteSpace": "nowrap",
3736
- }
3737
- }
3738
- >
3739
- First element
3740
- </span>
3741
- <svg
3742
- aria-hidden="true"
3743
- className=""
3744
- height={16}
3745
- style={
3746
- {
3747
- "display": "inline-block",
3748
- "flexGrow": 0,
3749
- "flexShrink": 0,
3750
- "minWidth": 16,
3751
- "verticalAlign": "text-bottom",
3752
- }
3753
- }
3754
- viewBox="0 0 16 16"
3755
- width={16}
3756
- >
3757
- <path
3758
- 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"
3759
- fill="rgba(33,36,44,0.64)"
3760
- />
3761
- </svg>
3762
- </button>
3763
- </div>
3764
- </div>
3765
- `;
3766
-
3767
- exports[`wonder-blocks-dropdown example 23 1`] = `
3768
- <div
3769
- className=""
3770
- style={
3771
- {
3772
- "alignItems": "stretch",
3773
- "borderStyle": "solid",
3774
- "borderWidth": 0,
3775
- "boxSizing": "border-box",
3776
- "display": "flex",
3777
- "flexDirection": "row",
3778
- "margin": 0,
3779
- "minHeight": 0,
3780
- "minWidth": 0,
3781
- "padding": 0,
3782
- "position": "relative",
3783
- "zIndex": 0,
3784
- }
3785
- }
3786
- >
3787
- <div
3788
- className=""
3789
- onKeyDown={[Function]}
3790
- onKeyUp={[Function]}
3791
- style={
3792
- {
3793
- "alignItems": "stretch",
3794
- "borderStyle": "solid",
3795
- "borderWidth": 0,
3796
- "boxSizing": "border-box",
3797
- "display": "flex",
3798
- "flexDirection": "column",
3799
- "margin": 0,
3800
- "minHeight": 0,
3801
- "minWidth": 0,
3802
- "padding": 0,
3803
- "position": "relative",
3804
- "width": "fit-content",
3805
- "zIndex": 0,
3806
- }
3807
- }
3808
- >
3809
- <span
3810
- aria-atomic="true"
3811
- aria-live="polite"
3812
- aria-relevant="additions text"
3813
- className=""
3814
- data-test-id="dropdown-live-region"
3815
- style={
3816
- {
3817
- "border": 0,
3818
- "clip": "rect(0,0,0,0)",
3819
- "height": 1,
3820
- "margin": -1,
3821
- "overflow": "hidden",
3822
- "padding": 0,
3823
- "position": "absolute",
3824
- "width": 1,
3825
- }
3826
- }
3827
- />
3828
- <button
3829
- aria-expanded="false"
3830
- aria-haspopup="listbox"
3831
- className=""
3832
- disabled={false}
3833
- onBlur={[Function]}
3834
- onClick={[Function]}
3835
- onDragStart={[Function]}
3836
- onFocus={[Function]}
3837
- onKeyDown={[Function]}
3838
- onKeyUp={[Function]}
3839
- onMouseDown={[Function]}
3840
- onMouseEnter={[Function]}
3841
- onMouseLeave={[Function]}
3842
- onMouseUp={[Function]}
3843
- onTouchCancel={[Function]}
3844
- onTouchEnd={[Function]}
3845
- onTouchStart={[Function]}
3846
- style={
3847
- {
3848
- "::MozFocusInner": {
3849
- "border": 0,
3850
- },
3851
- "alignItems": "center",
3852
- "background": "#ffffff",
3853
- "borderColor": "rgba(33,36,44,0.16)",
3854
- "borderRadius": 4,
3855
- "borderStyle": "solid",
3856
- "borderWidth": 1,
3857
- "boxSizing": "border-box",
3858
- "color": "#21242c",
3859
- "display": "inline-flex",
3860
- "height": 40,
3861
- "justifyContent": "space-between",
3862
- "margin": 0,
3863
- "outline": "none",
3864
- "paddingLeft": 16,
3865
- "paddingRight": 12,
3866
- "position": "relative",
3867
- "textDecoration": "none",
3868
- "touchAction": "manipulation",
3869
- "whiteSpace": "nowrap",
3870
- }
3871
- }
3872
- tabIndex={0}
3873
- type="button"
3874
- >
3875
- <span
3876
- className=""
3877
- style={
3878
- {
3879
- "MozOsxFontSmoothing": "grayscale",
3880
- "WebkitFontSmoothing": "antialiased",
3881
- "display": "block",
3882
- "fontFamily": "Lato, "Noto Sans", sans-serif",
3883
- "fontSize": 16,
3884
- "fontWeight": 400,
3885
- "lineHeight": "20px",
3886
- "marginRight": 8,
3887
- "overflow": "hidden",
3888
- "textOverflow": "ellipsis",
3889
- "userSelect": "none",
3890
- "whiteSpace": "nowrap",
3891
- }
3892
- }
3893
- >
3894
- All fruits selected
3895
- </span>
3896
- <svg
3897
- aria-hidden="true"
3898
- className=""
3899
- height={16}
3900
- style={
3901
- {
3902
- "display": "inline-block",
3903
- "flexGrow": 0,
3904
- "flexShrink": 0,
3905
- "minWidth": 16,
3906
- "verticalAlign": "text-bottom",
3907
- }
3908
- }
3909
- viewBox="0 0 16 16"
3910
- width={16}
3911
- >
3912
- <path
3913
- 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"
3914
- fill="rgba(33,36,44,0.64)"
3915
- />
3916
- </svg>
3917
- </button>
3918
- </div>
3919
- </div>
3920
- `;
3921
-
3922
- exports[`wonder-blocks-dropdown example 24 1`] = `
3923
- <div
3924
- className=""
3925
- style={
3926
- {
3927
- "alignItems": "stretch",
3928
- "borderStyle": "solid",
3929
- "borderWidth": 0,
3930
- "boxSizing": "border-box",
3931
- "display": "flex",
3932
- "flexDirection": "row",
3933
- "margin": 0,
3934
- "minHeight": 0,
3935
- "minWidth": 0,
3936
- "padding": 0,
3937
- "position": "relative",
3938
- "zIndex": 0,
3939
- }
3940
- }
3941
- >
3942
- <div
3943
- className=""
3944
- onKeyDown={[Function]}
3945
- onKeyUp={[Function]}
3946
- style={
3947
- {
3948
- "alignItems": "stretch",
3949
- "borderStyle": "solid",
3950
- "borderWidth": 0,
3951
- "boxSizing": "border-box",
3952
- "display": "flex",
3953
- "flexDirection": "column",
3954
- "margin": 0,
3955
- "minHeight": 0,
3956
- "minWidth": 0,
3957
- "padding": 0,
3958
- "position": "relative",
3959
- "width": "fit-content",
3960
- "zIndex": 0,
3961
- }
3962
- }
3963
- >
3964
- <span
3965
- aria-atomic="true"
3966
- aria-live="polite"
3967
- aria-relevant="additions text"
3968
- className=""
3969
- data-test-id="dropdown-live-region"
3970
- style={
3971
- {
3972
- "border": 0,
3973
- "clip": "rect(0,0,0,0)",
3974
- "height": 1,
3975
- "margin": -1,
3976
- "overflow": "hidden",
3977
- "padding": 0,
3978
- "position": "absolute",
3979
- "width": 1,
3980
- }
3981
- }
3982
- />
3983
- <button
3984
- aria-expanded="false"
3985
- aria-haspopup="listbox"
3986
- className=""
3987
- disabled={false}
3988
- onBlur={[Function]}
3989
- onClick={[Function]}
3990
- onDragStart={[Function]}
3991
- onFocus={[Function]}
3992
- onKeyDown={[Function]}
3993
- onKeyUp={[Function]}
3994
- onMouseDown={[Function]}
3995
- onMouseEnter={[Function]}
3996
- onMouseLeave={[Function]}
3997
- onMouseUp={[Function]}
3998
- onTouchCancel={[Function]}
3999
- onTouchEnd={[Function]}
4000
- onTouchStart={[Function]}
4001
- style={
4002
- {
4003
- "::MozFocusInner": {
4004
- "border": 0,
4005
- },
4006
- "alignItems": "center",
4007
- "background": "#ffffff",
4008
- "borderColor": "rgba(33,36,44,0.16)",
4009
- "borderRadius": 4,
4010
- "borderStyle": "solid",
4011
- "borderWidth": 1,
4012
- "boxSizing": "border-box",
4013
- "color": "rgba(33,36,44,0.64)",
4014
- "display": "inline-flex",
4015
- "height": 40,
4016
- "justifyContent": "space-between",
4017
- "margin": 0,
4018
- "outline": "none",
4019
- "paddingLeft": 16,
4020
- "paddingRight": 12,
4021
- "position": "relative",
4022
- "textDecoration": "none",
4023
- "touchAction": "manipulation",
4024
- "whiteSpace": "nowrap",
4025
- }
4026
- }
4027
- tabIndex={0}
4028
- type="button"
4029
- >
4030
- <span
4031
- className=""
4032
- style={
4033
- {
4034
- "MozOsxFontSmoothing": "grayscale",
4035
- "WebkitFontSmoothing": "antialiased",
4036
- "display": "block",
4037
- "fontFamily": "Lato, "Noto Sans", sans-serif",
4038
- "fontSize": 16,
4039
- "fontWeight": 400,
4040
- "lineHeight": "20px",
4041
- "marginRight": 8,
4042
- "overflow": "hidden",
4043
- "textOverflow": "ellipsis",
4044
- "userSelect": "none",
4045
- "whiteSpace": "nowrap",
4046
- }
4047
- }
4048
- >
4049
- Select one
4050
- </span>
4051
- <svg
4052
- aria-hidden="true"
4053
- className=""
4054
- height={16}
4055
- style={
4056
- {
4057
- "display": "inline-block",
4058
- "flexGrow": 0,
4059
- "flexShrink": 0,
4060
- "minWidth": 16,
4061
- "verticalAlign": "text-bottom",
4062
- }
4063
- }
4064
- viewBox="0 0 16 16"
4065
- width={16}
4066
- >
4067
- <path
4068
- 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"
4069
- fill="rgba(33,36,44,0.64)"
4070
- />
4071
- </svg>
4072
- </button>
4073
- </div>
4074
- <div
4075
- aria-hidden="true"
4076
- className=""
4077
- style={
4078
- {
4079
- "MsFlexBasis": 16,
4080
- "MsFlexPreferredSize": 16,
4081
- "WebkitFlexBasis": 16,
4082
- "alignItems": "stretch",
4083
- "borderStyle": "solid",
4084
- "borderWidth": 0,
4085
- "boxSizing": "border-box",
4086
- "display": "flex",
4087
- "flexBasis": 16,
4088
- "flexDirection": "column",
4089
- "flexShrink": 0,
4090
- "margin": 0,
4091
- "minHeight": 0,
4092
- "minWidth": 0,
4093
- "padding": 0,
4094
- "position": "relative",
4095
- "width": 16,
4096
- "zIndex": 0,
4097
- }
4098
- }
4099
- />
4100
- <button
4101
- aria-disabled={false}
4102
- className=""
4103
- onBlur={[Function]}
4104
- onClick={[Function]}
4105
- onDragStart={[Function]}
4106
- onFocus={[Function]}
4107
- onKeyDown={[Function]}
4108
- onKeyUp={[Function]}
4109
- onMouseDown={[Function]}
4110
- onMouseEnter={[Function]}
4111
- onMouseLeave={[Function]}
4112
- onMouseUp={[Function]}
4113
- onTouchCancel={[Function]}
4114
- onTouchEnd={[Function]}
4115
- onTouchStart={[Function]}
4116
- role="button"
4117
- style={
4118
- {
4119
- "::MozFocusInner": {
4120
- "border": 0,
4121
- },
4122
- ":focus": {
4123
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
4124
- },
4125
- "alignItems": "center",
4126
- "background": "#1865f2",
4127
- "border": "none",
4128
- "borderRadius": 4,
4129
- "boxSizing": "border-box",
4130
- "color": "#ffffff",
4131
- "cursor": "pointer",
4132
- "display": "inline-flex",
4133
- "height": 40,
4134
- "justifyContent": "center",
4135
- "margin": 0,
4136
- "outline": "none",
4137
- "paddingBottom": 0,
4138
- "paddingLeft": 16,
4139
- "paddingRight": 16,
4140
- "paddingTop": 0,
4141
- "position": "relative",
4142
- "textDecoration": "none",
4143
- "touchAction": "manipulation",
4144
- "userSelect": "none",
4145
- }
4146
- }
4147
- tabIndex={0}
4148
- type="button"
4149
- >
4150
- <span
4151
- className=""
4152
- style={
4153
- {
4154
- "MozOsxFontSmoothing": "grayscale",
4155
- "WebkitFontSmoothing": "antialiased",
4156
- "alignItems": "center",
4157
- "display": "inline-block",
4158
- "fontFamily": "Lato, "Noto Sans", sans-serif",
4159
- "fontSize": 16,
4160
- "fontWeight": "bold",
4161
- "lineHeight": "20px",
4162
- "overflow": "hidden",
4163
- "pointerEvents": "none",
4164
- "textOverflow": "ellipsis",
4165
- "whiteSpace": "nowrap",
4166
- }
4167
- }
4168
- >
4169
- Open SingleSelect programatically
4170
- </span>
4171
- </button>
4172
- </div>
4173
- `;
4174
-
4175
- exports[`wonder-blocks-dropdown example 25 1`] = `
4176
- <div
4177
- className=""
4178
- style={
4179
- {
4180
- "alignItems": "stretch",
4181
- "borderStyle": "solid",
4182
- "borderWidth": 0,
4183
- "boxSizing": "border-box",
4184
- "display": "flex",
4185
- "flexDirection": "row",
4186
- "margin": 0,
4187
- "minHeight": 0,
4188
- "minWidth": 0,
4189
- "padding": 0,
4190
- "position": "relative",
4191
- "zIndex": 0,
4192
- }
4193
- }
4194
- >
4195
- <div
4196
- className=""
4197
- onKeyDown={[Function]}
4198
- onKeyUp={[Function]}
4199
- style={
4200
- {
4201
- "alignItems": "stretch",
4202
- "borderStyle": "solid",
4203
- "borderWidth": 0,
4204
- "boxSizing": "border-box",
4205
- "display": "flex",
4206
- "flexDirection": "column",
4207
- "margin": 0,
4208
- "minHeight": 0,
4209
- "minWidth": 0,
4210
- "padding": 0,
4211
- "position": "relative",
4212
- "width": "fit-content",
4213
- "zIndex": 0,
4214
- }
4215
- }
4216
- >
4217
- <span
4218
- aria-atomic="true"
4219
- aria-live="polite"
4220
- aria-relevant="additions text"
4221
- className=""
4222
- data-test-id="dropdown-live-region"
4223
- style={
4224
- {
4225
- "border": 0,
4226
- "clip": "rect(0,0,0,0)",
4227
- "height": 1,
4228
- "margin": -1,
4229
- "overflow": "hidden",
4230
- "padding": 0,
4231
- "position": "absolute",
4232
- "width": 1,
4233
- }
4234
- }
4235
- />
4236
- <button
4237
- aria-expanded="false"
4238
- aria-haspopup="listbox"
4239
- className=""
4240
- disabled={false}
4241
- onBlur={[Function]}
4242
- onClick={[Function]}
4243
- onDragStart={[Function]}
4244
- onFocus={[Function]}
4245
- onKeyDown={[Function]}
4246
- onKeyUp={[Function]}
4247
- onMouseDown={[Function]}
4248
- onMouseEnter={[Function]}
4249
- onMouseLeave={[Function]}
4250
- onMouseUp={[Function]}
4251
- onTouchCancel={[Function]}
4252
- onTouchEnd={[Function]}
4253
- onTouchStart={[Function]}
4254
- style={
4255
- {
4256
- "::MozFocusInner": {
4257
- "border": 0,
4258
- },
4259
- "alignItems": "center",
4260
- "background": "#ffffff",
4261
- "borderColor": "rgba(33,36,44,0.16)",
4262
- "borderRadius": 4,
4263
- "borderStyle": "solid",
4264
- "borderWidth": 1,
4265
- "boxSizing": "border-box",
4266
- "color": "rgba(33,36,44,0.64)",
4267
- "display": "inline-flex",
4268
- "height": 40,
4269
- "justifyContent": "space-between",
4270
- "margin": 0,
4271
- "outline": "none",
4272
- "paddingLeft": 16,
4273
- "paddingRight": 12,
4274
- "position": "relative",
4275
- "textDecoration": "none",
4276
- "touchAction": "manipulation",
4277
- "whiteSpace": "nowrap",
4278
- }
4279
- }
4280
- tabIndex={0}
4281
- type="button"
4282
- >
4283
- <span
4284
- className=""
4285
- style={
4286
- {
4287
- "MozOsxFontSmoothing": "grayscale",
4288
- "WebkitFontSmoothing": "antialiased",
4289
- "display": "block",
4290
- "fontFamily": "Lato, "Noto Sans", sans-serif",
4291
- "fontSize": 16,
4292
- "fontWeight": 400,
4293
- "lineHeight": "20px",
4294
- "marginRight": 8,
4295
- "overflow": "hidden",
4296
- "textOverflow": "ellipsis",
4297
- "userSelect": "none",
4298
- "whiteSpace": "nowrap",
4299
- }
4300
- }
4301
- >
4302
- Select a school
4303
- </span>
4304
- <svg
4305
- aria-hidden="true"
4306
- className=""
4307
- height={16}
4308
- style={
4309
- {
4310
- "display": "inline-block",
4311
- "flexGrow": 0,
4312
- "flexShrink": 0,
4313
- "minWidth": 16,
4314
- "verticalAlign": "text-bottom",
4315
- }
4316
- }
4317
- viewBox="0 0 16 16"
4318
- width={16}
4319
- >
4320
- <path
4321
- 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"
4322
- fill="rgba(33,36,44,0.64)"
4323
- />
4324
- </svg>
4325
- </button>
4326
- </div>
4327
- </div>
4328
- `;
4329
-
4330
- exports[`wonder-blocks-dropdown example 26 1`] = `
4331
- <div
4332
- className=""
4333
- onKeyDown={[Function]}
4334
- onKeyUp={[Function]}
4335
- style={
4336
- {
4337
- "alignItems": "stretch",
4338
- "borderStyle": "solid",
4339
- "borderWidth": 0,
4340
- "boxSizing": "border-box",
4341
- "display": "flex",
4342
- "flexDirection": "column",
4343
- "margin": 0,
4344
- "minHeight": 0,
4345
- "minWidth": 0,
4346
- "padding": 0,
4347
- "position": "relative",
4348
- "width": "fit-content",
4349
- "zIndex": 0,
4350
- }
4351
- }
4352
- >
4353
- <span
4354
- aria-atomic="true"
4355
- aria-live="polite"
4356
- aria-relevant="additions text"
4357
- className=""
4358
- data-test-id="dropdown-live-region"
4359
- style={
4360
- {
4361
- "border": 0,
4362
- "clip": "rect(0,0,0,0)",
4363
- "height": 1,
4364
- "margin": -1,
4365
- "overflow": "hidden",
4366
- "padding": 0,
4367
- "position": "absolute",
4368
- "width": 1,
4369
- }
4370
- }
4371
- />
4372
- <h2
4373
- className=""
4374
- data-test-id="multi-select-custom-opener"
4375
- disabled={false}
4376
- onBlur={[Function]}
4377
- onClick={[Function]}
4378
- onDragStart={[Function]}
4379
- onFocus={[Function]}
4380
- onKeyDown={[Function]}
4381
- onKeyUp={[Function]}
4382
- onMouseDown={[Function]}
4383
- onMouseEnter={[Function]}
4384
- onMouseLeave={[Function]}
4385
- onMouseUp={[Function]}
4386
- onTouchCancel={[Function]}
4387
- onTouchEnd={[Function]}
4388
- onTouchStart={[Function]}
4389
- style={
4390
- {
4391
- "@media (maxWidth: 1023px)": {
4392
- "fontSize": 24,
4393
- "lineHeight": "28px",
4394
- },
4395
- "@media (minWidth: 1024px)": {
4396
- "fontSize": 28,
4397
- "lineHeight": "32px",
4398
- },
4399
- "MozOsxFontSmoothing": "grayscale",
4400
- "WebkitFontSmoothing": "antialiased",
4401
- "display": "block",
4402
- "fontFamily": "Lato, "Noto Sans", sans-serif",
4403
- "fontWeight": 700,
4404
- "marginBottom": 0,
4405
- "marginTop": 0,
4406
- }
4407
- }
4408
- tabIndex={0}
4409
- >
4410
- Choose a fruit
4411
- </h2>
4412
- </div>
4413
- `;
4414
-
4415
- exports[`wonder-blocks-dropdown example 27 1`] = `
4416
- <div
4417
- className=""
4418
- onKeyDown={[Function]}
4419
- onKeyUp={[Function]}
4420
- style={
4421
- {
4422
- "alignItems": "stretch",
4423
- "borderStyle": "solid",
4424
- "borderWidth": 0,
4425
- "boxSizing": "border-box",
4426
- "display": "flex",
4427
- "flexDirection": "column",
4428
- "margin": 0,
4429
- "minHeight": 0,
4430
- "minWidth": 0,
4431
- "padding": 0,
4432
- "position": "relative",
4433
- "width": "fit-content",
4434
- "zIndex": 0,
4435
- }
4436
- }
4437
- >
4438
- <span
4439
- aria-atomic="true"
4440
- aria-live="polite"
4441
- aria-relevant="additions text"
4442
- className=""
4443
- data-test-id="dropdown-live-region"
4444
- style={
4445
- {
4446
- "border": 0,
4447
- "clip": "rect(0,0,0,0)",
4448
- "height": 1,
4449
- "margin": -1,
4450
- "overflow": "hidden",
4451
- "padding": 0,
4452
- "position": "absolute",
4453
- "width": 1,
4454
- }
4455
- }
4456
- />
4457
- <button
4458
- aria-expanded="false"
4459
- aria-haspopup="listbox"
4460
- className=""
4461
- disabled={false}
4462
- onBlur={[Function]}
4463
- onClick={[Function]}
4464
- onDragStart={[Function]}
4465
- onFocus={[Function]}
4466
- onKeyDown={[Function]}
4467
- onKeyUp={[Function]}
4468
- onMouseDown={[Function]}
4469
- onMouseEnter={[Function]}
4470
- onMouseLeave={[Function]}
4471
- onMouseUp={[Function]}
4472
- onTouchCancel={[Function]}
4473
- onTouchEnd={[Function]}
4474
- onTouchStart={[Function]}
4475
- style={
4476
- {
4477
- "::MozFocusInner": {
4478
- "border": 0,
4479
- },
4480
- "alignItems": "center",
4481
- "background": "#ffffff",
4482
- "borderColor": "rgba(33,36,44,0.16)",
4483
- "borderRadius": 4,
4484
- "borderStyle": "solid",
4485
- "borderWidth": 1,
4486
- "boxSizing": "border-box",
4487
- "color": "rgba(33,36,44,0.64)",
4488
- "display": "inline-flex",
4489
- "height": 40,
4490
- "justifyContent": "space-between",
4491
- "margin": 0,
4492
- "outline": "none",
4493
- "paddingLeft": 16,
4494
- "paddingRight": 12,
4495
- "position": "relative",
4496
- "textDecoration": "none",
4497
- "touchAction": "manipulation",
4498
- "whiteSpace": "nowrap",
4499
- }
4500
- }
4501
- tabIndex={0}
4502
- type="button"
4503
- >
4504
- <span
4505
- className=""
4506
- style={
4507
- {
4508
- "MozOsxFontSmoothing": "grayscale",
4509
- "WebkitFontSmoothing": "antialiased",
4510
- "display": "block",
4511
- "fontFamily": "Lato, "Noto Sans", sans-serif",
4512
- "fontSize": 16,
4513
- "fontWeight": 400,
4514
- "lineHeight": "20px",
4515
- "marginRight": 8,
4516
- "overflow": "hidden",
4517
- "textOverflow": "ellipsis",
4518
- "userSelect": "none",
4519
- "whiteSpace": "nowrap",
4520
- }
4521
- }
4522
- >
4523
- 0 escuelas seleccionadas
4524
- </span>
4525
- <svg
4526
- aria-hidden="true"
4527
- className=""
4528
- height={16}
4529
- style={
4530
- {
4531
- "display": "inline-block",
4532
- "flexGrow": 0,
4533
- "flexShrink": 0,
4534
- "minWidth": 16,
4535
- "verticalAlign": "text-bottom",
4536
- }
4537
- }
4538
- viewBox="0 0 16 16"
4539
- width={16}
4540
- >
4541
- <path
4542
- 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"
4543
- fill="rgba(33,36,44,0.64)"
4544
- />
4545
- </svg>
4546
- </button>
4547
- </div>
4548
- `;