@zohodesk/components 1.5.2 → 1.5.3

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 (39) hide show
  1. package/README.md +10 -0
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +2 -0
  3. package/assets/Appearance/light/mode/Component_LightMode.module.css +2 -0
  4. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +2 -0
  5. package/es/CheckBox/CheckBox.js +21 -10
  6. package/es/CheckBox/CheckBox.module.css +21 -6
  7. package/es/CheckBox/__tests__/CheckBox.spec.js +9 -0
  8. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +162 -93
  9. package/es/CheckBox/props/propTypes.js +4 -1
  10. package/es/Label/Label.js +19 -1
  11. package/es/Label/__tests__/Label.spec.js +58 -0
  12. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +66 -0
  13. package/es/Label/props/defaultProps.js +1 -0
  14. package/es/Label/props/propTypes.js +7 -1
  15. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +7 -7
  16. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +7 -7
  17. package/es/Radio/Radio.js +20 -9
  18. package/es/Radio/Radio.module.css +38 -5
  19. package/es/Radio/__tests__/Radio.spec.js +10 -0
  20. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +154 -81
  21. package/es/Radio/props/propTypes.js +4 -1
  22. package/lib/CheckBox/CheckBox.js +23 -9
  23. package/lib/CheckBox/CheckBox.module.css +21 -6
  24. package/lib/CheckBox/__tests__/CheckBox.spec.js +21 -12
  25. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +162 -93
  26. package/lib/CheckBox/props/propTypes.js +5 -1
  27. package/lib/Label/Label.js +21 -1
  28. package/lib/Label/__tests__/Label.spec.js +58 -0
  29. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +66 -0
  30. package/lib/Label/props/defaultProps.js +1 -0
  31. package/lib/Label/props/propTypes.js +8 -1
  32. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +7 -7
  33. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +7 -7
  34. package/lib/Radio/Radio.js +22 -8
  35. package/lib/Radio/Radio.module.css +38 -5
  36. package/lib/Radio/__tests__/Radio.spec.js +10 -0
  37. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +154 -81
  38. package/lib/Radio/props/propTypes.js +5 -1
  39. package/package.json +9 -9
package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap CHANGED
@@ -13,7 +13,7 @@ exports[`CheckBox component Should be disable 1`] = `
13
13
  tabindex="-1"
14
14
  >
15
15
  <div
16
- class="boxContainer medium filled disabled shrinkOff"
16
+ class="boxContainer medium filled disabled shrinkOff"
17
17
  data-id="boxComponent"
18
18
  data-selector-id="box"
19
19
  data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`CheckBox component Should be disable 1`] = `
47
47
  </label>
48
48
  </div>
49
49
  <div
50
- class="text grow basis shrinkOff"
50
+ class="labelContainer grow basis shrinkOff"
51
51
  data-id="boxComponent"
52
52
  data-selector-id="box"
53
53
  data-test-id="boxComponent"
@@ -55,8 +55,8 @@ exports[`CheckBox component Should be disable 1`] = `
55
55
  <label
56
56
  class="label title medium disable font_default
57
57
  dotted cursor
58
-
59
- disabled "
58
+
59
+ disabled "
60
60
  data-id="label"
61
61
  data-selector-id="label"
62
62
  data-test-id="label"
@@ -82,7 +82,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
82
82
  tabindex="-1"
83
83
  >
84
84
  <div
85
- class="boxContainer medium filled disabled shrinkOff"
85
+ class="boxContainer medium filled disabled shrinkOff"
86
86
  data-id="boxComponent"
87
87
  data-selector-id="box"
88
88
  data-test-id="boxComponent"
@@ -126,7 +126,7 @@ exports[`CheckBox component Should be render ID 1`] = `
126
126
  tabindex="0"
127
127
  >
128
128
  <div
129
- class="boxContainer medium filled shrinkOff"
129
+ class="boxContainer medium filled shrinkOff"
130
130
  data-id="boxComponent"
