@khanacademy/wonder-blocks-form 4.6.0 → 4.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,867 +1,247 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`CheckboxCore type:default checked:false 1`] = `
4
- <input
5
- aria-checked="false"
6
- aria-invalid={false}
7
- checked={false}
8
- className=""
9
- disabled={false}
10
- onChange={[Function]}
11
- onClick={[Function]}
12
- style={
13
- {
14
- ":active": {
15
- "backgroundColor": "#dae6fd",
16
- "borderColor": "#1865f2",
17
- "borderWidth": 2,
18
- },
19
- ":focusVisible": {
20
- "backgroundColor": "#ffffff",
21
- "borderColor": "#1865f2",
22
- "borderWidth": 2,
23
- },
24
- ":hover": {
25
- "backgroundColor": "#ffffff",
26
- "borderColor": "#1865f2",
27
- "borderWidth": 2,
28
- },
29
- "MozAppearance": "none",
30
- "WebkitAppearance": "none",
31
- "appearance": "none",
32
- "backgroundColor": "#ffffff",
33
- "borderColor": "rgba(33,36,44,0.50)",
34
- "borderRadius": 3,
35
- "borderStyle": "solid",
36
- "borderWidth": 1,
37
- "boxSizing": "border-box",
38
- "height": 16,
39
- "margin": 0,
40
- "minHeight": 16,
41
- "minWidth": 16,
42
- "outline": "none",
43
- "width": 16,
44
- }
45
- }
46
- type="checkbox"
47
- />
4
+ <div>
5
+ <input
6
+ aria-checked="false"
7
+ aria-invalid="false"
8
+ class=""
9
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
10
+ type="checkbox"
11
+ />
12
+ </div>
48
13
  `;
49
14
 
50
15
  exports[`CheckboxCore type:default checked:null 1`] = `
51
- [
16
+ <div>
52
17
  <input
53
18
  aria-checked="mixed"
54
- aria-invalid={false}
55
- className=""
56
- disabled={false}
57
- onChange={[Function]}
58
- onClick={[Function]}
59
- style={
60
- {
61
- ":active": {
62
- "background": "#1b50b3",
63
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1b50b3",
64
- },
65
- ":focusVisible": {
66
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
67
- },
68
- ":hover": {
69
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
70
- },
71
- "MozAppearance": "none",
72
- "WebkitAppearance": "none",
73
- "appearance": "none",
74
- "backgroundColor": "#1865f2",
75
- "borderRadius": 3,
76
- "borderStyle": "solid",
77
- "borderWidth": 0,
78
- "boxSizing": "border-box",
79
- "height": 16,
80
- "margin": 0,
81
- "minHeight": 16,
82
- "minWidth": 16,
83
- "outline": "none",
84
- "width": 16,
85
- }
86
- }
19
+ aria-invalid="false"
20
+ class=""
21
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
87
22
  type="checkbox"
88
- />,
23
+ />
89
24
  <span
90
- className=""
91
- style={
92
- {
93
- "backgroundColor": "#ffffff",
94
- "display": "inline-block",
95
- "flexGrow": 0,
96
- "flexShrink": 0,
97
- "height": 12,
98
- "margin": 2,
99
- "maskImage": "url(minus-bold.svg)",
100
- "maskPosition": "center",
101
- "maskRepeat": "no-repeat",
102
- "maskSize": "100%",
103
- "pointerEvents": "none",
104
- "position": "absolute",
105
- "verticalAlign": "text-bottom",
106
- "width": 12,
107
- }
108
- }
109
- />,
110
- ]
25
+ class=""
26
+ style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
27
+ />
28
+ </div>
111
29
  `;
112
30
 
