@ebay/skin 17.5.0 → 18.0.0

package/src/{less → sass}/section-notice/stories/icon-16.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Section Notice/Base" };
 export const body = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -16,7 +16,7 @@ export const body = () => `
 export const title = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -31,7 +31,7 @@ export const title = () => `
 export const linkCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -49,7 +49,7 @@ export const linkCTA = () => `
 export const fakeLinkCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -66,7 +66,7 @@ export const fakeLinkCTA = () => `
 export const dismiss = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -76,7 +76,7 @@ export const dismiss = () => `
     </div>
     <div class="section-notice__footer">
     <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-        <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
             <use href="#icon-close-16"></use>
         </svg>
     </button>
@@ -87,7 +87,7 @@ export const dismiss = () => `
 export const dismissAndLinkCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -98,7 +98,7 @@ export const dismissAndLinkCTA = () => `
     <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
     <div class="section-notice__footer">
         <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>
@@ -109,7 +109,7 @@ export const dismissAndLinkCTA = () => `
 export const dismissAndFakeLinkCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -122,7 +122,7 @@ export const dismissAndFakeLinkCTA = () => `
     </p>
     <div class="section-notice__footer">
         <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>
@@ -135,7 +135,7 @@ export const RTL = () => `
 <div dir="rtl">
     <div class="section-notice section-notice--confirmation" role="region">
         <div class="section-notice__header" role="region" aria-roledescription="Notice">
-            <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -146,7 +146,7 @@ export const RTL = () => `
         <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
         <div class="section-notice__footer">
             <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -158,7 +158,7 @@ export const RTL = () => `
 export const textSpacing = () => `
 <div class="section-notice section-notice--confirmation demo-a11y-text-spacing" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -171,7 +171,7 @@ export const textSpacing = () => `
     </p>
     <div class="section-notice__footer">
         <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>

package/src/{less → sass}/section-notice/stories/iconless.stories.js

@@ -51,7 +51,7 @@ export const dismiss = () => `
     </div>
     <div class="section-notice__footer">
     <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-        <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
             <use href="#icon-close-16"></use>
         </svg>
     </button>
@@ -68,7 +68,7 @@ export const dismissAndLinkCTA = () => `
     <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
     <div class="section-notice__footer">
         <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>
@@ -87,7 +87,7 @@ export const dismissAndFakeLinkCTA = () => `
     </p>
     <div class="section-notice__footer">
         <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>
@@ -106,7 +106,7 @@ export const RTL = () => `
         <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
         <div class="section-notice__footer">
             <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>

package/src/{less → sass}/section-notice/stories/test.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Section Notice/Tests" };
 export const longBody = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -13,7 +13,7 @@ export const longBody = () => `
     <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
     <div class="section-notice__footer">
         <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>
@@ -24,7 +24,7 @@ export const longBody = () => `
 export const longTitle = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
+        <svg aria-hidden="true" class="icon icon--16">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -35,7 +35,7 @@ export const longTitle = () => `
     <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
     <div class="section-notice__footer">
         <button aria-label="Close notice" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                 <use href="#icon-close-16"></use>
             </svg>
         </button>

package/src/{less/section-title/section-title.less → sass/section-title/section-title.scss}

@@ -1,6 +1,6 @@
-@import "../variables/variables.less";
-@import "../mixins/public/typography-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/public/typography-mixins";
+@import "../mixins/private/token-mixins";
 
 .section-title {
     align-items: baseline;
@@ -13,18 +13,22 @@
 }
 
 .section-title__title {
-    .typography-large-1();
+    @include typography-large-1();
 
     margin: 0;
 }
 
 .section-title__subtitle {
-    .typography-regular();
-    .color-token(section-title-subtitle-color, color-foreground-secondary);
+    @include typography-regular();
+    @include color-token(
+        section-title-subtitle-color,
+        color-foreground-secondary
+    );
 }
 
 .section-title__title svg.icon {
-    .background-color-token(color-background-secondary);
+    @include background-color-token(color-background-secondary);
+
     border-radius: 12px;
     margin-inline-start: var(--spacing-100);
     padding: 7px;
@@ -62,7 +66,7 @@
 
 .section-title--large {
     .section-title__title {
-        .typography-large-1();
+        @include typography-large-1();
     }
 
     > .section-title__cta,
@@ -92,12 +96,12 @@
     }
 }
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     .section-title__title {
-        .typography-large-2();
+        @include typography-large-2();
     }
 
     .section-title__subtitle {
-        .typography-medium();
+        @include typography-medium();
     }
 }

package/src/{less → sass}/section-title/stories/rtl.stories.js

@@ -53,7 +53,7 @@ export const overflow = () => `
         <div class="section-title__overflow">
             <span class="menu-button">
                 <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
