@ebay/skin 14.0.4 → 14.1.0-0

package/src/less/gh/gh-mixins.less

@@ -1,207 +1,203 @@
 .alert-dialog-mixin() {
-    @import "../../../../dist/alert-dialog/alert-dialog.css";
+    @import "../../../dist/alert-dialog/alert-dialog.css";
 }
 
 .badge-mixin() {
-    @import "../../../../dist/badge/badge.css";
+    @import "../../../dist/badge/badge.css";
 }
 
 .breadcrumbs-mixin() {
-    @import "../../../../dist/breadcrumbs/breadcrumbs.css";
+    @import "../../../dist/breadcrumbs/breadcrumbs.css";
 }
 
 .button-mixin() {
-    @import "../../../../dist/button/button.css";
+    @import "../../../dist/button/button.css";
 }
 
 .carousel-mixin() {
-    @import "../../../../dist/carousel/carousel.css";
+    @import "../../../dist/carousel/carousel.css";
 }
 
 .checkbox-mixin() {
-    @import "../../../../dist/checkbox/checkbox.css";
-}
-
-.color-mixin() {
-    @import "../../../../dist/color/color.css";
+    @import "../../../dist/checkbox/checkbox.css";
 }
 
 .combobox-mixin() {
-    @import "../../../../dist/combobox/combobox.css";
+    @import "../../../dist/combobox/combobox.css";
 }
 
 .confirm-dialog-mixin() {
-    @import "../../../../dist/confirm-dialog/confirm-dialog.css";
+    @import "../../../dist/confirm-dialog/confirm-dialog.css";
 }
 
 .cta-button-mixin() {
-    @import "../../../../dist/cta-button/cta-button.css";
+    @import "../../../dist/cta-button/cta-button.css";
 }
 
 .drawer-dialog-mixin() {
-    @import "../../../../dist/drawer-dialog/drawer-dialog.css";
+    @import "../../../dist/drawer-dialog/drawer-dialog.css";
 }
 
 .eek-mixin() {
-    @import "../../../../dist/eek/eek.css";
+    @import "../../../dist/eek/eek.css";
 }
 
 .expand-button-mixin() {
-    @import "../../../../dist/expand-button/expand-button.css";
+    @import "../../../dist/expand-button/expand-button.css";
 }
 
 .field-mixin() {
-    @import "../../../../dist/field/field.css";
+    @import "../../../dist/field/field.css";
 }
 
 .filter-button-mixin() {
-    @import "../../../../dist/filter-button/filter-button.css";
+    @import "../../../dist/filter-button/filter-button.css";
 }
 
 .filter-menu-mixin() {
-    @import "../../../../dist/filter-menu/filter-menu.css";
+    @import "../../../dist/filter-menu/filter-menu.css";
 }
 
 .filter-menu-button-mixin() {
-    @import "../../../../dist/filter-menu-button/filter-menu-button.css";
+    @import "../../../dist/filter-menu-button/filter-menu-button.css";
 }
 
 .floating-label-mixin() {
-    @import "../../../../dist/floating-label/floating-label.css";
+    @import "../../../dist/floating-label/floating-label.css";
 }
 
 .fullscreen-dialog-mixin() {
-    @import "../../../../dist/fullscreen-dialog/fullscreen-dialog.css";
+    @import "../../../dist/fullscreen-dialog/fullscreen-dialog.css";
 }
 
 .global-mixin() {
-    @import "../../../../dist/global/global.css";
+    @import "../../../dist/global/global.css";
 }
 
 .icon-mixin() {
-    @import "../../../../dist/icon/icon.css";
+    @import "../../../dist/icon/icon.css";
 }
 
 .icon-button-mixin() {
-    @import "../../../../dist/icon-button/icon-button.css";
+    @import "../../../dist/icon-button/icon-button.css";
 }
 
 .infotip-mixin() {
-    @import "../../../../dist/infotip/infotip.css";
+    @import "../../../dist/infotip/infotip.css";
 }
 
 .inline-notice-mixin() {
-    @import "../../../../dist/inline-notice/inline-notice.css";
+    @import "../../../dist/inline-notice/inline-notice.css";
 }
 
 .lightbox-dialog-mixin() {
-    @import "../../../../dist/lightbox-dialog/lightbox-dialog.css";
+    @import "../../../dist/lightbox-dialog/lightbox-dialog.css";
 }
 
 .link-mixin() {
-    @import "../../../../dist/link/link.css";
+    @import "../../../dist/link/link.css";
 }
 
 .listbox-mixin() {
-    @import "../../../../dist/listbox/listbox.css";
+    @import "../../../dist/listbox/listbox.css";
 }
 
 .listbox-button-mixin() {
-    @import "../../../../dist/listbox-button/listbox-button.css";
+    @import "../../../dist/listbox-button/listbox-button.css";
 }
 
 .menu-mixin() {
-    @import "../../../../dist/menu/menu.css";
+    @import "../../../dist/menu/menu.css";
 }
 
 .menu-button-mixin() {
-    @import "../../../../dist/menu-button/menu-button.css";
+    @import "../../../dist/menu-button/menu-button.css";
 }
 
 .page-grid-mixin() {
-    @import "../../../../dist/page-grid/page-grid.css";
+    @import "../../../dist/page-grid/page-grid.css";
 }
 
 .page-notice-mixin() {
-    @import "../../../../dist/page-notice/page-notice.css";
+    @import "../../../dist/page-notice/page-notice.css";
 }
 
 .pagination-mixin() {
-    @import "../../../../dist/pagination/pagination.css";
+    @import "../../../dist/pagination/pagination.css";
 }
 
 .panel-dialog-mixin() {
-    @import "../../../../dist/panel-dialog/panel-dialog.css";
+    @import "../../../dist/panel-dialog/panel-dialog.css";
 }
 
 .progress-bar-mixin() {
-    @import "../../../../dist/progress-bar/progress-bar.css";
+    @import "../../../dist/progress-bar/progress-bar.css";
 }
 
 .progress-spinner-mixin() {
-    @import "../../../../dist/progress-spinner/progress-spinner.css";
+    @import "../../../dist/progress-spinner/progress-spinner.css";
 }
 
 .progress-stepper-mixin() {
-    @import "../../../../dist/progress-stepper/progress-stepper.css";
+    @import "../../../dist/progress-stepper/progress-stepper.css";
 }
 
 .radio-mixin() {
-    @import "../../../../dist/radio/radio.css";
+    @import "../../../dist/radio/radio.css";
 }
 
 .section-notice-mixin() {
-    @import "../../../../dist/section-notice/section-notice.css";
+    @import "../../../dist/section-notice/section-notice.css";
 }
 
 .section-title-mixin() {
-    @import "../../../../dist/section-title/section-title.css";
+    @import "../../../dist/section-title/section-title.css";
 }
 
 .select-mixin() {
-    @import "../../../../dist/select/select.css";
+    @import "../../../dist/select/select.css";
 }
 
 .signal-mixin() {
-    @import "../../../../dist/signal/signal.css";
+    @import "../../../dist/signal/signal.css";
 }
 
 .snackbar-dialog-mixin() {
-    @import "../../../../dist/snackbar-dialog/snackbar-dialog.css";
+    @import "../../../dist/snackbar-dialog/snackbar-dialog.css";
 }
 
 .switch-mixin() {
-    @import "../../../../dist/switch/switch.css";
+    @import "../../../dist/switch/switch.css";
 }
 
 .tabs-mixin() {
-    @import "../../../../dist/tabs/tabs.css";
+    @import "../../../dist/tabs/tabs.css";
 }
 
 .textbox-mixin() {
-    @import "../../../../dist/textbox/textbox.css";
+    @import "../../../dist/textbox/textbox.css";
 }
 
 .toast-dialog-mixin() {
-    @import "../../../../dist/toast-dialog/toast-dialog.css";
+    @import "../../../dist/toast-dialog/toast-dialog.css";
 }
 
 .tooltip-mixin() {
-    @import "../../../../dist/tooltip/tooltip.css";
+    @import "../../../dist/tooltip/tooltip.css";
 }
 
 .tourtip-mixin() {
-    @import "../../../../dist/tourtip/tourtip.css";
+    @import "../../../dist/tourtip/tourtip.css";
 }
 
 .typography-mixin() {
-    @import "../../../../dist/typography/typography.css";
+    @import "../../../dist/typography/typography.css";
 }
 
 .utility-mixin() {
-    @import "../../../../dist/utility/utility.css";
+    @import "../../../dist/utility/utility.css";
 }
 
 .window-notice-mixin() {
-    @import "../../../../dist/window-notice/window-notice.css";
+    @import "../../../dist/window-notice/window-notice.css";
 }

package/src/less/icon/generated/direction.less

@@ -87,3 +87,7 @@ svg.icon--chevron-right-extra-small {
     height: 16px;
     width: 16px;
 }
+svg.icon--arrow-left-medium {
+    height: 20px;
+    width: 20px;
+}

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);
     }
 }