@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/pagination/stories/button-cascade.stories.js CHANGED
@@ -7,7 +7,7 @@ export const fontSize = () => `
7
7
  </span>
8
8
  <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
9
9
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
10
- <use xlink:href="#icon-pagination-prev"></use>
10
+ <use href="#icon-pagination-prev"></use>
11
11
  </svg>
12
12
  </button>
13
13
  <ol class="pagination__items">
@@ -35,7 +35,7 @@ export const fontSize = () => `
35
35
  </ol>
36
36
  <button aria-label="Next Page" class="icon-btn pagination__next">
37
37
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
38
- <use xlink:href="#icon-pagination-next"></use>
38
+ <use href="#icon-pagination-next"></use>
39
39
  </svg>
40
40
  </button>
41
41
  </nav>
@@ -48,7 +48,7 @@ export const color = () => `
48
48
  </span>
49
49
  <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
50
50
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
51
- <use xlink:href="#icon-pagination-prev"></use>
51
+ <use href="#icon-pagination-prev"></use>
52
52
  </svg>
53
53
  </button>
54
54
  <ol class="pagination__items">
@@ -76,7 +76,7 @@ export const color = () => `
76
76
  </ol>
77
77
  <button aria-label="Next Page" class="icon-btn pagination__next">
78
78
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
79
- <use xlink:href="#icon-pagination-next"></use>
79
+ <use href="#icon-pagination-next"></use>
80
80
  </svg>
81
81
  </button>
82
82
  </nav>
@@ -90,7 +90,7 @@ export const RTL = () => `
90
90
  </span>
91
91
  <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
92
92
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
93
- <use xlink:href="#icon-pagination-prev"></use>
93
+ <use href="#icon-pagination-prev"></use>
94
94
  </svg>
95
95
  </button>
96
96
  <ol class="pagination__items">
@@ -118,7 +118,7 @@ export const RTL = () => `
118
118
  </ol>
119
119
  <button aria-label="Next Page" class="icon-btn pagination__next">
120
120
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
121
- <use xlink:href="#icon-pagination-next"></use>
121
+ <use href="#icon-pagination-next"></use>
122
122
  </svg>
123
123
  </button>
124
124
  </nav>
package/src/less/pagination/stories/buttons.stories.js CHANGED
@@ -7,7 +7,7 @@ export const base = () => `
7
7
  </span>
8
8
  <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
9
9
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
10
- <use xlink:href="#icon-pagination-prev"></use>
10
+ <use href="#icon-pagination-prev"></use>
11
11
  </svg>
12
12
  </button>
13
13
  <ol class="pagination__items">
@@ -35,7 +35,7 @@ export const base = () => `
35
35
  </ol>
36
36
  <button aria-label="Next Page" class="icon-btn pagination__next">
37
37
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
38
- <use xlink:href="#icon-pagination-next"></use>
38
+ <use href="#icon-pagination-next"></use>
39
39
  </svg>
40
40
  </button>
41
41
  </nav>
@@ -48,7 +48,7 @@ export const fluid = () => `
48
48
  </span>
49
49
  <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
50
50
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
51
- <use xlink:href="#icon-pagination-prev"></use>
51
+ <use href="#icon-pagination-prev"></use>
52
52
  </svg>
53
53
  </button>
54
54
  <ol class="pagination__items">
@@ -76,7 +76,7 @@ export const fluid = () => `
76
76
  </ol>
77
77
  <button aria-label="Next Page" class="icon-btn pagination__next">
78
78
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
79
- <use xlink:href="#icon-pagination-next"></use>
79
+ <use href="#icon-pagination-next"></use>
80
80
  </svg>
81
81
  </button>
82
82
  </nav>
package/src/less/pagination/stories/link-cascade.stories.js CHANGED
@@ -7,7 +7,7 @@ export const fontSize = () => `
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
9
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
10
- <use xlink:href="#icon-pagination-prev"></use>
10
+ <use href="#icon-pagination-prev"></use>
11
11
  </svg>
12
12
  </a>
13
13
  <ol class="pagination__items">
@@ -35,7 +35,7 @@ export const fontSize = () => `
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
37
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
38
- <use xlink:href="#icon-pagination-next"></use>
38
+ <use href="#icon-pagination-next"></use>
39
39
  </svg>
40
40
  </a>
