@zohodesk/components 1.0.0-temp-234 → 1.0.0-temp-235

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 (62) hide show
  1. package/README.md +0 -22
  2. package/es/ListItem/ListItem.js +3 -7
  3. package/es/ListItem/ListItemWithAvatar.js +6 -12
  4. package/es/ListItem/ListItemWithCheckBox.js +6 -12
  5. package/es/ListItem/ListItemWithIcon.js +5 -11
  6. package/es/ListItem/ListItemWithRadio.js +6 -12
  7. package/es/ListItem/__tests__/ListItem.spec.js +0 -19
  8. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +0 -19
  9. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +0 -19
  10. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +0 -17
  11. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +0 -19
  12. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +0 -78
  13. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +46 -140
  14. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +49 -251
  15. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +50 -144
  16. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +52 -252
  17. package/es/ListItem/props/propTypes.js +5 -15
  18. package/es/MultiSelect/MultiSelect.js +1 -8
  19. package/es/Select/GroupSelect.js +2 -4
  20. package/es/Select/Select.js +1 -7
  21. package/es/Select/SelectWithAvatar.js +3 -14
  22. package/es/Select/SelectWithIcon.js +2 -6
  23. package/es/Select/props/defaultProps.js +0 -1
  24. package/es/Select/props/propTypes.js +0 -5
  25. package/es/Typography/Typography.js +9 -2
  26. package/es/Typography/__tests__/Typography.spec.js +334 -0
  27. package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +451 -0
  28. package/es/Typography/highlight.js +144 -0
  29. package/es/Typography/props/defaultProps.js +2 -1
  30. package/es/Typography/props/propTypes.js +26 -1
  31. package/es/utils/dropDownUtils.js +3 -12
  32. package/lib/ListItem/ListItem.js +3 -8
  33. package/lib/ListItem/ListItemWithAvatar.js +6 -13
  34. package/lib/ListItem/ListItemWithCheckBox.js +6 -13
  35. package/lib/ListItem/ListItemWithIcon.js +5 -11
  36. package/lib/ListItem/ListItemWithRadio.js +6 -13
  37. package/lib/ListItem/__tests__/ListItem.spec.js +0 -23
  38. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +0 -23
  39. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +0 -23
  40. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +0 -21
  41. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +0 -23
  42. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +0 -78
  43. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +46 -140
  44. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +49 -251
  45. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +50 -144
  46. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +52 -252
  47. package/lib/ListItem/props/propTypes.js +6 -15
  48. package/lib/MultiSelect/MultiSelect.js +2 -6
  49. package/lib/Select/GroupSelect.js +3 -4
  50. package/lib/Select/Select.js +1 -7
  51. package/lib/Select/SelectWithAvatar.js +6 -14
  52. package/lib/Select/SelectWithIcon.js +3 -6
  53. package/lib/Select/props/defaultProps.js +0 -1
  54. package/lib/Select/props/propTypes.js +0 -5
  55. package/lib/Typography/Typography.js +9 -2
  56. package/lib/Typography/__tests__/Typography.spec.js +342 -0
  57. package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +451 -0
  58. package/lib/Typography/highlight.js +151 -0
  59. package/lib/Typography/props/defaultProps.js +2 -1
  60. package/lib/Typography/props/propTypes.js +31 -1
  61. package/lib/utils/dropDownUtils.js +3 -14
  62. package/package.json +1 -1
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 renderValueRightPlaceholderNode & it's custom class 1`] = `
3
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align center 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 renderValueRightPlacehol
18
18
  data-test-id="List_checkBox"
19
19
  >
20
20
  <div
21
- class="lhsBox_medium shrinkOff selfStart"
21
+ class="shrinkOff selfCenter"
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 renderValueRightPlacehol
66
66
  </div>
67
67
  </div>
68
68
  <div
69
- class="leftBox grow basis shrinkOff"
69
+ class="grow basis shrinkOn"
70
70
  data-id="boxComponent"
71
71
  data-selector-id="box"
