@khanacademy/wonder-blocks-form 4.0.8 → 4.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/components/checkbox-core.d.ts +1 -8
  3. package/dist/components/checkbox-core.js.flow +4 -10
  4. package/dist/components/choice-internal.d.ts +1 -2
  5. package/dist/components/choice-internal.js.flow +1 -2
  6. package/dist/components/radio-core.d.ts +1 -8
  7. package/dist/components/radio-core.js.flow +4 -10
  8. package/dist/es/index.js +84 -85
  9. package/dist/index.js +83 -84
  10. package/dist/util/types.d.ts +2 -0
  11. package/dist/util/types.js.flow +5 -0
  12. package/package.json +6 -6
  13. package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap +168 -958
  14. package/src/__tests__/custom-snapshot.test.tsx +28 -43
  15. package/src/components/__tests__/checkbox.test.js +84 -0
  16. package/src/components/__tests__/labeled-text-field.test.tsx +4 -1
  17. package/src/components/checkbox-core.tsx +37 -34
  18. package/src/components/checkbox-group.tsx +2 -2
  19. package/src/components/choice-internal.tsx +31 -39
  20. package/src/components/radio-core.tsx +37 -34
  21. package/src/components/radio-group.tsx +2 -2
  22. package/src/components/text-field.tsx +13 -8
  23. package/src/util/types.ts +2 -0
  24. package/tsconfig.tsbuildinfo +1 -1
package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap CHANGED
@@ -1,14 +1,30 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`CheckboxCore type:default state:default checked:false 1`] = `
3
+ exports[`CheckboxCore type:default checked:false 1`] = `
4
4
  <input
5
5
  aria-invalid={false}
6
6
  checked={false}
7
7
  className=""
8
8
  disabled={false}
9
9
  onChange={[Function]}
