@ebay/skin 15.3.0-0 → 15.4.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 (94) hide show
  1. package/_cdn/skin/v15.4.0-0/skin-default.min.css +6 -0
  2. package/_cdn/skin/v15.4.0-0/skin-full.min.css +6 -0
  3. package/_cdn/skin/v15.4.0-0/skin-headless.min.css +6 -0
  4. package/_cdn/skin/v15.4.0-0/skin-legacy.min.css +6 -0
  5. package/dist/filter-menu-button/filter-menu-button.css +3 -0
  6. package/dist/global/global.css +5 -1
  7. package/dist/legacy-tokens/ds4-light.css +2 -2
  8. package/dist/link/link.css +14 -3
  9. package/dist/listbox-button/listbox-button.css +12 -0
  10. package/dist/page-notice/page-notice.css +3 -4
  11. package/dist/section-notice/section-notice.css +2 -2
  12. package/dist/tokens/evo-light.css +2 -2
  13. package/package.json +2 -2
  14. package/src/less/breadcrumbs/stories/button-cascade.stories.js +9 -9
  15. package/src/less/breadcrumbs/stories/buttons.stories.js +5 -5
  16. package/src/less/breadcrumbs/stories/link-cascade.stories.js +9 -9
  17. package/src/less/breadcrumbs/stories/links.stories.js +5 -5
  18. package/src/less/button/stories/button/base.stories.js +5 -5
  19. package/src/less/button/stories/button/borderless.stories.js +4 -4
  20. package/src/less/button/stories/button/cascade.stories.js +3 -3
  21. package/src/less/button/stories/button/dimensions.stories.js +1 -1
  22. package/src/less/button/stories/button/primary.stories.js +4 -4
  23. package/src/less/button/stories/button/secondary.stories.js +4 -4
  24. package/src/less/button/stories/button/tertiary.stories.js +4 -4
  25. package/src/less/button/stories/destructive-button/primary.stories.js +3 -3
  26. package/src/less/button/stories/destructive-button/secondary.stories.js +3 -3
  27. package/src/less/button/stories/destructive-button/tertiary.stories.js +3 -3
  28. package/src/less/button/stories/fake-button/base.stories.js +2 -2
  29. package/src/less/button/stories/fake-button/cascade.stories.js +3 -3
  30. package/src/less/button/stories/fake-button/dimensions.stories.js +1 -1
  31. package/src/less/button/stories/fake-button/primary.stories.js +4 -4
  32. package/src/less/button/stories/fake-button/secondary.stories.js +4 -4
  33. package/src/less/carousel/stories/carousel.stories.js +16 -16
  34. package/src/less/checkbox/stories/checked.stories.js +16 -16
  35. package/src/less/checkbox/stories/mixed.stories.js +2 -2
  36. package/src/less/checkbox/stories/unchecked.stories.js +8 -8
  37. package/src/less/combobox/stories/combobox.stories.js +10 -10
  38. package/src/less/cta-button/stories/cascade.stories.js +3 -3
  39. package/src/less/cta-button/stories/cta-button.stories.js +1 -1
  40. package/src/less/cta-button/stories/dimensions.stories.js +2 -2
  41. package/src/less/details/stories/cascade.stories.js +3 -3
  42. package/src/less/details/stories/details.stories.js +4 -4
  43. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +6 -6
  44. package/src/less/field/stories/stacked.stories.js +5 -5
  45. package/src/less/field/stories/unstacked.stories.js +4 -4
  46. package/src/less/filter-menu/stories/filter-menu.stories.js +30 -30
  47. package/src/less/filter-menu-button/filter-menu-button.less +3 -0
  48. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +83 -83
  49. package/src/less/floating-label/stories/floating-label.stories.js +5 -5
  50. package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +4 -4
  51. package/src/less/global/global.less +6 -1
  52. package/src/less/global/stories/global.stories.js +12 -12
  53. package/src/less/icon/stories/icon.stories.js +5 -5
  54. package/src/less/icon-button/stories/alignment.stories.js +6 -6
  55. package/src/less/infotip/stories/infotip.stories.js +8 -8
  56. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +4 -4
  57. package/src/less/link/link.less +15 -3
  58. package/src/less/listbox/stories/cascade.stories.js +9 -9
  59. package/src/less/listbox/stories/listbox.stories.js +9 -9
  60. package/src/less/listbox-button/listbox-button.less +15 -0
  61. package/src/less/listbox-button/stories/form.stories.js +97 -0
  62. package/src/less/menu/stories/fake-menu.stories.js +4 -4
  63. package/src/less/menu/stories/multiSelect.stories.js +9 -9
  64. package/src/less/menu-button/stories/base.stories.js +29 -29
  65. package/src/less/menu-button/stories/cascade.stories.js +6 -6
  66. package/src/less/menu-button/stories/dimensions.stories.js +1 -1
  67. package/src/less/menu-button/stories/fake-menu-button.stories.js +6 -6
  68. package/src/less/page-notice/page-notice.less +3 -4
  69. package/src/less/pagination/stories/button-cascade.stories.js +6 -6
  70. package/src/less/pagination/stories/buttons.stories.js +4 -4
  71. package/src/less/pagination/stories/link-cascade.stories.js +6 -6
  72. package/src/less/pagination/stories/links.stories.js +4 -4
  73. package/src/less/pagination/stories/overflow.stories.js +16 -16
  74. package/src/less/panel-dialog/stories/panel-dialog.stories.js +6 -6
  75. package/src/less/progress-spinner/stories/progress-spinner.stories.js +4 -4
  76. package/src/less/radio/stories/checked.stories.js +16 -16
  77. package/src/less/radio/stories/unchecked.stories.js +8 -8
  78. package/src/less/section-notice/section-notice.less +2 -2
  79. package/src/less/select/stories/cascade.stories.js +3 -3
  80. package/src/less/select/stories/default.stories.js +8 -8
  81. package/src/less/select/stories/floating-label.stories.js +4 -4
  82. package/src/less/split-button/stories/base.stories.js +12 -12
  83. package/src/less/split-button/stories/rtl.stories.js +6 -6
  84. package/src/less/split-button/stories/size.stories.js +2 -2
  85. package/src/less/textbox/stories/icon.stories.js +10 -10
  86. package/src/less/textbox/stories/rtl/icon.stories.js +7 -7
  87. package/src/less/tooltip/stories/pointer.stories.js +12 -12
  88. package/src/less/tooltip/stories/tooltip.stories.js +2 -2
  89. package/src/less/tourtip/stories/tourtip.stories.js +4 -4
  90. package/src/tokens/evo-light.css +2 -2
  91. package/_cdn/skin/v15.3.0-0/skin-default.min.css +0 -6
  92. package/_cdn/skin/v15.3.0-0/skin-full.min.css +0 -6
  93. package/_cdn/skin/v15.3.0-0/skin-headless.min.css +0 -6
  94. package/_cdn/skin/v15.3.0-0/skin-legacy.min.css +0 -6
