@zohodesk/dot 1.8.2 → 1.8.4

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 (28) hide show
  1. package/README.md +13 -0
  2. package/es/FlipCard/__tests__/__snapshots__/FlipCard.spec.js.snap +74 -74
  3. package/es/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap +3 -3
  4. package/es/form/fields/Fields.module.css +8 -3
  5. package/es/form/fields/RadioField/RadioField.js +40 -14
  6. package/es/form/fields/RadioField/__tests__/RadioField.spec.js +33 -0
  7. package/es/form/fields/RadioField/__tests__/__snapshots__/RadioField.spec.js.snap +573 -77
  8. package/es/form/fields/RadioField/props/defaultProps.js +1 -0
  9. package/es/form/fields/RadioField/props/propTypes.js +6 -0
  10. package/es/form/fields/ValidationMessage/ValidationMessage.js +57 -16
  11. package/es/form/fields/ValidationMessage/__tests__/__snapshots__/ValidationMessage.spec.js.snap +2 -2
  12. package/es/form/fields/ValidationMessage/props/defaultProps.js +2 -1
  13. package/es/form/fields/ValidationMessage/props/propTypes.js +18 -4
  14. package/es/list/AvatarFlip/__tests__/__snapshots__/AvatarFlip.spec.js.snap +1 -1
  15. package/lib/FlipCard/__tests__/__snapshots__/FlipCard.spec.js.snap +74 -74
  16. package/lib/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap +3 -3
  17. package/lib/form/fields/Fields.module.css +8 -3
  18. package/lib/form/fields/RadioField/RadioField.js +39 -15
  19. package/lib/form/fields/RadioField/__tests__/RadioField.spec.js +33 -0
  20. package/lib/form/fields/RadioField/__tests__/__snapshots__/RadioField.spec.js.snap +573 -77
  21. package/lib/form/fields/RadioField/props/defaultProps.js +1 -0
  22. package/lib/form/fields/RadioField/props/propTypes.js +6 -0
  23. package/lib/form/fields/ValidationMessage/ValidationMessage.js +73 -18
  24. package/lib/form/fields/ValidationMessage/__tests__/__snapshots__/ValidationMessage.spec.js.snap +2 -2
  25. package/lib/form/fields/ValidationMessage/props/defaultProps.js +2 -1
  26. package/lib/form/fields/ValidationMessage/props/propTypes.js +18 -4
  27. package/lib/list/AvatarFlip/__tests__/__snapshots__/AvatarFlip.spec.js.snap +1 -1
  28. package/package.json +9 -9