131
131
  data-selector-id="box"
132
132
  data-test-id="boxComponent"
@@ -155,7 +155,7 @@ exports[`CheckBox component Should be render ID 1`] = `
155
155
  </label>
156
156
  </div>
157
157
  <div
158
- class="text grow basis shrinkOff"
158
+ class="labelContainer grow basis shrinkOff"
159
159
  data-id="boxComponent"
160
160
  data-selector-id="box"
161
161
  data-test-id="boxComponent"
@@ -163,8 +163,8 @@ exports[`CheckBox component Should be render ID 1`] = `
163
163
  <label
164
164
  class="label title medium default font_default
165
165
  dotted cursor
166
-
167
- pointer "
166
+
167
+ pointer "
168
168
  data-id="label"
169
169
  data-selector-id="label"
170
170
  data-test-id="label"
@@ -191,7 +191,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
191
191
  tabindex="0"
192
192
  >
193
193
  <div
194
- class="boxContainer medium filled shrinkOff"
194
+ class="boxContainer medium filled shrinkOff"
195
195
  data-id="boxComponent"
196
196
  data-selector-id="box"
197
197
  data-test-id="boxComponent"
@@ -235,7 +235,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
235
235
  tabindex="0"
236
236
  >
237
237
  <div
238
- class="boxContainer medium filled shrinkOff"
238
+ class="boxContainer medium filled shrinkOff"
239
239
  data-id="boxComponent"
240
240
  data-selector-id="box"
241
241
  data-test-id="boxComponent"
@@ -280,7 +280,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
280
280
  tabindex="-1"
281
281
  >
282
282
  <div
283
- class="boxContainer medium filled disabled shrinkOff"
283
+ class="boxContainer medium filled disabled shrinkOff"
284
284
  data-id="boxComponent"
285
285
  data-selector-id="box"
286
286
  data-test-id="boxComponent"
@@ -308,7 +308,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
308
308
  </label>
309
309
  </div>
310
310
  <div
311
- class="text grow basis shrinkOff"
311
+ class="labelContainer grow basis shrinkOff"
312
312
  data-id="boxComponent"
313
313
  data-selector-id="box"
314
314
  data-test-id="boxComponent"
@@ -316,8 +316,8 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
316
316
  <label
317
317
  class="label title medium disable font_default
318
318
  dotted cursor
319
-
320
- disabled "
319
+
320
+ disabled "
321
321
  data-id="label"
322
322
  data-selector-id="label"
323
323
  data-test-id="label"
@@ -343,7 +343,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
343
343
  tabindex="0"
344
344
  >
345
345
  <div
346
- class="boxContainer medium filled shrinkOff"
346
+ class="boxContainer medium filled shrinkOff"
347
347
  data-id="boxComponent"
348
348
  data-selector-id="box"
349
349
  data-test-id="boxComponent"
@@ -387,7 +387,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
387
387
  tabindex="0"
388
388
  >
389
389
  <div
390
- class="boxContainer medium filled shrinkOff"
390
+ class="boxContainer medium filled shrinkOff"
391
391
  data-id="boxComponent"
392
392
  data-selector-id="box"
393
393
  data-test-id="boxComponent"
@@ -431,7 +431,7 @@ exports[`CheckBox component Should be render name 1`] = `
431
431
  tabindex="0"
432
432
  >
433
433
  <div
434
- class="boxContainer medium filled shrinkOff"
434
+ class="boxContainer medium filled shrinkOff"
435
435
  data-id="boxComponent"
436
436
  data-selector-id="box"
437
437
  data-test-id="boxComponent"
@@ -476,7 +476,7 @@ exports[`CheckBox component Should be render text 1`] = `
476
476
  tabindex="0"
477
477
  >
478
478
  <div
479
- class="boxContainer medium filled shrinkOff"
479
+ class="boxContainer medium filled shrinkOff"
480
480
  data-id="boxComponent"
481
481
  data-selector-id="box"
482
482
  data-test-id="boxComponent"
