@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/src/{less → sass}/menu/stories/fake-menu.stories.js

@@ -36,7 +36,7 @@ export const linksSelected = () => `
         <li>
             <a aria-current="page" class="fake-menu__item" href="http://www.ebay.com">
                 <span>Link 1</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </a>
@@ -53,7 +53,7 @@ export const buttonsSelected = () => `
         <li>
             <button aria-current="page" class="fake-menu__item">
                 <span>Button 1</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </button>
@@ -70,7 +70,7 @@ export const linksDisabled = () => `
         <li>
             <a aria-current="page" class="fake-menu__item">
                 <span>Link 1</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </a>
@@ -87,7 +87,7 @@ export const buttonsDisabled = () => `
         <li>
             <button aria-current="page" class="fake-menu__item" disabled>
                 <span>Button 1</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </button>

package/src/{less → sass}/menu/stories/multiSelect.stories.js

@@ -5,19 +5,19 @@ export const unselected = () => `
     <div class="menu__items" role="menu">
         <div class="menu__item" role="menuitemcheckbox" aria-checked="false" tabindex="0">
             <span>Item 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
             <span>Item 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
             <span>Item 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -30,19 +30,19 @@ export const selected = () => `
     <div class="menu__items" role="menu">
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true" tabindex="0">
             <span>Item 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
             <span>Item 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
             <span>Item 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -55,19 +55,19 @@ export const disabled = () => `
     <div class="menu__items" role="menu">
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true" tabindex="0">
             <span>Item 1</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
             <span>Item 2</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
             <span>Item 3</span>
-            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>

package/src/{less/menu-button/menu-button.less → sass/menu-button/menu-button.scss}

@@ -1,8 +1,8 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dropdown-mixins.less";
-@import "../mixins/private/menu-mixins.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/public/utility-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dropdown-mixins";
+@import "../mixins/private/menu-mixins";
+@import "../mixins/private/token-mixins";
+@import "../mixins/public/utility-mixins";
 
 .menu-button,
 .fake-menu-button {
@@ -12,12 +12,12 @@
 
 .menu-button__menu,
 .fake-menu-button__menu {
-    .dropdown-base(menu-button-menu);
+    @include dropdown-base(menu-button-menu);
 
-    // In ebayui there is a bug where if tabindex=-1 outside the menu button
-    // Any clicks inside will trigger on the outher tabindex=-1. In order to fix it
-    // We added a tabindex=-1 on the popup menu root (on root so you can scroll)
-    // This forces a focus ring, so this focus ring is removed from the root.
+    /* In ebayui there is a bug where if tabindex=-1 outside the menu button */
+    /* Any clicks inside will trigger on the outher tabindex=-1. In order to fix it */
+    /* We added a tabindex=-1 on the popup menu root (on root so you can scroll) */
+    /* This forces a focus ring, so this focus ring is removed from the root. */
     outline: 0;
 }
 
@@ -36,15 +36,15 @@ span.fake-menu-button__button {
 }
 
 div.menu-button__item[role^="menuitem"] {
-    .menu-menuitem-base(menu-button);
-    .dropdown-item-border-radius(menu-button-menu);
+    @include menu-menuitem-base(menu-button);
+    @include dropdown-item-border-radius(menu-button-menu);
 
-    cursor: default; // needed to override text cursor
+    cursor: default; /* needed to override text cursor */
 }
 
 .menu-button__item svg.icon--tick-16,
 .fake-menu-button__item svg.icon--tick-16 {
-    .menu-menuitem-status();
+    @include menu-menuitem-status();
 }
 
 .menu-button__item svg.icon--tick-16:last-child,
@@ -52,9 +52,10 @@ div.menu-button__item[role^="menuitem"] {
     margin-left: var(--spacing-100);
 }
 
-// anchor tag specific
+/* anchor tag specific */
 a.fake-menu-button__item {
-    .color-token(menu-button-anchor-color, color-foreground-primary);
+    @include color-token(menu-button-anchor-color, color-foreground-primary);
+
     text-decoration: none;
 
     &:focus {
@@ -63,14 +64,24 @@ a.fake-menu-button__item {
 
     &:hover,
     &:visited {
-        .color-token(menu-button-anchor-color, color-background-primary);
+        @include color-token(
+            menu-button-anchor-color,
+            color-background-primary
+        );
     }
 }
 
-// button tag specific
+/* button tag specific */
 button.fake-menu-button__item {
-    .background-color-token(menu-button-background-color, color-background-primary);
-    .color-token(menu-button-foreground-color, color-foreground-primary);
+    @include background-color-token(
+        menu-button-background-color,
+        color-background-primary
+    );
+    @include color-token(
+        menu-button-foreground-color,
+        color-foreground-primary
+    );
+
     font-family: inherit;
     font-size: 1em;
     text-align: left;
@@ -87,24 +98,39 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
 
 .fake-menu-button__menu a.fake-menu-button__item,
 .fake-menu-button__menu button.fake-menu-button__item {
-    .menu-menuitem-base(menu-button);
+    @include menu-menuitem-base(menu-button);
 }
 
 .fake-menu-button__menu a.fake-menu-button__item:not([href]),
 .fake-menu-button__menu button.fake-menu-button__item[disabled],
 .menu-button__menu
     div.menu-button__item[role^="menuitem"][aria-disabled="true"] {
-    .color-token(menu-button-menuitem-disabled-foreground-color, color-foreground-disabled);
+    @include color-token(
+        menu-button-menuitem-disabled-foreground-color,
+        color-foreground-disabled
+    );
 }
 
 .fake-menu-button__menu > li:first-child a.fake-menu-button__item {
-    .border-top-left-radius-token(menu-button-menu-border-radius, border-radius-50);
-    .border-top-right-radius-token(menu-button-menu-border-radius, border-radius-50);
+    @include border-top-left-radius-token(
+        menu-button-menu-border-radius,
+        border-radius-50
+    );
+    @include border-top-right-radius-token(
+        menu-button-menu-border-radius,
+        border-radius-50
+    );
 }
 
 .fake-menu-button__menu > li:last-child a.fake-menu-button__item {
-    .border-bottom-left-radius-token(menu-button-menu-border-radius, border-radius-50);
-    .border-bottom-right-radius-token(menu-button-menu-border-radius, border-radius-50);
+    @include border-bottom-left-radius-token(
+        menu-button-menu-border-radius,
+        border-radius-50
+    );
+    @include border-bottom-right-radius-token(
+        menu-button-menu-border-radius,
+        border-radius-50
+    );
 }
 
 .menu-button__menu--fix-width,
@@ -112,7 +138,7 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
     width: 100%;
 
     span {
-        .truncate();
+        @include truncate();
 
         width: 100%;
     }
@@ -147,7 +173,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 
 .menu-button__menu--reverse,
 .fake-menu-button__menu--reverse {
-    .dropdown-reverse();
+    @include dropdown-reverse();
 }
 
 .menu-button__button[aria-expanded="true"] ~ .menu-button__menu,
@@ -173,13 +199,17 @@ div.menu-button__option--active[role="option"] {
 }
 
 hr.menu-button__separator {
-    .border-color-token(menu-button-separator-color, color-stroke-subtle);
+    @include border-color-token(
+        menu-button-separator-color,
+        color-stroke-subtle
+    );
+
     border-style: solid;
     border-width: 1px;
     margin: 0;
 }
 
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
     outline: none;
 }

package/src/{less → sass}/menu-button/stories/base.stories.js

@@ -5,7 +5,7 @@ export const collapsed = () => `
     <button class="btn btn--secondary" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -31,7 +31,7 @@ export const disabled = () => `
     <button class="btn btn--secondary" aria-haspopup="true" type="button" disabled>
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -57,7 +57,7 @@ export const expanded = () => `
     <button class="btn btn--secondary" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -83,7 +83,7 @@ export const collapsedForm = () => `
     <button class="btn btn--form" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -109,7 +109,7 @@ export const expandedForm = () => `
     <button class="btn btn--form" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -135,7 +135,7 @@ export const badged = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -161,7 +161,7 @@ export const expandedDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -187,7 +187,7 @@ export const radioItems = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -196,19 +196,19 @@ export const radioItems = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemradio" tabindex="0" aria-checked="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -222,7 +222,7 @@ export const radioItemsDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -231,19 +231,19 @@ export const radioItemsDisabledItem = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemradio" aria-checked="true" aria-disabled="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio" tabindex="0">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -257,7 +257,7 @@ export const checkboxItems = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -266,19 +266,19 @@ export const checkboxItems = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -292,7 +292,7 @@ export const checkboxItemsDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -301,19 +301,19 @@ export const checkboxItemsDisabledItem = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" tabindex="0">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -327,7 +327,7 @@ export const longOptionText = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -353,7 +353,7 @@ export const menuIcons = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -361,7 +361,7 @@ export const menuIcons = () => `
     <div class="menu-button__menu">
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--settings-24" aria-label="Settings" role="icon">
+                <svg class="icon icon--24" aria-label="Settings" role="icon">
                     <use href="#icon-settings-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
@@ -369,7 +369,7 @@ export const menuIcons = () => `
                 </span>
             </div>
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--calendar-24" aria-label="Calendar" role="icon">
+                <svg class="icon icon--24" aria-label="Calendar" role="icon">
                     <use href="#icon-calendar-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
