@ebay/skin 16.6.0 → 16.7.0-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 (214) hide show
  1. package/.storybook/preview-head.html +189 -31
  2. package/.stylelintrc +1 -4
  3. package/_cdn/skin/v16.7.0-0/skin-default.min.css +28 -0
  4. package/_cdn/skin/v16.7.0-0/skin-full.min.css +62 -0
  5. package/_cdn/skin/v16.7.0-0/skin-headless.min.css +6 -0
  6. package/_cdn/skin/v16.7.0-0/skin-legacy.min.css +28 -0
  7. package/chip.browser.json +1 -0
  8. package/chip.css +1 -0
  9. package/chip.js +1 -0
  10. package/chip.mjs +1 -0
  11. package/dist/alert-dialog/alert-dialog.css +2 -2
  12. package/dist/chip/chip.css +46 -0
  13. package/dist/confirm-dialog/confirm-dialog.css +2 -2
  14. package/dist/icon/icon.css +96 -0
  15. package/dist/legacy-tokens/ds4-light.css +33 -0
  16. package/dist/lightbox-dialog/lightbox-dialog.css +50 -2
  17. package/dist/section-notice/section-notice.css +9 -3
  18. package/dist/svg/icon/icon-ai-16.svg +7 -0
  19. package/dist/svg/icon/icon-ai-20.svg +7 -0
  20. package/dist/svg/icon/icon-ai-24.svg +7 -0
  21. package/dist/svg/icon/icon-ai-filled-16.svg +5 -0
  22. package/dist/svg/icon/icon-ai-filled-20.svg +5 -0
  23. package/dist/svg/icon/icon-ai-filled-24.svg +5 -0
  24. package/dist/svg/icon/icon-ai-thin-16.svg +7 -0
  25. package/dist/svg/icon/icon-arrows-expand-16.svg +7 -0
  26. package/dist/svg/icon/icon-arrows-expand-24.svg +7 -0
  27. package/dist/svg/icon/icon-avatar-signed-out.svg +17 -4
  28. package/dist/svg/icon/icon-background-removal-24.svg +7 -0
  29. package/dist/svg/icon/icon-car-brake-16.svg +7 -0
  30. package/dist/svg/icon/icon-car-brake-24.svg +7 -0
  31. package/dist/svg/icon/icon-chinese-coin-16.svg +7 -0
  32. package/dist/svg/icon/icon-chinese-coin-24.svg +7 -0
  33. package/dist/svg/icon/icon-close-12.svg +3 -0
  34. package/dist/svg/icon/icon-eek-arrow.svg +1 -1
  35. package/dist/svg/icon/icon-eek-range-arrow.svg +1 -1
  36. package/dist/svg/icon/icon-fingerprint-24.svg +4 -8
  37. package/dist/svg/icon/icon-graph-16.svg +7 -0
  38. package/dist/svg/icon/icon-graph-24.svg +7 -0
  39. package/dist/svg/icon/icon-headlight-16.svg +7 -0
  40. package/dist/svg/icon/icon-headlight-24.svg +7 -0
  41. package/dist/svg/icon/icon-home-24.svg +4 -2
  42. package/dist/svg/icon/icon-home-filled-24.svg +4 -2
  43. package/dist/svg/icon/icon-notification-16.svg +1 -1
  44. package/dist/svg/icon/icon-notification-20.svg +1 -1
  45. package/dist/svg/icon/icon-notification-24.svg +4 -2
  46. package/dist/svg/icon/icon-notification-64.svg +1 -1
  47. package/dist/svg/icon/icon-notification-filled-24.svg +4 -2
  48. package/dist/svg/icon/icon-selling-16.svg +1 -2
  49. package/dist/svg/icon/icon-selling-20.svg +2 -3
  50. package/dist/svg/icon/icon-selling-24.svg +4 -2
  51. package/dist/svg/icon/icon-selling-filled-24.svg +4 -2
  52. package/dist/svg/icon/icon-sparkline-up-filled-24.svg +7 -0
  53. package/dist/svg/icon/icon-spinner-20.svg +16 -4
  54. package/dist/svg/icon/icon-spinner-24.svg +16 -4
  55. package/dist/svg/icon/icon-spinner-30.svg +1 -1
  56. package/dist/svg/icon/icon-split-payment-16.svg +7 -0
  57. package/dist/svg/icon/icon-split-payment-24.svg +7 -0
  58. package/dist/svg/icon/icon-star-dynamic.svg +8 -6
  59. package/dist/svg/icon/icon-stepper-attention-24.svg +1 -1
  60. package/dist/svg/icon/icon-stepper-confirmation-24.svg +1 -1
  61. package/dist/svg/icon/icon-stepper-current-24.svg +1 -1
  62. package/dist/svg/icon/icon-stepper-upcoming-24.svg +6 -3
  63. package/dist/svg/icon/icon-store-16.svg +3 -5
  64. package/dist/svg/icon/icon-store-24.svg +2 -5
  65. package/dist/svg/icon/icon-store-64.svg +2 -5
  66. package/dist/svg/icon/icon-store-filled-24.svg +7 -0
  67. package/dist/svg/icon/icon-text-messaging-20.svg +7 -0
  68. package/dist/svg/icon/icon-twitter-24.svg +2 -2
  69. package/dist/svg/icon/image-placeholder.svg +9 -2
  70. package/dist/svg/icon/star-rating-0-5.svg +18 -1
  71. package/dist/svg/icon/star-rating-0.svg +8 -1
  72. package/dist/svg/icon/star-rating-1-5.svg +22 -1
  73. package/dist/svg/icon/star-rating-1.svg +12 -1
  74. package/dist/svg/icon/star-rating-2-5.svg +22 -1
  75. package/dist/svg/icon/star-rating-2.svg +12 -1
  76. package/dist/svg/icon/star-rating-3-5.svg +22 -1
  77. package/dist/svg/icon/star-rating-3.svg +12 -1
  78. package/dist/svg/icon/star-rating-4-5.svg +16 -1
  79. package/dist/svg/icon/star-rating-4.svg +12 -1
  80. package/dist/svg/icon/star-rating-5.svg +6 -1
  81. package/dist/svg/icon/star-rating-small-0-5.svg +18 -1
  82. package/dist/svg/icon/star-rating-small-0.svg +8 -1
  83. package/dist/svg/icon/star-rating-small-1-5.svg +22 -1
  84. package/dist/svg/icon/star-rating-small-1.svg +12 -1
  85. package/dist/svg/icon/star-rating-small-2-5.svg +22 -1
  86. package/dist/svg/icon/star-rating-small-2.svg +12 -1
  87. package/dist/svg/icon/star-rating-small-3-5.svg +22 -1
  88. package/dist/svg/icon/star-rating-small-3.svg +12 -1
  89. package/dist/svg/icon/star-rating-small-4-5.svg +16 -1
  90. package/dist/svg/icon/star-rating-small-4.svg +12 -1
  91. package/dist/svg/icon/star-rating-small-5.svg +6 -1
  92. package/dist/svg/icons.svg +189 -31
  93. package/dist/tokens/evo-core.css +12 -0
  94. package/dist/tokens/evo-dark.css +44 -0
  95. package/dist/tokens/evo-light.css +33 -0
  96. package/dist/variables/variables.less +1 -0
  97. package/index.browser.json +1 -0
  98. package/index.css +1 -0
  99. package/index.js +1 -0
  100. package/index.mjs +1 -0
  101. package/package.json +9 -9
  102. package/scripts/generate-bundle.js +18 -14
  103. package/scripts/generate-images.js +22 -24
  104. package/scripts/generate-imports/index.js +10 -10
  105. package/scripts/generate-imports/module-builder.js +13 -13
  106. package/scripts/split-icon.js +3 -3
  107. package/src/less/bundles/skin-headless.less +1 -0
  108. package/src/less/button/button.less +2 -1
  109. package/src/less/carousel/carousel.less +6 -2
  110. package/src/less/chip/chip.less +52 -0
  111. package/src/less/chip/stories/interactive-chip.stories.js +170 -0
  112. package/src/less/chip/stories/static-chip.stories.js +155 -0
  113. package/src/less/eek/eek.less +5 -2
  114. package/src/less/floating-label/floating-label.less +2 -1
  115. package/src/less/icon/generated/icon.less +96 -0
  116. package/src/less/lightbox-dialog/lightbox-dialog.less +55 -0
  117. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +80 -0
  118. package/src/less/marketsans/marketsans.less +4 -2
  119. package/src/less/mixins/private/dialog-mixins.less +7 -2
  120. package/src/less/section-notice/section-notice.less +17 -3
  121. package/src/less/section-notice/stories/icon-16.stories.js +156 -0
  122. package/src/less/section-notice/stories/icon-24.stories.js +251 -0
  123. package/src/less/section-notice/stories/iconless.stories.js +116 -0
  124. package/src/less/section-notice/stories/legacy.stories.js +32 -0
  125. package/src/less/section-notice/stories/test.stories.js +19 -78
  126. package/src/less/snackbar-dialog/snackbar-dialog.less +2 -1
  127. package/src/less/switch/switch.less +2 -1
  128. package/src/less/toast-dialog/toast-dialog.less +2 -1
  129. package/src/less/variables/variables.less +1 -0
  130. package/src/svg/icon/icon-ai-16.svg +7 -0
  131. package/src/svg/icon/icon-ai-20.svg +7 -0
  132. package/src/svg/icon/icon-ai-24.svg +7 -0
  133. package/src/svg/icon/icon-ai-filled-16.svg +5 -0
  134. package/src/svg/icon/icon-ai-filled-20.svg +5 -0
  135. package/src/svg/icon/icon-ai-filled-24.svg +5 -0
  136. package/src/svg/icon/icon-ai-thin-16.svg +7 -0
  137. package/src/svg/icon/icon-arrows-expand-16.svg +7 -0
  138. package/src/svg/icon/icon-arrows-expand-24.svg +7 -0
  139. package/src/svg/icon/icon-avatar-signed-out.svg +17 -4
  140. package/src/svg/icon/icon-background-removal-24.svg +7 -0
  141. package/src/svg/icon/icon-car-brake-16.svg +7 -0
  142. package/src/svg/icon/icon-car-brake-24.svg +7 -0
  143. package/src/svg/icon/icon-chinese-coin-16.svg +7 -0
  144. package/src/svg/icon/icon-chinese-coin-24.svg +7 -0
  145. package/src/svg/icon/icon-close-12.svg +3 -0
  146. package/src/svg/icon/icon-eek-arrow.svg +1 -1
  147. package/src/svg/icon/icon-eek-range-arrow.svg +1 -1
  148. package/src/svg/icon/icon-fingerprint-24.svg +4 -8
  149. package/src/svg/icon/icon-graph-16.svg +7 -0
  150. package/src/svg/icon/icon-graph-24.svg +7 -0
  151. package/src/svg/icon/icon-headlight-16.svg +7 -0
  152. package/src/svg/icon/icon-headlight-24.svg +7 -0
  153. package/src/svg/icon/icon-home-24.svg +4 -2
  154. package/src/svg/icon/icon-home-filled-24.svg +4 -2
  155. package/src/svg/icon/icon-notification-16.svg +1 -1
  156. package/src/svg/icon/icon-notification-20.svg +1 -1
  157. package/src/svg/icon/icon-notification-24.svg +4 -2
  158. package/src/svg/icon/icon-notification-64.svg +1 -1
  159. package/src/svg/icon/icon-notification-filled-24.svg +4 -2
  160. package/src/svg/icon/icon-selling-16.svg +1 -2
  161. package/src/svg/icon/icon-selling-20.svg +2 -3
  162. package/src/svg/icon/icon-selling-24.svg +4 -2
  163. package/src/svg/icon/icon-selling-filled-24.svg +4 -2
  164. package/src/svg/icon/icon-sparkline-up-filled-24.svg +7 -0
  165. package/src/svg/icon/icon-spinner-20.svg +16 -4
  166. package/src/svg/icon/icon-spinner-24.svg +16 -4
  167. package/src/svg/icon/icon-spinner-30.svg +1 -1
  168. package/src/svg/icon/icon-split-payment-16.svg +7 -0
  169. package/src/svg/icon/icon-split-payment-24.svg +7 -0
  170. package/src/svg/icon/icon-star-dynamic.svg +8 -6
  171. package/src/svg/icon/icon-stepper-attention-24.svg +1 -1
  172. package/src/svg/icon/icon-stepper-confirmation-24.svg +1 -1
  173. package/src/svg/icon/icon-stepper-current-24.svg +1 -1
  174. package/src/svg/icon/icon-stepper-upcoming-24.svg +6 -3
  175. package/src/svg/icon/icon-store-16.svg +3 -5
  176. package/src/svg/icon/icon-store-24.svg +2 -5
  177. package/src/svg/icon/icon-store-64.svg +2 -5
  178. package/src/svg/icon/icon-store-filled-24.svg +7 -0
  179. package/src/svg/icon/icon-text-messaging-20.svg +7 -0
  180. package/src/svg/icon/icon-twitter-24.svg +2 -2
  181. package/src/svg/icon/image-placeholder.svg +9 -2
  182. package/src/svg/icon/star-rating-0-5.svg +18 -1
  183. package/src/svg/icon/star-rating-0.svg +8 -1
  184. package/src/svg/icon/star-rating-1-5.svg +22 -1
  185. package/src/svg/icon/star-rating-1.svg +12 -1
  186. package/src/svg/icon/star-rating-2-5.svg +22 -1
  187. package/src/svg/icon/star-rating-2.svg +12 -1
  188. package/src/svg/icon/star-rating-3-5.svg +22 -1
  189. package/src/svg/icon/star-rating-3.svg +12 -1
  190. package/src/svg/icon/star-rating-4-5.svg +16 -1
  191. package/src/svg/icon/star-rating-4.svg +12 -1
  192. package/src/svg/icon/star-rating-5.svg +6 -1
  193. package/src/svg/icon/star-rating-small-0-5.svg +18 -1
  194. package/src/svg/icon/star-rating-small-0.svg +8 -1
  195. package/src/svg/icon/star-rating-small-1-5.svg +22 -1
  196. package/src/svg/icon/star-rating-small-1.svg +12 -1
  197. package/src/svg/icon/star-rating-small-2-5.svg +22 -1
  198. package/src/svg/icon/star-rating-small-2.svg +12 -1
  199. package/src/svg/icon/star-rating-small-3-5.svg +22 -1
  200. package/src/svg/icon/star-rating-small-3.svg +12 -1
  201. package/src/svg/icon/star-rating-small-4-5.svg +16 -1
  202. package/src/svg/icon/star-rating-small-4.svg +12 -1
  203. package/src/svg/icon/star-rating-small-5.svg +6 -1
  204. package/src/svg/icons.svg +189 -31
  205. package/src/tokens/evo-core.css +12 -0
  206. package/src/tokens/evo-dark.css +44 -0
  207. package/src/tokens/evo-light.css +33 -0
  208. package/svg.svg +189 -31
  209. package/_cdn/skin/v16.6.0/skin-default.min.css +0 -6
  210. package/_cdn/skin/v16.6.0/skin-full.min.css +0 -6
  211. package/_cdn/skin/v16.6.0/skin-headless.min.css +0 -6
  212. package/_cdn/skin/v16.6.0/skin-legacy.min.css +0 -6
  213. package/src/less/section-notice/stories/rtl.stories.js +0 -66
  214. package/src/less/section-notice/stories/section-notice.stories.js +0 -186
