@ebay/skin 17.5.0 → 18.0.0

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

@@ -33,7 +33,7 @@ export const generalWithLink = () => `
 export const confirmationWithButton = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Confirmation">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -49,7 +49,7 @@ export const confirmationWithButton = () => `
 export const confirmationWithLink = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Confirmation">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -65,7 +65,7 @@ export const confirmationWithLink = () => `
 export const attentionWithButton = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Attention">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
@@ -81,7 +81,7 @@ export const attentionWithButton = () => `
 export const attentionWithLink = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Attention">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
@@ -97,7 +97,7 @@ export const attentionWithLink = () => `
 export const informationWithButton = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -113,7 +113,7 @@ export const informationWithButton = () => `
 export const informationWithLink = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -129,7 +129,7 @@ export const informationWithLink = () => `
 export const InformationWithParagraph = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -145,7 +145,7 @@ export const InformationWithParagraph = () => `
 export const dismissableWithTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -156,7 +156,7 @@ export const dismissableWithTitle = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="14" width="14">
+            <svg aria-hidden="true" class="icon icon--16" height="14" width="14">
                 <use href="#icon-close-16"></use>
             </svg>
         </a>
@@ -167,7 +167,7 @@ export const dismissableWithTitle = () => `
 export const dismissableWithoutTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -177,7 +177,7 @@ export const dismissableWithoutTitle = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="14" width="14">
+            <svg aria-hidden="true" class="icon icon--16" height="14" width="14">
                 <use href="#icon-close-16"></use>
             </svg>
         </a>
@@ -188,7 +188,7 @@ export const dismissableWithoutTitle = () => `
 export const formErrors = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Attention">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
@@ -202,7 +202,7 @@ export const formErrors = () => `
 export const textSpacing = () => `
 <section class="page-notice page-notice--information demo-a11y-text-spacing" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -213,7 +213,7 @@ export const textSpacing = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" height="14" width="14">
+            <svg aria-hidden="true" class="icon icon--16" height="14" width="14">
                 <use href="#icon-close-16"></use>
             </svg>
         </a>

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

@@ -4,7 +4,7 @@ export const RTL = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -22,7 +22,7 @@ export const RTL = () => `
 export const longText = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
