@ebay/skin 17.5.0 → 18.0.0-next.0

package/src/{less → sass}/global/stories/global.stories.js

@@ -57,7 +57,7 @@ export const alignment = () => `
         <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>
@@ -69,7 +69,7 @@ export const alignment = () => `
 <span class="combobox">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
-        <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>
@@ -79,7 +79,7 @@ export const alignment = () => `
     <button class="btn btn--form btn--fixed-height" aria-expanded="false" aria-haspopup="listbox">
         <span class="btn__cell">
             <span class="btn__text">Options</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>
@@ -90,7 +90,7 @@ export const alignment = () => `
     <button class="btn btn--form btn--fixed-height" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Menu</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>
@@ -110,7 +110,7 @@ export const RTLAlignment = () => `
             <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>
@@ -122,7 +122,7 @@ export const RTLAlignment = () => `
     <span class="combobox">
         <span class="combobox__control">
             <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
-            <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>
@@ -132,7 +132,7 @@ export const RTLAlignment = () => `
         <button class="btn btn--fixed-height" aria-expanded="false" aria-haspopup="listbox">
             <span class="btn__cell">
                 <span class="btn__text">Options</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>
@@ -143,7 +143,7 @@ export const RTLAlignment = () => `
         <button class="btn btn--fixed-height" aria-haspopup="true" type="button">
             <span class="btn__cell">
                 <span class="btn__text">Menu</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>
@@ -163,7 +163,7 @@ export const alignmentLarge = () => `
         <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>
@@ -175,7 +175,7 @@ export const alignmentLarge = () => `
 <span class="combobox combobox--large">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
-        <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>
@@ -185,7 +185,7 @@ export const alignmentLarge = () => `
     <button class="btn btn--large btn--form btn--large-fixed-height" aria-expanded="false" aria-haspopup="listbox">
         <span class="btn__cell">
             <span class="btn__text">Options</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,7 +196,7 @@ export const alignmentLarge = () => `
     <button class="btn btn--large btn--form btn--large-fixed-height" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Menu</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/sass/icon/icon.scss

@@ -0,0 +1,83 @@
+@import "../mixins/private/icon-mixins";
+@import "../mixins/private/token-mixins";
+
+svg {
+    &.icon {
+        @include icon-base-mixin();
+    }
+    &.icon--12 {
+        height: 12px;
+        width: 12px;
+    }
+
+    &.icon--16 {
+        height: 16px;
+        width: 16px;
+    }
+
+    &.icon--18 {
+        height: 18px;
+        width: 18px;
+    }
+
+    &.icon--20 {
+        height: 20px;
+        width: 20px;
+    }
+
+    &.icon--24 {
+        height: 24px;
+        width: 24px;
+    }
+
+    &.icon--30 {
+        height: 30px;
+        width: 30px;
+    }
+
+    &.icon--32 {
+        height: 32px;
+        width: 32px;
+    }
+
+    &.icon--64 {
+        height: 32px;
+        width: 64px;
+    }
+
+    &.icon--12-colored {
+        height: 12px;
+    }
+
+    &.icon--16-colored {
+        height: 16px;
+    }
+
+    &.icon--18-colored {
+        height: 18px;
+    }
+
+    &.icon--20-colored {
+        height: 20px;
+    }
+
+    &.icon--24-colored {
+        height: 24px;
+    }
+
+    &.icon--30-colored {
+        height: 30px;
+    }
+
+    &.icon--32-colored {
+        height: 32px;
+    }
+
+    &.icon--64-colored {
+        height: 64px;
+    }
+
+    &.icon--disabled {
+        filter: var(--color-icon-disabled-filter);
+    }
+}

package/src/{less → sass}/icon/stories/icon.stories.js

