@khanacademy/wonder-blocks-form 2.2.1

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 (38) hide show
  1. package/LICENSE +21 -0
  2. package/dist/es/index.js +1100 -0
  3. package/dist/index.js +1419 -0
  4. package/dist/index.js.flow +2 -0
  5. package/docs.md +1 -0
  6. package/package.json +35 -0
  7. package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap +1349 -0
  8. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +6126 -0
  9. package/src/__tests__/custom-snapshot.test.js +66 -0
  10. package/src/__tests__/generated-snapshot.test.js +654 -0
  11. package/src/components/__tests__/checkbox-group.test.js +84 -0
  12. package/src/components/__tests__/field-heading.test.js +182 -0
  13. package/src/components/__tests__/labeled-text-field.test.js +442 -0
  14. package/src/components/__tests__/radio-group.test.js +84 -0
  15. package/src/components/__tests__/text-field.test.js +424 -0
  16. package/src/components/checkbox-core.js +201 -0
  17. package/src/components/checkbox-group.js +161 -0
  18. package/src/components/checkbox-group.md +200 -0
  19. package/src/components/checkbox.js +94 -0
  20. package/src/components/checkbox.md +134 -0
  21. package/src/components/choice-internal.js +206 -0
  22. package/src/components/choice.js +104 -0
  23. package/src/components/field-heading.js +157 -0
  24. package/src/components/field-heading.md +43 -0
  25. package/src/components/group-styles.js +35 -0
  26. package/src/components/labeled-text-field.js +265 -0
  27. package/src/components/labeled-text-field.md +535 -0
  28. package/src/components/labeled-text-field.stories.js +359 -0
  29. package/src/components/radio-core.js +176 -0
  30. package/src/components/radio-group.js +142 -0
  31. package/src/components/radio-group.md +129 -0
  32. package/src/components/radio.js +93 -0
  33. package/src/components/radio.md +26 -0
  34. package/src/components/text-field.js +326 -0
  35. package/src/components/text-field.md +770 -0
  36. package/src/components/text-field.stories.js +513 -0
  37. package/src/index.js +18 -0
  38. package/src/util/types.js +77 -0
