@ebay/skin 17.1.0 → 17.2.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 (193) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/chilled-dots-whisper.md +5 -0
  3. package/.changeset/config.json +11 -0
  4. package/.changeset/five-bats-appear.md +5 -0
  5. package/.changeset/gentle-moles-collect.md +5 -0
  6. package/.changeset/healthy-kings-hang.md +5 -0
  7. package/.changeset/pre.json +17 -0
  8. package/.changeset/pretty-rabbits-smash.md +5 -0
  9. package/.changeset/slow-maps-guess.md +5 -0
  10. package/.changeset/stale-lamps-retire.md +5 -0
  11. package/.changeset/unlucky-files-tickle.md +5 -0
  12. package/.github/workflows/jekyll-gh-pages.yml +53 -9
  13. package/CHANGELOG.md +28 -0
  14. package/CONTRIBUTING.md +28 -0
  15. package/_cdn/skin/v17.2.0-next.0/skin-default.min.css +69 -0
  16. package/_cdn/skin/v17.2.0-next.0/skin-full.min.css +151 -0
  17. package/_cdn/skin/v17.2.0-next.0/skin-headless.min.css +6 -0
  18. package/dist/button/button.css +0 -1
  19. package/dist/combobox/combobox.css +5 -7
  20. package/dist/date-textbox/date-textbox.css +1 -1
  21. package/dist/filter-menu/filter-menu.css +2 -2
  22. package/dist/filter-menu-button/filter-menu-button.css +7 -4
  23. package/dist/icon/icon.css +24 -0
  24. package/dist/infotip/infotip.css +3 -3
  25. package/dist/listbox/listbox.css +3 -2
  26. package/dist/listbox-button/listbox-button.css +5 -7
  27. package/dist/menu/menu.css +3 -2
  28. package/dist/menu-button/menu-button.css +5 -9
  29. package/dist/signal/signal.css +4 -3
  30. package/dist/svg/icon/icon-bank-24.svg +4 -2
  31. package/dist/svg/icon/icon-bank-64.svg +4 -2
  32. package/dist/svg/icon/icon-calendar-16.svg +4 -5
  33. package/dist/svg/icon/icon-calendar-24.svg +4 -5
  34. package/dist/svg/icon/icon-calendar-64.svg +4 -5
  35. package/dist/svg/icon/icon-credit-card-16.svg +4 -2
  36. package/dist/svg/icon/icon-credit-card-24.svg +4 -2
  37. package/dist/svg/icon/icon-credit-card-64.svg +4 -2
  38. package/dist/svg/icon/icon-gift-16.svg +2 -2
  39. package/dist/svg/icon/icon-gift-24.svg +4 -2
  40. package/dist/svg/icon/icon-gift-64.svg +4 -2
  41. package/dist/svg/icon/icon-locked-16.svg +4 -2
  42. package/dist/svg/icon/icon-locked-20.svg +7 -0
  43. package/dist/svg/icon/icon-locked-24.svg +4 -2
  44. package/dist/svg/icon/icon-mail-20.svg +7 -0
  45. package/dist/svg/icon/icon-passkey-16.svg +7 -0
  46. package/dist/svg/icon/icon-passkey-24.svg +7 -0
  47. package/dist/svg/icon/icon-passkey-64.svg +7 -0
  48. package/dist/svg/icon/icon-swap-24.svg +7 -0
  49. package/dist/svg/icon/icon-unlocked-16.svg +4 -3
  50. package/dist/svg/icon/icon-unlocked-24.svg +4 -5
  51. package/dist/svg/icon/icon-venmo-12-colored.svg +1 -0
  52. package/dist/svg/icon/icon-venmo-18-colored.svg +1 -0
  53. package/dist/svg/icon/icon-venmo-24-colored.svg +1 -0
  54. package/dist/svg/icon/icon-venmo-32-colored.svg +1 -0
  55. package/dist/svg/icons.svg +103 -42
  56. package/dist/tokens/evo-dark.css +1 -0
  57. package/dist/tokens/evo-light.css +1 -0
  58. package/dist/tooltip/tooltip.css +2 -2
  59. package/dist/tourtip/tourtip.css +2 -6
  60. package/package.json +15 -11
  61. package/scripts/develop-module_proper/code-generators/doc-generator.js +19 -13
  62. package/src/less/breadcrumbs/stories/button-cascade.stories.js +9 -9
  63. package/src/less/breadcrumbs/stories/button-overflow.stories.js +11 -11
  64. package/src/less/breadcrumbs/stories/buttons.stories.js +5 -5
  65. package/src/less/breadcrumbs/stories/link-cascade.stories.js +9 -9
  66. package/src/less/breadcrumbs/stories/link-overflow.stories.js +11 -11
  67. package/src/less/breadcrumbs/stories/links.stories.js +5 -5
  68. package/src/less/button/button.less +0 -1
  69. package/src/less/button/stories/button/base.stories.js +2 -2
  70. package/src/less/button/stories/button/borderless.stories.js +4 -4
  71. package/src/less/button/stories/button/primary.stories.js +1 -1
  72. package/src/less/button/stories/button/secondary.stories.js +1 -1
  73. package/src/less/button/stories/button/tertiary.stories.js +1 -1
  74. package/src/less/button/stories/destructive-button/primary.stories.js +1 -1
  75. package/src/less/button/stories/destructive-button/secondary.stories.js +1 -1
  76. package/src/less/button/stories/destructive-button/tertiary.stories.js +1 -1
  77. package/src/less/carousel/stories/carousel.stories.js +25 -25
  78. package/src/less/checkbox/stories/checked.stories.js +16 -16
  79. package/src/less/checkbox/stories/mixed.stories.js +2 -2
  80. package/src/less/checkbox/stories/unchecked.stories.js +8 -8
  81. package/src/less/chip/stories/interactive-chip.stories.js +17 -17
  82. package/src/less/chips-combobox/stories/chips-combobox.stories.js +34 -34
  83. package/src/less/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  84. package/src/less/combobox/stories/combobox.stories.js +10 -10
  85. package/src/less/cta-button/stories/cascade.stories.js +3 -3
  86. package/src/less/cta-button/stories/cta-button.stories.js +1 -1
  87. package/src/less/cta-button/stories/dimensions.stories.js +2 -2
  88. package/src/less/date-textbox/date-textbox.less +1 -1
  89. package/src/less/details/stories/cascade.stories.js +3 -3
  90. package/src/less/details/stories/details.stories.js +4 -4
  91. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +6 -6
  92. package/src/less/field/stories/stacked.stories.js +12 -12
  93. package/src/less/field/stories/unstacked.stories.js +4 -4
  94. package/src/less/filter-menu/stories/filter-menu.stories.js +30 -30
  95. package/src/less/filter-menu-button/filter-menu-button.less +3 -3
  96. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +83 -83
  97. package/src/less/floating-label/stories/floating-label.stories.js +5 -5
  98. package/src/less/global/stories/global.stories.js +12 -12
  99. package/src/less/icon/generated/icon.less +24 -0
  100. package/src/less/icon-button/stories/alignment.stories.js +6 -6
  101. package/src/less/infotip/infotip.less +3 -3
  102. package/src/less/infotip/stories/infotip.stories.js +10 -10
  103. package/src/less/inline-notice/stories/inline.stories.js +10 -10
  104. package/src/less/listbox/stories/cascade.stories.js +9 -9
  105. package/src/less/listbox/stories/listbox.stories.js +15 -15
  106. package/src/less/listbox-button/stories/base.stories.js +43 -43
  107. package/src/less/listbox-button/stories/cascade.stories.js +15 -15
  108. package/src/less/listbox-button/stories/dimensions.stories.js +5 -5
  109. package/src/less/listbox-button/stories/error/error.base.stories.js +38 -38
  110. package/src/less/listbox-button/stories/error/error.cascade.stories.js +15 -15
  111. package/src/less/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  112. package/src/less/listbox-button/stories/error/error.form.stories.js +10 -10
  113. package/src/less/listbox-button/stories/form.stories.js +15 -15
  114. package/src/less/listbox-button/stories/subtitle.stories.js +38 -38
  115. package/src/less/menu/stories/fake-menu.stories.js +4 -4
  116. package/src/less/menu/stories/multiSelect.stories.js +9 -9
  117. package/src/less/menu-button/stories/base.stories.js +29 -29
  118. package/src/less/menu-button/stories/cascade.stories.js +6 -6
  119. package/src/less/menu-button/stories/dimensions.stories.js +1 -1
  120. package/src/less/menu-button/stories/fake-menu-button.stories.js +6 -6
  121. package/src/less/mixins/private/dropdown-mixins.less +3 -6
  122. package/src/less/mixins/private/filter-menu-mixins.less +1 -1
  123. package/src/less/mixins/private/selection-list-mixins.less +0 -2
  124. package/src/less/page-notice/stories/page-notice.stories.js +12 -12
  125. package/src/less/page-notice/stories/test.stories.js +7 -7
  126. package/src/less/pagination/stories/button-cascade.stories.js +6 -6
  127. package/src/less/pagination/stories/buttons.stories.js +4 -4
  128. package/src/less/pagination/stories/link-cascade.stories.js +6 -6
  129. package/src/less/pagination/stories/links.stories.js +4 -4
  130. package/src/less/pagination/stories/overflow.stories.js +16 -16
  131. package/src/less/progress-spinner/stories/progress-spinner.stories.js +4 -4
  132. package/src/less/progress-stepper/stories/progress-stepper.stories.js +49 -49
  133. package/src/less/radio/stories/checked.stories.js +16 -16
  134. package/src/less/radio/stories/unchecked.stories.js +8 -8
  135. package/src/less/section-notice/stories/icon-16.stories.js +12 -12
  136. package/src/less/section-notice/stories/icon-24.stories.js +20 -20
  137. package/src/less/section-notice/stories/iconless.stories.js +4 -4
  138. package/src/less/section-notice/stories/test.stories.js +4 -4
  139. package/src/less/section-title/stories/rtl.stories.js +3 -3
  140. package/src/less/section-title/stories/section-title.stories.js +3 -3
  141. package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  142. package/src/less/select/stories/cascade.stories.js +3 -3
  143. package/src/less/select/stories/default.stories.js +8 -8
  144. package/src/less/select/stories/floating-label.stories.js +4 -4
  145. package/src/less/signal/signal.less +4 -3
  146. package/src/less/split-button/stories/base.stories.js +12 -12
  147. package/src/less/split-button/stories/rtl.stories.js +6 -6
  148. package/src/less/split-button/stories/size.stories.js +2 -2
  149. package/src/less/star-rating/stories/star-rating.stories.js +15 -15
  150. package/src/less/star-rating-select/stories/star-rating-select.stories.js +10 -10
  151. package/src/less/textbox/stories/icon.stories.js +10 -10
  152. package/src/less/textbox/stories/rtl/icon.stories.js +7 -7
  153. package/src/less/toast-dialog/stories/toast-dialog.stories.js +3 -3
  154. package/src/less/toggle-button/stories/gallery-layout.stories.js +3 -3
  155. package/src/less/toggle-button/stories/list-layout.stories.js +3 -3
  156. package/src/less/tooltip/stories/pointer.stories.js +12 -12
  157. package/src/less/tooltip/stories/tooltip.stories.js +2 -2
  158. package/src/less/tooltip/tooltip.less +2 -2
  159. package/src/less/tourtip/stories/tourtip.stories.js +4 -4
  160. package/src/less/tourtip/tourtip.less +2 -7
  161. package/src/svg/icon/icon-bank-24.svg +4 -2
  162. package/src/svg/icon/icon-bank-64.svg +4 -2
  163. package/src/svg/icon/icon-calendar-16.svg +4 -5
  164. package/src/svg/icon/icon-calendar-24.svg +4 -5
  165. package/src/svg/icon/icon-calendar-64.svg +4 -5
  166. package/src/svg/icon/icon-credit-card-16.svg +4 -2
  167. package/src/svg/icon/icon-credit-card-24.svg +4 -2
  168. package/src/svg/icon/icon-credit-card-64.svg +4 -2
  169. package/src/svg/icon/icon-gift-16.svg +2 -2
  170. package/src/svg/icon/icon-gift-24.svg +4 -2
  171. package/src/svg/icon/icon-gift-64.svg +4 -2
  172. package/src/svg/icon/icon-locked-16.svg +4 -2
  173. package/src/svg/icon/icon-locked-20.svg +7 -0
  174. package/src/svg/icon/icon-locked-24.svg +4 -2
  175. package/src/svg/icon/icon-mail-20.svg +7 -0
  176. package/src/svg/icon/icon-passkey-16.svg +7 -0
  177. package/src/svg/icon/icon-passkey-24.svg +7 -0
  178. package/src/svg/icon/icon-passkey-64.svg +7 -0
  179. package/src/svg/icon/icon-swap-24.svg +7 -0
  180. package/src/svg/icon/icon-unlocked-16.svg +4 -3
  181. package/src/svg/icon/icon-unlocked-24.svg +4 -5
  182. package/src/svg/icon/icon-venmo-12-colored.svg +1 -0
  183. package/src/svg/icon/icon-venmo-18-colored.svg +1 -0
  184. package/src/svg/icon/icon-venmo-24-colored.svg +1 -0
  185. package/src/svg/icon/icon-venmo-32-colored.svg +1 -0
  186. package/src/svg/icons.svg +103 -42
  187. package/src/tokens/evo-dark.css +1 -0
  188. package/src/tokens/evo-light.css +1 -0
  189. package/svg.svg +103 -42
  190. package/.storybook/preview-head.html +0 -68930
  191. package/_cdn/skin/v17.1.0/skin-default.min.css +0 -69
  192. package/_cdn/skin/v17.1.0/skin-full.min.css +0 -151
  193. package/_cdn/skin/v17.1.0/skin-headless.min.css +0 -6
