@ebay/skin 14.2.1 → 15.0.0-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 (251) hide show
  1. package/.storybook/preview-head.html +343 -72
  2. package/_cdn/skin/v15.0.0-1/skin-default.min.css +6 -0
  3. package/_cdn/skin/v15.0.0-1/skin-full.min.css +6 -0
  4. package/_cdn/skin/v15.0.0-1/skin-headless.min.css +6 -0
  5. package/_cdn/skin/v15.0.0-1/skin-legacy.min.css +6 -0
  6. package/dist/button/button.css +20 -21
  7. package/dist/combobox/combobox.css +13 -3
  8. package/dist/cta-button/cta-button.css +0 -4
  9. package/dist/field/field.css +1 -1
  10. package/dist/icon/icon.css +397 -345
  11. package/dist/infotip/infotip.css +0 -5
  12. package/dist/legacy-tokens/ds4-light.css +0 -2
  13. package/dist/lightbox-dialog/lightbox-dialog.css +0 -12
  14. package/dist/listbox-button/listbox-button.css +5 -0
  15. package/dist/menu-button/menu-button.css +13 -22
  16. package/dist/panel-dialog/panel-dialog.css +0 -3
  17. package/dist/program-badge/program-badge.css +397 -345
  18. package/dist/progress-spinner/progress-spinner.css +14 -18
  19. package/dist/progress-stepper/progress-stepper.css +46 -45
  20. package/dist/section-title/section-title.css +23 -87
  21. package/dist/snackbar-dialog/snackbar-dialog.css +9 -11
  22. package/dist/star-rating/star-rating.css +11 -7
  23. package/dist/star-rating-select/star-rating-select.css +9 -7
  24. package/dist/svg/icon/icon-spinner-large.svg +5 -5
  25. package/dist/svg/icon/icon-spinner-small.svg +4 -0
  26. package/dist/svg/icon/icon-spinner.svg +3 -13
  27. package/dist/svg/icon/icon-star-dynamic.svg +11 -9
  28. package/dist/svg/icon/icon-star-empty-large.svg +1 -0
  29. package/dist/svg/icon/icon-star-empty-small.svg +1 -5
  30. package/dist/svg/icon/icon-star-filled-large.svg +1 -0
  31. package/dist/svg/icon/icon-star-filled-small.svg +1 -0
  32. package/dist/svg/icon/icon-star-half-large.svg +1 -0
  33. package/dist/svg/icon/icon-star-half-small.svg +1 -9
  34. package/dist/svg/icon/icon-stepper-attention.svg +1 -0
  35. package/dist/svg/icon/icon-stepper-confirmation.svg +1 -0
  36. package/dist/svg/icon/icon-stepper-current.svg +1 -0
  37. package/dist/svg/icon/icon-stepper-upcoming.svg +5 -0
  38. package/dist/svg/icon/star-rating-0-5.svg +1 -9
  39. package/dist/svg/icon/star-rating-0.svg +1 -6
  40. package/dist/svg/icon/star-rating-1-5.svg +1 -9
  41. package/dist/svg/icon/star-rating-1.svg +1 -9
  42. package/dist/svg/icon/star-rating-2-5.svg +1 -9
  43. package/dist/svg/icon/star-rating-2.svg +1 -9
  44. package/dist/svg/icon/star-rating-3-5.svg +1 -9
  45. package/dist/svg/icon/star-rating-3.svg +1 -9
  46. package/dist/svg/icon/star-rating-4-5.svg +1 -9
  47. package/dist/svg/icon/star-rating-4.svg +1 -9
  48. package/dist/svg/icon/star-rating-5.svg +1 -5
  49. package/dist/svg/icon/star-rating-small-0-5.svg +1 -0
  50. package/dist/svg/icon/star-rating-small-0.svg +1 -0
  51. package/dist/svg/icon/star-rating-small-1-5.svg +1 -0
  52. package/dist/svg/icon/star-rating-small-1.svg +1 -0
  53. package/dist/svg/icon/star-rating-small-2-5.svg +1 -0
  54. package/dist/svg/icon/star-rating-small-2.svg +1 -0
  55. package/dist/svg/icon/star-rating-small-3-5.svg +1 -0
  56. package/dist/svg/icon/star-rating-small-3.svg +1 -0
  57. package/dist/svg/icon/star-rating-small-4-5.svg +1 -0
  58. package/dist/svg/icon/star-rating-small-4.svg +1 -0
  59. package/dist/svg/icon/star-rating-small-5.svg +1 -0
  60. package/dist/svg/icons.svg +343 -72
  61. package/dist/svg/star-rating.svg +206 -42
  62. package/dist/tokens/evo-dark.css +4 -6
  63. package/dist/tokens/evo-light.css +0 -2
  64. package/dist/tooltip/tooltip.css +0 -5
  65. package/dist/tourtip/tourtip.css +0 -5
  66. package/dist/variables/variables.less +0 -3
  67. package/index.browser.json +1 -3
  68. package/index.css +0 -2
  69. package/index.js +0 -2
  70. package/index.mjs +0 -2
  71. package/package.json +1 -1
  72. package/scripts/generate-images.js +29 -14
  73. package/src/less/bundles/skin-headless.less +0 -2
  74. package/src/less/button/button.less +21 -23
  75. package/src/less/button/stories/button/borderless.stories.js +8 -0
  76. package/src/less/combobox/combobox.less +4 -4
  77. package/src/less/cta-button/cta-button.less +0 -6
  78. package/src/less/cta-button/stories/cta-button.stories.js +0 -11
  79. package/src/less/field/field.less +1 -1
  80. package/src/less/gh/gh-mixins.less +0 -8
  81. package/src/less/global/stories/global.stories.js +18 -18
  82. package/src/less/icon/generated/icon.less +397 -345
  83. package/src/less/lightbox-dialog/lightbox-dialog.less +0 -15
  84. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +0 -53
  85. package/src/less/menu-button/menu-button.less +7 -33
  86. package/src/less/mixins/private/bubble-mixins.less +0 -11
  87. package/src/less/mixins/private/button-mixins.less +0 -1
  88. package/src/less/mixins/private/dialog-mixins.less +0 -3
  89. package/src/less/mixins/private/dropdown-mixins.less +16 -0
  90. package/src/less/panel-dialog/panel-dialog.less +0 -5
  91. package/src/less/progress-spinner/progress-spinner.less +14 -19
  92. package/src/less/progress-spinner/stories/progress-spinner.stories.js +7 -6
  93. package/src/less/progress-stepper/progress-stepper.less +103 -55
  94. package/src/less/progress-stepper/stories/progress-stepper.stories.js +461 -65
  95. package/src/less/section-title/section-title.less +24 -102
  96. package/src/less/section-title/stories/rtl.stories.js +67 -12
  97. package/src/less/section-title/stories/section-title.stories.js +22 -262
  98. package/src/less/snackbar-dialog/snackbar-dialog.less +9 -11
  99. package/src/less/star-rating/star-rating.less +26 -6
  100. package/src/less/star-rating-select/star-rating-select.less +28 -7
  101. package/src/less/variables/variables.less +0 -3
  102. package/src/selectors-api/selectors-api.json +1 -3
  103. package/src/svg/icon/icon-spinner-large.svg +5 -5
  104. package/src/svg/icon/icon-spinner-small.svg +4 -0
  105. package/src/svg/icon/icon-spinner.svg +3 -13
  106. package/src/svg/icon/icon-star-dynamic.svg +11 -9
  107. package/src/svg/icon/icon-star-empty-large.svg +1 -0
  108. package/src/svg/icon/icon-star-empty-small.svg +1 -5
  109. package/src/svg/icon/icon-star-filled-large.svg +1 -0
  110. package/src/svg/icon/icon-star-filled-small.svg +1 -0
  111. package/src/svg/icon/icon-star-half-large.svg +1 -0
  112. package/src/svg/icon/icon-star-half-small.svg +1 -9
  113. package/src/svg/icon/icon-stepper-attention.svg +1 -0
  114. package/src/svg/icon/icon-stepper-confirmation.svg +1 -0
  115. package/src/svg/icon/icon-stepper-current.svg +1 -0
  116. package/src/svg/icon/icon-stepper-upcoming.svg +5 -0
  117. package/src/svg/icon/star-rating-0-5.svg +1 -9
  118. package/src/svg/icon/star-rating-0.svg +1 -6
  119. package/src/svg/icon/star-rating-1-5.svg +1 -9
  120. package/src/svg/icon/star-rating-1.svg +1 -9
  121. package/src/svg/icon/star-rating-2-5.svg +1 -9
  122. package/src/svg/icon/star-rating-2.svg +1 -9
  123. package/src/svg/icon/star-rating-3-5.svg +1 -9
  124. package/src/svg/icon/star-rating-3.svg +1 -9
  125. package/src/svg/icon/star-rating-4-5.svg +1 -9
  126. package/src/svg/icon/star-rating-4.svg +1 -9
  127. package/src/svg/icon/star-rating-5.svg +1 -5
  128. package/src/svg/icon/star-rating-small-0-5.svg +1 -0
  129. package/src/svg/icon/star-rating-small-0.svg +1 -0
  130. package/src/svg/icon/star-rating-small-1-5.svg +1 -0
  131. package/src/svg/icon/star-rating-small-1.svg +1 -0
  132. package/src/svg/icon/star-rating-small-2-5.svg +1 -0
  133. package/src/svg/icon/star-rating-small-2.svg +1 -0
  134. package/src/svg/icon/star-rating-small-3-5.svg +1 -0
  135. package/src/svg/icon/star-rating-small-3.svg +1 -0
  136. package/src/svg/icon/star-rating-small-4-5.svg +1 -0
  137. package/src/svg/icon/star-rating-small-4.svg +1 -0
  138. package/src/svg/icon/star-rating-small-5.svg +1 -0
  139. package/src/svg/icons.svg +343 -72
  140. package/src/svg/star-rating.svg +206 -42
  141. package/src/tokens/evo-dark.css +4 -6
  142. package/src/tokens/evo-light.css +0 -2
  143. package/svg.svg +343 -72
  144. package/_cdn/skin/v14.2.1/skin-default.min.css +0 -6
  145. package/_cdn/skin/v14.2.1/skin-full.min.css +0 -6
  146. package/_cdn/skin/v14.2.1/skin-headless.min.css +0 -6
  147. package/_cdn/skin/v14.2.1/skin-legacy.min.css +0 -6
  148. package/dist/expand-button/expand-button.css +0 -189
  149. package/dist/icon/aliased.css +0 -45
  150. package/dist/icon/base.css +0 -12
  151. package/dist/icon/content.css +0 -41
  152. package/dist/icon/device.css +0 -45
  153. package/dist/icon/direction.css +0 -105
  154. package/dist/icon/filter.css +0 -65
  155. package/dist/icon/general.css +0 -309
  156. package/dist/icon/interface.css +0 -185
  157. package/dist/icon/internal.css +0 -120
  158. package/dist/icon/large.css +0 -93
  159. package/dist/icon/media.css +0 -45
  160. package/dist/icon/photo.css +0 -69
  161. package/dist/icon/reviews.css +0 -87
  162. package/dist/icon/shipping.css +0 -73
  163. package/dist/icon/social.css +0 -80
  164. package/dist/icon/status.css +0 -87
  165. package/dist/icon/user.css +0 -29
  166. package/dist/svg/aliased.svg +0 -38
  167. package/dist/svg/content.svg +0 -25
  168. package/dist/svg/device.svg +0 -29
  169. package/dist/svg/direction.svg +0 -119
  170. package/dist/svg/filter.svg +0 -43
  171. package/dist/svg/general.svg +0 -476
  172. package/dist/svg/icon/icon-stepper-information.svg +0 -5
  173. package/dist/svg/interface.svg +0 -314
  174. package/dist/svg/internal.svg +0 -162
  175. package/dist/svg/large.svg +0 -125
  176. package/dist/svg/media.svg +0 -29
  177. package/dist/svg/photo.svg +0 -106
  178. package/dist/svg/reviews.svg +0 -113
  179. package/dist/svg/shipping.svg +0 -82
  180. package/dist/svg/social.svg +0 -80
  181. package/dist/svg/status.svg +0 -48
  182. package/dist/svg/user.svg +0 -48
  183. package/dist/window-notice/window-notice.css +0 -39
  184. package/expand-button.browser.json +0 -1
  185. package/expand-button.css +0 -1
  186. package/expand-button.js +0 -1
  187. package/expand-button.mjs +0 -1
  188. package/src/less/expand-button/expand-button.less +0 -181
  189. package/src/less/expand-button/stories/base.stories.js +0 -56
  190. package/src/less/expand-button/stories/cascade.stories.js +0 -54
  191. package/src/less/expand-button/stories/dimensions.stories.js +0 -45
  192. package/src/less/icon/aliased.less +0 -12
  193. package/src/less/icon/base.less +0 -14
  194. package/src/less/icon/content.less +0 -2
  195. package/src/less/icon/device.less +0 -2
  196. package/src/less/icon/direction.less +0 -2
  197. package/src/less/icon/filter.less +0 -2
  198. package/src/less/icon/general.less +0 -2
  199. package/src/less/icon/generated/aliased.less +0 -25
  200. package/src/less/icon/generated/content.less +0 -29
  201. package/src/less/icon/generated/device.less +0 -33
  202. package/src/less/icon/generated/direction.less +0 -93
  203. package/src/less/icon/generated/filter.less +0 -53
  204. package/src/less/icon/generated/general.less +0 -297
  205. package/src/less/icon/generated/interface.less +0 -173
  206. package/src/less/icon/generated/internal.less +0 -93
  207. package/src/less/icon/generated/large.less +0 -81
  208. package/src/less/icon/generated/media.less +0 -33
  209. package/src/less/icon/generated/photo.less +0 -57
  210. package/src/less/icon/generated/program-badges.less +0 -49
  211. package/src/less/icon/generated/reviews.less +0 -69
  212. package/src/less/icon/generated/shipping.less +0 -61
  213. package/src/less/icon/generated/social.less +0 -41
  214. package/src/less/icon/generated/status.less +0 -57
  215. package/src/less/icon/generated/user.less +0 -17
  216. package/src/less/icon/interface.less +0 -2
  217. package/src/less/icon/internal.less +0 -22
  218. package/src/less/icon/large.less +0 -2
  219. package/src/less/icon/media.less +0 -2
  220. package/src/less/icon/photo.less +0 -2
  221. package/src/less/icon/reviews.less +0 -12
  222. package/src/less/icon/shipping.less +0 -2
  223. package/src/less/icon/social.less +0 -41
  224. package/src/less/icon/status.less +0 -28
  225. package/src/less/icon/user.less +0 -2
  226. package/src/less/window-notice/stories/window-notice.stories.js +0 -60
  227. package/src/less/window-notice/window-notice.less +0 -50
  228. package/src/svg/aliased.svg +0 -38
  229. package/src/svg/content.svg +0 -25
  230. package/src/svg/device.svg +0 -29
  231. package/src/svg/direction.svg +0 -119
  232. package/src/svg/filter.svg +0 -43
  233. package/src/svg/general.svg +0 -476
  234. package/src/svg/icon/icon-star-empty.svg +0 -5
  235. package/src/svg/icon/icon-star-full.svg +0 -5
  236. package/src/svg/icon/icon-star-half.svg +0 -9
  237. package/src/svg/icon/icon-stepper-information.svg +0 -5
  238. package/src/svg/interface.svg +0 -314
  239. package/src/svg/internal.svg +0 -162
  240. package/src/svg/large.svg +0 -125
  241. package/src/svg/media.svg +0 -29
  242. package/src/svg/photo.svg +0 -106
  243. package/src/svg/reviews.svg +0 -113
  244. package/src/svg/shipping.svg +0 -82
  245. package/src/svg/social.svg +0 -80
  246. package/src/svg/status.svg +0 -48
  247. package/src/svg/user.svg +0 -48
  248. package/window-notice.browser.json +0 -1
  249. package/window-notice.css +0 -1
  250. package/window-notice.js +0 -1
  251. package/window-notice.mjs +0 -1
