@ebay/skin 17.2.0 → 17.3.0-next.0

package/src/less/carousel/stories/carousel.stories.js

@@ -4,8 +4,8 @@ export const continuous = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -21,8 +21,8 @@ export const continuous = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -33,8 +33,8 @@ export const imageTreatment = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -50,8 +50,8 @@ export const imageTreatment = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -62,8 +62,8 @@ export const imageTreatmentLarge = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -79,8 +79,8 @@ export const imageTreatmentLarge = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -94,8 +94,8 @@ export const slides = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -111,8 +111,8 @@ export const slides = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -126,8 +126,8 @@ export const slideshow = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -139,8 +139,8 @@ export const slideshow = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -160,8 +160,8 @@ export const RTL = () => `
                 <span>Top Products - Slide 1 of 4</span>
             </h4>
             <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                    <use href="#icon-chevron-left-12"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                    <use href="#icon-chevron-left-16"></use>
                 </svg>
             </button>
             <div class="carousel__viewport">
@@ -173,8 +173,8 @@ export const RTL = () => `
                 </ul>
             </div>
             <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-right-12" >
-                    <use href="#icon-chevron-right-12"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-right-16" >
+                    <use href="#icon-chevron-right-16"></use>
                 </svg>
             </button>
         </div>
@@ -191,8 +191,8 @@ export const hiddenScrollbar = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -208,8 +208,8 @@ export const hiddenScrollbar = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -221,8 +221,8 @@ export const continuousWithPaddlesVisible = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -238,8 +238,8 @@ export const continuousWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -254,8 +254,8 @@ export const slidesWithPaddlesVisible = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -271,8 +271,8 @@ export const slidesWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -287,8 +287,8 @@ export const slideshowWithPaddlesVisible = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -300,8 +300,8 @@ export const slideshowWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -318,8 +318,8 @@ export const hiddenScrollbarWithPaddlesVisible = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -335,8 +335,8 @@ export const hiddenScrollbarWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>

package/src/less/education-notice/education-notice.less

@@ -0,0 +1,74 @@
+@import "../variables/variables.less";
+@import "../mixins/private/token-mixins.less";
+
+.education-notice {
+    .background-color-token(education-notice-default-background-color, color-background-secondary);
+    .border-radius-token(education-notice-border-radius, border-radius-100);
+    color: var(--color-foreground-primary);
+    font-size: var(--font-size-default);
+    padding: var(--spacing-300);
+}
+
+.education-notice--prominent {
+    .background-color-token(education-notice-education-background-color, color-background-education);
+}
+
+.education-notice__header {
+    align-items: center;
+    display: flex;
+}
+
+.education-notice__title {
+    flex-grow: 1;
+    font-size: var(--font-size-medium);
+    font-weight: bold;
+    line-height: 1.5em;
+    margin: 0;
+    margin-inline-start: var(--spacing-150);
+}
+
+.education-notice__main {
+    margin-top: var(--spacing-200);
+}
+
+.education-notice__dismiss {
+    margin-inline-start: var(--spacing-150);
+}
+
+.education-notice button.icon-btn {
+    background-color: transparent;
+}
+
+.education-notice__header .icon--prominent {
+    color: var(--color-foreground-accent);
+}
+
+.education-notice__footer a {
+    .color-token(education-notice-foreground-color, color-foreground-primary);
+    font-size: var(--font-size-default);
+    font-weight: 700;
+    white-space: nowrap; // force links with text having more than one word to remain on same line
+}
+
+.education-notice__footer button.fake-link {
+    font-size: var(--font-size-default);
+    font-weight: bold;
+}
+
+.education-notice__main p {
+    font-size: var(--font-size-default);
+    margin: 0;
+}
+
+.education-notice__footer {
+    margin-top: var(--spacing-200);
+}
+
+.education-notice__header button.fake-link,
+.education-notice__header button.fake-link:hover {
+    .color-token(education-notice-foreground-color, color-foreground-primary);
+    font-size: var(--font-size-default);
+    font-weight: bold;
+    height: 24px;
+    width: 24px;
+}

