@ebay/skin 17.5.0 → 18.0.0

package/src/sass/bundles/skin-headless.scss

@@ -0,0 +1,72 @@
+@import "../variables/variables";
+@import "../marketsans/marketsans";
+@import "../global/global";
+@import "../utility/utility";
+@import "../alert-dialog/alert-dialog";
+@import "../avatar/avatar";
+@import "../badge/badge";
+@import "../breadcrumbs/breadcrumbs";
+@import "../button/button";
+@import "../carousel/carousel";
+@import "../calendar/calendar";
+@import "../chart-legend/chart-legend";
+@import "../checkbox/checkbox";
+@import "../chip/chip";
+@import "../chips-combobox/chips-combobox";
+@import "../combobox/combobox";
+@import "../confirm-dialog/confirm-dialog";
+@import "../cta-button/cta-button";
+@import "../date-textbox/date-textbox";
+@import "../details/details";
+@import "../donut-chart/donut-chart";
+@import "../drawer-dialog/drawer-dialog";
+@import "../education-notice/education-notice";
+@import "../eek/eek";
+@import "../field/field";
+@import "../filter-button/filter-button";
+@import "../filter-menu/filter-menu";
+@import "../filter-menu-button/filter-menu-button";
+@import "../flag/flag";
+@import "../floating-label/floating-label";
+@import "../fullscreen-dialog/fullscreen-dialog";
+@import "../signal/signal";
+@import "../icon/icon";
+@import "../icon-button/icon-button";
+@import "../image-placeholder/image-placeholder";
+@import "../infotip/infotip";
+@import "../inline-notice/inline-notice";
+@import "../lightbox-dialog/lightbox-dialog";
+@import "../link/link";
+@import "../listbox/listbox";
+@import "../listbox-button/listbox-button";
+@import "../menu/menu";
+@import "../menu-button/menu-button";
+@import "../page-grid/page-grid";
+@import "../page-notice/page-notice";
+@import "../pagination/pagination";
+@import "../panel-dialog/panel-dialog";
+@import "../phone-input/phone-input";
+@import "../progress-bar/progress-bar";
+@import "../progress-bar-expressive/progress-bar-expressive";
+@import "../progress-spinner/progress-spinner";
+@import "../progress-stepper/progress-stepper";
+@import "../radio/radio";
+@import "../section-notice/section-notice";
+@import "../section-title/section-title";
+@import "../segmented-buttons/segmented-buttons";
+@import "../select/select";
+@import "../skeleton/skeleton";
+@import "../snackbar-dialog/snackbar-dialog";
+@import "../split-button/split-button";
+@import "../star-rating/star-rating";
+@import "../star-rating-select/star-rating-select";
+@import "../switch/switch";
+@import "../tabs/tabs";
+@import "../textbox/textbox";
+@import "../toast-dialog/toast-dialog";
+@import "../toggle-button/toggle-button";
+@import "../toggle-button-group/toggle-button-group";
+@import "../tooltip/tooltip";
+@import "../tourtip/tourtip";
+@import "../typography/typography";
+@import "../video/video";

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

@@ -1,25 +1,31 @@
-@import "../variables/variables.less";
-@import "../mixins/private/button-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/button-mixins";
+@import "../mixins/private/token-mixins";
 
 button.btn,
 a.fake-btn {
-    .btn-base();
+    @include btn-base();
 
     background-color: transparent;
-    border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
+    border-radius: var(--btn-border-radius, calc($button-height-regular / 2));
     color: inherit;
     display: inline-block;
     font-size: var(--font-size-default);
-    min-height: @button-height-regular;
+    min-height: $button-height-regular;
     min-width: 88px;
-    padding: @button-padding-vertical @button-padding-horizontal;
+    padding: $button-padding-vertical $button-padding-horizontal;
 }
 
 button.btn[disabled],
 button.btn[aria-disabled="true"] {
-    .border-color-token(expand-btn-disabled-border-color, color-stroke-disabled);
-    .color-token(expand-btn-disabled-foreground-color, color-foreground-disabled);
+    @include border-color-token(
+        expand-btn-disabled-border-color,
+        color-stroke-disabled
+    );
+    @include color-token(
+        expand-btn-disabled-foreground-color,
+        color-foreground-disabled
+    );
 }
 
 button.btn--borderless,