package/src/less/progress-stepper/stories/progress-stepper.stories.js CHANGED
@@ -6,7 +6,7 @@ export const base = () => `
6
6
  <div class="progress-stepper__item" role="listitem">
7
7
  <span class="progress-stepper__icon">
8
8
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
9
- <use xlink:href="#icon-stepper-confirmation"></use>
9
+ <use href="#icon-stepper-confirmation"></use>
10
10
  </svg>
11
11
  </span>
12
12
  <span class="progress-stepper__text">
@@ -18,7 +18,7 @@ export const base = () => `
18
18
  <div class="progress-stepper__item" role="listitem">
19
19
  <span class="progress-stepper__icon">
20
20
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
21
- <use xlink:href="#icon-stepper-confirmation"></use>
21
+ <use href="#icon-stepper-confirmation"></use>
22
22
  </svg>
23
23
  </span>
24
24
  <span class="progress-stepper__text">
@@ -27,10 +27,10 @@ export const base = () => `
27
27
  </span>
28
28
  </div>
29
29
  <hr class="progress-stepper__separator" role="presentation" />
30
- <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
30
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
31
31
  <span class="progress-stepper__icon">
32
32
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
33
- <use xlink:href="#icon-stepper-current"></use>
33
+ <use href="#icon-stepper-confirmation"></use>
34
34
  </svg>
35
35
  </span>
36
36
  <span class="progress-stepper__text">
@@ -39,15 +39,68 @@ export const base = () => `
39
39
  </span>
