@zohodesk/components 1.6.31 → 1.6.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.
Files changed (163) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/assets/Appearance/light/mode/Component_LightMode.module.css +1 -1
  3. package/es/Accordion/__tests__/Accordion.spec.js +117 -3
  4. package/es/Accordion/__tests__/AccordionItem.spec.js +118 -6
  5. package/es/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap +344 -2
  6. package/es/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap +155 -3
  7. package/es/Animation/__tests__/Animation.spec.js +28 -4
  8. package/es/Animation/__tests__/__snapshots__/Animation.spec.js.snap +92 -2
  9. package/es/Button/css/Button.module.css +2 -3
  10. package/es/CheckBox/CheckBox.js +1 -1
  11. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1 -1
  12. package/es/DateTime/DateTime.module.css +2 -2
  13. package/es/DateTime/__tests__/CalendarView.spec.js +70 -3
  14. package/es/DateTime/__tests__/DateTime.spec.js +89 -6
  15. package/es/DateTime/__tests__/DateTimePopupFooter.spec.js +20 -2
  16. package/es/DateTime/__tests__/DateTimePopupHeader.spec.js +29 -2
  17. package/es/DateTime/__tests__/DateWidget.spec.js +34 -2
  18. package/es/DateTime/__tests__/DaysRow.spec.js +19 -3
  19. package/es/DateTime/__tests__/Time.spec.js +50 -3
  20. package/es/DateTime/__tests__/YearView.spec.js +60 -3
  21. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +2907 -170
  22. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +4392 -108
  23. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +67 -1
  24. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +187 -1
  25. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +265 -1
  26. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +155 -2
  27. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +522 -5
  28. package/es/DateTime/__tests__/__snapshots__/YearView.spec.js.snap +540 -0
  29. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +1 -4
  30. package/es/Heading/Heading.module.css +1 -1
  31. package/es/Heading/__tests__/Heading.spec.js +57 -3
  32. package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap +87 -14
  33. package/es/ListItem/__tests__/ListContainer.spec.js +228 -1
  34. package/es/ListItem/__tests__/ListItem.spec.js +359 -1
  35. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +390 -1
  36. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +214 -1
  37. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +303 -1
  38. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +230 -1
  39. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +602 -0
  40. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +1807 -0
  41. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +2703 -0
  42. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +2909 -0
  43. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +2009 -0
  44. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +3070 -0
  45. package/es/MultiSelect/MultiSelect.module.css +1 -2
  46. package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js +671 -1
  47. package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +730 -1
  48. package/es/MultiSelect/__tests__/EmptyState.spec.js +268 -1
  49. package/es/MultiSelect/__tests__/MultiSelect.spec.js +889 -2
  50. package/es/MultiSelect/__tests__/MultiSelectHeader.spec.js +50 -1
  51. package/es/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js +487 -1
  52. package/es/MultiSelect/__tests__/SelectedOptions.spec.js +291 -1
  53. package/es/MultiSelect/__tests__/Suggestions.spec.js +370 -2
  54. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +11785 -0
  55. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +12083 -0
  56. package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +253 -0
  57. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +14052 -0
  58. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +136 -0
  59. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11506 -0
  60. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +1382 -0
  61. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +3611 -0
  62. package/es/PopOver/__tests__/PopOver.spec.js +141 -2
  63. package/es/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap +1260 -0
  64. package/es/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js +212 -1
  65. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1802 -0
  66. package/es/Tab/Tabs.module.css +1 -2
  67. package/es/Tab/__tests__/Tab.spec.js +249 -1
  68. package/es/Tab/__tests__/TabContent.spec.js +34 -1
  69. package/es/Tab/__tests__/TabContentWrapper.spec.js +72 -1
  70. package/es/Tab/__tests__/TabWrapper.spec.js +163 -1
  71. package/es/Tab/__tests__/Tabs.spec.js +681 -1
  72. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +1049 -0
  73. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +99 -0
  74. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +121 -0
  75. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +2002 -0
  76. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +11053 -0
  77. package/es/Textarea/Textarea.module.css +1 -1
  78. package/es/Tooltip/Tooltip.module.css +1 -2
  79. package/es/Tooltip/__tests__/Tooltip.spec.js +590 -0
  80. package/es/Tooltip/__tests__/__snapshots__/Tooltip.spec.js.snap +813 -0
  81. package/es/Typography/css/Typography.module.css +8 -7
  82. package/es/common/common.module.css +4 -4
  83. package/lib/Accordion/__tests__/Accordion.spec.js +122 -2
  84. package/lib/Accordion/__tests__/AccordionItem.spec.js +126 -4
  85. package/lib/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap +344 -2
  86. package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap +155 -3
  87. package/lib/Animation/__tests__/Animation.spec.js +31 -5
  88. package/lib/Animation/__tests__/__snapshots__/Animation.spec.js.snap +92 -2
  89. package/lib/Button/css/Button.module.css +2 -3
  90. package/lib/CheckBox/CheckBox.js +1 -1
  91. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1 -1
  92. package/lib/DateTime/DateTime.module.css +2 -2
  93. package/lib/DateTime/__tests__/CalendarView.spec.js +71 -2
  94. package/lib/DateTime/__tests__/DateTime.spec.js +92 -6
  95. package/lib/DateTime/__tests__/DateTimePopupFooter.spec.js +21 -1
  96. package/lib/DateTime/__tests__/DateTimePopupHeader.spec.js +30 -1
  97. package/lib/DateTime/__tests__/DateWidget.spec.js +35 -1
  98. package/lib/DateTime/__tests__/DaysRow.spec.js +20 -2
  99. package/lib/DateTime/__tests__/Time.spec.js +51 -2
  100. package/lib/DateTime/__tests__/YearView.spec.js +61 -2
  101. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +2907 -170
  102. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +4392 -108
  103. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +67 -1
  104. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +187 -1
  105. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +265 -1
  106. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +155 -2
  107. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +522 -5
  108. package/lib/DateTime/__tests__/__snapshots__/YearView.spec.js.snap +540 -0
  109. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +1 -4
  110. package/lib/Heading/Heading.module.css +1 -1
  111. package/lib/Heading/__tests__/Heading.spec.js +60 -4
  112. package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap +87 -14
  113. package/lib/ListItem/__tests__/ListContainer.spec.js +229 -0
  114. package/lib/ListItem/__tests__/ListItem.spec.js +362 -0
  115. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +391 -0
  116. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +215 -0
  117. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +304 -0
  118. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +231 -0
  119. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +602 -0
  120. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +1807 -0
  121. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +2703 -0
  122. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +2909 -0
  123. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +2009 -0
  124. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +3070 -0
  125. package/lib/MultiSelect/MultiSelect.module.css +1 -2
  126. package/lib/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js +692 -0
  127. package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +741 -0
  128. package/lib/MultiSelect/__tests__/EmptyState.spec.js +273 -0
  129. package/lib/MultiSelect/__tests__/MultiSelect.spec.js +910 -0
  130. package/lib/MultiSelect/__tests__/MultiSelectHeader.spec.js +51 -0
  131. package/lib/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js +497 -0
  132. package/lib/MultiSelect/__tests__/SelectedOptions.spec.js +305 -0
  133. package/lib/MultiSelect/__tests__/Suggestions.spec.js +375 -0
  134. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +11785 -0
  135. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +12083 -0
  136. package/lib/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +253 -0
  137. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +14052 -0
  138. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +136 -0
  139. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11506 -0
  140. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +1382 -0
  141. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +3611 -0
  142. package/lib/PopOver/__tests__/PopOver.spec.js +150 -1
  143. package/lib/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap +1260 -0
  144. package/lib/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js +213 -0
  145. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1802 -0
  146. package/lib/Tab/Tabs.module.css +1 -2
  147. package/lib/Tab/__tests__/Tab.spec.js +250 -0
  148. package/lib/Tab/__tests__/TabContent.spec.js +35 -0
  149. package/lib/Tab/__tests__/TabContentWrapper.spec.js +76 -0
  150. package/lib/Tab/__tests__/TabWrapper.spec.js +174 -0
  151. package/lib/Tab/__tests__/Tabs.spec.js +741 -0
  152. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +1049 -0
  153. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +99 -0
  154. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +121 -0
  155. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +2002 -0
  156. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +11053 -0
  157. package/lib/Textarea/Textarea.module.css +1 -1
  158. package/lib/Tooltip/Tooltip.module.css +1 -2
  159. package/lib/Tooltip/__tests__/Tooltip.spec.js +629 -0
  160. package/lib/Tooltip/__tests__/__snapshots__/Tooltip.spec.js.snap +813 -0
  161. package/lib/Typography/css/Typography.module.css +8 -7
  162. package/lib/common/common.module.css +4 -4
  163. package/package.json +6 -5
package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap CHANGED
@@ -320,6 +320,2709 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
320
320
  </DocumentFragment>