package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap ADDED
@@ -0,0 +1,1349 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`CheckboxCore type:default state:default checked:false 1`] = `
4
+ <input
5
+ aria-invalid={false}
6
+ checked={false}
7
+ className=""
8
+ disabled={false}
9
+ onChange={[Function]}
10
+ style={
11
+ Object {
12
+ "MozAppearance": "none",
13
+ "WebkitAppearance": "none",
14
+ "appearance": "none",
15
+ "backgroundColor": "#ffffff",
16
+ "borderColor": "rgba(33,36,44,0.50)",
17
+ "borderRadius": 3,
18
+ "borderStyle": "solid",
19
+ "borderWidth": 1,
20
+ "boxSizing": "border-box",
21
+ "height": 16,
22
+ "margin": 0,
23
+ "minHeight": 16,
24
+ "minWidth": 16,
25
+ "outline": "none",
26
+ "width": 16,
27
+ }
28
+ }
29
+ type="checkbox"
30
+ />
31
+ `;
32
+
33
+ exports[`CheckboxCore type:default state:default checked:true 1`] = `
34
+ Array [
35
+ <input
36
+ aria-invalid={false}
37
+ checked={true}
38
+ className=""
39
+ disabled={false}
40
+ onChange={[Function]}
41
+ style={
42
+ Object {
43
+ "MozAppearance": "none",
44
+ "WebkitAppearance": "none",
45
+ "appearance": "none",
46
+ "backgroundColor": "#1865f2",
47
+ "borderRadius": 3,
48
+ "borderStyle": "solid",
49
+ "borderWidth": 0,
50
+ "boxSizing": "border-box",
51
+ "height": 16,
52
+ "margin": 0,
53
+ "minHeight": 16,
54
+ "minWidth": 16,
55
+ "outline": "none",
56
+ "width": 16,
57
+ }
58
+ }
59
+ type="checkbox"
60
+ />,
61
+ <svg
62
+ className=""
63
+ height={16}
64
+ style={
65
+ Object {
66
+ "display": "inline-block",
67
+ "flexGrow": 0,
68
+ "flexShrink": 0,
69
+ "pointerEvents": "none",
70
+ "position": "absolute",
71
+ "verticalAlign": "text-bottom",
72
+ }
73
+ }
74
+ viewBox="0 0 16 16"
75
+ width={16}
76
+ >
77
+ <path
78
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
79
+ fill="#ffffff"
80
+ />
81
+ </svg>,
82
+ ]
83
+ `;
84
+
85
+ exports[`CheckboxCore type:default state:hovered checked:false 1`] = `
86
+ <input
87
+ aria-invalid={false}
88
+ checked={false}
89
+ className=""
90
+ disabled={false}
91
+ onChange={[Function]}
92
+ style={
93
+ Object {
94
+ "MozAppearance": "none",
95
+ "WebkitAppearance": "none",
96
+ "appearance": "none",
97
+ "backgroundColor": "#ffffff",
98
+ "borderColor": "#1865f2",
99
+ "borderRadius": 3,
100
+ "borderStyle": "solid",
101
+ "borderWidth": 2,
102
+ "boxSizing": "border-box",
103
+ "height": 16,
104
+ "margin": 0,
105
+ "minHeight": 16,
106
+ "minWidth": 16,
107
+ "outline": "none",
108
+ "width": 16,
109
+ }
110
+ }
111
+ type="checkbox"
112
+ />
113
+ `;
114
+
115
+ exports[`CheckboxCore type:default state:hovered checked:true 1`] = `
116
+ Array [
117
+ <input
118
+ aria-invalid={false}
119
+ checked={true}
120
+ className=""
121
+ disabled={false}
122
+ onChange={[Function]}
123
+ style={
124
+ Object {
125
+ "MozAppearance": "none",
126
+ "WebkitAppearance": "none",
127
+ "appearance": "none",
128
+ "backgroundColor": "#1865f2",
129
+ "borderRadius": 3,
130
+ "borderStyle": "solid",
131
+ "borderWidth": 0,
132
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
133
+ "boxSizing": "border-box",
134
+ "height": 16,
135
+ "margin": 0,
136
+ "minHeight": 16,
137
+ "minWidth": 16,
138
+ "outline": "none",
139
+ "width": 16,
140
+ }
141
+ }
142
+ type="checkbox"
143
+ />,
144
+ <svg
145
+ className=""
146
+ height={16}
147
+ style={
148
+ Object {
149
+ "display": "inline-block",
150
+ "flexGrow": 0,
151
+ "flexShrink": 0,
152
+ "pointerEvents": "none",
153
+ "position": "absolute",
154
+ "verticalAlign": "text-bottom",
155
+ }
156
+ }
157
+ viewBox="0 0 16 16"
158
+ width={16}
159
+ >
160
+ <path
161
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
162
+ fill="#ffffff"
163
+ />
164
+ </svg>,
165
+ ]
166
+ `;
167
+
168
+ exports[`CheckboxCore type:default state:pressed checked:false 1`] = `
169
+ <input
170
+ aria-invalid={false}
171
+ checked={false}
172
+ className=""
173
+ disabled={false}
174
+ onChange={[Function]}
175
+ style={
176
+ Object {
177
+ "MozAppearance": "none",
178
+ "WebkitAppearance": "none",
179
+ "appearance": "none",
180
+ "backgroundColor": "#dae6fd",
181
+ "borderColor": "#1865f2",
182
+ "borderRadius": 3,
183
+ "borderStyle": "solid",
184
+ "borderWidth": 2,
185
+ "boxSizing": "border-box",
186
+ "height": 16,
187
+ "margin": 0,
188
+ "minHeight": 16,
189
+ "minWidth": 16,
190
+ "outline": "none",
191
+ "width": 16,
192
+ }
193
+ }
194
+ type="checkbox"
195
+ />
196
+ `;
197
+
198
+ exports[`CheckboxCore type:default state:pressed checked:true 1`] = `
199
+ Array [
200
+ <input
201
+ aria-invalid={false}
202
+ checked={true}
203
+ className=""
204
+ disabled={false}
205
+ onChange={[Function]}
206
+ style={
207
+ Object {
208
+ "MozAppearance": "none",
209
+ "WebkitAppearance": "none",
210
+ "appearance": "none",
211
+ "background": "#1b50b3",
212
+ "backgroundColor": "#1865f2",
213
+ "borderRadius": 3,
214
+ "borderStyle": "solid",
215
+ "borderWidth": 0,
216
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1b50b3",
217
+ "boxSizing": "border-box",
218
+ "height": 16,
219
+ "margin": 0,
220
+ "minHeight": 16,
221
+ "minWidth": 16,
222
+ "outline": "none",
223
+ "width": 16,
224
+ }
225
+ }
226
+ type="checkbox"
227
+ />,
228
+ <svg
229
+ className=""
230
+ height={16}
231
+ style={
232
+ Object {
233
+ "display": "inline-block",
234
+ "flexGrow": 0,
235
+ "flexShrink": 0,
236
+ "pointerEvents": "none",
237
+ "position": "absolute",
238
+ "verticalAlign": "text-bottom",
239
+ }
240
+ }
241
+ viewBox="0 0 16 16"
242
+ width={16}
243
+ >
244
+ <path
245
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
246
+ fill="#ffffff"
247
+ />
248
+ </svg>,
249
+ ]
250
+ `;
251
+
252
+ exports[`CheckboxCore type:disabled state:default checked:false 1`] = `
253
+ <input
254
+ aria-invalid={false}
255
+ checked={false}
256
+ className=""
257
+ disabled={true}
258
+ onChange={[Function]}
259
+ style={
260
+ Object {
261
+ "MozAppearance": "none",
262
+ "WebkitAppearance": "none",
263
+ "appearance": "none",
264
+ "backgroundColor": "#f7f8fa",
265
+ "borderColor": "rgba(33,36,44,0.16)",
266
+ "borderRadius": 3,
267
+ "borderStyle": "solid",
268
+ "borderWidth": 1,
269
+ "boxSizing": "border-box",
270
+ "cursor": "auto",
271
+ "height": 16,
272
+ "margin": 0,
273
+ "minHeight": 16,
274
+ "minWidth": 16,
275
+ "outline": "none",
276
+ "width": 16,
277
+ }
278
+ }
279
+ type="checkbox"
280
+ />
281
+ `;
282
+
283
+ exports[`CheckboxCore type:disabled state:default checked:true 1`] = `
284
+ Array [
285
+ <input
286
+ aria-invalid={false}
287
+ checked={true}
288
+ className=""
289
+ disabled={true}
290
+ onChange={[Function]}
291
+ style={
292
+ Object {
293
+ "MozAppearance": "none",
294
+ "WebkitAppearance": "none",
295
+ "appearance": "none",
296
+ "backgroundColor": "#f7f8fa",
297
+ "borderColor": "rgba(33,36,44,0.16)",
298
+ "borderRadius": 3,
299
+ "borderStyle": "solid",
300
+ "borderWidth": 1,
301
+ "boxSizing": "border-box",
302
+ "cursor": "auto",
303
+ "height": 16,
304
+ "margin": 0,
305
+ "minHeight": 16,
306
+ "minWidth": 16,
307
+ "outline": "none",
308
+ "width": 16,
309
+ }
310
+ }
311
+ type="checkbox"
312
+ />,
313
+ <svg
314
+ className=""
315
+ height={16}
316
+ style={
317
+ Object {
318
+ "display": "inline-block",
319
+ "flexGrow": 0,
320
+ "flexShrink": 0,
321
+ "pointerEvents": "none",
322
+ "position": "absolute",
323
+ "verticalAlign": "text-bottom",
324
+ }
325
+ }
326
+ viewBox="0 0 16 16"
327
+ width={16}
328
+ >
329
+ <path
330
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
331
+ fill="rgba(33,36,44,0.32)"
332
+ />
333
+ </svg>,
334
+ ]
335
+ `;
336
+
337
+ exports[`CheckboxCore type:disabled state:hovered checked:false 1`] = `
338
+ <input
339
+ aria-invalid={false}
340
+ checked={false}
341
+ className=""
342
+ disabled={true}
343
+ onChange={[Function]}
344
+ style={
345
+ Object {
346
+ "MozAppearance": "none",
347
+ "WebkitAppearance": "none",
348
+ "appearance": "none",
349
+ "backgroundColor": "#f7f8fa",
350
+ "borderColor": "rgba(33,36,44,0.16)",
351
+ "borderRadius": 3,
352
+ "borderStyle": "solid",
353
+ "borderWidth": 1,
354
+ "boxSizing": "border-box",
355
+ "cursor": "auto",
356
+ "height": 16,
357
+ "margin": 0,
358
+ "minHeight": 16,
359
+ "minWidth": 16,
360
+ "outline": "none",
361
+ "width": 16,
362
+ }
363
+ }
364
+ type="checkbox"
365
+ />
366
+ `;
367
+
368
+ exports[`CheckboxCore type:disabled state:hovered checked:true 1`] = `
369
+ Array [
370
+ <input
371
+ aria-invalid={false}
372
+ checked={true}
373
+ className=""
374
+ disabled={true}
375
+ onChange={[Function]}
376
+ style={
377
+ Object {
378
+ "MozAppearance": "none",
379
+ "WebkitAppearance": "none",
380
+ "appearance": "none",
381
+ "backgroundColor": "#f7f8fa",
382
+ "borderColor": "rgba(33,36,44,0.16)",
383
+ "borderRadius": 3,
384
+ "borderStyle": "solid",
385
+ "borderWidth": 1,
386
+ "boxSizing": "border-box",
387
+ "cursor": "auto",
388
+ "height": 16,
389
+ "margin": 0,
390
+ "minHeight": 16,
391
+ "minWidth": 16,
392
+ "outline": "none",
393
+ "width": 16,
394
+ }
395
+ }
396
+ type="checkbox"
397
+ />,
398
+ <svg
399
+ className=""
400
+ height={16}
401
+ style={
402
+ Object {
403
+ "display": "inline-block",
404
+ "flexGrow": 0,
405
+ "flexShrink": 0,
406
+ "pointerEvents": "none",
407
+ "position": "absolute",
408
+ "verticalAlign": "text-bottom",
409
+ }
410
+ }
411
+ viewBox="0 0 16 16"
412
+ width={16}
413
+ >
414
+ <path
415
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
416
+ fill="rgba(33,36,44,0.32)"
417
+ />
418
+ </svg>,
419
+ ]
420
+ `;
421
+
422
+ exports[`CheckboxCore type:disabled state:pressed checked:false 1`] = `
423
+ <input
424
+ aria-invalid={false}
425
+ checked={false}
426
+ className=""
427
+ disabled={true}
428
+ onChange={[Function]}
429
+ style={
430
+ Object {
431
+ "MozAppearance": "none",
432
+ "WebkitAppearance": "none",
433
+ "appearance": "none",
434
+ "backgroundColor": "#f7f8fa",
435
+ "borderColor": "rgba(33,36,44,0.16)",
436
+ "borderRadius": 3,
437
+ "borderStyle": "solid",
438
+ "borderWidth": 1,
439
+ "boxSizing": "border-box",
440
+ "cursor": "auto",
441
+ "height": 16,
442
+ "margin": 0,
443
+ "minHeight": 16,
444
+ "minWidth": 16,
445
+ "outline": "none",
446
+ "width": 16,
447
+ }
448
+ }
449
+ type="checkbox"
450
+ />
451
+ `;
452
+
453
+ exports[`CheckboxCore type:disabled state:pressed checked:true 1`] = `
454
+ Array [
455
+ <input
456
+ aria-invalid={false}
457
+ checked={true}
458
+ className=""
459
+ disabled={true}
460
+ onChange={[Function]}
461
+ style={
462
+ Object {
463
+ "MozAppearance": "none",
464
+ "WebkitAppearance": "none",
465
+ "appearance": "none",
466
+ "backgroundColor": "#f7f8fa",
467
+ "borderColor": "rgba(33,36,44,0.16)",
468
+ "borderRadius": 3,
469
+ "borderStyle": "solid",
470
+ "borderWidth": 1,
471
+ "boxSizing": "border-box",
472
+ "cursor": "auto",
473
+ "height": 16,
474
+ "margin": 0,
475
+ "minHeight": 16,
476
+ "minWidth": 16,
477
+ "outline": "none",
478
+ "width": 16,
479
+ }
480
+ }
481
+ type="checkbox"
482
+ />,
483
+ <svg
484
+ className=""
485
+ height={16}
486
+ style={
487
+ Object {
488
+ "display": "inline-block",
489
+ "flexGrow": 0,
490
+ "flexShrink": 0,
491
+ "pointerEvents": "none",
492
+ "position": "absolute",
493
+ "verticalAlign": "text-bottom",
494
+ }
495
+ }
496
+ viewBox="0 0 16 16"
497
+ width={16}
498
+ >
499
+ <path
500
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
501
+ fill="rgba(33,36,44,0.32)"
502
+ />
503
+ </svg>,
504
+ ]
505
+ `;
506
+
507
+ exports[`CheckboxCore type:error state:default checked:false 1`] = `
508
+ <input
509
+ aria-invalid={true}
510
+ checked={false}
511
+ className=""
512
+ disabled={false}
513
+ onChange={[Function]}
514
+ style={
515
+ Object {
516
+ "MozAppearance": "none",
517
+ "WebkitAppearance": "none",
518
+ "appearance": "none",
519
+ "backgroundColor": "#fceeec",
520
+ "borderColor": "#d92916",
521
+ "borderRadius": 3,
522
+ "borderStyle": "solid",
523
+ "borderWidth": 1,
524
+ "boxSizing": "border-box",
525
+ "height": 16,
526
+ "margin": 0,
527
+ "minHeight": 16,
528
+ "minWidth": 16,
529
+ "outline": "none",
530
+ "width": 16,
531
+ }
532
+ }
533
+ type="checkbox"
534
+ />
535
+ `;
536
+
537
+ exports[`CheckboxCore type:error state:default checked:true 1`] = `
538
+ Array [
539
+ <input
540
+ aria-invalid={true}
541
+ checked={true}
542
+ className=""
543
+ disabled={false}
544
+ onChange={[Function]}
545
+ style={
546
+ Object {
547
+ "MozAppearance": "none",
548
+ "WebkitAppearance": "none",
549
+ "appearance": "none",
550
+ "backgroundColor": "#d92916",
551
+ "borderRadius": 3,
552
+ "borderStyle": "solid",
553
+ "borderWidth": 0,
554
+ "boxSizing": "border-box",
555
+ "height": 16,
556
+ "margin": 0,
557
+ "minHeight": 16,
558
+ "minWidth": 16,
559
+ "outline": "none",
560
+ "width": 16,
561
+ }
562
+ }
563
+ type="checkbox"
564
+ />,
565
+ <svg
566
+ className=""
567
+ height={16}
568
+ style={
569
+ Object {
570
+ "display": "inline-block",
571
+ "flexGrow": 0,
572
+ "flexShrink": 0,
573
+ "pointerEvents": "none",
574
+ "position": "absolute",
575
+ "verticalAlign": "text-bottom",
576
+ }
577
+ }
578
+ viewBox="0 0 16 16"
579
+ width={16}
580
+ >
581
+ <path
582
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
583
+ fill="#ffffff"
584
+ />
585
+ </svg>,
586
+ ]
587
+ `;
588
+
589
+ exports[`CheckboxCore type:error state:hovered checked:false 1`] = `
590
+ <input
591
+ aria-invalid={true}
592
+ checked={false}
593
+ className=""
594
+ disabled={false}
595
+ onChange={[Function]}
596
+ style={
597
+ Object {
598
+ "MozAppearance": "none",
599
+ "WebkitAppearance": "none",
600
+ "appearance": "none",
601
+ "backgroundColor": "#fceeec",
602
+ "borderColor": "#d92916",
603
+ "borderRadius": 3,
604
+ "borderStyle": "solid",
605
+ "borderWidth": 2,
606
+ "boxSizing": "border-box",
607
+ "height": 16,
608
+ "margin": 0,
609
+ "minHeight": 16,
610
+ "minWidth": 16,
611
+ "outline": "none",
612
+ "width": 16,
613
+ }
614
+ }
615
+ type="checkbox"
616
+ />
617
+ `;
618
+
619
+ exports[`CheckboxCore type:error state:hovered checked:true 1`] = `
620
+ Array [
621
+ <input
622
+ aria-invalid={true}
623
+ checked={true}
624
+ className=""
625
+ disabled={false}
626
+ onChange={[Function]}
627
+ style={
628
+ Object {
629
+ "MozAppearance": "none",
630
+ "WebkitAppearance": "none",
631
+ "appearance": "none",
632
+ "backgroundColor": "#d92916",
633
+ "borderRadius": 3,
634
+ "borderStyle": "solid",
635
+ "borderWidth": 0,
636
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
637
+ "boxSizing": "border-box",
638
+ "height": 16,
639
+ "margin": 0,
640
+ "minHeight": 16,
641
+ "minWidth": 16,
642
+ "outline": "none",
643
+ "width": 16,
644
+ }
645
+ }
646
+ type="checkbox"
647
+ />,
648
+ <svg
649
+ className=""
650
+ height={16}
651
+ style={
652
+ Object {
653
+ "display": "inline-block",
654
+ "flexGrow": 0,
655
+ "flexShrink": 0,
656
+ "pointerEvents": "none",
657
+ "position": "absolute",
658
+ "verticalAlign": "text-bottom",
659
+ }
660
+ }
661
+ viewBox="0 0 16 16"
662
+ width={16}
663
+ >
664
+ <path
665
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
666
+ fill="#ffffff"
667
+ />
668
+ </svg>,
669
+ ]
670
+ `;
671
+
672
+ exports[`CheckboxCore type:error state:pressed checked:false 1`] = `
673
+ <input
674
+ aria-invalid={true}
675
+ checked={false}
676
+ className=""
677
+ disabled={false}
678
+ onChange={[Function]}
679
+ style={
680
+ Object {
681
+ "MozAppearance": "none",
682
+ "WebkitAppearance": "none",
683
+ "appearance": "none",
684
+ "backgroundColor": "#fceeec",
685
+ "borderColor": "#9e271d",
686
+ "borderRadius": 3,
687
+ "borderStyle": "solid",
688
+ "borderWidth": 2,
689
+ "boxSizing": "border-box",
690
+ "height": 16,
691
+ "margin": 0,
692
+ "minHeight": 16,
693
+ "minWidth": 16,
694
+ "outline": "none",
695
+ "width": 16,
696
+ }
697
+ }
698
+ type="checkbox"
699
+ />
700
+ `;
701
+
702
+ exports[`CheckboxCore type:error state:pressed checked:true 1`] = `
703
+ Array [
704
+ <input
705
+ aria-invalid={true}
706
+ checked={true}
707
+ className=""
708
+ disabled={false}
709
+ onChange={[Function]}
710
+ style={
711
+ Object {
712
+ "MozAppearance": "none",
713
+ "WebkitAppearance": "none",
714
+ "appearance": "none",
715
+ "background": "#9e271d",
716
+ "backgroundColor": "#d92916",
717
+ "borderRadius": 3,
718
+ "borderStyle": "solid",
719
+ "borderWidth": 0,
720
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #9e271d",
721
+ "boxSizing": "border-box",
722
+ "height": 16,
723
+ "margin": 0,
724
+ "minHeight": 16,
725
+ "minWidth": 16,
726
+ "outline": "none",
727
+ "width": 16,
728
+ }
729
+ }
730
+ type="checkbox"
731
+ />,
732
+ <svg
733
+ className=""
734
+ height={16}
735
+ style={
736
+ Object {
737
+ "display": "inline-block",
738
+ "flexGrow": 0,
739
+ "flexShrink": 0,
740
+ "pointerEvents": "none",
741
+ "position": "absolute",
742
+ "verticalAlign": "text-bottom",
743
+ }
744
+ }
745
+ viewBox="0 0 16 16"
746
+ width={16}
747
+ >
748
+ <path
749
+ d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
750
+ fill="#ffffff"
751
+ />
752
+ </svg>,
753
+ ]
754
+ `;
755
+
756
+ exports[`RadioCore type:default state:default checked:false 1`] = `
757
+ <input
758
+ aria-invalid={false}
759
+ checked={false}
760
+ className=""
761
+ disabled={false}
762
+ onChange={[Function]}
763
+ style={
764
+ Object {
765
+ "MozAppearance": "none",
766
+ "WebkitAppearance": "none",
767
+ "appearance": "none",
768
+ "backgroundColor": "#ffffff",
769
+ "borderColor": "rgba(33,36,44,0.50)",
770
+ "borderRadius": "50%",
771
+ "borderStyle": "solid",
772
+ "borderWidth": 1,
773
+ "boxSizing": "border-box",
774
+ "height": 16,
775
+ "margin": 0,
776
+ "minHeight": 16,
777
+ "minWidth": 16,
778
+ "outline": "none",
779
+ "width": 16,
780
+ }
781
+ }
782
+ type="radio"
783
+ />
784
+ `;
785
+
786
+ exports[`RadioCore type:default state:default checked:true 1`] = `
787
+ <input
788
+ aria-invalid={false}
789
+ checked={true}
790
+ className=""
791
+ disabled={false}
792
+ onChange={[Function]}
793
+ style={
794
+ Object {
795
+ "MozAppearance": "none",
796
+ "WebkitAppearance": "none",
797
+ "appearance": "none",
798
+ "backgroundColor": "#ffffff",
799
+ "borderColor": "#1865f2",
800
+ "borderRadius": "50%",
801
+ "borderStyle": "solid",
802
+ "borderWidth": 4,
803
+ "boxSizing": "border-box",
804
+ "height": 16,
805
+ "margin": 0,
806
+ "minHeight": 16,
807
+ "minWidth": 16,
808
+ "outline": "none",
809
+ "width": 16,
810
+ }
811
+ }
812
+ type="radio"
813
+ />
814
+ `;
815
+
816
+ exports[`RadioCore type:default state:hovered checked:false 1`] = `
817
+ <input
818
+ aria-invalid={false}
819
+ checked={false}
820
+ className=""
821
+ disabled={false}
822
+ onChange={[Function]}
823
+ style={
824
+ Object {
825
+ "MozAppearance": "none",
826
+ "WebkitAppearance": "none",
827
+ "appearance": "none",
828
+ "backgroundColor": "#ffffff",
829
+ "borderColor": "#1865f2",
830
+ "borderRadius": "50%",
831
+ "borderStyle": "solid",
832
+ "borderWidth": 2,
833
+ "boxSizing": "border-box",
834
+ "height": 16,
835
+ "margin": 0,
836
+ "minHeight": 16,
837
+ "minWidth": 16,
838
+ "outline": "none",
839
+ "width": 16,
840
+ }
841
+ }
842
+ type="radio"
843
+ />
844
+ `;
845
+
846
+ exports[`RadioCore type:default state:hovered checked:true 1`] = `
847
+ <input
848
+ aria-invalid={false}
849
+ checked={true}
850
+ className=""
851
+ disabled={false}
852
+ onChange={[Function]}
853
+ style={
854
+ Object {
855
+ "MozAppearance": "none",
856
+ "WebkitAppearance": "none",
857
+ "appearance": "none",
858
+ "backgroundColor": "#ffffff",
859
+ "borderColor": "#1865f2",
860
+ "borderRadius": "50%",
861
+ "borderStyle": "solid",
862
+ "borderWidth": 4,
863
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
864
+ "boxSizing": "border-box",
865
+ "height": 16,
866
+ "margin": 0,
867
+ "minHeight": 16,
868
+ "minWidth": 16,
869
+ "outline": "none",
870
+ "width": 16,
871
+ }
872
+ }
873
+ type="radio"
874
+ />
875
+ `;
876
+
877
+ exports[`RadioCore type:default state:pressed checked:false 1`] = `
878
+ <input
879
+ aria-invalid={false}
880
+ checked={false}
881
+ className=""
882
+ disabled={false}
883
+ onChange={[Function]}
884
+ style={
885
+ Object {
886
+ "MozAppearance": "none",
887
+ "WebkitAppearance": "none",
888
+ "appearance": "none",
889
+ "backgroundColor": "#dae6fd",
890
+ "borderColor": "#1865f2",
891
+ "borderRadius": "50%",
892
+ "borderStyle": "solid",
893
+ "borderWidth": 2,
894
+ "boxSizing": "border-box",
895
+ "height": 16,
896
+ "margin": 0,
897
+ "minHeight": 16,
898
+ "minWidth": 16,
899
+ "outline": "none",
900
+ "width": 16,
901
+ }
902
+ }
903
+ type="radio"
904
+ />
905
+ `;
906
+
907
+ exports[`RadioCore type:default state:pressed checked:true 1`] = `
908
+ <input
909
+ aria-invalid={false}
910
+ checked={true}
911
+ className=""
912
+ disabled={false}
913
+ onChange={[Function]}
914
+ style={
915
+ Object {
916
+ "MozAppearance": "none",
917
+ "WebkitAppearance": "none",
918
+ "appearance": "none",
919
+ "backgroundColor": "#ffffff",
920
+ "borderColor": "#1b50b3",
921
+ "borderRadius": "50%",
922
+ "borderStyle": "solid",
923
+ "borderWidth": 4,
924
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1b50b3",
925
+ "boxSizing": "border-box",
926
+ "height": 16,
927
+ "margin": 0,
928
+ "minHeight": 16,
929
+ "minWidth": 16,
930
+ "outline": "none",
931
+ "width": 16,
932
+ }
933
+ }
934
+ type="radio"
935
+ />
936
+ `;
937
+
938
+ exports[`RadioCore type:disabled state:default checked:false 1`] = `
939
+ <input
940
+ aria-invalid={false}
941
+ checked={false}
942
+ className=""
943
+ disabled={true}
944
+ onChange={[Function]}
945
+ style={
946
+ Object {
947
+ "MozAppearance": "none",
948
+ "WebkitAppearance": "none",
949
+ "appearance": "none",
950
+ "backgroundColor": "#f7f8fa",
951
+ "borderColor": "rgba(33,36,44,0.16)",
952
+ "borderRadius": "50%",
953
+ "borderStyle": "solid",
954
+ "borderWidth": 1,
955
+ "boxSizing": "border-box",
956
+ "cursor": "auto",
957
+ "height": 16,
958
+ "margin": 0,
959
+ "minHeight": 16,
960
+ "minWidth": 16,
961
+ "outline": "none",
962
+ "width": 16,
963
+ }
964
+ }
965
+ type="radio"
966
+ />
967
+ `;
968
+
969
+ exports[`RadioCore type:disabled state:default checked:true 1`] = `
970
+ Array [
971
+ <input
972
+ aria-invalid={false}
973
+ checked={true}
974
+ className=""
975
+ disabled={true}
976
+ onChange={[Function]}
977
+ style={
978
+ Object {
979
+ "MozAppearance": "none",
980
+ "WebkitAppearance": "none",
981
+ "appearance": "none",
982
+ "backgroundColor": "#f7f8fa",
983
+ "borderColor": "rgba(33,36,44,0.16)",
984
+ "borderRadius": "50%",
985
+ "borderStyle": "solid",
986
+ "borderWidth": 1,
987
+ "boxSizing": "border-box",
988
+ "cursor": "auto",
989
+ "height": 16,
990
+ "margin": 0,
991
+ "minHeight": 16,
992
+ "minWidth": 16,
993
+ "outline": "none",
994
+ "width": 16,
995
+ }
996
+ }
997
+ type="radio"
998
+ />,
999
+ <span
1000
+ style={
1001
+ Object {
1002
+ "backgroundColor": "rgba(33,36,44,0.32)",
1003
+ "borderRadius": "50%",
1004
+ "height": 8,
1005
+ "left": 4,
1006
+ "position": "absolute",
1007
+ "top": 4,
1008
+ "width": 8,
1009
+ }
1010
+ }
1011
+ />,
1012
+ ]
1013
+ `;
1014
+
1015
+ exports[`RadioCore type:disabled state:hovered checked:false 1`] = `
1016
+ <input
1017
+ aria-invalid={false}
1018
+ checked={false}
1019
+ className=""
1020
+ disabled={true}
1021
+ onChange={[Function]}
1022
+ style={
1023
+ Object {
1024
+ "MozAppearance": "none",
1025
+ "WebkitAppearance": "none",
1026
+ "appearance": "none",
1027
+ "backgroundColor": "#f7f8fa",
1028
+ "borderColor": "rgba(33,36,44,0.16)",
1029
+ "borderRadius": "50%",
1030
+ "borderStyle": "solid",
1031
+ "borderWidth": 1,
1032
+ "boxSizing": "border-box",
1033
+ "cursor": "auto",
1034
+ "height": 16,
1035
+ "margin": 0,
1036
+ "minHeight": 16,
1037
+ "minWidth": 16,
1038
+ "outline": "none",
1039
+ "width": 16,
1040
+ }
1041
+ }
1042
+ type="radio"
1043
+ />
1044
+ `;
1045
+
1046
+ exports[`RadioCore type:disabled state:hovered checked:true 1`] = `
1047
+ Array [
1048
+ <input
1049
+ aria-invalid={false}
1050
+ checked={true}
1051
+ className=""
1052
+ disabled={true}
1053
+ onChange={[Function]}
1054
+ style={
1055
+ Object {
1056
+ "MozAppearance": "none",
1057
+ "WebkitAppearance": "none",
1058
+ "appearance": "none",
1059
+ "backgroundColor": "#f7f8fa",
1060
+ "borderColor": "rgba(33,36,44,0.16)",
1061
+ "borderRadius": "50%",
1062
+ "borderStyle": "solid",
1063
+ "borderWidth": 1,
1064
+ "boxSizing": "border-box",
1065
+ "cursor": "auto",
1066
+ "height": 16,
1067
+ "margin": 0,
1068
+ "minHeight": 16,
1069
+ "minWidth": 16,
1070
+ "outline": "none",
1071
+ "width": 16,
1072
+ }
1073
+ }
1074
+ type="radio"
1075
+ />,
1076
+ <span
1077
+ style={
1078
+ Object {
1079
+ "backgroundColor": "rgba(33,36,44,0.32)",
1080
+ "borderRadius": "50%",
1081
+ "height": 8,
1082
+ "left": 4,
1083
+ "position": "absolute",
1084
+ "top": 4,
1085
+ "width": 8,
1086
+ }
1087
+ }
1088
+ />,
1089
+ ]
1090
+ `;
1091
+
1092
+ exports[`RadioCore type:disabled state:pressed checked:false 1`] = `
1093
+ <input
1094
+ aria-invalid={false}
1095
+ checked={false}
1096
+ className=""
1097
+ disabled={true}
1098
+ onChange={[Function]}
1099
+ style={
1100
+ Object {
1101
+ "MozAppearance": "none",
1102
+ "WebkitAppearance": "none",
1103
+ "appearance": "none",
1104
+ "backgroundColor": "#f7f8fa",
1105
+ "borderColor": "rgba(33,36,44,0.16)",
1106
+ "borderRadius": "50%",
1107
+ "borderStyle": "solid",
1108
+ "borderWidth": 1,
1109
+ "boxSizing": "border-box",
1110
+ "cursor": "auto",
1111
+ "height": 16,
1112
+ "margin": 0,
1113
+ "minHeight": 16,
1114
+ "minWidth": 16,
1115
+ "outline": "none",
1116
+ "width": 16,
1117
+ }
1118
+ }
1119
+ type="radio"
1120
+ />
1121
+ `;
1122
+
1123
+ exports[`RadioCore type:disabled state:pressed checked:true 1`] = `
1124
+ Array [
1125
+ <input
1126
+ aria-invalid={false}
1127
+ checked={true}
1128
+ className=""
1129
+ disabled={true}
1130
+ onChange={[Function]}
1131
+ style={
1132
+ Object {
1133
+ "MozAppearance": "none",
1134
+ "WebkitAppearance": "none",
1135
+ "appearance": "none",
1136
+ "backgroundColor": "#f7f8fa",
1137
+ "borderColor": "rgba(33,36,44,0.16)",
1138
+ "borderRadius": "50%",
1139
+ "borderStyle": "solid",
1140
+ "borderWidth": 1,
1141
+ "boxSizing": "border-box",
1142
+ "cursor": "auto",
1143
+ "height": 16,
1144
+ "margin": 0,
1145
+ "minHeight": 16,
1146
+ "minWidth": 16,
1147
+ "outline": "none",
1148
+ "width": 16,
1149
+ }
1150
+ }
1151
+ type="radio"
1152
+ />,
1153
+ <span
1154
+ style={
1155
+ Object {
1156
+ "backgroundColor": "rgba(33,36,44,0.32)",
1157
+ "borderRadius": "50%",
1158
+ "height": 8,
1159
+ "left": 4,
1160
+ "position": "absolute",
1161
+ "top": 4,
1162
+ "width": 8,
1163
+ }
1164
+ }
1165
+ />,
1166
+ ]
1167
+ `;
1168
+
1169
+ exports[`RadioCore type:error state:default checked:false 1`] = `
1170
+ <input
1171
+ aria-invalid={true}
1172
+ checked={false}
1173
+ className=""
1174
+ disabled={false}
1175
+ onChange={[Function]}
1176
+ style={
1177
+ Object {
1178
+ "MozAppearance": "none",
1179
+ "WebkitAppearance": "none",
1180
+ "appearance": "none",
1181
+ "backgroundColor": "#fceeec",
1182
+ "borderColor": "#d92916",
1183
+ "borderRadius": "50%",
1184
+ "borderStyle": "solid",
1185
+ "borderWidth": 1,
1186
+ "boxSizing": "border-box",
1187
+ "height": 16,
1188
+ "margin": 0,
1189
+ "minHeight": 16,
1190
+ "minWidth": 16,
1191
+ "outline": "none",
1192
+ "width": 16,
1193
+ }
1194
+ }
1195
+ type="radio"
1196
+ />
1197
+ `;
1198
+
1199
+ exports[`RadioCore type:error state:default checked:true 1`] = `
1200
+ <input
1201
+ aria-invalid={true}
1202
+ checked={true}
1203
+ className=""
1204
+ disabled={false}
1205
+ onChange={[Function]}
1206
+ style={
1207
+ Object {
1208
+ "MozAppearance": "none",
1209
+ "WebkitAppearance": "none",
1210
+ "appearance": "none",
1211
+ "backgroundColor": "#ffffff",
1212
+ "borderColor": "#d92916",
1213
+ "borderRadius": "50%",
1214
+ "borderStyle": "solid",
1215
+ "borderWidth": 4,
1216
+ "boxSizing": "border-box",
1217
+ "height": 16,
1218
+ "margin": 0,
1219
+ "minHeight": 16,
1220
+ "minWidth": 16,
1221
+ "outline": "none",
1222
+ "width": 16,
1223
+ }
1224
+ }
1225
+ type="radio"
1226
+ />
1227
+ `;
1228
+
1229
+ exports[`RadioCore type:error state:hovered checked:false 1`] = `
1230
+ <input
1231
+ aria-invalid={true}
1232
+ checked={false}
1233
+ className=""
1234
+ disabled={false}
1235
+ onChange={[Function]}
1236
+ style={
1237
+ Object {
1238
+ "MozAppearance": "none",
1239
+ "WebkitAppearance": "none",
1240
+ "appearance": "none",
1241
+ "backgroundColor": "#fceeec",
1242
+ "borderColor": "#d92916",
1243
+ "borderRadius": "50%",
1244
+ "borderStyle": "solid",
1245
+ "borderWidth": 2,
1246
+ "boxSizing": "border-box",
1247
+ "height": 16,
1248
+ "margin": 0,
1249
+ "minHeight": 16,
1250
+ "minWidth": 16,
1251
+ "outline": "none",
1252
+ "width": 16,
1253
+ }
1254
+ }
1255
+ type="radio"
1256
+ />
1257
+ `;
1258
+
1259
+ exports[`RadioCore type:error state:hovered checked:true 1`] = `
1260
+ <input
1261
+ aria-invalid={true}
1262
+ checked={true}
1263
+ className=""
1264
+ disabled={false}
1265
+ onChange={[Function]}
1266
+ style={
1267
+ Object {
1268
+ "MozAppearance": "none",
1269
+ "WebkitAppearance": "none",
1270
+ "appearance": "none",
1271
+ "backgroundColor": "#ffffff",
1272
+ "borderColor": "#d92916",
1273
+ "borderRadius": "50%",
1274
+ "borderStyle": "solid",
1275
+ "borderWidth": 4,
1276
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
1277
+ "boxSizing": "border-box",
1278
+ "height": 16,
1279
+ "margin": 0,
1280
+ "minHeight": 16,
1281
+ "minWidth": 16,
1282
+ "outline": "none",
1283
+ "width": 16,
1284
+ }
1285
+ }
1286
+ type="radio"
1287
+ />
1288
+ `;
1289
+
1290
+ exports[`RadioCore type:error state:pressed checked:false 1`] = `
1291
+ <input
1292
+ aria-invalid={true}
1293
+ checked={false}
1294
+ className=""
1295
+ disabled={false}
1296
+ onChange={[Function]}
1297
+ style={
1298
+ Object {
1299
+ "MozAppearance": "none",
1300
+ "WebkitAppearance": "none",
1301
+ "appearance": "none",
1302
+ "backgroundColor": "#fceeec",
1303
+ "borderColor": "#9e271d",
1304
+ "borderRadius": "50%",
1305
+ "borderStyle": "solid",
1306
+ "borderWidth": 2,
1307
+ "boxSizing": "border-box",
1308
+ "height": 16,
1309
+ "margin": 0,
1310
+ "minHeight": 16,
1311
+ "minWidth": 16,
1312
+ "outline": "none",
1313
+ "width": 16,
1314
+ }
1315
+ }
1316
+ type="radio"
1317
+ />
1318
+ `;
1319
+
1320
+ exports[`RadioCore type:error state:pressed checked:true 1`] = `
1321
+ <input
1322
+ aria-invalid={true}
1323
+ checked={true}
1324
+ className=""
1325
+ disabled={false}
1326
+ onChange={[Function]}
1327
+ style={
1328
+ Object {
1329
+ "MozAppearance": "none",
1330
+ "WebkitAppearance": "none",
1331
+ "appearance": "none",
1332
+ "backgroundColor": "#ffffff",
1333
+ "borderColor": "#9e271d",
1334
+ "borderRadius": "50%",
1335
+ "borderStyle": "solid",
1336
+ "borderWidth": 4,
1337
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #9e271d",
1338
+ "boxSizing": "border-box",
1339
+ "height": 16,
1340
+ "margin": 0,
1341
+ "minHeight": 16,
1342
+ "minWidth": 16,
1343
+ "outline": "none",
1344
+ "width": 16,
1345
+ }
1346
+ }
1347
+ type="radio"
1348
+ />
1349
+ `;