@@ -2,7 +2,7 @@ export default { title: "Skin/Icon" };
 
 export const insideHeading = () => `
 <h2>
-    <svg class="icon icon--information-24">
+    <svg class="icon icon--24">
         <use href="#icon-information-24"></use>
     </svg>
     <span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
@@ -12,7 +12,7 @@ export const insideHeading = () => `
 export const RTLInsideHeading = () => `
 <div dir="rtl">
     <h2>
-        <svg class="icon icon--information-24">
+        <svg class="icon icon--24">
             <use href="#icon-information-24"></use>
         </svg>
         <span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
@@ -22,7 +22,7 @@ export const RTLInsideHeading = () => `
 
 export const insideParagraph = () => `
 <p>
-    <svg class="icon icon--information-24">
+    <svg class="icon icon--24">
         <use href="#icon-information-24"></use>
     </svg>
     <span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
@@ -31,7 +31,7 @@ export const insideParagraph = () => `
 
 export const insideLink = () => `
 <a href="http://www.ebay.com">
-    <svg class="icon icon--external-link-24">
+    <svg class="icon icon--24">
         <use href="#icon-external-link-24"></use>
     </svg>
     <span>There was an error with your payment. Please try again.</span>
@@ -39,7 +39,7 @@ export const insideLink = () => `
 `;
 
 export const beforeLink = () => `
-<svg class="icon icon--external-link-24">
+<svg class="icon icon--24">
     <use href="#icon-external-link-24"></use>
 </svg>
 <a href="http://www.ebay.com">

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

@@ -1,18 +1,22 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 a.icon-link {
     align-items: center;
     display: inline-flex;
 
     > svg {
-        margin: 0 auto; // horizontal centering
+        margin: 0 auto; /* horizontal centering */
     }
 }
 
 button.icon-btn,
 a.icon-link {
-    .background-color-token(icon-button-background-color, color-background-secondary);
+    @include background-color-token(
+        icon-button-background-color,
+        color-background-secondary
+    );
+
     border: 2px solid transparent;
     border-radius: 50px;
     box-sizing: border-box;
@@ -25,9 +29,13 @@ a.icon-link {
     width: 40px;
 
     > svg {
-        .fill-token(icon-button-icon-foreground-color, color-foreground-primary);
+        @include fill-token(
+            icon-button-icon-foreground-color,
+            color-foreground-primary
+        );
+
         max-width: 75%;
-        position: relative; // Safari centering
+        position: relative; /* Safari centering */
     }
 
     &:focus,
@@ -46,19 +54,31 @@ a.icon-link {
 
 button.icon-btn.icon-btn--primary,
 a.icon-link.icon-link--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
+    );
 }
 
 button.icon-btn.icon-btn--primary > svg,
 a.icon-link.icon-link--primary > svg {
-    .fill-token(icon-button-icon-foreground-color, color-foreground-on-accent);
+    @include fill-token(
+        icon-button-icon-foreground-color,
+        color-foreground-on-accent
+    );
 }
 
 button.icon-btn.icon-btn--secondary > svg,
 a.icon-link.icon-link--secondary > svg {
-    .fill-token(icon-button-icon-foreground-color, color-foreground-accent);
+    @include fill-token(
+        icon-button-icon-foreground-color,
+        color-foreground-accent
+    );
 }
 
 button.icon-btn.icon-btn--small .progress-spinner,
@@ -97,7 +117,10 @@ a.icon-link--transparent {
 }
 
 a.icon-link:visited > svg {
-    .fill-token(icon-button-icon-foreground-color, color-foreground-primary);
+    @include fill-token(
+        icon-button-icon-foreground-color,
+        color-foreground-primary
+    );
 }
 
 button[disabled].icon-btn,
@@ -106,24 +129,30 @@ a:not([href]).icon-link,
 a[aria-disabled="true"].icon-link {
     > svg {
         background-color: transparent;
-        .fill-token(color-background-disabled);
+        @include fill-token(color-background-disabled);
     }
 
     &:focus > svg,
     &:hover > svg {
-        .fill-token(color-background-disabled);
+        @include fill-token(color-background-disabled);
     }
 }
 
 a.icon-link:visited {
     &:hover > svg,
     &:focus > svg {
-        .fill-token(icon-button-icon-hover-foreground-color, color-foreground-primary);
+        @include fill-token(
+            icon-button-icon-hover-foreground-color,
+            color-foreground-primary
+        );
     }
 }
 
 a.icon-link.icon-link--primary:visited > svg {
-    .fill-token(icon-button-icon-foreground-color, color-foreground-on-accent);
+    @include fill-token(
+        icon-button-icon-foreground-color,
+        color-foreground-on-accent
+    );
 }
 
 button.icon-btn--badged,
@@ -140,14 +169,14 @@ a.icon-link--badged {
     }
 }
 