321
321
  `;
322
322
 
323
+ exports[`ListItemWithAvatar Render with a11y ariaHidden=false with active and needTick 1`] = `
324
+ <DocumentFragment>
325
+ <li
326
+ class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
327
+ data-a11y-inset-focus="true"
328
+ data-id="List_ListItemWithAvatar"
329
+ data-selected="true"
330
+ data-selector-id="listItemWithAvatar"
331
+ data-test-id="List_ListItemWithAvatar"
332
+ role="option"
333
+ tabindex="0"
334
+ >
335
+ <div
336
+ class="d-flex-shrink-0 contentWrapper"
337
+ data-id="boxComponent"
338
+ data-selector-id="box"
339
+ data-test-id="boxComponent"
340
+ >
341
+ <div
342
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
343
+ data-id="boxComponent"
344
+ data-selector-id="box"
345
+ data-test-id="boxComponent"
346
+ >
347
+ <div
348
+ class="d-flex-shrink-0 titleBox"
349
+ data-id="boxComponent"
350
+ data-selector-id="box"
351
+ data-test-id="boxComponent"
352
+ >
353
+ <div
354
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
355
+ data-id="boxComponent"
356
+ data-selector-id="box"
357
+ data-test-id="boxComponent"
358
+ >
359
+ List
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <div
364
+ aria-hidden="false"
365
+ class="d-flex-shrink-0 tickIcon"
366
+ data-id="List_tickIcon"
367
+ data-selector-id="listItemWithAvatar_tickIcon"
368
+ data-test-id="List_tickIcon"
369
+ >
370
+ <i
371
+ aria-hidden="true"
372
+ class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
373
+ data-id="fontIcon"
374
+ data-selector-id="fontIcon"
375
+ data-test-id="fontIcon"
376
+ style="--zd-iconfont-size: var(--zd_font_size8);"
377
+ />
378
+ </div>
379
+ </div>
380
+ </li>
381
+ </DocumentFragment>
382
+ `;
383
+
384
+ exports[`ListItemWithAvatar Render with a11y role, ariaSelected and ariaLabel 1`] = `
385
+ <DocumentFragment>
386
+ <li
387
+ aria-label="Item label"
388
+ aria-selected="true"
389
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
390
+ data-a11y-inset-focus="true"
391
+ data-id="List_ListItemWithAvatar"
392
+ data-selector-id="listItemWithAvatar"
393
+ data-test-id="List_ListItemWithAvatar"
394
+ role="menuitem"
395
+ tabindex="0"
396
+ >
397
+ <div
398
+ class="d-flex-shrink-0 contentWrapper"
399
+ data-id="boxComponent"
400
+ data-selector-id="box"
401
+ data-test-id="boxComponent"
402
+ >
403
+ <div
404
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
405
+ data-id="boxComponent"
406
+ data-selector-id="box"
407
+ data-test-id="boxComponent"
408
+ >
409
+ <div
410
+ class="d-flex-shrink-0 titleBox"
411
+ data-id="boxComponent"
412
+ data-selector-id="box"
413
+ data-test-id="boxComponent"
414
+ >
415
+ <div
416
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
417
+ data-id="boxComponent"
418
+ data-selector-id="box"
419
+ data-test-id="boxComponent"
420
+ >
421
+ List
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </li>
427
+ </DocumentFragment>
428
+ `;
429
+
430
+ exports[`ListItemWithAvatar Render with active 1`] = `
431
+ <DocumentFragment>
432
+ <li
433
+ class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
434
+ data-a11y-inset-focus="true"
435
+ data-id="List_ListItemWithAvatar"
436
+ data-selected="true"
437
+ data-selector-id="listItemWithAvatar"
438
+ data-test-id="List_ListItemWithAvatar"
439
+ role="option"
440
+ tabindex="0"
441
+ >
442
+ <div
443
+ class="d-flex-shrink-0 contentWrapper"
444
+ data-id="boxComponent"
445
+ data-selector-id="box"
446
+ data-test-id="boxComponent"
447
+ >
448
+ <div
449
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
450
+ data-id="boxComponent"
451
+ data-selector-id="box"
452
+ data-test-id="boxComponent"
453
+ >
454
+ <div
455
+ class="d-flex-shrink-0 titleBox"
456
+ data-id="boxComponent"
457
+ data-selector-id="box"
458
+ data-test-id="boxComponent"
459
+ >
460
+ <div
461
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
462
+ data-id="boxComponent"
463
+ data-selector-id="box"
464
+ data-test-id="boxComponent"
465
+ >
466
+ List
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </li>
472
+ </DocumentFragment>
473
+ `;
474
+
475
+ exports[`ListItemWithAvatar Render with active and needTick 1`] = `
476
+ <DocumentFragment>
477
+ <li
478
+ class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
479
+ data-a11y-inset-focus="true"
480
+ data-id="List_ListItemWithAvatar"
481
+ data-selected="true"
482
+ data-selector-id="listItemWithAvatar"
483
+ data-test-id="List_ListItemWithAvatar"
484
+ role="option"
485
+ tabindex="0"
486
+ >
487
+ <div
488
+ class="d-flex-shrink-0 contentWrapper"
489
+ data-id="boxComponent"
490
+ data-selector-id="box"
491
+ data-test-id="boxComponent"
492
+ >
493
+ <div
494
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
495
+ data-id="boxComponent"
496
+ data-selector-id="box"
497
+ data-test-id="boxComponent"
498
+ >
499
+ <div
500
+ class="d-flex-shrink-0 titleBox"
501
+ data-id="boxComponent"
502
+ data-selector-id="box"
503
+ data-test-id="boxComponent"
504
+ >
505
+ <div
506
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
507
+ data-id="boxComponent"
508
+ data-selector-id="box"
509
+ data-test-id="boxComponent"
510
+ >
511
+ List
512
+ </div>
513
+ </div>
514
+ </div>
515
+ <div
516
+ aria-hidden="true"
517
+ class="d-flex-shrink-0 tickIcon"
518
+ data-id="List_tickIcon"
519
+ data-selector-id="listItemWithAvatar_tickIcon"
520
+ data-test-id="List_tickIcon"
521
+ >
522
+ <i
523
+ aria-hidden="true"
524
+ class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
525
+ data-id="fontIcon"
526
+ data-selector-id="fontIcon"
527
+ data-test-id="fontIcon"
528
+ style="--zd-iconfont-size: var(--zd_font_size8);"
529
+ />
530
+ </div>
531
+ </div>
532
+ </li>
533
+ </DocumentFragment>
534
+ `;
535
+
536
+ exports[`ListItemWithAvatar Render with autoHover 1`] = `
537
+ <DocumentFragment>
538
+ <li
539
+ class="d-flex d-flex-row d-items-center list medium default defaultEffect withBorder"
540
+ data-a11y-inset-focus="true"
541
+ data-id="List_ListItemWithAvatar"
542
+ data-selector-id="listItemWithAvatar"
543
+ data-test-id="List_ListItemWithAvatar"
544
+ role="option"
545
+ tabindex="0"
546
+ >
547
+ <div
548
+ class="d-flex-shrink-0 contentWrapper"
549
+ data-id="boxComponent"
550
+ data-selector-id="box"
551
+ data-test-id="boxComponent"
552
+ >
553
+ <div
554
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
555
+ data-id="boxComponent"
556
+ data-selector-id="box"
557
+ data-test-id="boxComponent"
558
+ >
559
+ <div
560
+ class="d-flex-shrink-0 titleBox"
561
+ data-id="boxComponent"
562
+ data-selector-id="box"
563
+ data-test-id="boxComponent"
564
+ >
565
+ <div
566
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
567
+ data-id="boxComponent"
568
+ data-selector-id="box"
569
+ data-test-id="boxComponent"
570
+ >
571
+ List
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </li>
577
+ </DocumentFragment>
578
+ `;
579
+
580
+ exports[`ListItemWithAvatar Render with customClass customAvatarTeam without isTeam 1`] = `
581
+ <DocumentFragment>
582
+ <li
583
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
584
+ data-a11y-inset-focus="true"
585
+ data-id="List_ListItemWithAvatar"
586
+ data-selector-id="listItemWithAvatar"
587
+ data-test-id="List_ListItemWithAvatar"
588
+ role="option"
589
+ tabindex="0"
590
+ >
591
+ <div
592
+ class="d-flex-shrink-0 contentWrapper"
593
+ data-id="boxComponent"
594
+ data-selector-id="box"
595
+ data-test-id="boxComponent"
596
+ >
597
+ <div
598
+ class="leftAvatar"
599
+ >
600
+ <div
601
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
602
+ data-id="boxComponent"
603
+ data-selector-id="box"
604
+ data-test-id="boxComponent"
605
+ >
606
+ <div
607
+ class="avatar small small circle primary black border"
608
+ data-id="Avatar"
609
+ data-selector-id="avatar"
610
+ data-test-id="Avatar"
611
+ data-title="John Doe"
612
+ >
613
+ <span
614
+ class="initial"
615
+ data-id="Avatar_AvatarInitial"
616
+ data-selector-id="avatar_AvatarInitial"
617
+ data-test-id="Avatar_AvatarInitial"
618
+ >
619
+ JD
620
+ </span>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ <div
625
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
626
+ data-id="boxComponent"
627
+ data-selector-id="box"
628
+ data-test-id="boxComponent"
629
+ >
630
+ <div
631
+ class="d-flex-shrink-0 titleBox"
632
+ data-id="boxComponent"
633
+ data-selector-id="box"
634
+ data-test-id="boxComponent"
635
+ >
636
+ <div
637
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
638
+ data-id="boxComponent"
639
+ data-selector-id="box"
640
+ data-test-id="boxComponent"
641
+ >
642
+ List
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </li>
648
+ </DocumentFragment>
649
+ `;
650
+
651
+ exports[`ListItemWithAvatar Render with customClass customListItem 1`] = `
652
+ <DocumentFragment>
653
+ <li
654
+ class="d-flex d-flex-row d-items-center list medium default withBorder custom-list-item"
655
+ data-a11y-inset-focus="true"
656
+ data-id="List_ListItemWithAvatar"
657
+ data-selector-id="listItemWithAvatar"
658
+ data-test-id="List_ListItemWithAvatar"
659
+ role="option"
660
+ tabindex="0"
661
+ >
662
+ <div
663
+ class="d-flex-shrink-0 contentWrapper"
664
+ data-id="boxComponent"
665
+ data-selector-id="box"
666
+ data-test-id="boxComponent"
667
+ >
668
+ <div
669
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
670
+ data-id="boxComponent"
671
+ data-selector-id="box"
672
+ data-test-id="boxComponent"
673
+ >
674
+ <div
675
+ class="d-flex-shrink-0 titleBox"
676
+ data-id="boxComponent"
677
+ data-selector-id="box"
678
+ data-test-id="boxComponent"
679
+ >
680
+ <div
681
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
682
+ data-id="boxComponent"
683
+ data-selector-id="box"
684
+ data-test-id="boxComponent"
685
+ >
686
+ List
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </div>
691
+ </li>
692
+ </DocumentFragment>
693
+ `;
694
+
695
+ exports[`ListItemWithAvatar Render with customProps AvatarProps and no name 1`] = `
696
+ <DocumentFragment>
697
+ <li
698
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
699
+ data-a11y-inset-focus="true"
700
+ data-id="List_ListItemWithAvatar"
701
+ data-selector-id="listItemWithAvatar"
702
+ data-test-id="List_ListItemWithAvatar"
703
+ role="option"
704
+ tabindex="0"
705
+ >
706
+ <div
707
+ class="d-flex-shrink-0 contentWrapper"
708
+ data-id="boxComponent"
709
+ data-selector-id="box"
710
+ data-test-id="boxComponent"
711
+ >
712
+ <div
713
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
714
+ data-id="boxComponent"
715
+ data-selector-id="box"
716
+ data-test-id="boxComponent"
717
+ >
718
+ <div
719
+ class="d-flex-shrink-0 titleBox"
720
+ data-id="boxComponent"
721
+ data-selector-id="box"
722
+ data-test-id="boxComponent"
723
+ >
724
+ <div
725
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
726
+ data-id="boxComponent"
727
+ data-selector-id="box"
728
+ data-test-id="boxComponent"
729
+ >
730
+ List
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </li>
736
+ </DocumentFragment>
737
+ `;
738
+
739
+ exports[`ListItemWithAvatar Render with customProps ContainerProps align as baseline 1`] = `
740
+ <DocumentFragment>
741
+ <li
742
+ class="d-flex d-flex-row d-items-baseline list medium default withBorder"
743
+ data-a11y-inset-focus="true"
744
+ data-id="List_ListItemWithAvatar"
745
+ data-selector-id="listItemWithAvatar"
746
+ data-test-id="List_ListItemWithAvatar"
747
+ role="option"
748
+ tabindex="0"
749
+ >
750
+ <div
751
+ class="d-flex-shrink-0 contentWrapper"
752
+ data-id="boxComponent"
753
+ data-selector-id="box"
754
+ data-test-id="boxComponent"
755
+ >
756
+ <div
757
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
758
+ data-id="boxComponent"
759
+ data-selector-id="box"
760
+ data-test-id="boxComponent"
761
+ >
762
+ <div
763
+ class="d-flex-shrink-0 titleBox"
764
+ data-id="boxComponent"
765
+ data-selector-id="box"
766
+ data-test-id="boxComponent"
767
+ >
768
+ <div
769
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
770
+ data-id="boxComponent"
771
+ data-selector-id="box"
772
+ data-test-id="boxComponent"
773
+ >
774
+ List
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </li>
780
+ </DocumentFragment>
781
+ `;
782
+
783
+ exports[`ListItemWithAvatar Render with customProps ListItemProps 1`] = `
784
+ <DocumentFragment>
785
+ <li
786
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
787
+ data-a11y-inset-focus="true"
788
+ data-custom-attr="true"
789
+ data-id="List_ListItemWithAvatar"
790
+ data-selector-id="listItemWithAvatar"
791
+ data-test-id="List_ListItemWithAvatar"
792
+ role="option"
793
+ tabindex="0"
794
+ >
795
+ <div
796
+ class="d-flex-shrink-0 contentWrapper"
797
+ data-id="boxComponent"
798
+ data-selector-id="box"
799
+ data-test-id="boxComponent"
800
+ >
801
+ <div
802
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
803
+ data-id="boxComponent"
804
+ data-selector-id="box"
805
+ data-test-id="boxComponent"
806
+ >
807
+ <div
808
+ class="d-flex-shrink-0 titleBox"
809
+ data-id="boxComponent"
810
+ data-selector-id="box"
811
+ data-test-id="boxComponent"
812
+ >
813
+ <div
814
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
815
+ data-id="boxComponent"
816
+ data-selector-id="box"
817
+ data-test-id="boxComponent"
818
+ >
819
+ List
820
+ </div>
821
+ </div>
822
+ </div>
823
+ </div>
824
+ </li>
825
+ </DocumentFragment>
826
+ `;
827
+
828
+ exports[`ListItemWithAvatar Render with dataSelectorId 1`] = `
829
+ <DocumentFragment>
830
+ <li
831
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
832
+ data-a11y-inset-focus="true"
833
+ data-id="List_ListItemWithAvatar"
834
+ data-selector-id="list-item-with-avatar-dataSelectorId"
835
+ data-test-id="List_ListItemWithAvatar"
836
+ role="option"
837
+ tabindex="0"
838
+ >
839
+ <div
840
+ class="d-flex-shrink-0 contentWrapper"
841
+ data-id="boxComponent"
842
+ data-selector-id="box"
843
+ data-test-id="boxComponent"
844
+ >
845
+ <div
846
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
847
+ data-id="boxComponent"
848
+ data-selector-id="box"
849
+ data-test-id="boxComponent"
850
+ >
851
+ <div
852
+ class="d-flex-shrink-0 titleBox"
853
+ data-id="boxComponent"
854
+ data-selector-id="box"
855
+ data-test-id="boxComponent"
856
+ >
857
+ <div
858
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
859
+ data-id="boxComponent"
860
+ data-selector-id="box"
861
+ data-test-id="boxComponent"
862
+ >
863
+ List
864
+ </div>
865
+ </div>
866
+ </div>
867
+ </div>
868
+ </li>
869
+ </DocumentFragment>
870
+ `;
871
+
872
+ exports[`ListItemWithAvatar Render with empty value and dataId 1`] = `
873
+ <DocumentFragment>
874
+ <li
875
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
876
+ data-a11y-inset-focus="true"
877
+ data-id="list-item-with-avatar-dataId_ListItemWithAvatar"
878
+ data-selector-id="listItemWithAvatar"
879
+ data-test-id="list-item-with-avatar-dataId_ListItemWithAvatar"
880
+ role="option"
881
+ tabindex="0"
882
+ >
883
+ <div
884
+ class="d-flex-shrink-0 contentWrapper"
885
+ data-id="boxComponent"
886
+ data-selector-id="box"
887
+ data-test-id="boxComponent"
888
+ >
889
+ <div
890
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
891
+ data-id="boxComponent"
892
+ data-selector-id="box"
893
+ data-test-id="boxComponent"
894
+ >
895
+ <div
896
+ class="d-flex-shrink-0 titleBox"
897
+ data-id="boxComponent"
898
+ data-selector-id="box"
899
+ data-test-id="boxComponent"
900
+ />
901
+ </div>
902
+ </div>
903
+ </li>
904
+ </DocumentFragment>
905
+ `;
906
+
907
+ exports[`ListItemWithAvatar Render with highlight 1`] = `
908
+ <DocumentFragment>
909
+ <li
910
+ class="d-flex d-flex-row d-items-center list medium default defaultHover withBorder"
911
+ data-a11y-inset-focus="true"
912
+ data-id="List_ListItemWithAvatar"
913
+ data-selector-id="listItemWithAvatar"
914
+ data-test-id="List_ListItemWithAvatar"
915
+ role="option"
916
+ tabindex="0"
917
+ >
918
+ <div
919
+ class="d-flex-shrink-0 contentWrapper"
920
+ data-id="boxComponent"
921
+ data-selector-id="box"
922
+ data-test-id="boxComponent"
923
+ >
924
+ <div
925
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
926
+ data-id="boxComponent"
927
+ data-selector-id="box"
928
+ data-test-id="boxComponent"
929
+ >
930
+ <div
931
+ class="d-flex-shrink-0 titleBox"
932
+ data-id="boxComponent"
933
+ data-selector-id="box"
934
+ data-test-id="boxComponent"
935
+ >
936
+ <div
937
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
938
+ data-id="boxComponent"
939
+ data-selector-id="box"
940
+ data-test-id="boxComponent"
941
+ >
942
+ List
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </div>
947
+ </li>
948
+ </DocumentFragment>
949
+ `;
950
+
951
+ exports[`ListItemWithAvatar Render with isDisabled and title 1`] = `
952
+ <DocumentFragment>
953
+ <li
954
+ class="d-flex d-flex-row d-items-center list medium default disable withBorder"
955
+ data-a11y-inset-focus="true"
956
+ data-id="List_ListItemWithAvatar"
957
+ data-selector-id="listItemWithAvatar"
958
+ data-test-id="List_ListItemWithAvatar"
959
+ data-title="Disabled title"
960
+ role="option"
961
+ >
962
+ <div
963
+ class="d-flex-shrink-0 contentWrapper"
964
+ data-id="boxComponent"
965
+ data-selector-id="box"
966
+ data-test-id="boxComponent"
967
+ >
968
+ <div
969
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
970
+ data-id="boxComponent"
971
+ data-selector-id="box"
972
+ data-test-id="boxComponent"
973
+ >
974
+ <div
975
+ class="d-flex-shrink-0 titleBox"
976
+ data-id="boxComponent"
977
+ data-selector-id="box"
978
+ data-test-id="boxComponent"
979
+ >
980
+ <div
981
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
982
+ data-id="boxComponent"
983
+ data-selector-id="box"
984
+ data-test-id="boxComponent"
985
+ >
986
+ List
987
+ </div>
988
+ </div>
989
+ </div>
990
+ </div>
991
+ </li>
992
+ </DocumentFragment>
993
+ `;
994
+
995
+ exports[`ListItemWithAvatar Render with isTeam and name 1`] = `
996
+ <DocumentFragment>
997
+ <li
998
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
999
+ data-a11y-inset-focus="true"
1000
+ data-id="List_ListItemWithAvatar"
1001
+ data-selector-id="listItemWithAvatar"
1002
+ data-test-id="List_ListItemWithAvatar"
1003
+ role="option"
1004
+ tabindex="0"
1005
+ >
1006
+ <div
1007
+ class="d-flex-shrink-0 contentWrapper"
1008
+ data-id="boxComponent"
1009
+ data-selector-id="box"
1010
+ data-test-id="boxComponent"
1011
+ >
1012
+ <div
1013
+ class="leftAvatar"
1014
+ >
1015
+ <div
1016
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1017
+ data-id="boxComponent"
1018
+ data-selector-id="box"
1019
+ data-test-id="boxComponent"
1020
+ >
1021
+ <span
1022
+ class="container"
1023
+ data-id="avatarTeamComp"
1024
+ data-selector-id="avatarTeam"
1025
+ data-test-id="avatarTeamComp"
1026
+ >
1027
+ <div
1028
+ class="avatar small small circle primary black border"
1029
+ data-id="Avatar"
1030
+ data-selector-id="avatar"
1031
+ data-test-id="Avatar"
1032
+ data-title="Support Team"
1033
+ >
1034
+ <span
1035
+ class="initial"
1036
+ data-id="Avatar_AvatarInitial"
1037
+ data-selector-id="avatar_AvatarInitial"
1038
+ data-test-id="Avatar_AvatarInitial"
1039
+ >
1040
+ ST
1041
+ </span>
1042
+ </div>
1043
+ <span
1044
+ class="team nofill smallteam"
1045
+ />
1046
+ </span>
1047
+ </div>
1048
+ </div>
1049
+ <div
1050
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1051
+ data-id="boxComponent"
1052
+ data-selector-id="box"
1053
+ data-test-id="boxComponent"
1054
+ >
1055
+ <div
1056
+ class="d-flex-shrink-0 titleBox"
1057
+ data-id="boxComponent"
1058
+ data-selector-id="box"
1059
+ data-test-id="boxComponent"
1060
+ >
1061
+ <div
1062
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1063
+ data-id="boxComponent"
1064
+ data-selector-id="box"
1065
+ data-test-id="boxComponent"
1066
+ >
1067
+ List
1068
+ </div>
1069
+ </div>
1070
+ </div>
1071
+ </div>
1072
+ </li>
1073
+ </DocumentFragment>
1074
+ `;
1075
+
1076
+ exports[`ListItemWithAvatar Render with isTeam, name and avatarPalette as info 1`] = `
1077
+ <DocumentFragment>
1078
+ <li
1079
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1080
+ data-a11y-inset-focus="true"
1081
+ data-id="List_ListItemWithAvatar"
1082
+ data-selector-id="listItemWithAvatar"
1083
+ data-test-id="List_ListItemWithAvatar"
1084
+ role="option"
1085
+ tabindex="0"
1086
+ >
1087
+ <div
1088
+ class="d-flex-shrink-0 contentWrapper"
1089
+ data-id="boxComponent"
1090
+ data-selector-id="box"
1091
+ data-test-id="boxComponent"
1092
+ >
1093
+ <div
1094
+ class="leftAvatar"
1095
+ >
1096
+ <div
1097
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1098
+ data-id="boxComponent"
1099
+ data-selector-id="box"
1100
+ data-test-id="boxComponent"
1101
+ >
1102
+ <span
1103
+ class="container"
1104
+ data-id="avatarTeamComp"
1105
+ data-selector-id="avatarTeam"
1106
+ data-test-id="avatarTeamComp"
1107
+ >
1108
+ <div
1109
+ class="avatar small small circle info black border"
1110
+ data-id="Avatar"
1111
+ data-selector-id="avatar"
1112
+ data-test-id="Avatar"
1113
+ data-title="Support Team"
1114
+ >
1115
+ <span
1116
+ class="initial"
1117
+ data-id="Avatar_AvatarInitial"
1118
+ data-selector-id="avatar_AvatarInitial"
1119
+ data-test-id="Avatar_AvatarInitial"
1120
+ >
1121
+ ST
1122
+ </span>
1123
+ </div>
1124
+ <span
1125
+ class="team nofill smallteam"
1126
+ />
1127
+ </span>
1128
+ </div>
1129
+ </div>
1130
+ <div
1131
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1132
+ data-id="boxComponent"
1133
+ data-selector-id="box"
1134
+ data-test-id="boxComponent"
1135
+ >
1136
+ <div
1137
+ class="d-flex-shrink-0 titleBox"
1138
+ data-id="boxComponent"
1139
+ data-selector-id="box"
1140
+ data-test-id="boxComponent"
1141
+ >
1142
+ <div
1143
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1144
+ data-id="boxComponent"
1145
+ data-selector-id="box"
1146
+ data-test-id="boxComponent"
1147
+ >
1148
+ List
1149
+ </div>
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+ </li>
1154
+ </DocumentFragment>
1155
+ `;
1156
+
1157
+ exports[`ListItemWithAvatar Render with isTeam, name and avatarPalette as secondary 1`] = `
1158
+ <DocumentFragment>
1159
+ <li
1160
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1161
+ data-a11y-inset-focus="true"
1162
+ data-id="List_ListItemWithAvatar"
1163
+ data-selector-id="listItemWithAvatar"
1164
+ data-test-id="List_ListItemWithAvatar"
1165
+ role="option"
1166
+ tabindex="0"
1167
+ >
1168
+ <div
1169
+ class="d-flex-shrink-0 contentWrapper"
1170
+ data-id="boxComponent"
1171
+ data-selector-id="box"
1172
+ data-test-id="boxComponent"
1173
+ >
1174
+ <div
1175
+ class="leftAvatar"
1176
+ >
1177
+ <div
1178
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1179
+ data-id="boxComponent"
1180
+ data-selector-id="box"
1181
+ data-test-id="boxComponent"
1182
+ >
1183
+ <span
1184
+ class="container"
1185
+ data-id="avatarTeamComp"
1186
+ data-selector-id="avatarTeam"
1187
+ data-test-id="avatarTeamComp"
1188
+ >
1189
+ <div
1190
+ class="avatar small small circle secondary white border"
1191
+ data-id="Avatar"
1192
+ data-selector-id="avatar"
1193
+ data-test-id="Avatar"
1194
+ data-title="Support Team"
1195
+ >
1196
+ <span
1197
+ class="initial"
1198
+ data-id="Avatar_AvatarInitial"
1199
+ data-selector-id="avatar_AvatarInitial"
1200
+ data-test-id="Avatar_AvatarInitial"
1201
+ >
1202
+ ST
1203
+ </span>
1204
+ </div>
1205
+ <span
1206
+ class="team nofill smallteam"
1207
+ />
1208
+ </span>
1209
+ </div>
1210
+ </div>
1211
+ <div
1212
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1213
+ data-id="boxComponent"
1214
+ data-selector-id="box"
1215
+ data-test-id="boxComponent"
1216
+ >
1217
+ <div
1218
+ class="d-flex-shrink-0 titleBox"
1219
+ data-id="boxComponent"
1220
+ data-selector-id="box"
1221
+ data-test-id="boxComponent"
1222
+ >
1223
+ <div
1224
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1225
+ data-id="boxComponent"
1226
+ data-selector-id="box"
1227
+ data-test-id="boxComponent"
1228
+ >
1229
+ List
1230
+ </div>
1231
+ </div>
1232
+ </div>
1233
+ </div>
1234
+ </li>
1235
+ </DocumentFragment>
1236
+ `;
1237
+
1238
+ exports[`ListItemWithAvatar Render with isTeam, name and customClass customAvatar and customAvatarTeam 1`] = `
1239
+ <DocumentFragment>
1240
+ <li
1241
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1242
+ data-a11y-inset-focus="true"
1243
+ data-id="List_ListItemWithAvatar"
1244
+ data-selector-id="listItemWithAvatar"
1245
+ data-test-id="List_ListItemWithAvatar"
1246
+ role="option"
1247
+ tabindex="0"
1248
+ >
1249
+ <div
1250
+ class="d-flex-shrink-0 contentWrapper"
1251
+ data-id="boxComponent"
1252
+ data-selector-id="box"
1253
+ data-test-id="boxComponent"
1254
+ >
1255
+ <div
1256
+ class="leftAvatar"
1257
+ >
1258
+ <div
1259
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1260
+ data-id="boxComponent"
1261
+ data-selector-id="box"
1262
+ data-test-id="boxComponent"
1263
+ >
1264
+ <span
1265
+ class="container"
1266
+ data-id="avatarTeamComp"
1267
+ data-selector-id="avatarTeam"
1268
+ data-test-id="avatarTeamComp"
1269
+ >
1270
+ <div
1271
+ class="avatar small small circle primary black border custom-avatar"
1272
+ data-id="Avatar"
1273
+ data-selector-id="avatar"
1274
+ data-test-id="Avatar"
1275
+ data-title="Support Team"
1276
+ >
1277
+ <span
1278
+ class="initial"
1279
+ data-id="Avatar_AvatarInitial"
1280
+ data-selector-id="avatar_AvatarInitial"
1281
+ data-test-id="Avatar_AvatarInitial"
1282
+ >
1283
+ ST
1284
+ </span>
1285
+ </div>
1286
+ <span
1287
+ class="team nofill smallteam custom-avatar-team"
1288
+ />
1289
+ </span>
1290
+ </div>
1291
+ </div>
1292
+ <div
1293
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1294
+ data-id="boxComponent"
1295
+ data-selector-id="box"
1296
+ data-test-id="boxComponent"
1297
+ >
1298
+ <div
1299
+ class="d-flex-shrink-0 titleBox"
1300
+ data-id="boxComponent"
1301
+ data-selector-id="box"
1302
+ data-test-id="boxComponent"
1303
+ >
1304
+ <div
1305
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1306
+ data-id="boxComponent"
1307
+ data-selector-id="box"
1308
+ data-test-id="boxComponent"
1309
+ >
1310
+ List
1311
+ </div>
1312
+ </div>
1313
+ </div>
1314
+ </div>
1315
+ </li>
1316
+ </DocumentFragment>
1317
+ `;
1318
+
1319
+ exports[`ListItemWithAvatar Render with isTeam, name and customProps AvatarTeamProps 1`] = `
1320
+ <DocumentFragment>
1321
+ <li
1322
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1323
+ data-a11y-inset-focus="true"
1324
+ data-id="List_ListItemWithAvatar"
1325
+ data-selector-id="listItemWithAvatar"
1326
+ data-test-id="List_ListItemWithAvatar"
1327
+ role="option"
1328
+ tabindex="0"
1329
+ >
1330
+ <div
1331
+ class="d-flex-shrink-0 contentWrapper"
1332
+ data-id="boxComponent"
1333
+ data-selector-id="box"
1334
+ data-test-id="boxComponent"
1335
+ >
1336
+ <div
1337
+ class="leftAvatar"
1338
+ >
1339
+ <div
1340
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1341
+ data-id="boxComponent"
1342
+ data-selector-id="box"
1343
+ data-test-id="boxComponent"
1344
+ >
1345
+ <span
1346
+ class="container"
1347
+ data-id="avatarTeamComp"
1348
+ data-selector-id="avatarTeam"
1349
+ data-test-id="avatarTeamComp"
1350
+ >
1351
+ <div
1352
+ class="avatar small small circle primary black border"
1353
+ data-id="Avatar"
1354
+ data-selector-id="avatar"
1355
+ data-test-id="Avatar"
1356
+ data-title="Support Team"
1357
+ >
1358
+ <span
1359
+ class="initial"
1360
+ data-id="Avatar_AvatarInitial"
1361
+ data-selector-id="avatar_AvatarInitial"
1362
+ data-test-id="Avatar_AvatarInitial"
1363
+ >
1364
+ ST
1365
+ </span>
1366
+ </div>
1367
+ <span
1368
+ class="team primaryFilled smallteam"
1369
+ />
1370
+ </span>
1371
+ </div>
1372
+ </div>
1373
+ <div
1374
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1375
+ data-id="boxComponent"
1376
+ data-selector-id="box"
1377
+ data-test-id="boxComponent"
1378
+ >
1379
+ <div
1380
+ class="d-flex-shrink-0 titleBox"
1381
+ data-id="boxComponent"
1382
+ data-selector-id="box"
1383
+ data-test-id="boxComponent"
1384
+ >
1385
+ <div
1386
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1387
+ data-id="boxComponent"
1388
+ data-selector-id="box"
1389
+ data-test-id="boxComponent"
1390
+ >
1391
+ List
1392
+ </div>
1393
+ </div>
1394
+ </div>
1395
+ </div>
1396
+ </li>
1397
+ </DocumentFragment>
1398
+ `;
1399
+
1400
+ exports[`ListItemWithAvatar Render with isTeam, name and imgSrc 1`] = `
1401
+ <DocumentFragment>
1402
+ <li
1403
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1404
+ data-a11y-inset-focus="true"
1405
+ data-id="List_ListItemWithAvatar"
1406
+ data-selector-id="listItemWithAvatar"
1407
+ data-test-id="List_ListItemWithAvatar"
1408
+ role="option"
1409
+ tabindex="0"
1410
+ >
1411
+ <div
1412
+ class="d-flex-shrink-0 contentWrapper"
1413
+ data-id="boxComponent"
1414
+ data-selector-id="box"
1415
+ data-test-id="boxComponent"
1416
+ >
1417
+ <div
1418
+ class="leftAvatar"
1419
+ >
1420
+ <div
1421
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1422
+ data-id="boxComponent"
1423
+ data-selector-id="box"
1424
+ data-test-id="boxComponent"
1425
+ >
1426
+ <span
1427
+ class="container"
1428
+ data-id="avatarTeamComp"
1429
+ data-selector-id="avatarTeam"
1430
+ data-test-id="avatarTeamComp"
1431
+ >
1432
+ <div
1433
+ class="avatar small small circle primary black border"
1434
+ data-id="Avatar"
1435
+ data-selector-id="avatar"
1436
+ data-test-id="Avatar"
1437
+ data-title="Support Team"
1438
+ >
1439
+ <img
1440
+ alt="Support Team"
1441
+ class="image animate innerBorder"
1442
+ data-id="Avatar_AvatarImg"
1443
+ data-selector-id="avatar_AvatarImg"
1444
+ data-test-id="Avatar_AvatarImg"
1445
+ name="Support Team"
1446
+ src="team.png"
1447
+ />
1448
+ </div>
1449
+ <span
1450
+ class="team nofill smallteam"
1451
+ />
1452
+ </span>
1453
+ </div>
1454
+ </div>
1455
+ <div
1456
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1457
+ data-id="boxComponent"
1458
+ data-selector-id="box"
1459
+ data-test-id="boxComponent"
1460
+ >
1461
+ <div
1462
+ class="d-flex-shrink-0 titleBox"
1463
+ data-id="boxComponent"
1464
+ data-selector-id="box"
1465
+ data-test-id="boxComponent"
1466
+ >
1467
+ <div
1468
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1469
+ data-id="boxComponent"
1470
+ data-selector-id="box"
1471
+ data-test-id="boxComponent"
1472
+ >
1473
+ List
1474
+ </div>
1475
+ </div>
1476
+ </div>
1477
+ </div>
1478
+ </li>
1479
+ </DocumentFragment>
1480
+ `;
1481
+
1482
+ exports[`ListItemWithAvatar Render with isTeam, name and needAvatarTitle=false 1`] = `
1483
+ <DocumentFragment>
1484
+ <li
1485
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1486
+ data-a11y-inset-focus="true"
1487
+ data-id="List_ListItemWithAvatar"
1488
+ data-selector-id="listItemWithAvatar"
1489
+ data-test-id="List_ListItemWithAvatar"
1490
+ role="option"
1491
+ tabindex="0"
1492
+ >
1493
+ <div
1494
+ class="d-flex-shrink-0 contentWrapper"
1495
+ data-id="boxComponent"
1496
+ data-selector-id="box"
1497
+ data-test-id="boxComponent"
1498
+ >
1499
+ <div
1500
+ class="leftAvatar"
1501
+ >
1502
+ <div
1503
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1504
+ data-id="boxComponent"
1505
+ data-selector-id="box"
1506
+ data-test-id="boxComponent"
1507
+ >
1508
+ <span
1509
+ class="container"
1510
+ data-id="avatarTeamComp"
1511
+ data-selector-id="avatarTeam"
1512
+ data-test-id="avatarTeamComp"
1513
+ >
1514
+ <div
1515
+ class="avatar small small circle primary black border"
1516
+ data-id="Avatar"
1517
+ data-selector-id="avatar"
1518
+ data-test-id="Avatar"
1519
+ >
1520
+ <span
1521
+ class="initial"
1522
+ data-id="Avatar_AvatarInitial"
1523
+ data-selector-id="avatar_AvatarInitial"
1524
+ data-test-id="Avatar_AvatarInitial"
1525
+ >
1526
+ ST
1527
+ </span>
1528
+ </div>
1529
+ <span
1530
+ class="team nofill smallteam"
1531
+ />
1532
+ </span>
1533
+ </div>
1534
+ </div>
1535
+ <div
1536
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1537
+ data-id="boxComponent"
1538
+ data-selector-id="box"
1539
+ data-test-id="boxComponent"
1540
+ >
1541
+ <div
1542
+ class="d-flex-shrink-0 titleBox"
1543
+ data-id="boxComponent"
1544
+ data-selector-id="box"
1545
+ data-test-id="boxComponent"
1546
+ >
1547
+ <div
1548
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1549
+ data-id="boxComponent"
1550
+ data-selector-id="box"
1551
+ data-test-id="boxComponent"
1552
+ >
1553
+ List
1554
+ </div>
1555
+ </div>
1556
+ </div>
1557
+ </div>
1558
+ </li>
1559
+ </DocumentFragment>
1560
+ `;
1561
+
1562
+ exports[`ListItemWithAvatar Render with isTeam, name and palette as dark 1`] = `
1563
+ <DocumentFragment>
1564
+ <li
1565
+ class="d-flex d-flex-row d-items-center list medium dark withBorder"
1566
+ data-a11y-inset-focus="true"
1567
+ data-id="List_ListItemWithAvatar"
1568
+ data-selector-id="listItemWithAvatar"
1569
+ data-test-id="List_ListItemWithAvatar"
1570
+ role="option"
1571
+ tabindex="0"
1572
+ >
1573
+ <div
1574
+ class="d-flex-shrink-0 contentWrapper"
1575
+ data-id="boxComponent"
1576
+ data-selector-id="box"
1577
+ data-test-id="boxComponent"
1578
+ >
1579
+ <div
1580
+ class="leftAvatar"
1581
+ >
1582
+ <div
1583
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1584
+ data-id="boxComponent"
1585
+ data-selector-id="box"
1586
+ data-test-id="boxComponent"
1587
+ >
1588
+ <span
1589
+ class="container"
1590
+ data-id="avatarTeamComp"
1591
+ data-selector-id="avatarTeam"
1592
+ data-test-id="avatarTeamComp"
1593
+ >
1594
+ <div
1595
+ class="avatar small small circle info white border"
1596
+ data-id="Avatar"
1597
+ data-selector-id="avatar"
1598
+ data-test-id="Avatar"
1599
+ data-title="Support Team"
1600
+ >
1601
+ <span
1602
+ class="initial"
1603
+ data-id="Avatar_AvatarInitial"
1604
+ data-selector-id="avatar_AvatarInitial"
1605
+ data-test-id="Avatar_AvatarInitial"
1606
+ >
1607
+ ST
1608
+ </span>
1609
+ </div>
1610
+ <span
1611
+ class="team nofill smallteam"
1612
+ />
1613
+ </span>
1614
+ </div>
1615
+ </div>
1616
+ <div
1617
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1618
+ data-id="boxComponent"
1619
+ data-selector-id="box"
1620
+ data-test-id="boxComponent"
1621
+ >
1622
+ <div
1623
+ class="d-flex-shrink-0 titleBox"
1624
+ data-id="boxComponent"
1625
+ data-selector-id="box"
1626
+ data-test-id="boxComponent"
1627
+ >
1628
+ <div
1629
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1630
+ data-id="boxComponent"
1631
+ data-selector-id="box"
1632
+ data-test-id="boxComponent"
1633
+ >
1634
+ List
1635
+ </div>
1636
+ </div>
1637
+ </div>
1638
+ </div>
1639
+ </li>
1640
+ </DocumentFragment>
1641
+ `;
1642
+
1643
+ exports[`ListItemWithAvatar Render with name 1`] = `
1644
+ <DocumentFragment>
1645
+ <li
1646
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1647
+ data-a11y-inset-focus="true"
1648
+ data-id="List_ListItemWithAvatar"
1649
+ data-selector-id="listItemWithAvatar"
1650
+ data-test-id="List_ListItemWithAvatar"
1651
+ role="option"
1652
+ tabindex="0"
1653
+ >
1654
+ <div
1655
+ class="d-flex-shrink-0 contentWrapper"
1656
+ data-id="boxComponent"
1657
+ data-selector-id="box"
1658
+ data-test-id="boxComponent"
1659
+ >
1660
+ <div
1661
+ class="leftAvatar"
1662
+ >
1663
+ <div
1664
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1665
+ data-id="boxComponent"
1666
+ data-selector-id="box"
1667
+ data-test-id="boxComponent"
1668
+ >
1669
+ <div
1670
+ class="avatar small small circle primary black border"
1671
+ data-id="Avatar"
1672
+ data-selector-id="avatar"
1673
+ data-test-id="Avatar"
1674
+ data-title="John Doe"
1675
+ >
1676
+ <span
1677
+ class="initial"
1678
+ data-id="Avatar_AvatarInitial"
1679
+ data-selector-id="avatar_AvatarInitial"
1680
+ data-test-id="Avatar_AvatarInitial"
1681
+ >
1682
+ JD
1683
+ </span>
1684
+ </div>
1685
+ </div>
1686
+ </div>
1687
+ <div
1688
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1689
+ data-id="boxComponent"
1690
+ data-selector-id="box"
1691
+ data-test-id="boxComponent"
1692
+ >
1693
+ <div
1694
+ class="d-flex-shrink-0 titleBox"
1695
+ data-id="boxComponent"
1696
+ data-selector-id="box"
1697
+ data-test-id="boxComponent"
1698
+ >
1699
+ <div
1700
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1701
+ data-id="boxComponent"
1702
+ data-selector-id="box"
1703
+ data-test-id="boxComponent"
1704
+ >
1705
+ List
1706
+ </div>
1707
+ </div>
1708
+ </div>
1709
+ </div>
1710
+ </li>
1711
+ </DocumentFragment>
1712
+ `;
1713
+
1714
+ exports[`ListItemWithAvatar Render with name and avatarPalette as default 1`] = `
1715
+ <DocumentFragment>
1716
+ <li
1717
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1718
+ data-a11y-inset-focus="true"
1719
+ data-id="List_ListItemWithAvatar"
1720
+ data-selector-id="listItemWithAvatar"
1721
+ data-test-id="List_ListItemWithAvatar"
1722
+ role="option"
1723
+ tabindex="0"
1724
+ >
1725
+ <div
1726
+ class="d-flex-shrink-0 contentWrapper"
1727
+ data-id="boxComponent"
1728
+ data-selector-id="box"
1729
+ data-test-id="boxComponent"
1730
+ >
1731
+ <div
1732
+ class="leftAvatar"
1733
+ >
1734
+ <div
1735
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1736
+ data-id="boxComponent"
1737
+ data-selector-id="box"
1738
+ data-test-id="boxComponent"
1739
+ >
1740
+ <div
1741
+ class="avatar small small circle default black border"
1742
+ data-id="Avatar"
1743
+ data-selector-id="avatar"
1744
+ data-test-id="Avatar"
1745
+ data-title="John Doe"
1746
+ >
1747
+ <span
1748
+ class="initial"
1749
+ data-id="Avatar_AvatarInitial"
1750
+ data-selector-id="avatar_AvatarInitial"
1751
+ data-test-id="Avatar_AvatarInitial"
1752
+ >
1753
+ JD
1754
+ </span>
1755
+ </div>
1756
+ </div>
1757
+ </div>
1758
+ <div
1759
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1760
+ data-id="boxComponent"
1761
+ data-selector-id="box"
1762
+ data-test-id="boxComponent"
1763
+ >
1764
+ <div
1765
+ class="d-flex-shrink-0 titleBox"
1766
+ data-id="boxComponent"
1767
+ data-selector-id="box"
1768
+ data-test-id="boxComponent"
1769
+ >
1770
+ <div
1771
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1772
+ data-id="boxComponent"
1773
+ data-selector-id="box"
1774
+ data-test-id="boxComponent"
1775
+ >
1776
+ List
1777
+ </div>
1778
+ </div>
1779
+ </div>
1780
+ </div>
1781
+ </li>
1782
+ </DocumentFragment>
1783
+ `;
1784
+
1785
+ exports[`ListItemWithAvatar Render with name and avatarPalette as info 1`] = `
1786
+ <DocumentFragment>
1787
+ <li
1788
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1789
+ data-a11y-inset-focus="true"
1790
+ data-id="List_ListItemWithAvatar"
1791
+ data-selector-id="listItemWithAvatar"
1792
+ data-test-id="List_ListItemWithAvatar"
1793
+ role="option"
1794
+ tabindex="0"
1795
+ >
1796
+ <div
1797
+ class="d-flex-shrink-0 contentWrapper"
1798
+ data-id="boxComponent"
1799
+ data-selector-id="box"
1800
+ data-test-id="boxComponent"
1801
+ >
1802
+ <div
1803
+ class="leftAvatar"
1804
+ >
1805
+ <div
1806
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1807
+ data-id="boxComponent"
1808
+ data-selector-id="box"
1809
+ data-test-id="boxComponent"
1810
+ >
1811
+ <div
1812
+ class="avatar small small circle info black border"
1813
+ data-id="Avatar"
1814
+ data-selector-id="avatar"
1815
+ data-test-id="Avatar"
1816
+ data-title="John Doe"
1817
+ >
1818
+ <span
1819
+ class="initial"
1820
+ data-id="Avatar_AvatarInitial"
1821
+ data-selector-id="avatar_AvatarInitial"
1822
+ data-test-id="Avatar_AvatarInitial"
1823
+ >
1824
+ JD
1825
+ </span>
1826
+ </div>
1827
+ </div>
1828
+ </div>
1829
+ <div
1830
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1831
+ data-id="boxComponent"
1832
+ data-selector-id="box"
1833
+ data-test-id="boxComponent"
1834
+ >
1835
+ <div
1836
+ class="d-flex-shrink-0 titleBox"
1837
+ data-id="boxComponent"
1838
+ data-selector-id="box"
1839
+ data-test-id="boxComponent"
1840
+ >
1841
+ <div
1842
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1843
+ data-id="boxComponent"
1844
+ data-selector-id="box"
1845
+ data-test-id="boxComponent"
1846
+ >
1847
+ List
1848
+ </div>
1849
+ </div>
1850
+ </div>
1851
+ </div>
1852
+ </li>
1853
+ </DocumentFragment>
1854
+ `;
1855
+
1856
+ exports[`ListItemWithAvatar Render with name and avatarPalette as secondary 1`] = `
1857
+ <DocumentFragment>
1858
+ <li
1859
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1860
+ data-a11y-inset-focus="true"
1861
+ data-id="List_ListItemWithAvatar"
1862
+ data-selector-id="listItemWithAvatar"
1863
+ data-test-id="List_ListItemWithAvatar"
1864
+ role="option"
1865
+ tabindex="0"
1866
+ >
1867
+ <div
1868
+ class="d-flex-shrink-0 contentWrapper"
1869
+ data-id="boxComponent"
1870
+ data-selector-id="box"
1871
+ data-test-id="boxComponent"
1872
+ >
1873
+ <div
1874
+ class="leftAvatar"
1875
+ >
1876
+ <div
1877
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1878
+ data-id="boxComponent"
1879
+ data-selector-id="box"
1880
+ data-test-id="boxComponent"
1881
+ >
1882
+ <div
1883
+ class="avatar small small circle secondary white border"
1884
+ data-id="Avatar"
1885
+ data-selector-id="avatar"
1886
+ data-test-id="Avatar"
1887
+ data-title="John Doe"
1888
+ >
1889
+ <span
1890
+ class="initial"
1891
+ data-id="Avatar_AvatarInitial"
1892
+ data-selector-id="avatar_AvatarInitial"
1893
+ data-test-id="Avatar_AvatarInitial"
1894
+ >
1895
+ JD
1896
+ </span>
1897
+ </div>
1898
+ </div>
1899
+ </div>
1900
+ <div
1901
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1902
+ data-id="boxComponent"
1903
+ data-selector-id="box"
1904
+ data-test-id="boxComponent"
1905
+ >
1906
+ <div
1907
+ class="d-flex-shrink-0 titleBox"
1908
+ data-id="boxComponent"
1909
+ data-selector-id="box"
1910
+ data-test-id="boxComponent"
1911
+ >
1912
+ <div
1913
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1914
+ data-id="boxComponent"
1915
+ data-selector-id="box"
1916
+ data-test-id="boxComponent"
1917
+ >
1918
+ List
1919
+ </div>
1920
+ </div>
1921
+ </div>
1922
+ </div>
1923
+ </li>
1924
+ </DocumentFragment>
1925
+ `;
1926
+
1927
+ exports[`ListItemWithAvatar Render with name and customClass customAvatar 1`] = `
1928
+ <DocumentFragment>
1929
+ <li
1930
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
1931
+ data-a11y-inset-focus="true"
1932
+ data-id="List_ListItemWithAvatar"
1933
+ data-selector-id="listItemWithAvatar"
1934
+ data-test-id="List_ListItemWithAvatar"
1935
+ role="option"
1936
+ tabindex="0"
1937
+ >
1938
+ <div
1939
+ class="d-flex-shrink-0 contentWrapper"
1940
+ data-id="boxComponent"
1941
+ data-selector-id="box"
1942
+ data-test-id="boxComponent"
1943
+ >
1944
+ <div
1945
+ class="leftAvatar"
1946
+ >
1947
+ <div
1948
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
1949
+ data-id="boxComponent"
1950
+ data-selector-id="box"
1951
+ data-test-id="boxComponent"
1952
+ >
1953
+ <div
1954
+ class="avatar small small circle primary black border custom-avatar"
1955
+ data-id="Avatar"
1956
+ data-selector-id="avatar"
1957
+ data-test-id="Avatar"
1958
+ data-title="John Doe"
1959
+ >
1960
+ <span
1961
+ class="initial"
1962
+ data-id="Avatar_AvatarInitial"
1963
+ data-selector-id="avatar_AvatarInitial"
1964
+ data-test-id="Avatar_AvatarInitial"
1965
+ >
1966
+ JD
1967
+ </span>
1968
+ </div>
1969
+ </div>
1970
+ </div>
1971
+ <div
1972
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
1973
+ data-id="boxComponent"
1974
+ data-selector-id="box"
1975
+ data-test-id="boxComponent"
1976
+ >
1977
+ <div
1978
+ class="d-flex-shrink-0 titleBox"
1979
+ data-id="boxComponent"
1980
+ data-selector-id="box"
1981
+ data-test-id="boxComponent"
1982
+ >
1983
+ <div
1984
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
1985
+ data-id="boxComponent"
1986
+ data-selector-id="box"
1987
+ data-test-id="boxComponent"
1988
+ >
1989
+ List
1990
+ </div>
1991
+ </div>
1992
+ </div>
1993
+ </div>
1994
+ </li>
1995
+ </DocumentFragment>
1996
+ `;
1997
+
1998
+ exports[`ListItemWithAvatar Render with name and customProps AvatarProps 1`] = `
1999
+ <DocumentFragment>
2000
+ <li
2001
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2002
+ data-a11y-inset-focus="true"
2003
+ data-id="List_ListItemWithAvatar"
2004
+ data-selector-id="listItemWithAvatar"
2005
+ data-test-id="List_ListItemWithAvatar"
2006
+ role="option"
2007
+ tabindex="0"
2008
+ >
2009
+ <div
2010
+ class="d-flex-shrink-0 contentWrapper"
2011
+ data-id="boxComponent"
2012
+ data-selector-id="box"
2013
+ data-test-id="boxComponent"
2014
+ >
2015
+ <div
2016
+ class="leftAvatar"
2017
+ >
2018
+ <div
2019
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
2020
+ data-id="boxComponent"
2021
+ data-selector-id="box"
2022
+ data-test-id="boxComponent"
2023
+ >
2024
+ <div
2025
+ class="avatar small small square_small primary black border"
2026
+ data-id="Avatar"
2027
+ data-selector-id="avatar"
2028
+ data-test-id="Avatar"
2029
+ data-title="John Doe"
2030
+ >
2031
+ <span
2032
+ class="initial"
2033
+ data-id="Avatar_AvatarInitial"
2034
+ data-selector-id="avatar_AvatarInitial"
2035
+ data-test-id="Avatar_AvatarInitial"
2036
+ >
2037
+ JD
2038
+ </span>
2039
+ </div>
2040
+ </div>
2041
+ </div>
2042
+ <div
2043
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2044
+ data-id="boxComponent"
2045
+ data-selector-id="box"
2046
+ data-test-id="boxComponent"
2047
+ >
2048
+ <div
2049
+ class="d-flex-shrink-0 titleBox"
2050
+ data-id="boxComponent"
2051
+ data-selector-id="box"
2052
+ data-test-id="boxComponent"
2053
+ >
2054
+ <div
2055
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2056
+ data-id="boxComponent"
2057
+ data-selector-id="box"
2058
+ data-test-id="boxComponent"
2059
+ >
2060
+ List
2061
+ </div>
2062
+ </div>
2063
+ </div>
2064
+ </div>
2065
+ </li>
2066
+ </DocumentFragment>
2067
+ `;
2068
+
2069
+ exports[`ListItemWithAvatar Render with name and customProps AvatarTeamProps without isTeam 1`] = `
2070
+ <DocumentFragment>
2071
+ <li
2072
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2073
+ data-a11y-inset-focus="true"
2074
+ data-id="List_ListItemWithAvatar"
2075
+ data-selector-id="listItemWithAvatar"
2076
+ data-test-id="List_ListItemWithAvatar"
2077
+ role="option"
2078
+ tabindex="0"
2079
+ >
2080
+ <div
2081
+ class="d-flex-shrink-0 contentWrapper"
2082
+ data-id="boxComponent"
2083
+ data-selector-id="box"
2084
+ data-test-id="boxComponent"
2085
+ >
2086
+ <div
2087
+ class="leftAvatar"
2088
+ >
2089
+ <div
2090
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
2091
+ data-id="boxComponent"
2092
+ data-selector-id="box"
2093
+ data-test-id="boxComponent"
2094
+ >
2095
+ <div
2096
+ class="avatar small small circle primary black border"
2097
+ data-id="Avatar"
2098
+ data-selector-id="avatar"
2099
+ data-test-id="Avatar"
2100
+ data-title="John Doe"
2101
+ >
2102
+ <span
2103
+ class="initial"
2104
+ data-id="Avatar_AvatarInitial"
2105
+ data-selector-id="avatar_AvatarInitial"
2106
+ data-test-id="Avatar_AvatarInitial"
2107
+ >
2108
+ JD
2109
+ </span>
2110
+ </div>
2111
+ </div>
2112
+ </div>
2113
+ <div
2114
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2115
+ data-id="boxComponent"
2116
+ data-selector-id="box"
2117
+ data-test-id="boxComponent"
2118
+ >
2119
+ <div
2120
+ class="d-flex-shrink-0 titleBox"
2121
+ data-id="boxComponent"
2122
+ data-selector-id="box"
2123
+ data-test-id="boxComponent"
2124
+ >
2125
+ <div
2126
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2127
+ data-id="boxComponent"
2128
+ data-selector-id="box"
2129
+ data-test-id="boxComponent"
2130
+ >
2131
+ List
2132
+ </div>
2133
+ </div>
2134
+ </div>
2135
+ </div>
2136
+ </li>
2137
+ </DocumentFragment>
2138
+ `;
2139
+
2140
+ exports[`ListItemWithAvatar Render with name and imgSrc 1`] = `
2141
+ <DocumentFragment>
2142
+ <li
2143
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2144
+ data-a11y-inset-focus="true"
2145
+ data-id="List_ListItemWithAvatar"
2146
+ data-selector-id="listItemWithAvatar"
2147
+ data-test-id="List_ListItemWithAvatar"
2148
+ role="option"
2149
+ tabindex="0"
2150
+ >
2151
+ <div
2152
+ class="d-flex-shrink-0 contentWrapper"
2153
+ data-id="boxComponent"
2154
+ data-selector-id="box"
2155
+ data-test-id="boxComponent"
2156
+ >
2157
+ <div
2158
+ class="leftAvatar"
2159
+ >
2160
+ <div
2161
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
2162
+ data-id="boxComponent"
2163
+ data-selector-id="box"
2164
+ data-test-id="boxComponent"
2165
+ >
2166
+ <div
2167
+ class="avatar small small circle primary black"
2168
+ data-id="Avatar"
2169
+ data-selector-id="avatar"
2170
+ data-test-id="Avatar"
2171
+ data-title="John Doe"
2172
+ >
2173
+ <img
2174
+ alt="John Doe"
2175
+ class="image animate"
2176
+ data-id="Avatar_AvatarImg"
2177
+ data-selector-id="avatar_AvatarImg"
2178
+ data-test-id="Avatar_AvatarImg"
2179
+ name="John Doe"
2180
+ src="avatar.png"
2181
+ />
2182
+ <span
2183
+ class="shadow black"
2184
+ />
2185
+ </div>
2186
+ </div>
2187
+ </div>
2188
+ <div
2189
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2190
+ data-id="boxComponent"
2191
+ data-selector-id="box"
2192
+ data-test-id="boxComponent"
2193
+ >
2194
+ <div
2195
+ class="d-flex-shrink-0 titleBox"
2196
+ data-id="boxComponent"
2197
+ data-selector-id="box"
2198
+ data-test-id="boxComponent"
2199
+ >
2200
+ <div
2201
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2202
+ data-id="boxComponent"
2203
+ data-selector-id="box"
2204
+ data-test-id="boxComponent"
2205
+ >
2206
+ List
2207
+ </div>
2208
+ </div>
2209
+ </div>
2210
+ </div>
2211
+ </li>
2212
+ </DocumentFragment>
2213
+ `;
2214
+
2215
+ exports[`ListItemWithAvatar Render with name and initial 1`] = `
2216
+ <DocumentFragment>
2217
+ <li
2218
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2219
+ data-a11y-inset-focus="true"
2220
+ data-id="List_ListItemWithAvatar"
2221
+ data-selector-id="listItemWithAvatar"
2222
+ data-test-id="List_ListItemWithAvatar"
2223
+ role="option"
2224
+ tabindex="0"
2225
+ >
2226
+ <div
2227
+ class="d-flex-shrink-0 contentWrapper"
2228
+ data-id="boxComponent"
2229
+ data-selector-id="box"
2230
+ data-test-id="boxComponent"
2231
+ >
2232
+ <div
2233
+ class="leftAvatar"
2234
+ >
2235
+ <div
2236
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
2237
+ data-id="boxComponent"
2238
+ data-selector-id="box"
2239
+ data-test-id="boxComponent"
2240
+ >
2241
+ <div
2242
+ class="avatar small small circle primary black border"
2243
+ data-id="Avatar"
2244
+ data-selector-id="avatar"
2245
+ data-test-id="Avatar"
2246
+ data-title="John Doe"
2247
+ >
2248
+ <span
2249
+ class="initial"
2250
+ data-id="Avatar_AvatarInitial"
2251
+ data-selector-id="avatar_AvatarInitial"
2252
+ data-test-id="Avatar_AvatarInitial"
2253
+ >
2254
+ AB
2255
+ </span>
2256
+ </div>
2257
+ </div>
2258
+ </div>
2259
+ <div
2260
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2261
+ data-id="boxComponent"
2262
+ data-selector-id="box"
2263
+ data-test-id="boxComponent"
2264
+ >
2265
+ <div
2266
+ class="d-flex-shrink-0 titleBox"
2267
+ data-id="boxComponent"
2268
+ data-selector-id="box"
2269
+ data-test-id="boxComponent"
2270
+ >
2271
+ <div
2272
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2273
+ data-id="boxComponent"
2274
+ data-selector-id="box"
2275
+ data-test-id="boxComponent"
2276
+ >
2277
+ List
2278
+ </div>
2279
+ </div>
2280
+ </div>
2281
+ </div>
2282
+ </li>
2283
+ </DocumentFragment>
2284
+ `;
2285
+
2286
+ exports[`ListItemWithAvatar Render with name and lhsAlignContent as center 1`] = `
2287
+ <DocumentFragment>
2288
+ <li
2289
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2290
+ data-a11y-inset-focus="true"
2291
+ data-id="List_ListItemWithAvatar"
2292
+ data-selector-id="listItemWithAvatar"
2293
+ data-test-id="List_ListItemWithAvatar"
2294
+ role="option"
2295
+ tabindex="0"
2296
+ >
2297
+ <div
2298
+ class="d-flex-shrink-0 contentWrapper"
2299
+ data-id="boxComponent"
2300
+ data-selector-id="box"
2301
+ data-test-id="boxComponent"
2302
+ >
2303
+ <div
2304
+ class="leftAvatar"
2305
+ >
2306
+ <div
2307
+ class="d-flex-shrink-0 d-self-center lhsBoxInner alignLhsBox_center"
2308
+ data-id="boxComponent"
2309
+ data-selector-id="box"
2310
+ data-test-id="boxComponent"
2311
+ >
2312
+ <div
2313
+ class="avatar small small circle primary black border"
2314
+ data-id="Avatar"
2315
+ data-selector-id="avatar"
2316
+ data-test-id="Avatar"
2317
+ data-title="John Doe"
2318
+ >
2319
+ <span
2320
+ class="initial"
2321
+ data-id="Avatar_AvatarInitial"
2322
+ data-selector-id="avatar_AvatarInitial"
2323
+ data-test-id="Avatar_AvatarInitial"
2324
+ >
2325
+ JD
2326
+ </span>
2327
+ </div>
2328
+ </div>
2329
+ </div>
2330
+ <div
2331
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2332
+ data-id="boxComponent"
2333
+ data-selector-id="box"
2334
+ data-test-id="boxComponent"
2335
+ >
2336
+ <div
2337
+ class="d-flex-shrink-0 titleBox"
2338
+ data-id="boxComponent"
2339
+ data-selector-id="box"
2340
+ data-test-id="boxComponent"
2341
+ >
2342
+ <div
2343
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2344
+ data-id="boxComponent"
2345
+ data-selector-id="box"
2346
+ data-test-id="boxComponent"
2347
+ >
2348
+ List
2349
+ </div>
2350
+ </div>
2351
+ </div>
2352
+ </div>
2353
+ </li>
2354
+ </DocumentFragment>
2355
+ `;
2356
+
2357
+ exports[`ListItemWithAvatar Render with name and lhsAlignContent as end 1`] = `
2358
+ <DocumentFragment>
2359
+ <li
2360
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2361
+ data-a11y-inset-focus="true"
2362
+ data-id="List_ListItemWithAvatar"
2363
+ data-selector-id="listItemWithAvatar"
2364
+ data-test-id="List_ListItemWithAvatar"
2365
+ role="option"
2366
+ tabindex="0"
2367
+ >
2368
+ <div
2369
+ class="d-flex-shrink-0 contentWrapper"
2370
+ data-id="boxComponent"
2371
+ data-selector-id="box"
2372
+ data-test-id="boxComponent"
2373
+ >
2374
+ <div
2375
+ class="leftAvatar"
2376
+ >
2377
+ <div
2378
+ class="d-flex-shrink-0 d-self-end lhsBoxInner alignLhsBox_center"
2379
+ data-id="boxComponent"
2380
+ data-selector-id="box"
2381
+ data-test-id="boxComponent"
2382
+ >
2383
+ <div
2384
+ class="avatar small small circle primary black border"
2385
+ data-id="Avatar"
2386
+ data-selector-id="avatar"
2387
+ data-test-id="Avatar"
2388
+ data-title="John Doe"
2389
+ >
2390
+ <span
2391
+ class="initial"
2392
+ data-id="Avatar_AvatarInitial"
2393
+ data-selector-id="avatar_AvatarInitial"
2394
+ data-test-id="Avatar_AvatarInitial"
2395
+ >
2396
+ JD
2397
+ </span>
2398
+ </div>
2399
+ </div>
2400
+ </div>
2401
+ <div
2402
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2403
+ data-id="boxComponent"
2404
+ data-selector-id="box"
2405
+ data-test-id="boxComponent"
2406
+ >
2407
+ <div
2408
+ class="d-flex-shrink-0 titleBox"
2409
+ data-id="boxComponent"
2410
+ data-selector-id="box"
2411
+ data-test-id="boxComponent"
2412
+ >
2413
+ <div
2414
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2415
+ data-id="boxComponent"
2416
+ data-selector-id="box"
2417
+ data-test-id="boxComponent"
2418
+ >
2419
+ List
2420
+ </div>
2421
+ </div>
2422
+ </div>
2423
+ </div>
2424
+ </li>
2425
+ </DocumentFragment>
2426
+ `;
2427
+
2428
+ exports[`ListItemWithAvatar Render with name and needAvatarTitle=false 1`] = `
2429
+ <DocumentFragment>
2430
+ <li
2431
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2432
+ data-a11y-inset-focus="true"
2433
+ data-id="List_ListItemWithAvatar"
2434
+ data-selector-id="listItemWithAvatar"
2435
+ data-test-id="List_ListItemWithAvatar"
2436
+ role="option"
2437
+ tabindex="0"
2438
+ >
2439
+ <div
2440
+ class="d-flex-shrink-0 contentWrapper"
2441
+ data-id="boxComponent"
2442
+ data-selector-id="box"
2443
+ data-test-id="boxComponent"
2444
+ >
2445
+ <div
2446
+ class="leftAvatar"
2447
+ >
2448
+ <div
2449
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
2450
+ data-id="boxComponent"
2451
+ data-selector-id="box"
2452
+ data-test-id="boxComponent"
2453
+ >
2454
+ <div
2455
+ class="avatar small small circle primary black border"
2456
+ data-id="Avatar"
2457
+ data-selector-id="avatar"
2458
+ data-test-id="Avatar"
2459
+ >
2460
+ <span
2461
+ class="initial"
2462
+ data-id="Avatar_AvatarInitial"
2463
+ data-selector-id="avatar_AvatarInitial"
2464
+ data-test-id="Avatar_AvatarInitial"
2465
+ >
2466
+ JD
2467
+ </span>
2468
+ </div>
2469
+ </div>
2470
+ </div>
2471
+ <div
2472
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2473
+ data-id="boxComponent"
2474
+ data-selector-id="box"
2475
+ data-test-id="boxComponent"
2476
+ >
2477
+ <div
2478
+ class="d-flex-shrink-0 titleBox"
2479
+ data-id="boxComponent"
2480
+ data-selector-id="box"
2481
+ data-test-id="boxComponent"
2482
+ >
2483
+ <div
2484
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2485
+ data-id="boxComponent"
2486
+ data-selector-id="box"
2487
+ data-test-id="boxComponent"
2488
+ >
2489
+ List
2490
+ </div>
2491
+ </div>
2492
+ </div>
2493
+ </div>
2494
+ </li>
2495
+ </DocumentFragment>
2496
+ `;
2497
+
2498
+ exports[`ListItemWithAvatar Render with name and palette as dark 1`] = `
2499
+ <DocumentFragment>
2500
+ <li
2501
+ class="d-flex d-flex-row d-items-center list medium dark withBorder"
2502
+ data-a11y-inset-focus="true"
2503
+ data-id="List_ListItemWithAvatar"
2504
+ data-selector-id="listItemWithAvatar"
2505
+ data-test-id="List_ListItemWithAvatar"
2506
+ role="option"
2507
+ tabindex="0"
2508
+ >
2509
+ <div
2510
+ class="d-flex-shrink-0 contentWrapper"
2511
+ data-id="boxComponent"
2512
+ data-selector-id="box"
2513
+ data-test-id="boxComponent"
2514
+ >
2515
+ <div
2516
+ class="leftAvatar"
2517
+ >
2518
+ <div
2519
+ class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
2520
+ data-id="boxComponent"
2521
+ data-selector-id="box"
2522
+ data-test-id="boxComponent"
2523
+ >
2524
+ <div
2525
+ class="avatar small small circle info white border"
2526
+ data-id="Avatar"
2527
+ data-selector-id="avatar"
2528
+ data-test-id="Avatar"
2529
+ data-title="John Doe"
2530
+ >
2531
+ <span
2532
+ class="initial"
2533
+ data-id="Avatar_AvatarInitial"
2534
+ data-selector-id="avatar_AvatarInitial"
2535
+ data-test-id="Avatar_AvatarInitial"
2536
+ >
2537
+ JD
2538
+ </span>
2539
+ </div>
2540
+ </div>
2541
+ </div>
2542
+ <div
2543
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2544
+ data-id="boxComponent"
2545
+ data-selector-id="box"
2546
+ data-test-id="boxComponent"
2547
+ >
2548
+ <div
2549
+ class="d-flex-shrink-0 titleBox"
2550
+ data-id="boxComponent"
2551
+ data-selector-id="box"
2552
+ data-test-id="boxComponent"
2553
+ >
2554
+ <div
2555
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2556
+ data-id="boxComponent"
2557
+ data-selector-id="box"
2558
+ data-test-id="boxComponent"
2559
+ >
2560
+ List
2561
+ </div>
2562
+ </div>
2563
+ </div>
2564
+ </div>
2565
+ </li>
2566
+ </DocumentFragment>
2567
+ `;
2568
+
2569
+ exports[`ListItemWithAvatar Render with needBorder=false 1`] = `
2570
+ <DocumentFragment>
2571
+ <li
2572
+ class="d-flex d-flex-row d-items-center list medium default"
2573
+ data-a11y-inset-focus="true"
2574
+ data-id="List_ListItemWithAvatar"
2575
+ data-selector-id="listItemWithAvatar"
2576
+ data-test-id="List_ListItemWithAvatar"
2577
+ role="option"
2578
+ tabindex="0"
2579
+ >
2580
+ <div
2581
+ class="d-flex-shrink-0 contentWrapper"
2582
+ data-id="boxComponent"
2583
+ data-selector-id="box"
2584
+ data-test-id="boxComponent"
2585
+ >
2586
+ <div
2587
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2588
+ data-id="boxComponent"
2589
+ data-selector-id="box"
2590
+ data-test-id="boxComponent"
2591
+ >
2592
+ <div
2593
+ class="d-flex-shrink-0 titleBox"
2594
+ data-id="boxComponent"
2595
+ data-selector-id="box"
2596
+ data-test-id="boxComponent"
2597
+ >
2598
+ <div
2599
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2600
+ data-id="boxComponent"
2601
+ data-selector-id="box"
2602
+ data-test-id="boxComponent"
2603
+ >
2604
+ List
2605
+ </div>
2606
+ </div>
2607
+ </div>
2608
+ </div>
2609
+ </li>
2610
+ </DocumentFragment>
2611
+ `;
2612
+
2613
+ exports[`ListItemWithAvatar Render with needMultiLineText 1`] = `
2614
+ <DocumentFragment>
2615
+ <li
2616
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2617
+ data-a11y-inset-focus="true"
2618
+ data-id="List_ListItemWithAvatar"
2619
+ data-selector-id="listItemWithAvatar"
2620
+ data-test-id="List_ListItemWithAvatar"
2621
+ role="option"
2622
+ tabindex="0"
2623
+ >
2624
+ <div
2625
+ class="d-flex-shrink-0 contentWrapper"
2626
+ data-id="boxComponent"
2627
+ data-selector-id="box"
2628
+ data-test-id="boxComponent"
2629
+ >
2630
+ <div
2631
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2632
+ data-id="boxComponent"
2633
+ data-selector-id="box"
2634
+ data-test-id="boxComponent"
2635
+ >
2636
+ <div
2637
+ class="d-flex-shrink-0 titleBox"
2638
+ data-id="boxComponent"
2639
+ data-selector-id="box"
2640
+ data-test-id="boxComponent"
2641
+ >
2642
+ <div
2643
+ class="d-basis-auto d-min-w-0 d-flex-shrink multiLineValue"
2644
+ data-id="boxComponent"
2645
+ data-selector-id="box"
2646
+ data-test-id="boxComponent"
2647
+ >
2648
+ List
2649
+ </div>
2650
+ </div>
2651
+ </div>
2652
+ </div>
2653
+ </li>
2654
+ </DocumentFragment>
2655
+ `;
2656
+
2657
+ exports[`ListItemWithAvatar Render with needMultiLineText and secondaryValue 1`] = `
2658
+ <DocumentFragment>
2659
+ <li
2660
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2661
+ data-a11y-inset-focus="true"
2662
+ data-id="List_ListItemWithAvatar"
2663
+ data-selector-id="listItemWithAvatar"
2664
+ data-test-id="List_ListItemWithAvatar"
2665
+ role="option"
2666
+ tabindex="0"
2667
+ >
2668
+ <div
2669
+ class="d-flex-shrink-0 contentWrapper"
2670
+ data-id="boxComponent"
2671
+ data-selector-id="box"
2672
+ data-test-id="boxComponent"
2673
+ >
2674
+ <div
2675
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2676
+ data-id="boxComponent"
2677
+ data-selector-id="box"
2678
+ data-test-id="boxComponent"
2679
+ >
2680
+ <div
2681
+ class="d-flex-shrink-0 titleBox"
2682
+ data-id="boxComponent"
2683
+ data-selector-id="box"
2684
+ data-test-id="boxComponent"
2685
+ >
2686
+ <div
2687
+ class="d-basis-auto d-min-w-0 d-flex-shrink multiLineValue"
2688
+ data-id="boxComponent"
2689
+ data-selector-id="box"
2690
+ data-test-id="boxComponent"
2691
+ >
2692
+ List
2693
+ </div>
2694
+ </div>
2695
+ <div
2696
+ class="d-flex-shrink-0 secondaryField multiLine"
2697
+ data-id="boxComponent"
2698
+ data-selector-id="box"
2699
+ data-test-id="boxComponent"
2700
+ data-title="Secondary value"
2701
+ >
2702
+ Secondary value
2703
+ </div>
2704
+ </div>
2705
+ </div>
2706
+ </li>
2707
+ </DocumentFragment>
2708
+ `;
2709
+
2710
+ exports[`ListItemWithAvatar Render with needTick 1`] = `
2711
+ <DocumentFragment>
2712
+ <li
2713
+ class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
2714
+ data-a11y-inset-focus="true"
2715
+ data-id="List_ListItemWithAvatar"
2716
+ data-selector-id="listItemWithAvatar"
2717
+ data-test-id="List_ListItemWithAvatar"
2718
+ role="option"
2719
+ tabindex="0"
2720
+ >
2721
+ <div
2722
+ class="d-flex-shrink-0 contentWrapper"
2723
+ data-id="boxComponent"
2724
+ data-selector-id="box"
2725
+ data-test-id="boxComponent"
2726
+ >
2727
+ <div
2728
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2729
+ data-id="boxComponent"
2730
+ data-selector-id="box"
2731
+ data-test-id="boxComponent"
2732
+ >
2733
+ <div
2734
+ class="d-flex-shrink-0 titleBox"
2735
+ data-id="boxComponent"
2736
+ data-selector-id="box"
2737
+ data-test-id="boxComponent"
2738
+ >
2739
+ <div
2740
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2741
+ data-id="boxComponent"
2742
+ data-selector-id="box"
2743
+ data-test-id="boxComponent"
2744
+ >
2745
+ List
2746
+ </div>
2747
+ </div>
2748
+ </div>
2749
+ </div>
2750
+ </li>
2751
+ </DocumentFragment>
2752
+ `;
2753
+
2754
+ exports[`ListItemWithAvatar Render with needTick and size as large 1`] = `
2755
+ <DocumentFragment>
2756
+ <li
2757
+ class="d-flex d-flex-row d-items-center list large default largewithTick withBorder"
2758
+ data-a11y-inset-focus="true"
2759
+ data-id="List_ListItemWithAvatar"
2760
+ data-selector-id="listItemWithAvatar"
2761
+ data-test-id="List_ListItemWithAvatar"
2762
+ role="option"
2763
+ tabindex="0"
2764
+ >
2765
+ <div
2766
+ class="d-flex-shrink-0 contentWrapper"
2767
+ data-id="boxComponent"
2768
+ data-selector-id="box"
2769
+ data-test-id="boxComponent"
2770
+ >
2771
+ <div
2772
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2773
+ data-id="boxComponent"
2774
+ data-selector-id="box"
2775
+ data-test-id="boxComponent"
2776
+ >
2777
+ <div
2778
+ class="d-flex-shrink-0 titleBox"
2779
+ data-id="boxComponent"
2780
+ data-selector-id="box"
2781
+ data-test-id="boxComponent"
2782
+ >
2783
+ <div
2784
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2785
+ data-id="boxComponent"
2786
+ data-selector-id="box"
2787
+ data-test-id="boxComponent"
2788
+ >
2789
+ List
2790
+ </div>
2791
+ </div>
2792
+ </div>
2793
+ </div>
2794
+ </li>
2795
+ </DocumentFragment>
2796
+ `;
2797
+
2798
+ exports[`ListItemWithAvatar Render with needTick and size as small 1`] = `
2799
+ <DocumentFragment>
2800
+ <li
2801
+ class="d-flex d-flex-row d-items-center list small default smallwithTick withBorder"
2802
+ data-a11y-inset-focus="true"
2803
+ data-id="List_ListItemWithAvatar"
2804
+ data-selector-id="listItemWithAvatar"
2805
+ data-test-id="List_ListItemWithAvatar"
2806
+ role="option"
2807
+ tabindex="0"
2808
+ >
2809
+ <div
2810
+ class="d-flex-shrink-0 contentWrapper"
2811
+ data-id="boxComponent"
2812
+ data-selector-id="box"
2813
+ data-test-id="boxComponent"
2814
+ >
2815
+ <div
2816
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2817
+ data-id="boxComponent"
2818
+ data-selector-id="box"
2819
+ data-test-id="boxComponent"
2820
+ >
2821
+ <div
2822
+ class="d-flex-shrink-0 titleBox"
2823
+ data-id="boxComponent"
2824
+ data-selector-id="box"
2825
+ data-test-id="boxComponent"
2826
+ >
2827
+ <div
2828
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2829
+ data-id="boxComponent"
2830
+ data-selector-id="box"
2831
+ data-test-id="boxComponent"
2832
+ >
2833
+ List
2834
+ </div>
2835
+ </div>
2836
+ </div>
2837
+ </div>
2838
+ </li>
2839
+ </DocumentFragment>
2840
+ `;
2841
+
2842
+ exports[`ListItemWithAvatar Render with secondaryValue and isDisabled 1`] = `
2843
+ <DocumentFragment>
2844
+ <li
2845
+ class="d-flex d-flex-row d-items-center list medium default disable withBorder"
2846
+ data-a11y-inset-focus="true"
2847
+ data-id="List_ListItemWithAvatar"
2848
+ data-selector-id="listItemWithAvatar"
2849
+ data-test-id="List_ListItemWithAvatar"
2850
+ role="option"
2851
+ >
2852
+ <div
2853
+ class="d-flex-shrink-0 contentWrapper"
2854
+ data-id="boxComponent"
2855
+ data-selector-id="box"
2856
+ data-test-id="boxComponent"
2857
+ >
2858
+ <div
2859
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2860
+ data-id="boxComponent"
2861
+ data-selector-id="box"
2862
+ data-test-id="boxComponent"
2863
+ >
2864
+ <div
2865
+ class="d-flex-shrink-0 titleBox"
2866
+ data-id="boxComponent"
2867
+ data-selector-id="box"
2868
+ data-test-id="boxComponent"
2869
+ >
2870
+ <div
2871
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2872
+ data-id="boxComponent"
2873
+ data-selector-id="box"
2874
+ data-test-id="boxComponent"
2875
+ >
2876
+ List
2877
+ </div>
2878
+ </div>
2879
+ <div
2880
+ class="d-flex-shrink-0 secondaryField secondaryValue"
2881
+ data-id="boxComponent"
2882
+ data-selector-id="box"
2883
+ data-test-id="boxComponent"
2884
+ >
2885
+ Secondary value
2886
+ </div>
2887
+ </div>
2888
+ </div>
2889
+ </li>
2890
+ </DocumentFragment>
2891
+ `;
2892
+
2893
+ exports[`ListItemWithAvatar Render with size as large 1`] = `
2894
+ <DocumentFragment>
2895
+ <li
2896
+ class="d-flex d-flex-row d-items-center list large default withBorder"
2897
+ data-a11y-inset-focus="true"
2898
+ data-id="List_ListItemWithAvatar"
2899
+ data-selector-id="listItemWithAvatar"
2900
+ data-test-id="List_ListItemWithAvatar"
2901
+ role="option"
2902
+ tabindex="0"
2903
+ >
2904
+ <div
2905
+ class="d-flex-shrink-0 contentWrapper"
2906
+ data-id="boxComponent"
2907
+ data-selector-id="box"
2908
+ data-test-id="boxComponent"
2909
+ >
2910
+ <div
2911
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2912
+ data-id="boxComponent"
2913
+ data-selector-id="box"
2914
+ data-test-id="boxComponent"
2915
+ >
2916
+ <div
2917
+ class="d-flex-shrink-0 titleBox"
2918
+ data-id="boxComponent"
2919
+ data-selector-id="box"
2920
+ data-test-id="boxComponent"
2921
+ >
2922
+ <div
2923
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2924
+ data-id="boxComponent"
2925
+ data-selector-id="box"
2926
+ data-test-id="boxComponent"
2927
+ >
2928
+ List
2929
+ </div>
2930
+ </div>
2931
+ </div>
2932
+ </div>
2933
+ </li>
2934
+ </DocumentFragment>
2935
+ `;
2936
+
2937
+ exports[`ListItemWithAvatar Render with size as small 1`] = `
2938
+ <DocumentFragment>
2939
+ <li
2940
+ class="d-flex d-flex-row d-items-center list small default withBorder"
2941
+ data-a11y-inset-focus="true"
2942
+ data-id="List_ListItemWithAvatar"
2943
+ data-selector-id="listItemWithAvatar"
2944
+ data-test-id="List_ListItemWithAvatar"
2945
+ role="option"
2946
+ tabindex="0"
2947
+ >
2948
+ <div
2949
+ class="d-flex-shrink-0 contentWrapper"
2950
+ data-id="boxComponent"
2951
+ data-selector-id="box"
2952
+ data-test-id="boxComponent"
2953
+ >
2954
+ <div
2955
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
2956
+ data-id="boxComponent"
2957
+ data-selector-id="box"
2958
+ data-test-id="boxComponent"
2959
+ >
2960
+ <div
2961
+ class="d-flex-shrink-0 titleBox"
2962
+ data-id="boxComponent"
2963
+ data-selector-id="box"
2964
+ data-test-id="boxComponent"
2965
+ >
2966
+ <div
2967
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
2968
+ data-id="boxComponent"
2969
+ data-selector-id="box"
2970
+ data-test-id="boxComponent"
2971
+ >
2972
+ List
2973
+ </div>
2974
+ </div>
2975
+ </div>
2976
+ </div>
2977
+ </li>
2978
+ </DocumentFragment>
2979
+ `;
2980
+
2981
+ exports[`ListItemWithAvatar Render with title 1`] = `
2982
+ <DocumentFragment>
2983
+ <li
2984
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
2985
+ data-a11y-inset-focus="true"
2986
+ data-id="List_ListItemWithAvatar"
2987
+ data-selector-id="listItemWithAvatar"
2988
+ data-test-id="List_ListItemWithAvatar"
2989
+ role="option"
2990
+ tabindex="0"
2991
+ >
2992
+ <div
2993
+ class="d-flex-shrink-0 contentWrapper"
2994
+ data-id="boxComponent"
2995
+ data-selector-id="box"
2996
+ data-test-id="boxComponent"
2997
+ >
2998
+ <div
2999
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
3000
+ data-id="boxComponent"
3001
+ data-selector-id="box"
3002
+ data-test-id="boxComponent"
3003
+ >
3004
+ <div
3005
+ class="d-flex-shrink-0 titleBox"
3006
+ data-id="boxComponent"
3007
+ data-selector-id="box"
3008
+ data-test-id="boxComponent"
3009
+ >
3010
+ <div
3011
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
3012
+ data-id="boxComponent"
3013
+ data-selector-id="box"
3014
+ data-test-id="boxComponent"
3015
+ data-title="List item title"
3016
+ >
3017
+ List
3018
+ </div>
3019
+ </div>
3020
+ </div>
3021
+ </div>
3022
+ </li>
3023
+ </DocumentFragment>
3024
+ `;
3025
+
323
3026
  exports[`ListItemWithAvatar rendering the defult props 1`] = `
324
3027
  <DocumentFragment>
325
3028
  <li