41
41
  </nav>
@@ -48,7 +48,7 @@ export const color = () => `
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
50
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
51
- <use xlink:href="#icon-pagination-prev"></use>
51
+ <use href="#icon-pagination-prev"></use>
52
52
  </svg>
53
53
  </a>
54
54
  <ol class="pagination__items">
@@ -76,7 +76,7 @@ export const color = () => `
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
78
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
79
- <use xlink:href="#icon-pagination-next"></use>
79
+ <use href="#icon-pagination-next"></use>
80
80
  </svg>
81
81
  </a>
82
82
  </nav>
@@ -90,7 +90,7 @@ export const RTL = () => `
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
92
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
93
- <use xlink:href="#icon-pagination-prev"></use>
93
+ <use href="#icon-pagination-prev"></use>
94
94
  </svg>
95
95
  </a>
96
96
  <ol class="pagination__items">
@@ -118,7 +118,7 @@ export const RTL = () => `
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
120
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
121
- <use xlink:href="#icon-pagination-next"></use>
121
+ <use href="#icon-pagination-next"></use>
122
122
  </svg>
123
123
  </a>
124
124
  </nav>
package/src/less/pagination/stories/links.stories.js CHANGED
@@ -7,7 +7,7 @@ export const base = () => `
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
9
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
10
- <use xlink:href="#icon-pagination-prev"></use>
10
+ <use href="#icon-pagination-prev"></use>
11
11
  </svg>
12
12
  </a>
13
13
  <ol class="pagination__items">
@@ -35,7 +35,7 @@ export const base = () => `
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
37
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
38
- <use xlink:href="#icon-pagination-next"></use>
38
+ <use href="#icon-pagination-next"></use>
39
39
  </svg>
40
40
  </a>
41
41
  </nav>
@@ -48,7 +48,7 @@ export const fluid = () => `
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
50
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
51
- <use xlink:href="#icon-pagination-prev"></use>
51
+ <use href="#icon-pagination-prev"></use>
52
52
  </svg>
53
53
  </a>
54
54
  <ol class="pagination__items">
@@ -76,7 +76,7 @@ export const fluid = () => `
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
78
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
79
- <use xlink:href="#icon-pagination-next"></use>
79
+ <use href="#icon-pagination-next"></use>
80
80
  </svg>
81
81
  </a>
82
82
  </nav>
package/src/less/pagination/stories/overflow.stories.js CHANGED
@@ -7,7 +7,7 @@ export const start = () => `
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
9
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
10
- <use xlink:href="#icon-pagination-prev"></use>
10
+ <use href="#icon-pagination-prev"></use>
11
11
  </svg>
12
12
  </a>
13
13
  <ol class="pagination__items">
@@ -17,7 +17,7 @@ export const start = () => `
17
17
  <li>
18
18
  <span class="pagination__item">
19
19
  <svg class="icon icon--overflow" focusable="false" width="8" height="8" role="separator">
20
- <use xlink:href="#icon-overflow"></use>
20
+ <use href="#icon-overflow"></use>
21
21
  </svg>
22
22
  </span>
23
23
  </li>
@@ -39,7 +39,7 @@ export const start = () => `
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
41
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
42
- <use xlink:href="#icon-pagination-next"></use>
42
+ <use href="#icon-pagination-next"></use>
43
43
  </svg>
44
44
  </a>
45
45
  </nav>
@@ -52,7 +52,7 @@ export const middle = () => `
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
54
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
55
- <use xlink:href="#icon-pagination-prev"></use>
55
+ <use href="#icon-pagination-prev"></use>
56
56
  </svg>
57
57
  </a>
58
58
  <ol class="pagination__items">
@@ -62,7 +62,7 @@ export const middle = () => `
62
62
  <li>
63
63
  <span class="pagination__item">
64
64
  <svg class="icon icon--overflow" focusable="false" width="8" height="8" role="separator">
65
- <use xlink:href="#icon-overflow"></use>
65
+ <use href="#icon-overflow"></use>
66
66
  </svg>
67
67
  </span>
68
68
  </li>
@@ -78,7 +78,7 @@ export const middle = () => `
78
78
  <li>
79
79
  <span class="pagination__item">
80
80
  <svg class="icon icon--overflow" focusable="false" width="8" height="8" role="separator">