10
+ onClick={[Function]}
10
11
  style={
11
12
  {
13
+ ":active": {
14
+ "backgroundColor": "#dae6fd",
15
+ "borderColor": "#1865f2",
16
+ "borderWidth": 2,
17
+ },
18
+ ":focusVisible": {
19
+ "backgroundColor": "#ffffff",
20
+ "borderColor": "#1865f2",
21
+ "borderWidth": 2,
22
+ },
23
+ ":hover": {
24
+ "backgroundColor": "#ffffff",
25
+ "borderColor": "#1865f2",
26
+ "borderWidth": 2,
27
+ },
12
28
  "MozAppearance": "none",
13
29
  "WebkitAppearance": "none",
14
30
  "appearance": "none",
@@ -30,7 +46,7 @@ exports[`CheckboxCore type:default state:default checked:false 1`] = `
30
46
  />
31
47
  `;
32
48
 
33
- exports[`CheckboxCore type:default state:default checked:true 1`] = `
49
+ exports[`CheckboxCore type:default checked:true 1`] = `
34
50
  [
35
51
  <input
36
52
  aria-invalid={false}
@@ -38,8 +54,19 @@ exports[`CheckboxCore type:default state:default checked:true 1`] = `
38
54
  className=""
39
55
  disabled={false}
40
56
  onChange={[Function]}
57
+ onClick={[Function]}
41
58
  style={
42
59
  {
60
+ ":active": {
61
+ "background": "#1b50b3",
62
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1b50b3",
63
+ },
64
+ ":focusVisible": {
65
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
66
+ },
67
+ ":hover": {
68
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
69
+ },
43
70
  "MozAppearance": "none",
44
71
  "WebkitAppearance": "none",
45
72
  "appearance": "none",
@@ -82,24 +109,26 @@ exports[`CheckboxCore type:default state:default checked:true 1`] = `
82
109
  ]
83
110
  `;
84
111
 
85
- exports[`CheckboxCore type:default state:hovered checked:false 1`] = `
112
+ exports[`CheckboxCore type:disabled checked:false 1`] = `
86
113
  <input
87
114
  aria-invalid={false}
88
115
  checked={false}
89
116
  className=""
90
- disabled={false}
117
+ disabled={true}
91
118
  onChange={[Function]}
119
+ onClick={[Function]}
92
120
  style={
93
121
  {
94
122
  "MozAppearance": "none",
95
123
  "WebkitAppearance": "none",
96
124
  "appearance": "none",
97
- "backgroundColor": "#ffffff",
98
- "borderColor": "#1865f2",
125
+ "backgroundColor": "#f7f8fa",
126
+ "borderColor": "rgba(33,36,44,0.16)",
99
127
  "borderRadius": 3,
100
128
  "borderStyle": "solid",
101
- "borderWidth": 2,
129
+ "borderWidth": 1,
102
130
  "boxSizing": "border-box",
131
+ "cursor": "auto",
103
132
  "height": 16,
104
133
  "margin": 0,
105
134
  "minHeight": 16,
@@ -112,25 +141,27 @@ exports[`CheckboxCore type:default state:hovered checked:false 1`] = `
112
141
  />
113
142
  `;
114
143
 
115
- exports[`CheckboxCore type:default state:hovered checked:true 1`] = `
144
+ exports[`CheckboxCore type:disabled checked:true 1`] = `
116
145
  [
117
146
  <input
118
147
  aria-invalid={false}
119
148
  checked={true}
120
149
  className=""
121
- disabled={false}
150
+ disabled={true}
122
151
  onChange={[Function]}
152
+ onClick={[Function]}
123
153
  style={
124
154
  {
125
155
  "MozAppearance": "none",
126
156
  "WebkitAppearance": "none",
127
157
  "appearance": "none",
128
- "backgroundColor": "#1865f2",
158
+ "backgroundColor": "#f7f8fa",
159
+ "borderColor": "rgba(33,36,44,0.16)",
129
160
  "borderRadius": 3,
130
161
  "borderStyle": "solid",
131
- "borderWidth": 0,
132
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
162
+ "borderWidth": 1,
133
163
  "boxSizing": "border-box",
164
+ "cursor": "auto",
134
165
  "height": 16,
135
166
  "margin": 0,
136
167
  "minHeight": 16,
@@ -159,29 +190,45 @@ exports[`CheckboxCore type:default state:hovered checked:true 1`] = `
159
190
  >
160
191
  <path
161
192
  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"
193
+ fill="rgba(33,36,44,0.32)"
163
194
  />
164
195
  </svg>,
165
196
  ]
166
197
  `;
167
198
 
168
- exports[`CheckboxCore type:default state:pressed checked:false 1`] = `
199
+ exports[`CheckboxCore type:error checked:false 1`] = `
169
200
  <input
170
- aria-invalid={false}
201
+ aria-invalid={true}
171
202
  checked={false}
172
203
  className=""
173
204
  disabled={false}
174
205
  onChange={[Function]}
206
+ onClick={[Function]}
175
207
  style={
176
208
  {
209
+ ":active": {
210
+ "backgroundColor": "#fceeec",
211
+ "borderColor": "#9e271d",
212
+ "borderWidth": 2,
213
+ },
214
+ ":focusVisible": {
215
+ "backgroundColor": "#fceeec",
216
+ "borderColor": "#d92916",
217
+ "borderWidth": 2,
218
+ },
219
+ ":hover": {
220
+ "backgroundColor": "#fceeec",
221
+ "borderColor": "#d92916",
222
+ "borderWidth": 2,
223
+ },
177
224
  "MozAppearance": "none",
178
225
  "WebkitAppearance": "none",
179
226
  "appearance": "none",
180
- "backgroundColor": "#dae6fd",
181
- "borderColor": "#1865f2",
227
+ "backgroundColor": "#fceeec",
228
+ "borderColor": "#d92916",
182
229
  "borderRadius": 3,
183
230
  "borderStyle": "solid",
184
- "borderWidth": 2,
231
+ "borderWidth": 1,
185
232
  "boxSizing": "border-box",
186
233
  "height": 16,
187
234
  "margin": 0,
@@ -195,25 +242,34 @@ exports[`CheckboxCore type:default state:pressed checked:false 1`] = `
195
242
  />
196
243
  `;
197
244
 
198
- exports[`CheckboxCore type:default state:pressed checked:true 1`] = `
245
+ exports[`CheckboxCore type:error checked:true 1`] = `
199
246
  [
200
247
  <input
201
- aria-invalid={false}
248
+ aria-invalid={true}
202
249
  checked={true}
203
250
  className=""
204
251
  disabled={false}
205
252
  onChange={[Function]}
253
+ onClick={[Function]}
206
254
  style={
207
255
  {
256
+ ":active": {
257
+ "background": "#9e271d",
258
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #9e271d",
259
+ },
260
+ ":focusVisible": {
261
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
262
+ },
263
+ ":hover": {
264
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
265
+ },
208
266
  "MozAppearance": "none",
209
267
  "WebkitAppearance": "none",
210
268
  "appearance": "none",
211
- "background": "#1b50b3",
212
- "backgroundColor": "#1865f2",
269
+ "backgroundColor": "#d92916",
213
270
  "borderRadius": 3,
214
271
  "borderStyle": "solid",
215
272
  "borderWidth": 0,
216
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1b50b3",
217
273
  "boxSizing": "border-box",
218
274
  "height": 16,
219
275
  "margin": 0,
@@ -249,25 +305,40 @@ exports[`CheckboxCore type:default state:pressed checked:true 1`] = `
249
305
  ]
