@ebay/skin 16.6.0 → 16.7.0

package/src/less/chip/stories/interactive-chip.stories.js

@@ -0,0 +1,170 @@
+export default { title: "Skin/Chip/Interactive Chip" };
+
+export const typical = () => `
+<span class="chip">
+    <span id="chip-interactive-1-text" class="chip__text">Football</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+`;
+
+export const leastContent = () => `
+<span class="chip">
+    <span id="chip-interactive-1-text" class="chip__text">I</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+`;
+
+export const mostContent = () => `
+<span class="chip">
+    <span id="chip-interactive-1-text" class="chip__text">Chip with the longest potentially possible content</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+`;
+
+export const set = () => `
+<span class="chip">
+    <span id="chip-interactive-1-text" class="chip__text">Football</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-2-text" class="chip__text">Basketball</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-2-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-3-text" class="chip__text">Baseball</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-4-text" class="chip__text">Hockey</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-4-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-5-text" class="chip__text">Tennis</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-5-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-6-text" class="chip__text">Golf</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-6-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-7-text" class="chip__text">Gymnastics</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-7-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-8-text" class="chip__text">Swimming</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-8-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-9-text" class="chip__text">Cricket</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-9-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-10-text" class="chip__text">Volleyball</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-10-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+
+<span class="chip">
+    <span id="chip-interactive-11-text" class="chip__text">Rugby</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-11-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+`;
+
+export const largeText = () => `
+<span class="chip" style="font-size: 200%;">
+    <span id="chip-interactive-1-text" class="chip__text">Large Text</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+`;
+
+export const letterSpacing = () => `
+<span class="chip" style="letter-spacing: calc(14px * 0.12);">
+    <span id="chip-interactive-1-text" class="chip__text">Letter Spacing</span>
+    <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
+        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <use href="#icon-close-12"></use>
+        </svg>
+    </button>
+</span>
+`;
+
+export const RTL = () => `
+<div dir="rtl">
+    <span class="chip">
+        <span id="chip-interactive-1-text" class="chip__text">Football</span>
+        <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
+            <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+                <use href="#icon-close-12"></use>
+            </svg>
+        </button>
+    </span>
+</div>
+`;

package/src/less/chip/stories/static-chip.stories.js

@@ -0,0 +1,155 @@
+export default { title: "Skin/Chip/Static Chip" };
+
+export const typical = () => `
+<span class="chip">
+    <span class="chip__text">Football</span>
+</span>
+`;
+
+export const leastContent = () => `
+<span class="chip">
+    <span class="chip__text">I</span>
+</span>
+`;
+
+export const mostContent = () => `
+<span class="chip">
+    <span class="chip__text">Chip with the longest potentially possible content</span>
+</span>
+`;
+
+export const set = () => `
+<span class="chip">
+    <span class="chip__text">Football</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Basketball</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Baseball</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Hockey</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Tennis</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Golf</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Gymnastics</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Swimming</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Cricket</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Volleyball</span>
+</span>
+
+<span class="chip">
+    <span class="chip__text">Rugby</span>
+</span>
+`;
+
+export const list = () => `
+<ul>
+    <li>
+        <span class="chip">
+            <span class="chip__text">Football</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Basketball</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Baseball</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Hockey</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Tennis</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Golf</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Gymnastics</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Swimming</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Cricket</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Volleyball</span>
+        </span>
+    </li>
+
+    <li>
+        <span class="chip">
+            <span class="chip__text">Rugby</span>
+        </span>
+    </li>
+</ul>
+`;
+
+export const largeText = () => `
+    <span class="chip" style="font-size: 200%;">
+        <span class="chip__text">Large Text</span>
+    </span>
+`;
+
+export const letterSpacing = () => `
+    <span class="chip" style="letter-spacing: calc(14px * 0.12);">
+        <span class="chip__text">Letter Spacing</span>
+    </span>
+`;
+
+export const RTL = () => `
+<div dir="rtl">
+    <span class="chip">
+        <span class="chip__text">Football RTL</span>
+    </span>
+</div>
+`;

package/src/less/eek/eek.less

@@ -111,8 +111,11 @@
     display: inline-block;
     font-size: 18px;
     margin-left: 8px;