113
31
  exports[`CheckboxCore type:default checked:true 1`] = `
114
- [
32
+ <div>
115
33
  <input
116
34
  aria-checked="true"
117
- aria-invalid={false}
118
- checked={true}
119
- className=""
120
- disabled={false}
121
- onChange={[Function]}
122
- onClick={[Function]}
123
- style={
124
- {
125
- ":active": {
126
- "background": "#1b50b3",
127
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1b50b3",
128
- },
129
- ":focusVisible": {
130
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
131
- },
132
- ":hover": {
133
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
134
- },
135
- "MozAppearance": "none",
136
- "WebkitAppearance": "none",
137
- "appearance": "none",
138
- "backgroundColor": "#1865f2",
139
- "borderRadius": 3,
140
- "borderStyle": "solid",
141
- "borderWidth": 0,
142
- "boxSizing": "border-box",
143
- "height": 16,
144
- "margin": 0,
145
- "minHeight": 16,
146
- "minWidth": 16,
147
- "outline": "none",
148
- "width": 16,
149
- }
150
- }
35
+ aria-invalid="false"
36
+ checked=""
37
+ class=""
38
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
151
39
  type="checkbox"
152
- />,
40
+ />
153
41
  <span
154
- className=""
155
- style={
156
- {
157
- "backgroundColor": "#ffffff",
158
- "display": "inline-block",
159
- "flexGrow": 0,
160
- "flexShrink": 0,
161
- "height": 12,
162
- "margin": 2,
163
- "maskImage": "url(check-bold.svg)",
164
- "maskPosition": "center",
165
- "maskRepeat": "no-repeat",
166
- "maskSize": "100%",
167
- "pointerEvents": "none",
168
- "position": "absolute",
169
- "verticalAlign": "text-bottom",
170
- "width": 12,
171
- }
172
- }
173
- />,
174
- ]
42
+ class=""
43
+ style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
44
+ />
45
+ </div>
175
46
  `;
176
47
 
177
48
  exports[`CheckboxCore type:disabled checked:false 1`] = `
178
- <input
179
- aria-checked="false"
180
- aria-invalid={false}
181
- checked={false}
182
- className=""
183
- disabled={true}
184
- onChange={[Function]}
185
- onClick={[Function]}
186
- style={
187
- {
188
- "MozAppearance": "none",
189
- "WebkitAppearance": "none",
190
- "appearance": "none",
191
- "backgroundColor": "#f7f8fa",
192
- "borderColor": "rgba(33,36,44,0.16)",
193
- "borderRadius": 3,
194
- "borderStyle": "solid",
195
- "borderWidth": 1,
196
- "boxSizing": "border-box",
197
- "cursor": "auto",
198
- "height": 16,
199
- "margin": 0,
200
- "minHeight": 16,
201
- "minWidth": 16,
202
- "outline": "none",
203
- "width": 16,
204
- }
205
- }
206
- type="checkbox"
207
- />
49
+ <div>
50
+ <input
51
+ aria-checked="false"
52
+ aria-invalid="false"
53
+ class=""
54
+ disabled=""
55
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
56
+ type="checkbox"
57
+ />
58
+ </div>
208
59
  `;
209
60
 
210
61
  exports[`CheckboxCore type:disabled checked:null 1`] = `
211
- [
62
+ <div>
212
63
  <input
213
64
  aria-checked="mixed"
214
- aria-invalid={false}
215
- className=""
216
- disabled={true}
217
- onChange={[Function]}
218
- onClick={[Function]}
219
- style={
220
- {
221
- "MozAppearance": "none",
222
- "WebkitAppearance": "none",
223
- "appearance": "none",
224
- "backgroundColor": "#f7f8fa",
225
- "borderColor": "rgba(33,36,44,0.16)",
226
- "borderRadius": 3,
227
- "borderStyle": "solid",
228
- "borderWidth": 1,
229
- "boxSizing": "border-box",
230
- "cursor": "auto",
231
- "height": 16,
232
- "margin": 0,
233
- "minHeight": 16,
234
- "minWidth": 16,
235
- "outline": "none",
236
- "width": 16,
237
- }
238
- }
65
+ aria-invalid="false"
66
+ class=""
67
+ disabled=""
68
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
239
69
  type="checkbox"
240
- />,
70
+ />
241
71
  <span
242
- className=""
243
- style={
244
- {
245
- "backgroundColor": "rgba(33,36,44,0.32)",
246
- "display": "inline-block",
247
- "flexGrow": 0,
248
- "flexShrink": 0,
249
- "height": 12,
250
- "margin": 2,
251
- "maskImage": "url(minus-bold.svg)",
252
- "maskPosition": "center",
253
- "maskRepeat": "no-repeat",
254
- "maskSize": "100%",
255
- "pointerEvents": "none",
256
- "position": "absolute",
257
- "verticalAlign": "text-bottom",
258
- "width": 12,
259
- }
260
- }
261
- />,
262
- ]
72
+ class=""
73
+ style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
74
+ />
75
+ </div>
263
76
  `;
