@zohodesk/components 1.4.16 → 1.4.18

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 (78) hide show
  1. package/README.md +35 -2
  2. package/es/Card/__tests__/Card.spec.js +48 -0
  3. package/es/Card/__tests__/CardContent.spec.js +61 -0
  4. package/es/Card/__tests__/CardHeader.spec.js +33 -0
  5. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +125 -0
  6. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +177 -0
  7. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +51 -0
  8. package/es/ListItem/ListItem.js +10 -3
  9. package/es/ListItem/ListItemWithAvatar.js +15 -6
  10. package/es/ListItem/ListItemWithCheckBox.js +13 -6
  11. package/es/ListItem/ListItemWithIcon.js +14 -5
  12. package/es/ListItem/ListItemWithRadio.js +13 -6
  13. package/es/ListItem/__tests__/ListItem.spec.js +19 -0
  14. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +19 -0
  15. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +19 -0
  16. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +17 -0
  17. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +19 -0
  18. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +78 -0
  19. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +140 -46
  20. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +251 -49
  21. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +144 -50
  22. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +252 -52
  23. package/es/ListItem/props/propTypes.js +15 -5
  24. package/es/MultiSelect/MultiSelect.js +55 -23
  25. package/es/MultiSelect/Suggestions.js +2 -1
  26. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  27. package/es/MultiSelect/props/propTypes.js +2 -3
  28. package/es/Select/GroupSelect.js +4 -2
  29. package/es/Select/Select.js +50 -22
  30. package/es/Select/SelectWithAvatar.js +17 -4
  31. package/es/Select/SelectWithIcon.js +15 -5
  32. package/es/Select/props/defaultProps.js +3 -0
  33. package/es/Select/props/propTypes.js +6 -0
  34. package/es/Typography/__tests__/Typography.spec.js +225 -0
  35. package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +1226 -0
  36. package/es/utils/dropDownUtils.js +13 -4
  37. package/es/v1/Switch/__tests__/Switch.spec.js +41 -6
  38. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +176 -5
  39. package/es/v1/Switch/css/Switch_v1.module.css +7 -1
  40. package/lib/Card/__tests__/Card.spec.js +54 -6
  41. package/lib/Card/__tests__/CardContent.spec.js +68 -0
  42. package/lib/Card/__tests__/CardHeader.spec.js +40 -0
  43. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +125 -0
  44. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +177 -0
  45. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +51 -0
  46. package/lib/ListItem/ListItem.js +10 -3
  47. package/lib/ListItem/ListItemWithAvatar.js +15 -6
  48. package/lib/ListItem/ListItemWithCheckBox.js +15 -6
  49. package/lib/ListItem/ListItemWithIcon.js +13 -5
  50. package/lib/ListItem/ListItemWithRadio.js +15 -6
  51. package/lib/ListItem/__tests__/ListItem.spec.js +23 -0
  52. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +23 -0
  53. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +23 -0
  54. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +21 -0
  55. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +23 -0
  56. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +78 -0
  57. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +140 -46
  58. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +251 -49
  59. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +144 -50
  60. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +252 -52
  61. package/lib/ListItem/props/propTypes.js +15 -6
  62. package/lib/MultiSelect/MultiSelect.js +50 -24
  63. package/lib/MultiSelect/Suggestions.js +2 -1
  64. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  65. package/lib/MultiSelect/props/propTypes.js +3 -4
  66. package/lib/Select/GroupSelect.js +4 -3
  67. package/lib/Select/Select.js +45 -20
  68. package/lib/Select/SelectWithAvatar.js +17 -7
  69. package/lib/Select/SelectWithIcon.js +15 -5
  70. package/lib/Select/props/defaultProps.js +3 -1
  71. package/lib/Select/props/propTypes.js +6 -0
  72. package/lib/Typography/__tests__/Typography.spec.js +232 -0
  73. package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +1226 -0
  74. package/lib/utils/dropDownUtils.js +17 -4
  75. package/lib/v1/Switch/__tests__/Switch.spec.js +41 -6
  76. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +176 -5
  77. package/lib/v1/Switch/css/Switch_v1.module.css +7 -1
  78. package/package.json +5 -5
package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align center 1`] = `
3
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode & it's custom class 1`] = `
4
4
  <DocumentFragment>
5
5
  <li
6
6
  class="list medium default withBorder flex rowdir vCenter"
@@ -18,7 +18,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
18
18
  data-test-id="List_checkBox"
19
19
  >
20
20
  <div
21
- class="shrinkOff selfCenter"
21
+ class="lhsBox_medium shrinkOff selfStart"
22
22
  data-id="boxComponent"
23
23
  data-selector-id="box"
24
24
  data-test-id="boxComponent"
@@ -66,19 +66,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
66
66
  </div>