-    text-shadow: -0.5px 0.5px 0 @eek-color, 0.5px 0.5px 0 @eek-color,
-        0.5px -0.5px 0 @eek-color, -0.5px -0.5px 0 @eek-color;
+    text-shadow:
+        -0.5px 0.5px 0 @eek-color,
+        0.5px 0.5px 0 @eek-color,
+        0.5px -0.5px 0 @eek-color,
+        -0.5px -0.5px 0 @eek-color;
 }
 
 .eek__rating-range {

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

@@ -60,7 +60,8 @@ label.floating-label__label--inline {
 }
 
 label.floating-label__label--animate {
-    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
+    transition:
+        transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
         bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 

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

@@ -27,6 +27,34 @@ svg.icon--afterpay-32-colored {
     height: 32px;
     width: 50px;
 }
+svg.icon--ai-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--ai-20 {
+    height: 20px;
+    width: 20px;
+}
+svg.icon--ai-24 {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--ai-filled-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--ai-filled-20 {
+    height: 20px;
+    width: 20px;
+}
+svg.icon--ai-filled-24 {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--ai-thin-16 {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--amex-12-colored {
     height: 12px;
     width: 20px;
@@ -115,6 +143,14 @@ svg.icon--arrows-3d-filled-64-colored {
     height: 64px;
     width: 64px;
 }
+svg.icon--arrows-expand-16 {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--arrows-expand-24 {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--article-16 {
     height: 16px;
     width: 16px;
@@ -183,6 +219,10 @@ svg.icon--auto-adjust-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--background-removal-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--bag-24 {
     height: 24px;
     width: 24px;
@@ -295,6 +335,14 @@ svg.icon--car-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--car-brake-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--car-brake-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--carryon-24 {
     height: 24px;
     width: 24px;
@@ -459,6 +507,14 @@ svg.icon--chevron-up-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--chinese-coin-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--chinese-coin-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--clear-16 {
     height: 16px;
     width: 16px;
@@ -487,6 +543,10 @@ svg.icon--clock-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--close-12 {
+    height: 12px;
+    width: 13px;
+}
 svg.icon--close-16 {
     height: 16px;
     width: 16px;
@@ -1175,6 +1235,14 @@ svg.icon--google-pay-32-colored {
     height: 32px;
     width: 50px;
 }
+svg.icon--graph-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--graph-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--grid-view-16 {
     height: 16px;
     width: 16px;
@@ -1207,6 +1275,14 @@ svg.icon--hanger-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--headlight-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--headlight-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--headphone-16 {
     height: 16px;
     width: 16px;
@@ -2335,6 +2411,10 @@ svg.icon--sparkline-up-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--sparkline-up-filled-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--spinner-20 {
     height: 16px;
     width: 16px;
@@ -2347,6 +2427,14 @@ svg.icon--spinner-30 {
     height: 24px;
     width: 24px;
 }
+svg.icon--split-payment-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--split-payment-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--split-view-24 {
     height: 24px;
     width: 24px;
@@ -2419,6 +2507,10 @@ svg.icon--store-64 {
     height: 64px;
     width: 64px;
 }
+svg.icon--store-filled-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--suitcase-24 {
     height: 24px;
     width: 24px;
@@ -2435,6 +2527,10 @@ svg.icon--text-messaging-16 {
     height: 16px;
     width: 16px;
 }
+svg.icon--text-messaging-20 {
+    height: 20px;
+    width: 20px;
+}
 svg.icon--text-messaging-24 {
     height: 24px;
     width: 24px;

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

@@ -107,6 +107,12 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window--fade {
         transition: opacity 0.16s ease-out;
     }
+
+    .lightbox-dialog__window--animate {
+        transition:
+            opacity 0.16s ease-out,
+            transform 0.32s ease-out;
+    }
 }
 
 .lightbox-dialog--hide,
@@ -123,6 +129,11 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window--fade {
         opacity: 0;
     }
+
+    .lightbox-dialog__window--animate {
+        opacity: 0;
+        transform: translateY(100%);
+    }
 }
 
 .lightbox-dialog--show,
@@ -139,6 +150,38 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window--fade {
         opacity: 1;
     }
+
+    .lightbox-dialog__window--animate {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.lightbox-dialog__handle {
+    background-color: transparent;
+    border: none;
+    left: 0;
+    margin: -11px auto;
+    padding: 8px;
+    position: relative;
+    right: 0;
+    top: 11px;
+    z-index: 2;
+}
+
+// Added :after class in order to increase parent hit box
+.lightbox-dialog__handle::after {
+    .background-color-token(dialog-handle-color, color-stroke-default);
+    border-radius: 3px;
+    content: "";
+    display: block;
+    height: 2px;
+    width: 24px;
+}
+
+.lightbox-dialog__window--expanded {
+    height: 95%;
+    max-height: 95%;
 }
 
 [dir="rtl"] {
@@ -153,9 +196,15 @@ button.icon-btn.lightbox-dialog__prev {
 // In order to prevent the margins to meet the ege of the page at medium screen sizes
 @media (min-width: @_screen-size-SM) {
     .lightbox-dialog__window {
+        .lightbox-dialog-window-large();
+
         max-width: calc(88% - @spacing-400);
     }
 
+    .lightbox-dialog__handle {
+        display: none;
+    }
+
     .lightbox-dialog--narrow .lightbox-dialog__window {
         max-width: var(--dialog-lightbox-narrow-max-width);
     }
@@ -163,6 +212,12 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window .lightbox-dialog__footer {
         .dialog-footer-content-large();
     }
+    .lightbox-dialog--show .lightbox-dialog__window--animate,
+    .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
+    .lightbox-dialog--show-init .lightbox-dialog__window--animate,
+    .lightbox-dialog--hide .lightbox-dialog__window--animate {
+        transform: translateY(0);
+    }
 }
 
 @media (min-width: @_screen-size-MD) {