264
77
 
265
78
  exports[`CheckboxCore type:disabled checked:true 1`] = `
266
- [
79
+ <div>
267
80
  <input
268
81
  aria-checked="true"
269
- aria-invalid={false}
270
- checked={true}
271
- className=""
272
- disabled={true}
273
- onChange={[Function]}
274
- onClick={[Function]}
275
- style={
276
- {
277
- "MozAppearance": "none",
278
- "WebkitAppearance": "none",
279
- "appearance": "none",
280
- "backgroundColor": "#f7f8fa",
281
- "borderColor": "rgba(33,36,44,0.16)",
282
- "borderRadius": 3,
283
- "borderStyle": "solid",
284
- "borderWidth": 1,
285
- "boxSizing": "border-box",
286
- "cursor": "auto",
287
- "height": 16,
288
- "margin": 0,
289
- "minHeight": 16,
290
- "minWidth": 16,
291
- "outline": "none",
292
- "width": 16,
293
- }
294
- }
82
+ aria-invalid="false"
83
+ checked=""
84
+ class=""
85
+ disabled=""
86
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
295
87
  type="checkbox"
296
- />,
88
+ />
297
89
  <span
298
- className=""
299
- style={
300
- {
301
- "backgroundColor": "rgba(33,36,44,0.32)",
302
- "display": "inline-block",
303
- "flexGrow": 0,
304
- "flexShrink": 0,
305
- "height": 12,
306
- "margin": 2,
307
- "maskImage": "url(check-bold.svg)",
308
- "maskPosition": "center",
309
- "maskRepeat": "no-repeat",
310
- "maskSize": "100%",
311
- "pointerEvents": "none",
312
- "position": "absolute",
313
- "verticalAlign": "text-bottom",
314
- "width": 12,
315
- }
316
- }
317
- />,
318
- ]
90
+ class=""
91
+ style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
92
+ />
93
+ </div>
319
94
  `;
320
95
 
321
96
  exports[`CheckboxCore type:error checked:false 1`] = `
322
- <input
323
- aria-checked="false"
324
- aria-invalid={true}
325
- checked={false}
326
- className=""
327
- disabled={false}
328
- onChange={[Function]}
329
- onClick={[Function]}
330
- style={
331
- {
332
- ":active": {
333
- "backgroundColor": "#fceeec",
334
- "borderColor": "#9e271d",
335
- "borderWidth": 2,
336
- },
337
- ":focusVisible": {
338
- "backgroundColor": "#fceeec",
339
- "borderColor": "#d92916",
340
- "borderWidth": 2,
341
- },
342
- ":hover": {
343
- "backgroundColor": "#fceeec",
344
- "borderColor": "#d92916",
345
- "borderWidth": 2,
346
- },
347
- "MozAppearance": "none",
348
- "WebkitAppearance": "none",
349
- "appearance": "none",
350
- "backgroundColor": "#fceeec",
351
- "borderColor": "#d92916",
352
- "borderRadius": 3,
353
- "borderStyle": "solid",
354
- "borderWidth": 1,
355
- "boxSizing": "border-box",
356
- "height": 16,
357
- "margin": 0,
358
- "minHeight": 16,
359
- "minWidth": 16,
360
- "outline": "none",
361
- "width": 16,
362
- }
363
- }
364
- type="checkbox"
365
- />
97
+ <div>
98
+ <input
99
+ aria-checked="false"
100
+ aria-invalid="true"
101
+ class=""
102
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(252, 238, 236); border-color: #d92916;"
103
+ type="checkbox"
104
+ />
105
+ </div>
366
106
  `;
367
107
 