72
72
  data-test-id="boxComponent"
73
73
  >
74
74
  <div
75
- class="titleBox shrinkOff"
76
- data-id="boxComponent"
77
- data-selector-id="box"
78
- data-test-id="boxComponent"
75
+ class="flex cover coldir"
76
+ data-id="containerComponent"
77
+ data-selector-id="container"
78
+ data-test-id="containerComponent"
79
79
  >
80
80
  <div
81
- class="value basisAuto shrinkOn"
81
+ class="value shrinkOff"
82
82
  data-id="boxComponent"
83
83
  data-selector-id="box"
84
84
  data-test-id="boxComponent"
@@ -86,14 +86,13 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
86
86
  List
87
87
  </div>
88
88
  <div
89
- class="customValueRightPlaceholderClass shrinkOff"
89
+ class="secondaryField secondaryValue shrinkOff"
90
90
  data-id="boxComponent"
91
91
  data-selector-id="box"
92
92
  data-test-id="boxComponent"
93
+ data-title="secondaryValue"
93
94
  >
94
- <div>
95
- Custom Placeholder
96
- </div>
95
+ secondaryValue
97
96
  </div>
98
97
  </div>
99
98
  </div>
@@ -101,7 +100,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
101
100
  </DocumentFragment>
102
101
  `;
103
102
 
104
- exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode 1`] = `
103
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align end 1`] = `
105
104
  <DocumentFragment>
106
105
  <li
107
106
  class="list medium default withBorder flex rowdir vCenter"
@@ -119,7 +118,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
119
118
  data-test-id="List_checkBox"
120
119
  >
121
120
  <div
122
- class="lhsBox_medium shrinkOff selfStart"
121
+ class="lhsBox_medium shrinkOff selfEnd"
123
122
  data-id="boxComponent"
124
123
  data-selector-id="box"
125
124
  data-test-id="boxComponent"
@@ -167,19 +166,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
167
166
  </div>
168
167
  </div>
169
168
  <div
170
- class="leftBox grow basis shrinkOff"
169
+ class="grow basis shrinkOn"
171
170
  data-id="boxComponent"
172
171
  data-selector-id="box"
173
172
  data-test-id="boxComponent"
174
173
  >
175
174
  <div
176
- class="titleBox shrinkOff"
177
- data-id="boxComponent"
178
- data-selector-id="box"
179
- data-test-id="boxComponent"
175
+ class="flex cover coldir"
176
+ data-id="containerComponent"
177
+ data-selector-id="container"
178
+ data-test-id="containerComponent"
180
179
  >
181
180
  <div
182
- class="value basisAuto shrinkOn"
181
+ class="value shrinkOff"
183
182
  data-id="boxComponent"
184
183
  data-selector-id="box"
185
184
  data-test-id="boxComponent"
@@ -187,14 +186,13 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
187
186
  List
188
187
  </div>
189
188
  <div
190
- class="shrinkOff"
189
+ class="secondaryField secondaryValue shrinkOff"
191
190
  data-id="boxComponent"
192
191
  data-selector-id="box"
193
192
  data-test-id="boxComponent"
193
+ data-title="secondaryValue"
194
194
  >
195
- <div>
196
- Custom Placeholder
197
- </div>
195
+ secondaryValue
198
196
  </div>
199
197
  </div>
200
198
  </div>
@@ -202,7 +200,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
202
200
  </DocumentFragment>
203
201
  `;
204
202
 
205
- exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align center 1`] = `
203
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
206
204
  <DocumentFragment>
207
205
  <li
208
206
  class="list medium default withBorder flex rowdir vCenter"
@@ -220,7 +218,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
220
218
  data-test-id="List_checkBox"
221
219
  >
222
220
  <div
223
- class="shrinkOff selfCenter"
221
+ class="lhsBox_medium shrinkOff selfStart"
224
222
  data-id="boxComponent"
225
223
  data-selector-id="box"
226
224
  data-test-id="boxComponent"
@@ -268,141 +266,41 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
268
266
  </div>