67
67
  </div>
68
68
  <div
69
- class="grow basis shrinkOn"
69
+ class="leftBox grow basis shrinkOff"
70
70
  data-id="boxComponent"
71
71
  data-selector-id="box"
72
72
  data-test-id="boxComponent"
73
73
  >
74
74
  <div
75
- class="flex cover coldir"
76
- data-id="containerComponent"
77
- data-selector-id="container"
78
- data-test-id="containerComponent"
75
+ class="titleBox shrinkOff"
76
+ data-id="boxComponent"
77
+ data-selector-id="box"
78
+ data-test-id="boxComponent"
79
79
  >
80
80
  <div
81
- class="value shrinkOff"
81
+ class="value basisAuto shrinkOn"
82
82
  data-id="boxComponent"
83
83
  data-selector-id="box"
84
84
  data-test-id="boxComponent"
@@ -86,13 +86,14 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
86
86
  List
87
87
  </div>
88
88
  <div
89
- class="secondaryField secondaryValue shrinkOff"
89
+ class="customValueRightPlaceholderClass shrinkOff"
90
90
  data-id="boxComponent"
91
91
  data-selector-id="box"
92
92
  data-test-id="boxComponent"
93
- data-title="secondaryValue"
94
93
  >
95
- secondaryValue
94
+ <div>
95
+ Custom Placeholder
96
+ </div>
96
97
  </div>
97
98
  </div>
98
99
  </div>
@@ -100,7 +101,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
100
101
  </DocumentFragment>
101
102
  `;
102
103
 
103
- exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align end 1`] = `
104
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode 1`] = `
104
105
  <DocumentFragment>
105
106
  <li
106
107
  class="list medium default withBorder flex rowdir vCenter"
@@ -118,7 +119,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
118
119
  data-test-id="List_checkBox"
119
120
  >
120
121
  <div
121
- class="lhsBox_medium shrinkOff selfEnd"
122
+ class="lhsBox_medium shrinkOff selfStart"
122
123
  data-id="boxComponent"
123
124
  data-selector-id="box"
124
125
  data-test-id="boxComponent"
@@ -166,19 +167,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
166
167
  </div>
167
168
  </div>
168
169
  <div
169
- class="grow basis shrinkOn"
170
+ class="leftBox grow basis shrinkOff"
170
171
  data-id="boxComponent"
171
172
  data-selector-id="box"
172
173
  data-test-id="boxComponent"
173
174
  >
174
175
  <div
175
- class="flex cover coldir"
176
- data-id="containerComponent"
177
- data-selector-id="container"
178
- data-test-id="containerComponent"
176
+ class="titleBox shrinkOff"
177
+ data-id="boxComponent"
178
+ data-selector-id="box"
179
+ data-test-id="boxComponent"
179
180
  >
180
181
  <div
181
- class="value shrinkOff"
182
+ class="value basisAuto shrinkOn"
182
183
  data-id="boxComponent"
183
184
  data-selector-id="box"
184
185
  data-test-id="boxComponent"
@@ -186,13 +187,14 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
186
187
  List
187
188
  </div>
188
189
  <div
189
- class="secondaryField secondaryValue shrinkOff"
190
+ class="shrinkOff"
190
191
  data-id="boxComponent"
191
192
  data-selector-id="box"
192
193
  data-test-id="boxComponent"
193
- data-title="secondaryValue"
194
194
  >
195
- secondaryValue
195
+ <div>
196
+ Custom Placeholder
197
+ </div>
196
198
  </div>
197
199
  </div>
198
200
  </div>
@@ -200,7 +202,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
200
202
  </DocumentFragment>
201
203
  `;
202
204
 
203
- exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
205
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align center 1`] = `
204
206
  <DocumentFragment>
205
207
  <li
206
208
  class="list medium default withBorder flex rowdir vCenter"
@@ -218,7 +220,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
218
220
  data-test-id="List_checkBox"
219
221
  >
220
222
  <div
221
- class="lhsBox_medium shrinkOff selfStart"
223
+ class="shrinkOff selfCenter"
222
224
  data-id="boxComponent"
223
225
  data-selector-id="box"
224
226
  data-test-id="boxComponent"
@@ -266,41 +268,141 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
266
268
  </div>
267
269
  </div>
268
270
  <div
269
- class="grow basis shrinkOn"
271
+ class="leftBox grow basis shrinkOff"
270
272
  data-id="boxComponent"
271
273
  data-selector-id="box"
272
274
  data-test-id="boxComponent"
273
275
  >
274
276
  <div
275
- class="flex cover coldir"
276
- data-id="containerComponent"
277
- data-selector-id="container"
278
- data-test-id="containerComponent"
277
+ class="titleBox shrinkOff"
278
+ data-id="boxComponent"
279
+ data-selector-id="box"
280
+ data-test-id="boxComponent"
279
281
  >
