@ebay/skin 16.0.0 → 16.1.0

package/scripts/svgo.config.js

@@ -3,48 +3,48 @@ module.exports = {
     multipass: true,
     original: false,
     plugins: [
-        'cleanupAttrs',
-        'cleanupEnableBackground',
-        'cleanupListOfValues',
-        'cleanupNumericValues',
-        'collapseGroups',
-        'convertColors',
-        'convertEllipseToCircle',
-        'convertPathData',
-        'convertShapeToPath',
-        'convertStyleToAttrs',
-        'convertTransform',
-        'inlineStyles',
-        'mergePaths',
-        'mergeStyles',
-        'minifyStyles',
-        'moveElemsAttrsToGroup',
-        'moveGroupAttrsToElems',
-        'removeComments',
-        'removeDesc',
-        'removeDimensions',
-        'removeDoctype',
-        'removeEditorsNSData',
-        'removeEmptyAttrs',
-        'removeEmptyContainers',
-        'removeEmptyText',
-        'removeHiddenElems',
-        'removeMetadata',
-        'removeNonInheritableGroupAttrs',
-        'removeRasterImages',
-        'removeScriptElement',
-        'removeStyleElement',
-        'removeTitle',
-        'removeUnknownsAndDefaults',
-        'removeUnusedNS',
-        'removeUselessDefs',
-        'removeUselessStrokeAndFill',
-        'removeViewBox',
-        'removeXMLNS',
-        'removeXMLProcInst',
-        'reusePaths',
-        'sortAttrs',
-        'sortDefsChildren',
+        "cleanupAttrs",
+        "cleanupEnableBackground",
+        "cleanupListOfValues",
+        "cleanupNumericValues",
+        "collapseGroups",
+        "convertColors",
+        "convertEllipseToCircle",
+        "convertPathData",
+        "convertShapeToPath",
+        "convertStyleToAttrs",
+        "convertTransform",
+        "inlineStyles",
+        "mergePaths",
+        "mergeStyles",
+        "minifyStyles",
+        "moveElemsAttrsToGroup",
+        "moveGroupAttrsToElems",
+        "removeComments",
+        "removeDesc",
+        "removeDimensions",
+        "removeDoctype",
+        "removeEditorsNSData",
+        "removeEmptyAttrs",
+        "removeEmptyContainers",
+        "removeEmptyText",
+        "removeHiddenElems",
+        "removeMetadata",
+        "removeNonInheritableGroupAttrs",
+        "removeRasterImages",
+        "removeScriptElement",
+        "removeStyleElement",
+        "removeTitle",
+        "removeUnknownsAndDefaults",
+        "removeUnusedNS",
+        "removeUselessDefs",
+        "removeUselessStrokeAndFill",
+        "removeViewBox",
+        "removeXMLNS",
+        "removeXMLProcInst",
+        "reusePaths",
+        "sortAttrs",
+        "sortDefsChildren",
     ],
     pretty: true,
 };

package/scripts/util.js

