@ebay/skin 17.3.0 → 17.4.0-next.0

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 (132) 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 +15 -0
  6. package/.changeset/shaggy-ways-pump.md +5 -0
  7. package/.changeset/shaggy-yaks-guess.md +5 -0
  8. package/.github/workflows/jekyll-gh-pages.yml +8 -2
  9. package/.storybook/main.js +1 -1
  10. package/CHANGELOG.md +16 -0
  11. package/ICON-CREATION.md +1 -1
  12. package/_cdn/skin/v17.4.0-next.0/skin-default.min.css +76 -0
  13. package/_cdn/skin/v17.4.0-next.0/skin-full.min.css +160 -0
  14. package/_cdn/skin/v17.4.0-next.0/skin-headless.min.css +6 -0
  15. package/dist/icon/icon.css +20 -0
  16. package/dist/icon-button/icon-button.css +113 -0
  17. package/dist/phone-input/phone-input.css +142 -0
  18. package/dist/skeleton/skeleton.css +6 -0
  19. package/dist/svg/icon/icon-bids-24.svg +4 -2
  20. package/dist/svg/icon/icon-bids-64.svg +2 -5
  21. package/dist/svg/icon/icon-bookmark-filled-16.svg +7 -0
  22. package/dist/svg/icon/icon-bookmark-filled-24.svg +7 -0
  23. package/dist/svg/icon/icon-exclude-16.svg +7 -0
  24. package/dist/svg/icon/icon-exclude-24.svg +7 -0
  25. package/dist/svg/icon/icon-fast-and-free-16.svg +4 -2
  26. package/dist/svg/icon/icon-fast-and-free-24.svg +4 -2
  27. package/dist/svg/icon/icon-inspect-64.svg +7 -0
  28. package/dist/svg/icon/icon-on-the-way-16.svg +4 -3
  29. package/dist/svg/icon/icon-on-the-way-24.svg +4 -2
  30. package/dist/svg/icon/icon-wallet-24.svg +4 -2
  31. package/dist/svg/icon/icon-wallet-64.svg +4 -2
  32. package/dist/svg/icons.svg +72 -27
  33. package/dist/tokens/evo-dark.css +14 -9
  34. package/dist/tokens/evo-light.css +13 -3
  35. package/eslint.config.mjs +15 -0
  36. package/index.browser.json +1 -0
  37. package/index.css +1 -0
  38. package/index.js +1 -0
  39. package/index.mjs +1 -0
  40. package/lint.log +10 -0
  41. package/package.json +17 -17
  42. package/phone-input.browser.json +1 -0
  43. package/phone-input.css +1 -0
  44. package/phone-input.js +1 -0
  45. package/phone-input.mjs +1 -0
  46. package/scripts/jekyll-config.js +2 -4
  47. package/src/less/alert-dialog/stories/alert-dialog.stories.js +16 -0
  48. package/src/less/badge/stories/badge.stories.js +4 -0
  49. package/src/less/breadcrumbs/stories/button-cascade.stories.js +29 -0
  50. package/src/less/breadcrumbs/stories/button-overflow.stories.js +48 -0
  51. package/src/less/breadcrumbs/stories/link-cascade.stories.js +29 -0
  52. package/src/less/breadcrumbs/stories/link-overflow.stories.js +51 -0
  53. package/src/less/bundles/skin-headless.less +1 -0
  54. package/src/less/button/stories/button/text-spacing.stories.js +16 -0
  55. package/src/less/button/stories/fake-button/text-spacing.stories.js +13 -0
  56. package/src/less/calendar/stories/calendar.stories.js +210 -0
  57. package/src/less/checkbox/stories/checked.stories.js +20 -0
  58. package/src/less/chips-combobox/stories/chips-combobox.stories.js +58 -0
  59. package/src/less/combobox/stories/combobox.stories.js +21 -0
  60. package/src/less/confirm-dialog/stories/confirm-dialog.stories.js +17 -0
  61. package/src/less/cta-button/stories/cta-button.stories.js +11 -0
  62. package/src/less/date-textbox/stories/date-textbox.stories.js +27 -0
  63. package/src/less/details/stories/details.stories.js +14 -0
  64. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +27 -0
  65. package/src/less/field/stories/helper-texts-stacked.stories.js +17 -0
  66. package/src/less/filter-button/stories/button.stories.js +8 -0
  67. package/src/less/filter-menu/stories/filter-menu.stories.js +41 -0
  68. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +238 -0
  69. package/src/less/flag/stories/flag.stories.js +9 -0
  70. package/src/less/floating-label/stories/floating-label.stories.js +102 -0
  71. package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +27 -0
  72. package/src/less/global/stories/global.stories.js +16 -0
  73. package/src/less/icon/generated/icon.less +20 -0
  74. package/src/less/icon-button/icon-button.less +133 -0
  75. package/src/less/icon-button/stories/buttons.stories.js +241 -0
  76. package/src/less/icon-button/stories/links.stories.js +241 -0
  77. package/src/less/infotip/stories/infotip.stories.js +27 -2
  78. package/src/less/inline-notice/stories/inline.stories.js +13 -0
  79. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +24 -0
  80. package/src/less/link/stories/link.stories.js +9 -3
  81. package/src/less/listbox/stories/listbox.stories.js +37 -0
  82. package/src/less/listbox-button/stories/base.stories.js +42 -0
  83. package/src/less/menu/stories/misc.stories.js +10 -0
  84. package/src/less/menu-button/stories/base.stories.js +26 -0
  85. package/src/less/page-notice/stories/page-notice.stories.js +22 -0
  86. package/src/less/pagination/stories/overflow.stories.js +49 -0
  87. package/src/less/panel-dialog/stories/panel-dialog.stories.js +45 -0
  88. package/src/less/phone-input/phone-input.less +173 -0
  89. package/src/less/phone-input/stories/phone-input.stories.js +825 -0
  90. package/src/less/progress-bar-expressive/stories/progress-bar-expressive.stories.js +31 -0
  91. package/src/less/progress-stepper/stories/progress-stepper.stories.js +52 -0
  92. package/src/less/radio/stories/checked.stories.js +49 -2
  93. package/src/less/section-notice/stories/icon-16.stories.js +25 -1
  94. package/src/less/section-title/stories/section-title.stories.js +17 -0
  95. package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +10 -0
  96. package/src/less/select/stories/default.stories.js +13 -0
  97. package/src/less/signal/stories/signal.stories.js +6 -0
  98. package/src/less/skeleton/skeleton.less +11 -0
  99. package/src/less/skeleton/stories/composite.stories.js +1 -1
  100. package/src/less/snackbar-dialog/stories/base.stories.js +14 -0
  101. package/src/less/split-button/stories/base.stories.js +30 -0
  102. package/src/less/tabs/stories/tabs/block.stories.js +17 -0
  103. package/src/less/tabs/stories/tabs/inlineBlock.stories.js +17 -0
  104. package/src/less/textbox/stories/textbox.stories.js +6 -0
  105. package/src/less/toast-dialog/stories/toast-dialog.stories.js +23 -0
  106. package/src/less/toggle-button/stories/gallery-layout.stories.js +13 -0
  107. package/src/less/toggle-button/stories/list-layout.stories.js +14 -0
  108. package/src/less/toggle-button/stories/minimal-layout.stories.js +8 -0
  109. package/src/less/tooltip/stories/tooltip.stories.js +19 -0
  110. package/src/less/tourtip/stories/tourtip.stories.js +21 -0
  111. package/src/svg/icon/icon-bids-24.svg +4 -2
  112. package/src/svg/icon/icon-bids-64.svg +2 -5
  113. package/src/svg/icon/icon-bookmark-filled-16.svg +7 -0
  114. package/src/svg/icon/icon-bookmark-filled-24.svg +7 -0
  115. package/src/svg/icon/icon-exclude-16.svg +7 -0
  116. package/src/svg/icon/icon-exclude-24.svg +7 -0
  117. package/src/svg/icon/icon-fast-and-free-16.svg +4 -2
  118. package/src/svg/icon/icon-fast-and-free-24.svg +4 -2
  119. package/src/svg/icon/icon-inspect-64.svg +7 -0
  120. package/src/svg/icon/icon-on-the-way-16.svg +4 -3
  121. package/src/svg/icon/icon-on-the-way-24.svg +4 -2
  122. package/src/svg/icon/icon-wallet-24.svg +4 -2
  123. package/src/svg/icon/icon-wallet-64.svg +4 -2
  124. package/src/svg/icons.svg +72 -27
  125. package/src/tokens/evo-dark.css +14 -9
  126. package/src/tokens/evo-light.css +13 -3
  127. package/svg.svg +72 -27
  128. package/.eslintrc +0 -14
  129. package/_cdn/skin/v17.3.0/skin-default.min.css +0 -69
  130. package/_cdn/skin/v17.3.0/skin-full.min.css +0 -151
  131. package/_cdn/skin/v17.3.0/skin-headless.min.css +0 -6
  132. package/src/less/section-notice/stories/icon-24.stories.js +0 -251