81
- <use xlink:href="#icon-overflow"></use>
81
+ <use href="#icon-overflow"></use>
82
82
  </svg>
83
83
  </span>
84
84
  </li>
@@ -88,7 +88,7 @@ export const middle = () => `
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
90
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
91
- <use xlink:href="#icon-pagination-next"></use>
91
+ <use href="#icon-pagination-next"></use>
92
92
  </svg>
93
93
  </a>
94
94
  </nav>
@@ -101,7 +101,7 @@ export const end = () => `
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
103
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
104
- <use xlink:href="#icon-pagination-prev"></use>
104
+ <use href="#icon-pagination-prev"></use>
105
105
  </svg>
106
106
  </a>
107
107
  <ol class="pagination__items">
@@ -123,7 +123,7 @@ export const end = () => `
123
123
  <li>
124
124
  <span class="pagination__item">
125
125
  <svg class="icon icon--overflow" focusable="false" width="8" height="8" role="separator">
126
- <use xlink:href="#icon-overflow"></use>
126
+ <use href="#icon-overflow"></use>
127
127
  </svg>
128
128
  </span>
129
129
  </li>
@@ -133,7 +133,7 @@ export const end = () => `
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
135
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
136
- <use xlink:href="#icon-pagination-next"></use>
136
+ <use href="#icon-pagination-next"></use>
137
137
  </svg>
138
138
  </a>
139
139
  </nav>
@@ -146,7 +146,7 @@ export const endMenuCollapsed = () => `
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
148
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
149
- <use xlink:href="#icon-pagination-prev"></use>
149
+ <use href="#icon-pagination-prev"></use>
150
150
  </svg>
151
151
  </a>
152
152
  <ol class="pagination__items">
@@ -170,7 +170,7 @@ export const endMenuCollapsed = () => `
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
172
  <svg class="icon icon--overflow" focusable="false" width="8" height="8" aria-hidden="true">
173
- <use xlink:href="#icon-overflow"></use>
173
+ <use href="#icon-overflow"></use>
174
174
  </svg>
175
175
  </button>
176
176
  <ul class="fake-menu-button__menu">
@@ -204,7 +204,7 @@ export const endMenuCollapsed = () => `
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
206
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
207
- <use xlink:href="#icon-pagination-next"></use>
207
+ <use href="#icon-pagination-next"></use>
208
208
  </svg>
209
209
  </a>
210
210
  </nav>
@@ -217,7 +217,7 @@ export const endMenuExpanded = () => `
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
219
  <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
220
- <use xlink:href="#icon-pagination-prev"></use>
220
+ <use href="#icon-pagination-prev"></use>
221
221
  </svg>
222
222
  </a>
223
223
  <ol class="pagination__items">
@@ -241,7 +241,7 @@ export const endMenuExpanded = () => `
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
243
  <svg class="icon icon--overflow" focusable="false" width="8" height="8" aria-hidden="true">
244
- <use xlink:href="#icon-overflow"></use>
244
+ <use href="#icon-overflow"></use>
245
245
  </svg>
246
246
  </button>
247
247
  <ul class="fake-menu-button__menu">
@@ -275,7 +275,7 @@ export const endMenuExpanded = () => `
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
277
  <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
278
- <use xlink:href="#icon-pagination-next"></use>
278
+ <use href="#icon-pagination-next"></use>
279
279
  </svg>
280
280
  </a>
281
281
  </nav>
package/src/less/panel-dialog/stories/panel-dialog.stories.js CHANGED
@@ -7,7 +7,7 @@ export const panelStart = () => `
7
7
  <h2 id="panel-title">Left Panel</h2>
8
8
  <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
9
9
  <svg class="icon icon--close-small" aria-hidden="true">
10
- <use xlink:href="#icon-close-small"></use>
10
+ <use href="#icon-close-small"></use>
11
11
  </svg>
12
12
  </button>
13
13
  </div>
@@ -31,7 +31,7 @@ export const RTL = () => `
31
31
  <h2 id="panel-title">Left Panel</h2>
32
32
  <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
33
33
  <svg class="icon icon--close-small" aria-hidden="true">
34
- <use xlink:href="#icon-close-small"></use>
34
+ <use href="#icon-close-small"></use>
35
35
  </svg>
36
36
  </button>
37
37
  </div>
