@ebay/skin 14.2.1 → 15.0.0-1

package/src/less/section-title/section-title.less

@@ -3,7 +3,7 @@
 @import "../mixins/private/token-mixins.less";
 
 .section-title {
-    align-items: center;
+    align-items: baseline;
     display: flex;
     margin: 30px 0 10px;
 }
@@ -31,7 +31,9 @@
 }
 
 .section-title__info {
+    bottom: -3px;
     margin: 0 @spacing-300 0 @spacing-100;
+    position: relative;
 }
 
 .section-title__overflow {
@@ -39,33 +41,23 @@
 }
 
 .section-title__cta,
-.section-title__info,
 .section-title__overflow {
-    align-items: center;
+    align-items: baseline;
     display: flex;
-    height: 24px;
+    height: @spacing-400;
+    margin-left: auto;
+    margin-right: 0;
 }
 
 .section-title button.icon-btn,
 .section-title__overflow button.icon-btn {
-    height: 24px;
-    width: 24px;
+    height: @spacing-400;
+    min-width: @spacing-400;
+    width: @spacing-400;
 }
 
 .section-title__title-container + button.icon-btn {
-    margin-left: 12px;
-}
-
-.section-title--giant {
-    .section-title__title {
-        .typography-large-2();
-    }
-
-    > .section-title__cta,
-    > .section-title__info,
-    > .section-title__overflow {
-        height: 32px;
-    }
+    margin-left: @spacing-100;
 }
 
 .section-title--large {
@@ -76,19 +68,7 @@
     > .section-title__cta,
     > .section-title__info,
     > .section-title__overflow {
-        height: 28px;
-    }
-}
-
-.section-title--small {
-    .section-title__title {
-        .typography-regular-bold();
-    }
-
-    > .section-title__cta,
-    > .section-title__info,
-    > .section-title__overflow {
-        height: 20px;
+        height: @spacing-400;
     }
 }
 
@@ -98,86 +78,28 @@
         margin-right: @spacing-100;
         transform: rotate(180deg);
     }