40
40
  </div>
41
41
  <hr class="progress-stepper__separator" role="presentation" />
42
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
42
+ <div class="progress-stepper__item" role="listitem">
43
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
44
+ <use href="#icon-stepper-upcoming"></use>
45
+ </svg>
46
+ <span class="progress-stepper__text">
47
+ <h4>Delivered</h4>
48
+ <p>July 6th</p>
49
+ </span>
50
+ </div>
51
+
52
+ </div>
53
+ </div>
54
+ `;
55
+ export const multipleUpcoming = () => `
56
+ <div class="progress-stepper">
57
+ <div class="progress-stepper__items" role="list">
58
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
59
+ <span class="progress-stepper__icon">
60
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
61
+ <use href="#icon-stepper-confirmation"></use>
62
+ </svg>
63
+ </span>
64
+ <span class="progress-stepper__text">
65
+ <h4>Started</h4>
66
+ <p>July 3rd</p>
67
+ </span>
68
+ </div>
69
+ <hr class="progress-stepper__separator" role="presentation" />
70
+ <div class="progress-stepper__item" role="listitem">
71
+ <span class="progress-stepper__icon">
72
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
73
+ <use href="#icon-stepper-upcoming"></use>
74
+ </svg>
75
+ </span>
76
+ <span class="progress-stepper__text">
77
+ <h4>Shipped</h4>
78
+ <p>July 4th</p>
79
+ </span>
80
+ </div>
81
+ <hr class="progress-stepper__separator" role="presentation" />
82
+ <div class="progress-stepper__item" role="listitem">
43
83
  <span class="progress-stepper__icon">