package/src/less/pagination/stories/buttons.stories.js CHANGED
@@ -6,7 +6,7 @@ export const base = () => `
6
6
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
7
7
  </span>
8
8
  <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
9
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
9
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
10
10
  <use href="#icon-arrow-left-16"></use>
11
11
  </svg>
12
12
  </button>
@@ -34,7 +34,7 @@ export const base = () => `
34
34
  </li>
35
35
  </ol>
36
36
  <button aria-label="Next Page" class="icon-btn pagination__next">
37
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
37
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
38
38
  <use href="#icon-arrow-right-16"></use>
39
39
  </svg>
40
40
  </button>
@@ -47,7 +47,7 @@ export const fluid = () => `
47
47
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
48
48
  </span>
49
49
  <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
50
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
50
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
51
51
  <use href="#icon-arrow-left-16"></use>
52
52
  </svg>
53
53
  </button>
@@ -75,7 +75,7 @@ export const fluid = () => `
75
75
  </li>
76
76
  </ol>
77
77
  <button aria-label="Next Page" class="icon-btn pagination__next">
78
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
78
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
79
79
  <use href="#icon-arrow-right-16"></use>
80
80
  </svg>
81
81
  </button>
package/src/less/pagination/stories/link-cascade.stories.js CHANGED
@@ -6,7 +6,7 @@ export const fontSize = () => `
6
6
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
7
7
  </span>
8
8
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
9
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
9
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
10
10
  <use href="#icon-arrow-left-16"></use>
11
11
  </svg>
12
12
  </a>
@@ -34,7 +34,7 @@ export const fontSize = () => `
34
34
  </li>