@@ -55,7 +55,7 @@ export const panelEnd = () => `
55
55
  <h2 id="panel-title">Right Panel</h2>
56
56
  <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
57
57
  <svg class="icon icon--close-small" aria-hidden="true">
58
- <use xlink:href="#icon-close-small"></use>
58
+ <use href="#icon-close-small"></use>
59
59
  </svg>
60
60
  </button>
61
61
  </div>
@@ -78,7 +78,7 @@ export const panelEndWithFooter = () => `
78
78
  <h2 id="panel-title">Right Panel</h2>
79
79
  <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
80
80
  <svg class="icon icon--close-small" aria-hidden="true">
81
- <use xlink:href="#icon-close-small"></use>
81
+ <use href="#icon-close-small"></use>
82
82
  </svg>
83
83
  </button>
84
84
  </div>
@@ -124,7 +124,7 @@ export const panelScroll = () => `
124
124
  <h2 id="panel-title">Scrolling Panel</h2>
125
125
  <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
126
126
  <svg class="icon icon--close-small" aria-hidden="true">
127
- <use xlink:href="#icon-close-small"></use>
127
+ <use href="#icon-close-small"></use>
128
128
  </svg>
129
129
  </button>
130
130
  </div>
@@ -165,7 +165,7 @@ export const panelScrollWithFooter = () => `
165
165
  <h2 id="panel-title">Scrolling Panel with Footer</h2>
166
166
  <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
167
167
  <svg class="icon icon--close-small" aria-hidden="true">
168
- <use xlink:href="#icon-close-small"></use>
168
+ <use href="#icon-close-small"></use>
169
169
  </svg>
170
170
  </button>
171
171
  </div>
package/src/less/progress-spinner/stories/progress-spinner.stories.js CHANGED
@@ -3,27 +3,27 @@ export default { title: 'Progress Spinner' };
3
3
  export const base = () =>
4
4
  `<span class="progress-spinner" aria-label="Busy animation" role="img">
5
5
  <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
6
- <use xlink:href="#icon-spinner"></use>
6
+ <use href="#icon-spinner"></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
12
  <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
13
- <use xlink:href="#icon-spinner"></use>
13
+ <use href="#icon-spinner"></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
19
  <svg class="icon icon--spinner-large" focusable="false" aria-hidden="true">
20
- <use xlink:href="#icon-spinner-large"></use>
20
+ <use href="#icon-spinner-large"></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
26
  <svg class="icon icon--spinner-small" focusable="false" aria-hidden="true">
27
- <use xlink:href="#icon-spinner-small"></use>
27
+ <use href="#icon-spinner-small"></use>
28
28
  </svg>
29
29
  </span>`;
package/src/less/radio/stories/checked.stories.js CHANGED
@@ -5,10 +5,10 @@ export const base = () => `
5
5
  <input aria-label="Foreground SVG radio example" class="radio__control" name="r1" type="radio" checked />
6
6
  <span class="radio__icon" hidden>
7
7
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
8
- <use xlink:href="#icon-radio-unchecked"></use>
8
+ <use href="#icon-radio-unchecked"></use>
9
9
  </svg>
10
10
  <svg aria-hidden="true" class="radio__checked" focusable="false">
11
- <use xlink:href="#icon-radio-checked"></use>
11
+ <use href="#icon-radio-checked"></use>
12
12
  </svg>
13
13
  </span>
14
14
  </span>
@@ -20,10 +20,10 @@ export const RTL = () => `
20
20
  <input aria-label="Foreground SVG radio example" class="radio__control" name="r1" type="radio" checked />
21
21
  <span class="radio__icon" hidden>
22
22
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
23
- <use xlink:href="#icon-radio-unchecked"></use>
23
+ <use href="#icon-radio-unchecked"></use>
24
24
  </svg>
25
25
  <svg aria-hidden="true" class="radio__checked" focusable="false">
26
- <use xlink:href="#icon-radio-checked"></use>
26
+ <use href="#icon-radio-checked"></use>
27
27
  </svg>
28
28
  </span>
29
29
  </span>
