@ebay/skin 17.5.0 → 18.0.0

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

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconAndText = () => `
 <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>
@@ -15,7 +15,7 @@ export const iconAndText = () => `
 export const disabled = () => `
 <button type="button" class="btn btn--primary" disabled>
     <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>
@@ -24,7 +24,7 @@ export const disabled = () => `
 export const partiallyDisabled = () => `
 <button type="button" class="btn btn--primary" aria-disabled="true">
     <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>
@@ -34,7 +34,7 @@ export const busy = () => `
 <button class="btn btn--primary" 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/secondary.stories.js

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconAndText = () => `
 <button type="button" class="btn btn--secondary">
     <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>
@@ -15,7 +15,7 @@ export const iconAndText = () => `
 export const disabled = () => `
 <button type="button" class="btn btn--secondary" disabled>
     <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>
@@ -24,7 +24,7 @@ export const disabled = () => `
 export const partiallyDisabled = () => `
 <button type="button" class="btn btn--secondary" aria-disabled="true">
     <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>
@@ -34,7 +34,7 @@ export const busy = () => `
 <button class="btn btn--secondary" 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/tertiary.stories.js

@@ -7,7 +7,7 @@ export const textOnly = () => `
 export const iconAndText = () => `
 <button type="button" class="btn btn--tertiary">
     <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>
@@ -16,7 +16,7 @@ export const iconAndText = () => `
 export const disabled = () => `
 <button type="button" class="btn btn--tertiary" disabled>
     <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>
@@ -25,7 +25,7 @@ export const disabled = () => `
 export const partiallyDisabled = () => `
 <button type="button" class="btn btn--tertiary" aria-disabled="true">
     <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>
@@ -35,7 +35,7 @@ export const busy = () => `
 <button class="btn btn--tertiary" 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/text-spacing.stories.js

@@ -9,7 +9,7 @@ export const form = () =>
 export const iconAndText = () => `
 <button type="button" class="btn demo-a11y-text-spacing">
     <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>

package/src/{less → sass}/button/stories/destructive-button/primary.stories.js

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconAndText = () => `
 <button type="button" class="btn btn--primary btn--destructive">
     <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>Destructive Button</span>
     </span>
 </button>
@@ -19,7 +19,7 @@ export const disabled = () => `
 export const disabledWithIcon = () => `
 <button type="button" class="btn btn--primary btn--destructive" disabled>
     <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>Destructive Button</span>
     </span>
 </button>
@@ -28,7 +28,7 @@ export const disabledWithIcon = () => `
 export const busy = () => `
 <button class="btn btn--primary btn--destructive" aria-label="Busy">
     <span class="progress-spinner">
-        <svg aria-hidden="true" class="icon icon--spinner-24">
+        <svg aria-hidden="true" class="icon icon--24">
             <use href="#icon-spinner-24"></use>
         </svg>
     </span>

package/src/{less → sass}/button/stories/destructive-button/secondary.stories.js

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconAndText = () => `
 <button type="button" class="btn btn--secondary btn--destructive">
     <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>Destructive Button</span>
     </span>
 </button>
@@ -19,7 +19,7 @@ export const disabled = () => `
 export const disabledWithIcon = () => `
 <button type="button" class="btn btn--secondary btn--destructive" disabled>
     <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>Destructive Button</span>
     </span>
 </button>
@@ -28,7 +28,7 @@ export const disabledWithIcon = () => `
 export const busy = () => `
 <button class="btn btn--secondary btn--destructive" aria-label="Busy">
     <span class="progress-spinner">
-        <svg aria-hidden="true" class="icon icon--spinner-24">
+        <svg aria-hidden="true" class="icon icon--24">
             <use href="#icon-spinner-24"></use>
         </svg>
     </span>

package/src/{less → sass}/button/stories/destructive-button/tertiary.stories.js

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconAndText = () => `
 <button type="button" class="btn btn--tertiary btn--destructive">
     <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>Destructive Button</span>
     </span>
 </button>
@@ -19,7 +19,7 @@ export const disabled = () => `
 export const disabledWithIcon = () => `
 <button type="button" class="btn btn--tertiary btn--destructive" disabled>
     <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>Destructive Button</span>
     </span>
 </button>
@@ -28,7 +28,7 @@ export const disabledWithIcon = () => `
 export const busy = () => `
 <button class="btn btn--tertiary btn--destructive" aria-label="Busy">
     <span class="progress-spinner">
-        <svg aria-hidden="true" class="icon icon--spinner-24">
+        <svg aria-hidden="true" class="icon icon--24">
             <use href="#icon-spinner-24"></use>
         </svg>
     </span>

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

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconAndText = () => `
 <a class="fake-btn" href="http://www.ebay.com">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>