44
- <span role="img" aria-label="upcoming"></span>
84
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
85
+ <use href="#icon-stepper-upcoming"></use>
86
+ </svg>
45
87
  </span>
88
+ <span class="progress-stepper__text">
89
+ <h4>Transit</h4>
90
+ <p>July 5th</p>
91
+ </span>
92
+ </div>
93
+ <hr class="progress-stepper__separator" role="presentation" />
94
+ <div class="progress-stepper__item" role="listitem">
95
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
96
+ <use href="#icon-stepper-upcoming"></use>
97
+ </svg>
46
98
  <span class="progress-stepper__text">
47
99
  <h4>Delivered</h4>
48
100
  <p>July 6th</p>
49
101
  </span>
50
102
  </div>
103
+
51
104
  </div>
52
105
  </div>
53
106
  `;
@@ -58,7 +111,7 @@ export const allSelected = () => `
58
111
  <div class="progress-stepper__item" role="listitem">
59
112
  <span class="progress-stepper__icon">
60
113
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
61
- <use xlink:href="#icon-stepper-confirmation"></use>
114
+ <use href="#icon-stepper-confirmation"></use>
62
115
  </svg>
63
116
  </span>
64
117
  <span class="progress-stepper__text">
@@ -70,7 +123,7 @@ export const allSelected = () => `
70
123
  <div class="progress-stepper__item" role="listitem">
71
124
  <span class="progress-stepper__icon">
72
125
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
73
- <use xlink:href="#icon-stepper-confirmation"></use>
126
+ <use href="#icon-stepper-confirmation"></use>
74
127
  </svg>
75
128
  </span>
76
129
  <span class="progress-stepper__text">
@@ -79,10 +132,10 @@ export const allSelected = () => `
79
132
  </span>
80
133
  </div>
81
134
  <hr class="progress-stepper__separator" role="presentation" />
82
- <div class="progress-stepper__item progress-stepper__item--current" role="listitem">
135
+ <div class="progress-stepper__item" role="listitem">
83
136
  <span class="progress-stepper__icon">
84
137
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
85
- <use xlink:href="#icon-stepper-confirmation"></use>
138
+ <use href="#icon-stepper-confirmation"></use>
86
139
  </svg>
87
140
  </span>
88
141
  <span class="progress-stepper__text">
@@ -94,7 +147,7 @@ export const allSelected = () => `
94
147
  <div class="progress-stepper__item" role="listitem">
95
148
  <span class="progress-stepper__icon">
96
149
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
97
- <use xlink:href="#icon-stepper-confirmation"></use>
150
+ <use href="#icon-stepper-confirmation"></use>
98
151
  </svg>
99
152
  </span>
100
153
  <span class="progress-stepper__text">
@@ -106,12 +159,14 @@ export const allSelected = () => `
106
159
  </div>
107
160
  `;
108
161
 
109
- export const noneSelected = () => `
162
+ export const currentBubble = () => `
110
163
  <div class="progress-stepper">
111
- <div class="progress-stepper__items progress-stepper__items--upcoming" role="list">
112
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
164
+ <div class="progress-stepper__items progress-stepper__items--current" role="list">
165
+ <div class="progress-stepper__item" role="listitem">
113
166
  <span class="progress-stepper__icon">
114
- <span role="img" aria-label="upcoming"></span>
167
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
168
+ <use href="#icon-stepper-confirmation"></use>
169
+ </svg>
115
170
  </span>
116
171
  <span class="progress-stepper__text">
117
172
  <h4>Started</h4>
@@ -119,9 +174,11 @@ export const noneSelected = () => `
119
174
  </span>
120
175
  </div>
121
176
  <hr class="progress-stepper__separator" role="presentation" />
122
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
177
+ <div class="progress-stepper__item" role="listitem">
123
178
  <span class="progress-stepper__icon">
124
- <span role="img" aria-label="upcoming"></span>
179
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
180
+ <use href="#icon-stepper-confirmation"></use>
181
+ </svg>
125
182
  </span>
126
183
  <span class="progress-stepper__text">
127
184
  <h4>Shipped</h4>
@@ -129,9 +186,11 @@ export const noneSelected = () => `
129
186
  </span>
130
187
  </div>
131
188
  <hr class="progress-stepper__separator" role="presentation" />
132
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
189
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
133
190
  <span class="progress-stepper__icon">
134
- <span role="img" aria-label="upcoming"></span>
191
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
192
+ <use href="#icon-stepper-current"></use>
193
+ </svg>
135
194
  </span>
136
195
  <span class="progress-stepper__text">
137
196
  <h4>Transit</h4>
@@ -139,9 +198,11 @@ export const noneSelected = () => `
139
198
  </span>
140
199
  </div>
141
200
  <hr class="progress-stepper__separator" role="presentation" />
142
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
201
+ <div class="progress-stepper__item" role="listitem">
143
202
  <span class="progress-stepper__icon">
144
- <span role="img" aria-label="upcoming"></span>
203
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
204
+ <use href="#icon-stepper-upcoming"></use>
205
+ </svg>
145
206
  </span>
146
207
  <span class="progress-stepper__text">
147
208
  <h4>Delivered</h4>