-// color-filled icons need to be filled with their color at this specificity level, because of other fill rules above
+/* color-filled icons need to be filled with their color at this specificity level, because of other fill rules above */
 button.icon-btn > svg.icon--confirmation-filled-24,
 button.icon-btn > svg.icon--confirmation-filled-16,
 a.icon-link > svg.icon--confirmation-filled-24,
 a.icon-link > svg.icon--confirmation-filled-16 {
-    .fill-token(color-foreground-confirmation);
+    @include fill-token(color-foreground-confirmation);
     &:hover {
-        .fill-token(color-foreground-confirmation);
+        @include fill-token(color-foreground-confirmation);
     }
 }
 
@@ -155,9 +184,9 @@ button.icon-btn > svg.icon--attention-filled-24,
 button.icon-btn > svg.icon--attention-filled-16,
 a.icon-link > svg.icon--attention-filled-24,
 a.icon-link > svg.icon--attention-filled-16 {
-    .fill-token(color-foreground-attention);
+    @include fill-token(color-foreground-attention);
     &:hover {
-        .fill-token(color-foreground-attention);
+        @include fill-token(color-foreground-attention);
     }
 }
 
@@ -165,9 +194,9 @@ button.icon-btn > svg.icon--information-filled-24,
 button.icon-btn > svg.icon--information-filled-16,
 a.icon-link > svg.icon--information-filled-24,
 a.icon-link > svg.icon--information-filled-16 {
-    .fill-token(color-foreground-information);
+    @include fill-token(color-foreground-information);
     &:hover {
-        .fill-token(color-foreground-information);
+        @include fill-token(color-foreground-information);
     }
 }
 
@@ -184,28 +213,43 @@ button[disabled].icon-btn.icon-btn--primary,
 button[aria-disabled="true"].icon-btn.icon-btn--primary,
 a:not([href]).icon-link.icon-link--primary,
 a[aria-disabled="true"].icon-link.icon-link--primary {
-    .background-color-token(icon-button-disabled-background-color, color-background-disabled);
-    .border-color-token(btn-primary-disabled-border-color, color-stroke-disabled);
+    @include background-color-token(
+        icon-button-disabled-background-color,
+        color-background-disabled
+    );
+    @include border-color-token(
+        btn-primary-disabled-border-color,
+        color-stroke-disabled
+    );
 }
 
 button[disabled].icon-btn.icon-btn--primary > svg,
 button[aria-disabled="true"].icon-btn.icon-btn--primary > svg,
 a:not([href]).icon-link.icon-link--primary > svg,
 a[aria-disabled="true"].icon-link.icon-link--primary > svg {
-    .fill-token(icon-button-icon-foreground-color, color-foreground-on-accent);
+    @include fill-token(
+        icon-button-icon-foreground-color,
+        color-foreground-on-accent
+    );
 }
 
 button.icon-btn.icon-btn--primary .progress-spinner,
 a.icon-link.icon-link--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.icon-btn.icon-btn--secondary,
 a.icon-link.icon-link--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
+    );
 }
 
 button.icon-btn.icon-btn--primary:not([disabled], [aria-disabled="true"]),