@@ -1,7 +1,7 @@
-const { parse } = require('parse5');
-const { serializeToString } = require('xmlserializer');
-const prettier = require('prettier');
-const fs = require('fs');
+const { parse } = require("parse5");
+const { serializeToString } = require("xmlserializer");
+const prettier = require("prettier");
+const fs = require("fs");
 
 /**
  * Convert a standard HTML5 string to XHTML-compliant string
@@ -11,25 +11,29 @@ const fs = require('fs');
 function html2xhtml(html, skipHeader) {
     const bodyHtml = html.window.document.documentElement.outerHTML;
     const dom = parse(bodyHtml);
-    const xmlHeader = skipHeader ? '' : `<?xml version="1.0" encoding="utf-8"?>\n`;
+    const xmlHeader = skipHeader
+        ? ""
+        : `<?xml version="1.0" encoding="utf-8"?>\n`;
     const parsedString = `${xmlHeader}${serializeToString(
         dom.childNodes[0].childNodes[1].childNodes[0]
     )}\n`;
-    return prettier.format(parsedString, { parser: 'html' });
+    return prettier.format(parsedString, { parser: "html" });
 }
 
 function html2xhtml2(html) {
     const bodyHtml = html.outerHTML;
     const dom = parse(bodyHtml);
-    const parsedString = `${serializeToString(dom.childNodes[0].childNodes[1].childNodes[0])}\n`;
-    return prettier.format(parsedString, { parser: 'html' });
+    const parsedString = `${serializeToString(
+        dom.childNodes[0].childNodes[1].childNodes[0]
+    )}\n`;
+    return prettier.format(parsedString, { parser: "html" });
 }
 
 function rawSvgToHtml(data) {
     return data
-        .replace(/<svg.*>/, '<div hidden>\n<svg>')
-        .replace('</svg>', '</svg>\n</div>')
-        .replace(/<\?xml.*\?>(?:\s|\S)/, '');
+        .replace(/<svg.*>/, "<div hidden>\n<svg>")
+        .replace("</svg>", "</svg>\n</div>")
+        .replace(/<\?xml.*\?>(?:\s|\S)/, "");
 }
 
 async function removeFile(file) {

package/scripts/verify-build.js

@@ -1,14 +1,14 @@
-const { spawn } = require('child_process');
+const { spawn } = require("child_process");
 
 async function executeProcess(cmd, arg) {
     return new Promise((resolve, reject) => {
         const resp = spawn(cmd, arg);
 
-        resp.stdout.on('data', (data) => {
+        resp.stdout.on("data", (data) => {
             console.log(data.toString());
         });
 
-        resp.on('close', (code) => {
+        resp.on("close", (code) => {
             if (code !== 0) {
                 reject();
             } else {
@@ -16,7 +16,7 @@ async function executeProcess(cmd, arg) {
             }
         });
 
-        resp.on('exit', (code) => {
+        resp.on("exit", (code) => {
             if (code !== 0) {
                 reject();
             } else {
@@ -36,18 +36,18 @@ async function runCmd(cmd, arg, err) {
 }
 
 async function verifyBuild() {
-    await runCmd('npm', ['run', 'build'], 'Build failed');
-    await runCmd('npm', ['run', 'postpublish'], 'Postpublish failed');
+    await runCmd("npm", ["run", "build"], "Build failed");
+    await runCmd("npm", ["run", "postpublish"], "Postpublish failed");
 
     await runCmd(
-        'git',
-        ['update-index', '--refresh'],
-        'Failed to update index, unchecked files found'
+        "git",
+        ["update-index", "--refresh"],
+        "Failed to update index, unchecked files found"
     );
     await runCmd(
-        'git',
-        ['diff-index', '--quiet', 'HEAD', '--'],
-        'Unchecked-in files found in codebase'
+        "git",
+        ["diff-index", "--quiet", "HEAD", "--"],
+        "Unchecked-in files found in codebase"
     );
 }
 

package/src/fonts/marketsans/MarketSans-Regular-WebS.css

@@ -3,9 +3,12 @@
     src: url("MarketSans-Regular-WebS.eot"); /* IE9 Compat Modes */
     src: url("MarketSans-Regular-WebS.eot?#iefix") format("embedded-opentype"),
         /* IE6-IE8 */ url("MarketSans-Regular-WebS.woff2") format("woff2"),
-        /* Super Modern Browsers */ url("MarketSans-Regular-WebS.woff") format("woff"),
-        /* Pretty Modern Browsers */ url("MarketSans-Regular-WebS.ttf") format("truetype"),
-        /* Safari, Android, iOS */ url("MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS")
+        /* Super Modern Browsers */ url("MarketSans-Regular-WebS.woff")
+            format("woff"),
+        /* Pretty Modern Browsers */ url("MarketSans-Regular-WebS.ttf")
+            format("truetype"),
+        /* Safari, Android, iOS */
+            url("MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS")
             format("svg"); /* Legacy iOS */
 
     font-weight: normal;

package/src/fonts/marketsans/MarketSans-SemiBold-WebS.css

@@ -3,9 +3,12 @@
     src: url("MarketSans-SemiBold-WebS.eot"); /* IE9 Compat Modes */
     src: url("MarketSans-SemiBold-WebS.eot?#iefix") format("embedded-opentype"),
         /* IE6-IE8 */ url("MarketSans-SemiBold-WebS.woff2") format("woff2"),