@@ -504,7 +504,7 @@ exports[`CheckBox component Should be render text 1`] = `
504
504
  </label>
505
505
  </div>
506
506
  <div
507
- class="text grow basis shrinkOff"
507
+ class="labelContainer grow basis shrinkOff"
508
508
  data-id="boxComponent"
509
509
  data-selector-id="box"
510
510
  data-test-id="boxComponent"
@@ -512,8 +512,8 @@ exports[`CheckBox component Should be render text 1`] = `
512
512
  <label
513
513
  class="label title medium default font_default
514
514
  dotted cursor
515
-
516
- pointer "
515
+
516
+ pointer "
517
517
  data-id="label"
518
518
  data-selector-id="label"
519
519
  data-test-id="label"
@@ -540,7 +540,7 @@ exports[`CheckBox component Should be render title 1`] = `
540
540
  tabindex="0"
541
541
  >
542
542
  <div
543
- class="boxContainer medium filled shrinkOff"
543
+ class="boxContainer medium filled shrinkOff"
544
544
  data-id="boxComponent"
545
545
  data-selector-id="box"
546
546
  data-test-id="boxComponent"
@@ -568,7 +568,7 @@ exports[`CheckBox component Should be render title 1`] = `
568
568
  </label>
569
569
  </div>
570
570
  <div
571
- class="text grow basis shrinkOff"
571
+ class="labelContainer grow basis shrinkOff"
572
572
  data-id="boxComponent"
573
573
  data-selector-id="box"
574
574
  data-test-id="boxComponent"
@@ -576,8 +576,8 @@ exports[`CheckBox component Should be render title 1`] = `
576
576
  <label
577
577
  class="label title medium default font_default
578
578
  dotted cursor
579
-
580
- pointer "
579
+
580
+ pointer "
581
581
  data-id="label"
582
582
  data-selector-id="label"
583
583
  data-test-id="label"
@@ -603,7 +603,7 @@ exports[`CheckBox component Should be render with the basic set of default props
603
603
  tabindex="0"
604
604
  >
605
605
  <div
606
- class="boxContainer medium filled shrinkOff"
606
+ class="boxContainer medium filled shrinkOff"
607
607
  data-id="boxComponent"
608
608
  data-selector-id="box"
609
609
  data-test-id="boxComponent"
@@ -647,7 +647,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
647
647
  tabindex="0"
648
648
  >
649
649
  <div
650
- class="boxContainer medium filled shrinkOff"
650
+ class="boxContainer medium filled shrinkOff"
651
651
  data-id="boxComponent"
652
652
  data-selector-id="box"
653
653
  data-test-id="boxComponent"
@@ -681,7 +681,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
681
681
  </label>
682
682
  </div>
683
683
  <div
684
- class="text grow basis shrinkOff"
684
+ class="labelContainer grow basis shrinkOff"
685
685
  data-id="boxComponent"
686
686
  data-selector-id="box"
687
687
  data-test-id="boxComponent"
@@ -689,8 +689,8 @@ exports[`CheckBox component Should render active - danger 1`] = `
689
689
  <label
690
690
  class="label title medium default font_default
691
691
  dotted cursor activedangerLabel
692
- checkeddangerLabel
693
- pointer "
692
+ checkeddangerLabel
693
+ pointer "
694
694
  data-id="label"
695
695
  data-selector-id="label"
696
696
  data-test-id="label"
@@ -716,7 +716,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
716
716
  tabindex="0"
717
717
  >
718
718
  <div
719
- class="boxContainer medium filled shrinkOff"
719
+ class="boxContainer medium filled shrinkOff"
720
720
  data-id="boxComponent"
721
721
  data-selector-id="box"
722
722
  data-test-id="boxComponent"
@@ -750,7 +750,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
750
750
  </label>
751
751
  </div>
752
752
  <div
753
- class="text grow basis shrinkOff"
753
+ class="labelContainer grow basis shrinkOff"
754
754
  data-id="boxComponent"
755
755
  data-selector-id="box"
756
756
  data-test-id="boxComponent"
@@ -758,8 +758,8 @@ exports[`CheckBox component Should render active - primary 1`] = `
758
758
  <label