35
35
  </ol>
36
36
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
37
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
37
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
38
38
  <use href="#icon-arrow-right-16"></use>
39
39
  </svg>
40
40
  </a>
@@ -47,7 +47,7 @@ export const color = () => `
47
47
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
48
48
  </span>
49
49
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
50
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
50
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
51
51
  <use href="#icon-arrow-left-16"></use>
52
52
  </svg>
53
53
  </a>
@@ -75,7 +75,7 @@ export const color = () => `
75
75
  </li>
76
76
  </ol>
77
77
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
78
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
78
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
79
79
  <use href="#icon-arrow-right-16"></use>
80
80
  </svg>
81
81
  </a>
@@ -89,7 +89,7 @@ export const RTL = () => `
89
89
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
90
90
  </span>
91
91
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
92
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
92
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
93
93
  <use href="#icon-arrow-left-16"></use>
94
94
  </svg>
95
95
  </a>
@@ -117,7 +117,7 @@ export const RTL = () => `
117
117
  </li>
118
118
  </ol>
119
119
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
120
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
120
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
121
121
  <use href="#icon-arrow-right-16"></use>
122
122
  </svg>
123
123
  </a>
package/src/less/pagination/stories/links.stories.js CHANGED
@@ -6,7 +6,7 @@ export const base = () => `
6
6
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
7
7
  </span>
8
8
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
9
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
9
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
10
10
  <use href="#icon-arrow-left-16"></use>
11
11
  </svg>
12
12
  </a>
@@ -34,7 +34,7 @@ export const base = () => `
34
34
  </li>
