@ebay/skin 17.3.0 → 17.4.0-next.1

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 (135) hide show
  1. package/.changeset/big-cheetahs-peel.md +5 -0
  2. package/.changeset/kind-pens-own.md +5 -0
  3. package/.changeset/loud-carrots-protect.md +5 -0
  4. package/.changeset/metal-cars-promise.md +5 -0
  5. package/.changeset/pre.json +16 -0
  6. package/.changeset/shaggy-ways-pump.md +5 -0
  7. package/.changeset/shaggy-yaks-guess.md +5 -0
  8. package/.changeset/soft-ligers-march.md +5 -0
  9. package/.github/workflows/jekyll-gh-pages.yml +8 -2
  10. package/.storybook/main.js +1 -1
  11. package/CHANGELOG.md +22 -0
  12. package/ICON-CREATION.md +1 -1
  13. package/_cdn/skin/v17.4.0-next.1/skin-default.min.css +76 -0
  14. package/_cdn/skin/v17.4.0-next.1/skin-full.min.css +160 -0
  15. package/_cdn/skin/v17.4.0-next.1/skin-headless.min.css +6 -0
  16. package/dist/flag/flag.css +774 -0
  17. package/dist/icon/icon.css +20 -0
  18. package/dist/icon-button/icon-button.css +113 -0
  19. package/dist/phone-input/phone-input.css +144 -0
  20. package/dist/skeleton/skeleton.css +6 -0
  21. package/dist/svg/icon/icon-bids-24.svg +4 -2
  22. package/dist/svg/icon/icon-bids-64.svg +2 -5
  23. package/dist/svg/icon/icon-bookmark-filled-16.svg +7 -0
  24. package/dist/svg/icon/icon-bookmark-filled-24.svg +7 -0
  25. package/dist/svg/icon/icon-exclude-16.svg +7 -0
  26. package/dist/svg/icon/icon-exclude-24.svg +7 -0
  27. package/dist/svg/icon/icon-fast-and-free-16.svg +4 -2
  28. package/dist/svg/icon/icon-fast-and-free-24.svg +4 -2
  29. package/dist/svg/icon/icon-inspect-64.svg +7 -0
  30. package/dist/svg/icon/icon-on-the-way-16.svg +4 -3
  31. package/dist/svg/icon/icon-on-the-way-24.svg +4 -2
  32. package/dist/svg/icon/icon-wallet-24.svg +4 -2
  33. package/dist/svg/icon/icon-wallet-64.svg +4 -2
  34. package/dist/svg/icons.svg +72 -27
  35. package/dist/tokens/evo-dark.css +14 -9
  36. package/dist/tokens/evo-light.css +13 -3
  37. package/eslint.config.mjs +15 -0
  38. package/index.browser.json +1 -0
  39. package/index.css +1 -0
  40. package/index.js +1 -0
  41. package/index.mjs +1 -0
  42. package/lint.log +10 -0
  43. package/package.json +17 -17
  44. package/phone-input.browser.json +1 -0
  45. package/phone-input.css +1 -0
  46. package/phone-input.js +1 -0
  47. package/phone-input.mjs +1 -0
  48. package/scripts/jekyll-config.js +2 -4
  49. package/src/less/alert-dialog/stories/alert-dialog.stories.js +16 -0
  50. package/src/less/badge/stories/badge.stories.js +4 -0
  51. package/src/less/breadcrumbs/stories/button-cascade.stories.js +29 -0
  52. package/src/less/breadcrumbs/stories/button-overflow.stories.js +48 -0
  53. package/src/less/breadcrumbs/stories/link-cascade.stories.js +29 -0
  54. package/src/less/breadcrumbs/stories/link-overflow.stories.js +51 -0
  55. package/src/less/bundles/skin-headless.less +1 -0
  56. package/src/less/button/stories/button/text-spacing.stories.js +16 -0
  57. package/src/less/button/stories/fake-button/text-spacing.stories.js +13 -0
  58. package/src/less/calendar/stories/calendar.stories.js +210 -0
  59. package/src/less/checkbox/stories/checked.stories.js +20 -0
  60. package/src/less/chips-combobox/stories/chips-combobox.stories.js +58 -0
  61. package/src/less/combobox/stories/combobox.stories.js +21 -0
  62. package/src/less/confirm-dialog/stories/confirm-dialog.stories.js +17 -0
  63. package/src/less/cta-button/stories/cta-button.stories.js +11 -0
  64. package/src/less/date-textbox/stories/date-textbox.stories.js +27 -0
  65. package/src/less/details/stories/details.stories.js +14 -0
  66. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +27 -0
  67. package/src/less/field/stories/helper-texts-stacked.stories.js +17 -0
  68. package/src/less/filter-button/stories/button.stories.js +8 -0
  69. package/src/less/filter-menu/stories/filter-menu.stories.js +41 -0
  70. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +238 -0
  71. package/src/less/flag/flag.less +777 -0
  72. package/src/less/flag/stories/flag.stories.js +9 -0
  73. package/src/less/floating-label/stories/floating-label.stories.js +102 -0
  74. package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +27 -0
  75. package/src/less/global/stories/global.stories.js +16 -0
  76. package/src/less/icon/generated/icon.less +20 -0
  77. package/src/less/icon-button/icon-button.less +133 -0
  78. package/src/less/icon-button/stories/buttons.stories.js +241 -0
  79. package/src/less/icon-button/stories/links.stories.js +241 -0
  80. package/src/less/infotip/stories/infotip.stories.js +27 -2
  81. package/src/less/inline-notice/stories/inline.stories.js +13 -0
  82. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +24 -0
  83. package/src/less/link/stories/link.stories.js +9 -3
  84. package/src/less/listbox/stories/listbox.stories.js +37 -0
  85. package/src/less/listbox-button/stories/base.stories.js +42 -0
  86. package/src/less/menu/stories/misc.stories.js +10 -0
  87. package/src/less/menu-button/stories/base.stories.js +26 -0
  88. package/src/less/page-notice/stories/page-notice.stories.js +22 -0
  89. package/src/less/pagination/stories/overflow.stories.js +49 -0
  90. package/src/less/panel-dialog/stories/panel-dialog.stories.js +45 -0
  91. package/src/less/phone-input/phone-input.less +175 -0
  92. package/src/less/phone-input/stories/phone-input.stories.js +771 -0
  93. package/src/less/progress-bar-expressive/stories/progress-bar-expressive.stories.js +31 -0
  94. package/src/less/progress-stepper/stories/progress-stepper.stories.js +52 -0
  95. package/src/less/radio/stories/checked.stories.js +49 -2
  96. package/src/less/section-notice/stories/icon-16.stories.js +25 -1
  97. package/src/less/section-title/stories/section-title.stories.js +17 -0
  98. package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +10 -0
  99. package/src/less/select/stories/default.stories.js +13 -0
  100. package/src/less/signal/stories/signal.stories.js +6 -0
  101. package/src/less/skeleton/skeleton.less +11 -0
  102. package/src/less/skeleton/stories/composite.stories.js +1 -1
  103. package/src/less/snackbar-dialog/stories/base.stories.js +14 -0
  104. package/src/less/split-button/stories/base.stories.js +30 -0
  105. package/src/less/tabs/stories/tabs/block.stories.js +17 -0
  106. package/src/less/tabs/stories/tabs/inlineBlock.stories.js +17 -0
  107. package/src/less/textbox/stories/textbox.stories.js +6 -0
  108. package/src/less/toast-dialog/stories/toast-dialog.stories.js +23 -0
  109. package/src/less/toggle-button/stories/gallery-layout.stories.js +13 -0
  110. package/src/less/toggle-button/stories/list-layout.stories.js +14 -0
  111. package/src/less/toggle-button/stories/minimal-layout.stories.js +8 -0
  112. package/src/less/tooltip/stories/tooltip.stories.js +19 -0
  113. package/src/less/tourtip/stories/tourtip.stories.js +21 -0
  114. package/src/svg/icon/icon-bids-24.svg +4 -2
  115. package/src/svg/icon/icon-bids-64.svg +2 -5
  116. package/src/svg/icon/icon-bookmark-filled-16.svg +7 -0
  117. package/src/svg/icon/icon-bookmark-filled-24.svg +7 -0
  118. package/src/svg/icon/icon-exclude-16.svg +7 -0
  119. package/src/svg/icon/icon-exclude-24.svg +7 -0
  120. package/src/svg/icon/icon-fast-and-free-16.svg +4 -2
  121. package/src/svg/icon/icon-fast-and-free-24.svg +4 -2
  122. package/src/svg/icon/icon-inspect-64.svg +7 -0
  123. package/src/svg/icon/icon-on-the-way-16.svg +4 -3
  124. package/src/svg/icon/icon-on-the-way-24.svg +4 -2
  125. package/src/svg/icon/icon-wallet-24.svg +4 -2
  126. package/src/svg/icon/icon-wallet-64.svg +4 -2
  127. package/src/svg/icons.svg +72 -27
  128. package/src/tokens/evo-dark.css +14 -9
  129. package/src/tokens/evo-light.css +13 -3
  130. package/svg.svg +72 -27
  131. package/.eslintrc +0 -14
  132. package/_cdn/skin/v17.3.0/skin-default.min.css +0 -69
  133. package/_cdn/skin/v17.3.0/skin-full.min.css +0 -151
  134. package/_cdn/skin/v17.3.0/skin-headless.min.css +0 -6
  135. package/src/less/section-notice/stories/icon-24.stories.js +0 -251