759
759
  class="label title medium default font_default
760
760
  dotted cursor activeprimaryLabel
761
- checkedprimaryLabel
762
- pointer "
761
+ checkedprimaryLabel
762
+ pointer "
763
763
  data-id="label"
764
764
  data-selector-id="label"
765
765
  data-test-id="label"
@@ -785,7 +785,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
785
785
  tabindex="0"
786
786
  >
787
787
  <div
788
- class="boxContainer medium filled shrinkOff"
788
+ class="boxContainer medium filled shrinkOff"
789
789
  data-id="boxComponent"
790
790
  data-selector-id="box"
791
791
  data-test-id="boxComponent"
@@ -813,7 +813,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
813
813
  </label>
814
814
  </div>
815
815
  <div
816
- class="text grow basis shrinkOff"
816
+ class="labelContainer grow basis shrinkOff"
817
817
  data-id="boxComponent"
818
818
  data-selector-id="box"
819
819
  data-test-id="boxComponent"
@@ -821,8 +821,8 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
821
821
  <label
822
822
  class="label title medium default font_default
823
823
  dotted cursor
824
-
825
- pointer "
824
+
825
+ pointer "
826
826
  data-id="label"
827
827
  data-selector-id="label"
828
828
  data-test-id="label"
@@ -848,7 +848,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
848
848
  tabindex="0"
849
849
  >
850
850
  <div
851
- class="boxContainer medium filled shrinkOff"
851
+ class="boxContainer medium filled shrinkOff"
852
852
  data-id="boxComponent"
853
853
  data-selector-id="box"
854
854
  data-test-id="boxComponent"
@@ -876,7 +876,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
876
876
  </label>
877
877
  </div>
878
878
  <div
879
- class="text grow basis shrinkOff"
879
+ class="labelContainer grow basis shrinkOff"
880
880
  data-id="boxComponent"
881
881
  data-selector-id="box"
882
882
  data-test-id="boxComponent"
@@ -884,8 +884,8 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
884
884
  <label
885
885
  class="label title large default font_default
886
886
  dotted cursor
887
-
888
- pointer "
887
+
888
+ pointer "
889
889
  data-id="label"
890
890
  data-selector-id="label"
891
891
  data-test-id="label"
@@ -911,7 +911,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
911
911
  tabindex="0"
912
912
  >
913
913
  <div
914
- class="boxContainer medium filled shrinkOff"
914
+ class="boxContainer medium filled shrinkOff"
915
915
  data-id="boxComponent"
916
916
  data-selector-id="box"
917
917
  data-test-id="boxComponent"
@@ -939,7 +939,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
939
939
  </label>
940
940
  </div>
941
941
  <div
942
- class="text grow basis shrinkOff"
942
+ class="labelContainer grow basis shrinkOff"
943
943
  data-id="boxComponent"
944
944
  data-selector-id="box"
945
945
  data-test-id="boxComponent"
@@ -947,8 +947,8 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
947
947
  <label
948
948
  class="label title medium default font_default
949
949
  dotted cursor
950
-
951
- pointer "
950
+
951
+ pointer "
952
952
  data-id="label"
953
953
  data-selector-id="label"
954
954
  data-test-id="label"
@@ -974,7 +974,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
974
974
  tabindex="0"
975
975
  >
976
976
  <div
977
- class="boxContainer medium filled shrinkOff"
977
+ class="boxContainer medium filled shrinkOff"
978
978
  data-id="boxComponent"
979
979
  data-selector-id="box"
980
980
  data-test-id="boxComponent"
@@ -1002,7 +1002,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
1002
1002
  </label>
1003
1003
  </div>
1004
1004
  <div