35
35
  </ol>
36
36
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
37
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
37
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
38
38
  <use href="#icon-arrow-right-16"></use>
39
39
  </svg>
40
40
  </a>
@@ -47,7 +47,7 @@ export const fluid = () => `
47
47
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
48
48
  </span>
49
49
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
50
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
50
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
51
51
  <use href="#icon-arrow-left-16"></use>
52
52
  </svg>
53
53
  </a>
@@ -75,7 +75,7 @@ export const fluid = () => `
75
75
  </li>
76
76
  </ol>
77
77
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
78
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
78
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
79
79
  <use href="#icon-arrow-right-16"></use>
80
80
  </svg>
81
81
  </a>
package/src/less/pagination/stories/overflow.stories.js CHANGED
@@ -6,7 +6,7 @@ export const start = () => `
6
6
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
7
7
  </span>
8
8
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
9
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
9
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
10
10
  <use href="#icon-arrow-left-16"></use>
11
11
  </svg>
12
12
  </a>
@@ -16,7 +16,7 @@ export const start = () => `
16
16
  </li>
17
17
  <li>
18
18
  <span class="pagination__item">
19
- <svg class="icon icon--overflow" focusable="false" width="8" height="8" role="separator">
19
+ <svg class="icon icon--overflow" width="8" height="8" role="separator">
20
20
  <use href="#icon-overflow"></use>