368
108
  exports[`CheckboxCore type:error checked:null 1`] = `
369
- [
109
+ <div>
370
110
  <input
371
111
  aria-checked="mixed"
372
- aria-invalid={true}
373
- className=""
374
- disabled={false}
375
- onChange={[Function]}
376
- onClick={[Function]}
377
- style={
378
- {
379
- ":active": {
380
- "background": "#9e271d",
381
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #9e271d",
382
- },
383
- ":focusVisible": {
384
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
385
- },
386
- ":hover": {
387
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
388
- },
389
- "MozAppearance": "none",
390
- "WebkitAppearance": "none",
391
- "appearance": "none",
392
- "backgroundColor": "#d92916",
393
- "borderRadius": 3,
394
- "borderStyle": "solid",
395
- "borderWidth": 0,
396
- "boxSizing": "border-box",
397
- "height": 16,
398
- "margin": 0,
399
- "minHeight": 16,
400
- "minWidth": 16,
401
- "outline": "none",
402
- "width": 16,
403
- }
404
- }
112
+ aria-invalid="true"
113
+ class=""
114
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
405
115
  type="checkbox"
406
- />,
116
+ />
407
117
  <span
408
- className=""
409
- style={
410
- {
411
- "backgroundColor": "#ffffff",
412
- "display": "inline-block",
413
- "flexGrow": 0,
414
- "flexShrink": 0,
415
- "height": 12,
416
- "margin": 2,
417
- "maskImage": "url(minus-bold.svg)",
418
- "maskPosition": "center",
419
- "maskRepeat": "no-repeat",
420
- "maskSize": "100%",
421
- "pointerEvents": "none",
422
- "position": "absolute",
423
- "verticalAlign": "text-bottom",
424
- "width": 12,
425
- }
426
- }
427
- />,
428
- ]
118
+ class=""
119
+ style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
120
+ />
121
+ </div>
429
122
  `;
430
123
 
431
124
  exports[`CheckboxCore type:error checked:true 1`] = `
432
- [
125
+ <div>
433
126
  <input
434
127
  aria-checked="true"
435
- aria-invalid={true}
436
- checked={true}
437
- className=""
438
- disabled={false}
439
- onChange={[Function]}
440
- onClick={[Function]}
441
- style={
442
- {
443
- ":active": {
444
- "background": "#9e271d",
445
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #9e271d",
446
- },
447
- ":focusVisible": {
448
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
449
- },
450
- ":hover": {
451
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
452
- },
453
- "MozAppearance": "none",
454
- "WebkitAppearance": "none",
455
- "appearance": "none",
456
- "backgroundColor": "#d92916",
457
- "borderRadius": 3,
458
- "borderStyle": "solid",
459
- "borderWidth": 0,
460
- "boxSizing": "border-box",
461
- "height": 16,
462
- "margin": 0,
463
- "minHeight": 16,
464
- "minWidth": 16,
465
- "outline": "none",
466
- "width": 16,
467
- }
468
- }
128
+ aria-invalid="true"
129
+ checked=""
130
+ class=""
131
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
469
132
  type="checkbox"
470
- />,
133
+ />
471
134
  <span
472
- className=""
473
- style={
474
- {
475
- "backgroundColor": "#ffffff",
476
- "display": "inline-block",
477
- "flexGrow": 0,
478
- "flexShrink": 0,
479
- "height": 12,
480
- "margin": 2,
481
- "maskImage": "url(check-bold.svg)",
482
- "maskPosition": "center",
483
- "maskRepeat": "no-repeat",
484
- "maskSize": "100%",
485
- "pointerEvents": "none",
486
- "position": "absolute",
487
- "verticalAlign": "text-bottom",
488
- "width": 12,
489
- }
490
- }
491
- />,
492
- ]
135
+ class=""
136
+ style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
137
+ />
138
+ </div>
493
139
  `;
494
140
 