1005
- class="text grow basis shrinkOff"
1005
+ class="labelContainer grow basis shrinkOff"
1006
1006
  data-id="boxComponent"
1007
1007
  data-selector-id="box"
1008
1008
  data-test-id="boxComponent"
@@ -1010,8 +1010,8 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
1010
1010
  <label
1011
1011
  class="label title medium default font_primary
1012
1012
  dotted cursor
1013
-
1014
- pointer "
1013
+
1014
+ pointer "
1015
1015
  data-id="label"
1016
1016
  data-selector-id="label"
1017
1017
  data-test-id="label"
@@ -1037,7 +1037,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
1037
1037
  tabindex="0"
1038
1038
  >
1039
1039
  <div
1040
- class="boxContainer medium filled shrinkOff"
1040
+ class="boxContainer medium filled shrinkOff"
1041
1041
  data-id="boxComponent"
1042
1042
  data-selector-id="box"
1043
1043
  data-test-id="boxComponent"
@@ -1065,7 +1065,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
1065
1065
  </label>
1066
1066
  </div>
1067
1067
  <div
1068
- class="text grow basis shrinkOff"
1068
+ class="labelContainer grow basis shrinkOff"
1069
1069
  data-id="boxComponent"
1070
1070
  data-selector-id="box"
1071
1071
  data-test-id="boxComponent"
@@ -1073,8 +1073,8 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
1073
1073
  <label
1074
1074
  class="label title small default font_default
1075
1075
  dotted cursor
1076
-
1077
- pointer "
1076
+
1077
+ pointer "
1078
1078
  data-id="label"
1079
1079
  data-selector-id="label"
1080
1080
  data-test-id="label"
@@ -1100,7 +1100,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1100
1100
  tabindex="0"
1101
1101
  >
1102
1102
  <div
1103
- class="boxContainer medium filled shrinkOff"
1103
+ class="boxContainer medium filled shrinkOff"
1104
1104
  data-id="boxComponent"
1105
1105
  data-selector-id="box"
1106
1106
  data-test-id="boxComponent"
@@ -1134,7 +1134,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1134
1134
  </label>
1135
1135
  </div>
1136
1136
  <div
1137
- class="text grow basis shrinkOff"
1137
+ class="labelContainer grow basis shrinkOff"
1138
1138
  data-id="boxComponent"
1139
1139
  data-selector-id="box"
1140
1140
  data-test-id="boxComponent"
@@ -1142,8 +1142,8 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
1142
1142
  <label
1143
1143
  class="label title medium default font_default
1144
1144
  dotted cursor activedangerLabel
1145
- checkeddangerLabel
1146
- pointer "
1145
+ checkeddangerLabel
1146
+ pointer "
1147
1147
  data-id="label"
1148
1148
  data-selector-id="label"
1149
1149
  data-test-id="label"
@@ -1169,7 +1169,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1169
1169
  tabindex="0"
1170
1170
  >
1171
1171
  <div
1172
- class="boxContainer medium filled shrinkOff"
1172
+ class="boxContainer medium filled shrinkOff"
1173
1173
  data-id="boxComponent"
1174
1174
  data-selector-id="box"
1175
1175
  data-test-id="boxComponent"
@@ -1203,7 +1203,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1203
1203
  </label>
1204
1204
  </div>
1205
1205
  <div
1206
- class="text grow basis shrinkOff"
1206
+ class="labelContainer grow basis shrinkOff"
1207
1207
  data-id="boxComponent"
1208
1208
  data-selector-id="box"
1209
1209
  data-test-id="boxComponent"
@@ -1211,8 +1211,8 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1211
1211
  <label
1212
1212
  class="label title medium default font_default
1213
1213
  dotted cursor activeprimaryLabel
1214
- checkedprimaryLabel
1215
- pointer "
1214
+ checkedprimaryLabel
1215
+ pointer "
1216
1216
  data-id="label"
1217
1217
  data-selector-id="label"
1218
1218
  data-test-id="label"