21
21
  </svg>
22
22
  </span>
@@ -38,7 +38,7 @@ export const start = () => `
38
38
  </li>
39
39
  </ol>
40
40
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
41
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
41
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
42
42
  <use href="#icon-arrow-right-16"></use>
43
43
  </svg>
44
44
  </a>
@@ -51,7 +51,7 @@ export const middle = () => `
51
51
  <h2 class="clipped" id="pagination-heading-3">Results Pagination - Page 10</h2>
52
52
  </span>
53
53
  <a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
54
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
54
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
55
55
  <use href="#icon-arrow-left-16"></use>
56
56
  </svg>
57
57
  </a>
@@ -61,7 +61,7 @@ export const middle = () => `
61
61
  </li>
62
62
  <li>
63
63
  <span class="pagination__item">
64
- <svg class="icon icon--overflow" focusable="false" width="8" height="8" role="separator">
64
+ <svg class="icon icon--overflow" width="8" height="8" role="separator">
65
65
  <use href="#icon-overflow"></use>
66
66
  </svg>
67
67
  </span>
@@ -77,7 +77,7 @@ export const middle = () => `
77
77
  </li>
78
78
  <li>
79
79
  <span class="pagination__item">
80
- <svg class="icon icon--overflow" focusable="false" width="8" height="8" role="separator">
80
+ <svg class="icon icon--overflow" width="8" height="8" role="separator">
81
81
  <use href="#icon-overflow"></use>
82
82
  </svg>
83
83
  </span>
@@ -87,7 +87,7 @@ export const middle = () => `
87
87
  </li>
88
88
  </ol>
89
89
  <a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
90
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
90
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
91
91
  <use href="#icon-arrow-right-16"></use>
92
92
  </svg>
93
93
  </a>
@@ -100,7 +100,7 @@ export const end = () => `
100
100
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
101
101
  </span>
102
102
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
103
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
103
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
104
104
  <use href="#icon-arrow-left-16"></use>
105
105
  </svg>
106
106
  </a>
@@ -122,7 +122,7 @@ export const end = () => `
122
122
  </li>
123
123
  <li>
124
124
  <span class="pagination__item">
125
- <svg class="icon icon--overflow" focusable="false" width="8" height="8" role="separator">
125
+ <svg class="icon icon--overflow" width="8" height="8" role="separator">
126
126
  <use href="#icon-overflow"></use>
127
127
  </svg>
128
128
  </span>
@@ -132,7 +132,7 @@ export const end = () => `
132
132
  </li>