495
141
  exports[`RadioCore type:default checked:false 1`] = `
496
- <input
497
- aria-invalid={false}
498
- checked={false}
499
- className=""
500
- disabled={false}
501
- onChange={[Function]}
502
- onClick={[Function]}
503
- style={
504
- {
505
- ":active": {
506
- "backgroundColor": "#dae6fd",
507
- "borderColor": "#1865f2",
508
- "borderWidth": 2,
509
- },
510
- ":focusVisible": {
511
- "backgroundColor": "#ffffff",
512
- "borderColor": "#1865f2",
513
- "borderWidth": 2,
514
- },
515
- ":hover": {
516
- "backgroundColor": "#ffffff",
517
- "borderColor": "#1865f2",
518
- "borderWidth": 2,
519
- },
520
- "MozAppearance": "none",
521
- "WebkitAppearance": "none",
522
- "appearance": "none",
523
- "backgroundColor": "#ffffff",
524
- "borderColor": "rgba(33,36,44,0.50)",
525
- "borderRadius": "50%",
526
- "borderStyle": "solid",
527
- "borderWidth": 1,
528
- "boxSizing": "border-box",
529
- "height": 16,
530
- "margin": 0,
531
- "minHeight": 16,
532
- "minWidth": 16,
533
- "outline": "none",
534
- "width": 16,
535
- }
536
- }
537
- type="radio"
538
- />
142
+ <div>
143
+ <input
144
+ aria-invalid="false"
145
+ class=""
146
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
147
+ type="radio"
148
+ />
149
+ </div>
539
150
  `;
540
151
 
541
152
  exports[`RadioCore type:default checked:null 1`] = `
542
- <input
543
- aria-invalid={false}
544
- className=""
545
- disabled={false}
546
- onChange={[Function]}
547
- onClick={[Function]}
548
- style={
549
- {
550
- ":active": {
551
- "backgroundColor": "#dae6fd",
552
- "borderColor": "#1865f2",
553
- "borderWidth": 2,
554
- },
555
- ":focusVisible": {
556
- "backgroundColor": "#ffffff",
557
- "borderColor": "#1865f2",
558
- "borderWidth": 2,
559
- },
560
- ":hover": {
561
- "backgroundColor": "#ffffff",
562
- "borderColor": "#1865f2",
563
- "borderWidth": 2,
564
- },
565
- "MozAppearance": "none",
566
- "WebkitAppearance": "none",
567
- "appearance": "none",
568
- "backgroundColor": "#ffffff",
569
- "borderColor": "rgba(33,36,44,0.50)",
570
- "borderRadius": "50%",
571
- "borderStyle": "solid",
572
- "borderWidth": 1,
573
- "boxSizing": "border-box",
574
- "height": 16,
575
- "margin": 0,
576
- "minHeight": 16,
577
- "minWidth": 16,
578
- "outline": "none",
579
- "width": 16,
580
- }
581
- }
582
- type="radio"
583
- />
153
+ <div>
154
+ <input
155
+ aria-invalid="false"
156
+ class=""
157
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
158
+ type="radio"
159
+ />
160
+ </div>
584
161
  `;
585
162
 
586
163
  exports[`RadioCore type:default checked:true 1`] = `
587
- <input
588
- aria-invalid={false}
589
- checked={true}
590
- className=""
591
- disabled={false}
592
- onChange={[Function]}
593
- onClick={[Function]}
594
- style={
595
- {
596
- ":active": {
597
- "borderColor": "#1b50b3",
598
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1b50b3",
599
- },
600
- ":focusVisible": {
601
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
602
- },
603
- ":hover": {
604
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #1865f2",
605
- },
606
- "MozAppearance": "none",
607
- "WebkitAppearance": "none",
608
- "appearance": "none",
609
- "backgroundColor": "#ffffff",
610
- "borderColor": "#1865f2",
611
- "borderRadius": "50%",
612
- "borderStyle": "solid",
613
- "borderWidth": 4,
614
- "boxSizing": "border-box",
615
- "height": 16,
616
- "margin": 0,
617
- "minHeight": 16,
618
- "minWidth": 16,
619
- "outline": "none",
620
- "width": 16,
621
- }
622
- }
623
- type="radio"
624
- />
164
+ <div>
165
+ <input
166
+ aria-invalid="false"
167
+ checked=""
168
+ class=""
169
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 4px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #1865f2;"
170
+ type="radio"
171
+ />
172
+ </div>
625
173
  `;
626
174
 
