@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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
3
  "description": "Skin - CSS modules that represent the brand eBay",
4
- "version": "15.3.0-0",
4
+ "version": "15.4.0-0",
5
5
  "license": "MIT",
6
6
  "main": "./index.js",
7
7
  "maintainers": [
@@ -127,7 +127,7 @@
127
127
  "stylelint-prettier": "^2",
128
128
  "svgo": "^3.0.1",
129
129
  "webpack": "^5.75.0",
130
- "webpack-cli": "^4.10.0",
130
+ "webpack-cli": "^5.0.1",
131
131
  "winston": "^3.8.2",
132
132
  "xmlserializer": "^0.6.1",
133
133
  "yargs": "^17.6.2"
package/src/less/breadcrumbs/stories/button-cascade.stories.js CHANGED
@@ -7,19 +7,19 @@ export const color = () => `
7
7
  <li>
8
8
  <button>ebay</button>
9
9
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
10
- <use xlink:href="#icon-breadcrumb"></use>
10
+ <use href="#icon-breadcrumb"></use>
11
11
  </svg>
12
12
  </li>
13
13
  <li>
14
14
  <button>Cell Phones, Smart Watches &amp; Accessories</button>
15
15
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
16
- <use xlink:href="#icon-breadcrumb"></use>
16
+ <use href="#icon-breadcrumb"></use>
17
17
  </svg>
18
18
  </li>
19
19
  <li>
20
20
  <button>Smart Watch Accessories</button>
21
21
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
22
- <use xlink:href="#icon-breadcrumb"></use>
22
+ <use href="#icon-breadcrumb"></use>
23
23
  </svg>
24
24
  </li>
25
25
  <li>
@@ -36,19 +36,19 @@ export const fontSize = () => `
36
36
  <li>
37
37
  <button>ebay</button>
38
38
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
39
- <use xlink:href="#icon-breadcrumb"></use>
39
+ <use href="#icon-breadcrumb"></use>
40
40
  </svg>
41
41
  </li>
42
42
  <li>
43
43
  <button>Cell Phones, Smart Watches &amp; Accessories</button>
44
44
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
45
- <use xlink:href="#icon-breadcrumb"></use>
45
+ <use href="#icon-breadcrumb"></use>
46
46
  </svg>
47
47
  </li>
48
48
  <li>
49
49
  <button>Smart Watch Accessories</button>
50
50
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
51
- <use xlink:href="#icon-breadcrumb"></use>
51
+ <use href="#icon-breadcrumb"></use>
52
52
  </svg>
53
53
  </li>
54
54
  <li>
@@ -66,19 +66,19 @@ export const RTL = () => `
66
66
  <li>
67
67
  <button>ebay</button>
68
68
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
69
- <use xlink:href="#icon-breadcrumb"></use>
69
+ <use href="#icon-breadcrumb"></use>
70
70
  </svg>
71
71
  </li>
72
72
  <li>
73
73
  <button>Cell Phones, Smart Watches &amp; Accessories</button>
74
74
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
75
- <use xlink:href="#icon-breadcrumb"></use>
75
+ <use href="#icon-breadcrumb"></use>
76
76
  </svg>
77
77
  </li>
78
78
  <li>
79
79
  <button>Smart Watch Accessories</button>
80
80
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
81
- <use xlink:href="#icon-breadcrumb"></use>
81
+ <use href="#icon-breadcrumb"></use>
82
82
  </svg>
83
83
  </li>
84
84
  <li>
package/src/less/breadcrumbs/stories/buttons.stories.js CHANGED
@@ -7,19 +7,19 @@ export const currentLocation = () => `
7
7
  <li>
8
8
  <button>ebay</button>
9
9
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
10
- <use xlink:href="#icon-breadcrumb"></use>
10
+ <use href="#icon-breadcrumb"></use>
11
11
  </svg>
12
12
  </li>
13
13
  <li>
14
14
  <button>Cell Phones, Smart Watches &amp; Accessories</button>
15
15
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
16
- <use xlink:href="#icon-breadcrumb"></use>
16
+ <use href="#icon-breadcrumb"></use>
17
17
  </svg>
18
18
  </li>
19
19
  <li>
20
20
  <button>Smart Watch Accessories</button>
21
21
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
22
- <use xlink:href="#icon-breadcrumb"></use>
22
+ <use href="#icon-breadcrumb"></use>
23
23
  </svg>
24
24
  </li>
25
25
  <li>
@@ -36,13 +36,13 @@ export const noCurrentLocation = () => `
36
36
  <li>
37
37
  <button>ebay</button>
38
38
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
39
- <use xlink:href="#icon-breadcrumb"></use>
39
+ <use href="#icon-breadcrumb"></use>
40
40
  </svg>
41
41
  </li>
42
42
  <li>
43
43
  <button>Cell Phones, Smart Watches &amp; Accessories</button>
44
44
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
45
- <use xlink:href="#icon-breadcrumb"></use>
45
+ <use href="#icon-breadcrumb"></use>
46
46
  </svg>
47
47
  </li>
48
48
  <li>
package/src/less/breadcrumbs/stories/link-cascade.stories.js CHANGED
@@ -7,19 +7,19 @@ export const color = () => `
7
7
  <li>
8
8
  <a href="https://www.ebay.com/">ebay</a>
9
9
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
10
- <use xlink:href="#icon-breadcrumb"></use>
10
+ <use href="#icon-breadcrumb"></use>
11
11
  </svg>
12
12
  </li>
13
13
  <li>
14
14
  <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
15
15
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
16
- <use xlink:href="#icon-breadcrumb"></use>
16
+ <use href="#icon-breadcrumb"></use>
17
17
  </svg>
18
18
  </li>
19
19
  <li>
20
20
  <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
21
21
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
22
- <use xlink:href="#icon-breadcrumb"></use>
22
+ <use href="#icon-breadcrumb"></use>
23
23
  </svg>
24
24
  </li>
25
25
  <li>
@@ -36,19 +36,19 @@ export const fontSize = () => `
36
36
  <li>
37
37
  <a href="https://www.ebay.com/">ebay</a>
38
38
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
39
- <use xlink:href="#icon-breadcrumb"></use>
39
+ <use href="#icon-breadcrumb"></use>
40
40
  </svg>
41
41
  </li>
42
42
  <li>
43
43
  <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
44
44
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
45
- <use xlink:href="#icon-breadcrumb"></use>
45
+ <use href="#icon-breadcrumb"></use>
46
46
  </svg>
47
47
  </li>
48
48
  <li>
49
49
  <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
50
50
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
51
- <use xlink:href="#icon-breadcrumb"></use>
51
+ <use href="#icon-breadcrumb"></use>
52
52
  </svg>
53
53
  </li>
54
54
  <li>
@@ -66,19 +66,19 @@ export const RTL = () => `
66
66
  <li>
67
67
  <a href="https://www.ebay.com/">ebay</a>
68
68
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
69
- <use xlink:href="#icon-breadcrumb"></use>
69
+ <use href="#icon-breadcrumb"></use>
70
70
  </svg>
71
71
  </li>
72
72
  <li>
73
73
  <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
74
74
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
75
- <use xlink:href="#icon-breadcrumb"></use>
75
+ <use href="#icon-breadcrumb"></use>
76
76
  </svg>
77
77
  </li>
78
78
  <li>
79
79
  <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
80
80
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
81
- <use xlink:href="#icon-breadcrumb"></use>
81
+ <use href="#icon-breadcrumb"></use>
82
82
  </svg>
83
83
  </li>
84
84
  <li>
package/src/less/breadcrumbs/stories/links.stories.js CHANGED
@@ -7,19 +7,19 @@ export const currentLocation = () => `
7
7
  <li>
8
8
  <a href="https://www.ebay.com/">ebay</a>
9
9
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
10
- <use xlink:href="#icon-breadcrumb"></use>
10
+ <use href="#icon-breadcrumb"></use>
11
11
  </svg>
12
12
  </li>
13
13
  <li>
14
14
  <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
15
15
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
16
- <use xlink:href="#icon-breadcrumb"></use>
16
+ <use href="#icon-breadcrumb"></use>
17
17
  </svg>
18
18
  </li>
19
19
  <li>
20
20
  <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
21
21
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
22
- <use xlink:href="#icon-breadcrumb"></use>
22
+ <use href="#icon-breadcrumb"></use>
23
23
  </svg>
24
24
  </li>
25
25
  <li>
@@ -36,13 +36,13 @@ export const noCurrentLocation = () => `
36
36
  <li>
37
37
  <a href="https://www.ebay.com/">ebay</a>
38
38
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
39
- <use xlink:href="#icon-breadcrumb"></use>
39
+ <use href="#icon-breadcrumb"></use>
40
40
  </svg>
41
41
  </li>
42
42
  <li>
43
43
  <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
44
44
  <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
45
- <use xlink:href="#icon-breadcrumb"></use>
45
+ <use href="#icon-breadcrumb"></use>
46
46
  </svg>
47
47
  </li>
48
48
  <li>
package/src/less/button/stories/button/base.stories.js CHANGED
@@ -5,12 +5,12 @@ export const textOnly = () => '<button class="btn">Button</button>';
5
5
  export const form = () => '<button class="btn btn--form">Button</button>';
6
6
 
7
7
  export const formSlim = () =>
8
- '<button class="btn btn--form btn--slim"><svg class="icon icon--dropdown" width="16" height="16"><use xlink:href="#icon-dropdown"></use></svg></button>';
8
+ '<button class="btn btn--form btn--slim"><svg class="icon icon--dropdown" width="16" height="16"><use href="#icon-dropdown"></use></svg></button>';
9
9
 
10
10
  export const iconAndText = () => `
11
11
  <button type="button" class="btn">
12
12
  <span class="btn__cell">
13
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
13
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
14
14
  <span>Button</span>
15
15
  </span>
16
16
  </button>
@@ -19,7 +19,7 @@ export const iconAndText = () => `
19
19
  export const disabled = () => `
20
20
  <button type="button" class="btn" disabled>
21
21
  <span class="btn__cell">
22
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
22
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
23
23
  <span>Button</span>
24
24
  </span>
25
25
  </button>
@@ -30,7 +30,7 @@ export const busy = () => `
30
30
  <span class="btn__cell">
31
31
  <span class="progress-spinner">
32
32
  <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
33
- <use xlink:href="#icon-spinner"></use>
33
+ <use href="#icon-spinner"></use>
34
34
  </svg>
35
35
  </span>
36
36
  </span>
@@ -42,7 +42,7 @@ export const formBusy = () => `
42
42
  <span class="btn__cell">
43
43
  <span class="progress-spinner">
44
44
  <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
45
- <use xlink:href="#icon-spinner"></use>
45
+ <use href="#icon-spinner"></use>
46
46
  </svg>
47
47
  </span>
48
48
  </span>
package/src/less/button/stories/button/borderless.stories.js CHANGED
@@ -4,7 +4,7 @@ export const base = () => `<button class="btn btn--borderless">
4
4
  <span class="btn__cell">
5
5
  <span class="btn__text">Button</span>
6
6
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
7
- <use xlink:href="#icon-dropdown"></use>
7
+ <use href="#icon-dropdown"></use>
8
8
  </svg>
9
9
  </span>
10
10
  </button>`;
@@ -13,7 +13,7 @@ export const disabled = () => `<button class="btn btn--borderless" disabled="tru
13
13
  <span class="btn__cell">
14
14
  <span class="btn__text">Button</span>
15
15
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
16
- <use xlink:href="#icon-dropdown"></use>
16
+ <use href="#icon-dropdown"></use>
17
17
  </svg>
18
18
  </span>
19
19
  </button>`;
@@ -22,7 +22,7 @@ export const ariaDisabled = () => `<button class="btn btn--borderless" aria-disa
22
22
  <span class="btn__cell">
23
23
  <span class="btn__text">Button</span>
24
24
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
25
- <use xlink:href="#icon-dropdown"></use>
25
+ <use href="#icon-dropdown"></use>
26
26
  </svg>
27
27
  </span>
28
28
  </button>`;
@@ -30,7 +30,7 @@ export const ariaDisabled = () => `<button class="btn btn--borderless" aria-disa
30
30
  export const empty = () => `<button class="btn btn--borderless" disabled="true">
31
31
  <span class="btn__cell">
32
32
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
33
- <use xlink:href="#icon-dropdown"></use>
33
+ <use href="#icon-dropdown"></use>
34
34
  </svg>
35
35
  </span>
36
36
  </button>`;
package/src/less/button/stories/button/cascade.stories.js CHANGED
@@ -3,7 +3,7 @@ export default { title: 'Button/Cascade' };
3
3
  export const color = () => `
4
4
  <button type="button" class="btn" style="color: red;">
5
5
  <span class="btn__cell">
6
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
6
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
7
7
  <span>Button</span>
8
8
  </span>
9
9
  </button>
@@ -13,7 +13,7 @@ export const fontSize = () => `
13
13
  <div style="font-size: 200%;">
14
14
  <button type="button" class="btn">
15
15
  <span class="btn__cell">
16
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
16
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
17
17
  <span>Button</span>
18
18
  </span>
19
19
  </button>
@@ -24,7 +24,7 @@ export const RTL = () => `
24
24
  <div dir="rtl">
25
25
  <button type="button" class="btn btn--primary">
26
26
  <span class="btn__cell">
27
- <svg class="icon icon--close" width="16" height="16" style="margin-right: 0px;"><use xlink:href="#icon-close"></use></svg>
27
+ <svg class="icon icon--close" width="16" height="16" style="margin-right: 0px;"><use href="#icon-close"></use></svg>
28
28
  <span style="margin-right: 8px;">Button</span>
29
29
  </span>
30
30
  </button>
package/src/less/button/stories/button/dimensions.stories.js CHANGED
@@ -3,7 +3,7 @@ export default { title: 'Button/Dimensions' };
3
3
  export const large = () => `
4
4
  <button type="button" class="btn btn--large">
5
5
  <span class="btn__cell">
6
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
6
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
7
7
  <span>Button</span>
8
8
  </span>
9
9
  </button>
package/src/less/button/stories/button/primary.stories.js CHANGED
@@ -5,7 +5,7 @@ export const textOnly = () => '<button class="btn btn--primary">Button</button>'
5
5
  export const iconAndText = () => `
6
6
  <button type="button" class="btn btn--primary">
7
7
  <span class="btn__cell">
8
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
8
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
9
9
  <span>Button</span>
10
10
  </span>
11
11
  </button>
@@ -14,7 +14,7 @@ export const iconAndText = () => `
14
14
  export const disabled = () => `
15
15
  <button type="button" class="btn btn--primary" disabled>
16
16
  <span class="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>Button</span>
19
19
  </span>
20
20
  </button>
@@ -23,7 +23,7 @@ export const disabled = () => `
23
23
  export const partiallyDisabled = () => `
24
24
  <button type="button" class="btn btn--primary" aria-disabled="true">
25
25
  <span class="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>Button</span>
28
28
  </span>
29
29
  </button>
@@ -34,7 +34,7 @@ export const busy = () => `
34
34
  <span class="btn__cell">
35
35
  <span class="progress-spinner">
36
36
  <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
37
- <use xlink:href="#icon-spinner"></use>
37
+ <use href="#icon-spinner"></use>
38
38
  </svg>
39
39
  </span>
40
40
  </span>
package/src/less/button/stories/button/secondary.stories.js CHANGED
@@ -5,7 +5,7 @@ export const textOnly = () => '<button class="btn btn--secondary">Button</button
5
5
  export const iconAndText = () => `
6
6
  <button type="button" class="btn btn--secondary">
7
7
  <span class="btn__cell">
8
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
8
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
9
9
  <span>Button</span>
10
10
  </span>
11
11
  </button>
@@ -14,7 +14,7 @@ export const iconAndText = () => `
14
14
  export const disabled = () => `
15
15
  <button type="button" class="btn btn--secondary" disabled>
16
16
  <span class="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>Button</span>
19
19
  </span>
20
20
  </button>
@@ -23,7 +23,7 @@ export const disabled = () => `
23
23
  export const partiallyDisabled = () => `
24
24
  <button type="button" class="btn btn--secondary" aria-disabled="true">
25
25
  <span class="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>Button</span>
28
28
  </span>
29
29
  </button>
@@ -34,7 +34,7 @@ export const busy = () => `
34
34
  <span class="btn__cell">
35
35
  <span class="progress-spinner">
36
36
  <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
37
- <use xlink:href="#icon-spinner"></use>
37
+ <use href="#icon-spinner"></use>
38
38
  </svg>
39
39
  </span>
40
40
  </span>
package/src/less/button/stories/button/tertiary.stories.js CHANGED
@@ -7,7 +7,7 @@ export const textOnly = () => `
7
7
  export const iconAndText = () => `
8
8
  <button type="button" class="btn btn--tertiary">
9
9
  <span class="btn__cell">
10
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
10
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
11
11
  <span>Button</span>
12
12
  </span>
13
13
  </button>
@@ -16,7 +16,7 @@ export const iconAndText = () => `
16
16
  export const disabled = () => `
17
17
  <button type="button" class="btn btn--tertiary" disabled>
18
18
  <span class="btn__cell">
19
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
19
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
20
20
  <span>Button</span>
21
21
  </span>
22
22
  </button>
@@ -25,7 +25,7 @@ export const disabled = () => `
25
25
  export const partiallyDisabled = () => `
26
26
  <button type="button" class="btn btn--tertiary" aria-disabled="true">
27
27
  <span class="btn__cell">
28
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
28
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
29
29
  <span>Button</span>
30
30
  </span>
31
31
  </button>
@@ -36,7 +36,7 @@ export const busy = () => `
36
36
  <span class="btn__cell">
37
37
  <span class="progress-spinner">
38
38
  <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
39
- <use xlink:href="#icon-spinner"></use>
39
+ <use href="#icon-spinner"></use>
40
40
  </svg>
41
41
  </span>
42
42
  </span>
package/src/less/button/stories/destructive-button/primary.stories.js CHANGED
@@ -6,7 +6,7 @@ export const textOnly = () =>
6
6
  export const iconAndText = () => `
7
7
  <button type="button" class="btn btn--primary btn--destructive">
8
8
  <span class="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>Destructive Button</span>
11
11
  </span>
12
12
  </button>
@@ -19,7 +19,7 @@ export const disabled = () => `
19
19
  export const disabledWithIcon = () => `
20
20
  <button type="button" class="btn btn--primary btn--destructive" disabled>
21
21
  <span class="btn__cell">
22
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
22
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
23
23
  <span>Destructive Button</span>
24
24
  </span>
25
25
  </button>
@@ -29,7 +29,7 @@ export const busy = () => `
29
29
  <button class="btn btn--primary btn--destructive" aria-label="Busy">
30
30
  <span class="progress-spinner">
31
31
  <svg aria-hidden="true" class="icon icon--spinner" focusable="false">
32
- <use xlink:href="#icon-spinner"></use>
32
+ <use href="#icon-spinner"></use>
33
33
  </svg>
34
34
  </span>
35
35
  </button>
package/src/less/button/stories/destructive-button/secondary.stories.js CHANGED
@@ -6,7 +6,7 @@ export const textOnly = () =>
6
6
  export const iconAndText = () => `
7
7
  <button type="button" class="btn btn--secondary btn--destructive">
8
8
  <span class="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>Destructive Button</span>
11
11
  </span>
12
12
  </button>
@@ -19,7 +19,7 @@ export const disabled = () => `
19
19
  export const disabledWithIcon = () => `
20
20
  <button type="button" class="btn btn--secondary btn--destructive" disabled>
21
21
  <span class="btn__cell">
22
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
22
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
23
23
  <span>Destructive Button</span>
24
24
  </span>
25
25
  </button>
@@ -29,7 +29,7 @@ export const busy = () => `
29
29
  <button class="btn btn--secondary btn--destructive" aria-label="Busy">
30
30
  <span class="progress-spinner">
31
31
  <svg aria-hidden="true" class="icon icon--spinner" focusable="false">
32
- <use xlink:href="#icon-spinner"></use>
32
+ <use href="#icon-spinner"></use>
33
33
  </svg>
34
34
  </span>
35
35
  </button>
package/src/less/button/stories/destructive-button/tertiary.stories.js CHANGED
@@ -6,7 +6,7 @@ export const textOnly = () =>
6
6
  export const iconAndText = () => `
7
7
  <button type="button" class="btn btn--tertiary btn--destructive">
8
8
  <span class="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>Destructive Button</span>
11
11
  </span>
12
12
  </button>
@@ -19,7 +19,7 @@ export const disabled = () => `
19
19
  export const disabledWithIcon = () => `
20
20
  <button type="button" class="btn btn--tertiary btn--destructive" disabled>
21
21
  <span class="btn__cell">
22
- <svg class="icon icon--close" width="16" height="16"><use xlink:href="#icon-close"></use></svg>
22
+ <svg class="icon icon--close" width="16" height="16"><use href="#icon-close"></use></svg>
23
23
  <span>Destructive Button</span>
24
24
  </span>
25
25
  </button>
@@ -29,7 +29,7 @@ export const busy = () => `
29
29
  <button class="btn btn--tertiary btn--destructive" aria-label="Busy">
30
30
  <span class="progress-spinner">
31
31
  <svg aria-hidden="true" class="icon icon--spinner" focusable="false">
32
- <use xlink:href="#icon-spinner"></use>
32
+ <use href="#icon-spinner"></use>
33
33
  </svg>
34
34
  </span>
35
35
  </button>
package/src/less/button/stories/fake-button/base.stories.js CHANGED
@@ -5,7 +5,7 @@ export const textOnly = () => '<a href="http://www.ebay/com" class="fake-btn">Fa
5
5
  export const iconAndText = () => `
6
6
  <a class="fake-btn" href="http://www.ebay.com">
7
7
  <span class="fake-btn__cell">
8
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
8
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
9
9
  <span>Fake Button</span>
10
10
  </span>
11
11
  </a>
@@ -14,7 +14,7 @@ export const iconAndText = () => `
14
14
  export const disabled = () => `
15
15
  <a class="fake-btn">
16
16
  <span class="fake-btn__cell">
17
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
17
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
18
18
  <span>Fake Button</span>
19
19
  </span>
20
20
  </a>
package/src/less/button/stories/fake-button/cascade.stories.js CHANGED
@@ -4,7 +4,7 @@ export const RTL = () => `
4
4
  <div dir="rtl">
5
5
  <a class="fake-btn" href="http://www.ebay.com">
6
6
  <span class="fake-btn__cell">
7
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
7
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
8
8
  <span>Fake Button</span>
9
9
  </span>
10
10
  </a>
@@ -15,7 +15,7 @@ export const color = () => `
15
15
  <div style="color: red;">
16
16
  <a class="fake-btn" href="http://www.ebay.com">
17
17
  <span class="fake-btn__cell">
18
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
18
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
19
19
  <span>Fake Button</span>
20
20
  </span>
21
21
  </a>
@@ -26,7 +26,7 @@ export const fontSize = () => `
26
26
  <div style="font-size: 200%">
27
27
  <a class="fake-btn" href="http://www.ebay.com">
28
28
  <span class="fake-btn__cell">
29
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
29
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
30
30
  <span>Fake Button</span>
31
31
  </span>
32
32
  </a>
package/src/less/button/stories/fake-button/dimensions.stories.js CHANGED
@@ -3,7 +3,7 @@ export default { title: 'Fake Button/Dimensions' };
3
3
  export const large = () => `
4
4
  <a class="fake-btn fake-btn--large" href="http://www.ebay.com">
5
5
  <span class="fake-btn__cell">
6
- <svg class="icon icon--settings" width="16" height="16"><use xlink:href="#icon-settings"></use></svg>
6
+ <svg class="icon icon--settings" width="16" height="16"><use href="#icon-settings"></use></svg>
7
7
  <span>Fake Button</span>
8
8
  </span>
9
9
  </a>