@ebay/skin 14.0.6 → 14.1.1

package/src/less/floating-label/stories/floating-label.stories.js

@@ -49,13 +49,31 @@ export const disabledTextbox = () => `
 
 export const invalidTextbox = () => `
 <span class="floating-label">
-    <label class="floating-label__label" for="firstName">First Name</label>
+    <label class="floating-label__label floating-label__label--inline floating-label__label--invalid" for="firstName">First Name</label>
     <span class="textbox">
         <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" />
     </span>
 </span>
 `;
 
+export const invalidTextboxWithValue = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--invalid" for="firstName">First Name</label>
+    <span class="textbox">
+        <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" value="value" />
+    </span>
+</span>
+`;
+
+export const invalidTextboxWithPlaceholder = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--invalid" for="firstName">First Name</label>
+    <span class="textbox">
+        <input class="textbox__control" id="firstName03" type="text" aria-invalid="true" placeholder="placeholder" />
+    </span>
+</span>
+`;
+
 export const longText = () => `
 <span class="floating-label">
     <label class="floating-label__label" for="firstName">Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</label>
@@ -108,6 +126,38 @@ export const selectInline = () => `
 </span>
 `;
 
+export const selectInlineDoubled = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--inline">Select Option long text with ellipsis</label>
+    <span class="select">
+        <select aria-label="Select demo" name="options">
+            <option value=""></option>
+            <option value="item1">Pick Option 1 (default)</option>
+            <option value="item2">Pick Option 2</option>
+            <option value="item3">Pick Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--inline">Select Option long text</label>
+    <span class="select">
+        <select aria-label="Select demo" name="options">
+            <option value=""></option>
+            <option value="item1">Pick Option 1 (default)</option>
+            <option value="item2">Pick Option 2</option>
+            <option value="item3">Pick Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+
+`;
+
 export const RTLSelectInline = () => `
 <div dir="rtl">
     <span class="floating-label">
@@ -126,3 +176,12 @@ export const RTLSelectInline = () => `
     </span>
 </div>
 `;
+
+export const TextArea = () => `
+<span class="floating-label">
+    <label class="floating-label__label" for="first-name">Enter list of users</label>
+    <span class="textbox">
+        <textarea aria-label="Textbox demo" class="textbox__control"></textarea>
+    </span>
+</span>
+`;

package/src/less/fullscreen-dialog/fullscreen-dialog.less

@@ -37,12 +37,17 @@
     .dialog-footer-content();
 }
 
+button.icon-btn.fullscreen-dialog__close {
+    height: 32px;
+    min-width: 32px;
+    width: 32px;
+}
+
 // inherits from .icon-btn
 button.fullscreen-dialog__close,
 button.fullscreen-dialog__back {
     align-self: center;
     border: 0;
-    outline-offset: -8px;
     padding: 0;
     position: relative;
     z-index: 1;
@@ -62,7 +67,8 @@ button.fullscreen-dialog__back {
         transition: opacity 0.16s ease-out;
     }
 
-    .fullscreen-dialog__window--slide {
+    .fullscreen-dialog__window--slide,
+    .fullscreen-dialog__window--slide-end {
         transition: transform 0.32s ease-out;
     }
 }
@@ -85,6 +91,10 @@ button.fullscreen-dialog__back {
     .fullscreen-dialog__window--slide {
         transform: translateY(100%);
     }
+
+    .fullscreen-dialog__window--slide-end {
+        transform: translateX(100%);
+    }
 }
 
 .fullscreen-dialog--show,
@@ -105,18 +115,8 @@ button.fullscreen-dialog__back {
     .fullscreen-dialog__window--slide {
         transform: translateX(0);
     }
-}
 
-@media (min-width: 601px) {
-    .fullscreen-dialog__header {
-        .dialog-header-content-large();
-    }
-
-    .fullscreen-dialog__main {
-        .dialog-body-content-large();
-    }
-
-    .fullscreen-dialog__footer {
-        .dialog-footer-content-large();
+    .fullscreen-dialog__window--slide-end {
+        transform: translateX(0);
     }
 }

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

@@ -4,12 +4,35 @@ export const closeButton = () => `
 <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
     <div class="fullscreen-dialog__window">
         <div class="fullscreen-dialog__header">
+            <h2 id="fullscreen-dialog-title">Dialog Full</h2>
             <button class="icon-btn fullscreen-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>
+        <div class="fullscreen-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>
+</div>
+`;
+
+export const withFooter = () => `
+<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
+    <div class="fullscreen-dialog__window">
+        <div class="fullscreen-dialog__header">
             <h2 id="fullscreen-dialog-title">Dialog Full</h2>
+            <button class="icon-btn fullscreen-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="fullscreen-dialog__main">
             <h3>Heading</h3>
@@ -19,6 +42,10 @@ export const closeButton = () => `
             <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="fullscreen-dialog__footer">
+            <button class="btn btn--primary">Submit</button>
+            <button class="btn">Cancel</button>
+        </div>
     </div>
 </div>
 `;
@@ -28,12 +55,12 @@ export const RTL = () => `
     <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
         <div class="fullscreen-dialog__window">
             <div class="fullscreen-dialog__header">
+                <h2 id="fullscreen-dialog-title">Dialog Full</h2>
                 <button class="icon-btn fullscreen-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>
-                <h2 id="fullscreen-dialog-title">Dialog Full</h2>
             </div>
             <div class="fullscreen-dialog__main">
                 <h3>Heading</h3>
@@ -52,12 +79,12 @@ export const backButton = () => `
 <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
     <div class="fullscreen-dialog__window">
         <div class="fullscreen-dialog__header">
+            <h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
             <button class="icon-btn fullscreen-dialog__back" type="button" aria-label="Back">
                 <svg class="icon icon--back" aria-hidden="true">
                     <use xlink:href="#icon-back"></use>
                 </svg>
             </button>
-            <h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
         </div>
         <div class="fullscreen-dialog__main">
             <h3>Heading</h3>
@@ -75,11 +102,6 @@ export const secondaryButton = () => `
 <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
     <div class="fullscreen-dialog__window">
         <div class="fullscreen-dialog__header">
-            <button class="icon-btn fullscreen-dialog__back" type="button" aria-label="Back">
-                <svg class="icon icon--back" aria-hidden="true">
-                    <use xlink:href="#icon-back"></use>
-                </svg>
-            </button>
             <h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
             <button class="fake-link fullscreen-dialog__close" type="button">Reset</button>
         </div>

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