@ebay/skin 15.1.0 → 15.2.0-0

package/src/less/breadcrumbs/stories/link-overflow.stories.js

@@ -0,0 +1,145 @@
+export default { title: 'Breadcrumbs/Links/Overflow' };
+
+export const minimum = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <a href="https://www.ebay.com/">ebay</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+
+                    <div role="menu" class="fake-menu-button__items">
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906">Smart Watch Bands</a>
+                        </div>
+                    </div>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a aria-current="location">Current Band</a>
+        </li>
+    </ul>
+</nav>
+`;
+
+export const collapsed = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <a href="https://www.ebay.com/">ebay</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+
+                    <div role="menu" class="fake-menu-button__items">
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906">Smart Watch Bands</a>
+                        </div>
+                    </div>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2">Smart Watch Band Long Band Text Type 2</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a aria-current="location">Current Band</a>
+        </li>
+    </ul>
+</nav>
+`;
+
+export const expanded = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <a href="https://www.ebay.com/">ebay</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="true" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
+                        <use href="#icon-overflow-small"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                    </li>
+                    <li>
+                        <a class="fake-menu-button__item" href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906">Smart Watch Bands</a>
+                    </li>
+                </ul>
+            </span>
+
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand1">Smart Watch Band Long Band Text Type 2</a>
+            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-breadcrumb"></use>
+            </svg>
+        </li>
+        <li>
+            <a aria-current="location">Current Band</a>
+        </li>
+    </ul>
+</nav>
+`;

package/src/less/cta-button/cta-button.less

@@ -58,20 +58,30 @@ span.cta-btn__cell--fixed-height svg.icon {
     width: 1rem;
 }
 
+a.cta-btn--truncated {
+    .btn-truncate();
+}
+
 a.cta-btn--large {
-    border-radius: calc(@button-height-large / 2);
+    border-radius: @button-border-radius-large;
+    display: inline-flex;
     font-size: @font-size-16;
     min-height: @button-height-large;
 }
 
+// DEPRECATED remove cta-btn--large-truncated in next major version
 a.cta-btn--large-truncated {
     .btn-truncate();
-
+    border-radius: @button-border-radius-large;
+    display: inline-flex;
     font-size: @font-size-16;
     height: @button-height-large;
 }
 
+// DEPRECATED remove cta-btn--large-fixed-height in next major version
 a.cta-btn--large-fixed-height {
+    border-radius: @button-border-radius-large;
+    display: inline-flex;
     font-size: @font-size-16;
     height: @button-height-large;
 }

package/src/less/cta-button/stories/dimensions.stories.js

@@ -0,0 +1,23 @@
+export default { title: 'CTA Button/Dimensions' };
+
+export const large = () => `
+<a class="cta-btn cta-btn--large" href="http://www.ebay.com">
+    <span class="cta-btn__cell">
+        <span>Link</span>
+        <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-cta"></use>
+        </svg>
+    </span>
+</a>
+`;
+
+export const largeFixedWidthTruncated = () => `
+<a style="width: 200px;" class="cta-btn cta-btn--large cta-btn--truncated" href="http://www.ebay.com">
+    <span class="cta-btn__cell">
+        <span>Link with a lot of text that should wrap</span>
+        <svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-cta"></use>
+        </svg>
+    </span>
+</a>
+`;

package/src/less/global/global.less

@@ -19,13 +19,13 @@ legend {
 }
 
 a {
-    .color-token(link-foreground-color-default, color-foreground-accent);
+    .color-token(link-foreground-color-default, color-foreground-primary);
 
     &:visited {
         .color-token(link-foreground-color-visited, color-foreground-visited);
     }
 
     &:hover {
-        color: var(--color-state-accent-hover);
+        .color-token(link-foreground-color-visited, color-foreground-visited);
     }
 }

package/src/less/icon-button/icon-button.less

@@ -19,7 +19,6 @@ a.icon-link {
     font-family: inherit;
     height: 40px;
     margin: 0;
-    min-width: 40px;
     padding: 0;
     vertical-align: text-bottom;
     width: 40px;
@@ -27,7 +26,7 @@ a.icon-link {
     > svg {
         .fill-token(icon-button-icon-foreground-color, color-foreground-primary);
 
-        max-width: 100%; // helps when width & height HTML attrs not set
+        max-width: 75%;
         position: relative; // Safari centering
     }
 
@@ -45,6 +44,18 @@ a.icon-link {
     }
 }
 
+button.icon-btn.icon-btn--small,
+a.icon-link.icon-link--small {
+    height: 32px;
+    width: 32px;
+}
+
+button.icon-btn.icon-btn--large,
+a.icon-link.icon-link--large {
+    height: 48px;
+    width: 48px;
+}
+
 button.icon-btn--transparent,
 a.icon-link--transparent {
     background-color: transparent;

package/src/less/link/link.less

@@ -1,7 +1,8 @@
 @import "../variables/variables.less";
 @import "../mixins/private/token-mixins.less";
 
-a.nav-link {
+a.nav-link,
+a.standalone-link {
     .color-token(nav-link-foreground-color, color-foreground-primary);
     text-decoration: none;
 
@@ -19,7 +20,7 @@ a.nav-link {
 button.fake-link {
     background-color: transparent;
     border: 0;
-    .color-token(fake-link-foreground-color, color-foreground-accent);
+    .color-token(fake-link-foreground-color, color-foreground-primary);
     font-family: inherit;
     font-size: inherit;
     padding: 0;
@@ -28,8 +29,4 @@ button.fake-link {
     &[disabled] {
         .color-token(fake-link-foreground-disabled-color, color-foreground-disabled);
     }
-
-    &:hover:not(:disabled) {
-        color: var(--color-state-accent-hover);
-    }
 }

package/src/less/mixins/private/button-mixins.less

@@ -4,6 +4,7 @@
 @button-padding-horizontal: 20px;
 @button-padding-vertical-large: 13px;
 @button-padding-horizontal-large: 20px;
+@button-border-radius-large: 24px;
 
 .btn-base() {
     border: 1px solid;

package/src/less/mixins/public/typography-mixins.less

@@ -76,7 +76,7 @@
 
 .typography-small() {
     font-size: @font-size-small;
-    line-height: 18px;
+    line-height: 16px;
 }
 
 .typography-small-bold() {

package/src/less/page-notice/page-notice.less

@@ -101,11 +101,15 @@ span[role="region"].page-notice {
 }
 
 .page-notice__main {
-    grid-column: 2;
+    grid-column: 1 / 3;
     grid-row: 1;
     padding-right: @spacing-200;
 }
 
+.page-notice__header + .page-notice__main {
+    grid-column: 2;
+}
+
 .page-notice__footer {
     grid-column: 4;
     grid-row: 1;

package/src/less/pagination/pagination.less

@@ -25,7 +25,6 @@ ol.pagination__items {
     height: 44px;
     list-style-type: none;
     margin: 0;
-    overflow: hidden;
     padding: 0;
 
     li:not([hidden]) {

package/src/less/panel-dialog/panel-dialog.less

@@ -4,8 +4,11 @@
 
 .panel-dialog[role="dialog"] {
     .dialog-base();
-
     flex-direction: column;
+
+    // need to override base as panel dialog is the only one to scroll the content only
+    /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
+    overflow-y: hidden;
 }
 
 .panel-dialog__window {
@@ -33,6 +36,9 @@
 
 .panel-dialog__main {
     .dialog-body-content();
+
+    height: 1px;
+    overflow-y: auto;
 }
 
 .panel-dialog__footer {

package/src/less/panel-dialog/stories/panel-dialog.stories.js

@@ -116,3 +116,89 @@ export const panelEndSecondaryButton = () => `
     </div>
 </div>
 `;
+
+export const panelScroll = () => `
+<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
+    <div class="panel-dialog__window">
+        <div class="panel-dialog__header">
+            <h2 id="panel-title">Scrolling Panel</h2>
+            <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="panel-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;
+
+export const panelScrollWithFooter = () => `
+<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
+    <div class="panel-dialog__window">
+        <div class="panel-dialog__header">
+            <h2 id="panel-title">Scrolling Panel with Footer</h2>
+            <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="panel-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+        <div class="panel-dialog__footer">
+            <button class="btn btn--primary">Submit</button>
+            <button class="btn">Cancel</button>
+        </div>
+    </div>
+</div>
+`;