@@ -15,7 +15,7 @@ export const iconAndText = () => `
 export const disabled = () => `
 <a class="fake-btn">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>

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

@@ -4,7 +4,7 @@ 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-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>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-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>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-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>Fake Button</span>
         </span>
     </a>

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

@@ -3,7 +3,7 @@ export default { title: "Skin/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-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>Fake Button</span>
     </span>
 </a>

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

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconOnly = () => `
 <a class="fake-btn fake-btn--primary" href="http://www.ebay.com">
     <span class="fake-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>
 </a>
 `;
@@ -14,7 +14,7 @@ export const iconOnly = () => `
 export const iconAndText = () => `
 <a class="fake-btn fake-btn--primary" href="http://www.ebay.com">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>
@@ -23,7 +23,7 @@ export const iconAndText = () => `
 export const disabled = () => `
 <a class="fake-btn fake-btn--primary">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>
@@ -32,7 +32,7 @@ export const disabled = () => `
 export const partiallyDisabled = () => `
 <a class="fake-btn fake-btn--primary" href="http://www.ebay.com" aria-disabled="true">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>

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

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconOnly = () => `
 <a class="fake-btn fake-btn--secondary" href="http://www.ebay.com">
     <span class="fake-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>
 </a>
 `;
@@ -14,7 +14,7 @@ export const iconOnly = () => `
 export const iconAndText = () => `
 <a class="fake-btn fake-btn--secondary" href="http://www.ebay.com">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>
@@ -23,7 +23,7 @@ export const iconAndText = () => `
 export const disabled = () => `
 <a class="fake-btn fake-btn--secondary">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>
@@ -32,7 +32,7 @@ export const disabled = () => `
 export const partiallyDisabled = () => `
 <a class="fake-btn fake-btn--secondary" href="http://www.ebay.com" aria-disabled="true">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>

package/src/{less → sass}/button/stories/fake-button/text-spacing.stories.js

@@ -6,7 +6,7 @@ export const textOnly = () =>
 export const iconAndText = () => `
 <a class="fake-btn demo-a11y-text-spacing" href="http://www.ebay.com">
     <span class="fake-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>Fake Button</span>
     </span>
 </a>

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

@@ -1,9 +1,9 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .calendar {
     display: table;
-    .color-token(calendar-color-token, color-foreground-primary);
+    @include color-token(calendar-color-token, color-foreground-primary);
 }
 
 /************
@@ -24,15 +24,15 @@
     flex-grow: 1;
     margin: 0;
     text-align: center;
-    width: 0; // In conjunction with `flex-grow: 1`, this forces all headers to be an equal size
+    width: 0; /* In conjunction with `flex-grow: 1`, this forces all headers to be an equal size */
 }
 
 .calendar__header h3:nth-child(2) {
-    margin-right: 40px; // total width of icon-btn--small
+    margin-right: 40px; /* total width of icon-btn--small */
 }
 
 .calendar__header h3:nth-last-child(2) {
-    margin-left: 40px; // total width of icon-btn--small
+    margin-left: 40px; /* total width of icon-btn--small */
 }
 
 .calendar__header h3:nth-child(2):nth-last-child(2) {
@@ -79,7 +79,8 @@
 }
 
 .calendar__month th {
-    .color-token(calendar-day-label-color, color-foreground-secondary);
+    @include color-token(calendar-day-label-color, color-foreground-secondary);
+
     font-weight: normal;
     line-height: var(--spacing-125);
 }
@@ -94,7 +95,7 @@
     background: none;
     border: 1px solid transparent;
     border-radius: var(--spacing-200);
-    border-style: none; // Only effects high contrast users
+    border-style: none; /* Only effects high contrast users */
     box-sizing: border-box;
     color: inherit;
     display: inline-flex;
@@ -114,19 +115,29 @@
 .calendar__month
     td:not(.calendar__cell--selected)
     > .calendar__cell--current:not(.calendar__cell--disabled) {
-    .border-color-token(calendar-day-today-border-color, color-foreground-primary);
+    @include border-color-token(
+        calendar-day-today-border-color,
+        color-foreground-primary
+    );
+
     border-style: solid;
 }
 
 .calendar__month td > :disabled,
 .calendar__month td > .calendar__cell--disabled {
-    .color-token(calendar-day-disabled-color, color-foreground-disabled);
+    @include color-token(
+        calendar-day-disabled-color,
+        color-foreground-disabled
+    );
 }
 
 .calendar__month
     td:not(.calendar__range, .calendar__cell--selected)
     > button:not(:disabled):hover {
-    .background-color-token(calendar-day-hover-background-color, color-state-primary-hover);
+    @include background-color-token(
+        calendar-day-hover-background-color,
+        color-state-primary-hover
+    );
 }
 
 .calendar__month
@@ -136,8 +147,15 @@
 }
 
 .calendar__month td.calendar__cell--selected > * {
-    .background-color-token(calendar-day-selected-background-color, color-background-inverse);
-    .color-token(calendar-day-selected-color, color-foreground-on-inverse);
+    @include background-color-token(
+        calendar-day-selected-background-color,
+        color-background-inverse
+    );
+    @include color-token(
+        calendar-day-selected-color,
+        color-foreground-on-inverse
+    );
+
     font-weight: bold;
 }
 
@@ -146,12 +164,16 @@
  ************/
 
 .calendar__range {
-    .background-color-token(calendar-day-range-background-color, color-state-secondary-active);
+    @include background-color-token(
+        calendar-day-range-background-color,
+        color-state-secondary-active
+    );
+
     position: relative;
 }
 
 .calendar__range::before {
-    // Only visible in WHCM
+    /* Only visible in WHCM */
     border: solid transparent;
     border-width: 1px 0;
     bottom: 0;
@@ -164,12 +186,12 @@
 }
 
 .calendar__range--start::before {
-    // WHCM
+    /* WHCM */
     border-left-width: 1px;
 }
 
 .calendar__range--end::before {
-    // WHCM
+    /* WHCM */
     border-right-width: 1px;
 }
 
@@ -197,5 +219,8 @@
     > :not(:disabled, [aria-disabled="true"]),
 .calendar__range--end:not(.calendar__cell--selected)
     > :not(:disabled, [aria-disabled="true"]) {
-    .background-color-token(calendar-day-range-end, color-state-secondary-active);
+    @include background-color-token(
+        calendar-day-range-end,
+        color-state-secondary-active
+    );
 }

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

@@ -306,7 +306,7 @@ export const header = () => /* HTML */ `
                     aria-label="Previous Month - July 2019"
                     variant="icon"
                 >
-                    <svg class="icon icon--chevron-left-24">
+                    <svg class="icon icon--24">
                         <use href="#icon-chevron-left-24"></use>
                     </svg>
                 </button>
@@ -316,7 +316,7 @@ export const header = () => /* HTML */ `
                     aria-label="Next Month - September 2019"
                     variant="icon"
                 >
-                    <svg class="icon icon--chevron-right-24">
+                    <svg class="icon icon--24">
                         <use href="#icon-chevron-right-24"></use>
                     </svg>
                 </button>
@@ -516,7 +516,7 @@ export const textSpacing = () => `
                     aria-label="Previous Month - July 2019"
                     variant="icon"
                 >
-                    <svg class="icon icon--chevron-left-24">
+                    <svg class="icon icon--24">
                         <use href="#icon-chevron-left-24"></use>
                     </svg>
                 </button>
@@ -526,7 +526,7 @@ export const textSpacing = () => `
                     aria-label="Next Month - September 2019"
                     variant="icon"
                 >
-                    <svg class="icon icon--chevron-right-24">
+                    <svg class="icon icon--24">
                         <use href="#icon-chevron-right-24"></use>
                     </svg>
                 </button>
@@ -1003,7 +1003,7 @@ export const doubleWithHeader = () => /* HTML */ `
                     aria-label="Previous Month - July 2019"
                     variant="icon"
                 >
-                    <svg class="icon icon--chevron-left-24">
+                    <svg class="icon icon--24">
                         <use href="#icon-chevron-left-24"></use>
                     </svg>
                 </button>
@@ -1014,7 +1014,7 @@ export const doubleWithHeader = () => /* HTML */ `
                     aria-label="Next Month - October 2019"
                     variant="icon"
                 >
-                    <svg class="icon icon--chevron-right-24">
+                    <svg class="icon icon--24">
                         <use href="#icon-chevron-right-24"></use>
                     </svg>
                 </button>