package/src/less/button/stories/fake-button/primary.stories.js CHANGED
@@ -6,7 +6,7 @@ export const textOnly = () =>
6
6
  export const iconOnly = () => `
7
7
  <a class="fake-btn fake-btn--primary" href="http://www.ebay.com">
8
8
  <span class="fake-btn__cell">
9
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
9
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
10
10
  </span>
11
11
  </a>
12
12
  `;
@@ -14,7 +14,7 @@ export const iconOnly = () => `
14
14
  export const iconAndText = () => `
15
15
  <a class="fake-btn fake-btn--primary" href="http://www.ebay.com">
16
16
  <span class="fake-btn__cell">
17
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
17
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
18
18
  <span>Fake Button</span>
19
19
  </span>
20
20
  </a>
@@ -23,7 +23,7 @@ export const iconAndText = () => `
23
23
  export const disabled = () => `
24
24
  <a class="fake-btn fake-btn--primary">
25
25
  <span class="fake-btn__cell">
26
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
26
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
27
27
  <span>Fake Button</span>
28
28
  </span>
29
29
  </a>
@@ -32,7 +32,7 @@ export const disabled = () => `
32
32
  export const partiallyDisabled = () => `
33
33
  <a class="fake-btn fake-btn--primary" href="http://www.ebay.com" aria-disabled="true">