@@ -1225,6 +1225,75 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
1225
1225
  </DocumentFragment>
1226
1226
  `;
1227
1227
 
1228
+ exports[`CheckBox component Should render secondaryText 1`] = `
1229
+ <DocumentFragment>
1230
+ <div
1231
+ aria-checked="false"
1232
+ class="container pointer primary
1233
+ flex rowdir vCenter"
1234
+ data-id="checkBox"
1235
+ data-selector-id="container"
1236
+ data-test-id="checkBox"
1237
+ role="checkbox"
1238
+ tabindex="0"
1239
+ >
1240
+ <div
1241
+ class="boxContainer withSecondaryText medium filled shrinkOff selfStart"
1242
+ data-id="boxComponent"
1243
+ data-selector-id="box"
1244
+ data-test-id="boxComponent"
1245
+ >
1246
+ <input
1247
+ type="hidden"
1248
+ />
1249
+ <label
1250
+ class="checkbox pointer medium "
1251
+ >
1252
+ <svg
1253
+ viewBox="0 0 40 40"
1254
+ xmlns="http://www.w3.org/2000/svg"
1255
+ >
1256
+ <rect
1257
+ class="cbBox"
1258
+ height="38"
1259
+ rx="4"
1260
+ width="38"
1261
+ x="1"
1262
+ xmlns="http://www.w3.org/2000/svg"
1263
+ y="1"
1264
+ />
1265
+ </svg>
1266
+ </label>
1267
+ </div>
1268
+ <div
1269
+ class="labelContainer grow basis shrinkOff"
1270
+ data-id="boxComponent"
1271
+ data-selector-id="box"
1272
+ data-test-id="boxComponent"
1273
+ >
1274
+ <label
1275
+ class="label title medium default font_default
1276
+ dotted cursor
1277
+
1278
+ pointer "
1279
+ data-id="label"
1280
+ data-selector-id="label"
1281
+ data-test-id="label"
1282
+ data-title="checkboxText"
1283
+ >
1284
+ checkboxText
1285
+ </label>
1286
+ <div
1287
+ class="size12 lineheight_1_2 secondaryText "
1288
+ data-title="secondaryText"
1289
+ >
1290
+ secondaryText
1291
+ </div>
1292
+ </div>
1293
+ </div>
1294
+ </DocumentFragment>
1295
+ `;
1296
+
1228
1297
  exports[`CheckBox component Should render size - danger 1`] = `
1229
1298
  <DocumentFragment>
1230
1299
  <div
@@ -1238,7 +1307,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
1238
1307
  tabindex="0"
1239
1308
  >
1240
1309
  <div
1241
- class="boxContainer medium filled shrinkOff"
1310
+ class="boxContainer medium filled shrinkOff"
1242
1311
  data-id="boxComponent"
1243
1312
  data-selector-id="box"
1244
1313
  data-test-id="boxComponent"
@@ -1266,7 +1335,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
1266
1335
  </label>
1267
1336
  </div>
1268
1337
  <div
1269
- class="text grow basis shrinkOff"
1338
+ class="labelContainer grow basis shrinkOff"
1270
1339
  data-id="boxComponent"
1271
1340
  data-selector-id="box"
1272
1341
  data-test-id="boxComponent"
@@ -1274,8 +1343,8 @@ exports[`CheckBox component Should render size - danger 1`] = `
1274
1343
  <label
1275
1344
  class="label title medium danger font_default
1276
1345
  dotted cursor
1277
-
1278
- pointer "
1346
+
1347
+ pointer "
1279
1348
  data-id="label"
1280
1349
  data-selector-id="label"
1281
1350
  data-test-id="label"
@@ -1301,7 +1370,7 @@ exports[`CheckBox component Should render size - default 1`] = `
1301
1370
  tabindex="0"
1302
1371
  >
1303
1372
  <div
1304
- class="boxContainer medium filled shrinkOff"
1373
+ class="boxContainer medium filled shrinkOff"
1305
1374
  data-id="boxComponent"