@@ -152,12 +213,14 @@ export const noneSelected = () => `
152
213
  </div>
153
214
  `;
154
215
 
155
- export const numbersNoneSelected = () => `
216
+ export const noneSelected = () => `
156
217
  <div class="progress-stepper">
157
218
  <div class="progress-stepper__items progress-stepper__items--upcoming" role="list">
158
219
  <div class="progress-stepper__item" role="listitem">
159
220
  <span class="progress-stepper__icon">
160
- <span class="step" role="img" aria-label="1">1</span>
221
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
222
+ <use href="#icon-stepper-upcoming"></use>
223
+ </svg>
161
224
  </span>
162
225
  <span class="progress-stepper__text">
163
226
  <h4>Started</h4>
@@ -167,7 +230,9 @@ export const numbersNoneSelected = () => `
167
230
  <hr class="progress-stepper__separator" role="presentation" />
168
231
  <div class="progress-stepper__item" role="listitem">
169
232
  <span class="progress-stepper__icon">
170
- <span class="step" role="img" aria-label="2">2</span>
233
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
234
+ <use href="#icon-stepper-upcoming"></use>
235
+ </svg>
171
236
  </span>
172
237
  <span class="progress-stepper__text">
173
238
  <h4>Shipped</h4>
@@ -175,9 +240,11 @@ export const numbersNoneSelected = () => `
175
240
  </span>
176
241
  </div>
177
242
  <hr class="progress-stepper__separator" role="presentation" />
178
- <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
243
+ <div class="progress-stepper__item" role="listitem">
179
244
  <span class="progress-stepper__icon">
180
- <span class="step" role="img" aria-label="3">3</span>
245
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
246
+ <use href="#icon-stepper-upcoming"></use>
247
+ </svg>
181
248
  </span>
182
249
  <span class="progress-stepper__text">
183
250
  <h4>Transit</h4>
@@ -187,7 +254,9 @@ export const numbersNoneSelected = () => `
187
254
  <hr class="progress-stepper__separator" role="presentation" />
188
255
  <div class="progress-stepper__item" role="listitem">
189
256
  <span class="progress-stepper__icon">
190
- <span class="step" role="img" aria-label="4">4</span>
257
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
258
+ <use href="#icon-stepper-upcoming"></use>
259
+ </svg>
191
260
  </span>
192
261
  <span class="progress-stepper__text">
193
262
  <h4>Delivered</h4>
@@ -204,7 +273,7 @@ export const RTL = () => `
204
273
  <div class="progress-stepper__item" role="listitem">
205
274
  <span class="progress-stepper__icon">
206
275
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
207
- <use xlink:href="#icon-stepper-confirmation"></use>
276
+ <use href="#icon-stepper-confirmation"></use>
208
277
  </svg>
209
278
  </span>
210
279
  <span class="progress-stepper__text">
@@ -216,7 +285,7 @@ export const RTL = () => `
216
285
  <div class="progress-stepper__item" role="listitem">
217
286
  <span class="progress-stepper__icon">
218
287
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
219
- <use xlink:href="#icon-stepper-confirmation"></use>
288
+ <use href="#icon-stepper-confirmation"></use>
220
289
  </svg>
221
290
  </span>
222
291
  <span class="progress-stepper__text">
@@ -225,10 +294,10 @@ export const RTL = () => `
225
294
  </span>
226
295
  </div>
227
296
  <hr class="progress-stepper__separator" role="presentation" />
228
- <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
297
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
229
298
  <span class="progress-stepper__icon">
230
299
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
231
- <use xlink:href="#icon-stepper-current"></use>
300
+ <use href="#icon-stepper-confirmation"></use>
232
301
  </svg>
233
302
  </span>
234
303
  <span class="progress-stepper__text">
@@ -237,9 +306,11 @@ export const RTL = () => `
237
306
  </span>
238
307
  </div>
239
308
  <hr class="progress-stepper__separator" role="presentation" />
240
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
309
+ <div class="progress-stepper__item" role="listitem">
241
310
  <span class="progress-stepper__icon">
242
- <span role="img" aria-label="upcoming"></span>
311
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
312
+ <use href="#icon-stepper-upcoming"></use>
313
+ </svg>
243
314
  </span>
244
315
  <span class="progress-stepper__text">
245
316
  <h4>Delivered</h4>
@@ -251,13 +322,67 @@ export const RTL = () => `
251
322
 
252
323
  `;
253
324
 
325
+ export const currentBubbleRTL = () => `
326
+ <div class="progress-stepper" dir="rtl">
327
+ <div class="progress-stepper__items progress-stepper__items--current" role="list">
328
+ <div class="progress-stepper__item" role="listitem">
329
+ <span class="progress-stepper__icon">
330
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
331
+ <use href="#icon-stepper-confirmation"></use>
332
+ </svg>
333
+ </span>
334
+ <span class="progress-stepper__text">
335
+ <h4>Started</h4>
336
+ <p>July 3rd</p>
337
+ </span>
338
+ </div>
339
+ <hr class="progress-stepper__separator" role="presentation" />
340
+ <div class="progress-stepper__item" role="listitem">
341
+ <span class="progress-stepper__icon">
342
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
343
+ <use href="#icon-stepper-confirmation"></use>
344
+ </svg>
345
+ </span>
346
+ <span class="progress-stepper__text">
347
+ <h4>Shipped</h4>
348
+ <p>July 4th</p>
349
+ </span>
350
+ </div>
351
+ <hr class="progress-stepper__separator" role="presentation" />
352
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
353
+ <span class="progress-stepper__icon">
354
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
355
+ <use href="#icon-stepper-current"></use>
356
+ </svg>
357
+ </span>
358
+ <span class="progress-stepper__text">
359
+ <h4>Transit</h4>
360
+ <p>July 5th</p>
361
+ </span>
362
+ </div>
363
+ <hr class="progress-stepper__separator" role="presentation" />
364
+ <div class="progress-stepper__item" role="listitem">
365
+ <span class="progress-stepper__icon">
366
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
367
+ <use href="#icon-stepper-upcoming"></use>
368
+ </svg>
369
+ </span>
370
+ <span class="progress-stepper__text">
371
+ <h4>Delivered</h4>
372
+ <p>July 6th</p>
373
+ </span>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ `;
378
+
254
379
  export const vertical = () => `