34
34
  <span class="fake-btn__cell">
35
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
35
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
36
36
  <span>Fake Button</span>
37
37
  </span>
38
38
  </a>
package/src/less/button/stories/fake-button/secondary.stories.js CHANGED
@@ -6,7 +6,7 @@ export const textOnly = () =>
6
6
  export const iconOnly = () => `
7
7
  <a class="fake-btn fake-btn--secondary" href="http://www.ebay.com">
8
8
  <span class="fake-btn__cell">
9
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
9
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
10
10
  </span>
11
11
  </a>
12
12
  `;
@@ -14,7 +14,7 @@ export const iconOnly = () => `
14
14
  export const iconAndText = () => `
15
15
  <a class="fake-btn fake-btn--secondary" href="http://www.ebay.com">
16
16
  <span class="fake-btn__cell">
17
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
17
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
18
18
  <span>Fake Button</span>
19
19
  </span>
20
20
  </a>
@@ -23,7 +23,7 @@ export const iconAndText = () => `
23
23
  export const disabled = () => `
24
24
  <a class="fake-btn fake-btn--secondary">
25
25
  <span class="fake-btn__cell">
26
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
26
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
27
27
  <span>Fake Button</span>
28
28
  </span>
29
29
  </a>
@@ -32,7 +32,7 @@ export const disabled = () => `
32
32
  export const partiallyDisabled = () => `
33
33
  <a class="fake-btn fake-btn--secondary" href="http://www.ebay.com" aria-disabled="true">
34
34
  <span class="fake-btn__cell">
35
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
35
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
36
36
  <span>Fake Button</span>
37
37
  </span>
38
38
  </a>
package/src/less/carousel/stories/carousel.stories.js CHANGED
@@ -5,7 +5,7 @@ export const continuous = () => `
5
5
  <div class="carousel__container">
6
6
  <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
7
7
  <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
8
- <use xlink:href="#icon-carousel-prev"></use>
8
+ <use href="#icon-carousel-prev"></use>
9
9
  </svg>
10
10
  </button>
11
11
  <div class="carousel__viewport carousel__viewport--mask">
@@ -22,7 +22,7 @@ export const continuous = () => `
22
22
  </div>
23
23
  <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
24
24
  <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
25
- <use xlink:href="#icon-carousel-next"></use>
25
+ <use href="#icon-carousel-next"></use>
26
26
  </svg>
27
27
  </button>
28
28
  </div>
@@ -34,7 +34,7 @@ export const imageTreatment = () => `
34
34
  <div class="carousel__container">
35
35
  <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
36
36
  <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
37
- <use xlink:href="#icon-carousel-prev"></use>
37
+ <use href="#icon-carousel-prev"></use>
38
38
  </svg>
39
39
  </button>
40
40
  <div class="carousel__viewport carousel__viewport--mask">
@@ -51,7 +51,7 @@ export const imageTreatment = () => `
51
51
  </div>
52
52
  <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
53
53
  <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
54
- <use xlink:href="#icon-carousel-next"></use>
54
+ <use href="#icon-carousel-next"></use>
55
55
  </svg>
56
56
  </button>
57
57
  </div>
@@ -63,7 +63,7 @@ export const imageTreatmentLarge = () => `
63
63
  <div class="carousel__container">
64
64
  <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
65
65
  <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
66
- <use xlink:href="#icon-carousel-prev"></use>
66
+ <use href="#icon-carousel-prev"></use>
67
67
  </svg>
68
68
  </button>
69
69
  <div class="carousel__viewport carousel__viewport--mask">
@@ -80,7 +80,7 @@ export const imageTreatmentLarge = () => `
80
80
  </div>
81
81
  <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
82
82
  <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
83
- <use xlink:href="#icon-carousel-next"></use>
83
+ <use href="#icon-carousel-next"></use>
84
84
  </svg>
85
85
  </button>
86
86
  </div>
@@ -95,7 +95,7 @@ export const slides = () => `
95
95
  </h4>
96
96
  <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
97
97
  <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false" >
98
- <use xlink:href="#icon-carousel-prev"></use>
98
+ <use href="#icon-carousel-prev"></use>
99
99
  </svg>
100
100
  </button>
101
101
  <div class="carousel__viewport">
@@ -112,7 +112,7 @@ export const slides = () => `
112
112
  </div>