1306
1375
  data-selector-id="box"
1307
1376
  data-test-id="boxComponent"
@@ -1329,7 +1398,7 @@ exports[`CheckBox component Should render size - default 1`] = `
1329
1398
  </label>
1330
1399
  </div>
1331
1400
  <div
1332
- class="text grow basis shrinkOff"
1401
+ class="labelContainer grow basis shrinkOff"
1333
1402
  data-id="boxComponent"
1334
1403
  data-selector-id="box"
1335
1404
  data-test-id="boxComponent"
@@ -1337,8 +1406,8 @@ exports[`CheckBox component Should render size - default 1`] = `
1337
1406
  <label
1338
1407
  class="label title medium default font_default
1339
1408
  dotted cursor
1340
-
1341
- pointer "
1409
+
1410
+ pointer "
1342
1411
  data-id="label"
1343
1412
  data-selector-id="label"
1344
1413
  data-test-id="label"
@@ -1364,7 +1433,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1364
1433
  tabindex="0"
1365
1434
  >
1366
1435
  <div
1367
- class="boxContainer medium filled shrinkOff"
1436
+ class="boxContainer medium filled shrinkOff"
1368
1437
  data-id="boxComponent"
1369
1438
  data-selector-id="box"
1370
1439
  data-test-id="boxComponent"
@@ -1392,7 +1461,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1392
1461
  </label>
1393
1462
  </div>
1394
1463
  <div
1395
- class="text grow basis shrinkOff"
1464
+ class="labelContainer grow basis shrinkOff"
1396
1465
  data-id="boxComponent"
1397
1466
  data-selector-id="box"
1398
1467
  data-test-id="boxComponent"
@@ -1400,8 +1469,8 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
1400
1469
  <label
1401
1470
  class="label title medium mandatory font_default
1402
1471
  dotted cursor
1403
-
1404
- pointer "
1472
+
1473
+ pointer "
1405
1474
  data-id="label"
1406
1475
  data-selector-id="label"
1407
1476
  data-test-id="label"
@@ -1427,7 +1496,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
1427
1496
  tabindex="0"
1428
1497
  >
1429
1498
  <div
1430
- class="boxContainer medium filled shrinkOff"
1499
+ class="boxContainer medium filled shrinkOff"
1431
1500
  data-id="boxComponent"
1432
1501
  data-selector-id="box"
1433
1502
  data-test-id="boxComponent"
@@ -1477,7 +1546,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
1477
1546
  tabindex="0"
1478
1547
  >
1479
1548
  <div
1480
- class="boxContainer medium filled shrinkOff"
1549
+ class="boxContainer medium filled shrinkOff"
1481
1550
  data-id="boxComponent"
1482
1551
  data-selector-id="box"
1483
1552
  data-test-id="boxComponent"
@@ -1505,7 +1574,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
1505
1574
  </label>
1506
1575
  </div>
1507
1576
  <div
1508
- class="text grow basis shrinkOff"
1577
+ class="labelContainer grow basis shrinkOff"
1509
1578
  data-id="boxComponent"
1510
1579
  data-selector-id="box"
1511
1580
  data-test-id="boxComponent"
@@ -1513,8 +1582,8 @@ exports[`CheckBox component Should render size - primary 1`] = `
1513
1582
  <label
1514
1583
  class="label title medium primary font_default
1515
1584
  dotted cursor
1516
-
1517
- pointer "
1585
+
1586
+ pointer "
1518
1587
  data-id="label"
1519
1588
  data-selector-id="label"
1520
1589
  data-test-id="label"
@@ -1540,7 +1609,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1540
1609
  tabindex="0"
1541
1610
  >
1542
1611
  <div
1543
- class="boxContainer medium filled shrinkOff"
1612
+ class="boxContainer medium filled shrinkOff"
1544
1613
  data-id="boxComponent"
1545
1614
  data-selector-id="box"
1546
1615
  data-test-id="boxComponent"
@@ -1568,7 +1637,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1568
1637
  </label>
1569
1638
  </div>
1570
1639
  <div
1571
- class="text grow basis shrinkOff"
1640
+ class="labelContainer grow basis shrinkOff"
1572
1641
  data-id="boxComponent"
1573
1642
  data-selector-id="box"
1574
1643
  data-test-id="boxComponent"
@@ -1576,8 +1645,8 @@ exports[`CheckBox component Should render size - secondary 1`] = `
1576
1645
  <label