package/src/less/education-notice/stories/base.stories.js

@@ -0,0 +1,152 @@
+export default { title: "Skin/Education Notice" };
+
+export const base = () => `
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+        <h3 class="education-notice__title">Did you know?</h3>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now split payments on two cards.</p>
+    </div>
+</section>
+`;
+
+export const prominentIcon = () => `
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--lightbulb-24 icon--prominent" height="24" width="24" aria-label="Education">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+        <h3 class="education-notice__title">Did you know?</h3>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now split payments on two cards.</p>
+    </div>
+</section>
+`;
+
+export const prominentNotice = () => `
+<section class="education-notice education-notice--prominent" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--authenticity-guarantee-24" height="24" width="24" aria-label="Education">
+            <use href="#icon-authenticity-guarantee-24"></use>
+        </svg>
+        <h3 class="education-notice__title">Authenticity Guaranteed</h3>
+    </div>
+    <div class="education-notice__main">
+        <p>Authenticity Guarantee means your item is authentic or your money back.</p>
+    </div>
+</section>
+`;
+
+export const dismissable = () => `
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--lightbulb-24" height="24" width="24" aria-label="Education">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+        <h3 class="education-notice__title">Did you know?</h3>
+        <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now split payments on two cards.</p>
+    </div>
+</section>
+`;
+
+export const actionableLink = () => `
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
+            <use href="#icon-the-ebay-vault-24"></use>
+        </svg>
+        <h3 class="education-notice__title">The Vault</h3>
+        <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now use the Vault to store items like this securely.</p>
+    </div>
+    <div class="education-notice__footer">
+        <a href="https://www.ebay.com">Learn more link</a>
+    </div>
+</section>
+`;
+
+export const actionableButton = () => `
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
+            <use href="#icon-the-ebay-vault-24"></use>
+        </svg>
+        <h3 class="education-notice__title">The Vault</h3>
+        <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now use the Vault to store items like this securely.</p>
+    </div>
+    <div class="education-notice__footer">
+        <button class="fake-link">Learn more button</button>
+    </div>
+</section>
+`;
+
+export const RTL = () => `
+<div dir="rtl">
+    <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+        <div class="education-notice__header">
+            <svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
+                <use href="#icon-the-ebay-vault-24"></use>
+            </svg>
+            <h3 class="education-notice__title">The Vault</h3>
+            <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="education-notice__main">
+            <p>You can now use the Vault to store items like this securely.</p>
+        </div>
+        <div class="education-notice__footer">
+            <a href="https://www.ebay.com">Learn more link</a>
+        </div>
+    </section>
+</div>
+`;
+
+export const textSpacing = () => `
+<section class="education-notice demo-a11y-text-spacing" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--the-ebay-vault-24" height="24" width="24" aria-label="Education">
+            <use href="#icon-the-ebay-vault-24"></use>
+        </svg>
+        <h3 class="education-notice__title">The Vault</h3>
+        <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now use the Vault to store items like this securely.</p>
+    </div>
+    <div class="education-notice__footer">
+        <button class="fake-link">Learn more button</button>
+    </div>
+</section>
+`;

package/src/less/listbox-button/listbox-button.less

@@ -42,7 +42,8 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
     .border-color-token(listbox-button-invalid-border-color, color-stroke-attention);
 }
 
-.listbox-button:not(.listbox-button--error) button.btn--form {
+.listbox-button:not(.listbox-button--error)
+    button:not([disabled], [aria-disabled="true"]).btn--form {
     .border-color-token(listbox-button-border-color, color-stroke-default);
 
     &:hover,
@@ -78,7 +79,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button.listbox-button--form button[disabled],
 .listbox-button.listbox-button--form button[aria-disabled="true"] {
     .border-color-token(listbox-button-disabled-border-color, color-background-disabled);
-    .color-token(listbox-button-disabled-foreground-color, color-foreground-primary);
+    .color-token(listbox-button-disabled-foreground-color, color-foreground-disabled);
 }
 
 .listbox-button.listbox-button--form button:focus {