113
113
  <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
114
114
  <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
115
- <use xlink:href="#icon-carousel-next"></use>
115
+ <use href="#icon-carousel-next"></use>
116
116
  </svg>
117
117
  </button>
118
118
  </div>
@@ -127,7 +127,7 @@ export const slideshow = () => `
127
127
  </h4>
128
128
  <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
129
129
  <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false" >
130
- <use xlink:href="#icon-carousel-prev"></use>
130
+ <use href="#icon-carousel-prev"></use>
131
131
  </svg>
132
132
  </button>
133
133
  <div class="carousel__viewport">
@@ -140,13 +140,13 @@ export const slideshow = () => `
140
140
  </div>
141
141
  <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
142
142
  <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
143
- <use xlink:href="#icon-carousel-next"></use>
143
+ <use href="#icon-carousel-next"></use>
144
144
  </svg>
145
145
  </button>
146
146
  </div>
147
147
  <button class="carousel__playback" aria-label="Play - Top Products">
148
148
  <svg class="icon icon--play" focusable="false" aria-hidden="true">
149
- <use xlink:href="#icon-play"></use>
149
+ <use href="#icon-play"></use>
150
150
  </svg>
151
151
  </button>
152
152
  </div>
@@ -161,7 +161,7 @@ export const RTL = () => `
161
161
  </h4>
162
162
  <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
163
163
  <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
164
- <use xlink:href="#icon-carousel-prev"></use>
164
+ <use href="#icon-carousel-prev"></use>
165
165
  </svg>
166
166
  </button>
167
167
  <div class="carousel__viewport">
@@ -174,13 +174,13 @@ export const RTL = () => `
174
174
  </div>
175
175
  <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
176
176
  <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false" >
177
- <use xlink:href="#icon-carousel-next"></use>
177
+ <use href="#icon-carousel-next"></use>
178
178
  </svg>
179
179
  </button>
180
180
  </div>
181
181
  <button class="carousel__playback" aria-label="Play - Top Products">
182
182
  <svg class="icon icon--play" focusable="false" aria-hidden="true">
183
- <use xlink:href="#icon-play"></use>
183
+ <use href="#icon-play"></use>
184
184
  </svg>
185
185
  </button>
186
186
  </div>
@@ -192,7 +192,7 @@ export const hiddenScrollbar = () => `
192
192
  <div class="carousel__container">
193
193
  <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
194
194
  <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false">
195
- <use xlink:href="#icon-carousel-prev"></use>
195
+ <use href="#icon-carousel-prev"></use>
196
196
  </svg>
197
197
  </button>
198
198
  <div class="carousel__viewport carousel__viewport--mask">
@@ -209,7 +209,7 @@ export const hiddenScrollbar = () => `
209
209
  </div>
210
210
  <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
211
211
  <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
212
- <use xlink:href="#icon-carousel-next"></use>
212
+ <use href="#icon-carousel-next"></use>
213
213
  </svg>
214
214
  </button>
215
215
  </div>
package/src/less/checkbox/stories/checked.stories.js CHANGED
@@ -5,10 +5,10 @@ export const base = () => `
5
5
  <input aria-label="Base checkbox" class="checkbox__control" type="checkbox" checked />
6
6
  <span class="checkbox__icon" hidden>
7
7
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
8
- <use xlink:href="#icon-checkbox-unchecked"></use>
8
+ <use href="#icon-checkbox-unchecked"></use>
9
9
  </svg>
10
10
  <svg aria-hidden="true" class="checkbox__checked" focusable="false">
11
- <use xlink:href="#icon-checkbox-checked"></use>
11
+ <use href="#icon-checkbox-checked"></use>
12
12
  </svg>
13
13
  </span>
14
14
  </span>
@@ -19,10 +19,10 @@ export const disabled = () => `
19
19
  <input aria-label="Disabled checkbox" class="checkbox__control" disabled checked type="checkbox" />
20
20
  <span class="checkbox__icon" hidden>