250
306
  `;
251
307
 
252
- exports[`CheckboxCore type:disabled state:default checked:false 1`] = `
308
+ exports[`RadioCore type:default checked:false 1`] = `
253
309
  <input
254
310
  aria-invalid={false}
255
311
  checked={false}
256
312
  className=""
257
- disabled={true}
313
+ disabled={false}
258
314
  onChange={[Function]}
315
+ onClick={[Function]}
259
316
  style={
260
317
  {
318
+ ":active": {
319
+ "backgroundColor": "#dae6fd",
320
+ "borderColor": "#1865f2",
321
+ "borderWidth": 2,
322
+ },
323
+ ":focusVisible": {
324
+ "backgroundColor": "#ffffff",
325
+ "borderColor": "#1865f2",
326
+ "borderWidth": 2,
327
+ },
328
+ ":hover": {
329
+ "backgroundColor": "#ffffff",
330
+ "borderColor": "#1865f2",
331
+ "borderWidth": 2,
332
+ },
261
333
  "MozAppearance": "none",
262
334
  "WebkitAppearance": "none",
263
335
  "appearance": "none",
264
- "backgroundColor": "#f7f8fa",
265
- "borderColor": "rgba(33,36,44,0.16)",
266
- "borderRadius": 3,
336
+ "backgroundColor": "#ffffff",
337
+ "borderColor": "rgba(33,36,44,0.50)",
338
+ "borderRadius": "50%",
267
339
  "borderStyle": "solid",
268
340
  "borderWidth": 1,
269
341
  "boxSizing": "border-box",
270
- "cursor": "auto",
271
342
  "height": 16,
272
343
  "margin": 0,
273
344
  "minHeight": 16,
@@ -276,83 +347,39 @@ exports[`CheckboxCore type:disabled state:default checked:false 1`] = `
276
347
  "width": 16,
277
348
  }
278
349
  }
279
- type="checkbox"
350
+ type="radio"
280
351
  />