@@ -225,21 +269,27 @@ button.icon-btn.icon-btn--secondary .progress-spinner,
 a.icon-link.icon-link--secondary .progress-spinner,
 button.icon-btn.icon-btn--tertiary .progress-spinner,
 a.icon-link.icon-link--tertiary .progress-spinner {
-    --color-spinner-icon-foreground: #3665f366; // 40% of #3665f3
+    --color-spinner-icon-foreground: #3665f366; /* 40% of #3665f3 */
 }
 
 button[disabled].icon-btn.icon-btn--secondary,
 button[aria-disabled="true"].icon-btn.icon-btn--secondary,
 a:not([href]).icon-link.icon-link--secondary,
 a[aria-disabled="true"].icon-link.icon-link--secondary {
-    .border-color-token(btn-secondary-disabled-border-color, color-stroke-disabled);
+    @include border-color-token(
+        btn-secondary-disabled-border-color,
+        color-stroke-disabled
+    );
 }
 
 button[disabled].icon-btn.icon-btn--secondary > svg,
 button[aria-disabled="true"].icon-btn.icon-btn--secondary > svg,
 a:not([href]).icon-link.icon-blinktn--secondary > svg,
 a[aria-disabled="true"].icon-link.icon-link--secondary > svg {
-    .fill-token(icon-button-icon-foreground-color, color-foreground-disabled);
+    @include fill-token(
+        icon-button-icon-foreground-color,
+        color-foreground-disabled
+    );
 }
 
 button.icon-btn.icon-btn--secondary:not([disabled], [aria-disabled="true"]),
@@ -257,15 +307,18 @@ a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]) {
 button.icon-btn.icon-btn--tertiary,
 a.icon-link.icon-link--tertiary {
     background-color: transparent;
-    .border-color-token(btn-primary-border-color, color-stroke-default);
-    .color-token(btn-primary-foreground-color, color-foreground-accent);
+    @include border-color-token(btn-primary-border-color, color-stroke-default);
+    @include color-token(btn-primary-foreground-color, color-foreground-accent);
 }
 
 button[disabled].icon-btn.icon-btn--tertiary,
 button[aria-disabled="true"].icon-btn.icon-btn--tertiary,
 a:not([href]).icon-link.icon-link--tertiary,
 a[aria-disabled="true"].icon-link.icon-link--tertiary {
-    .border-color-token(btn-tertiary-disabled-border-color, color-stroke-disabled);
+    @include border-color-token(
+        btn-tertiary-disabled-border-color,
+        color-stroke-disabled
+    );
 }
 
 button.icon-btn.icon-btn--tertiary:not([disabled], [aria-disabled="true"]),

package/src/sass/icon-button/stories/alignment.stories.js

@@ -0,0 +1,28 @@
+export default { title: "Skin/Icon Button/Alignment" };
+
+export const menu = () => `
+<button aria-label="menu" type="button" class="icon-btn">
+    <svg class="icon icon--20" aria-hidden="true" width="16" height="16"><use href="#icon-menu-20"></use></svg>
+</button>
+<a aria-label="menu" class="icon-link" href="http://www.ebay.com">
+     <svg class="icon icon--20" aria-hidden="true" width="16" height="16"><use href="#icon-menu-20"></use></svg>
+</a>
+`;
+
+export const settings = () => `
+<button aria-label="settings" type="button" class="icon-btn">
+    <svg class="icon icon--24" aria-hidden="true" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+</button>
+<a aria-label="settings" class="icon-link" href="http://www.ebay.com">
+     <svg class="icon icon--24" aria-hidden="true" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+</a>
+`;
+
+export const close = () => `
+<button aria-label="close" type="button" class="icon-btn">
+    <svg class="icon icon--16" aria-hidden="true" width="16" height="16"><use href="#icon-close-16"></use></svg>
+</button>
+<a aria-label="close" class="icon-link" href="http://www.ebay.com">
+     <svg class="icon icon--16" aria-hidden="true" width="16" height="16"><use href="#icon-close-16"></use></svg>
+</a>
+`;