21
21
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
22
- <use xlink:href="#icon-checkbox-unchecked"></use>
22
+ <use href="#icon-checkbox-unchecked"></use>
23
23
  </svg>
24
24
  <svg aria-hidden="true" class="checkbox__checked" focusable="false">
25
- <use xlink:href="#icon-checkbox-checked"></use>
25
+ <use href="#icon-checkbox-checked"></use>
26
26
  </svg>
27
27
  </span>
28
28
  </span>
@@ -33,10 +33,10 @@ export const customColour = () => `
33
33
  <input aria-label="Custom colour checkbox" class="checkbox__control" type="checkbox" checked />
34
34
  <span class="checkbox__icon" hidden>
35
35
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
36
- <use xlink:href="#icon-checkbox-unchecked"></use>
36
+ <use href="#icon-checkbox-unchecked"></use>
37
37
  </svg>
38
38
  <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
39
- <use xlink:href="#icon-checkbox-checked"></use>
39
+ <use href="#icon-checkbox-checked"></use>
40
40
  </svg>
41
41
  </span>
42
42
  </span>
@@ -48,10 +48,10 @@ export const RTL = () => `
48
48
  <input aria-label="RTL checkbox" class="checkbox__control" type="checkbox" checked />
49
49
  <span class="checkbox__icon" hidden>
50
50
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
51
- <use xlink:href="#icon-checkbox-unchecked"></use>
51
+ <use href="#icon-checkbox-unchecked"></use>
52
52
  </svg>
53
53
  <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
54
- <use xlink:href="#icon-checkbox-checked"></use>
54
+ <use href="#icon-checkbox-checked"></use>
55
55
  </svg>
56
56
  </span>
57
57
  </span>
@@ -63,10 +63,10 @@ export const customIcon = () => `
63
63
  <input aria-label="Custom icon checkbox" class="checkbox__control" type="checkbox" checked />
64
64
  <span class="checkbox__icon" hidden>
65
65
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
66
- <use xlink:href="#icon-attention"></use>
66
+ <use href="#icon-attention"></use>
67
67
  </svg>
68
68
  <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
69
- <use xlink:href="#icon-confirmation"></use>
69
+ <use href="#icon-confirmation"></use>
70
70
  </svg>
71
71
  </span>
72
72
  </span>
@@ -79,10 +79,10 @@ export const multiLineLabel = () => `
79
79
  <input aria-label="Multiline checkbox 1" class="checkbox__control" id="group-checkbox-1" type="checkbox" value="1" name="checkbox-group" checked />
80
80
  <span class="checkbox__icon" hidden>
81
81
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
82
- <use xlink:href="#icon-checkbox-unchecked"></use>
82
+ <use href="#icon-checkbox-unchecked"></use>
83
83
  </svg>
84
84
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
85
- <use xlink:href="#icon-checkbox-checked"></use>
85
+ <use href="#icon-checkbox-checked"></use>
86
86
  </svg>
87
87
  </span>
88
88
  </span>
@@ -93,10 +93,10 @@ export const multiLineLabel = () => `
93
93
  <input aria-label="Multiline checkbox 2" class="checkbox__control" id="group-checkbox-2" type="checkbox" value="2" name="checkbox-group" />
94
94
  <span class="checkbox__icon" hidden>
95
95
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
96
- <use xlink:href="#icon-checkbox-unchecked"></use>
96
+ <use href="#icon-checkbox-unchecked"></use>
97
97
  </svg>
98
98
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
99
- <use xlink:href="#icon-checkbox-checked"></use>
99
+ <use href="#icon-checkbox-checked"></use>
100
100
  </svg>
101
101
  </span>
102
102
  </span>
@@ -107,10 +107,10 @@ export const multiLineLabel = () => `
107
107
  <input aria-label="Multiline checkbox 3" class="checkbox__control" id="group-checkbox-3" type="checkbox" value="3" name="checkbox-group" />
108
108
  <span class="checkbox__icon" hidden>
109
109
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
110
- <use xlink:href="#icon-checkbox-unchecked"></use>
110
+ <use href="#icon-checkbox-unchecked"></use>
111
111
  </svg>