280
282
  <div
281
- class="value shrinkOff"
283
+ class="value basisAuto shrinkOn"
282
284
  data-id="boxComponent"
283
285
  data-selector-id="box"
284
286
  data-test-id="boxComponent"
285
287
  >
286
288
  List
287
289
  </div>
290
+ </div>
291
+ <div
292
+ class="secondaryField secondaryValue shrinkOff"
293
+ data-id="boxComponent"
294
+ data-selector-id="box"
295
+ data-test-id="boxComponent"
296
+ data-title="secondaryValue"
297
+ >
298
+ secondaryValue
299
+ </div>
300
+ </div>
301
+ </li>
302
+ </DocumentFragment>
303
+ `;
304
+
305
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align end 1`] = `
306
+ <DocumentFragment>
307
+ <li
308
+ class="list medium default withBorder flex rowdir vCenter"
309
+ data-a11y-inset-focus="true"
310
+ data-id="List_ListItemWithCheckBox"
311
+ data-selector-id="listItemWithCheckBox"
312
+ data-test-id="List_ListItemWithCheckBox"
313
+ role="option"
314
+ tabindex="0"
315
+ >
316
+ <div
317
+ class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
318
+ data-id="List_checkBox"
319
+ data-selector-id="box"
320
+ data-test-id="List_checkBox"
321
+ >
322
+ <div
323
+ class="lhsBox_medium shrinkOff selfEnd"
324
+ data-id="boxComponent"
325
+ data-selector-id="box"
326
+ data-test-id="boxComponent"
327
+ >
328
+ <div
329
+ aria-checked="false"
330
+ aria-hidden="true"
331
+ class="container pointer primary
332
+ inflex rowdir vCenter"
333
+ data-id="checkBox"
334
+ data-selector-id="container"
335
+ data-test-id="checkBox"
336
+ role="checkbox"
337
+ tabindex="-1"
338
+ >
339
+ <div
340
+ class="boxContainer medium filled shrinkOff"
341
+ data-id="boxComponent"
342
+ data-selector-id="box"
343
+ data-test-id="boxComponent"
344
+ >
345
+ <input
346
+ type="hidden"
347
+ />
348
+ <label
349
+ class="checkbox pointer medium "
350
+ >
351
+ <svg
352
+ viewBox="0 0 40 40"
353
+ xmlns="http://www.w3.org/2000/svg"
354
+ >
355
+ <rect
356
+ class="cbBox"
357
+ height="38"
358
+ rx="4"
359
+ width="38"
360
+ x="1"
361
+ xmlns="http://www.w3.org/2000/svg"
362
+ y="1"
363
+ />
364
+ </svg>
365
+ </label>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <div
371
+ class="leftBox grow basis shrinkOff"
372
+ data-id="boxComponent"
373
+ data-selector-id="box"
374
+ data-test-id="boxComponent"
375
+ >
376
+ <div
377
+ class="titleBox shrinkOff"
378
+ data-id="boxComponent"
379
+ data-selector-id="box"
380
+ data-test-id="boxComponent"
381
+ >
288
382
  <div
289
- class="secondaryField secondaryValue shrinkOff"
383
+ class="value basisAuto shrinkOn"
290
384
  data-id="boxComponent"
291
385
  data-selector-id="box"
292
386
  data-test-id="boxComponent"
293
- data-title="secondaryValue"
294
387
  >
295
- secondaryValue
388
+ List
296
389
  </div>
297
390
  </div>
391
+ <div
392
+ class="secondaryField secondaryValue shrinkOff"
393
+ data-id="boxComponent"
394
+ data-selector-id="box"
395
+ data-test-id="boxComponent"
396
+ data-title="secondaryValue"
397
+ >
398
+ secondaryValue
399
+ </div>
298
400
  </div>
299
401
  </li>
300
402
  </DocumentFragment>
301
403
  `;
302
404
 
303
- exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align start 1`] = `
405
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
304
406
  <DocumentFragment>
305
407
  <li
306
408
  class="list medium default withBorder flex rowdir vCenter"
@@ -366,35 +468,135 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
366
468
  </div>
367
469
  </div>
368
470
  <div
369
- class="grow basis shrinkOn"
471
+ class="leftBox grow basis shrinkOff"
370
472
  data-id="boxComponent"
371
473
  data-selector-id="box"
372
474
  data-test-id="boxComponent"
373
475
  >
374
476
  <div
375
- class="flex cover coldir"
376
- data-id="containerComponent"
377
- data-selector-id="container"
378
- data-test-id="containerComponent"
477
+ class="titleBox shrinkOff"
478
+ data-id="boxComponent"
479
+ data-selector-id="box"
480
+ data-test-id="boxComponent"
379
481
  >