@@ -35,10 +35,10 @@ export const disabled = () => `
35
35
  <input aria-label="Disabled Foreground SVG radio example" class="radio__control" name="r3" disabled checked type="radio" />
36
36
  <span class="radio__icon" hidden>
37
37
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
38
- <use xlink:href="#icon-radio-unchecked"></use>
38
+ <use href="#icon-radio-unchecked"></use>
39
39
  </svg>
40
40
  <svg aria-hidden="true" class="radio__checked" focusable="false">
41
- <use xlink:href="#icon-radio-checked"></use>
41
+ <use href="#icon-radio-checked"></use>
42
42
  </svg>
43
43
  </span>
44
44
  </span>
@@ -49,10 +49,10 @@ export const customColour = () => `
49
49
  <input aria-label="Foreground SVG radio example" class="radio__control" name="r5" type="radio" checked />
50
50
  <span class="radio__icon" hidden>
51
51
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
52
- <use xlink:href="#icon-radio-unchecked"></use>
52
+ <use href="#icon-radio-unchecked"></use>
53
53
  </svg>
54
54
  <svg aria-hidden="true" class="radio__checked" focusable="false" style="color: #5ba71b">
55
- <use xlink:href="#icon-radio-checked"></use>
55
+ <use href="#icon-radio-checked"></use>
56
56
  </svg>
57
57
  </span>
58
58
  </span>
@@ -63,10 +63,10 @@ export const customIcon = () => `
63
63
  <input aria-label="Custom radio example" class="radio__control" name="r7" type="radio" checked />
64
64
  <span class="radio__icon" hidden>
65
65
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
66
- <use xlink:href="#icon-radio-unchecked"></use>
66
+ <use href="#icon-radio-unchecked"></use>
67
67
  </svg>
68
68
  <svg aria-hidden="true" class="radio__checked" focusable="false">
69
- <use xlink:href="#icon-confirmation"></use>
69
+ <use href="#icon-confirmation"></use>
70
70
  </svg>
71
71
  </span>
72
72
  </span>
@@ -80,10 +80,10 @@ export const multiLineLabel = () => `
80
80
  <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
81
81
  <span class="radio__icon" hidden>
82
82
  <svg class="radio__unchecked" focusable="false" height="18" width="18">
83
- <use xlink:href="#icon-radio-unchecked"></use>
83
+ <use href="#icon-radio-unchecked"></use>
84
84
  </svg>
85
85
  <svg class="radio__checked" focusable="false" height="18" width="18">
86
- <use xlink:href="#icon-radio-checked"></use>
86
+ <use href="#icon-radio-checked"></use>
87
87
  </svg>
88
88
  </span>
89
89
  </span>
@@ -94,10 +94,10 @@ export const multiLineLabel = () => `
94
94
  <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
95
95
  <span class="radio__icon" hidden>
96
96
  <svg class="radio__unchecked" focusable="false" height="18" width="18">
97
- <use xlink:href="#icon-radio-unchecked"></use>
97
+ <use href="#icon-radio-unchecked"></use>
98
98
  </svg>
99
99
  <svg class="radio__checked" focusable="false" height="18" width="18">
100
- <use xlink:href="#icon-radio-checked"></use>
100
+ <use href="#icon-radio-checked"></use>
101
101
  </svg>
102
102
  </span>
103
103
  </span>
@@ -108,10 +108,10 @@ export const multiLineLabel = () => `
108
108
  <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
109
109
  <span class="radio__icon" hidden>
110
110
  <svg class="radio__unchecked" focusable="false" height="18" width="18">
111
- <use xlink:href="#icon-radio-unchecked"></use>
111
+ <use href="#icon-radio-unchecked"></use>
112
112
  </svg>
113
113
  <svg class="radio__checked" focusable="false" height="18" width="18">
114
- <use xlink:href="#icon-radio-checked"></use>
114
+ <use href="#icon-radio-checked"></use>
115
115
  </svg>
116
116
  </span>
117
117
  </span>
package/src/less/radio/stories/unchecked.stories.js CHANGED
@@ -5,10 +5,10 @@ export const base = () => `
5
5
  <input aria-label="Foreground SVG radio example" class="radio__control" name="r2" type="radio" />
6
6
  <span class="radio__icon" hidden>
7
7
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
8
- <use xlink:href="#icon-radio-unchecked"></use>
8
+ <use href="#icon-radio-unchecked"></use>
9
9
  </svg>
10
10
  <svg aria-hidden="true" class="radio__checked" focusable="false">
11
- <use xlink:href="#icon-radio-checked"></use>
11
+ <use href="#icon-radio-checked"></use>
12
12
  </svg>
13
13
  </span>
14
14
  </span>
@@ -19,10 +19,10 @@ export const disabled = () => `
19
19
  <input aria-label="Disabled Foreground SVG radio example" class="radio__control" name="r4" type="radio" disabled />