112
112
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
113
- <use xlink:href="#icon-checkbox-checked"></use>
113
+ <use href="#icon-checkbox-checked"></use>
114
114
  </svg>
115
115
  </span>
116
116
  </span>
package/src/less/checkbox/stories/mixed.stories.js CHANGED
@@ -5,10 +5,10 @@ export const base = () => `
5
5
  <input aria-checked="mixed" aria-label="Mixed checkbox" class="checkbox__control" type="checkbox" checked />
6
6
  <span class="checkbox__icon" hidden>
7
7
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
8
- <use xlink:href="#icon-checkbox-unchecked"></use>
8
+ <use href="#icon-checkbox-unchecked"></use>
9
9
  </svg>
10
10
  <svg aria-hidden="true" class="checkbox__checked" focusable="false">
11
- <use xlink:href="#icon-checkbox-mixed"></use>
11
+ <use href="#icon-checkbox-mixed"></use>
12
12
  </svg>
13
13
  </span>
14
14
  </span>
package/src/less/checkbox/stories/unchecked.stories.js CHANGED
@@ -5,10 +5,10 @@ export const base = () => `
5
5
  <input aria-label="Base checkbox" class="checkbox__control" type="checkbox" />
6
6
  <span class="checkbox__icon" hidden>
7
7
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
8
- <use xlink:href="#icon-checkbox-unchecked"></use>
8
+ <use href="#icon-checkbox-unchecked"></use>
9
9
  </svg>
10
10
  <svg aria-hidden="true" class="checkbox__checked" focusable="false">
11
- <use xlink:href="#icon-checkbox-checked"></use>
11
+ <use href="#icon-checkbox-checked"></use>
12
12
  </svg>
13
13
  </span>
14
14
  </span>
@@ -19,10 +19,10 @@ export const disabled = () => `
19
19
  <input aria-label="Disabled checkbox" class="checkbox__control" disabled type="checkbox" />
20
20
  <span class="checkbox__icon" hidden>
21
21
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
22
- <use xlink:href="#icon-checkbox-unchecked"></use>
22
+ <use href="#icon-checkbox-unchecked"></use>
23
23
  </svg>
24
24
  <svg aria-hidden="true" class="checkbox__checked" focusable="false">
25
- <use xlink:href="#icon-checkbox-checked"></use>
25
+ <use href="#icon-checkbox-checked"></use>
26
26
  </svg>
27
27
  </span>
28
28
  </span>
@@ -33,10 +33,10 @@ export const customColour = () => `
33
33
  <input aria-label="Custom colour checkbox" class="checkbox__control" type="checkbox" />
34
34
  <span class="checkbox__icon" hidden>
35
35
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
36
- <use xlink:href="#icon-checkbox-unchecked"></use>
36
+ <use href="#icon-checkbox-unchecked"></use>
37
37
  </svg>
38
38
  <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
39
- <use xlink:href="#icon-checkbox-checked"></use>
39
+ <use href="#icon-checkbox-checked"></use>
40
40
  </svg>
41
41
  </span>
42
42
  </span>
@@ -47,10 +47,10 @@ export const customIcon = () => `
47
47
  <input aria-label="Custom icon checkbox" class="checkbox__control" type="checkbox" />
48
48
  <span class="checkbox__icon" hidden>
49
49
  <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
50
- <use xlink:href="#icon-attention"></use>
50
+ <use href="#icon-attention"></use>
51
51
  </svg>
52
52
  <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
53
- <use xlink:href="#icon-confirmation"></use>
53
+ <use href="#icon-confirmation"></use>
54
54
  </svg>
55
55
  </span>
56
56
  </span>
package/src/less/combobox/stories/combobox.stories.js CHANGED
@@ -5,7 +5,7 @@ export const collapsed = () => `
5
5
  <span class="combobox__control">
6
6
  <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
7
7
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
8
- <use xlink:href="#icon-dropdown"></use>
8
+ <use href="#icon-dropdown"></use>
9
9
  </svg>
10
10
  </span>
11
11
  <div class="combobox__listbox">