133
133
  </ol>
134
134
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
135
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
135
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
136
136
  <use href="#icon-arrow-right-16"></use>
137
137
  </svg>
138
138
  </a>
@@ -145,7 +145,7 @@ export const endMenuCollapsed = () => `
145
145
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
146
146
  </span>
147
147
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
148
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
148
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
149
149
  <use href="#icon-arrow-left-16"></use>
150
150
  </svg>
151
151
  </a>
@@ -169,7 +169,7 @@ export const endMenuCollapsed = () => `
169
169
  <span class="pagination__item">
170
170
  <span class="fake-menu-button">
171
171
  <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-label="Menu">
172
- <svg class="icon icon--overflow" focusable="false" width="8" height="8" aria-hidden="true">
172
+ <svg class="icon icon--overflow" width="8" height="8" aria-hidden="true">
173
173
  <use href="#icon-overflow"></use>
174
174
  </svg>
175
175
  </button>
@@ -203,7 +203,7 @@ export const endMenuCollapsed = () => `
203
203
  </li>
204
204
  </ol>
205
205
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
206
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
206
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
207
207
  <use href="#icon-arrow-right-16"></use>
208
208
  </svg>
209
209
  </a>
@@ -216,7 +216,7 @@ export const endMenuExpanded = () => `
216
216
  <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
217
217
  </span>
218
218
  <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
219
- <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
219
+ <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
220
220
  <use href="#icon-arrow-left-16"></use>
221
221
  </svg>
222
222
  </a>
@@ -240,7 +240,7 @@ export const endMenuExpanded = () => `
240
240
  <span class="pagination__item">
241
241
  <span class="fake-menu-button">
242
242
  <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-expanded="true" aria-label="Menu">
243
- <svg class="icon icon--overflow" focusable="false" width="8" height="8" aria-hidden="true">
243
+ <svg class="icon icon--overflow" width="8" height="8" aria-hidden="true">
244
244
  <use href="#icon-overflow"></use>
245
245
  </svg>
246
246
  </button>
@@ -274,7 +274,7 @@ export const endMenuExpanded = () => `
274
274
  </li>
275
275
  </ol>
276
276
  <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
277
- <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
277
+ <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
278
278
  <use href="#icon-arrow-right-16"></use>
279
279
  </svg>
280
280
  </a>
package/src/less/progress-spinner/stories/progress-spinner.stories.js CHANGED
@@ -2,28 +2,28 @@ export default { title: "Skin/Progress Spinner" };
2
2
 
3
3
  export const base = () =>
4
4
  `<span class="progress-spinner" aria-label="Busy animation" role="img">
5
- <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
5
+ <svg class="icon icon--spinner-24" aria-hidden="true">
6
6
  <use href="#icon-spinner-24"></use>
7
7
  </svg>
8
8
  </span>`;
9
9
 
10
10
  export const RTL = () =>
11
11
  `<div dir="rtl"><span class="progress-spinner" aria-label="Busy animation" role="img">
12
- <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
12
+ <svg class="icon icon--spinner-24" aria-hidden="true">
13
13
  <use href="#icon-spinner-24"></use>
14
14
  </svg>
15
15
  </span></div>`;
16
16
 
17
17
  export const large = () =>
18
18
  `<span class="progress-spinner progress-spinner--large" aria-label="Busy" role="img">
19
- <svg class="icon icon--spinner-30" focusable="false" aria-hidden="true">
19
+ <svg class="icon icon--spinner-30" aria-hidden="true">
20
20
  <use href="#icon-spinner-30"></use>
21
21
  </svg>
22
22
  </span>`;
23
23
 
24
24
  export const small = () =>
25
25
  `<span class="progress-spinner progress-spinner--small" aria-label="Busy" role="img">
26
- <svg class="icon icon--spinner-20" focusable="false" aria-hidden="true">
26
+ <svg class="icon icon--spinner-20" aria-hidden="true">
27
27
  <use href="#icon-spinner-20"></use>
28
28
  </svg>
29
29
  </span>`;