627
175
  exports[`RadioCore type:disabled checked:false 1`] = `
628
- <input
629
- aria-invalid={false}
630
- checked={false}
631
- className=""
632
- disabled={true}
633
- onChange={[Function]}
634
- onClick={[Function]}
635
- style={
636
- {
637
- "MozAppearance": "none",
638
- "WebkitAppearance": "none",
639
- "appearance": "none",
640
- "backgroundColor": "#f7f8fa",
641
- "borderColor": "rgba(33,36,44,0.16)",
642
- "borderRadius": "50%",
643
- "borderStyle": "solid",
644
- "borderWidth": 1,
645
- "boxSizing": "border-box",
646
- "cursor": "auto",
647
- "height": 16,
648
- "margin": 0,
649
- "minHeight": 16,
650
- "minWidth": 16,
651
- "outline": "none",
652
- "width": 16,
653
- }
654
- }
655
- type="radio"
656
- />
176
+ <div>
177
+ <input
178
+ aria-invalid="false"
179
+ class=""
180
+ disabled=""
181
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
182
+ type="radio"
183
+ />
184
+ </div>
657
185
  `;
658
186
 
659
187
  exports[`RadioCore type:disabled checked:null 1`] = `
660
- <input
661
- aria-invalid={false}
662
- className=""
663
- disabled={true}
664
- onChange={[Function]}
665
- onClick={[Function]}
666
- style={
667
- {
668
- "MozAppearance": "none",
669
- "WebkitAppearance": "none",
670
- "appearance": "none",
671
- "backgroundColor": "#f7f8fa",
672
- "borderColor": "rgba(33,36,44,0.16)",
673
- "borderRadius": "50%",
674
- "borderStyle": "solid",
675
- "borderWidth": 1,
676
- "boxSizing": "border-box",
677
- "cursor": "auto",
678
- "height": 16,
679
- "margin": 0,
680
- "minHeight": 16,
681
- "minWidth": 16,
682
- "outline": "none",
683
- "width": 16,
684
- }
685
- }
686
- type="radio"
687
- />
188
+ <div>
189
+ <input
190
+ aria-invalid="false"
191
+ class=""
192
+ disabled=""
193
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
194
+ type="radio"
195
+ />
196
+ </div>
688
197
  `;
689
198
 
690
199
  exports[`RadioCore type:disabled checked:true 1`] = `
691
- [
200
+ <div>
692
201
  <input
693
- aria-invalid={false}
694
- checked={true}
695
- className=""
696
- disabled={true}
697
- onChange={[Function]}
698
- onClick={[Function]}
699
- style={
700
- {
701
- "MozAppearance": "none",
702
- "WebkitAppearance": "none",
703
- "appearance": "none",
704
- "backgroundColor": "#f7f8fa",
705
- "borderColor": "rgba(33,36,44,0.16)",
706
- "borderRadius": "50%",
707
- "borderStyle": "solid",
708
- "borderWidth": 1,
709
- "boxSizing": "border-box",
710
- "cursor": "auto",
711
- "height": 16,
712
- "margin": 0,
713
- "minHeight": 16,
714
- "minWidth": 16,
715
- "outline": "none",
716
- "width": 16,
717
- }
718
- }
202
+ aria-invalid="false"
203
+ checked=""
204
+ class=""
205
+ disabled=""
206
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
719
207
  type="radio"
720
- />,
208
+ />
721
209
  <span
722
- style={
723
- {
724
- "backgroundColor": "rgba(33,36,44,0.32)",
725
- "borderRadius": "50%",
726
- "height": 8,
727
- "left": 4,
728
- "position": "absolute",
729
- "top": 4,
730
- "width": 8,
731
- }
732
- }
733
- />,
734
- ]
210
+ style="position: absolute; top: 4px; left: 4px; height: 8px; width: 8px; border-radius: 50%; background-color: rgba(33, 36, 44, 0.32);"
211
+ />
212
+ </div>
735
213
  `;
736
214
 