20
20
  <span class="radio__icon" hidden>
21
21
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
22
- <use xlink:href="#icon-radio-unchecked"></use>
22
+ <use href="#icon-radio-unchecked"></use>
23
23
  </svg>
24
24
  <svg aria-hidden="true" class="radio__checked" focusable="false">
25
- <use xlink:href="#icon-radio-checked"></use>
25
+ <use href="#icon-radio-checked"></use>
26
26
  </svg>
27
27
  </span>
28
28
  </span>
@@ -33,10 +33,10 @@ export const customColour = () => `
33
33
  <input aria-label="Foreground SVG radio example" class="radio__control" name="r6" type="radio" />
34
34
  <span class="radio__icon" hidden>
35
35
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
36
- <use xlink:href="#icon-radio-unchecked"></use>
36
+ <use href="#icon-radio-unchecked"></use>
37
37
  </svg>
38
38
  <svg aria-hidden="true" class="radio__checked" focusable="false" style="color: #5ba71b">
39
- <use xlink:href="#icon-radio-checked"></use>
39
+ <use href="#icon-radio-checked"></use>
40
40
  </svg>
41
41
  </span>
42
42
  </span>
@@ -47,10 +47,10 @@ export const customIcon = () => `
47
47
  <input aria-label="Custom radio example" class="radio__control" name="r8" type="radio" />
48
48
  <span class="radio__icon" hidden>
49
49
  <svg aria-hidden="true" class="radio__unchecked" focusable="false">
50
- <use xlink:href="#icon-radio-unchecked"></use>
50
+ <use href="#icon-radio-unchecked"></use>
51
51
  </svg>
52
52
  <svg aria-hidden="true" class="radio__checked" focusable="false">
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/section-notice/section-notice.less CHANGED
@@ -64,6 +64,7 @@ span[role="region"].section-notice {
64
64
  grid-column: 1;
65
65
  grid-row: 1;
66
66
  height: @spacing-200;
67
+ margin-top: 1px;
67
68
  padding-right: @spacing-200;
68
69
  }
69
70
 
@@ -81,6 +82,7 @@ span[role="region"].section-notice {
81
82
  grid-column: 4;
82
83
  grid-row: 1;
83
84
  justify-self: end;
85
+ margin-top: 2px;
84
86
  }
85
87
 
86
88
  .section-notice__main p {
@@ -106,7 +108,6 @@ p.section-notice__cta {
106
108
  @media (min-width: 601px) {
107
109
  section.section-notice,
108
110
  div[role="region"].section-notice {
109
- flex-wrap: nowrap;
110
111
  margin: @spacing-200 0;
111
112
  }
112
113
 
@@ -120,7 +121,6 @@ p.section-notice__cta {
120
121
  }
121
122
 
122
123
  .section-notice__footer {
123
- margin-top: 0;
124
124
  padding-left: @spacing-200;
125
125
  }
126
126
  }
package/src/less/select/stories/cascade.stories.js CHANGED
@@ -9,7 +9,7 @@ export const RTL = () => `
9
9
  <option value="3">Option 3</option>
10
10
  </select>
11
11
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
12
- <use xlink:href="#icon-dropdown"></use>
12
+ <use href="#icon-dropdown"></use>
13
13
  </svg>
14
14
  </span>
15
15
  </div>
@@ -23,7 +23,7 @@ export const fontSize = () => `
23
23
  <option value="3">Option 3</option>
24
24
  </select>
25
25
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
26
- <use xlink:href="#icon-dropdown"></use>
26
+ <use href="#icon-dropdown"></use>
27
27
  </svg>
28
28
  </span>
29
29
  `;
@@ -36,7 +36,7 @@ export const color = () => `
36
36
  <option value="3">Option 3</option>
37
37
  </select>
38
38
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
39
- <use xlink:href="#icon-dropdown"></use>
39
+ <use href="#icon-dropdown"></use>
40
40
  </svg>
41
41
  </span>
42
42
  `;