-                    <svg class="icon icon--overflow-vertical-24" width="24" height="24" aria-hidden="true">
+                    <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
                         <use href="#icon-overflow-vertical-24"></use>
                     </svg>
                 </button>
@@ -79,7 +79,7 @@ export const withFavorite = () => `
         </div>
         <div class="section-title__info">
             <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
+                <svg aria-hidden="true" class="icon icon--16" width="16" height="14">
                     <use href="#icon-save-16"></use>
                 </svg>
             </button>
@@ -97,7 +97,7 @@ export const withFavoriteAndLink = () => `
         </div>
         <div class="section-title__info">
             <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
+                <svg aria-hidden="true" class="icon icon--16" width="16" height="14">
                     <use href="#icon-save-16"></use>
                 </svg>
             </button>

package/src/{less → sass}/section-title/stories/section-title.stories.js

@@ -44,7 +44,7 @@ export const overflow = () => `
     <div class="section-title__overflow">
         <span class="menu-button">
             <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--overflow-vertical-24" width="24" height="24" aria-hidden="true">
+                <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
                     <use href="#icon-overflow-vertical-24"></use>
                 </svg>
             </button>
@@ -68,7 +68,7 @@ export const withFavorite = () => `
     </div>
     <div class="section-title__info">
         <button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
-            <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
+            <svg aria-hidden="true" class="icon icon--16" width="16" height="14">
                 <use href="#icon-save-16"></use>
             </svg>
         </button>
@@ -84,7 +84,7 @@ export const withFavoriteAndLink = () => `
     </div>
     <div class="section-title__info">
         <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-            <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
+            <svg aria-hidden="true" class="icon icon--16" width="16" height="14">
                 <use href="#icon-save-16"></use>
             </svg>
         </button>
@@ -101,7 +101,7 @@ export const textSpacing = () => `
     </div>
     <div class="section-title__info">
         <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-            <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
+            <svg aria-hidden="true" class="icon icon--16" width="16" height="14">
                 <use href="#icon-save-16"></use>
             </svg>
         </button>

package/src/{less/segmented-buttons/segmented-buttons.less → sass/segmented-buttons/segmented-buttons.scss}