package/src/less/section-notice/stories/section-notice.stories.js DELETED
@@ -1,186 +0,0 @@
1
- export default { title: "Skin/Section Notice" };
2
-
3
- export const general = () => `
4
- <div class="section-notice" role="region">
5
- <div class="section-notice__main">
6
- <h3 class="section-notice__title">Your price has been updated.</h3>
7
- </div>
8
- </div>
9
- `;
10
-
11
- export const generalWithButton = () => `
12
- <div class="section-notice" role="region">
13
- <div class="section-notice__main">
14
- <h3 class="section-notice__title">Your price has been updated.</h3>
15
- </div>
16
- <div class="section-notice__footer">
17
- <button class="fake-link">Dismiss</button>
18
- </div>
19
- </div>
20
- `;
21
-
22
- export const generalWithLink = () => `
23
- <div class="section-notice" role="region">
24
- <div class="section-notice__main">
25
- <h3 class="section-notice__title">Your price has been updated.</h3>
26
- </div>
27
- <div class="section-notice__footer">
28
- <a href="https://ebay.com">Learn More</a>
29
- </div>
30
- </div>
31
- `;
32
-
33
- export const confirmationWithParagraph = () => `
34
- <div class="section-notice section-notice--confirmation" role="region">
35
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
36
- <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
37
- <use href="#icon-confirmation-filled-16"></use>
38
- </svg>
39
- </div>
40
- <div class="section-notice__main">
41
- <p>Your price has been updated.</p>
42
- </div>
43
- <div class="section-notice__footer">
44
- <button class="fake-link">Dismiss</button>
45
- </div>
46
- </div>
47
- `;
48
-
49
- export const confirmationWithButton = () => `
50
- <div class="section-notice section-notice--confirmation" role="region">
51
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
52
- <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
53
- <use href="#icon-confirmation-filled-16"></use>
54
- </svg>
55
- </div>
56
- <div class="section-notice__main">
57
- <h3 class="section-notice__title">Your price has been updated.</h3>
58
- </div>
59
- <div class="section-notice__footer">
60
- <button class="fake-link">Dismiss</button>
61
- </div>
62
- </div>
63
- `;
64
-
65
- export const confirmationWithLink = () => `
66
- <div class="section-notice section-notice--confirmation" role="region">
67
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
68
- <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
69
- <use href="#icon-confirmation-filled-16"></use>
70
- </svg>
71
- </div>
72
- <div class="section-notice__main">
73
- <h3 class="section-notice__title">Your price has been updated.</h3>
74
- </div>
75
- <div class="section-notice__footer">
76
- <a href="https://ebay.com">Learn More</a>
77
- </div>
78
- </div>
79
- `;
80
-
81
- export const attentionWithButton = () => `
82
- <div class="section-notice section-notice--attention" role="region">
83
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
84
- <svg aria-hidden="true" focusable="false" class="icon--attention-filled-16">
85
- <use href="#icon-attention-filled-16"></use>
86
- </svg>
87
- </div>
88
- <div class="section-notice__main">
89
- <h3 class="section-notice__title">Add required aspects to keep item live.</h3>
90
- </div>
91
- <div class="section-notice__footer">
92
- <button class="fake-link">Dismiss</button>
93
- </div>
94
- </div>
95
- `;
96
-
97
- export const attentionWithLink = () => `
98
- <div class="section-notice section-notice--attention" role="region">
99
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
100
- <svg aria-hidden="true" focusable="false" class="icon--attention-filled-16">
101
- <use href="#icon-attention-filled-16"></use>
102
- </svg>
103
- </div>
104
- <div class="section-notice__main">
105
- <h3 class="section-notice__title">Add required aspects to keep item live.</h3>
106
- </div>
107
- <div class="section-notice__footer">
108
- <a href="https://ebay.com">Learn More</a>
109
- </div>
110
- </div>
111
- `;
112
-
113
- export const informationWithButton = () => `
114
- <div class="section-notice section-notice--information" role="region">
115
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
116
- <svg aria-hidden="true" focusable="false" class="icon--information-filled-16">
117
- <use href="#icon-information-filled-16"></use>
118
- </svg>
119
- </div>
120
- <div class="section-notice__main">
121
- <h3 class="section-notice__title">Send offers to interested buyers.</h3>
122
- </div>
123
- <div class="section-notice__footer">
124
- <button class="fake-link">Dismiss</button>
125
- </div>
126
- </div>
127
- `;
128
-
129
- export const informationWithLink = () => `
130
- <div class="section-notice section-notice--information" role="region">
131
- <div class="section-notice__header" role="region" aria-roledescription="Notice">
132
- <svg aria-hidden="true" focusable="false" class="icon--information-filled-16">
133
- <use href="#icon-information-filled-16"></use>
134
- </svg>
135
- </div>
136
- <div class="section-notice__main">
137
- <h3 class="section-notice__title">Send offers to interested buyers.</h3>
138
- </div>
139
- <div class="section-notice__footer">
140
- <a href="https://ebay.com">Send Offers</a>
141
- </div>
142
- </div>
143
- `;
144
-
145
- export const dismissableWithTitle = () => `
146
- <section class="section-notice section-notice--information" role="region" aria-label="Information">
147
- <div class="section-notice__header">
148
- <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
149
- <use href="#icon-information-filled-16"></use>
150
- </svg>
151
- </div>
152
- <div class="section-notice__main">
153
- <h3 class="section-notice__title">Notice Title</h3>
154
- <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
155
- </div>
156
- <p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
157
- <div class="section-notice__footer">
158
- <button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
159
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="10" width="10">
160
- <use href="#icon-close-16"></use>
161
- </svg>
162
- </a>
163
- </div>
164
- </section>
165
- `;
166
-
167
- export const dismissableWithoutTitle = () => `
168
- <section class="section-notice section-notice--information" role="region" aria-label="Information">
169
- <div class="section-notice__header">
170
- <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
171
- <use href="#icon-information-filled-16"></use>
172
- </svg>
173
- </div>
174
- <div class="section-notice__main">
175
- <h3 class="section-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h3>
176
- </div>
177
- <p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
178
- <div class="section-notice__footer">
179
- <button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
180
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="10" width="10">
181
- <use href="#icon-close-16"></use>
182
- </svg>
183
- </a>
184
- </div>
185
- </section>
186
- `;