380
482
  <div
381
- class="value shrinkOff"
483
+ class="value basisAuto shrinkOn"
382
484
  data-id="boxComponent"
383
485
  data-selector-id="box"
384
486
  data-test-id="boxComponent"
385
487
  >
386
488
  List
387
489
  </div>
490
+ </div>
491
+ <div
492
+ class="secondaryField secondaryValue shrinkOff"
493
+ data-id="boxComponent"
494
+ data-selector-id="box"
495
+ data-test-id="boxComponent"
496
+ data-title="secondaryValue"
497
+ >
498
+ secondaryValue
499
+ </div>
500
+ </div>
501
+ </li>
502
+ </DocumentFragment>
503
+ `;
504
+
505
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align start 1`] = `
506
+ <DocumentFragment>
507
+ <li
508
+ class="list medium default withBorder flex rowdir vCenter"
509
+ data-a11y-inset-focus="true"
510
+ data-id="List_ListItemWithCheckBox"
511
+ data-selector-id="listItemWithCheckBox"
512
+ data-test-id="List_ListItemWithCheckBox"
513
+ role="option"
514
+ tabindex="0"
515
+ >
516
+ <div
517
+ class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
518
+ data-id="List_checkBox"
519
+ data-selector-id="box"
520
+ data-test-id="List_checkBox"
521
+ >
522
+ <div
523
+ class="lhsBox_medium shrinkOff selfStart"
524
+ data-id="boxComponent"
525
+ data-selector-id="box"
526
+ data-test-id="boxComponent"
527
+ >
528
+ <div
529
+ aria-checked="false"
530
+ aria-hidden="true"
531
+ class="container pointer primary
532
+ inflex rowdir vCenter"
533
+ data-id="checkBox"
534
+ data-selector-id="container"
535
+ data-test-id="checkBox"
536
+ role="checkbox"
537
+ tabindex="-1"
538
+ >
539
+ <div
540
+ class="boxContainer medium filled shrinkOff"
541
+ data-id="boxComponent"
542
+ data-selector-id="box"
543
+ data-test-id="boxComponent"
544
+ >
545
+ <input
546
+ type="hidden"
547
+ />
548
+ <label
549
+ class="checkbox pointer medium "
550
+ >
551
+ <svg
552
+ viewBox="0 0 40 40"
553
+ xmlns="http://www.w3.org/2000/svg"
554
+ >
555
+ <rect
556
+ class="cbBox"
557
+ height="38"
558
+ rx="4"
559
+ width="38"
560
+ x="1"
561
+ xmlns="http://www.w3.org/2000/svg"
562
+ y="1"
563
+ />
564
+ </svg>
565
+ </label>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ <div
571
+ class="leftBox grow basis shrinkOff"
572
+ data-id="boxComponent"
573
+ data-selector-id="box"
574
+ data-test-id="boxComponent"
575
+ >
576
+ <div
577
+ class="titleBox shrinkOff"
578
+ data-id="boxComponent"
579
+ data-selector-id="box"
580
+ data-test-id="boxComponent"
581
+ >
388
582
  <div
389
- class="secondaryField secondaryValue shrinkOff"
583
+ class="value basisAuto shrinkOn"
390
584
  data-id="boxComponent"
391
585
  data-selector-id="box"
392
586
  data-test-id="boxComponent"
393
- data-title="secondaryValue"
394
587
  >
395
- secondaryValue
588
+ List
396
589
  </div>
397
590
  </div>
591
+ <div
592
+ class="secondaryField secondaryValue shrinkOff"
593
+ data-id="boxComponent"
594
+ data-selector-id="box"
595
+ data-test-id="boxComponent"
596
+ data-title="secondaryValue"
597
+ >
598
+ secondaryValue
599
+ </div>
398
600
  </div>
399
601
  </li>
400
602
  </DocumentFragment>
@@ -466,19 +668,19 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
466
668
  </div>
467
669
  </div>
468
670
  <div
469
- class="grow basis shrinkOn"
671
+ class="leftBox grow basis shrinkOff"
470
672
  data-id="boxComponent"
471
673
  data-selector-id="box"
472
674
  data-test-id="boxComponent"
473
675
  >
474
676
  <div
475
- class="flex cover coldir"
476
- data-id="containerComponent"
477
- data-selector-id="container"
478
- data-test-id="containerComponent"
677
+ class="titleBox shrinkOff"
678
+ data-id="boxComponent"
679
+ data-selector-id="box"
680
+ data-test-id="boxComponent"
479
681
  >
480
682
  <div
481
- class="value shrinkOff"
683
+ class="value basisAuto shrinkOn"
482
684
  data-id="boxComponent"
483
685
  data-selector-id="box"
484
686
  data-test-id="boxComponent"