737
215
  exports[`RadioCore type:error checked:false 1`] = `
738
- <input
739
- aria-invalid={true}
740
- checked={false}
741
- className=""
742
- disabled={false}
743
- onChange={[Function]}
744
- onClick={[Function]}
745
- style={
746
- {
747
- ":active": {
748
- "backgroundColor": "#fceeec",
749
- "borderColor": "#9e271d",
750
- "borderWidth": 2,
751
- },
752
- ":focusVisible": {
753
- "backgroundColor": "#fceeec",
754
- "borderColor": "#d92916",
755
- "borderWidth": 2,
756
- },
757
- ":hover": {
758
- "backgroundColor": "#fceeec",
759
- "borderColor": "#d92916",
760
- "borderWidth": 2,
761
- },
762
- "MozAppearance": "none",
763
- "WebkitAppearance": "none",
764
- "appearance": "none",
765
- "backgroundColor": "#fceeec",
766
- "borderColor": "#d92916",
767
- "borderRadius": "50%",
768
- "borderStyle": "solid",
769
- "borderWidth": 1,
770
- "boxSizing": "border-box",
771
- "height": 16,
772
- "margin": 0,
773
- "minHeight": 16,
774
- "minWidth": 16,
775
- "outline": "none",
776
- "width": 16,
777
- }
778
- }
779
- type="radio"
780
- />
216
+ <div>
217
+ <input
218
+ aria-invalid="true"
219
+ class=""
220
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(252, 238, 236); border-color: #d92916;"
221
+ type="radio"
222
+ />
223
+ </div>
781
224
  `;
782
225
 
783
226
  exports[`RadioCore type:error checked:null 1`] = `
784
- <input
785
- aria-invalid={true}
786
- className=""
787
- disabled={false}
788
- onChange={[Function]}
789
- onClick={[Function]}
790
- style={
791
- {
792
- ":active": {
793
- "backgroundColor": "#fceeec",
794
- "borderColor": "#9e271d",
795
- "borderWidth": 2,
796
- },
797
- ":focusVisible": {
798
- "backgroundColor": "#fceeec",
799
- "borderColor": "#d92916",
800
- "borderWidth": 2,
801
- },
802
- ":hover": {
803
- "backgroundColor": "#fceeec",
804
- "borderColor": "#d92916",
805
- "borderWidth": 2,
806
- },
807
- "MozAppearance": "none",
808
- "WebkitAppearance": "none",
809
- "appearance": "none",
810
- "backgroundColor": "#fceeec",
811
- "borderColor": "#d92916",
812
- "borderRadius": "50%",
813
- "borderStyle": "solid",
814
- "borderWidth": 1,
815
- "boxSizing": "border-box",
816
- "height": 16,
817
- "margin": 0,
818
- "minHeight": 16,
819
- "minWidth": 16,
820
- "outline": "none",
821
- "width": 16,
822
- }
823
- }
824
- type="radio"
825
- />
227
+ <div>
228
+ <input
229
+ aria-invalid="true"
230
+ class=""
231
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(252, 238, 236); border-color: #d92916;"
232
+ type="radio"
233
+ />
234
+ </div>
826
235
  `;
827
236
 
828
237
  exports[`RadioCore type:error checked:true 1`] = `
829
- <input
830
- aria-invalid={true}
831
- checked={true}
832
- className=""
833
- disabled={false}
834
- onChange={[Function]}
835
- onClick={[Function]}
836
- style={
837
- {
838
- ":active": {
839
- "borderColor": "#9e271d",
840
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #9e271d",
841
- },
842
- ":focusVisible": {
843
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
844
- },
845
- ":hover": {
846
- "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px #d92916",
847
- },
848
- "MozAppearance": "none",
849
- "WebkitAppearance": "none",
850
- "appearance": "none",
851
- "backgroundColor": "#ffffff",
852
- "borderColor": "#d92916",
853
- "borderRadius": "50%",
854
- "borderStyle": "solid",
855
- "borderWidth": 4,
856
- "boxSizing": "border-box",
857
- "height": 16,
858
- "margin": 0,
859
- "minHeight": 16,
860
- "minWidth": 16,
861
- "outline": "none",
862
- "width": 16,
863
- }
864
- }
865
- type="radio"
866
- />
238
+ <div>
239
+ <input
240
+ aria-invalid="true"
241
+ checked=""
242
+ class=""
243
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 4px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #d92916;"
244
+ type="radio"
245
+ />
246
+ </div>
867
247
  `;