-        /* Super Modern Browsers */ url("MarketSans-SemiBold-WebS.woff") format("woff"),
-        /* Pretty Modern Browsers */ url("MarketSans-SemiBold-WebS.ttf") format("truetype"),
-        /* Safari, Android, iOS */ url("MarketSans-SemiBold-WebS.svg#MarketSans-SemiBold-WebS")
+        /* Super Modern Browsers */ url("MarketSans-SemiBold-WebS.woff")
+            format("woff"),
+        /* Pretty Modern Browsers */ url("MarketSans-SemiBold-WebS.ttf")
+            format("truetype"),
+        /* Safari, Android, iOS */
+            url("MarketSans-SemiBold-WebS.svg#MarketSans-SemiBold-WebS")
             format("svg"); /* Legacy iOS */
 
     font-weight: bold;

package/src/less/alert-dialog/alert-dialog.less

@@ -58,7 +58,7 @@
 
     &.alert-dialog--mask-fade,
     &.alert-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-hide;
+        background-color: var(--dialog-scrim-color-hide);
     }
 
     .alert-dialog__window--fade {
@@ -74,7 +74,7 @@
 
     &.alert-dialog--mask-fade,
     &.alert-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-show;
+        background-color: var(--dialog-scrim-color-show);
     }
 
     .alert-dialog__window--fade {
@@ -82,15 +82,14 @@
     }
 }
 