package/es/form/fields/RadioField/__tests__/__snapshots__/RadioField.spec.js.snap CHANGED
@@ -3,19 +3,19 @@
3
3
  exports[`RadioField rendering options with isBoxStyle 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="container "
6
+ class="container "
7
7
  data-selector-id="radioField"
8
8
  >
9
9
  <div
10
10
  class="fieldContainer radiosWrapper radioContainer"
11
11
  >
12
12
  <span
13
- class=" radioWrap"
13
+ class=" radioWrap "
14
14
  >
15
15
  <div
16
16
  aria-checked="false"
17
17
  aria-readonly="false"
18
- class="container pointer hoverEfffect radioBox hoverableRadioBox flex rowdir both"
18
+ class="container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox flex rowdir both"
19
19
  data-id="1"
20
20
  data-selector-id="container"
21
21
  data-test-id="1"
@@ -24,7 +24,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
24
24
  >
25
25
  <div
26
26
  class="radio
27
- hoverprimary medium filled centerPathprimary shrinkOff"
27
+ hoverprimary medium filled centerPathprimary shrinkOff"
28
28
  data-id="boxComponent"
29
29
  data-selector-id="box"
30
30
  data-test-id="boxComponent"
@@ -51,7 +51,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
51
51
  </label>
52
52
  </div>
53
53
  <div
54
- class="text grow basis shrinkOff"
54
+ class="labelContainer grow basis shrinkOff"
55
55
  data-id="boxComponent"
56
56
  data-selector-id="box"
57
57
  data-test-id="boxComponent"
@@ -59,7 +59,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
59
59
  <label
60
60
  class="label title medium default font_primary
61
61
  dotted cursor
62
- primaryLabel pointer "
62
+ primaryLabel pointer "
63
63
  data-id="Chennai_label"
64
64
  data-selector-id="label"
65
65
  data-test-id="Chennai_label"
@@ -71,12 +71,12 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
71
71
  </div>
72
72
  </span>
73
73
  <span
74
- class=" radioWrap"
74
+ class=" radioWrap "
75
75
  >
76
76
  <div
77
77
  aria-checked="false"
78
78
  aria-readonly="true"
79
- class="container disabled radioBox flex rowdir both"
79
+ class="container disabled radioBox primaryTextOnly flex rowdir both"
80
80
  data-id="2"
81
81
  data-selector-id="container"
82
82
  data-test-id="2"
@@ -86,7 +86,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
86
86
  >
87
87
  <div
88
88
  class="radio
89
- medium filled centerPathprimary disabled shrinkOff"
89
+ medium filled centerPathprimary disabled shrinkOff"
90
90
  data-id="boxComponent"
91
91
  data-selector-id="box"
92
92
  data-test-id="boxComponent"
@@ -113,15 +113,15 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
113
113
  </label>
114
114
  </div>
115
115
  <div
116
- class="text disabled grow basis shrinkOff"
116
+ class="labelContainer grow basis shrinkOff"
117
117
  data-id="boxComponent"
118
118
  data-selector-id="box"
119
119
  data-test-id="boxComponent"
120
120
  >
121
121
  <label
122
122
  class="label title medium default font_primary
123
- dotted cursor
124
- primaryLabel "
123
+ dotted cursor disabled
124
+ primaryLabel "
125
125
  data-id="Mumbai_label"
126
126
  data-selector-id="label"
127
127
  data-test-id="Mumbai_label"
@@ -133,12 +133,12 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
133
133
  </div>
134
134
  </span>
135
135
  <span
136
- class=" radioWrap"
136
+ class=" radioWrap "
137
137
  >
138
138
  <div
139
139
  aria-checked="false"
140
140
  aria-readonly="false"
141
- class="container pointer hoverEfffect radioBox hoverableRadioBox flex rowdir both"
141
+ class="container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox flex rowdir both"
142
142
  data-id="3"
143
143
  data-selector-id="container"
144
144
  data-test-id="3"
@@ -147,7 +147,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
147
147
  >
148
148
  <div
149
149
  class="radio
150
- hoverprimary medium filled centerPathprimary shrinkOff"
150
+ hoverprimary medium filled centerPathprimary shrinkOff"
151
151
  data-id="boxComponent"
152
152
  data-selector-id="box"
153
153
  data-test-id="boxComponent"
@@ -174,41 +174,53 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
174
174
  </label>
175
175
  </div>
176
176
  <div
177
- class="text grow basis shrinkOff"
177
+ class="labelContainer grow basis shrinkOff"
178
178
  data-id="boxComponent"
179
179
  data-selector-id="box"
180
180
  data-test-id="boxComponent"
181
181
  >
182
- <label
183
- class="label title medium default font_primary
184
- dotted cursor
185
- primaryLabel pointer "
186
- data-id="Delhi_label"
187
- data-selector-id="label"
188
- data-test-id="Delhi_label"
189
- data-title="Delhi"
182
+ <div
183
+ class="flex row alignItems_center"
184
+ data-id="flex"
185
+ data-test-id="flex"
190
186
  >
191
- Delhi
192
- </label>
187
+ <label
188
+ class="label title medium default font_primary
189
+ dotted cursor
190
+ primaryLabel pointer "
191
+ data-id="Delhi_label"
192
+ data-selector-id="label"
193
+ data-test-id="Delhi_label"
194
+ data-title="Delhi"
195
+ >
196
+ Delhi
197
+ </label>
198
+ <div
199
+ class="flex row alignItems_center"
200
+ data-id="flex"
201
+ data-test-id="flex"
202
+ >
203
+ <i
204
+ aria-hidden="true"
205
+ class="zd_font_icons basic icon-info infoIcon "
206
+ data-id="fontIcon"
207
+ data-selector-id="fontIcon"
208
+ data-test-id="fontIcon"
209
+ data-title="Capital of India"
210
+ style="--zd-iconfont-size: var(--zd_font_size16);"
211
+ />
212
+ </div>
213
+ </div>
193
214
  </div>
194
- <i
195
- aria-hidden="true"
196
- class="zd_font_icons basic icon-info infoIcon "
197
- data-id="fontIcon"
198
- data-selector-id="fontIcon"
199
- data-test-id="fontIcon"
200
- data-title="Capital of India"
201
- style="--zd-iconfont-size: var(--zd_font_size16);"
202
- />
203
215
  </div>
204
216
  </span>
205
217
  <span
206
- class=" radioWrap"
218
+ class=" radioWrap "
207
219
  >
208
220
  <div
209
221
  aria-checked="false"
210
222
  aria-readonly="false"
211
- class="container pointer hoverEfffect radioBox hoverableRadioBox flex rowdir both"
223
+ class="container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox flex rowdir both"
212
224
  data-id="4"
213
225
  data-selector-id="container"
214
226
  data-test-id="4"
@@ -217,7 +229,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
217
229
  >
218
230
  <div
219
231
  class="radio
220
- hoverprimary medium filled centerPathprimary shrinkOff"
232
+ hoverprimary medium filled centerPathprimary shrinkOff"
221
233
  data-id="boxComponent"
222
234
  data-selector-id="box"
223
235
  data-test-id="boxComponent"
@@ -244,7 +256,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
244
256
  </label>
245
257
  </div>
246
258
  <div
247
- class="text grow basis shrinkOff"
259
+ class="labelContainer grow basis shrinkOff"
248
260
  data-id="boxComponent"
249
261
  data-selector-id="box"
250
262
  data-test-id="boxComponent"
@@ -252,7 +264,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
252
264
  <label
253
265
  class="label title medium default font_primary
254
266
  dotted cursor
255
- primaryLabel pointer "
267
+ primaryLabel pointer "
256
268
  data-id="Kolkata_label"
257
269
  data-selector-id="label"
258
270
  data-test-id="Kolkata_label"
@@ -271,7 +283,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
271
283
  exports[`RadioField rendering the defult props 1`] = `
272
284
  <DocumentFragment>
273
285
  <div
274
- class="container "
286
+ class="container "
275
287
  data-selector-id="radioField"
276
288
  >
277
289
  <div
@@ -284,14 +296,14 @@ exports[`RadioField rendering the defult props 1`] = `
284
296
  exports[`RadioField rendering with options 1`] = `
285
297
  <DocumentFragment>
286
298
  <div
287
- class="container "
299
+ class="container "
288
300
  data-selector-id="radioField"
289
301
  >
290
302
  <div
291
303
  class="fieldContainer radioContainer"
292
304
  >
293
305
  <span
294
- class="radio radioWrap"
306
+ class="radio radioWrap "
295
307
  >
296
308
  <div
297
309
  aria-checked="false"
@@ -305,7 +317,7 @@ exports[`RadioField rendering with options 1`] = `
305
317
  >
306
318
  <div
307
319
  class="radio
308
- hoverprimary medium filled centerPathprimary shrinkOff"
320
+ hoverprimary medium filled centerPathprimary shrinkOff"
309
321
  data-id="boxComponent"
310
322
  data-selector-id="box"
311
323
  data-test-id="boxComponent"
@@ -332,7 +344,7 @@ exports[`RadioField rendering with options 1`] = `
332
344
  </label>
333
345
  </div>
334
346
  <div
335
- class="text grow basis shrinkOff"
347
+ class="labelContainer grow basis shrinkOff"
336
348
  data-id="boxComponent"
337
349
  data-selector-id="box"
338
350
  data-test-id="boxComponent"
@@ -340,7 +352,7 @@ exports[`RadioField rendering with options 1`] = `
340
352
  <label
341
353
  class="label title medium default font_primary
342
354
  dotted cursor
343
- primaryLabel pointer "
355
+ primaryLabel pointer "
344
356
  data-id="Chennai_label"
345
357
  data-selector-id="label"
346
358
  data-test-id="Chennai_label"
@@ -352,7 +364,7 @@ exports[`RadioField rendering with options 1`] = `
352
364
  </div>
353
365
  </span>
354
366
  <span
355
- class="radio radioWrap"
367
+ class="radio radioWrap "
356
368
  >
357
369
  <div
358
370
  aria-checked="false"
@@ -367,7 +379,7 @@ exports[`RadioField rendering with options 1`] = `
367
379
  >
368
380
  <div
369
381
  class="radio
370
- medium filled centerPathprimary disabled shrinkOff"
382
+ medium filled centerPathprimary disabled shrinkOff"
371
383
  data-id="boxComponent"
372
384
  data-selector-id="box"
373
385
  data-test-id="boxComponent"
@@ -394,15 +406,15 @@ exports[`RadioField rendering with options 1`] = `
394
406
  </label>
395
407
  </div>
396
408
  <div
397
- class="text disabled grow basis shrinkOff"
409
+ class="labelContainer grow basis shrinkOff"
398
410
  data-id="boxComponent"
399
411
  data-selector-id="box"
400
412
  data-test-id="boxComponent"
401
413
  >
402
414
  <label
403
415
  class="label title medium default font_primary
404
- dotted cursor
405
- primaryLabel "
416
+ dotted cursor disabled
417
+ primaryLabel "
406
418
  data-id="Mumbai_label"
407
419
  data-selector-id="label"
408
420
  data-test-id="Mumbai_label"
@@ -414,7 +426,7 @@ exports[`RadioField rendering with options 1`] = `
414
426
  </div>
415
427
  </span>
416
428
  <span
417
- class="radio radioWrap"
429
+ class="radio radioWrap "
418
430
  >
419
431
  <div
420
432
  aria-checked="false"
@@ -428,7 +440,7 @@ exports[`RadioField rendering with options 1`] = `
428
440
  >
429
441
  <div
430
442
  class="radio
431
- hoverprimary medium filled centerPathprimary shrinkOff"
443
+ hoverprimary medium filled centerPathprimary shrinkOff"
432
444
  data-id="boxComponent"
433
445
  data-selector-id="box"
434
446
  data-test-id="boxComponent"
@@ -455,36 +467,48 @@ exports[`RadioField rendering with options 1`] = `
455
467
  </label>
456
468
  </div>
457
469
  <div
458
- class="text grow basis shrinkOff"
470
+ class="labelContainer grow basis shrinkOff"
459
471
  data-id="boxComponent"
460
472
  data-selector-id="box"
461
473
  data-test-id="boxComponent"
462
474
  >
463
- <label
464
- class="label title medium default font_primary
465
- dotted cursor
466
- primaryLabel pointer "
467
- data-id="Delhi_label"
468
- data-selector-id="label"
469
- data-test-id="Delhi_label"
470
- data-title="Delhi"
475
+ <div
476
+ class="flex row alignItems_center"
477
+ data-id="flex"
478
+ data-test-id="flex"
471
479
  >
472
- Delhi
473
- </label>
480
+ <label
481
+ class="label title medium default font_primary
482
+ dotted cursor
483
+ primaryLabel pointer "
484
+ data-id="Delhi_label"
485
+ data-selector-id="label"
486
+ data-test-id="Delhi_label"
487
+ data-title="Delhi"
488
+ >
489
+ Delhi
490
+ </label>
491
+ <div
492
+ class="flex row alignItems_center"
493
+ data-id="flex"
494
+ data-test-id="flex"
495
+ >
496
+ <i
497
+ aria-hidden="true"
498
+ class="zd_font_icons basic icon-info infoIcon "
499
+ data-id="fontIcon"
500
+ data-selector-id="fontIcon"
501
+ data-test-id="fontIcon"
502
+ data-title="Capital of India"
503
+ style="--zd-iconfont-size: var(--zd_font_size16);"
504
+ />
505
+ </div>
506
+ </div>
474
507
  </div>
475
- <i
476
- aria-hidden="true"
477
- class="zd_font_icons basic icon-info infoIcon "
478
- data-id="fontIcon"
479
- data-selector-id="fontIcon"
480
- data-test-id="fontIcon"
481
- data-title="Capital of India"
482
- style="--zd-iconfont-size: var(--zd_font_size16);"
483
- />
484
508
  </div>
485
509
  </span>
486
510
  <span
487
- class="radio radioWrap"
511
+ class="radio radioWrap "
488
512
  >
489
513
  <div
490
514
  aria-checked="false"
@@ -498,7 +522,7 @@ exports[`RadioField rendering with options 1`] = `
498
522
  >
499
523
  <div
500
524
  class="radio
501
- hoverprimary medium filled centerPathprimary shrinkOff"
525
+ hoverprimary medium filled centerPathprimary shrinkOff"
502
526
  data-id="boxComponent"
503
527
  data-selector-id="box"
504
528
  data-test-id="boxComponent"
@@ -525,7 +549,7 @@ exports[`RadioField rendering with options 1`] = `
525
549
  </label>
526
550
  </div>
527
551
  <div
528
- class="text grow basis shrinkOff"
552
+ class="labelContainer grow basis shrinkOff"
529
553
  data-id="boxComponent"
530
554
  data-selector-id="box"
531
555
  data-test-id="boxComponent"
@@ -533,7 +557,7 @@ exports[`RadioField rendering with options 1`] = `
533
557
  <label
534
558
  class="label title medium default font_primary
535
559
  dotted cursor
536
- primaryLabel pointer "
560
+ primaryLabel pointer "
537
561
  data-id="Kolkata_label"
538
562
  data-selector-id="label"
539
563
  data-test-id="Kolkata_label"
@@ -548,3 +572,475 @@ exports[`RadioField rendering with options 1`] = `
548
572
  </div>
549
573
  </DocumentFragment>
550
574
  `;
575
+
576
+ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
577
+ <DocumentFragment>
578
+ <div
579
+ class="container "
580
+ data-selector-id="radioField"
581
+ >
582
+ <div
583
+ class="fieldContainer radiosWrapper radioContainer"
584
+ >
585
+ <span
586
+ class=" radioWrap "
587
+ >
588
+ <div
589
+ aria-checked="false"
590
+ aria-readonly="false"
591
+ class="container pointer hoverEfffect radioBox withSecondaryText hoverableRadioBox flex rowdir both"
592
+ data-id="1"
593
+ data-selector-id="container"
594
+ data-test-id="1"
595
+ role="radio"
596
+ tabindex="0"
597
+ >
598
+ <div
599
+ class="radio
600
+ hoverprimary medium filled centerPathprimary withSecondaryText shrinkOff selfStart"
601
+ data-id="boxComponent"
602
+ data-selector-id="box"
603
+ data-test-id="boxComponent"
604
+ >
605
+ <input
606
+ id="0"
607
+ type="hidden"
608
+ value="1"
609
+ />
610
+ <label
611
+ class="radioLabel pointer"
612
+ >
613
+ <svg
614
+ viewBox="0 0 40 40"
615
+ xmlns="http://www.w3.org/2000/svg"
616
+ >
617
+ <circle
618
+ class="rdBox"
619
+ cx="20"
620
+ cy="20"
621
+ r="19"
622
+ />
623
+ </svg>
624
+ </label>
625
+ </div>
626
+ <div
627
+ class="labelContainer grow basis shrinkOff"
628
+ data-id="boxComponent"
629
+ data-selector-id="box"
630
+ data-test-id="boxComponent"
631
+ >
632
+ <label
633
+ class="label title medium default font_primary
634
+ dotted cursor
635
+ primaryLabel pointer "
636
+ data-id="Chennai_label"
637
+ data-selector-id="label"
638
+ data-test-id="Chennai_label"
639
+ data-title="Chennai"
640
+ >
641
+ Chennai
642
+ </label>
643
+ <div
644
+ class="size12 lineheight_1_2 secondaryText "
645
+ data-title="Tamil Nadu Capital"
646
+ >
647
+ Tamil Nadu Capital
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </span>
652
+ <span
653
+ class=" radioWrap "
654
+ >
655
+ <div
656
+ aria-checked="false"
657
+ aria-readonly="true"
658
+ class="container disabled radioBox withSecondaryText flex rowdir both"
659
+ data-id="2"
660
+ data-selector-id="container"
661
+ data-test-id="2"
662
+ data-title="Disabled Option"
663
+ role="radio"
664
+ tabindex="-1"
665
+ >
666
+ <div
667
+ class="radio
668
+ medium filled centerPathprimary disabled withSecondaryText shrinkOff selfStart"
669
+ data-id="boxComponent"
670
+ data-selector-id="box"
671
+ data-test-id="boxComponent"
672
+ >
673
+ <input
674
+ id="1"
675
+ type="hidden"
676
+ value="2"
677
+ />
678
+ <label
679
+ class="radioLabel disabled"
680
+ >
681
+ <svg
682
+ viewBox="0 0 40 40"
683
+ xmlns="http://www.w3.org/2000/svg"
684
+ >
685
+ <circle
686
+ class="rdBox"
687
+ cx="20"
688
+ cy="20"
689
+ r="19"
690
+ />
691
+ </svg>
692
+ </label>
693
+ </div>
694
+ <div
695
+ class="labelContainer grow basis shrinkOff"
696
+ data-id="boxComponent"
697
+ data-selector-id="box"
698
+ data-test-id="boxComponent"
699
+ >
700
+ <label
701
+ class="label title medium default font_primary
702
+ dotted cursor disabled
703
+ primaryLabel "
704
+ data-id="Mumbai_label"
705
+ data-selector-id="label"
706
+ data-test-id="Mumbai_label"
707
+ data-title="Disabled Option"
708
+ >
709
+ Mumbai
710
+ </label>
711
+ <div
712
+ class="size12 lineheight_1_2 secondaryText "
713
+ >
714
+ Maharashtra Capital
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </span>
719
+ <span
720
+ class=" radioWrap "
721
+ >
722
+ <div
723
+ aria-checked="false"
724
+ aria-readonly="false"
725
+ class="container pointer hoverEfffect radioBox withSecondaryText hoverableRadioBox flex rowdir both"
726
+ data-id="3"
727
+ data-selector-id="container"
728
+ data-test-id="3"
729
+ role="radio"
730
+ tabindex="-1"
731
+ >
732
+ <div
733
+ class="radio
734
+ hoverprimary medium filled centerPathprimary withSecondaryText shrinkOff selfStart"
735
+ data-id="boxComponent"
736
+ data-selector-id="box"
737
+ data-test-id="boxComponent"
738
+ >
739
+ <input
740
+ id="2"
741
+ type="hidden"
742
+ value="3"
743
+ />
744
+ <label
745
+ class="radioLabel pointer"
746
+ >
747
+ <svg
748
+ viewBox="0 0 40 40"
749
+ xmlns="http://www.w3.org/2000/svg"
750
+ >
751
+ <circle
752
+ class="rdBox"
753
+ cx="20"
754
+ cy="20"
755
+ r="19"
756
+ />
757
+ </svg>
758
+ </label>
759
+ </div>
760
+ <div
761
+ class="labelContainer grow basis shrinkOff"
762
+ data-id="boxComponent"
763
+ data-selector-id="box"
764
+ data-test-id="boxComponent"
765
+ >
766
+ <div
767
+ class="flex row alignItems_center"
768
+ data-id="flex"
769
+ data-test-id="flex"
770
+ >
771
+ <label
772
+ class="label title medium default font_primary
773
+ dotted cursor
774
+ primaryLabel pointer "
775
+ data-id="Delhi_label"
776
+ data-selector-id="label"
777
+ data-test-id="Delhi_label"
778
+ data-title="Delhi"
779
+ >
780
+ Delhi
781
+ </label>
782
+ <div
783
+ class="flex row alignItems_center"
784
+ data-id="flex"
785
+ data-test-id="flex"
786
+ >
787
+ <i
788
+ aria-hidden="true"
789
+ class="zd_font_icons basic icon-info infoIcon "
790
+ data-id="fontIcon"
791
+ data-selector-id="fontIcon"
792
+ data-test-id="fontIcon"
793
+ data-title="Capital of India"
794
+ style="--zd-iconfont-size: var(--zd_font_size16);"
795
+ />
796
+ </div>
797
+ </div>
798
+ <div
799
+ class="size12 lineheight_1_2 secondaryText "
800
+ data-title="Capital of India"
801
+ >
802
+ Capital of India
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </span>
807
+ </div>
808
+ </div>
809
+ </DocumentFragment>
810
+ `;
811
+
812
+ exports[`RadioField rendering with secondaryTextOptions 1`] = `
813
+ <DocumentFragment>
814
+ <div
815
+ class="container "
816
+ data-selector-id="radioField"
817
+ >
818
+ <div
819
+ class="fieldContainer radioContainer"
820
+ >
821
+ <span
822
+ class="radio radioWrap "
823
+ >
824
+ <div
825
+ aria-checked="false"
826
+ aria-readonly="false"
827
+ class="container pointer hoverEfffect flex rowdir both"
828
+ data-id="1"
829
+ data-selector-id="container"
830
+ data-test-id="1"
831
+ role="radio"
832
+ tabindex="0"
833
+ >
834
+ <div
835
+ class="radio
836
+ hoverprimary medium filled centerPathprimary withSecondaryText shrinkOff selfStart"
837
+ data-id="boxComponent"
838
+ data-selector-id="box"
839
+ data-test-id="boxComponent"
840
+ >
841
+ <input
842
+ id="0"
843
+ type="hidden"
844
+ value="1"
845
+ />
846
+ <label
847
+ class="radioLabel pointer"
848
+ >
849
+ <svg
850
+ viewBox="0 0 40 40"
851
+ xmlns="http://www.w3.org/2000/svg"
852
+ >
853
+ <circle
854
+ class="rdBox"
855
+ cx="20"
856
+ cy="20"
857
+ r="19"
858
+ />
859
+ </svg>
860
+ </label>
861
+ </div>
862
+ <div
863
+ class="labelContainer grow basis shrinkOff"
864
+ data-id="boxComponent"
865
+ data-selector-id="box"
866
+ data-test-id="boxComponent"
867
+ >
868
+ <label
869
+ class="label title medium default font_primary
870
+ dotted cursor
871
+ primaryLabel pointer "
872
+ data-id="Chennai_label"
873
+ data-selector-id="label"
874
+ data-test-id="Chennai_label"
875
+ data-title="Chennai"
876
+ >
877
+ Chennai
878
+ </label>
879
+ <div
880
+ class="size12 lineheight_1_2 secondaryText "
881
+ data-title="Tamil Nadu Capital"
882
+ >
883
+ Tamil Nadu Capital
884
+ </div>
885
+ </div>
886
+ </div>
887
+ </span>
888
+ <span
889
+ class="radio radioWrap "
890
+ >
891
+ <div
892
+ aria-checked="false"
893
+ aria-readonly="true"
894
+ class="container disabled flex rowdir both"
895
+ data-id="2"
896
+ data-selector-id="container"
897
+ data-test-id="2"
898
+ data-title="Disabled Option"
899
+ role="radio"
900
+ tabindex="-1"
901
+ >
902
+ <div
903
+ class="radio
904
+ medium filled centerPathprimary disabled withSecondaryText shrinkOff selfStart"
905
+ data-id="boxComponent"
906
+ data-selector-id="box"
907
+ data-test-id="boxComponent"
908
+ >
909
+ <input
910
+ id="1"
911
+ type="hidden"
912
+ value="2"
913
+ />
914
+ <label
915
+ class="radioLabel disabled"
916
+ >
917
+ <svg
918
+ viewBox="0 0 40 40"
919
+ xmlns="http://www.w3.org/2000/svg"
920
+ >
921
+ <circle
922
+ class="rdBox"
923
+ cx="20"
924
+ cy="20"
925
+ r="19"
926
+ />
927
+ </svg>
928
+ </label>
929
+ </div>
930
+ <div
931
+ class="labelContainer grow basis shrinkOff"
932
+ data-id="boxComponent"
933
+ data-selector-id="box"
934
+ data-test-id="boxComponent"
935
+ >
936
+ <label
937
+ class="label title medium default font_primary
938
+ dotted cursor disabled
939
+ primaryLabel "
940
+ data-id="Mumbai_label"
941
+ data-selector-id="label"
942
+ data-test-id="Mumbai_label"
943
+ data-title="Disabled Option"
944
+ >
945
+ Mumbai
946
+ </label>
947
+ <div
948
+ class="size12 lineheight_1_2 secondaryText "
949
+ >
950
+ Maharashtra Capital
951
+ </div>
952
+ </div>
953
+ </div>
954
+ </span>
955
+ <span
956
+ class="radio radioWrap "
957
+ >
958
+ <div
959
+ aria-checked="false"
960
+ aria-readonly="false"
961
+ class="container pointer hoverEfffect flex rowdir both"
962
+ data-id="3"
963
+ data-selector-id="container"
964
+ data-test-id="3"
965
+ role="radio"
966
+ tabindex="-1"
967
+ >
968
+ <div
969
+ class="radio
970
+ hoverprimary medium filled centerPathprimary withSecondaryText shrinkOff selfStart"
971
+ data-id="boxComponent"
972
+ data-selector-id="box"
973
+ data-test-id="boxComponent"
974
+ >
975
+ <input
976
+ id="2"
977
+ type="hidden"
978
+ value="3"
979
+ />
980
+ <label
981
+ class="radioLabel pointer"
982
+ >
983
+ <svg
984
+ viewBox="0 0 40 40"
985
+ xmlns="http://www.w3.org/2000/svg"
986
+ >
987
+ <circle
988
+ class="rdBox"
989
+ cx="20"
990
+ cy="20"
991
+ r="19"
992
+ />
993
+ </svg>
994
+ </label>
995
+ </div>
996
+ <div
997
+ class="labelContainer grow basis shrinkOff"
998
+ data-id="boxComponent"
999
+ data-selector-id="box"
1000
+ data-test-id="boxComponent"
1001
+ >
1002
+ <div
1003
+ class="flex row alignItems_center"
1004
+ data-id="flex"
1005
+ data-test-id="flex"
1006
+ >
1007
+ <label
1008
+ class="label title medium default font_primary
1009
+ dotted cursor
1010
+ primaryLabel pointer "
1011
+ data-id="Delhi_label"
1012
+ data-selector-id="label"
1013
+ data-test-id="Delhi_label"
1014
+ data-title="Delhi"
1015
+ >
1016
+ Delhi
1017
+ </label>
1018
+ <div
1019
+ class="flex row alignItems_center"
1020
+ data-id="flex"
1021
+ data-test-id="flex"
1022
+ >
1023
+ <i
1024
+ aria-hidden="true"
1025
+ class="zd_font_icons basic icon-info infoIcon "
1026
+ data-id="fontIcon"
1027
+ data-selector-id="fontIcon"
1028
+ data-test-id="fontIcon"
1029
+ data-title="Capital of India"
1030
+ style="--zd-iconfont-size: var(--zd_font_size16);"
1031
+ />
1032
+ </div>
1033
+ </div>
1034
+ <div
1035
+ class="size12 lineheight_1_2 secondaryText "
1036
+ data-title="Capital of India"
1037
+ >
1038
+ Capital of India
1039
+ </div>
1040
+ </div>
1041
+ </div>
1042
+ </span>
1043
+ </div>
1044
+ </div>
1045
+ </DocumentFragment>
1046
+ `;