@@ -26,7 +26,7 @@ export const expanded = () => `
26
26
  <span class="combobox__control">
27
27
  <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
28
28
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
29
- <use xlink:href="#icon-dropdown"></use>
29
+ <use href="#icon-dropdown"></use>
30
30
  </svg>
31
31
  </span>
32
32
  <div class="combobox__listbox">
@@ -47,7 +47,7 @@ export const disabled = () => `
47
47
  <span class="combobox__control">
48
48
  <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" disabled />
49
49
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
50
- <use xlink:href="#icon-dropdown"></use>
50
+ <use href="#icon-dropdown"></use>
51
51
  </svg>
52
52
  </span>
53
53
  <div class="combobox__listbox">
@@ -68,7 +68,7 @@ export const large = () => `
68
68
  <span class="combobox__control">
69
69
  <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
70
70
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
71
- <use xlink:href="#icon-dropdown"></use>
71
+ <use href="#icon-dropdown"></use>
72
72
  </svg>
73
73
  </span>
74
74
  <div class="combobox__listbox">
@@ -89,7 +89,7 @@ export const longOptions = () => `
89
89
  <span class="combobox__control">
90
90
  <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
91
91
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
92
- <use xlink:href="#icon-dropdown"></use>
92
+ <use href="#icon-dropdown"></use>
93
93
  </svg>
94
94
  </span>
95
95
  <div class="combobox__listbox">
@@ -111,7 +111,7 @@ export const actionable = () => `
111
111
  <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox1" />
112
112
  <button class="icon-btn icon-btn--actionable" type="button" aria-label="Expand Suggestions">
113
113
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
114
- <use xlink:href="#icon-dropdown"></use>
114
+ <use href="#icon-dropdown"></use>
115
115
  </svg>
116
116
  </button>
117
117
  </span>
@@ -137,7 +137,7 @@ export const RTL = () => `
137
137
  <span class="combobox__control">
138
138
  <input class="pink-placeholder-text" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
139
139
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
140
- <use xlink:href="#icon-dropdown"></use>
140
+ <use href="#icon-dropdown"></use>
141
141
  </svg>
142
142
  </span>
143
143
  <div class="combobox__listbox">
@@ -161,7 +161,7 @@ export const actionableRTL = () => `
161
161
  <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox5" />
162
162
  <button class="icon-btn" type="button" aria-label="Expand Suggestions">
163
163
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
164
- <use xlink:href="#icon-dropdown"></use>
164
+ <use href="#icon-dropdown"></use>
165
165
  </svg>
166
166
  </button>
167
167
  </span>
@@ -188,7 +188,7 @@ export const inheritColour = () => `
188
188
  <span class="combobox__control">
189
189
  <input class="pink-placeholder-text" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
190
190
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
191
- <use xlink:href="#icon-dropdown"></use>
191
+ <use href="#icon-dropdown"></use>
192
192
  </svg>
193
193
  </span>
194
194
  <div class="combobox__listbox">
@@ -211,7 +211,7 @@ export const inheritFontSize = () => `
211
211
  <span class="combobox__control">
212
212
  <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
213
213
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
214
- <use xlink:href="#icon-dropdown"></use>
214
+ <use href="#icon-dropdown"></use>
215
215
  </svg>
216
216
  </span>
217
217
  <div class="combobox__listbox">
package/src/less/cta-button/stories/cascade.stories.js CHANGED
@@ -5,7 +5,7 @@ export const color = () => `
5
5
  <span class="cta-btn__cell">
6
6
  <span>Link</span>
7
7
  <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
8
- <use xlink:href="#icon-cta"></use>
8
+ <use href="#icon-cta"></use>
9
9
  </svg>
10
10
  </span>
11
11
  </a>
@@ -17,7 +17,7 @@ export const RTL = () => `
17
17
  <span class="cta-btn__cell">
18
18
  <span style="margin-right: 2px;">Link</span>
19
19
  <svg style="margin-right: 5px; margin-left: 2px;" class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
20
- <use xlink:href="#icon-cta"></use>
20
+ <use href="#icon-cta"></use>
21
21
  </svg>
22
22
  </span>
23
23
  </a>
@@ -29,7 +29,7 @@ export const fontSize = () => `
29
29
  <span class="cta-btn__cell">
30
30
  <span>Link</span>