-// In order to prevent the margins to meet the ege of the page at medium screen sizes
-@media (min-width: calc(@_screen-size-MD + 1px)) and (max-width: @_screen-size-LG) {
+@media (min-width: @_screen-size-MD) {
     .alert-dialog__window {
         max-width: calc(88% - @spacing-400;);
     }
 }
 
-@media (min-width: calc(@_screen-size-LG + 1px)) {
+@media (min-width: @_screen-size-LG) {
     .alert-dialog__window {
-        max-width: @dialog-lightbox-max-width;
+        max-width: var(--dialog-lightbox-max-width);
     }
 }

package/src/less/alert-dialog/stories/alert-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Alert Dialog' };
+export default { title: "Alert Dialog" };
 
 export const base = () => `
 <div aria-labelledby="alert-dialog-title" aria-modal="true" class="alert-dialog alert-dialog--mask-fade" role="alertdialog">

package/src/less/badge/stories/badge.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Badge' };
+export default { title: "Badge" };
 
 export const oneDigit = () => `
 <span class="badge">1</span>

package/src/less/breadcrumbs/breadcrumbs.less

@@ -88,7 +88,10 @@ nav.breadcrumbs.breadcrumb--overflow {
 
 nav.breadcrumbs .fake-menu-button__button,
 nav.breadcrumbs .menu-button__button {
-    background-color: var(--icon-button-background-color, var(--color-background-secondary));
+    background-color: var(
+        --icon-button-background-color,
+        var(--color-background-secondary)
+    );
     height: @spacing-300;
     min-height: @spacing-300;
     min-width: @spacing-300;
@@ -110,7 +113,7 @@ nav.breadcrumbs .menu-button__menu {
     transform: rotate(180deg);
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     nav.breadcrumbs {
         margin: 16px 0;
     }

package/src/less/breadcrumbs/stories/button-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Buttons/Cascade' };
+export default { title: "Breadcrumbs/Buttons/Cascade" };
 
 export const color = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation" style="color: green">

package/src/less/breadcrumbs/stories/button-overflow.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Buttons/Overflow' };
+export default { title: "Breadcrumbs/Buttons/Overflow" };
 
 export const minimum = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">

package/src/less/breadcrumbs/stories/buttons.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Buttons' };
+export default { title: "Breadcrumbs/Buttons" };
 
 export const currentLocation = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">

package/src/less/breadcrumbs/stories/link-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Links/Cascade' };
+export default { title: "Breadcrumbs/Links/Cascade" };
 
 export const color = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation" style="color: green">

package/src/less/breadcrumbs/stories/link-overflow.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Links/Overflow' };
+export default { title: "Breadcrumbs/Links/Overflow" };
 
 export const minimum = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">

package/src/less/breadcrumbs/stories/links.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Links' };
+export default { title: "Breadcrumbs/Links" };
 
 export const currentLocation = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">

package/src/less/bundles/skin-headless.less

@@ -25,6 +25,7 @@
 @import "../signal/signal.less";
 @import "../icon/icon.less";
 @import "../icon-button/icon-button.less";
+@import "../image-placeholder/image-placeholder.less";
 @import "../infotip/infotip.less";
 @import "../inline-notice/inline-notice.less";
 @import "../lightbox-dialog/lightbox-dialog.less";

package/src/less/button/button.less

@@ -78,11 +78,6 @@ a.fake-btn--borderless .fake-btn__cell {
 button.btn svg.icon,
 a.fake-btn svg.icon {
     .btn-icon-base();
-
-    flex-shrink: 0;
-    height: 100%;
-    max-height: @button-height-small - (@button-padding-vertical * 2);
-    width: 1em;
 }
 
 button.btn__cell--fixed-height svg.icon,
@@ -102,7 +97,9 @@ a.fake-btn--primary {
 }
 
 a.fake-btn--primary {
-    outline-color: var(--color-foreground-primary); // fixes invisible focus outline in Firefox
+    outline-color: var(
+        --color-foreground-primary
+    ); // fixes invisible focus outline in Firefox
 }
 
 a.fake-btn--primary:visited {
@@ -225,7 +222,10 @@ a.fake-btn--secondary[href] {
 
 button.btn--secondary.btn--destructive,
 a.fake-btn--secondary.fake-btn--destructive {
-    background-color: var(--btn-secondary-destructive-background-color, transparent);
+    background-color: var(
+        --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);
 }
@@ -235,13 +235,17 @@ a.fake-btn--secondary.fake-btn--destructive[href] {
     &:hover,
     &:focus {
         background-color: var(--color-state-primary-hover);
-        border-color: var(--color-state-hover-foreground-on-secondary-desctructive);
+        border-color: var(
+            --color-state-hover-foreground-on-secondary-desctructive
+        );
         color: var(--color-state-hover-foreground-on-secondary-desctructive);
     }
 
     &:active {
         background-color: var(--color-state-primary-active);
-        border-color: var(--color-state-active-foreground-on-secondary-desctructive);
+        border-color: var(
+            --color-state-active-foreground-on-secondary-desctructive
+        );
         color: var(--color-state-active-foreground-on-secondary-desctructive);
     }
 }
@@ -287,7 +291,9 @@ a.fake-btn--tertiary[href] {
 }
 
 button.btn--tertiary[disabled],
-button.btn--tertiary[aria-disabled="true"]:not([aria-live="polite"][aria-disabled="true"]),
+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);
 }

package/src/less/button/stories/button/base.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Button/Base' };
+export default { title: "Button/Base" };
 
 export const textOnly = () => '<button class="btn">Button</button>';
 
@@ -10,7 +10,7 @@ export const formSlim = () =>
 export const iconAndText = () => `
 <button type="button" class="btn">
     <span class="btn__cell">
-        <svg class="icon icon--settings-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+        <svg class="icon icon--settings-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-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Button</span>
     </span>
 </button>

package/src/less/button/stories/button/borderless.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Button/Borderless' };
+export default { title: "Button/Borderless" };
 
 export const base = () => `<button class="btn btn--borderless">
     <span class="btn__cell">
@@ -9,7 +9,8 @@ export const base = () => `<button class="btn btn--borderless">
     </span>
 </button>`;
 
-export const disabled = () => `<button class="btn btn--borderless" disabled="true">
+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" focusable="false" height="8" width="8" aria-hidden="true">
@@ -18,7 +19,8 @@ export const disabled = () => `<button class="btn btn--borderless" disabled="tru
     </span>
 </button>`;
 
-export const ariaDisabled = () => `<button class="btn btn--borderless" aria-disabled="true">
+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" focusable="false" height="8" width="8" aria-hidden="true">

package/src/less/button/stories/button/cascade.stories.js

@@ -1,9 +1,9 @@
-export default { title: 'Button/Cascade' };
+export default { title: "Button/Cascade" };
 
 export const color = () => `
 <button type="button" class="btn" style="color: red;">
     <span class="btn__cell">
-        <svg class="icon icon--settings-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+        <svg class="icon icon--settings-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-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+            <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
             <span>Button</span>
         </span>
     </button>

package/src/less/button/stories/button/dimensions.stories.js

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

package/src/less/button/stories/button/primary.stories.js

@@ -1,6 +1,7 @@
-export default { title: 'Button/Primary' };
+export default { title: "Button/Primary" };
 
-export const textOnly = () => '<button class="btn btn--primary">Button</button>';
+export const textOnly = () =>
+    '<button class="btn btn--primary">Button</button>';
 
 export const iconAndText = () => `
 <button type="button" class="btn btn--primary">

package/src/less/button/stories/button/secondary.stories.js

@@ -1,6 +1,7 @@
-export default { title: 'Button/Secondary' };
+export default { title: "Button/Secondary" };
 
-export const textOnly = () => '<button class="btn btn--secondary">Button</button>';
+export const textOnly = () =>
+    '<button class="btn btn--secondary">Button</button>';
 
 export const iconAndText = () => `
 <button type="button" class="btn btn--secondary">

package/src/less/button/stories/button/tertiary.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Button/Tertiary' };
+export default { title: "Button/Tertiary" };
 
 export const textOnly = () => `
 <button class="btn btn--tertiary">Tertiary</button

package/src/less/button/stories/destructive-button/primary.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Button/Destructive/Primary' };
+export default { title: "Button/Destructive/Primary" };
 
 export const textOnly = () =>
     '<button class="btn btn--primary btn--destructive">Destructive Button</button>';

package/src/less/button/stories/destructive-button/secondary.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Button/Destructive/Secondary' };
+export default { title: "Button/Destructive/Secondary" };
 
 export const textOnly = () =>
     '<button class="btn btn--secondary btn--destructive">Destructive Button</button>';

package/src/less/button/stories/destructive-button/tertiary.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Button/Destructive/Tertiary' };
+export default { title: "Button/Destructive/Tertiary" };
 
 export const textOnly = () =>
     '<button class="btn btn--tertiary btn--destructive">Destructive Button</button>';

package/src/less/button/stories/fake-button/base.stories.js

@@ -1,11 +1,12 @@
-export default { title: 'Fake Button/Base' };
+export default { title: "Fake Button/Base" };
 
-export const textOnly = () => '<a href="http://www.ebay/com" class="fake-btn">Fake Button</a>';
+export const textOnly = () =>
+    '<a href="http://www.ebay/com" class="fake-btn">Fake Button</a>';
 
 export const iconAndText = () => `
 <a class="fake-btn" href="http://www.ebay.com">
     <span class="fake-btn__cell">
-        <svg class="icon icon--settings-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Fake Button</span>
     </span>
 </a>
@@ -14,7 +15,7 @@ export const iconAndText = () => `
 export const disabled = () => `
 <a class="fake-btn">
     <span class="fake-btn__cell">
-        <svg class="icon icon--settings-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Fake Button</span>
     </span>
 </a>

package/src/less/button/stories/fake-button/cascade.stories.js

@@ -1,10 +1,10 @@
-export default { title: 'Fake Button/Cascade' };
+export default { title: "Fake Button/Cascade" };
 
 export const RTL = () => `
 <div dir="rtl">
     <a class="fake-btn" href="http://www.ebay.com">
         <span class="fake-btn__cell">
-            <svg class="icon icon--settings-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+            <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
             <span>Fake Button</span>
         </span>
     </a>
@@ -15,7 +15,7 @@ export const color = () => `
 <div style="color: red;">
     <a class="fake-btn" href="http://www.ebay.com">
         <span class="fake-btn__cell">
-            <svg class="icon icon--settings-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+            <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
             <span>Fake Button</span>
         </span>
     </a>
@@ -26,7 +26,7 @@ export const fontSize = () => `
 <div style="font-size: 200%">
     <a class="fake-btn" href="http://www.ebay.com">
         <span class="fake-btn__cell">
-            <svg class="icon icon--settings-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+            <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
             <span>Fake Button</span>
         </span>
     </a>

package/src/less/button/stories/fake-button/dimensions.stories.js

@@ -1,9 +1,9 @@
-export default { title: 'Fake Button/Dimensions' };
+export default { title: "Fake Button/Dimensions" };
 
 export const large = () => `
 <a class="fake-btn fake-btn--large" href="http://www.ebay.com">
     <span class="fake-btn__cell">
-        <svg class="icon icon--settings-24" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
         <span>Fake Button</span>
     </span>
 </a>