package/src/less/section-notice/stories/icon-24.stories.js DELETED
@@ -1,251 +0,0 @@
1
- export default { title: "Skin/Section Notice/Icon 24" };
2
-
3
- export const body = () => `
4
- <div class="section-notice" role="region">
5
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
6
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
7
- <use href="#icon-lightbulb-24"></use>
8
- </svg>
9
- </div>
10
- <div class="section-notice__main">
11
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
12
- </div>
13
- </div>
14
- `;
15
-
16
- export const title = () => `
17
- <div class="section-notice" role="region">
18
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
19
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
20
- <use href="#icon-lightbulb-24"></use>
21
- </svg>
22
- </div>
23
- <div class="section-notice__main">
24
- <h3 class="section-notice__title">Notification Title</h3>
25
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
26
- </div>
27
- </div>
28
- `;
29
-
30
- // known issue: https://github.com/eBay/skin/issues/2146
31
- export const linkCTA = () => `
32
- <div class="section-notice" role="region">
33
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
34
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
35
- <use href="#icon-lightbulb-24"></use>
36
- </svg>
37
- </div>
38
- <div class="section-notice__main">
39
- <h3 class="section-notice__title">Notification Title</h3>
40
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
41
- </div>
42
- <div class="section-notice__footer">
43
- <a href="https://www.ebay.com">Action</a>
44
- </div>
45
- </div>
46
- `;
47
-
48
- // known issue: https://github.com/eBay/skin/issues/2146
49
- export const fakeLinkCTA = () => `
50
- <div class="section-notice" role="region">
51
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
52
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
53
- <use href="#icon-lightbulb-24"></use>
54
- </svg>
55
- </div>
56
- <div class="section-notice__main">
57
- <h3 class="section-notice__title">Notification Title</h3>
58
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
59
- </div>
60
- <div class="section-notice__footer">
61
- <button class="fake-link" type="button">Action</button>
62
- </div>
63
- </div>
64
- `;
65
-
66
- export const dismiss = () => `
67
- <div class="section-notice" role="region">
68
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
69
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
70
- <use href="#icon-lightbulb-24"></use>
71
- </svg>
72
- </div>
73
- <div class="section-notice__main">
74
- <h3 class="section-notice__title">Notification Title</h3>
75
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
76
- </div>
77
- <div class="section-notice__footer">
78
- <button aria-label="Close notice" class="fake-link section-notice__dismiss">
79
- <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
80
- <use href="#icon-close-16"></use>
81
- </svg>
82
- </button>
83
- </div>
84
- </div>
85
- `;
86
-
87
- export const dismissAndLinkCTA = () => `
88
- <div class="section-notice" role="region">
89
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
90
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
91
- <use href="#icon-lightbulb-24"></use>
92
- </svg>
93
- </div>
94
- <div class="section-notice__main">
95
- <h3 class="section-notice__title">Notification Title</h3>
96
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
97
- </div>
98
- <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
99
- <div class="section-notice__footer">
100
- <button aria-label="Close notice" class="fake-link section-notice__dismiss">
101
- <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
102
- <use href="#icon-close-16"></use>
103
- </svg>
104
- </button>
105
- </div>
106
- </div>
107
- `;
108
-
109
- export const dismissAndFakeLinkCTA = () => `
110
- <div class="section-notice" role="region">
111
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
112
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
113
- <use href="#icon-lightbulb-24"></use>
114
- </svg>
115
- </div>
116
- <div class="section-notice__main">
117
- <h3 class="section-notice__title">Notification Title</h3>
118
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
119
- </div>
120
- <p class="section-notice__cta">
121
- <button class="fake-link" type="button">Action</button>
122
- </p>
123
- <div class="section-notice__footer">
124
- <button aria-label="Close notice" class="fake-link section-notice__dismiss">
125
- <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
126
- <use href="#icon-close-16"></use>
127
- </svg>
128
- </button>
129
- </div>
130
- </div>
131
- `;
132
-
133
- export const education = () => `
134
- <div class="section-notice section-notice--education" role="region">
135
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
136
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
137
- <use href="#icon-lightbulb-24"></use>
138
- </svg>
139
- </div>
140
- <div class="section-notice__main">
141
- <h3 class="section-notice__title">Notification Title</h3>
142
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
143
- </div>
144
- <p class="section-notice__cta">
145
- <button class="fake-link" type="button">Action</button>
146
- </p>
147
- <div class="section-notice__footer">
148
- <button aria-label="Close notice" class="fake-link section-notice__dismiss">
149
- <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
150
- <use href="#icon-close-16"></use>
151
- </svg>
152
- </button>
153
- </div>
154
- </div>
155
- `;
156
- // known issue: https://github.com/eBay/skin/issues/2142
157
- export const RTL = () => `
158
- <div dir="rtl">
159
- <div class="section-notice" role="region">
160
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
161
- <svg aria-hidden="true" class="icon icon--lightbulb-24">
162
- <use href="#icon-lightbulb-24"></use>
163
- </svg>
164
- </div>
165
- <div class="section-notice__main">
166
- <h3 class="section-notice__title">Notification Title</h3>
167
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
168
- </div>
169
- <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
170
- <div class="section-notice__footer">
171
- <button aria-label="Close notice" class="fake-link section-notice__dismiss">
172
- <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
173
- <use href="#icon-close-16"></use>
174
- </svg>
175
- </button>
176
- </div>
177
- </div>
178
- </div>
179
- `;
180
-
181
- export const vault = () => `
182
- <div class="section-notice" role="region">
183
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
184
- <svg aria-hidden="true" class="icon--the-ebay-vault-24">
185
- <use href="#icon-the-ebay-vault-24"></use>
186
- </svg>
187
- </div>
188
- <div class="section-notice__main">
189
- <h3 class="section-notice__title">Notification Title</h3>
190
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
191
- </div>
192
- <p class="section-notice__cta">
193
- <button class="fake-link" type="button">Action</button>
194
- </p>
195
- <div class="section-notice__footer">
196
- <button aria-label="Close notice" class="fake-link section-notice__dismiss">
197
- <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
198
- <use href="#icon-close-16"></use>
199
- </svg>
200
- </button>
201
- </div>
202
- </div>
203
- `;
204
-
205
- export const selling = () => `
206
- <div class="section-notice" role="region">
207
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
208
- <svg aria-hidden="true" class="icon--selling-24">
209
- <use href="#icon-selling-24"></use>
210
- </svg>
211
- </div>
212
- <div class="section-notice__main">
213
- <h3 class="section-notice__title">Notification Title</h3>
214
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
215
- </div>
216
- <p class="section-notice__cta">
217
- <button class="fake-link" type="button">Action</button>
218
- </p>
219
- <div class="section-notice__footer">
220
- <button aria-label="Close notice" class="fake-link section-notice__dismiss">
221
- <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
222
- <use href="#icon-close-16"></use>
223
- </svg>
224
- </button>
225
- </div>
226
- </div>
227
- `;
228
-
229
- export const warranty = () => `
230
- <div class="section-notice" role="region">
231
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
232
- <svg aria-hidden="true" class="icon--free-warranty-24">
233
- <use href="#icon-free-warranty-24"></use>
234
- </svg>
235
- </div>
236
- <div class="section-notice__main">
237
- <h3 class="section-notice__title">Notification Title</h3>
238
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
239
- </div>
240
- <p class="section-notice__cta">
241
- <button class="fake-link" type="button">Action</button>
242
- </p>
243
- <div class="section-notice__footer">
244
- <button aria-label="Close notice" class="fake-link section-notice__dismiss">
245
- <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
246
- <use href="#icon-close-16"></use>
247
- </svg>
248
- </button>
249
- </div>
250
- </div>
251
- `;