@ebay/skin 14.0.6 → 14.1.0-0

package/src/less/icon/generated/general.less

@@ -92,8 +92,8 @@ svg.icon--following {
     width: 16px;
 }
 svg.icon--flag {
-    height: 21.34px;
-    width: 13.36px;
+    height: 24px;
+    width: 24px;
 }
 svg.icon--key {
     height: 13.5px;
@@ -195,3 +195,103 @@ svg.icon--scan {
     height: 24px;
     width: 24px;
 }
+svg.icon--lightbulb-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--visa-xsmall {
+    height: 13px;
+    width: 21px;
+}
+svg.icon--visa-small {
+    height: 19px;
+    width: 31px;
+}
+svg.icon--visa {
+    height: 25px;
+    width: 39px;
+}
+svg.icon--visa-large {
+    height: 33px;
+    width: 51px;
+}
+svg.icon--archive {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--archive-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--inbox {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--inbox-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--folder {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--folder-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--reply {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--reply-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--live-eye {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--live-eye-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--return {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--return-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--undo {
+    height: 25px;
+    width: 24px;
+}
+svg.icon--certified-recycle {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--certified-recycle-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--selling-medium {
+    height: 20px;
+    width: 20px;
+}
+svg.icon--sort-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--sort-up-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--sort-down-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--flag-small {
+    height: 16px;
+    width: 16px;
+}

package/src/less/icon/generated/interface.less

@@ -76,8 +76,8 @@ svg.icon--share {
     width: 24px;
 }
 svg.icon--messages {
-    height: 18px;
-    width: 22px;
+    height: 24px;
+    width: 24px;
 }
 svg.icon--send {
     height: 19px;
@@ -139,3 +139,35 @@ svg.icon--zoom-out {
     height: 24px;
     width: 24px;
 }
+svg.icon--messages-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--mail-open {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--mail-open-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--mail-move {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--mail-move-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--mail-unread {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--mail-unread-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--download-small {
+    height: 16px;
+    width: 16px;
+}

package/src/less/icon/generated/internal.less

@@ -19,6 +19,10 @@ svg.icon--radio-unchecked-large {
     height: 24px;
     width: 24px;
 }
+svg.icon--stepper-current {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--stepper-confirmation {
     height: 24px;
     width: 24px;

package/src/less/icon/generated/large.less

@@ -36,8 +36,8 @@ svg.icon--location-large {
     width: 42px;
 }
 svg.icon--messages-large {
-    height: 48px;
-    width: 58px;
+    height: 64px;
+    width: 64px;
 }
 svg.icon--purchases-large {
     height: 56px;
@@ -75,3 +75,7 @@ svg.icon--play-large {
     height: 60px;
     width: 60px;
 }
+svg.icon--bids-large {
+    height: 64px;
+    width: 64px;
+}

package/src/less/icon/generated/photo.less

@@ -8,12 +8,12 @@ svg.icon--photo-crop {
     width: 20px;
 }
 svg.icon--photo-gallery {
-    height: 22px;
-    width: 22px;
+    height: 24px;
+    width: 24px;
 }
 svg.icon--photo-gallery-more {
     height: 24px;
-    width: 22px;
+    width: 24px;
 }
 svg.icon--photo-rotate {
     height: 21px;
@@ -43,3 +43,15 @@ svg.icon--photo-sharpen {
     height: 20px;
     width: 21px;
 }
+svg.icon--photo-gallery-small {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--photo-image {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--photo-image-small {
+    height: 16px;
+    width: 16px;
+}

package/src/less/icon/generated/shipping.less

@@ -28,8 +28,8 @@ svg.icon--fast-n-free {
     width: 22px;
 }
 svg.icon--small-letter {
-    height: 14px;
-    width: 18px;
+    height: 24px;
+    width: 24px;
 }
 svg.icon--small-box {
     height: 12px;

package/src/less/icon/generated/user.less

@@ -1,7 +1,7 @@
 /* This is a generated file, DO NOT EDIT */
 svg.icon--avatar-light {
-    height: 22px;
-    width: 22px;
+    height: 40px;
+    width: 40px;
 }
 svg.icon--avatar-filled {
     height: 22px;

package/src/less/lightbox-dialog/lightbox-dialog.less

@@ -39,10 +39,14 @@
 }
 
 // inherits from .icon-btn
-button.lightbox-dialog__close {
+// Might need to see if icon-btn can support a small version
+button.icon-btn.lightbox-dialog__close {
     align-self: center;
     border: 0;
+    height: 32px;
+    min-width: 32px;
     position: relative;
+    width: 32px;
     z-index: 1;
 }
 
@@ -117,17 +121,7 @@ button.lightbox-dialog__close {
 }
 
 @media (min-width: 601px) {
-    .lightbox-dialog__window {
-        .lightbox-dialog__header {
-            .dialog-header-content-large();
-        }
-
-        .lightbox-dialog__main {
-            .dialog-body-content-large();
-        }
-
-        .lightbox-dialog__footer {
-            .dialog-footer-content-large();
-        }
+    .lightbox-dialog__window .lightbox-dialog__footer {
+        .dialog-footer-content-large();
     }
 }

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

@@ -6,8 +6,8 @@ export const base = () => `
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
             <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close" aria-hidden="true">
-                    <use xlink:href="#icon-close"></use>
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -23,13 +23,41 @@ export const base = () => `
 </div>
 `;
 
+export const baseWithFooter = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-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="lightbox-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>
+        </div>
+        <div class="lightbox-dialog__footer">
+            <button class="btn btn--primary">Submit</button>
+            <button class="btn">Cancel</button>
+        </div>
+
+    </div>
+</div>
+`;
+
 export const mini = () => `
 <div aria-label="mini Example" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" role="dialog">
     <div class="lightbox-dialog__window lightbox-dialog__window--fade lightbox-dialog__window--mini">
         <div class="lightbox-dialog__header">
             <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use xlink:href="#icon-close"></use>
+                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="16" width="16">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -45,8 +73,8 @@ export const miniMinHeight = () => `
     <div class="lightbox-dialog__window lightbox-dialog__window--fade lightbox-dialog__window--mini">
         <div class="lightbox-dialog__header">
             <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use xlink:href="#icon-close"></use>
+                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="16" width="16">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -64,8 +92,8 @@ export const baseRTL = () => `
             <div class="lightbox-dialog__header">
                 <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
                 <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
-                    <svg class="icon icon--close" aria-hidden="true">
-                        <use xlink:href="#icon-close"></use>
+                    <svg class="icon icon--close-small" aria-hidden="true">
+                        <use xlink:href="#icon-close-small"></use>
                     </svg>
                 </button>
             </div>
@@ -88,8 +116,8 @@ export const miniRTL = () => `
         <div class="lightbox-dialog__window lightbox-dialog__window--fade lightbox-dialog__window--mini">
             <div class="lightbox-dialog__header">
                 <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
-                    <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                        <use xlink:href="#icon-close"></use>
+                    <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="16" width="16">
+                        <use xlink:href="#icon-close-small"></use>
                     </svg>
                 </button>
             </div>

package/src/less/link/link.less

@@ -29,7 +29,7 @@ button.fake-link {
         .color-token(fake-link-foreground-disabled-color, color-foreground-disabled);
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
         color: var(--color-state-accent-hover);
     }
 }

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

@@ -1,5 +1,6 @@
 @import "../public/utility-mixins.less";
 
+// Deprecated, remove the gutter sizes next major
 @dialog-small-gutter-size: 16px;
 @dialog-large-gutter-size: 24px;
 @dialog-scrim-color-hide: rgba(17, 24, 32, 0);
@@ -52,7 +53,7 @@
     display: flex;
     // Fix for Safari not honoring min-height
     flex-shrink: 0;
-    margin: @dialog-small-gutter-size (@dialog-small-gutter-size - 8) 0;
+    margin: @spacing-200 @spacing-200 0;
     position: relative;
 
     h1,
@@ -63,18 +64,18 @@
     h6 {
         align-self: center;
         flex: 1 1 auto;
-        margin: 0 8px;
+        margin: 0;
     }
 
     & > :last-child:not(:only-child) {
-        margin-left: 16px;
+        margin-left: @spacing-200;
     }
 }
 
 .dialog-body-content() {
     box-sizing: border-box;
     flex: 1 1 auto;
-    margin: @dialog-small-gutter-size;
+    margin: @spacing-200;
     position: relative;
 
     & > :first-child {
@@ -90,29 +91,31 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 16px;
+    padding: @spacing-200;
     position: relative;
 
     & > :not(:first-child) {
-        margin-top: 16px;
+        margin-top: @spacing-200;
     }
 }
 
+// Unused, small and large are the same now
 .dialog-header-content-large() {
-    margin: (@dialog-large-gutter-size - 8px) (@dialog-large-gutter-size - 8px) 0;
+    margin: @spacing-200 @spacing-200 0;
 }
 
+// Unused, small and large are the same now
 .dialog-body-content-large() {
-    margin: (@dialog-large-gutter-size - 8px) @dialog-large-gutter-size @dialog-large-gutter-size;
+    margin: @spacing-200;
 }
 
 .dialog-footer-content-large() {
     flex-direction: row;
     justify-content: flex-end;
-    padding: @dialog-large-gutter-size;
+    padding: 0 @spacing-200 @spacing-200;
 
     & > :not(:first-child) {
-        margin-left: @dialog-large-gutter-size;
+        margin-left: @spacing-100;
         margin-top: initial;
     }
 }

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

@@ -14,11 +14,13 @@
 
 div[role="region"].page-notice,
 section.page-notice {
-    display: flex;
+    display: grid;
+    // provide explicit structure up front, create loose markup model
+    grid-template-columns: 40px auto auto auto;
 }
 
 span[role="region"].page-notice {
-    display: inline-flex;
+    display: grid;
 }
 
 .page-notice__title {
@@ -38,6 +40,15 @@ span[role="region"].page-notice {
     font-weight: bold;
 }
 
+// force links with text having more than one word to remain on same line
+.page-notice__cta a {
+    white-space: nowrap;
+}
+
+.page-notice__dismiss {
+    cursor: pointer;
+}
+
 .page-notice a:hover {
     .color-token(page-notice-color, color-foreground-on-inverse);
 }
@@ -84,24 +95,20 @@ span[role="region"].page-notice {
 }
 
 .page-notice__header {
-    align-items: center;
-    display: flex;
-    justify-content: center;
+    grid-column: 1;
+    grid-row: 1;
     padding-right: @spacing-200;
 }
 
-.page-notice__main,
-.page-notice__footer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+.page-notice__main {
+    grid-column: 2;
+    grid-row: 1;
+    padding-right: @spacing-200;
 }
 
 .page-notice__footer {
-    flex-shrink: 0;
-    margin-left: auto;
-    padding-left: @spacing-200;
-    width: auto;
+    grid-column: 4;
+    grid-row: 1;
 }
 
 /* support legacy 6.5 notice with heading + paragaphs */
@@ -110,6 +117,14 @@ span[role="region"].page-notice {
     margin: @spacing-50 0 0;
 }
 
+p.page-notice__cta {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+    margin-right: @spacing-200;
+    margin-top: @spacing-200;
+}
+
 @media (min-width: 601px) {
     section.page-notice,
     div[role="region"].page-notice {
@@ -117,7 +132,20 @@ span[role="region"].page-notice {
         margin: @spacing-200 0;
     }
 
+    .page-notice__title {
+        margin-top: 4px;
+    }
+
+    p.page-notice__cta {
+        grid-column: 4;
+        grid-row: 1;
+        justify-self: end;
+        margin-top: 0;
+        padding-right: @spacing-200;
+    }
+
     .page-notice__footer {
+        justify-self: end;
         margin-top: 0;
     }
 }

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

@@ -126,6 +126,49 @@ export const informationWithLink = () => `
 </section>
 `;
 
+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" focusable="false" height="24" width="24" role="img" aria-label="Information">
+            <use xlink:href="#icon-information-filled"></use>
+        </svg>
+    </div>
+    <div class="page-notice__main">
+        <h3 class="page-notice__title">Notice Title</h3>
+        <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
+    </div>
+    <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-small" focusable="false" height="10" width="10">
+                <use xlink:href="#icon-close"></use>
+            </svg>
+        </a>
+    </div>
+</section>
+`;
+
+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" focusable="false" height="24" width="24" role="img" aria-label="Information">
+            <use xlink:href="#icon-information-filled"></use>
+        </svg>
+    </div>
+    <div class="page-notice__main">
+        <h3 class="page-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h3>
+    </div>
+    <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-small" focusable="false" height="10" width="10">
+                <use xlink:href="#icon-close"></use>
+            </svg>
+        </a>
+    </div>
+</section>
+`;
+
 export const formErrors = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">

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

@@ -14,7 +14,7 @@
     border-right: 1px solid rgba(153, 153, 153, 0.18);
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
-    width: calc(100% - @spacing-400);
+    width: 100%;
 }
 
 .panel-dialog__window--end {
@@ -35,18 +35,20 @@
     .dialog-body-content();
 }
 
-// deprecated & undocumented, but still used by teams
 .panel-dialog__footer {
     .dialog-footer-content();
 }
 
 // inherits from .icon-btn
-button.panel-dialog__close {
+// Might need to see to add a small icon btn
+button.icon-btn.panel-dialog__close {
     align-self: center;
     border: 0;
-    outline-offset: -@spacing-100;
+    height: 32px;
+    min-width: 32px;
     padding: 0;
     position: relative;
+    width: 32px;
     z-index: 1;
 }
 
@@ -56,6 +58,7 @@ button.panel-dialog__close {
     }
 }
 
+// Deprecated
 .panel-dialog__title--center {
     text-align: center;
 }
@@ -126,19 +129,6 @@ button.panel-dialog__close {
 
 @media (min-width: 601px) {
     .panel-dialog__window {
-        width: calc(88% - @spacing-400);
-    }
-
-    .panel-dialog__header {
-        .dialog-header-content-large();
-    }
-
-    .panel-dialog__main {
-        .dialog-body-content-large();
-    }
-
-    // deprecated & undocumented, but still used by teams
-    .panel-dialog__footer {
-        .dialog-footer-content-large();
+        width: 384px;
     }
 }