@@ -46,12 +52,15 @@ a.fake-btn--borderless[aria-disabled="true"] {
 
 button.btn--borderless.btn--destructive,
 a.fake-btn--borderless.btn--destructive {
-    .color-token(btn-secondary-destructive-foreground-color, color-foreground-attention);
+    @include color-token(
+        btn-secondary-destructive-foreground-color,
+        color-foreground-attention
+    );
 }
 
 button.btn--slim,
 a.fake-btn--slim {
-    height: @button-height-regular;
+    height: $button-height-regular;
     min-width: auto;
     padding-left: var(--spacing-100);
     padding-right: var(--spacing-100);
@@ -68,9 +77,9 @@ a.fake-btn--fluid {
 
 .btn__cell,
 .fake-btn__cell {
-    .btn-cell-base();
-    .btn-cell-fixed-height();
-    .btn-cell-truncated();
+    @include btn-cell-base();
+    @include btn-cell-fixed-height();
+    @include btn-cell-truncated();
 
     justify-content: center;
 }
@@ -84,7 +93,7 @@ a.fake-btn--borderless .fake-btn__cell {
 
 button.btn svg.icon,
 a.fake-btn svg.icon {
-    .btn-icon-base();
+    @include btn-icon-base();
 }
 
 button.btn__cell--fixed-height svg.icon,
@@ -97,20 +106,30 @@ a.fake-btn__cell--fixed-height svg.icon {
 
 button.btn--primary,
 a.fake-btn--primary {
-    .background-color-token(btn-primary-background-color, color-background-accent);
-    .border-color-token(btn-primary-border-color, color-stroke-accent);
-    .color-token(btn-primary-foreground-color, color-foreground-on-accent);
+    @include background-color-token(
+        btn-primary-background-color,
+        color-background-accent
+    );
+    @include border-color-token(btn-primary-border-color, color-stroke-accent);
+    @include color-token(
+        btn-primary-foreground-color,
+        color-foreground-on-accent
+    );
+
     font-weight: bold;
 }
 
 a.fake-btn--primary {
     outline-color: var(
         --color-foreground-primary
-    ); // fixes invisible focus outline in Firefox
+    ); /* fixes invisible focus outline in Firefox */
 }
 
 a.fake-btn--primary:visited {
-    .color-token(btn-primary-foreground-color, color-foreground-on-accent);
+    @include color-token(
+        btn-primary-foreground-color,
+        color-foreground-on-accent
+    );
 }
 
 button.btn--primary:not([disabled], [aria-disabled="true"]),
@@ -128,16 +147,32 @@ a.fake-btn--primary[href] {
 
 button.btn--primary.btn--destructive,
 a.fake-btn--primary.fake-btn--destructive {
-    .background-color-token(btn-primary-destructive-background-color, color-background-attention);
-    .border-color-token(btn-primary-destructive-border-color, color-stroke-attention);
-    .color-token(btn-primary-destructive-foreground-color, color-foreground-on-attention);
+    @include background-color-token(
+        btn-primary-destructive-background-color,
+        color-background-attention
+    );
+    @include border-color-token(
+        btn-primary-destructive-border-color,
+        color-stroke-attention
+    );
+    @include color-token(
+        btn-primary-destructive-foreground-color,
+        color-foreground-on-attention
+    );
+
     font-weight: bold;
 }
 
 button.btn--primary.btn--destructive[disabled],
 button.btn--primary.btn--destructive[aria-disabled="true"] {
-    .background-color-token(btn-primary-destructive-disabled-background, color-background-disabled);
-    .border-color-token(btn-primary-destructive-disabled-border, color-stroke-disabled);
+    @include background-color-token(
+        btn-primary-destructive-disabled-background,
+        color-background-disabled
+    );
+    @include border-color-token(
+        btn-primary-destructive-disabled-border,
+        color-stroke-disabled
+    );
 }
 
 button.btn--primary.btn--destructive:not([disabled], [aria-disabled="true"]),
@@ -165,7 +200,7 @@ button.btn--form .progress-spinner {
 
 button.btn--primary .progress-spinner {
     --color-spinner-icon-background: var(--color-background-primary);
-    --color-spinner-icon-foreground: #8fa3f8; // 40% of white on top of --color-foreground-on-accent
+    --color-spinner-icon-foreground: #8fa3f8; /* 40% of white on top of --color-foreground-on-accent */
 }
 
 button.btn--primary.btn--destructive .progress-spinner {
@@ -173,47 +208,71 @@ button.btn--primary.btn--destructive .progress-spinner {
     --color-spinner-icon-foreground: #ec7089;
 }
 
-button.btn[aria-expanded="true"] svg.icon--chevron-down-12,
-a.fake-btn[aria-expanded="true"] svg.icon--chevron-down-12 {
+button.btn[aria-expanded="true"] svg.icon--12,
+a.fake-btn[aria-expanded="true"] svg.icon--12 {
     transform: rotate(180deg);
 }
 
 button.btn--large svg.icon,
 a.fake-btn--large svg.icon {
-    max-height: @button-height-large - (@button-padding-vertical-large * 2);
+    max-height: $button-height-large - ($button-padding-vertical-large * 2);
 }
 
 button.btn--small svg.icon,
 a.fake-btn--small svg.icon {
-    max-height: @button-height-small - (@button-padding-vertical-small * 2);
+    max-height: $button-height-small - ($button-padding-vertical-small * 2);
 }
 
 button.btn--primary[disabled],
 button.btn--primary[aria-disabled="true"] {
-    .background-color-token(btn-primary-disabled-background-color, color-foreground-disabled);
-    .border-color-token(btn-primary-disabled-border-color, color-foreground-disabled);
-    .color-token(btn-primary-foreground-color, color-foreground-on-accent);
+    @include background-color-token(
+        btn-primary-disabled-background-color,
+        color-foreground-disabled
+    );
+    @include border-color-token(
+        btn-primary-disabled-border-color,
+        color-foreground-disabled
+    );
+    @include color-token(
+        btn-primary-foreground-color,
+        color-foreground-on-accent
+    );
 
     svg.icon {
-        .fill-token(btn-primary-disabled-foreground-color, color-background-primary);
+        @include fill-token(
+            btn-primary-disabled-foreground-color,
+            color-background-primary
+        );
     }
 }
 
 a.fake-btn--primary:not([href]),
 a.fake-btn--primary[aria-disabled="true"] {
-    .background-color-token(btn-primary-disabled-background-color, color-foreground-disabled);
-    .border-color-token(btn-primary-disabled-border-color, color-foreground-disabled);
+    @include background-color-token(
+        btn-primary-disabled-background-color,
+        color-foreground-disabled
+    );
+    @include border-color-token(
+        btn-primary-disabled-border-color,
+        color-foreground-disabled
+    );
 }
 
 button.btn--secondary,
 a.fake-btn--secondary {
     background-color: var(--btn-secondary-background-color, transparent);
-    .border-color-token(btn-secondary-border-color, color-stroke-accent);
-    .color-token(btn-secondary-foreground-color, color-foreground-accent);
+    @include border-color-token(
+        btn-secondary-border-color,
+        color-stroke-accent
+    );
+    @include color-token(
+        btn-secondary-foreground-color,
+        color-foreground-accent
+    );
 }
 
 a.fake-btn--secondary:visited {
-    .color-token(btn-secondary-foreground-color, color-blue-4);
+    @include color-token(btn-secondary-foreground-color, color-blue-4);
 }
 
 button.btn--secondary:not([disabled], [aria-disabled="true"]),
@@ -238,8 +297,14 @@ a.fake-btn--secondary.fake-btn--destructive {
         --btn-secondary-destructive-background-color,
         transparent
     );
-    .border-color-token(btn-secondary-destructive-border-color, color-stroke-attention);
-    .color-token(btn-secondary-destructive-foreground-color, color-foreground-attention);
+    @include border-color-token(
+        btn-secondary-destructive-border-color,
+        color-stroke-attention
+    );
+    @include color-token(
+        btn-secondary-destructive-foreground-color,
+        color-foreground-attention
+    );
 }
 
 button.btn--secondary.btn--destructive:not([disabled], [aria-disabled="true"]),
@@ -269,24 +334,45 @@ button.btn--secondary.btn--destructive .progress-spinner {
 
 button.btn--secondary[disabled],
 button.btn--secondary[aria-disabled="true"] {
-    .background-color-token(btn-secondary-disabled-background-color, color-background-primary);
-    .border-color-token(btn-secondary-disabled-border-color, color-stroke-disabled);
-    .color-token(btn-secondary-disabled-foreground-color, color-background-disabled);
+    @include background-color-token(
+        btn-secondary-disabled-background-color,
+        color-background-primary
+    );
+    @include border-color-token(
+        btn-secondary-disabled-border-color,
+        color-stroke-disabled
+    );
+    @include color-token(
+        btn-secondary-disabled-foreground-color,
+        color-background-disabled
+    );
 
     svg.icon {
-        .fill-token(btn-secondary-disabled-foreground-color, color-foreground-disabled);
+        @include fill-token(
+            btn-secondary-disabled-foreground-color,
+            color-foreground-disabled
+        );
     }
 }
 
 a.fake-btn--secondary:not([href]),
 a.fake-btn--secondary[aria-disabled="true"] {
-    .border-color-token(btn-secondary-disabled-border-color, color-background-disabled);
-    .color-token(btn-secondary-disabled-foreground-color, color-background-disabled);
+    @include border-color-token(
+        btn-secondary-disabled-border-color,
+        color-background-disabled
+    );
+    @include color-token(
+        btn-secondary-disabled-foreground-color,
+        color-background-disabled
+    );
 }
 
 button.btn--tertiary,
 a.fake-btn--tertiary {
-    .border-color-token(btn-tertiary-border-color, color-stroke-default);
+    @include border-color-token(
+        btn-tertiary-border-color,
+        color-stroke-default
+    );
 }
 
 button.btn--tertiary:not([disabled], [aria-disabled="true"]),
@@ -306,12 +392,18 @@ button.btn--tertiary[aria-disabled="true"]:not(
         [aria-live="polite"][aria-disabled="true"]
     ),
 a.fake-btn--tertiary:not([href]) {
-    .color-token(btn-tertiary-disabled-foreground-color, color-background-disabled);
+    @include color-token(
+        btn-tertiary-disabled-foreground-color,
+        color-background-disabled
+    );
 }
 
 button.btn--tertiary.btn--destructive,
 a.fake-btn--tertiary.fake-btn--destructive {
-    .border-color-token(btn-tertiary-destructive-foreground-color, color-stroke-subtle);
+    @include border-color-token(
+        btn-tertiary-destructive-foreground-color,
+        color-stroke-subtle
+    );
 }
 
 button.btn--tertiary.btn--destructive:not([disabled], [aria-disabled="true"]),
@@ -328,7 +420,10 @@ a.fake-btn--tertiary.fake-btn--destructive[href] {
 
 button.btn--tertiary.btn--destructive[disabled],
 button.btn--tertiary.btn--destructive[aria-disabled="true"] {
-    .color-token(btn-tertiary-destructive-disabled-foreground-color, color-foreground-disabled);
+    @include color-token(
+        btn-tertiary-destructive-disabled-foreground-color,
+        color-foreground-disabled
+    );
 }
 
 button.btn--tertiary.btn--destructive .progress-spinner {
@@ -338,21 +433,22 @@ button.btn--tertiary.btn--destructive .progress-spinner {
 
 button.btn--large,
 a.fake-btn--large {
-    .btn-large();
+    @include btn-large();
 }
 
 button.btn--small,
 a.fake-btn--small {
-    border-radius: var(--btn-border-radius, calc(@button-height-small / 2));
+    border-radius: var(--btn-border-radius, calc($button-height-small / 2));
     font-size: var(--font-size-default);
-    min-height: @button-height-small;
-    padding: @button-padding-vertical-small @button-padding-horizontal-small;
+    min-height: $button-height-small;
+    padding: $button-padding-vertical-small $button-padding-horizontal-small;
 }
 
 button.btn--form,
 a.fake-btn--form {
     border-color: inherit;
-    .border-radius-token(expand-btn-border-radius, border-radius-50);
+    @include border-radius-token(expand-btn-border-radius, border-radius-50);
+
     max-width: 100%;
 }
 
@@ -369,11 +465,11 @@ a.fake-btn--form:not([href]) {
 }
 
 button.btn--form.btn--large {
-    padding: @button-padding-vertical-large @button-padding-horizontal-large;
+    padding: $button-padding-vertical-large $button-padding-horizontal-large;
 }
 
 button.btn--form.btn--small {
-    padding: @button-padding-vertical-small @button-padding-horizontal-small;
+    padding: $button-padding-vertical-small $button-padding-horizontal-small;
 }
 
 button.btn--transparent,
@@ -393,24 +489,24 @@ a.fake-btn--fixed-height {
 
 button.btn--large-fixed-height,
 a.fake-btn--large-fixed-height {
-    height: @button-height-large;
-    min-height: @button-height-large;
+    height: $button-height-large;
+    min-height: $button-height-large;
     padding-top: calc(27px - 0.75em);
 }
 
 button.btn--truncated,
 a.fake-btn--truncated {
-    .btn-truncate();
+    @include btn-truncate();
 }
 
 button.btn--large-truncated,
 a.fake-btn--large-truncated {
-    .btn-truncate();
+    @include btn-truncate();
 
     font-size: var(--font-size-medium);
-    height: @button-height-large;
-    min-height: @button-height-large;
-    padding: @button-padding-vertical-large @button-padding-horizontal;
+    height: $button-height-large;
+    min-height: $button-height-large;
+    padding: $button-padding-vertical-large $button-padding-horizontal;
 }
 
 button.btn--split-start,
@@ -434,10 +530,16 @@ a.fake-btn.fake-btn--tertiary.fake-btn--split-end {
 
 button.btn.btn--primary.btn--split-end,
 a.fake-btn.fake-btn--primary.fake-btn--split-end {
-    .border-left-color-token(btn-primary-border-split-color, color-background-primary);
+    @include border-left-color-token(
+        btn-primary-border-split-color,
+        color-background-primary
+    );
     &:hover,
     &:focus {
-        .border-left-color-token(btn-primary-border-split-color, color-background-primary);
+        @include border-left-color-token(
+            btn-primary-border-split-color,
+            color-background-primary
+        );
     }
 }
 
@@ -501,13 +603,25 @@ button.btn--floating-label .btn__floating-label--inline {
 
     button.btn.btn--primary.btn--split-end,
     a.fake-btn.fake-btn--primary.fake-btn--split-end {
-        .border-left-color-token(btn-primary-border-color, color-stroke-accent);
-        .border-right-color-token(primary-border-split-color, color-stroke-subtle);
+        @include border-left-color-token(
+            btn-primary-border-color,
+            color-stroke-accent
+        );
+        @include border-right-color-token(
+            primary-border-split-color,
+            color-stroke-subtle
+        );
 
         &:hover,
         &:focus {
-            .border-left-color-token(btn-primary-border-color, color-stroke-accent);
-            .border-right-color-token(primary-border-split-color, color-stroke-subtle);
+            @include border-left-color-token(
+                btn-primary-border-color,
+                color-stroke-accent
+            );
+            @include border-right-color-token(
+                primary-border-split-color,
+                color-stroke-subtle
+            );
         }
     }
 }

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

@@ -5,12 +5,12 @@ export const textOnly = () => '<button class="btn">Button</button>';
 export const form = () => '<button class="btn btn--form">Button</button>';
 
 export const formSlim = () =>
-    '<button class="btn btn--form btn--slim"><svg class="icon icon--chevron-down-12" width="16" height="16"><use href="#icon-chevron-down-12"></use></svg></button>';
+    '<button class="btn btn--form btn--slim"><svg class="icon icon--12" width="16" height="16"><use href="#icon-chevron-down-12"></use></svg></button>';
 
 export const iconAndText = () => `
 <button type="button" class="btn">
     <span class="btn__cell">
-        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <svg class="icon icon--16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Button</span>
     </span>
 </button>
@@ -19,7 +19,7 @@ export const iconAndText = () => `
 export const disabled = () => `
 <button type="button" class="btn" disabled>
     <span class="btn__cell">
-        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <svg class="icon icon--16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Button</span>
     </span>
 </button>
@@ -29,7 +29,7 @@ export const busy = () => `
 <button class="btn" aria-label="Busy">
     <span class="btn__cell">
         <span class="progress-spinner">
-            <svg class="icon icon--spinner-24" aria-hidden="true">
+            <svg class="icon icon--24" aria-hidden="true">
                 <use href="#icon-spinner-24"></use>
             </svg>
         </span>
@@ -41,7 +41,7 @@ export const formBusy = () => `
 <button class="btn btn--form" aria-label="Busy">
     <span class="btn__cell">
         <span class="progress-spinner">
-            <svg class="icon icon--spinner-24" aria-hidden="true">
+            <svg class="icon icon--24" aria-hidden="true">
                 <use href="#icon-spinner-24"></use>
             </svg>
         </span>

package/src/{less → sass}/button/stories/button/borderless.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Button/Borderless" };
 export const base = () => `<button class="btn btn--borderless">
     <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>
@@ -13,7 +13,7 @@ export const disabled =
     () => `<button class="btn btn--borderless" disabled="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>
@@ -23,7 +23,7 @@ export const ariaDisabled =
     () => `<button class="btn btn--borderless" aria-disabled="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>
@@ -31,7 +31,7 @@ export const ariaDisabled =
 
 export const empty = () => `<button class="btn btn--borderless" disabled="true">
     <span class="btn__cell">
-        <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}/button/stories/button/cascade.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Button/Cascade" };
 export const color = () => `
 <button type="button" class="btn" style="color: red;">
     <span class="btn__cell">
-        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <svg class="icon icon--16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Button</span>
     </span>
 </button>
@@ -13,7 +13,7 @@ export const fontSize = () => `
 <div style="font-size: 200%;">
     <button type="button" class="btn">
         <span class="btn__cell">
-            <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+            <svg class="icon icon--16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
             <span>Button</span>
         </span>
     </button>
@@ -24,7 +24,7 @@ export const RTL = () => `
 <div dir="rtl">
     <button type="button" class="btn btn--primary">
         <span class="btn__cell">
-            <svg class="icon icon--close-16" width="16" height="16"><use href="#icon-close-16"></use></svg>
+            <svg class="icon icon--16" width="16" height="16"><use href="#icon-close-16"></use></svg>
             <span>Button</span>
         </span>
     </button>

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

@@ -3,7 +3,7 @@ export default { title: "Skin/Button/Dimensions" };
 export const large = () => `
 <button type="button" class="btn btn--large">
     <span class="btn__cell">
-        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <svg class="icon icon--16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Button</span>
     </span>
 </button>
@@ -12,7 +12,7 @@ export const large = () => `
 export const small = () => `
 <button type="button" class="btn btn--small">
     <span class="btn__cell">
-        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <svg class="icon icon--16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Button</span>
     </span>
 </button>