package/src/less/section-notice/section-notice.less

@@ -68,11 +68,15 @@ span[role="region"].section-notice {
 }
 
 .section-notice__main {
-    grid-column: 2;
+    grid-column: 1 / 3;
     grid-row: 1;
     padding-right: @spacing-200;
 }
 
+.section-notice__header + .section-notice__main {
+    grid-column: 2;
+}
+
 .section-notice__footer {
     grid-column: 4;
     grid-row: 1;

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

@@ -65,6 +65,7 @@
 }
 
 .snackbar-dialog__actions .fake-link {
+    .color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
     text-decoration: none;
 
     &::first-letter {
@@ -72,6 +73,12 @@
     }
 }
 
+// this needs to be super specific to override base fake-link
+.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {
+    .color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
+    text-decoration: underline;
+}
+
 @media (min-width: 601px) {
     .snackbar-dialog {
         bottom: 20px;

package/src/less/tourtip/tourtip.less

@@ -130,7 +130,7 @@ span.tourtip__heading {
 .tourtip__footer {
     align-items: center;
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     margin-top: 16px;
     width: 100%;
 }

package/src/tokens/evo-core.css

@@ -27,7 +27,7 @@
     --color-magenta-1: #fad8f0;
     --color-magenta-2: #f5a0d9;
     --color-magenta-3: #ea5fbc;
-    --color-magenta-4: #82187c;
+    --color-magenta-4: #d11da4;
     --color-magenta-5: #a60d8a;
     --color-magenta-6: #82187c;
     --color-magenta-7: #500750;