@@ -377,7 +377,7 @@ export const menuIcons = () => `
                 </span>
             </div>
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--profile-24" aria-label="Profile" role="icon">
+                <svg class="icon icon--24" aria-label="Profile" role="icon">
                     <use href="#icon-profile-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
@@ -394,7 +394,7 @@ export const separator = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -421,7 +421,7 @@ export const textSpacing = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>

package/src/{less → sass}/menu-button/stories/cascade.stories.js

@@ -6,7 +6,7 @@ export const RTL = () => `
     <button class="btn btn--secondary" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -34,7 +34,7 @@ export const colour = () => `
         <button class="btn" aria-expanded="true" aria-haspopup="true" style="background-color: #6a29b9; color: white" type="button">
             <span class="btn__cell">
                 <span class="btn__text">Button</span>
-                <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
@@ -62,7 +62,7 @@ export const fontSize = () => `
         <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
             <span class="btn__cell">
                 <span class="btn__text">Button</span>
-                <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
@@ -71,19 +71,19 @@ export const fontSize = () => `
             <div class="menu-button__items" role="menu">
                 <div class="menu-button__item" role="menuitemradio" tabindex="0" aria-checked="true">
                     <span>Item 10000</span>
-                    <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                    <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                         <use href="#icon-tick-16"></use>
                     </svg>
                 </div>
                 <div class="menu-button__item" role="menuitemradio">
                     <span>Item 20000</span>
-                    <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                    <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                         <use href="#icon-tick-16"></use>
                     </svg>
                 </div>
                 <div class="menu-button__item" role="menuitemradio">
                     <span>Item 30000</span>
-                    <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
+                    <svg class="icon icon--16" height="8" width="8" aria-hidden="true">
                         <use href="#icon-tick-16"></use>
                     </svg>
                 </div>

package/src/{less → sass}/menu-button/stories/dimensions.stories.js

@@ -5,7 +5,7 @@ export const fixedWidth = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>