255
380
  <div class="progress-stepper progress-stepper--vertical">
256
381
  <div class="progress-stepper__items" role="list">
257
382
  <div class="progress-stepper__item" role="listitem">
258
383
  <span class="progress-stepper__icon">
259
384
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
260
- <use xlink:href="#icon-stepper-confirmation"></use>
385
+ <use href="#icon-stepper-confirmation"></use>
261
386
  </svg>
262
387
  </span>
263
388
  <span class="progress-stepper__text">
@@ -267,10 +392,10 @@ export const vertical = () => `
267
392
  </span>
268
393
  </div>
269
394
  <hr class="progress-stepper__separator" role="presentation" />
270
- <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
395
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
271
396
  <span class="progress-stepper__icon">
272
397
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
273
- <use xlink:href="#icon-stepper-current"></use>
398
+ <use href="#icon-stepper-confirmation"></use>
274
399
  </svg>
275
400
  </span>
276
401
  <span class="progress-stepper__text">
@@ -279,9 +404,54 @@ export const vertical = () => `
279
404
  </span>
280
405
  </div>
281
406
  <hr class="progress-stepper__separator" role="presentation" />
282
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
407
+ <div class="progress-stepper__item" role="listitem">
283
408
  <span class="progress-stepper__icon">
284
- <span role="img" aria-label="upcoming"></span>
409
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
410
+ <use href="#icon-stepper-upcoming"></use>
411
+ </svg>
412
+ </span>
413
+ <span class="progress-stepper__text">
414
+ <h3>Delivered</h3>
415
+ <p>Guaranteed Wednesday, October 09.</p>
416
+ </span>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ `;
421
+
422
+ export const verticalUpcoming = () => `
423
+ <div class="progress-stepper progress-stepper--vertical">
424
+ <div class="progress-stepper__items" role="list">
425
+ <div aria-current="current" class="progress-stepper__item" role="listitem">
426
+ <span class="progress-stepper__icon">
427
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
428
+ <use href="#icon-stepper-confirmation"></use>
429
+ </svg>
430
+ </span>
431
+ <span class="progress-stepper__text">
432
+ <h3>Order placed</h3>
433
+ <p>New Mens Addidas Ultra Boost</p>
434
+ <p>Order total $220</p>
435
+ </span>
436
+ </div>
437
+ <hr class="progress-stepper__separator" role="presentation" />
438
+ <div class="progress-stepper__item" role="listitem">
439
+ <span class="progress-stepper__icon">
440
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
441
+ <use href="#icon-stepper-upcoming"></use>
442
+ </svg>
443
+ </span>
444
+ <span class="progress-stepper__text">
445
+ <h3>Preparing for shipment</h3>
446
+ <p>We will notify you once it ships.</p>
447
+ </span>
448
+ </div>
449
+ <hr class="progress-stepper__separator" role="presentation" />
450
+ <div class="progress-stepper__item" role="listitem">
451
+ <span class="progress-stepper__icon">
452
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
453
+ <use href="#icon-stepper-upcoming"></use>
454
+ </svg>
285
455
  </span>
286
456
  <span class="progress-stepper__text">
287
457
  <h3>Delivered</h3>
@@ -298,7 +468,7 @@ export const verticalSingleLine = () => `
298
468
  <div class="progress-stepper__item" role="listitem">
299
469
  <span class="progress-stepper__icon">
300
470
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
301
- <use xlink:href="#icon-stepper-confirmation"></use>
471
+ <use href="#icon-stepper-confirmation"></use>
302
472
  </svg>
303
473
  </span>
304
474
  <span class="progress-stepper__text">
@@ -306,10 +476,10 @@ export const verticalSingleLine = () => `
306
476
  </span>
307
477
  </div>
308
478
  <hr class="progress-stepper__separator" role="presentation" />
309
- <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
479
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
310
480
  <span class="progress-stepper__icon">
311
481
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
312
- <use xlink:href="#icon-stepper-current"></use>
482
+ <use href="#icon-stepper-confirmation"></use>
313
483
  </svg>
314
484
  </span>
315
485
  <span class="progress-stepper__text">
@@ -317,9 +487,11 @@ export const verticalSingleLine = () => `
317
487
  </span>
318
488
  </div>
319
489
  <hr class="progress-stepper__separator" role="presentation" />
320
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
490
+ <div class="progress-stepper__item" role="listitem">
321
491
  <span class="progress-stepper__icon">
322
- <span role="img" aria-label="upcoming"></span>
492
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
493
+ <use href="#icon-stepper-upcoming"></use>
494
+ </svg>
323
495
  </span>
324
496
  <span class="progress-stepper__text">
325
497
  <h3>Delivered</h3>
@@ -336,7 +508,7 @@ export const verticalRTL = () => `
336
508
  <div class="progress-stepper__item" role="listitem">
337
509
  <span class="progress-stepper__icon">
338
510
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
339
- <use xlink:href="#icon-stepper-confirmation"></use>
511
+ <use href="#icon-stepper-confirmation"></use>
340
512
  </svg>
341
513
  </span>
342
514
  <span class="progress-stepper__text">
@@ -346,10 +518,10 @@ export const verticalRTL = () => `
346
518
  </span>
347
519
  </div>
348
520
  <hr class="progress-stepper__separator" role="presentation" />
349
- <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
521
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
350
522
  <span class="progress-stepper__icon">
351
523
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
352
- <use xlink:href="#icon-stepper-current"></use>
524
+ <use href="#icon-stepper-confirmation"></use>
353
525
  </svg>
354
526
  </span>
355
527
  <span class="progress-stepper__text">
@@ -358,9 +530,11 @@ export const verticalRTL = () => `
358
530
  </span>
359
531
  </div>
360
532
  <hr class="progress-stepper__separator" role="presentation" />
361
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
533
+ <div class="progress-stepper__item" role="listitem">
362
534
  <span class="progress-stepper__icon">
363
- <span role="img" aria-label="upcoming"></span>
535
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
536
+ <use href="#icon-stepper-upcoming"></use>
537
+ </svg>
364
538
  </span>