269
267
  </div>
270
268
  <div
271
- class="leftBox grow basis shrinkOff"
269
+ class="grow basis shrinkOn"
272
270
  data-id="boxComponent"
273
271
  data-selector-id="box"
274
272
  data-test-id="boxComponent"
275
273
  >
276
274
  <div
277
- class="titleBox shrinkOff"
278
- data-id="boxComponent"
279
- data-selector-id="box"
280
- data-test-id="boxComponent"
275
+ class="flex cover coldir"
276
+ data-id="containerComponent"
277
+ data-selector-id="container"
278
+ data-test-id="containerComponent"
281
279
  >
282
280
  <div
283
- class="value basisAuto shrinkOn"
281
+ class="value shrinkOff"
284
282
  data-id="boxComponent"
285
283
  data-selector-id="box"
286
284
  data-test-id="boxComponent"
287
285
  >
288
286
  List
289
287
  </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
- >
382
288
  <div
383
- class="value basisAuto shrinkOn"
289
+ class="secondaryField secondaryValue shrinkOff"
384
290
  data-id="boxComponent"
385
291
  data-selector-id="box"
386
292
  data-test-id="boxComponent"
293
+ data-title="secondaryValue"
387
294
  >
388
- List
295
+ secondaryValue
389
296
  </div>
390
297
  </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>
400
298
  </div>
401
299
  </li>
402
300
  </DocumentFragment>
403
301
  `;
404
302
 
405
- exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
303
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align start 1`] = `
406
304
  <DocumentFragment>
407
305
  <li
408
306
  class="list medium default withBorder flex rowdir vCenter"
@@ -468,135 +366,35 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
468
366
  </div>
469
367
  </div>
470
368
  <div
471
- class="leftBox grow basis shrinkOff"
369
+ class="grow basis shrinkOn"
472
370
  data-id="boxComponent"
473
371
  data-selector-id="box"
474
372
  data-test-id="boxComponent"
475
373
  >
476
374
  <div
477
- class="titleBox shrinkOff"
478
- data-id="boxComponent"
479
- data-selector-id="box"
480
- data-test-id="boxComponent"
375
+ class="flex cover coldir"
376
+ data-id="containerComponent"
377
+ data-selector-id="container"
378
+ data-test-id="containerComponent"
481
379
  >
482
380
  <div
483
- class="value basisAuto shrinkOn"
381
+ class="value shrinkOff"
484
382
  data-id="boxComponent"
485
383
  data-selector-id="box"
486
384
  data-test-id="boxComponent"
487
385
  >
488
386
  List
489
387
  </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
- >
582
388
  <div
583
- class="value basisAuto shrinkOn"
389
+ class="secondaryField secondaryValue shrinkOff"
584
390
  data-id="boxComponent"
585
391
  data-selector-id="box"
586
392
  data-test-id="boxComponent"
393
+ data-title="secondaryValue"
587
394
  >
588
- List
395
+ secondaryValue
589
396
  </div>
590
397
  </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>
600
398
  </div>
601
399
  </li>
602
400
  </DocumentFragment>
@@ -668,19 +466,19 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
668
466
  </div>
669
467
  </div>
670
468
  <div
671
- class="leftBox grow basis shrinkOff"
469
+ class="grow basis shrinkOn"
672
470
  data-id="boxComponent"
673
471
  data-selector-id="box"
674
472
  data-test-id="boxComponent"
675
473
  >
676
474
  <div
677
- class="titleBox shrinkOff"
678
- data-id="boxComponent"
679
- data-selector-id="box"
680
- data-test-id="boxComponent"
475
+ class="flex cover coldir"
476
+ data-id="containerComponent"
477
+ data-selector-id="container"
478
+ data-test-id="containerComponent"
681
479
  >
682
480
  <div
683
- class="value basisAuto shrinkOn"
481
+ class="value shrinkOff"
684
482
  data-id="boxComponent"
685
483
  data-selector-id="box"
686
484
  data-test-id="boxComponent"