281
352
  `;
282
353
 
283
- exports[`CheckboxCore type:disabled state:default checked:true 1`] = `
284
- [
285
- <input
286
- aria-invalid={false}
287
- checked={true}
288
- className=""
289
- disabled={true}
290
- onChange={[Function]}
291
- style={
292
- {
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
- {
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`] = `
354
+ exports[`RadioCore type:default checked:true 1`] = `
338
355
  <input
339
356
  aria-invalid={false}
340
- checked={false}
357
+ checked={true}
341
358
  className=""
342
- disabled={true}
359
+ disabled={false}
343
360
  onChange={[Function]}
361
+ onClick={[Function]}
344
362
  style={
345
363
  {
364
+ ":active": {
365
+ "borderColor": "#1b50b3",
366
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1b50b3",
367
+ },
368
+ ":focusVisible": {
369
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
370
+ },
371
+ ":hover": {
372
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
373
+ },
346
374
  "MozAppearance": "none",
347
375
  "WebkitAppearance": "none",
348
376
  "appearance": "none",
349
- "backgroundColor": "#f7f8fa",
350
- "borderColor": "rgba(33,36,44,0.16)",
351
- "borderRadius": 3,
377
+ "backgroundColor": "#ffffff",
378
+ "borderColor": "#1865f2",
379
+ "borderRadius": "50%",
352
380
  "borderStyle": "solid",
353
- "borderWidth": 1,
381
+ "borderWidth": 4,
354
382
  "boxSizing": "border-box",
355
- "cursor": "auto",
356
383
  "height": 16,
357
384
  "margin": 0,
358
385
  "minHeight": 16,
@@ -361,71 +388,18 @@ exports[`CheckboxCore type:disabled state:hovered checked:false 1`] = `
361
388
  "width": 16,
362
389
  }
363
390
  }
364
- type="checkbox"
391
+ type="radio"
365
392
  />
366
393
  `;
367
394
 
368
- exports[`CheckboxCore type:disabled state:hovered checked:true 1`] = `
369
- [
370
- <input
371
- aria-invalid={false}
372
- checked={true}
373
- className=""
374
- disabled={true}
375
- onChange={[Function]}
376
- style={
377
- {
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
- {
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`] = `
395
+ exports[`RadioCore type:disabled checked:false 1`] = `
423
396
  <input
424
397
  aria-invalid={false}
425
398
  checked={false}
426
399
  className=""
427
400
  disabled={true}
428
401
  onChange={[Function]}
402
+ onClick={[Function]}
429
403
  style={
430
404
  {
431
405
  "MozAppearance": "none",
@@ -433,7 +407,7 @@ exports[`CheckboxCore type:disabled state:pressed checked:false 1`] = `
433
407
  "appearance": "none",
434
408
  "backgroundColor": "#f7f8fa",
435
409
  "borderColor": "rgba(33,36,44,0.16)",
436
- "borderRadius": 3,
410
+ "borderRadius": "50%",
437
411
  "borderStyle": "solid",
438
412
  "borderWidth": 1,
439
413
  "boxSizing": "border-box",
@@ -446,11 +420,11 @@ exports[`CheckboxCore type:disabled state:pressed checked:false 1`] = `
446
420
  "width": 16,
447
421
  }
448
422
  }
449
- type="checkbox"
423
+ type="radio"
450
424
  />
451
425
  `;
452
426
 
453
- exports[`CheckboxCore type:disabled state:pressed checked:true 1`] = `
427
+ exports[`RadioCore type:disabled checked:true 1`] = `
454
428
  [
455
429
  <input
456
430
  aria-invalid={false}
@@ -458,6 +432,7 @@ exports[`CheckboxCore type:disabled state:pressed checked:true 1`] = `
458
432
  className=""
459
433
  disabled={true}
460
434
  onChange={[Function]}
435
+ onClick={[Function]}
461
436
  style={
462
437
  {
463
438
  "MozAppearance": "none",
@@ -465,7 +440,7 @@ exports[`CheckboxCore type:disabled state:pressed checked:true 1`] = `
465
440
  "appearance": "none",
466
441
  "backgroundColor": "#f7f8fa",
467
442
  "borderColor": "rgba(33,36,44,0.16)",
468
- "borderRadius": 3,
443
+ "borderRadius": "50%",
469
444
  "borderStyle": "solid",
470
445
  "borderWidth": 1,
471
446
  "boxSizing": "border-box",
@@ -478,47 +453,55 @@ exports[`CheckboxCore type:disabled state:pressed checked:true 1`] = `
478
453
  "width": 16,
479
454
  }
480
455
  }
481
- type="checkbox"
456
+ type="radio"
482
457
  />,
483
- <svg
484
- className=""
485
- height={16}
458
+ <span
486
459
  style={
487
460
  {
488
- "display": "inline-block",
489
- "flexGrow": 0,
490
- "flexShrink": 0,
491
- "pointerEvents": "none",
461
+ "backgroundColor": "rgba(33,36,44,0.32)",
462
+ "borderRadius": "50%",
463
+ "height": 8,
464
+ "left": 4,
492
465
  "position": "absolute",
493
- "verticalAlign": "text-bottom",
466
+ "top": 4,
467
+ "width": 8,
494
468
  }
495
469
  }
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>,
470
+ />,
504
471
  ]
505
472
  `;
506
473
 
507
- exports[`CheckboxCore type:error state:default checked:false 1`] = `
474
+ exports[`RadioCore type:error checked:false 1`] = `
508
475
  <input
509
476
  aria-invalid={true}
510
477
  checked={false}
511
478
  className=""
512
479
  disabled={false}
513
480
  onChange={[Function]}
481
+ onClick={[Function]}
514
482
  style={
515
483
  {
484
+ ":active": {
485
+ "backgroundColor": "#fceeec",
486
+ "borderColor": "#9e271d",
487
+ "borderWidth": 2,
488
+ },
489
+ ":focusVisible": {
490
+ "backgroundColor": "#fceeec",
491
+ "borderColor": "#d92916",
492
+ "borderWidth": 2,
493
+ },
494
+ ":hover": {
495
+ "backgroundColor": "#fceeec",
496
+ "borderColor": "#d92916",
497
+ "borderWidth": 2,
498
+ },
516
499
  "MozAppearance": "none",
517
500
  "WebkitAppearance": "none",
518
501
  "appearance": "none",
519
502
  "backgroundColor": "#fceeec",
520
503
  "borderColor": "#d92916",
521
- "borderRadius": 3,
504
+ "borderRadius": "50%",
522
505
  "borderStyle": "solid",
523
506
  "borderWidth": 1,
524
507
  "boxSizing": "border-box",
@@ -530,741 +513,30 @@ exports[`CheckboxCore type:error state:default checked:false 1`] = `
530
513
  "width": 16,
531
514
  }
532
515
  }
533
- type="checkbox"
516
+ type="radio"
534
517
  />
535
518
  `;
536
519
 
537
- exports[`CheckboxCore type:error state:default checked:true 1`] = `
538
- [
539
- <input
540
- aria-invalid={true}
541
- checked={true}
542
- className=""
543
- disabled={false}
544
- onChange={[Function]}
545
- style={
546
- {
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
- {
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`] = `
520
+ exports[`RadioCore type:error checked:true 1`] = `
590
521
  <input
591
522
  aria-invalid={true}
592
- checked={false}
593
- className=""
594
- disabled={false}
595
- onChange={[Function]}
596
- style={
597
- {
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
- [
621
- <input
622
- aria-invalid={true}
623
- checked={true}
624
- className=""
625
- disabled={false}
626
- onChange={[Function]}
627
- style={
628
- {
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
- {
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
- {
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
- [
704
- <input
705
- aria-invalid={true}
706
- checked={true}
707
- className=""
708
- disabled={false}
709
- onChange={[Function]}
710
- style={
711
- {
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
- {
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
- {
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
- {
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
- {
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
- {
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
- {
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
- {
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
- {
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
- [
971
- <input
972
- aria-invalid={false}
973
- checked={true}
974
- className=""
975
- disabled={true}
976
- onChange={[Function]}
977
- style={
978
- {
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
- {
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
- {
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
- [
1048
- <input
1049
- aria-invalid={false}
1050
- checked={true}
1051
- className=""
1052
- disabled={true}
1053
- onChange={[Function]}
1054
- style={
1055
- {
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
- {
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
- {
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
- [
1125
- <input
1126
- aria-invalid={false}
1127
- checked={true}
1128
- className=""
1129
- disabled={true}
1130
- onChange={[Function]}
1131
- style={
1132
- {
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
- {
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
- {
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
- {
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
- {
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}
523
+ checked={true}
1263
524
  className=""
1264
525
  disabled={false}
1265
526
  onChange={[Function]}
527
+ onClick={[Function]}
1266
528
  style={
1267
529
  {
530
+ ":active": {
531
+ "borderColor": "#9e271d",
532
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #9e271d",
533
+ },
534
+ ":focusVisible": {
535
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
536
+ },
537
+ ":hover": {
538
+ "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
539
+ },
1268
540
  "MozAppearance": "none",
1269
541
  "WebkitAppearance": "none",
1270
542
  "appearance": "none",
@@ -1273,68 +545,6 @@ exports[`RadioCore type:error state:hovered checked:true 1`] = `
1273
545
  "borderRadius": "50%",
1274
546
  "borderStyle": "solid",
1275
547
  "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
- {
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
- {
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
548
  "boxSizing": "border-box",
1339
549
  "height": 16,
1340
550
  "margin": 0,