1577
1646
  class="label title medium secondary font_default
1578
1647
  dotted cursor
1579
-
1580
- pointer "
1648
+
1649
+ pointer "
1581
1650
  data-id="label"
1582
1651
  data-selector-id="label"
1583
1652
  data-test-id="label"
@@ -1603,7 +1672,7 @@ exports[`CheckBox component Should render size - small 1`] = `
1603
1672
  tabindex="0"
1604
1673
  >
1605
1674
  <div
1606
- class="boxContainer small filled shrinkOff"
1675
+ class="boxContainer small filled shrinkOff"
1607
1676
  data-id="boxComponent"
1608
1677
  data-selector-id="box"
1609
1678
  data-test-id="boxComponent"
@@ -1656,7 +1725,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1656
1725
  tabindex="0"
1657
1726
  >
1658
1727
  <div
1659
- class="boxContainer medium filled shrinkOff"
1728
+ class="boxContainer medium filled shrinkOff"
1660
1729
  data-id="boxComponent"
1661
1730
  data-selector-id="box"
1662
1731
  data-test-id="boxComponent"
@@ -1709,7 +1778,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
1709
1778
  tabindex="-1"
1710
1779
  >
1711
1780
  <div
1712
- class="boxContainer medium filled shrinkOff"
1781
+ class="boxContainer medium filled shrinkOff"
1713
1782
  data-id="boxComponent"
1714
1783
  data-selector-id="box"
1715
1784
  data-test-id="boxComponent"
@@ -1760,7 +1829,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
1760
1829
  tabindex="0"
1761
1830
  >
1762
1831
  <div
1763
- class="boxContainer medium filled shrinkOff"
1832
+ class="boxContainer medium filled shrinkOff"
1764
1833
  data-id="boxComponent"
1765
1834
  data-selector-id="box"
1766
1835
  data-test-id="boxComponent"
@@ -1788,7 +1857,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
1788
1857
  </label>
1789
1858
  </div>
1790
1859
  <div
1791
- class="text grow basis shrinkOff"
1860
+ class="labelContainer grow basis shrinkOff"
1792
1861
  data-id="boxComponent"
1793
1862
  data-selector-id="box"
1794
1863
  data-test-id="boxComponent"
@@ -1821,7 +1890,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1821
1890
  tabindex="0"
1822
1891
  >
1823
1892
  <div
1824
- class="boxContainer medium customCBoxSizeClass filled shrinkOff"
1893
+ class="boxContainer medium customCBoxSizeClass filled shrinkOff"
1825
1894
  data-id="boxComponent"
1826
1895
  data-selector-id="box"
1827
1896
  data-test-id="boxComponent"
@@ -1855,7 +1924,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1855
1924
  </label>
1856
1925
  </div>
1857
1926
  <div
1858
- class="text grow basis shrinkOff"
1927
+ class="labelContainer grow basis shrinkOff"
1859
1928
  data-id="boxComponent"
1860
1929
  data-selector-id="box"
1861
1930
  data-test-id="boxComponent"
@@ -1863,8 +1932,8 @@ exports[`CheckBox component rendering the Custom class 1`] = `
1863
1932
  <label
1864
1933
  class="label title medium default font_default
1865
1934
  dotted cursor
1866
-
1867
- pointer customLabelClass "
1935
+
1936
+ pointer customLabelClass "
1868
1937
  data-id="label"
1869
1938
  data-selector-id="label"
1870
1939
  data-test-id="label"