package/src/less/filter-menu-button/stories/filter-menu-button.stories.js CHANGED
@@ -441,6 +441,244 @@ export const overflow = () => `
441
441
  </span>
442
442
  `;
443
443
 
444
+ export const textSpacing = () => `
445
+ <span class="filter-menu-button demo-a11y-text-spacing">
446
+ <button type="button" class="filter-menu-button__button" aria-expanded="true">
447
+ <span class="filter-menu-button__button-cell">
448
+ <span class="filter-menu-button__button-text">Filter Menu Button</span>
449
+ <svg class="icon icon--chevron-down-12" height="12" width="12">
450
+ <use href="#icon-chevron-down-12"></use>
451
+ </svg>
452
+ </span>
453
+ </button>
454
+ <div class="filter-menu-button__menu">
455
+ <div class="filter-menu-button__items" role="menu">
456
+ <div class="filter-menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
457
+ <span class="filter-menu-button__checkbox">
458
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
459
+ <use href="#icon-checkbox-unchecked-18"></use>
460
+ </svg>
461
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
462
+ <use href="#icon-checkbox-checked-18"></use>
463
+ </svg>
464
+ </span>
465
+ <span class="filter-menu-button__text">Item 1</span>
466
+ </div>
467
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
468
+ <span class="filter-menu-button__checkbox">
469
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
470
+ <use href="#icon-checkbox-unchecked-18"></use>
471
+ </svg>
472
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
473
+ <use href="#icon-checkbox-checked-18"></use>
474
+ </svg>
475
+ </span>
476
+ <span class="filter-menu-button__text">Item 2</span>
477
+ </div>
478
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
479
+ <span class="filter-menu-button__checkbox">
480
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
481
+ <use href="#icon-checkbox-unchecked-18"></use>
482
+ </svg>
483
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
484
+ <use href="#icon-checkbox-checked-18"></use>
485
+ </svg>
486
+ </span>
487
+ <span class="filter-menu-button__text">Item 3</span>
488
+ </div>
489
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
490
+ <span class="filter-menu-button__checkbox">
491
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
492
+ <use href="#icon-checkbox-unchecked-18"></use>
493
+ </svg>
494
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
495
+ <use href="#icon-checkbox-checked-18"></use>
496
+ </svg>
497
+ </span>
498
+ <span class="filter-menu-button__text">Item 4</span>
499
+ </div>
500
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
501
+ <span class="filter-menu-button__checkbox">
502
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
503
+ <use href="#icon-checkbox-unchecked-18"></use>
504
+ </svg>
505
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
506
+ <use href="#icon-checkbox-checked-18"></use>
507
+ </svg>
508
+ </span>
509
+ <span class="filter-menu-button__text">Item 5</span>
510
+ </div>
511
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
512
+ <span class="filter-menu-button__checkbox">
513
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
514
+ <use href="#icon-checkbox-unchecked-18"></use>
515
+ </svg>
516
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
517
+ <use href="#icon-checkbox-checked-18"></use>
518
+ </svg>
519
+ </span>
520
+ <span class="filter-menu-button__text">Item 6</span>
521
+ </div>
522
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
523
+ <span class="filter-menu-button__checkbox">
524
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
525
+ <use href="#icon-checkbox-unchecked-18"></use>
526
+ </svg>
527
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
528
+ <use href="#icon-checkbox-checked-18"></use>
529
+ </svg>
530
+ </span>
531
+ <span class="filter-menu-button__text">Item 7</span>
532
+ </div>
533
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
534
+ <span class="filter-menu-button__checkbox">
535
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
536
+ <use href="#icon-checkbox-unchecked-18"></use>
537
+ </svg>
538
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
539
+ <use href="#icon-checkbox-checked-18"></use>
540
+ </svg>
541
+ </span>
542
+ <span class="filter-menu-button__text">Item 8</span>
543
+ </div>
544
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
545
+ <span class="filter-menu-button__checkbox">
546
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
547
+ <use href="#icon-checkbox-unchecked-18"></use>
548
+ </svg>
549
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
550
+ <use href="#icon-checkbox-checked-18"></use>
551
+ </svg>
552
+ </span>
553
+ <span class="filter-menu-button__text">Item 9</span>
554
+ </div>
555
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
556
+ <span class="filter-menu-button__checkbox">
557
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
558
+ <use href="#icon-checkbox-unchecked-18"></use>
559
+ </svg>
560
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
561
+ <use href="#icon-checkbox-checked-18"></use>
562
+ </svg>
563
+ </span>
564
+ <span class="filter-menu-button__text">Item 10</span>
565
+ </div>
566
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
567
+ <span class="filter-menu-button__checkbox">
568
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
569
+ <use href="#icon-checkbox-unchecked-18"></use>
570
+ </svg>
571
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
572
+ <use href="#icon-checkbox-checked-18"></use>
573
+ </svg>
574
+ </span>
575
+ <span class="filter-menu-button__text">Item 11</span>
576
+ </div>
577
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
578
+ <span class="filter-menu-button__checkbox">
579
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
580
+ <use href="#icon-checkbox-unchecked-18"></use>
581
+ </svg>
582
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
583
+ <use href="#icon-checkbox-checked-18"></use>
584
+ </svg>
585
+ </span>
586
+ <span class="filter-menu-button__text">Item 12</span>
587
+ </div>
588
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
589
+ <span class="filter-menu-button__checkbox">
590
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
591
+ <use href="#icon-checkbox-unchecked-18"></use>
592
+ </svg>
593
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
594
+ <use href="#icon-checkbox-checked-18"></use>
595
+ </svg>
596
+ </span>
597
+ <span class="filter-menu-button__text">Item 13</span>
598
+ </div>
599
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
600
+ <span class="filter-menu-button__checkbox">
601
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
602
+ <use href="#icon-checkbox-unchecked-18"></use>
603
+ </svg>
604
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
605
+ <use href="#icon-checkbox-checked-18"></use>
606
+ </svg>
607
+ </span>
608
+ <span class="filter-menu-button__text">Item 14</span>
609
+ </div>
610
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
611
+ <span class="filter-menu-button__checkbox">
612
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
613
+ <use href="#icon-checkbox-unchecked-18"></use>
614
+ </svg>
615
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
616
+ <use href="#icon-checkbox-checked-18"></use>
617
+ </svg>
618
+ </span>
619
+ <span class="filter-menu-button__text">Item 15</span>
620
+ </div>
621
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
622
+ <span class="filter-menu-button__checkbox">
623
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
624
+ <use href="#icon-checkbox-unchecked-18"></use>
625
+ </svg>
626
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
627
+ <use href="#icon-checkbox-checked-18"></use>
628
+ </svg>
629
+ </span>
630
+ <span class="filter-menu-button__text">Item 16</span>
631
+ </div>
632
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
633
+ <span class="filter-menu-button__checkbox">
634
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
635
+ <use href="#icon-checkbox-unchecked-18"></use>
636
+ </svg>
637
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
638
+ <use href="#icon-checkbox-checked-18"></use>
639
+ </svg>
640
+ </span>
641
+ <span class="filter-menu-button__text">Item 17</span>
642
+ </div>
643
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
644
+ <span class="filter-menu-button__checkbox">
645
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
646
+ <use href="#icon-checkbox-unchecked-18"></use>
647
+ </svg>
648
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
649
+ <use href="#icon-checkbox-checked-18"></use>
650
+ </svg>
651
+ </span>
652
+ <span class="filter-menu-button__text">Item 18</span>
653
+ </div>
654
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
655
+ <span class="filter-menu-button__checkbox">
656
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
657
+ <use href="#icon-checkbox-unchecked-18"></use>
658
+ </svg>
659
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
660
+ <use href="#icon-checkbox-checked-18"></use>
661
+ </svg>
662
+ </span>
663
+ <span class="filter-menu-button__text">Item 19</span>
664
+ </div>
665
+ <div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
666
+ <span class="filter-menu-button__checkbox">
667
+ <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
668
+ <use href="#icon-checkbox-unchecked-18"></use>
669
+ </svg>
670
+ <svg class="icon icon--checkbox-checked-18" height="18" width="18">
671
+ <use href="#icon-checkbox-checked-18"></use>
672
+ </svg>
673
+ </span>
674
+ <span class="filter-menu-button__text">Item 20</span>
675
+ </div>
676
+ </div>
677
+ <button type="button" class="filter-menu__footer">Apply</button>
678
+ </div>
679
+ </span>
680
+ `;
681
+
444
682
  export const truncated = () => `
445
683
  <span class="filter-menu-button">
446
684
  <button aria-expanded="true" type="button" class="filter-menu-button__button">