@@ -1,11 +1,11 @@
-@import "../variables/variables.less";
-@import "../mixins/private/button-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/button-mixins";
 
 .segmented-buttons {
     border: 1px solid var(--color-stroke-default);
     border-radius: var(
         --segmented-button-border-radius,
-        calc(@button-height-large / 2)
+        calc($button-height-large / 2)
     );
     max-width: 720px;
     min-width: 215px;
@@ -31,26 +31,26 @@
 .segmented-buttons__button {
     background-color: transparent;
     border: none;
-    border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
+    border-radius: var(--btn-border-radius, calc($button-height-regular / 2));
     color: var(--color-foreground-on-primary);
     font-size: var(--font-size-default);
-    min-height: calc(@button-height-regular - (var(--spacing-50) * 2));
+    min-height: calc($button-height-regular - (var(--spacing-50) * 2));
     padding: var(--spacing-100) var(--spacing-200);
     width: 100%;
 }
 
 .segmented-buttons--large .segmented-buttons__button {
-    min-height: calc(@button-height-large - (var(--spacing-50) * 2));
+    min-height: calc($button-height-large - (var(--spacing-50) * 2));
 }
 
 .segmented-buttons__button-cell {
-    .btn-cell-base();
+    @include btn-cell-base();
 
     justify-content: center;
 }
 
 .segmented-buttons__button svg.icon {
-    .btn-icon-base();
+    @include btn-icon-base();
 }
 
 .segmented-buttons__button[aria-current] {

package/src/{less → sass}/segmented-buttons/stories/segmented-buttons.stories.js

@@ -36,7 +36,7 @@ export const withIcons = () => `
             <li>
                 <button type="button" aria-current="true" class="segmented-buttons__button">
                 <span class="segmented-buttons__button-cell">
-                        <svg aria-hidden="true" class="icon icon--full-view-24" height="16" width="16">
+                        <svg aria-hidden="true" class="icon icon--24" height="16" width="16">
                             <use href="#icon-full-view-24"></use>
                         </svg>
                         <span>Desktop</span>
@@ -46,7 +46,7 @@ export const withIcons = () => `
             <li>
                 <button type="button" class="segmented-buttons__button">
                     <span class="segmented-buttons__button-cell">
-                        <svg aria-hidden="true" class="icon icon--mobile-24" height="16" width="16">
+                        <svg aria-hidden="true" class="icon icon--24" height="16" width="16">
                             <use href="#icon-mobile-24"></use>
                         </svg>
                         <span>Mobile</span>

package/src/{less/select/select.less → sass/select/select.scss}

@@ -1,8 +1,9 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .select {
-    .color-token(select-foreground-color, color-foreground-primary);
+    @include color-token(select-foreground-color, color-foreground-primary);
+
     font-size: var(--font-size-default);
     position: relative;
 }
@@ -13,8 +14,12 @@ span.select {
 
 .select select {
     appearance: none;
-    .background-color-token(select-background-color, color-background-secondary);
-    .border-color-token(select-border-color, color-stroke-default);
+    @include background-color-token(
+        select-background-color,
+        color-background-secondary
+    );
+    @include border-color-token(select-border-color, color-stroke-default);
+
     border-radius: var(--select-border-radius, var(--border-radius-50));
     border-style: solid;
     border-width: 1px;
@@ -26,7 +31,7 @@ span.select {
     vertical-align: middle;
 }
 
-.select svg.icon--chevron-down-12 {
+.select svg.icon--12 {
     height: 100%;
     pointer-events: none;
     position: absolute;
@@ -60,29 +65,49 @@ span.select {
 }
 
 .select select:focus {
-    .background-color-token(select-focus-background-color, color-background-primary);
+    @include background-color-token(
+        select-focus-background-color,
+        color-background-primary
+    );
 }
 
 .select select:focus:not(:read-only) {
-    .background-color-token(select-focus-background-color, color-background-primary);
-    .border-color-token(select-focus-border-color, color-stroke-default);
+    @include background-color-token(
+        select-focus-background-color,
+        color-background-primary
+    );
+    @include border-color-token(
+        select-focus-border-color,
+        color-stroke-default
+    );
+
     outline: 0;
     text-decoration: underline;
 }
 
-// custom IE pseudo selector for the arrow
+/* custom IE pseudo selector for the arrow */
 .select select::-ms-expand {
     display: none;
 }
 
 .select select[disabled] {
-    .border-color-token(textbox-disabled-border-color, color-background-disabled);
-    .color-token(select-disabled-foregound-color, color-foreground-disabled);
+    @include border-color-token(
+        textbox-disabled-border-color,
+        color-background-disabled
+    );
+    @include color-token(
+        select-disabled-foregound-color,
+        color-foreground-disabled
+    );
+
     opacity: 1;
 }
 
 .select select[disabled] + svg {
-    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
+    @include color-token(
+        select-disabled-foregound-color,
+        color-foreground-on-disabled
+    );
 }
 
 .select select[readonly] {
@@ -91,17 +116,27 @@ span.select {
 }
 
 .select select[aria-invalid="true"] {
-    .border-color-token(select-invalid-border-color, color-stroke-attention);
+    @include border-color-token(
+        select-invalid-border-color,
+        color-stroke-attention
+    );
+
     border-style: solid;
     border-width: 1px;
 
     &:focus {
-        .background-color-token(select-focus-background-color, color-background-primary);
-        .border-color-token(select-focus-border-color, color-stroke-default);
+        @include background-color-token(
+            select-focus-background-color,
+            color-background-primary
+        );
+        @include border-color-token(
+            select-focus-border-color,
+            color-stroke-default
+        );
     }
 }
 
-// stylelint-disable no-descending-specificity
+/* stylelint-disable no-descending-specificity */
 [dir="rtl"] {
     .select > select {
         padding-left: 30px;
@@ -118,4 +153,4 @@ span.select {
         right: auto;
     }
 }
-// stylelint-enable no-descending-specificity
+/* stylelint-enable no-descending-specificity */

package/src/{less → sass}/select/stories/cascade.stories.js

@@ -8,7 +8,7 @@ export const RTL = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <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>
@@ -22,7 +22,7 @@ export const fontSize = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>
@@ -35,7 +35,7 @@ export const color = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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}/select/stories/default.stories.js

@@ -7,7 +7,7 @@ export const defaultSelection = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>
@@ -21,7 +21,7 @@ export const forcedSelection = () => `
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
-   <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 disabled = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>
@@ -47,7 +47,7 @@ export const fluid = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>
 </div>
@@ -61,7 +61,7 @@ export const borderless = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>
@@ -74,7 +74,7 @@ export const large = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>
@@ -87,7 +87,7 @@ export const underline = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>
@@ -100,7 +100,7 @@ export const invalid = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>
@@ -113,7 +113,7 @@ export const textSpacing = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <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>