365
539
  <span class="progress-stepper__text">
366
540
  <h3>Delivered</h3>
@@ -372,13 +546,13 @@ export const verticalRTL = () => `
372
546
  </div>
373
547
  `;
374
548
 
375
- export const infoState = () => `
376
- <div class="progress-stepper">
377
- <div class="progress-stepper__items" role="list">
549
+ export const currentBubbleVertical = () => `
550
+ <div class="progress-stepper progress-stepper--vertical">
551
+ <div class="progress-stepper__items progress-stepper__items--current" role="list">
378
552
  <div class="progress-stepper__item" role="listitem">
379
553
  <span class="progress-stepper__icon">
380
554
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
381
- <use xlink:href="#icon-stepper-confirmation"></use>
555
+ <use href="#icon-stepper-confirmation"></use>
382
556
  </svg>
383
557
  </span>
384
558
  <span class="progress-stepper__text">
@@ -387,23 +561,135 @@ export const infoState = () => `
387
561
  </span>
388
562
  </div>
389
563
  <hr class="progress-stepper__separator" role="presentation" />
390
- <div aria-current="step" class="progress-stepper__item progress-stepper__item--information progress-stepper__item--transition-upcoming" role="listitem">
564
+ <div class="progress-stepper__item" role="listitem">
565
+ <span class="progress-stepper__icon">
566
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
567
+ <use href="#icon-stepper-confirmation"></use>
568
+ </svg>
569
+ </span>
570
+ <span class="progress-stepper__text">
571
+ <h4>Shipped</h4>
572
+ <p>July 4th</p>
573
+ </span>
574
+ </div>
575
+ <hr class="progress-stepper__separator" role="presentation" />
576
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
577
+ <span class="progress-stepper__icon">
578
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
579
+ <use href="#icon-stepper-current"></use>
580
+ </svg>
581
+ </span>
582
+ <span class="progress-stepper__text">
583
+ <h4>Transit</h4>
584
+ <p>July 5th</p>
585
+ </span>
586
+ </div>
587
+ <hr class="progress-stepper__separator" role="presentation" />
588
+ <div class="progress-stepper__item" role="listitem">
589
+ <span class="progress-stepper__icon">
590
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
591
+ <use href="#icon-stepper-upcoming"></use>
592
+ </svg>
593
+ </span>
594
+ <span class="progress-stepper__text">
595
+ <h4>Delivered</h4>
596
+ <p>July 6th</p>
597
+ </span>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ `;
602
+
603
+ export const currentBubbleVerticalRTL = () => `
604
+ <div dir="rtl">
605
+ <div class="progress-stepper progress-stepper--vertical">
606
+ <div class="progress-stepper__items progress-stepper__items--current" role="list">
607
+ <div class="progress-stepper__item" role="listitem">
608
+ <span class="progress-stepper__icon">
609
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
610
+ <use href="#icon-stepper-confirmation"></use>
611
+ </svg>
612
+ </span>
613
+ <span class="progress-stepper__text">
614
+ <h4>Started</h4>
615
+ <p>July 3rd</p>
616
+ </span>
617
+ </div>
618
+ <hr class="progress-stepper__separator" role="presentation" />
619
+ <div class="progress-stepper__item" role="listitem">
620
+ <span class="progress-stepper__icon">
621
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
622
+ <use href="#icon-stepper-confirmation"></use>
623
+ </svg>
624
+ </span>
625
+ <span class="progress-stepper__text">
626
+ <h4>Shipped</h4>
627
+ <p>July 4th</p>
628
+ </span>
629
+ </div>
630
+ <hr class="progress-stepper__separator" role="presentation" />
631
+ <div aria-current="step" class="progress-stepper__item" role="listitem">
391
632
  <span class="progress-stepper__icon">
392
633
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
393
- <use xlink:href="#icon-stepper-information"></use>
634
+ <use href="#icon-stepper-current"></use>
394
635
  </svg>
395
636
  </span>
396
637
  <span class="progress-stepper__text">
397
- <h4>On Hold</h4>
638
+ <h4>Transit</h4>
398
639
  <p>July 5th</p>
399
640
  </span>
400
641
  </div>
642
+ <hr class="progress-stepper__separator" role="presentation" />
643
+ <div class="progress-stepper__item" role="listitem">
644
+ <span class="progress-stepper__icon">
645
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
646
+ <use href="#icon-stepper-upcoming"></use>
647
+ </svg>
648
+ </span>
649
+ <span class="progress-stepper__text">
650
+ <h4>Delivered</h4>
651
+ <p>July 6th</p>
652
+ </span>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ `;
658
+
659
+ export const errorState = () => `
660
+ <div class="progress-stepper">
661
+ <div class="progress-stepper__items" role="list">
662
+ <div class="progress-stepper__item" role="listitem">
663
+ <span class="progress-stepper__icon">
664
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
665
+ <use href="#icon-stepper-confirmation"></use>
666
+ </svg>
667
+ </span>
668
+ <span class="progress-stepper__text">
669
+ <h4>Started</h4>
670
+ <p>July 3rd</p>
671
+ </span>
672
+ </div>
401
673
  <hr class="progress-stepper__separator" role="presentation" />
402
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
674
+ <div aria-current="step" class="progress-stepper__item progress-stepper__item--attention" role="listitem">
403
675
  <span class="progress-stepper__icon">
404
- <span role="img" aria-label="upcoming"></span>
676
+ <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
677
+ <use href="#icon-stepper-attention"></use>
678
+ </svg>
405
679
  </span>
406
- <span class="progress-stepper__text">
680
+ <span class="progress-stepper__text">
681
+ <h4>Blocked</h4>
682
+ <p>July 5th</p>
683
+ </span>
684
+ </div>
685
+ <hr class="progress-stepper__separator" role="presentation" />
686
+ <div class="progress-stepper__item" role="listitem">
687
+ <span class="progress-stepper__icon">
688
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
689
+ <use href="#icon-stepper-upcoming"></use>
690
+ </svg>
691
+ </span>
692
+ <span class="progress-stepper__text">
407
693
  <h4>Delivered</h4>
408
694
  <p>July 6th</p>
409
695
  </span>
@@ -411,13 +697,13 @@ export const infoState = () => `
411
697
  </div>