31
31
  <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
32
- <use xlink:href="#icon-cta"></use>
32
+ <use href="#icon-cta"></use>
33
33
  </svg>
34
34
  </span>
35
35
  </a>
package/src/less/cta-button/stories/cta-button.stories.js CHANGED
@@ -5,7 +5,7 @@ export const base = () => `
5
5
  <span class="cta-btn__cell">
6
6
  <span>Link</span>
7
7
  <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
8
- <use xlink:href="#icon-cta"></use>
8
+ <use href="#icon-cta"></use>
9
9
  </svg>
10
10
  </span>
11
11
  </a>
package/src/less/cta-button/stories/dimensions.stories.js CHANGED
@@ -5,7 +5,7 @@ export const large = () => `
5
5
  <span class="cta-btn__cell">
6
6
  <span>Link</span>
7
7
  <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
8
- <use xlink:href="#icon-cta"></use>
8
+ <use href="#icon-cta"></use>
9
9
  </svg>
10
10
  </span>
11
11
  </a>
@@ -16,7 +16,7 @@ export const largeFixedWidthTruncated = () => `
16
16
  <span class="cta-btn__cell">
17
17
  <span>Link with a lot of text that should wrap</span>
18
18
  <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
19
- <use xlink:href="#icon-cta"></use>
19
+ <use href="#icon-cta"></use>
20
20
  </svg>
21
21
  </span>
22
22
  </a>
package/src/less/details/stories/cascade.stories.js CHANGED
@@ -7,7 +7,7 @@ export const RTL = () => `
7
7
  <span class="details__label">Details</span>
8
8
  <span class="details__icon" hidden>
9
9
  <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
10
- <use xlink:href="#icon-dropdown"></use>
10
+ <use href="#icon-dropdown"></use>
11
11
  </svg>
12
12
  </span>
13
13
  </summary>
@@ -23,7 +23,7 @@ export const colour = () => `
23
23
  <span class="details__label">Details</span>
24
24
  <span class="details__icon" hidden>
25
25
  <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
26
- <use xlink:href="#icon-dropdown"></use>
26
+ <use href="#icon-dropdown"></use>
27
27
  </svg>
28
28
  </span>
29
29
  </summary>
@@ -39,7 +39,7 @@ export const fontSize = () => `
39
39
  <span class="details__label">Details</span>
40
40
  <span class="details__icon" hidden>
41
41
  <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
42
- <use xlink:href="#icon-dropdown"></use>
42
+ <use href="#icon-dropdown"></use>
43
43
  </svg>
44
44
  </span>
45
45
  </summary>
package/src/less/details/stories/details.stories.js CHANGED
@@ -6,7 +6,7 @@ export const closed = () => `
6
6
  <span class="details__label">Details</span>
7
7
  <span class="details__icon" hidden>
8
8
  <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
9
- <use xlink:href="#icon-dropdown"></use>
9
+ <use href="#icon-dropdown"></use>
10
10
  </svg>
11
11
  </span>
12
12
  </summary>
@@ -20,7 +20,7 @@ export const open = () => `
20
20
  <span class="details__label">Details</span>
21
21
  <span class="details__icon" hidden>
22
22
  <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
23
- <use xlink:href="#icon-dropdown"></use>
23
+ <use href="#icon-dropdown"></use>
24
24
  </svg>
25
25
  </span>
26
26
  </summary>
@@ -34,7 +34,7 @@ export const centered = () => `
34
34
  <span class="details__label">Details</span>
35
35
  <span class="details__icon" hidden>
36
36
  <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
37
- <use xlink:href="#icon-dropdown"></use>
37
+ <use href="#icon-dropdown"></use>
38
38
  </svg>
39
39
  </span>
40
40
  </summary>
@@ -48,7 +48,7 @@ export const small = () => `
48
48
  <span class="details__label">Details</span>
49
49
  <span class="details__icon" hidden>
50
50
  <svg class="icon icon--dropdown" focusable="false" aria-hidden="true">
51
- <use xlink:href="#icon-dropdown"></use>
51
+ <use href="#icon-dropdown"></use>
52
52
  </svg>
53
53
  </span>
54
54
  </summary>