+        <svg class="icon icon--16" height="24" width="24" role="img" aria-label="Confirmation">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -38,7 +38,7 @@ export const longText = () => `
 export const legacy = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
+        <svg class="icon icon--16" height="24" width="24" role="img" aria-label="Confirmation">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -52,7 +52,7 @@ export const legacy = () => `
 export const legacyLongText = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -66,7 +66,7 @@ export const legacyLongText = () => `
 export const legacyLongTextAndCTA = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -83,7 +83,7 @@ export const legacyLongTextAndCTA = () => `
 export const legacyMultiParagraph = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -98,7 +98,7 @@ export const legacyMultiParagraph = () => `
 export const legacyMultiParagraphWithCTA = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>

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

@@ -1,11 +1,15 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/public/utility-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
+@import "../mixins/public/utility-mixins";
 
 nav.pagination {
-    .inline-flex-items-centered();
+    @include inline-flex-items-centered();
+
+    @include color-token(
+        pagination-item-foreground-color,
+        color-foreground-secondary
+    );
 
-    .color-token(pagination-item-foreground-color, color-foreground-secondary);
     font-family: inherit;
     font-size: 1rem;
     margin: var(--spacing-100) 0;
@@ -19,7 +23,7 @@ nav.pagination button {
 }
 
 ol.pagination__items {
-    .inline-flex-items-centered();
+    @include inline-flex-items-centered();
 
     box-sizing: border-box;
     height: 44px;
@@ -28,7 +32,7 @@ ol.pagination__items {
     padding: 0;
 
     li:not([hidden]) {
-        .flex-items-centered();
+        @include flex-items-centered();
     }
 }
 
@@ -36,7 +40,7 @@ a.pagination__next,
 a.pagination__previous,
 button.pagination__next,
 button.pagination__previous {
-    .inline-flex-items-centered();
+    @include inline-flex-items-centered();
 }
 
 a.pagination__next,
@@ -50,7 +54,7 @@ button.pagination__previous {
 }
 
 .pagination__item {
-    .inline-flex-items-centered();
+    @include inline-flex-items-centered();
 
     box-sizing: border-box;
     font-weight: var(--font-weight-regular);
@@ -85,7 +89,11 @@ button.pagination__item {
     }
 
     &[aria-current="page"] {
-        .color-token(pagination-item-current-foreground-color, color-foreground-primary);
+        @include color-token(
+            pagination-item-current-foreground-color,
+            color-foreground-primary
+        );
+
         font-weight: var(--font-weight-bold);
 
         &::after {
@@ -95,12 +103,18 @@ button.pagination__item {
 
     &:not([aria-current="page"]) {
         &:active {
-            .color-token(pagination-item-active-foreground-color, color-foreground-primary);
+            @include color-token(
+                pagination-item-active-foreground-color,
+                color-foreground-primary
+            );
         }
 
         &:focus,
         &:hover {
-            .color-token(pagination-item-hover-foreground-color, color-foreground-accent);
+            @include color-token(
+                pagination-item-hover-foreground-color,
+                color-foreground-accent
+            );
 
             &::after {
                 background-color: currentColor;
@@ -108,7 +122,7 @@ button.pagination__item {
         }
     }
 
-    // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+    /* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
     &:focus:not(:focus-visible) {
         outline: none;
     }
@@ -145,7 +159,7 @@ nav.pagination--fluid ol.pagination__items li {
     }
 }
 
-@media (min-width: @_screen-size-MD) {
+@media (min-width: $_screen-size-MD) {
     nav.pagination {
         margin: var(--spacing-200) 0;
     }

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

@@ -6,7 +6,7 @@ export const fontSize = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </button>
@@ -34,7 +34,7 @@ export const fontSize = () => `
         </li>
     </ol>
     <button aria-label="Next Page" class="icon-btn pagination__next">
-        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </button>
@@ -47,7 +47,7 @@ export const color = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </button>
@@ -75,7 +75,7 @@ export const color = () => `
         </li>
     </ol>
     <button aria-label="Next Page" class="icon-btn pagination__next">
-        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </button>
@@ -89,7 +89,7 @@ export const RTL = () => `
             <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
         </span>
         <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-            <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+            <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                 <use href="#icon-arrow-left-16"></use>
             </svg>
         </button>
@@ -117,7 +117,7 @@ export const RTL = () => `
             </li>
         </ol>
         <button aria-label="Next Page" class="icon-btn pagination__next">
-            <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+            <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                 <use href="#icon-arrow-right-16"></use>
             </svg>
         </button>

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

@@ -6,7 +6,7 @@ export const base = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </button>
@@ -34,7 +34,7 @@ export const base = () => `
         </li>
     </ol>
     <button aria-label="Next Page" class="icon-btn pagination__next">
-        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </button>
@@ -47,7 +47,7 @@ export const fluid = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </button>
@@ -75,7 +75,7 @@ export const fluid = () => `
         </li>
     </ol>
     <button aria-label="Next Page" class="icon-btn pagination__next">
-        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </button>

package/src/{less → sass}/pagination/stories/link-cascade.stories.js

@@ -6,7 +6,7 @@ export const fontSize = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -34,7 +34,7 @@ export const fontSize = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
@@ -47,7 +47,7 @@ export const color = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -75,7 +75,7 @@ export const color = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
@@ -89,7 +89,7 @@ export const RTL = () => `
             <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
         </span>
         <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-            <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+            <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                 <use href="#icon-arrow-left-16"></use>
             </svg>
         </a>
@@ -117,7 +117,7 @@ export const RTL = () => `
             </li>
         </ol>
         <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-            <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+            <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                 <use href="#icon-arrow-right-16"></use>
             </svg>
         </a>

package/src/{less → sass}/pagination/stories/links.stories.js

@@ -6,7 +6,7 @@ export const base = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -34,7 +34,7 @@ export const base = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
@@ -47,7 +47,7 @@ export const fluid = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -75,7 +75,7 @@ export const fluid = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>