412
698
  </div>`;
413
699
 
414
- export const errorState = () => `
415
- <div class="progress-stepper">
700
+ export const errorStateVertical = () => `
701
+ <div class="progress-stepper progress-stepper--vertical">
416
702
  <div class="progress-stepper__items" role="list">
417
703
  <div class="progress-stepper__item" role="listitem">
418
704
  <span class="progress-stepper__icon">
419
705
  <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
420
- <use xlink:href="#icon-stepper-confirmation"></use>
706
+ <use href="#icon-stepper-confirmation"></use>
421
707
  </svg>
422
708
  </span>
423
709
  <span class="progress-stepper__text">
@@ -426,10 +712,10 @@ export const errorState = () => `
426
712
  </span>
427
713
  </div>
428
714
  <hr class="progress-stepper__separator" role="presentation" />
429
- <div aria-current="step" class="progress-stepper__item progress-stepper__item--attention progress-stepper__item--transition-upcoming" role="listitem">
715
+ <div aria-current="step" class="progress-stepper__item progress-stepper__item--attention" role="listitem">
430
716
  <span class="progress-stepper__icon">
431
717
  <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
432
- <use xlink:href="#icon-stepper-attention"></use>
718
+ <use href="#icon-stepper-attention"></use>
433
719
  </svg>
434
720
  </span>
435
721
  <span class="progress-stepper__text">
@@ -438,9 +724,11 @@ export const errorState = () => `
438
724
  </span>
439
725
  </div>
440
726
  <hr class="progress-stepper__separator" role="presentation" />
441
- <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
727
+ <div class="progress-stepper__item" role="listitem">
442
728
  <span class="progress-stepper__icon">
443
- <span role="img" aria-label="upcoming"></span>
729
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
730
+ <use href="#icon-stepper-upcoming"></use>
731
+ </svg>
444
732
  </span>
445
733
  <span class="progress-stepper__text">
446
734
  <h4>Delivered</h4>
@@ -449,3 +737,111 @@ export const errorState = () => `
449
737
  </div>
450
738
  </div>
451
739
  </div>`;
740
+
741
+ export const allSelectedVertical = () => `
742
+ <div class="progress-stepper progress-stepper--vertical">
743
+ <div class="progress-stepper__items" role="list">
744
+ <div class="progress-stepper__item" role="listitem">
745
+ <span class="progress-stepper__icon">
746
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
747
+ <use href="#icon-stepper-confirmation"></use>
748
+ </svg>
749
+ </span>
750
+ <span class="progress-stepper__text">
751
+ <h4>Started</h4>
752
+ <p>July 3rd</p>
753
+ </span>
754
+ </div>
755
+ <hr class="progress-stepper__separator" role="presentation" />
756
+ <div class="progress-stepper__item" role="listitem">
757
+ <span class="progress-stepper__icon">
758
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
759
+ <use href="#icon-stepper-confirmation"></use>
760
+ </svg>
761
+ </span>
762
+ <span class="progress-stepper__text">
763
+ <h4>Shipped</h4>
764
+ <p>July 4th</p>
765
+ </span>
766
+ </div>
767
+ <hr class="progress-stepper__separator" role="presentation" />
768
+ <div class="progress-stepper__item" role="listitem">
769
+ <span class="progress-stepper__icon">
770
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
771
+ <use href="#icon-stepper-confirmation"></use>
772
+ </svg>
773
+ </span>
774
+ <span class="progress-stepper__text">
775
+ <h4>Transit</h4>
776
+ <p>July 5th</p>
777
+ </span>
778
+ </div>
779
+ <hr class="progress-stepper__separator" role="presentation" />
780
+ <div class="progress-stepper__item" role="listitem">
781
+ <span class="progress-stepper__icon">
782
+ <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
783
+ <use href="#icon-stepper-confirmation"></use>
784
+ </svg>
785
+ </span>
786
+ <span class="progress-stepper__text">
787
+ <h4>Delivered</h4>
788
+ <p>July 6th</p>
789
+ </span>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ `;
794
+
795
+ export const noneSelectedVertical = () => `
796
+ <div class="progress-stepper progress-stepper--vertical">
797
+ <div class="progress-stepper__items progress-stepper__items--upcoming" role="list">
798
+ <div class="progress-stepper__item" role="listitem">
799
+ <span class="progress-stepper__icon">
800
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
801
+ <use href="#icon-stepper-upcoming"></use>
802
+ </svg>
803
+ </span>
804
+ <span class="progress-stepper__text">
805
+ <h4>Started</h4>
806
+ <p>July 3rd</p>
807
+ </span>
808
+ </div>
809
+ <hr class="progress-stepper__separator" role="presentation" />
810
+ <div class="progress-stepper__item" role="listitem">
811
+ <span class="progress-stepper__icon">
812
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
813
+ <use href="#icon-stepper-upcoming"></use>
814
+ </svg>
815
+ </span>
816
+ <span class="progress-stepper__text">
817
+ <h4>Shipped</h4>
818
+ <p>July 4th</p>
819
+ </span>
820
+ </div>
821
+ <hr class="progress-stepper__separator" role="presentation" />
822
+ <div class="progress-stepper__item" role="listitem">
823
+ <span class="progress-stepper__icon">
824
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
825
+ <use href="#icon-stepper-upcoming"></use>
826
+ </svg>
827
+ </span>
828
+ <span class="progress-stepper__text">
829
+ <h4>Transit</h4>
830
+ <p>July 5th</p>
831
+ </span>
832
+ </div>
833
+ <hr class="progress-stepper__separator" role="presentation" />
834
+ <div class="progress-stepper__item" role="listitem">
835
+ <span class="progress-stepper__icon">
836
+ <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
837
+ <use href="#icon-stepper-upcoming"></use>
838
+ </svg>
839
+ </span>
840
+ <span class="progress-stepper__text">
841
+ <h4>Delivered</h4>
842
+ <p>July 6th</p>
843
+ </span>
844
+ </div>
845
+ </div>
846
+ </div>
847
+ `;