@zohodesk/components 1.2.32 → 1.2.34
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.
- package/.cli/propValidation_report.html +1 -1
- package/README.md +8 -0
- package/es/AppContainer/__tests__/AppContainer.spec.js +82 -0
- package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +201 -0
- package/es/Button/__tests__/Button.spec.js +8 -21
- package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +0 -28
- package/es/CheckBox/__tests__/CheckBox.spec.js +240 -0
- package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1878 -0
- package/es/MultiSelect/AdvancedMultiSelect.js +6 -2
- package/es/MultiSelect/props/defaultProps.js +2 -1
- package/es/MultiSelect/props/propTypes.js +2 -1
- package/es/Radio/__tests__/Radio.spec.js +6 -9
- package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +128 -49
- package/es/RippleEffect/__tests__/RippleEffect.spec.js +1 -1
- package/es/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap +0 -10
- package/es/Select/GroupSelect.js +2 -2
- package/es/Tag/__tests__/Tag.spec.js +235 -0
- package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +3054 -0
- package/es/TextBox/__tests__/TextBox.spec.js +327 -0
- package/es/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +615 -0
- package/es/TextBox/props/propTypes.js +0 -3
- package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +268 -0
- package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +1784 -0
- package/es/TextBoxIcon/props/propTypes.js +1 -1
- package/es/Textarea/__tests__/Textarea.spec.js +228 -0
- package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +476 -0
- package/es/utils/dropDownUtils.js +4 -1
- package/es/v1/MultiSelect/AdvancedMultiSelect.js +6 -2
- package/es/v1/MultiSelect/props/defaultProps.js +2 -1
- package/es/v1/MultiSelect/props/propTypes.js +2 -1
- package/es/v1/Select/GroupSelect.js +2 -2
- package/lib/AppContainer/__tests__/AppContainer.spec.js +90 -0
- package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +201 -0
- package/lib/Button/__tests__/Button.spec.js +8 -21
- package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +0 -28
- package/lib/CheckBox/__tests__/CheckBox.spec.js +248 -0
- package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1878 -0
- package/lib/MultiSelect/AdvancedMultiSelect.js +5 -2
- package/lib/MultiSelect/props/defaultProps.js +2 -1
- package/lib/MultiSelect/props/propTypes.js +2 -1
- package/lib/Radio/__tests__/Radio.spec.js +9 -13
- package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +128 -49
- package/lib/RippleEffect/__tests__/RippleEffect.spec.js +1 -1
- package/lib/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap +0 -10
- package/lib/Select/GroupSelect.js +12 -12
- package/lib/Tag/__tests__/Tag.spec.js +252 -0
- package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +3054 -0
- package/lib/TextBox/__tests__/TextBox.spec.js +334 -0
- package/lib/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +615 -0
- package/lib/TextBox/props/propTypes.js +53 -51
- package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +279 -0
- package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +1784 -0
- package/lib/TextBoxIcon/props/propTypes.js +1 -1
- package/lib/Textarea/__tests__/Textarea.spec.js +235 -0
- package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +476 -0
- package/lib/utils/dropDownUtils.js +14 -2
- package/lib/v1/MultiSelect/AdvancedMultiSelect.js +5 -2
- package/lib/v1/MultiSelect/props/defaultProps.js +2 -1
- package/lib/v1/MultiSelect/props/propTypes.js +2 -1
- package/lib/v1/Select/GroupSelect.js +12 -12
- package/package.json +1 -1
- package/result.json +1 -1
|
@@ -0,0 +1,1878 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`CheckBox component Should be disable 1`] = `
|
|
4
|
+
<DocumentFragment>
|
|
5
|
+
<div
|
|
6
|
+
aria-checked="true"
|
|
7
|
+
class="container disabled
|
|
8
|
+
checkedprimary flex rowdir vCenter"
|
|
9
|
+
data-id="checkBox"
|
|
10
|
+
data-selector-id="container"
|
|
11
|
+
data-test-id="checkBox"
|
|
12
|
+
role="checkbox"
|
|
13
|
+
tabindex="-1"
|
|
14
|
+
>
|
|
15
|
+
<div
|
|
16
|
+
class="boxContainer medium filled shrinkOff"
|
|
17
|
+
data-id="boxComponent"
|
|
18
|
+
data-selector-id="box"
|
|
19
|
+
data-test-id="boxComponent"
|
|
20
|
+
>
|
|
21
|
+
<input
|
|
22
|
+
type="hidden"
|
|
23
|
+
/>
|
|
24
|
+
<label
|
|
25
|
+
class="checkbox disabled medium "
|
|
26
|
+
>
|
|
27
|
+
<svg
|
|
28
|
+
viewBox="0 0 40 40"
|
|
29
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
30
|
+
>
|
|
31
|
+
<path
|
|
32
|
+
class="cbBox"
|
|
33
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
34
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
35
|
+
/>
|
|
36
|
+
</svg>
|
|
37
|
+
<svg
|
|
38
|
+
class="tick mediumtick disabled"
|
|
39
|
+
viewBox="0 0 44 44"
|
|
40
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
41
|
+
>
|
|
42
|
+
<polyline
|
|
43
|
+
class="tickPath checkedtickPath"
|
|
44
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
45
|
+
/>
|
|
46
|
+
</svg>
|
|
47
|
+
</label>
|
|
48
|
+
</div>
|
|
49
|
+
<div
|
|
50
|
+
class="text grow basis shrinkOff"
|
|
51
|
+
data-id="boxComponent"
|
|
52
|
+
data-selector-id="box"
|
|
53
|
+
data-test-id="boxComponent"
|
|
54
|
+
>
|
|
55
|
+
<label
|
|
56
|
+
class="label title medium disable font_default
|
|
57
|
+
dotted cursor
|
|
58
|
+
|
|
59
|
+
disabled "
|
|
60
|
+
data-id="label"
|
|
61
|
+
data-selector-id="label"
|
|
62
|
+
data-test-id="label"
|
|
63
|
+
data-title="checkboxDisable"
|
|
64
|
+
>
|
|
65
|
+
checkboxDisable
|
|
66
|
+
</label>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</DocumentFragment>
|
|
70
|
+
`;
|
|
71
|
+
|
|
72
|
+
exports[`CheckBox component Should be isReadOnly 1`] = `
|
|
73
|
+
<DocumentFragment>
|
|
74
|
+
<div
|
|
75
|
+
aria-checked="false"
|
|
76
|
+
class="container readonly
|
|
77
|
+
inflex rowdir vCenter"
|
|
78
|
+
data-id="checkBox"
|
|
79
|
+
data-selector-id="container"
|
|
80
|
+
data-test-id="checkBox"
|
|
81
|
+
role="checkbox"
|
|
82
|
+
tabindex="-1"
|
|
83
|
+
>
|
|
84
|
+
<div
|
|
85
|
+
class="boxContainer medium filled shrinkOff"
|
|
86
|
+
data-id="boxComponent"
|
|
87
|
+
data-selector-id="box"
|
|
88
|
+
data-test-id="boxComponent"
|
|
89
|
+
>
|
|
90
|
+
<input
|
|
91
|
+
type="hidden"
|
|
92
|
+
/>
|
|
93
|
+
<label
|
|
94
|
+
class="checkbox readonly medium "
|
|
95
|
+
>
|
|
96
|
+
<svg
|
|
97
|
+
viewBox="0 0 40 40"
|
|
98
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
99
|
+
>
|
|
100
|
+
<rect
|
|
101
|
+
class="cbBox"
|
|
102
|
+
height="38"
|
|
103
|
+
rx="4"
|
|
104
|
+
width="38"
|
|
105
|
+
x="1"
|
|
106
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
107
|
+
y="1"
|
|
108
|
+
/>
|
|
109
|
+
</svg>
|
|
110
|
+
</label>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</DocumentFragment>
|
|
114
|
+
`;
|
|
115
|
+
|
|
116
|
+
exports[`CheckBox component Should be render ID 1`] = `
|
|
117
|
+
<DocumentFragment>
|
|
118
|
+
<div
|
|
119
|
+
aria-checked="false"
|
|
120
|
+
class="container pointer primary
|
|
121
|
+
flex rowdir vCenter"
|
|
122
|
+
data-id="checkBox"
|
|
123
|
+
data-selector-id="container"
|
|
124
|
+
data-test-id="checkBox"
|
|
125
|
+
role="checkbox"
|
|
126
|
+
tabindex="0"
|
|
127
|
+
>
|
|
128
|
+
<div
|
|
129
|
+
class="boxContainer medium filled shrinkOff"
|
|
130
|
+
data-id="boxComponent"
|
|
131
|
+
data-selector-id="box"
|
|
132
|
+
data-test-id="boxComponent"
|
|
133
|
+
>
|
|
134
|
+
<input
|
|
135
|
+
id="checkBoxId"
|
|
136
|
+
type="hidden"
|
|
137
|
+
/>
|
|
138
|
+
<label
|
|
139
|
+
class="checkbox pointer medium "
|
|
140
|
+
>
|
|
141
|
+
<svg
|
|
142
|
+
viewBox="0 0 40 40"
|
|
143
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
144
|
+
>
|
|
145
|
+
<rect
|
|
146
|
+
class="cbBox"
|
|
147
|
+
height="38"
|
|
148
|
+
rx="4"
|
|
149
|
+
width="38"
|
|
150
|
+
x="1"
|
|
151
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
152
|
+
y="1"
|
|
153
|
+
/>
|
|
154
|
+
</svg>
|
|
155
|
+
</label>
|
|
156
|
+
</div>
|
|
157
|
+
<div
|
|
158
|
+
class="text grow basis shrinkOff"
|
|
159
|
+
data-id="boxComponent"
|
|
160
|
+
data-selector-id="box"
|
|
161
|
+
data-test-id="boxComponent"
|
|
162
|
+
>
|
|
163
|
+
<label
|
|
164
|
+
class="label title medium default font_default
|
|
165
|
+
dotted cursor
|
|
166
|
+
|
|
167
|
+
pointer "
|
|
168
|
+
data-id="label"
|
|
169
|
+
data-selector-id="label"
|
|
170
|
+
data-test-id="label"
|
|
171
|
+
data-title="checkBoxText"
|
|
172
|
+
id="checkBoxId"
|
|
173
|
+
>
|
|
174
|
+
checkBoxText
|
|
175
|
+
</label>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
</DocumentFragment>
|
|
179
|
+
`;
|
|
180
|
+
|
|
181
|
+
exports[`CheckBox component Should be render activeStyle is minus 1`] = `
|
|
182
|
+
<DocumentFragment>
|
|
183
|
+
<div
|
|
184
|
+
aria-checked="false"
|
|
185
|
+
class="container pointer primary
|
|
186
|
+
inflex rowdir vCenter"
|
|
187
|
+
data-id="checkBox"
|
|
188
|
+
data-selector-id="container"
|
|
189
|
+
data-test-id="checkBox"
|
|
190
|
+
role="checkbox"
|
|
191
|
+
tabindex="0"
|
|
192
|
+
>
|
|
193
|
+
<div
|
|
194
|
+
class="boxContainer medium filled shrinkOff"
|
|
195
|
+
data-id="boxComponent"
|
|
196
|
+
data-selector-id="box"
|
|
197
|
+
data-test-id="boxComponent"
|
|
198
|
+
>
|
|
199
|
+
<input
|
|
200
|
+
type="hidden"
|
|
201
|
+
/>
|
|
202
|
+
<label
|
|
203
|
+
class="checkbox pointer medium "
|
|
204
|
+
>
|
|
205
|
+
<svg
|
|
206
|
+
viewBox="0 0 40 40"
|
|
207
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
208
|
+
>
|
|
209
|
+
<rect
|
|
210
|
+
class="cbBox"
|
|
211
|
+
height="38"
|
|
212
|
+
rx="4"
|
|
213
|
+
width="38"
|
|
214
|
+
x="1"
|
|
215
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
216
|
+
y="1"
|
|
217
|
+
/>
|
|
218
|
+
</svg>
|
|
219
|
+
</label>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</DocumentFragment>
|
|
223
|
+
`;
|
|
224
|
+
|
|
225
|
+
exports[`CheckBox component Should be render dataSelectorId 1`] = `
|
|
226
|
+
<DocumentFragment>
|
|
227
|
+
<div
|
|
228
|
+
aria-checked="false"
|
|
229
|
+
class="container pointer primary
|
|
230
|
+
inflex rowdir vCenter"
|
|
231
|
+
data-id="checkBox"
|
|
232
|
+
data-selector-id="container"
|
|
233
|
+
data-test-id="checkBox"
|
|
234
|
+
role="checkbox"
|
|
235
|
+
tabindex="0"
|
|
236
|
+
>
|
|
237
|
+
<div
|
|
238
|
+
class="boxContainer medium filled shrinkOff"
|
|
239
|
+
data-id="boxComponent"
|
|
240
|
+
data-selector-id="box"
|
|
241
|
+
data-test-id="boxComponent"
|
|
242
|
+
>
|
|
243
|
+
<input
|
|
244
|
+
type="hidden"
|
|
245
|
+
/>
|
|
246
|
+
<label
|
|
247
|
+
class="checkbox pointer medium "
|
|
248
|
+
>
|
|
249
|
+
<svg
|
|
250
|
+
viewBox="0 0 40 40"
|
|
251
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
252
|
+
>
|
|
253
|
+
<rect
|
|
254
|
+
class="cbBox"
|
|
255
|
+
height="38"
|
|
256
|
+
rx="4"
|
|
257
|
+
width="38"
|
|
258
|
+
x="1"
|
|
259
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
260
|
+
y="1"
|
|
261
|
+
/>
|
|
262
|
+
</svg>
|
|
263
|
+
</label>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
</DocumentFragment>
|
|
267
|
+
`;
|
|
268
|
+
|
|
269
|
+
exports[`CheckBox component Should be render disabledTitle and title 1`] = `
|
|
270
|
+
<DocumentFragment>
|
|
271
|
+
<div
|
|
272
|
+
aria-checked="false"
|
|
273
|
+
class="container disabled
|
|
274
|
+
flex rowdir vCenter"
|
|
275
|
+
data-id="checkBox"
|
|
276
|
+
data-selector-id="container"
|
|
277
|
+
data-test-id="checkBox"
|
|
278
|
+
data-title="checkBoxdisableTitle"
|
|
279
|
+
role="checkbox"
|
|
280
|
+
tabindex="-1"
|
|
281
|
+
>
|
|
282
|
+
<div
|
|
283
|
+
class="boxContainer medium filled shrinkOff"
|
|
284
|
+
data-id="boxComponent"
|
|
285
|
+
data-selector-id="box"
|
|
286
|
+
data-test-id="boxComponent"
|
|
287
|
+
>
|
|
288
|
+
<input
|
|
289
|
+
type="hidden"
|
|
290
|
+
/>
|
|
291
|
+
<label
|
|
292
|
+
class="checkbox disabled medium "
|
|
293
|
+
>
|
|
294
|
+
<svg
|
|
295
|
+
viewBox="0 0 40 40"
|
|
296
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
297
|
+
>
|
|
298
|
+
<rect
|
|
299
|
+
class="cbBox"
|
|
300
|
+
height="38"
|
|
301
|
+
rx="4"
|
|
302
|
+
width="38"
|
|
303
|
+
x="1"
|
|
304
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
305
|
+
y="1"
|
|
306
|
+
/>
|
|
307
|
+
</svg>
|
|
308
|
+
</label>
|
|
309
|
+
</div>
|
|
310
|
+
<div
|
|
311
|
+
class="text grow basis shrinkOff"
|
|
312
|
+
data-id="boxComponent"
|
|
313
|
+
data-selector-id="box"
|
|
314
|
+
data-test-id="boxComponent"
|
|
315
|
+
>
|
|
316
|
+
<label
|
|
317
|
+
class="label title medium disable font_default
|
|
318
|
+
dotted cursor
|
|
319
|
+
|
|
320
|
+
disabled "
|
|
321
|
+
data-id="label"
|
|
322
|
+
data-selector-id="label"
|
|
323
|
+
data-test-id="label"
|
|
324
|
+
data-title="checkBoxdisableTitle"
|
|
325
|
+
>
|
|
326
|
+
CheckBoxdisabledTitle
|
|
327
|
+
</label>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
</DocumentFragment>
|
|
331
|
+
`;
|
|
332
|
+
|
|
333
|
+
exports[`CheckBox component Should be render isClipped is false 1`] = `
|
|
334
|
+
<DocumentFragment>
|
|
335
|
+
<div
|
|
336
|
+
aria-checked="false"
|
|
337
|
+
class="container pointer primary
|
|
338
|
+
inflex rowdir vCenter"
|
|
339
|
+
data-id="checkBox"
|
|
340
|
+
data-selector-id="container"
|
|
341
|
+
data-test-id="checkBox"
|
|
342
|
+
role="checkbox"
|
|
343
|
+
tabindex="0"
|
|
344
|
+
>
|
|
345
|
+
<div
|
|
346
|
+
class="boxContainer medium filled shrinkOff"
|
|
347
|
+
data-id="boxComponent"
|
|
348
|
+
data-selector-id="box"
|
|
349
|
+
data-test-id="boxComponent"
|
|
350
|
+
>
|
|
351
|
+
<input
|
|
352
|
+
type="hidden"
|
|
353
|
+
/>
|
|
354
|
+
<label
|
|
355
|
+
class="checkbox pointer medium "
|
|
356
|
+
>
|
|
357
|
+
<svg
|
|
358
|
+
viewBox="0 0 40 40"
|
|
359
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
360
|
+
>
|
|
361
|
+
<rect
|
|
362
|
+
class="cbBox"
|
|
363
|
+
height="38"
|
|
364
|
+
rx="4"
|
|
365
|
+
width="38"
|
|
366
|
+
x="1"
|
|
367
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
368
|
+
y="1"
|
|
369
|
+
/>
|
|
370
|
+
</svg>
|
|
371
|
+
</label>
|
|
372
|
+
</div>
|
|
373
|
+
</div>
|
|
374
|
+
</DocumentFragment>
|
|
375
|
+
`;
|
|
376
|
+
|
|
377
|
+
exports[`CheckBox component Should be render isFilled 1`] = `
|
|
378
|
+
<DocumentFragment>
|
|
379
|
+
<div
|
|
380
|
+
aria-checked="false"
|
|
381
|
+
class="container pointer primary
|
|
382
|
+
inflex rowdir vCenter"
|
|
383
|
+
data-id="checkBox"
|
|
384
|
+
data-selector-id="container"
|
|
385
|
+
data-test-id="checkBox"
|
|
386
|
+
role="checkbox"
|
|
387
|
+
tabindex="0"
|
|
388
|
+
>
|
|
389
|
+
<div
|
|
390
|
+
class="boxContainer medium filled shrinkOff"
|
|
391
|
+
data-id="boxComponent"
|
|
392
|
+
data-selector-id="box"
|
|
393
|
+
data-test-id="boxComponent"
|
|
394
|
+
>
|
|
395
|
+
<input
|
|
396
|
+
type="hidden"
|
|
397
|
+
/>
|
|
398
|
+
<label
|
|
399
|
+
class="checkbox pointer medium "
|
|
400
|
+
>
|
|
401
|
+
<svg
|
|
402
|
+
viewBox="0 0 40 40"
|
|
403
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
404
|
+
>
|
|
405
|
+
<rect
|
|
406
|
+
class="cbBox"
|
|
407
|
+
height="38"
|
|
408
|
+
rx="4"
|
|
409
|
+
width="38"
|
|
410
|
+
x="1"
|
|
411
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
412
|
+
y="1"
|
|
413
|
+
/>
|
|
414
|
+
</svg>
|
|
415
|
+
</label>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
418
|
+
</DocumentFragment>
|
|
419
|
+
`;
|
|
420
|
+
|
|
421
|
+
exports[`CheckBox component Should be render name 1`] = `
|
|
422
|
+
<DocumentFragment>
|
|
423
|
+
<div
|
|
424
|
+
aria-checked="false"
|
|
425
|
+
class="container pointer primary
|
|
426
|
+
inflex rowdir vCenter"
|
|
427
|
+
data-id="checkBox"
|
|
428
|
+
data-selector-id="container"
|
|
429
|
+
data-test-id="checkBox"
|
|
430
|
+
role="checkbox"
|
|
431
|
+
tabindex="0"
|
|
432
|
+
>
|
|
433
|
+
<div
|
|
434
|
+
class="boxContainer medium filled shrinkOff"
|
|
435
|
+
data-id="boxComponent"
|
|
436
|
+
data-selector-id="box"
|
|
437
|
+
data-test-id="boxComponent"
|
|
438
|
+
>
|
|
439
|
+
<input
|
|
440
|
+
name="checkBoxName"
|
|
441
|
+
type="hidden"
|
|
442
|
+
/>
|
|
443
|
+
<label
|
|
444
|
+
class="checkbox pointer medium "
|
|
445
|
+
>
|
|
446
|
+
<svg
|
|
447
|
+
viewBox="0 0 40 40"
|
|
448
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
449
|
+
>
|
|
450
|
+
<rect
|
|
451
|
+
class="cbBox"
|
|
452
|
+
height="38"
|
|
453
|
+
rx="4"
|
|
454
|
+
width="38"
|
|
455
|
+
x="1"
|
|
456
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
457
|
+
y="1"
|
|
458
|
+
/>
|
|
459
|
+
</svg>
|
|
460
|
+
</label>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
</DocumentFragment>
|
|
464
|
+
`;
|
|
465
|
+
|
|
466
|
+
exports[`CheckBox component Should be render text 1`] = `
|
|
467
|
+
<DocumentFragment>
|
|
468
|
+
<div
|
|
469
|
+
aria-checked="false"
|
|
470
|
+
class="container pointer primary
|
|
471
|
+
flex rowdir vCenter"
|
|
472
|
+
data-id="checkBox"
|
|
473
|
+
data-selector-id="container"
|
|
474
|
+
data-test-id="checkBox"
|
|
475
|
+
role="checkbox"
|
|
476
|
+
tabindex="0"
|
|
477
|
+
>
|
|
478
|
+
<div
|
|
479
|
+
class="boxContainer medium filled shrinkOff"
|
|
480
|
+
data-id="boxComponent"
|
|
481
|
+
data-selector-id="box"
|
|
482
|
+
data-test-id="boxComponent"
|
|
483
|
+
>
|
|
484
|
+
<input
|
|
485
|
+
type="hidden"
|
|
486
|
+
/>
|
|
487
|
+
<label
|
|
488
|
+
class="checkbox pointer medium "
|
|
489
|
+
>
|
|
490
|
+
<svg
|
|
491
|
+
viewBox="0 0 40 40"
|
|
492
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
493
|
+
>
|
|
494
|
+
<rect
|
|
495
|
+
class="cbBox"
|
|
496
|
+
height="38"
|
|
497
|
+
rx="4"
|
|
498
|
+
width="38"
|
|
499
|
+
x="1"
|
|
500
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
501
|
+
y="1"
|
|
502
|
+
/>
|
|
503
|
+
</svg>
|
|
504
|
+
</label>
|
|
505
|
+
</div>
|
|
506
|
+
<div
|
|
507
|
+
class="text grow basis shrinkOff"
|
|
508
|
+
data-id="boxComponent"
|
|
509
|
+
data-selector-id="box"
|
|
510
|
+
data-test-id="boxComponent"
|
|
511
|
+
>
|
|
512
|
+
<label
|
|
513
|
+
class="label title medium default font_default
|
|
514
|
+
dotted cursor
|
|
515
|
+
|
|
516
|
+
pointer "
|
|
517
|
+
data-id="label"
|
|
518
|
+
data-selector-id="label"
|
|
519
|
+
data-test-id="label"
|
|
520
|
+
data-title="CheckBoxdisabledTitle"
|
|
521
|
+
>
|
|
522
|
+
CheckBoxdisabledTitle
|
|
523
|
+
</label>
|
|
524
|
+
</div>
|
|
525
|
+
</div>
|
|
526
|
+
</DocumentFragment>
|
|
527
|
+
`;
|
|
528
|
+
|
|
529
|
+
exports[`CheckBox component Should be render title 1`] = `
|
|
530
|
+
<DocumentFragment>
|
|
531
|
+
<div
|
|
532
|
+
aria-checked="false"
|
|
533
|
+
class="container pointer primary
|
|
534
|
+
flex rowdir vCenter"
|
|
535
|
+
data-id="checkBox"
|
|
536
|
+
data-selector-id="container"
|
|
537
|
+
data-test-id="checkBox"
|
|
538
|
+
data-title="checkBoxTitle"
|
|
539
|
+
role="checkbox"
|
|
540
|
+
tabindex="0"
|
|
541
|
+
>
|
|
542
|
+
<div
|
|
543
|
+
class="boxContainer medium filled shrinkOff"
|
|
544
|
+
data-id="boxComponent"
|
|
545
|
+
data-selector-id="box"
|
|
546
|
+
data-test-id="boxComponent"
|
|
547
|
+
>
|
|
548
|
+
<input
|
|
549
|
+
type="hidden"
|
|
550
|
+
/>
|
|
551
|
+
<label
|
|
552
|
+
class="checkbox pointer medium "
|
|
553
|
+
>
|
|
554
|
+
<svg
|
|
555
|
+
viewBox="0 0 40 40"
|
|
556
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
557
|
+
>
|
|
558
|
+
<rect
|
|
559
|
+
class="cbBox"
|
|
560
|
+
height="38"
|
|
561
|
+
rx="4"
|
|
562
|
+
width="38"
|
|
563
|
+
x="1"
|
|
564
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
565
|
+
y="1"
|
|
566
|
+
/>
|
|
567
|
+
</svg>
|
|
568
|
+
</label>
|
|
569
|
+
</div>
|
|
570
|
+
<div
|
|
571
|
+
class="text grow basis shrinkOff"
|
|
572
|
+
data-id="boxComponent"
|
|
573
|
+
data-selector-id="box"
|
|
574
|
+
data-test-id="boxComponent"
|
|
575
|
+
>
|
|
576
|
+
<label
|
|
577
|
+
class="label title medium default font_default
|
|
578
|
+
dotted cursor
|
|
579
|
+
|
|
580
|
+
pointer "
|
|
581
|
+
data-id="label"
|
|
582
|
+
data-selector-id="label"
|
|
583
|
+
data-test-id="label"
|
|
584
|
+
data-title="checkBoxTitle"
|
|
585
|
+
>
|
|
586
|
+
CheckBoxdisabledTitle
|
|
587
|
+
</label>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
</DocumentFragment>
|
|
591
|
+
`;
|
|
592
|
+
|
|
593
|
+
exports[`CheckBox component Should be render with the basic set of default props 1`] = `
|
|
594
|
+
<DocumentFragment>
|
|
595
|
+
<div
|
|
596
|
+
aria-checked="false"
|
|
597
|
+
class="container pointer primary
|
|
598
|
+
inflex rowdir vCenter"
|
|
599
|
+
data-id="checkBox"
|
|
600
|
+
data-selector-id="container"
|
|
601
|
+
data-test-id="checkBox"
|
|
602
|
+
role="checkbox"
|
|
603
|
+
tabindex="0"
|
|
604
|
+
>
|
|
605
|
+
<div
|
|
606
|
+
class="boxContainer medium filled shrinkOff"
|
|
607
|
+
data-id="boxComponent"
|
|
608
|
+
data-selector-id="box"
|
|
609
|
+
data-test-id="boxComponent"
|
|
610
|
+
>
|
|
611
|
+
<input
|
|
612
|
+
type="hidden"
|
|
613
|
+
/>
|
|
614
|
+
<label
|
|
615
|
+
class="checkbox pointer medium "
|
|
616
|
+
>
|
|
617
|
+
<svg
|
|
618
|
+
viewBox="0 0 40 40"
|
|
619
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
620
|
+
>
|
|
621
|
+
<rect
|
|
622
|
+
class="cbBox"
|
|
623
|
+
height="38"
|
|
624
|
+
rx="4"
|
|
625
|
+
width="38"
|
|
626
|
+
x="1"
|
|
627
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
628
|
+
y="1"
|
|
629
|
+
/>
|
|
630
|
+
</svg>
|
|
631
|
+
</label>
|
|
632
|
+
</div>
|
|
633
|
+
</div>
|
|
634
|
+
</DocumentFragment>
|
|
635
|
+
`;
|
|
636
|
+
|
|
637
|
+
exports[`CheckBox component Should render active - danger 1`] = `
|
|
638
|
+
<DocumentFragment>
|
|
639
|
+
<div
|
|
640
|
+
aria-checked="true"
|
|
641
|
+
class="container pointer danger
|
|
642
|
+
checkeddanger flex rowdir vCenter"
|
|
643
|
+
data-id="checkBox"
|
|
644
|
+
data-selector-id="container"
|
|
645
|
+
data-test-id="checkBox"
|
|
646
|
+
role="checkbox"
|
|
647
|
+
tabindex="0"
|
|
648
|
+
>
|
|
649
|
+
<div
|
|
650
|
+
class="boxContainer medium filled shrinkOff"
|
|
651
|
+
data-id="boxComponent"
|
|
652
|
+
data-selector-id="box"
|
|
653
|
+
data-test-id="boxComponent"
|
|
654
|
+
>
|
|
655
|
+
<input
|
|
656
|
+
type="hidden"
|
|
657
|
+
/>
|
|
658
|
+
<label
|
|
659
|
+
class="checkbox pointer medium "
|
|
660
|
+
>
|
|
661
|
+
<svg
|
|
662
|
+
viewBox="0 0 40 40"
|
|
663
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
664
|
+
>
|
|
665
|
+
<path
|
|
666
|
+
class="cbBox"
|
|
667
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
668
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
669
|
+
/>
|
|
670
|
+
</svg>
|
|
671
|
+
<svg
|
|
672
|
+
class="tick mediumtick "
|
|
673
|
+
viewBox="0 0 44 44"
|
|
674
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
675
|
+
>
|
|
676
|
+
<polyline
|
|
677
|
+
class="tickPath checkedtickPath"
|
|
678
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
679
|
+
/>
|
|
680
|
+
</svg>
|
|
681
|
+
</label>
|
|
682
|
+
</div>
|
|
683
|
+
<div
|
|
684
|
+
class="text grow basis shrinkOff"
|
|
685
|
+
data-id="boxComponent"
|
|
686
|
+
data-selector-id="box"
|
|
687
|
+
data-test-id="boxComponent"
|
|
688
|
+
>
|
|
689
|
+
<label
|
|
690
|
+
class="label title medium default font_default
|
|
691
|
+
dotted cursor activedangerLabel
|
|
692
|
+
checkeddangerLabel
|
|
693
|
+
pointer "
|
|
694
|
+
data-id="label"
|
|
695
|
+
data-selector-id="label"
|
|
696
|
+
data-test-id="label"
|
|
697
|
+
data-title="checkboxText"
|
|
698
|
+
>
|
|
699
|
+
checkboxText
|
|
700
|
+
</label>
|
|
701
|
+
</div>
|
|
702
|
+
</div>
|
|
703
|
+
</DocumentFragment>
|
|
704
|
+
`;
|
|
705
|
+
|
|
706
|
+
exports[`CheckBox component Should render active - primary 1`] = `
|
|
707
|
+
<DocumentFragment>
|
|
708
|
+
<div
|
|
709
|
+
aria-checked="true"
|
|
710
|
+
class="container pointer primary
|
|
711
|
+
checkedprimary flex rowdir vCenter"
|
|
712
|
+
data-id="checkBox"
|
|
713
|
+
data-selector-id="container"
|
|
714
|
+
data-test-id="checkBox"
|
|
715
|
+
role="checkbox"
|
|
716
|
+
tabindex="0"
|
|
717
|
+
>
|
|
718
|
+
<div
|
|
719
|
+
class="boxContainer medium filled shrinkOff"
|
|
720
|
+
data-id="boxComponent"
|
|
721
|
+
data-selector-id="box"
|
|
722
|
+
data-test-id="boxComponent"
|
|
723
|
+
>
|
|
724
|
+
<input
|
|
725
|
+
type="hidden"
|
|
726
|
+
/>
|
|
727
|
+
<label
|
|
728
|
+
class="checkbox pointer medium "
|
|
729
|
+
>
|
|
730
|
+
<svg
|
|
731
|
+
viewBox="0 0 40 40"
|
|
732
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
733
|
+
>
|
|
734
|
+
<path
|
|
735
|
+
class="cbBox"
|
|
736
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
737
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
738
|
+
/>
|
|
739
|
+
</svg>
|
|
740
|
+
<svg
|
|
741
|
+
class="tick mediumtick "
|
|
742
|
+
viewBox="0 0 44 44"
|
|
743
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
744
|
+
>
|
|
745
|
+
<polyline
|
|
746
|
+
class="tickPath checkedtickPath"
|
|
747
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
748
|
+
/>
|
|
749
|
+
</svg>
|
|
750
|
+
</label>
|
|
751
|
+
</div>
|
|
752
|
+
<div
|
|
753
|
+
class="text grow basis shrinkOff"
|
|
754
|
+
data-id="boxComponent"
|
|
755
|
+
data-selector-id="box"
|
|
756
|
+
data-test-id="boxComponent"
|
|
757
|
+
>
|
|
758
|
+
<label
|
|
759
|
+
class="label title medium default font_default
|
|
760
|
+
dotted cursor activeprimaryLabel
|
|
761
|
+
checkedprimaryLabel
|
|
762
|
+
pointer "
|
|
763
|
+
data-id="label"
|
|
764
|
+
data-selector-id="label"
|
|
765
|
+
data-test-id="label"
|
|
766
|
+
data-title="checkboxText"
|
|
767
|
+
>
|
|
768
|
+
checkboxText
|
|
769
|
+
</label>
|
|
770
|
+
</div>
|
|
771
|
+
</div>
|
|
772
|
+
</DocumentFragment>
|
|
773
|
+
`;
|
|
774
|
+
|
|
775
|
+
exports[`CheckBox component Should render labelSize - default 1`] = `
|
|
776
|
+
<DocumentFragment>
|
|
777
|
+
<div
|
|
778
|
+
aria-checked="false"
|
|
779
|
+
class="container pointer primary
|
|
780
|
+
flex rowdir vCenter"
|
|
781
|
+
data-id="checkBox"
|
|
782
|
+
data-selector-id="container"
|
|
783
|
+
data-test-id="checkBox"
|
|
784
|
+
role="checkbox"
|
|
785
|
+
tabindex="0"
|
|
786
|
+
>
|
|
787
|
+
<div
|
|
788
|
+
class="boxContainer medium filled shrinkOff"
|
|
789
|
+
data-id="boxComponent"
|
|
790
|
+
data-selector-id="box"
|
|
791
|
+
data-test-id="boxComponent"
|
|
792
|
+
>
|
|
793
|
+
<input
|
|
794
|
+
type="hidden"
|
|
795
|
+
/>
|
|
796
|
+
<label
|
|
797
|
+
class="checkbox pointer medium "
|
|
798
|
+
>
|
|
799
|
+
<svg
|
|
800
|
+
viewBox="0 0 40 40"
|
|
801
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
802
|
+
>
|
|
803
|
+
<rect
|
|
804
|
+
class="cbBox"
|
|
805
|
+
height="38"
|
|
806
|
+
rx="4"
|
|
807
|
+
width="38"
|
|
808
|
+
x="1"
|
|
809
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
810
|
+
y="1"
|
|
811
|
+
/>
|
|
812
|
+
</svg>
|
|
813
|
+
</label>
|
|
814
|
+
</div>
|
|
815
|
+
<div
|
|
816
|
+
class="text grow basis shrinkOff"
|
|
817
|
+
data-id="boxComponent"
|
|
818
|
+
data-selector-id="box"
|
|
819
|
+
data-test-id="boxComponent"
|
|
820
|
+
>
|
|
821
|
+
<label
|
|
822
|
+
class="label title medium default font_default
|
|
823
|
+
dotted cursor
|
|
824
|
+
|
|
825
|
+
pointer "
|
|
826
|
+
data-id="label"
|
|
827
|
+
data-selector-id="label"
|
|
828
|
+
data-test-id="label"
|
|
829
|
+
data-title="checkboxText"
|
|
830
|
+
>
|
|
831
|
+
checkboxText
|
|
832
|
+
</label>
|
|
833
|
+
</div>
|
|
834
|
+
</div>
|
|
835
|
+
</DocumentFragment>
|
|
836
|
+
`;
|
|
837
|
+
|
|
838
|
+
exports[`CheckBox component Should render labelSize - large 1`] = `
|
|
839
|
+
<DocumentFragment>
|
|
840
|
+
<div
|
|
841
|
+
aria-checked="false"
|
|
842
|
+
class="container pointer primary
|
|
843
|
+
flex rowdir vCenter"
|
|
844
|
+
data-id="checkBox"
|
|
845
|
+
data-selector-id="container"
|
|
846
|
+
data-test-id="checkBox"
|
|
847
|
+
role="checkbox"
|
|
848
|
+
tabindex="0"
|
|
849
|
+
>
|
|
850
|
+
<div
|
|
851
|
+
class="boxContainer medium filled shrinkOff"
|
|
852
|
+
data-id="boxComponent"
|
|
853
|
+
data-selector-id="box"
|
|
854
|
+
data-test-id="boxComponent"
|
|
855
|
+
>
|
|
856
|
+
<input
|
|
857
|
+
type="hidden"
|
|
858
|
+
/>
|
|
859
|
+
<label
|
|
860
|
+
class="checkbox pointer medium "
|
|
861
|
+
>
|
|
862
|
+
<svg
|
|
863
|
+
viewBox="0 0 40 40"
|
|
864
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
865
|
+
>
|
|
866
|
+
<rect
|
|
867
|
+
class="cbBox"
|
|
868
|
+
height="38"
|
|
869
|
+
rx="4"
|
|
870
|
+
width="38"
|
|
871
|
+
x="1"
|
|
872
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
873
|
+
y="1"
|
|
874
|
+
/>
|
|
875
|
+
</svg>
|
|
876
|
+
</label>
|
|
877
|
+
</div>
|
|
878
|
+
<div
|
|
879
|
+
class="text grow basis shrinkOff"
|
|
880
|
+
data-id="boxComponent"
|
|
881
|
+
data-selector-id="box"
|
|
882
|
+
data-test-id="boxComponent"
|
|
883
|
+
>
|
|
884
|
+
<label
|
|
885
|
+
class="label title large default font_default
|
|
886
|
+
dotted cursor
|
|
887
|
+
|
|
888
|
+
pointer "
|
|
889
|
+
data-id="label"
|
|
890
|
+
data-selector-id="label"
|
|
891
|
+
data-test-id="label"
|
|
892
|
+
data-title="checkboxText"
|
|
893
|
+
>
|
|
894
|
+
checkboxText
|
|
895
|
+
</label>
|
|
896
|
+
</div>
|
|
897
|
+
</div>
|
|
898
|
+
</DocumentFragment>
|
|
899
|
+
`;
|
|
900
|
+
|
|
901
|
+
exports[`CheckBox component Should render labelSize - medium 1`] = `
|
|
902
|
+
<DocumentFragment>
|
|
903
|
+
<div
|
|
904
|
+
aria-checked="false"
|
|
905
|
+
class="container pointer primary
|
|
906
|
+
flex rowdir vCenter"
|
|
907
|
+
data-id="checkBox"
|
|
908
|
+
data-selector-id="container"
|
|
909
|
+
data-test-id="checkBox"
|
|
910
|
+
role="checkbox"
|
|
911
|
+
tabindex="0"
|
|
912
|
+
>
|
|
913
|
+
<div
|
|
914
|
+
class="boxContainer medium filled shrinkOff"
|
|
915
|
+
data-id="boxComponent"
|
|
916
|
+
data-selector-id="box"
|
|
917
|
+
data-test-id="boxComponent"
|
|
918
|
+
>
|
|
919
|
+
<input
|
|
920
|
+
type="hidden"
|
|
921
|
+
/>
|
|
922
|
+
<label
|
|
923
|
+
class="checkbox pointer medium "
|
|
924
|
+
>
|
|
925
|
+
<svg
|
|
926
|
+
viewBox="0 0 40 40"
|
|
927
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
928
|
+
>
|
|
929
|
+
<rect
|
|
930
|
+
class="cbBox"
|
|
931
|
+
height="38"
|
|
932
|
+
rx="4"
|
|
933
|
+
width="38"
|
|
934
|
+
x="1"
|
|
935
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
936
|
+
y="1"
|
|
937
|
+
/>
|
|
938
|
+
</svg>
|
|
939
|
+
</label>
|
|
940
|
+
</div>
|
|
941
|
+
<div
|
|
942
|
+
class="text grow basis shrinkOff"
|
|
943
|
+
data-id="boxComponent"
|
|
944
|
+
data-selector-id="box"
|
|
945
|
+
data-test-id="boxComponent"
|
|
946
|
+
>
|
|
947
|
+
<label
|
|
948
|
+
class="label title medium default font_default
|
|
949
|
+
dotted cursor
|
|
950
|
+
|
|
951
|
+
pointer "
|
|
952
|
+
data-id="label"
|
|
953
|
+
data-selector-id="label"
|
|
954
|
+
data-test-id="label"
|
|
955
|
+
data-title="checkboxText"
|
|
956
|
+
>
|
|
957
|
+
checkboxText
|
|
958
|
+
</label>
|
|
959
|
+
</div>
|
|
960
|
+
</div>
|
|
961
|
+
</DocumentFragment>
|
|
962
|
+
`;
|
|
963
|
+
|
|
964
|
+
exports[`CheckBox component Should render labelSize - primary 1`] = `
|
|
965
|
+
<DocumentFragment>
|
|
966
|
+
<div
|
|
967
|
+
aria-checked="false"
|
|
968
|
+
class="container pointer primary
|
|
969
|
+
flex rowdir vCenter"
|
|
970
|
+
data-id="checkBox"
|
|
971
|
+
data-selector-id="container"
|
|
972
|
+
data-test-id="checkBox"
|
|
973
|
+
role="checkbox"
|
|
974
|
+
tabindex="0"
|
|
975
|
+
>
|
|
976
|
+
<div
|
|
977
|
+
class="boxContainer medium filled shrinkOff"
|
|
978
|
+
data-id="boxComponent"
|
|
979
|
+
data-selector-id="box"
|
|
980
|
+
data-test-id="boxComponent"
|
|
981
|
+
>
|
|
982
|
+
<input
|
|
983
|
+
type="hidden"
|
|
984
|
+
/>
|
|
985
|
+
<label
|
|
986
|
+
class="checkbox pointer medium "
|
|
987
|
+
>
|
|
988
|
+
<svg
|
|
989
|
+
viewBox="0 0 40 40"
|
|
990
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
991
|
+
>
|
|
992
|
+
<rect
|
|
993
|
+
class="cbBox"
|
|
994
|
+
height="38"
|
|
995
|
+
rx="4"
|
|
996
|
+
width="38"
|
|
997
|
+
x="1"
|
|
998
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
999
|
+
y="1"
|
|
1000
|
+
/>
|
|
1001
|
+
</svg>
|
|
1002
|
+
</label>
|
|
1003
|
+
</div>
|
|
1004
|
+
<div
|
|
1005
|
+
class="text grow basis shrinkOff"
|
|
1006
|
+
data-id="boxComponent"
|
|
1007
|
+
data-selector-id="box"
|
|
1008
|
+
data-test-id="boxComponent"
|
|
1009
|
+
>
|
|
1010
|
+
<label
|
|
1011
|
+
class="label title medium default font_primary
|
|
1012
|
+
dotted cursor
|
|
1013
|
+
|
|
1014
|
+
pointer "
|
|
1015
|
+
data-id="label"
|
|
1016
|
+
data-selector-id="label"
|
|
1017
|
+
data-test-id="label"
|
|
1018
|
+
data-title="checkboxText"
|
|
1019
|
+
>
|
|
1020
|
+
checkboxText
|
|
1021
|
+
</label>
|
|
1022
|
+
</div>
|
|
1023
|
+
</div>
|
|
1024
|
+
</DocumentFragment>
|
|
1025
|
+
`;
|
|
1026
|
+
|
|
1027
|
+
exports[`CheckBox component Should render labelSize - small 1`] = `
|
|
1028
|
+
<DocumentFragment>
|
|
1029
|
+
<div
|
|
1030
|
+
aria-checked="false"
|
|
1031
|
+
class="container pointer primary
|
|
1032
|
+
flex rowdir vCenter"
|
|
1033
|
+
data-id="checkBox"
|
|
1034
|
+
data-selector-id="container"
|
|
1035
|
+
data-test-id="checkBox"
|
|
1036
|
+
role="checkbox"
|
|
1037
|
+
tabindex="0"
|
|
1038
|
+
>
|
|
1039
|
+
<div
|
|
1040
|
+
class="boxContainer medium filled shrinkOff"
|
|
1041
|
+
data-id="boxComponent"
|
|
1042
|
+
data-selector-id="box"
|
|
1043
|
+
data-test-id="boxComponent"
|
|
1044
|
+
>
|
|
1045
|
+
<input
|
|
1046
|
+
type="hidden"
|
|
1047
|
+
/>
|
|
1048
|
+
<label
|
|
1049
|
+
class="checkbox pointer medium "
|
|
1050
|
+
>
|
|
1051
|
+
<svg
|
|
1052
|
+
viewBox="0 0 40 40"
|
|
1053
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1054
|
+
>
|
|
1055
|
+
<rect
|
|
1056
|
+
class="cbBox"
|
|
1057
|
+
height="38"
|
|
1058
|
+
rx="4"
|
|
1059
|
+
width="38"
|
|
1060
|
+
x="1"
|
|
1061
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1062
|
+
y="1"
|
|
1063
|
+
/>
|
|
1064
|
+
</svg>
|
|
1065
|
+
</label>
|
|
1066
|
+
</div>
|
|
1067
|
+
<div
|
|
1068
|
+
class="text grow basis shrinkOff"
|
|
1069
|
+
data-id="boxComponent"
|
|
1070
|
+
data-selector-id="box"
|
|
1071
|
+
data-test-id="boxComponent"
|
|
1072
|
+
>
|
|
1073
|
+
<label
|
|
1074
|
+
class="label title small default font_default
|
|
1075
|
+
dotted cursor
|
|
1076
|
+
|
|
1077
|
+
pointer "
|
|
1078
|
+
data-id="label"
|
|
1079
|
+
data-selector-id="label"
|
|
1080
|
+
data-test-id="label"
|
|
1081
|
+
data-title="checkboxText"
|
|
1082
|
+
>
|
|
1083
|
+
checkboxText
|
|
1084
|
+
</label>
|
|
1085
|
+
</div>
|
|
1086
|
+
</div>
|
|
1087
|
+
</DocumentFragment>
|
|
1088
|
+
`;
|
|
1089
|
+
|
|
1090
|
+
exports[`CheckBox component Should render palette and checkbox with checked - danger 1`] = `
|
|
1091
|
+
<DocumentFragment>
|
|
1092
|
+
<div
|
|
1093
|
+
aria-checked="true"
|
|
1094
|
+
class="container pointer danger
|
|
1095
|
+
checkeddanger flex rowdir vCenter"
|
|
1096
|
+
data-id="checkBox"
|
|
1097
|
+
data-selector-id="container"
|
|
1098
|
+
data-test-id="checkBox"
|
|
1099
|
+
role="checkbox"
|
|
1100
|
+
tabindex="0"
|
|
1101
|
+
>
|
|
1102
|
+
<div
|
|
1103
|
+
class="boxContainer medium filled shrinkOff"
|
|
1104
|
+
data-id="boxComponent"
|
|
1105
|
+
data-selector-id="box"
|
|
1106
|
+
data-test-id="boxComponent"
|
|
1107
|
+
>
|
|
1108
|
+
<input
|
|
1109
|
+
type="hidden"
|
|
1110
|
+
/>
|
|
1111
|
+
<label
|
|
1112
|
+
class="checkbox pointer medium "
|
|
1113
|
+
>
|
|
1114
|
+
<svg
|
|
1115
|
+
viewBox="0 0 40 40"
|
|
1116
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1117
|
+
>
|
|
1118
|
+
<path
|
|
1119
|
+
class="cbBox"
|
|
1120
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
1121
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1122
|
+
/>
|
|
1123
|
+
</svg>
|
|
1124
|
+
<svg
|
|
1125
|
+
class="tick mediumtick "
|
|
1126
|
+
viewBox="0 0 44 44"
|
|
1127
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1128
|
+
>
|
|
1129
|
+
<polyline
|
|
1130
|
+
class="tickPath checkedtickPath"
|
|
1131
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
1132
|
+
/>
|
|
1133
|
+
</svg>
|
|
1134
|
+
</label>
|
|
1135
|
+
</div>
|
|
1136
|
+
<div
|
|
1137
|
+
class="text grow basis shrinkOff"
|
|
1138
|
+
data-id="boxComponent"
|
|
1139
|
+
data-selector-id="box"
|
|
1140
|
+
data-test-id="boxComponent"
|
|
1141
|
+
>
|
|
1142
|
+
<label
|
|
1143
|
+
class="label title medium default font_default
|
|
1144
|
+
dotted cursor activedangerLabel
|
|
1145
|
+
checkeddangerLabel
|
|
1146
|
+
pointer "
|
|
1147
|
+
data-id="label"
|
|
1148
|
+
data-selector-id="label"
|
|
1149
|
+
data-test-id="label"
|
|
1150
|
+
data-title="checkBoxTest"
|
|
1151
|
+
>
|
|
1152
|
+
checkBoxTest
|
|
1153
|
+
</label>
|
|
1154
|
+
</div>
|
|
1155
|
+
</div>
|
|
1156
|
+
</DocumentFragment>
|
|
1157
|
+
`;
|
|
1158
|
+
|
|
1159
|
+
exports[`CheckBox component Should render palette and checkbox with checked - primary 1`] = `
|
|
1160
|
+
<DocumentFragment>
|
|
1161
|
+
<div
|
|
1162
|
+
aria-checked="true"
|
|
1163
|
+
class="container pointer primary
|
|
1164
|
+
checkedprimary flex rowdir vCenter"
|
|
1165
|
+
data-id="checkBox"
|
|
1166
|
+
data-selector-id="container"
|
|
1167
|
+
data-test-id="checkBox"
|
|
1168
|
+
role="checkbox"
|
|
1169
|
+
tabindex="0"
|
|
1170
|
+
>
|
|
1171
|
+
<div
|
|
1172
|
+
class="boxContainer medium filled shrinkOff"
|
|
1173
|
+
data-id="boxComponent"
|
|
1174
|
+
data-selector-id="box"
|
|
1175
|
+
data-test-id="boxComponent"
|
|
1176
|
+
>
|
|
1177
|
+
<input
|
|
1178
|
+
type="hidden"
|
|
1179
|
+
/>
|
|
1180
|
+
<label
|
|
1181
|
+
class="checkbox pointer medium "
|
|
1182
|
+
>
|
|
1183
|
+
<svg
|
|
1184
|
+
viewBox="0 0 40 40"
|
|
1185
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1186
|
+
>
|
|
1187
|
+
<path
|
|
1188
|
+
class="cbBox"
|
|
1189
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
1190
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1191
|
+
/>
|
|
1192
|
+
</svg>
|
|
1193
|
+
<svg
|
|
1194
|
+
class="tick mediumtick "
|
|
1195
|
+
viewBox="0 0 44 44"
|
|
1196
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1197
|
+
>
|
|
1198
|
+
<polyline
|
|
1199
|
+
class="tickPath checkedtickPath"
|
|
1200
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
1201
|
+
/>
|
|
1202
|
+
</svg>
|
|
1203
|
+
</label>
|
|
1204
|
+
</div>
|
|
1205
|
+
<div
|
|
1206
|
+
class="text grow basis shrinkOff"
|
|
1207
|
+
data-id="boxComponent"
|
|
1208
|
+
data-selector-id="box"
|
|
1209
|
+
data-test-id="boxComponent"
|
|
1210
|
+
>
|
|
1211
|
+
<label
|
|
1212
|
+
class="label title medium default font_default
|
|
1213
|
+
dotted cursor activeprimaryLabel
|
|
1214
|
+
checkedprimaryLabel
|
|
1215
|
+
pointer "
|
|
1216
|
+
data-id="label"
|
|
1217
|
+
data-selector-id="label"
|
|
1218
|
+
data-test-id="label"
|
|
1219
|
+
data-title="checkBoxTest"
|
|
1220
|
+
>
|
|
1221
|
+
checkBoxTest
|
|
1222
|
+
</label>
|
|
1223
|
+
</div>
|
|
1224
|
+
</div>
|
|
1225
|
+
</DocumentFragment>
|
|
1226
|
+
`;
|
|
1227
|
+
|
|
1228
|
+
exports[`CheckBox component Should render size - danger 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 medium filled shrinkOff"
|
|
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="text 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 danger 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
|
+
</div>
|
|
1288
|
+
</DocumentFragment>
|
|
1289
|
+
`;
|
|
1290
|
+
|
|
1291
|
+
exports[`CheckBox component Should render size - default 1`] = `
|
|
1292
|
+
<DocumentFragment>
|
|
1293
|
+
<div
|
|
1294
|
+
aria-checked="false"
|
|
1295
|
+
class="container pointer primary
|
|
1296
|
+
flex rowdir vCenter"
|
|
1297
|
+
data-id="checkBox"
|
|
1298
|
+
data-selector-id="container"
|
|
1299
|
+
data-test-id="checkBox"
|
|
1300
|
+
role="checkbox"
|
|
1301
|
+
tabindex="0"
|
|
1302
|
+
>
|
|
1303
|
+
<div
|
|
1304
|
+
class="boxContainer medium filled shrinkOff"
|
|
1305
|
+
data-id="boxComponent"
|
|
1306
|
+
data-selector-id="box"
|
|
1307
|
+
data-test-id="boxComponent"
|
|
1308
|
+
>
|
|
1309
|
+
<input
|
|
1310
|
+
type="hidden"
|
|
1311
|
+
/>
|
|
1312
|
+
<label
|
|
1313
|
+
class="checkbox pointer medium "
|
|
1314
|
+
>
|
|
1315
|
+
<svg
|
|
1316
|
+
viewBox="0 0 40 40"
|
|
1317
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1318
|
+
>
|
|
1319
|
+
<rect
|
|
1320
|
+
class="cbBox"
|
|
1321
|
+
height="38"
|
|
1322
|
+
rx="4"
|
|
1323
|
+
width="38"
|
|
1324
|
+
x="1"
|
|
1325
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1326
|
+
y="1"
|
|
1327
|
+
/>
|
|
1328
|
+
</svg>
|
|
1329
|
+
</label>
|
|
1330
|
+
</div>
|
|
1331
|
+
<div
|
|
1332
|
+
class="text grow basis shrinkOff"
|
|
1333
|
+
data-id="boxComponent"
|
|
1334
|
+
data-selector-id="box"
|
|
1335
|
+
data-test-id="boxComponent"
|
|
1336
|
+
>
|
|
1337
|
+
<label
|
|
1338
|
+
class="label title medium default font_default
|
|
1339
|
+
dotted cursor
|
|
1340
|
+
|
|
1341
|
+
pointer "
|
|
1342
|
+
data-id="label"
|
|
1343
|
+
data-selector-id="label"
|
|
1344
|
+
data-test-id="label"
|
|
1345
|
+
data-title="checkboxText"
|
|
1346
|
+
>
|
|
1347
|
+
checkboxText
|
|
1348
|
+
</label>
|
|
1349
|
+
</div>
|
|
1350
|
+
</div>
|
|
1351
|
+
</DocumentFragment>
|
|
1352
|
+
`;
|
|
1353
|
+
|
|
1354
|
+
exports[`CheckBox component Should render size - mandatory 1`] = `
|
|
1355
|
+
<DocumentFragment>
|
|
1356
|
+
<div
|
|
1357
|
+
aria-checked="false"
|
|
1358
|
+
class="container pointer primary
|
|
1359
|
+
flex rowdir vCenter"
|
|
1360
|
+
data-id="checkBox"
|
|
1361
|
+
data-selector-id="container"
|
|
1362
|
+
data-test-id="checkBox"
|
|
1363
|
+
role="checkbox"
|
|
1364
|
+
tabindex="0"
|
|
1365
|
+
>
|
|
1366
|
+
<div
|
|
1367
|
+
class="boxContainer medium filled shrinkOff"
|
|
1368
|
+
data-id="boxComponent"
|
|
1369
|
+
data-selector-id="box"
|
|
1370
|
+
data-test-id="boxComponent"
|
|
1371
|
+
>
|
|
1372
|
+
<input
|
|
1373
|
+
type="hidden"
|
|
1374
|
+
/>
|
|
1375
|
+
<label
|
|
1376
|
+
class="checkbox pointer medium "
|
|
1377
|
+
>
|
|
1378
|
+
<svg
|
|
1379
|
+
viewBox="0 0 40 40"
|
|
1380
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1381
|
+
>
|
|
1382
|
+
<rect
|
|
1383
|
+
class="cbBox"
|
|
1384
|
+
height="38"
|
|
1385
|
+
rx="4"
|
|
1386
|
+
width="38"
|
|
1387
|
+
x="1"
|
|
1388
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1389
|
+
y="1"
|
|
1390
|
+
/>
|
|
1391
|
+
</svg>
|
|
1392
|
+
</label>
|
|
1393
|
+
</div>
|
|
1394
|
+
<div
|
|
1395
|
+
class="text grow basis shrinkOff"
|
|
1396
|
+
data-id="boxComponent"
|
|
1397
|
+
data-selector-id="box"
|
|
1398
|
+
data-test-id="boxComponent"
|
|
1399
|
+
>
|
|
1400
|
+
<label
|
|
1401
|
+
class="label title medium mandatory font_default
|
|
1402
|
+
dotted cursor
|
|
1403
|
+
|
|
1404
|
+
pointer "
|
|
1405
|
+
data-id="label"
|
|
1406
|
+
data-selector-id="label"
|
|
1407
|
+
data-test-id="label"
|
|
1408
|
+
data-title="checkboxText"
|
|
1409
|
+
>
|
|
1410
|
+
checkboxText
|
|
1411
|
+
</label>
|
|
1412
|
+
</div>
|
|
1413
|
+
</div>
|
|
1414
|
+
</DocumentFragment>
|
|
1415
|
+
`;
|
|
1416
|
+
|
|
1417
|
+
exports[`CheckBox component Should render size - medium 1`] = `
|
|
1418
|
+
<DocumentFragment>
|
|
1419
|
+
<div
|
|
1420
|
+
aria-checked="true"
|
|
1421
|
+
class="container pointer primary
|
|
1422
|
+
checkedprimary inflex rowdir vCenter"
|
|
1423
|
+
data-id="checkBox"
|
|
1424
|
+
data-selector-id="container"
|
|
1425
|
+
data-test-id="checkBox"
|
|
1426
|
+
role="checkbox"
|
|
1427
|
+
tabindex="0"
|
|
1428
|
+
>
|
|
1429
|
+
<div
|
|
1430
|
+
class="boxContainer medium filled shrinkOff"
|
|
1431
|
+
data-id="boxComponent"
|
|
1432
|
+
data-selector-id="box"
|
|
1433
|
+
data-test-id="boxComponent"
|
|
1434
|
+
>
|
|
1435
|
+
<input
|
|
1436
|
+
type="hidden"
|
|
1437
|
+
/>
|
|
1438
|
+
<label
|
|
1439
|
+
class="checkbox pointer medium "
|
|
1440
|
+
>
|
|
1441
|
+
<svg
|
|
1442
|
+
viewBox="0 0 40 40"
|
|
1443
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1444
|
+
>
|
|
1445
|
+
<path
|
|
1446
|
+
class="cbBox"
|
|
1447
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
1448
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1449
|
+
/>
|
|
1450
|
+
</svg>
|
|
1451
|
+
<svg
|
|
1452
|
+
class="tick mediumtick "
|
|
1453
|
+
viewBox="0 0 44 44"
|
|
1454
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1455
|
+
>
|
|
1456
|
+
<polyline
|
|
1457
|
+
class="tickPath checkedtickPath"
|
|
1458
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
1459
|
+
/>
|
|
1460
|
+
</svg>
|
|
1461
|
+
</label>
|
|
1462
|
+
</div>
|
|
1463
|
+
</div>
|
|
1464
|
+
</DocumentFragment>
|
|
1465
|
+
`;
|
|
1466
|
+
|
|
1467
|
+
exports[`CheckBox component Should render size - primary 1`] = `
|
|
1468
|
+
<DocumentFragment>
|
|
1469
|
+
<div
|
|
1470
|
+
aria-checked="false"
|
|
1471
|
+
class="container pointer primary
|
|
1472
|
+
flex rowdir vCenter"
|
|
1473
|
+
data-id="checkBox"
|
|
1474
|
+
data-selector-id="container"
|
|
1475
|
+
data-test-id="checkBox"
|
|
1476
|
+
role="checkbox"
|
|
1477
|
+
tabindex="0"
|
|
1478
|
+
>
|
|
1479
|
+
<div
|
|
1480
|
+
class="boxContainer medium filled shrinkOff"
|
|
1481
|
+
data-id="boxComponent"
|
|
1482
|
+
data-selector-id="box"
|
|
1483
|
+
data-test-id="boxComponent"
|
|
1484
|
+
>
|
|
1485
|
+
<input
|
|
1486
|
+
type="hidden"
|
|
1487
|
+
/>
|
|
1488
|
+
<label
|
|
1489
|
+
class="checkbox pointer medium "
|
|
1490
|
+
>
|
|
1491
|
+
<svg
|
|
1492
|
+
viewBox="0 0 40 40"
|
|
1493
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1494
|
+
>
|
|
1495
|
+
<rect
|
|
1496
|
+
class="cbBox"
|
|
1497
|
+
height="38"
|
|
1498
|
+
rx="4"
|
|
1499
|
+
width="38"
|
|
1500
|
+
x="1"
|
|
1501
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1502
|
+
y="1"
|
|
1503
|
+
/>
|
|
1504
|
+
</svg>
|
|
1505
|
+
</label>
|
|
1506
|
+
</div>
|
|
1507
|
+
<div
|
|
1508
|
+
class="text grow basis shrinkOff"
|
|
1509
|
+
data-id="boxComponent"
|
|
1510
|
+
data-selector-id="box"
|
|
1511
|
+
data-test-id="boxComponent"
|
|
1512
|
+
>
|
|
1513
|
+
<label
|
|
1514
|
+
class="label title medium primary font_default
|
|
1515
|
+
dotted cursor
|
|
1516
|
+
|
|
1517
|
+
pointer "
|
|
1518
|
+
data-id="label"
|
|
1519
|
+
data-selector-id="label"
|
|
1520
|
+
data-test-id="label"
|
|
1521
|
+
data-title="checkboxText"
|
|
1522
|
+
>
|
|
1523
|
+
checkboxText
|
|
1524
|
+
</label>
|
|
1525
|
+
</div>
|
|
1526
|
+
</div>
|
|
1527
|
+
</DocumentFragment>
|
|
1528
|
+
`;
|
|
1529
|
+
|
|
1530
|
+
exports[`CheckBox component Should render size - secondary 1`] = `
|
|
1531
|
+
<DocumentFragment>
|
|
1532
|
+
<div
|
|
1533
|
+
aria-checked="false"
|
|
1534
|
+
class="container pointer primary
|
|
1535
|
+
flex rowdir vCenter"
|
|
1536
|
+
data-id="checkBox"
|
|
1537
|
+
data-selector-id="container"
|
|
1538
|
+
data-test-id="checkBox"
|
|
1539
|
+
role="checkbox"
|
|
1540
|
+
tabindex="0"
|
|
1541
|
+
>
|
|
1542
|
+
<div
|
|
1543
|
+
class="boxContainer medium filled shrinkOff"
|
|
1544
|
+
data-id="boxComponent"
|
|
1545
|
+
data-selector-id="box"
|
|
1546
|
+
data-test-id="boxComponent"
|
|
1547
|
+
>
|
|
1548
|
+
<input
|
|
1549
|
+
type="hidden"
|
|
1550
|
+
/>
|
|
1551
|
+
<label
|
|
1552
|
+
class="checkbox pointer medium "
|
|
1553
|
+
>
|
|
1554
|
+
<svg
|
|
1555
|
+
viewBox="0 0 40 40"
|
|
1556
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1557
|
+
>
|
|
1558
|
+
<rect
|
|
1559
|
+
class="cbBox"
|
|
1560
|
+
height="38"
|
|
1561
|
+
rx="4"
|
|
1562
|
+
width="38"
|
|
1563
|
+
x="1"
|
|
1564
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1565
|
+
y="1"
|
|
1566
|
+
/>
|
|
1567
|
+
</svg>
|
|
1568
|
+
</label>
|
|
1569
|
+
</div>
|
|
1570
|
+
<div
|
|
1571
|
+
class="text grow basis shrinkOff"
|
|
1572
|
+
data-id="boxComponent"
|
|
1573
|
+
data-selector-id="box"
|
|
1574
|
+
data-test-id="boxComponent"
|
|
1575
|
+
>
|
|
1576
|
+
<label
|
|
1577
|
+
class="label title medium secondary font_default
|
|
1578
|
+
dotted cursor
|
|
1579
|
+
|
|
1580
|
+
pointer "
|
|
1581
|
+
data-id="label"
|
|
1582
|
+
data-selector-id="label"
|
|
1583
|
+
data-test-id="label"
|
|
1584
|
+
data-title="checkboxText"
|
|
1585
|
+
>
|
|
1586
|
+
checkboxText
|
|
1587
|
+
</label>
|
|
1588
|
+
</div>
|
|
1589
|
+
</div>
|
|
1590
|
+
</DocumentFragment>
|
|
1591
|
+
`;
|
|
1592
|
+
|
|
1593
|
+
exports[`CheckBox component Should render size - small 1`] = `
|
|
1594
|
+
<DocumentFragment>
|
|
1595
|
+
<div
|
|
1596
|
+
aria-checked="true"
|
|
1597
|
+
class="container pointer primary
|
|
1598
|
+
checkedprimary inflex rowdir vCenter"
|
|
1599
|
+
data-id="checkBox"
|
|
1600
|
+
data-selector-id="container"
|
|
1601
|
+
data-test-id="checkBox"
|
|
1602
|
+
role="checkbox"
|
|
1603
|
+
tabindex="0"
|
|
1604
|
+
>
|
|
1605
|
+
<div
|
|
1606
|
+
class="boxContainer small filled shrinkOff"
|
|
1607
|
+
data-id="boxComponent"
|
|
1608
|
+
data-selector-id="box"
|
|
1609
|
+
data-test-id="boxComponent"
|
|
1610
|
+
>
|
|
1611
|
+
<input
|
|
1612
|
+
type="hidden"
|
|
1613
|
+
/>
|
|
1614
|
+
<label
|
|
1615
|
+
class="checkbox pointer small "
|
|
1616
|
+
>
|
|
1617
|
+
<svg
|
|
1618
|
+
viewBox="0 0 40 40"
|
|
1619
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1620
|
+
>
|
|
1621
|
+
<path
|
|
1622
|
+
class="cbBox"
|
|
1623
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
1624
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1625
|
+
/>
|
|
1626
|
+
</svg>
|
|
1627
|
+
<svg
|
|
1628
|
+
class="tick smalltick "
|
|
1629
|
+
viewBox="0 0 44 44"
|
|
1630
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1631
|
+
>
|
|
1632
|
+
<polyline
|
|
1633
|
+
class="tickPath checkedtickPath"
|
|
1634
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
1635
|
+
/>
|
|
1636
|
+
</svg>
|
|
1637
|
+
</label>
|
|
1638
|
+
</div>
|
|
1639
|
+
</div>
|
|
1640
|
+
</DocumentFragment>
|
|
1641
|
+
`;
|
|
1642
|
+
|
|
1643
|
+
exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role false and entering their values 1`] = `
|
|
1644
|
+
<DocumentFragment>
|
|
1645
|
+
<div
|
|
1646
|
+
aria-checked="false"
|
|
1647
|
+
aria-hidden="false"
|
|
1648
|
+
aria-label="ariaLabelCheckBox"
|
|
1649
|
+
aria-labelledby="ariaLabelledbyCheckBox"
|
|
1650
|
+
class="container pointer primary
|
|
1651
|
+
checkedprimary inflex rowdir vCenter"
|
|
1652
|
+
data-id="checkBox"
|
|
1653
|
+
data-selector-id="container"
|
|
1654
|
+
data-test-id="checkBox"
|
|
1655
|
+
role="checkBox3"
|
|
1656
|
+
tabindex="0"
|
|
1657
|
+
>
|
|
1658
|
+
<div
|
|
1659
|
+
class="boxContainer medium filled shrinkOff"
|
|
1660
|
+
data-id="boxComponent"
|
|
1661
|
+
data-selector-id="box"
|
|
1662
|
+
data-test-id="boxComponent"
|
|
1663
|
+
>
|
|
1664
|
+
<input
|
|
1665
|
+
type="hidden"
|
|
1666
|
+
/>
|
|
1667
|
+
<label
|
|
1668
|
+
class="checkbox pointer medium "
|
|
1669
|
+
>
|
|
1670
|
+
<svg
|
|
1671
|
+
viewBox="0 0 40 40"
|
|
1672
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1673
|
+
>
|
|
1674
|
+
<path
|
|
1675
|
+
class="cbBox"
|
|
1676
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
1677
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1678
|
+
/>
|
|
1679
|
+
</svg>
|
|
1680
|
+
<svg
|
|
1681
|
+
class="tick mediumtick "
|
|
1682
|
+
viewBox="0 0 44 44"
|
|
1683
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1684
|
+
>
|
|
1685
|
+
<polyline
|
|
1686
|
+
class="tickPath checkedtickPath"
|
|
1687
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
1688
|
+
/>
|
|
1689
|
+
</svg>
|
|
1690
|
+
</label>
|
|
1691
|
+
</div>
|
|
1692
|
+
</div>
|
|
1693
|
+
</DocumentFragment>
|
|
1694
|
+
`;
|
|
1695
|
+
|
|
1696
|
+
exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role true and entering their values 1`] = `
|
|
1697
|
+
<DocumentFragment>
|
|
1698
|
+
<div
|
|
1699
|
+
aria-checked="true"
|
|
1700
|
+
aria-hidden="true"
|
|
1701
|
+
aria-label="ariaLabelCheckBox"
|
|
1702
|
+
aria-labelledby="ariaLabelledbyCheckBox"
|
|
1703
|
+
class="container pointer primary
|
|
1704
|
+
checkedprimary inflex rowdir vCenter"
|
|
1705
|
+
data-id="checkBox"
|
|
1706
|
+
data-selector-id="container"
|
|
1707
|
+
data-test-id="checkBox"
|
|
1708
|
+
role="checkBox2"
|
|
1709
|
+
tabindex="-1"
|
|
1710
|
+
>
|
|
1711
|
+
<div
|
|
1712
|
+
class="boxContainer medium filled shrinkOff"
|
|
1713
|
+
data-id="boxComponent"
|
|
1714
|
+
data-selector-id="box"
|
|
1715
|
+
data-test-id="boxComponent"
|
|
1716
|
+
>
|
|
1717
|
+
<input
|
|
1718
|
+
type="hidden"
|
|
1719
|
+
/>
|
|
1720
|
+
<label
|
|
1721
|
+
class="checkbox pointer medium "
|
|
1722
|
+
>
|
|
1723
|
+
<svg
|
|
1724
|
+
viewBox="0 0 40 40"
|
|
1725
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1726
|
+
>
|
|
1727
|
+
<path
|
|
1728
|
+
class="cbBox"
|
|
1729
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
1730
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1731
|
+
/>
|
|
1732
|
+
</svg>
|
|
1733
|
+
<svg
|
|
1734
|
+
class="tick mediumtick "
|
|
1735
|
+
viewBox="0 0 44 44"
|
|
1736
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1737
|
+
>
|
|
1738
|
+
<polyline
|
|
1739
|
+
class="tickPath checkedtickPath"
|
|
1740
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
1741
|
+
/>
|
|
1742
|
+
</svg>
|
|
1743
|
+
</label>
|
|
1744
|
+
</div>
|
|
1745
|
+
</div>
|
|
1746
|
+
</DocumentFragment>
|
|
1747
|
+
`;
|
|
1748
|
+
|
|
1749
|
+
exports[`CheckBox component rendering the Custom Props 1`] = `
|
|
1750
|
+
<DocumentFragment>
|
|
1751
|
+
<div
|
|
1752
|
+
aria-checked="false"
|
|
1753
|
+
class="container pointer primary
|
|
1754
|
+
flex rowdir vCenter"
|
|
1755
|
+
data-id="checkBox"
|
|
1756
|
+
data-props="true"
|
|
1757
|
+
data-selector-id="container"
|
|
1758
|
+
data-test-id="checkBox"
|
|
1759
|
+
role="checkbox"
|
|
1760
|
+
tabindex="0"
|
|
1761
|
+
>
|
|
1762
|
+
<div
|
|
1763
|
+
class="boxContainer medium filled shrinkOff"
|
|
1764
|
+
data-id="boxComponent"
|
|
1765
|
+
data-selector-id="box"
|
|
1766
|
+
data-test-id="boxComponent"
|
|
1767
|
+
>
|
|
1768
|
+
<input
|
|
1769
|
+
type="hidden"
|
|
1770
|
+
/>
|
|
1771
|
+
<label
|
|
1772
|
+
class="checkbox pointer medium "
|
|
1773
|
+
>
|
|
1774
|
+
<svg
|
|
1775
|
+
viewBox="0 0 40 40"
|
|
1776
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1777
|
+
>
|
|
1778
|
+
<rect
|
|
1779
|
+
class="cbBox"
|
|
1780
|
+
height="38"
|
|
1781
|
+
rx="4"
|
|
1782
|
+
width="38"
|
|
1783
|
+
x="1"
|
|
1784
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1785
|
+
y="1"
|
|
1786
|
+
/>
|
|
1787
|
+
</svg>
|
|
1788
|
+
</label>
|
|
1789
|
+
</div>
|
|
1790
|
+
<div
|
|
1791
|
+
class="text grow basis shrinkOff"
|
|
1792
|
+
data-id="boxComponent"
|
|
1793
|
+
data-selector-id="box"
|
|
1794
|
+
data-test-id="boxComponent"
|
|
1795
|
+
>
|
|
1796
|
+
<label
|
|
1797
|
+
class="label title medium default font_default
|
|
1798
|
+
dotted cursor checkBoxCustomClass "
|
|
1799
|
+
data-id="label"
|
|
1800
|
+
data-selector-id="label"
|
|
1801
|
+
data-test-id="label"
|
|
1802
|
+
data-title="checkboxText"
|
|
1803
|
+
>
|
|
1804
|
+
checkboxText
|
|
1805
|
+
</label>
|
|
1806
|
+
</div>
|
|
1807
|
+
</div>
|
|
1808
|
+
</DocumentFragment>
|
|
1809
|
+
`;
|
|
1810
|
+
|
|
1811
|
+
exports[`CheckBox component rendering the Custom class 1`] = `
|
|
1812
|
+
<DocumentFragment>
|
|
1813
|
+
<div
|
|
1814
|
+
aria-checked="true"
|
|
1815
|
+
class="container pointer primary
|
|
1816
|
+
checkedprimary customCheckBoxClass flex rowdir vCenter"
|
|
1817
|
+
data-id="checkBox"
|
|
1818
|
+
data-selector-id="container"
|
|
1819
|
+
data-test-id="checkBox"
|
|
1820
|
+
role="checkbox"
|
|
1821
|
+
tabindex="0"
|
|
1822
|
+
>
|
|
1823
|
+
<div
|
|
1824
|
+
class="boxContainer medium customCBoxSizeClass filled shrinkOff"
|
|
1825
|
+
data-id="boxComponent"
|
|
1826
|
+
data-selector-id="box"
|
|
1827
|
+
data-test-id="boxComponent"
|
|
1828
|
+
>
|
|
1829
|
+
<input
|
|
1830
|
+
type="hidden"
|
|
1831
|
+
/>
|
|
1832
|
+
<label
|
|
1833
|
+
class="checkbox pointer medium customCBoxSizeClass"
|
|
1834
|
+
>
|
|
1835
|
+
<svg
|
|
1836
|
+
viewBox="0 0 40 40"
|
|
1837
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1838
|
+
>
|
|
1839
|
+
<path
|
|
1840
|
+
class="cbBox"
|
|
1841
|
+
d="M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44"
|
|
1842
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1843
|
+
/>
|
|
1844
|
+
</svg>
|
|
1845
|
+
<svg
|
|
1846
|
+
class="tick mediumtick customTickSizeClass "
|
|
1847
|
+
viewBox="0 0 44 44"
|
|
1848
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1849
|
+
>
|
|
1850
|
+
<polyline
|
|
1851
|
+
class="tickPath checkedtickPath"
|
|
1852
|
+
points="12.56 19 19.61 26.06 40.39 5.28"
|
|
1853
|
+
/>
|
|
1854
|
+
</svg>
|
|
1855
|
+
</label>
|
|
1856
|
+
</div>
|
|
1857
|
+
<div
|
|
1858
|
+
class="text grow basis shrinkOff"
|
|
1859
|
+
data-id="boxComponent"
|
|
1860
|
+
data-selector-id="box"
|
|
1861
|
+
data-test-id="boxComponent"
|
|
1862
|
+
>
|
|
1863
|
+
<label
|
|
1864
|
+
class="label title medium default font_default
|
|
1865
|
+
dotted cursor
|
|
1866
|
+
|
|
1867
|
+
pointer customLabelClass "
|
|
1868
|
+
data-id="label"
|
|
1869
|
+
data-selector-id="label"
|
|
1870
|
+
data-test-id="label"
|
|
1871
|
+
data-title="checkboxText"
|
|
1872
|
+
>
|
|
1873
|
+
checkboxText
|
|
1874
|
+
</label>
|
|
1875
|
+
</div>
|
|
1876
|
+
</div>
|
|
1877
|
+
</DocumentFragment>
|
|
1878
|
+
`;
|