-}
-
-@media (min-width: 601px) {
-    .section-title__title {
-        .typography-large-2();
-    }
-
-    .section-title__subtitle {
-        .typography-medium();
-    }
 
     .section-title__cta {
-        font-size: @font-size-large-2;
-        margin: 0 @spacing-200;
-
-        > a {
-            .border-color-token(section-title-separator-color, color-stroke-subtle);
-            border-left-style: solid;
-            border-left-width: 2px;
-            line-height: 1.125rem;
-            padding-left: @spacing-200;
-        }
-    }
-
-    .section-title__cta-text {
-        display: inline;
-    }
-
-    .section-title__cta--no-text {
-        margin: 0;
-
-        > a {
-            border: 0;
-            padding: 0;
-        }
-
-        .section-title__cta-text {
-            display: none;
-        }
+        margin-left: 0;
+        margin-right: auto;
     }
 
-    .section-title__cta,
-    .section-title__info,
     .section-title__overflow {
-        height: 28px;
+        margin-left: 0;
+        margin-right: auto;
     }
 
-    .section-title--giant {
-        .section-title__title {
-            .typography-giant-1();
-        }
-
-        > .section-title__cta,
-        > .section-title__info,
-        > .section-title__overflow {
-            height: 40px;
-        }
+    .section-title__info {
+        margin: 0 @spacing-100 0 @spacing-300;
     }
+}
 
-    .section-title--large {
-        .section-title__title {
-            .typography-large-2();
-        }
-
-        > .section-title__cta,
-        > .section-title__info,
-        > .section-title__overflow {
-            height: 32px;
-        }
+@media (min-width: 601px) {
+    .section-title__title {
+        .typography-large-2();
     }
 
-    .section-title--small {
-        .section-title__title {
-            .typography-medium-bold();
-        }
-
-        > .section-title__cta,
-        > .section-title__info,
-        > .section-title__overflow {
-            height: 24px;
-        }
+    .section-title__subtitle {
+        .typography-medium();
     }
 }

package/src/less/section-title/stories/rtl.stories.js

@@ -23,31 +23,86 @@ export const subheading = () => `
 
 export const linked = () => `
 <div dir="rtl">
-    <div class="section-title">
+    <div class="section-title section-title">
         <div class="section-title__title-container">
-            <h2 class="section-title__title">
-                <a href="https://www.ebay.com">Today’s Deals – All With Free Shipping</a>
-                <svg class="icon icon--arrow-right-extra-small" focusable="false" height="10" width="10" aria-hidden="true">
-                    <use xlink:href="#icon-arrow-right-extra-small"></use>
-                </svg>
-            </h2>
+            <h2 class="section-title__title">Marketing Type Content Title</h2>
         </div>
+        <a class="section-title__cta" href="https://www.ebay.com">See all</a>
     </div>
 </div>
 `;
 
 export const linkedWithSubheading = () => `
+<div dir="rtl">
+    <div class="section-title section-title">
+        <div class="section-title__title-container">
+            <h2 class="section-title__title">Marketing Type Content Title</h2>
+            <span class="section-title__subtitle">Recommended for you</span>
+        </div>
+        <a class="section-title__cta" href="https://www.ebay.com">See all</a>
+    </div>
+</div>
+`;
+
+export const overflow = () => `
+<div dir="rtl">
+    <div class="section-title">
+        <div class="section-title__title-container">
+            <h2 class="section-title__title">Marketing Type Content Title</h2>
+        </div>
+        <div class="section-title__overflow">
+            <span class="menu-button">
+                <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
+                    <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
+                        <use href="#icon-overflow"></use>
+                    </svg>
+                </button>
+                <div class="menu-button__menu menu-button__menu--reverse">
+                    <div class="menu-button__items" role="menu">
+                        <div class="menu-button__item" role="menuitem"><span>Item 1</span></div>
+                        <div class="menu-button__item" role="menuitem"><span>Item 2</span></div>
+                        <div class="menu-button__item" role="menuitem"><span>Item 3</span></div>
+                    </div>
+                </div>
+            </span>
+        </div>
+    </div>
+</div>
+`;
+
+export const withFavorite = () => `
 <div dir="rtl">
     <div class="section-title">
         <div class="section-title__title-container">
-            <h2 class="section-title__title">
-                <a href="https://www.ebay.com">Today’s Deals – All With Free Shipping</a>
-                <svg class="icon icon--arrow-right-extra-small" focusable="false" height="10" width="10" aria-hidden="true">
-                    <use xlink:href="#icon-arrow-right-extra-small"></use>
+            <h2 class="section-title__title">Marketing Type Content Title</h2>
+            <span class="section-title__subtitle">Recommended for you</span>
+        </div>
+        <div class="section-title__info">
+            <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
+                <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
+                    <use href="#icon-save-small"></use>
                 </svg>
-            </h2>
+            </button>
+        </div>
+    </div>
+</div>
+`;
+
+export const withFavoriteAndLink = () => `
+<div dir="rtl">
+    <div class="section-title">
+        <div class="section-title__title-container">
+            <h2 class="section-title__title">Marketing Type Content Title</h2>
             <span class="section-title__subtitle">Recommended for you</span>
         </div>
+        <div class="section-title__info">
+            <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
+                <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
+                    <use href="#icon-save-small"></use>
+                </svg>
+            </button>
+        </div>
+        <a class="section-title__cta" href="https://www.ebay.com">See all</a>
     </div>
 </div>
 `;

package/src/less/section-title/stories/section-title.stories.js

@@ -18,62 +18,21 @@ export const subheading = () => `
 `;
 
 export const linked = () => `
-<div class="section-title">
+<div class="section-title section-title">
     <div class="section-title__title-container">
-        <h2 class="section-title__title">
-            <a href="https://www.ebay.com">Today’s Deals – All With Free Shipping</a>
-            <svg class="icon icon--arrow-right-extra-small" focusable="false" height="10" width="10" aria-hidden="true">
-                <use xlink:href="#icon-arrow-right-extra-small"></use>
-            </svg>
-        </h2>
+        <h2 class="section-title__title">Marketing Type Content Title</h2>
     </div>
+    <a class="section-title__cta" href="https://www.ebay.com">See all</a>
 </div>
 `;
 
 export const linkedWithSubheading = () => `
-<div class="section-title">
-    <div class="section-title__title-container">
-        <h2 class="section-title__title">
-            <a href="https://www.ebay.com">Today’s Deals – All With Free Shipping</a>
-            <svg class="icon icon--arrow-right-extra-small" focusable="false" height="10" width="10" aria-hidden="true">
-                <use xlink:href="#icon-arrow-right-extra-small"></use>
-            </svg>
-        </h2>
-        <span class="section-title__subtitle">Recommended for you</span>
-    </div>
-</div>
-`;
-
-export const info = () => `
-<div class="section-title">
+<div class="section-title section-title">
     <div class="section-title__title-container">
         <h2 class="section-title__title">Marketing Type Content Title</h2>
+        <span class="section-title__subtitle">Recommended for you</span>
     </div>
-    <div class="section-title__info">
-        <span class="infotip">
-            <button class="icon-btn infotip__host" type="button" aria-expanded="true" aria-label="Help">
-                <svg class="icon icon--information" focusable="false" width="24" height="24" aria-hidden="true">
-                    <use xlink:href="#icon-information"></use>
-                </svg>
-            </button>
-            <div class="infotip__overlay" style="left: -6px; right: auto; top: calc(100%); bottom: auto">
-                <span class="infotip__pointer infotip__pointer--top-left"></span>
-                <div class="infotip__mask">
-                    <div class="infotip__cell">
-                        <span class="infotip__content">
-                            <h3 class="infotip__heading">Infotip</h3>
-                            <p>Here's a tip to help you be successful at your task.</p>
-                        </span>
-                        <button class="infotip__close" type="button" aria-label="Dismiss infotip">
-                            <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                                <use xlink:href="#icon-close"></use>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </span>
-    </div>
+    <a class="section-title__cta" href="https://www.ebay.com">See all</a>
 </div>
 `;
 
@@ -86,7 +45,7 @@ export const overflow = () => `
         <span class="menu-button">
             <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
                 <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                    <use xlink:href="#icon-overflow"></use>
+                    <use href="#icon-overflow"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -101,234 +60,35 @@ export const overflow = () => `
 </div>
 `;
 
-export const giant = () => `
-<div class="section-title section-title--giant">
+export const withFavorite = () => `
+<div class="section-title">
     <div class="section-title__title-container">
-        <h2 class="section-title__title"><a href="https://www.ebay.com">Marketing Type Content Title</a></h2>
+        <h2 class="section-title__title">Marketing Type Content Title</h2>
         <span class="section-title__subtitle">Recommended for you</span>
     </div>
-    <div class="section-title__cta">
-        <a href="https://www.ebay.com" tabindex="-1" aria-hidden="true">
-            <span class="section-title__cta-text">See All</span>
-            <svg aria-hidden="true" class="section-title__cta-icon" focusable="false">
-                <use xlink:href="#icon-arrow-right-bold"></use>
-            </svg>
-        </a>
-    </div>
     <div class="section-title__info">
-        <span class="infotip">
-            <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--information" focusable="false" width="24" height="24">
-                    <use xlink:href="#icon-information"></use>
-                </svg>
-            </button>
-            <div class="infotip__overlay" style="left: -6px; right: auto; top: calc(100%); bottom: auto">
-                <span class="infotip__pointer infotip__pointer--top-left"></span>
-                <div class="infotip__mask">
-                    <div class="infotip__cell">
-                        <span class="infotip__content">
-                            <h3 class="infotip__heading">Infotip</h3>
-                            <p>Here's a tip to help you be successful at your task.</p>
-                        </span>
-                        <button class="infotip__close" type="button" aria-label="Dismiss infotip">
-                            <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                                <use xlink:href="#icon-close"></use>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div class="section-title__overflow">
-        <span class="menu-button">
-            <button class="menu-button__button icon-btn" type="button" aria-expanded="false" aria-haspopup="true" type="button">
-                <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                    <use xlink:href="#icon-overflow"></use>
-                </svg>
-            </button>
-            <div class="menu-button__menu menu-button__menu--reverse">
-                <div class="menu-button__items" role="menu">
-                    <div class="menu-button__item" role="menuitem"><span>Item 1</span></div>
-                    <div class="menu-button__item" role="menuitem"><span>Item 2</span></div>
-                    <div class="menu-button__item" role="menuitem"><span>Item 3</span></div>
-                </div>
-            </div>
-        </span>
-    </div>
-</div>
-`;
-
-export const large = () => `
-<div class="section-title section-title--large">
-    <div class="section-title__title-container">
-        <h2 class="section-title__title"><a href="https://www.ebay.com">Marketing Type Content Title</a></h2>
-        <span class="section-title__subtitle">Recommended for you</span>
-    </div>
-    <div class="section-title__cta">
-        <a href="https://www.ebay.com" tabindex="-1" aria-hidden="true">
-            <span class="section-title__cta-text">See All</span>
-            <svg aria-hidden="true" class="section-title__cta-icon" focusable="false">
-                <use xlink:href="#icon-arrow-right-bold"></use>
+        <button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
+            <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
+                <use href="#icon-save-small"></use>
             </svg>
-        </a>
-    </div>
-    <div class="section-title__info">
-        <span class="infotip">
-            <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--information" focusable="false" width="24" height="24">
-                    <use xlink:href="#icon-information"></use>
-                </svg>
-            </button>
-            <div class="infotip__overlay" style="left: -6px; right: auto; top: calc(100%); bottom: auto">
-                <span class="infotip__pointer infotip__pointer--top-left"></span>
-                <div class="infotip__mask">
-                    <div class="infotip__cell">
-                        <span class="infotip__content">
-                            <h3 class="infotip__heading">Infotip</h3>
-                            <p>Here's a tip to help you be successful at your task.</p>
-                        </span>
-                        <button class="infotip__close" type="button" aria-label="Dismiss infotip">
-                            <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                                <use xlink:href="#icon-close"></use>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div class="section-title__overflow">
-        <span class="menu-button">
-            <button class="menu-button__button icon-btn" type="button" aria-expanded="false" aria-haspopup="true" type="button">
-                <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                    <use xlink:href="#icon-overflow"></use>
-                </svg>
-            </button>
-            <div class="menu-button__menu menu-button__menu--reverse">
-                <div class="menu-button__items" role="menu">
-                    <div class="menu-button__item" role="menuitem"><span>Item 1</span></div>
-                    <div class="menu-button__item" role="menuitem"><span>Item 2</span></div>
-                    <div class="menu-button__item" role="menuitem"><span>Item 3</span></div>
-                </div>
-            </div>
-        </span>
+        </button>
     </div>
 </div>
 `;
 
-export const medium = () => `
-<div class="section-title section-title--medium">
+export const withFavoriteAndLink = () => `
+<div class="section-title">
     <div class="section-title__title-container">
-        <h2 class="section-title__title"><a href="https://www.ebay.com">Marketing Type Content Title</a></h2>
+        <h2 class="section-title__title">Marketing Type Content Title</h2>
         <span class="section-title__subtitle">Recommended for you</span>
     </div>
-    <div class="section-title__cta">
-        <a href="https://www.ebay.com" tabindex="-1" aria-hidden="true">
-            <span class="section-title__cta-text">See All</span>
-            <svg aria-hidden="true" class="section-title__cta-icon" focusable="false">
-                <use xlink:href="#icon-arrow-right-bold"></use>
-            </svg>
-        </a>
-    </div>
     <div class="section-title__info">
-        <span class="infotip">
-            <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--information" focusable="false" width="24" height="24">
-                    <use xlink:href="#icon-information"></use>
-                </svg>
-            </button>
-            <div class="infotip__overlay" style="left: -6px; right: auto; top: calc(100%); bottom: auto">
-                <span class="infotip__pointer infotip__pointer--top-left"></span>
-                <div class="infotip__mask">
-                    <div class="infotip__cell">
-                        <span class="infotip__content">
-                            <h3 class="infotip__heading">Infotip</h3>
-                            <p>Here's a tip to help you be successful at your task.</p>
-                        </span>
-                        <button class="infotip__close" type="button" aria-label="Dismiss infotip">
-                            <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                                <use xlink:href="#icon-close"></use>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div class="section-title__overflow">
-        <span class="menu-button">
-            <button class="menu-button__button icon-btn" type="button" aria-expanded="false" aria-haspopup="true" type="button">
-                <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                    <use xlink:href="#icon-overflow"></use>
-                </svg>
-            </button>
-            <div class="menu-button__menu menu-button__menu--reverse">
-                <div class="menu-button__items" role="menu">
-                    <div class="menu-button__item" role="menuitem"><span>Item 1</span></div>
-                    <div class="menu-button__item" role="menuitem"><span>Item 2</span></div>
-                    <div class="menu-button__item" role="menuitem"><span>Item 3</span></div>
-                </div>
-            </div>
-        </span>
-    </div>
-</div>
-`;
-
-export const small = () => `
-<div class="section-title section-title--small">
-    <div class="section-title__title-container">
-        <h2 class="section-title__title"><a href="https://www.ebay.com">Marketing Type Content Title</a></h2>
-        <span class="section-title__subtitle">Recommended for you</span>
-    </div>
-    <div class="section-title__cta">
-        <a href="https://www.ebay.com" tabindex="-1" aria-hidden="true">
-            <span class="section-title__cta-text">See All</span>
-            <svg aria-hidden="true" class="section-title__cta-icon" focusable="false">
-                <use xlink:href="#icon-arrow-right-bold"></use>
+        <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
+            <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
+                <use href="#icon-save-small"></use>
             </svg>
-        </a>
-    </div>
-    <div class="section-title__info">
-        <span class="infotip">
-            <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--information" focusable="false" width="24" height="24">
-                    <use xlink:href="#icon-information"></use>
-                </svg>
-            </button>
-            <div class="infotip__overlay" style="left: -6px; right: auto; top: calc(100%); bottom: auto">
-                <span class="infotip__pointer infotip__pointer--top-left"></span>
-                <div class="infotip__mask">
-                    <div class="infotip__cell">
-                        <span class="infotip__content">
-                            <h3 class="infotip__heading">Infotip</h3>
-                            <p>Here's a tip to help you be successful at your task.</p>
-                        </span>
-                        <button class="infotip__close" type="button" aria-label="Dismiss infotip">
-                            <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                                <use xlink:href="#icon-close"></use>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div class="section-title__overflow">
-        <span class="menu-button">
-            <button class="menu-button__button icon-btn" type="button" aria-expanded="false" aria-haspopup="true" type="button">
-                <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                    <use xlink:href="#icon-overflow"></use>
-                </svg>
-            </button>
-            <div class="menu-button__menu menu-button__menu--reverse">
-                <div class="menu-button__items" role="menu">
-                    <div class="menu-button__item" role="menuitem"><span>Item 1</span></div>
-                    <div class="menu-button__item" role="menuitem"><span>Item 2</span></div>
-                    <div class="menu-button__item" role="menuitem"><span>Item 3</span></div>
-                </div>
-            </div>
-        </span>
+        </button>
     </div>
+    <a class="section-title__cta" href="https://www.ebay.com">See all</a>
 </div>
 `;

package/src/less/snackbar-dialog/snackbar-dialog.less

@@ -3,17 +3,19 @@
 @import "../mixins/private/token-mixins.less";
 
 .snackbar-dialog {
-    .background-color-token(snackbar-dialog-background-color, color-background-secondary);
-    bottom: 0;
+    .background-color-token(snackbar-dialog-background-color, color-background-inverse);
+    .border-radius-token(snackbar-dialog-border-radius, border-radius-100);
+    bottom: 40px;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
-    .color-token(snackbar-dialog-foreground-color, color-foreground-primary);
-    left: 0;
+    .color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
+    left: @spacing-100;
+    margin: auto;
     max-height: 40vh;
-    min-width: 320px;
+    max-width: 448px;
     position: fixed;
+    right: @spacing-100;
     // Setting translateY to 0 to fix a bug in safari which does a double transform
     transform: translateY(0);
-    width: 100vw;
     will-change: opacity, transform;
     z-index: 2;
 }
@@ -72,11 +74,7 @@
 
 @media (min-width: 601px) {
     .snackbar-dialog {
-        .border-radius-token(snackbar-dialog-border-radius, border-radius-100);
-        bottom: 16px;
-        left: 16px;
-        max-width: 480px;
-        width: auto;
+        bottom: 20px;
     }
 }