@ebay/skin 14.1.3 → 14.2.0-0

package/src/less/icon/icon.less

@@ -1,16 +1,81 @@
-@import "./aliased.less";
-@import "./direction.less";
-@import "./large.less";
-@import "./reviews.less";
-@import "./user.less";
-@import "./content.less";
-@import "./filter.less";
-@import "./interface.less";
-@import "./media.less";
-@import "./shipping.less";
-@import "./device.less";
-@import "./general.less";
-@import "./internal.less";
-@import "./photo.less";
-@import "./status.less";
-@import "./social.less";
+@import "./generated/icon.less";
+@import "../mixins/private/icon-mixins.less";
+@import "../mixins/private/token-mixins.less";
+
+svg {
+    &.icon {
+        .icon-base-mixin();
+    }
+    &.icon--disabled {
+        .color-token(color-foreground-disabled);
+        fill: currentColor;
+    }
+    &.icon--attention-filled {
+        .color-token(color-foreground-attention);
+    }
+    &.icon--confirmation-filled {
+        .color-token(color-foreground-confirmation);
+    }
+    &.icon--information-filled {
+        .color-token(color-foreground-information);
+    }
+    &.icon--star-empty {
+        .color-token(color-foreground-disabled);
+    }
+    &.icon--attention-filled-small {
+        .color-token(color-foreground-attention);
+    }
+    &.icon--confirmation-filled-small {
+        .color-token(color-foreground-confirmation);
+    }
+    &.icon--information-filled-small {
+        .color-token(color-foreground-information);
+    }
+    &.icon--star-empty-small {
+        .color-token(color-foreground-disabled);
+    }
+    // todo: these should be .color-token(icon-foreground-color, color-foreground-primary) ?
+    &.icon--social-link {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--social-discord {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--social-facebook {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--social-messenger {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--social-pinterest {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--social-reddit {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--social-twitter {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--social-whatsapp {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--social-linkedin {
+        .color-token(color-social-icons-background);
+    }
+    &.icon--spinner-large {
+        .icon-image-mixin("spinner-large");
+    }
+}
+[dir="rtl"] svg {
+    &.icon--back,
+    &.icon--breadcrumb,
+    &.icon--carousel-next,
+    &.icon--carousel-prev,
+    &.icon--chevron-left,
+    &.icon--chevron-right,
+    &.icon--cta,
+    &.icon--pagination-next,
+    &.icon--pagination-prev {
+        transform: rotate(180deg);
+    }
+}

package/src/less/icon/stories/icon.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Icon/Icon' };
+export default { title: 'Icon' };
 
 export const insideHeading = () => `
 <h2>

package/src/less/icon-button/stories/alignment.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Icon Button/Icon Button/Alignment' };
+export default { title: 'Icon Button/Alignment' };
 
 export const menu = () => `
 <button aria-label="menu" type="button" class="icon-btn">

package/src/less/infotip/infotip.less

@@ -15,7 +15,7 @@ span.infotip {
     .background-color-token(infotip-background-color, color-background-primary);
     .color-token(infotip-foreground-color, color-foreground-primary);
     display: none;
-    left: 0 - 10px;
+    left: 0 - 6px;
     margin-top: @spacing-200;
     position: absolute;
 }

package/src/less/infotip/stories/infotip.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Infotip/Infotip' };
+export default { title: 'Infotip' };
 
 export const collapsed = () => `
 <span class="infotip">

package/src/less/inline-notice/inline-notice.less

@@ -14,9 +14,9 @@ span.inline-notice {
 }
 
 .inline-notice__header {
-    align-items: center;
     display: flex;
     margin-right: @spacing-100;
+    margin-top: @spacing-50;
 }
 
 .inline-notice p {
@@ -29,7 +29,7 @@ span.inline-notice {
 }
 
 [dir="rtl"] {
-    .inline-notice__header .icon.icon--confirmation-filled {
+    .inline-notice__header .icon.icon--confirmation-filled-small {
         margin-left: @spacing-100;
     }
 }

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

@@ -1,10 +1,10 @@
-export default { title: 'Inline Notice/Inline Notice' };
+export default { title: 'Inline Notice' };
 
 export const confirmation = () => `
 <div class="inline-notice inline-notice--confirmation">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--confirmation-filled" role="img">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg focusable="false" class="icon icon--confirmation-filled-small" role="img">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -17,8 +17,8 @@ export const RTL = () => `
 <div dir="rtl">
     <div class="inline-notice inline-notice--confirmation">
         <span class="inline-notice__header">
-            <svg focusable="false" class="icon icon--confirmation-filled" role="img">
-                <use xlink:href="#icon-confirmation-filled"></use>
+            <svg focusable="false" class="icon icon--confirmation-filled-small" role="img">
+                <use href="#icon-confirmation-filled-small"></use>
             </svg>
         </span>
         <span class="inline-notice__main">
@@ -31,8 +31,8 @@ export const RTL = () => `
 export const attention = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled" role="img">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -44,8 +44,8 @@ export const attention = () => `
 export const information = () => `
 <div class="inline-notice inline-notice--information">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--information-filled" role="img">
-            <use xlink:href="#icon-information-filled"></use>
+        <svg focusable="false" class="icon icon--information-filled-small" role="img">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -65,8 +65,8 @@ export const general = () => `
 export const paragraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled" role="img">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -79,8 +79,8 @@ export const paragraphAndLink = () => `
 export const longParagraph = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled" role="img">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -92,8 +92,8 @@ export const longParagraph = () => `
 export const longParagraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header" role="img">
-        <svg focusable="false" class="icon icon--attention-filled">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg focusable="false" class="icon icon--attention-filled-small">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -106,8 +106,8 @@ export const longParagraphAndLink = () => `
 export const multiParagraph = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled" role="img">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -120,8 +120,8 @@ export const multiParagraph = () => `
 export const multiParagraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled" role="img">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -136,8 +136,8 @@ export const longWordInConstrainedWidth = () => `
 <div style="width:300px;">
     <div class="inline-notice inline-notice--confirmation">
         <span class="inline-notice__header">
-            <svg focusable="false" class="icon icon--confirmation-filled" role="img">
-                <use xlink:href="#icon-confirmation-filled"></use>
+            <svg focusable="false" class="icon icon--confirmation-filled-small" role="img">
+                <use href="#icon-confirmation-filled-small"></use>
             </svg>
         </span>
         <span class="inline-notice__main">

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

@@ -10,6 +10,7 @@
     .lightbox-dialog-window();
 }
 
+// Deprecated --mini dilaog in favor of drawer, remove next major
 .lightbox-dialog__window--mini {
     align-items: flex-start;
     align-self: center;

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

@@ -1,4 +1,4 @@
-export default { title: 'Lightbox Dialog/Lightbox Dialog' };
+export default { title: 'Lightbox Dialog' };
 
 export const base = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">

package/src/less/link/stories/link.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Link/Link' };
+export default { title: 'Link' };
 
 export const base = () => `
 <a href="https://www.ebay.com/urw/ZTE-AXON-7-Mini-32GB-Ion-Gold-Unlocked-Smartphone/product-reviews/230215749?_itm=222972816761">Link</a>

package/src/less/listbox/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Listbox/Listbox/Cascade' };
+export default { title: 'Listbox/Cascade' };
 
 export const RTL = () => `
 <span class="listbox" dir="rtl">

package/src/less/listbox/stories/listbox.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Listbox/Listbox' };
+export default { title: 'Listbox' };
 
 export const unselected = () => `
 <span class="listbox">

package/src/less/menu/stories/fake-menu.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu/Menu/Fake Menu' };
+export default { title: 'Menu/Fake Menu' };
 
 export const links = () => `
 <div class="fake-menu">

package/src/less/menu/stories/misc.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu/Menu' };
+export default { title: 'Menu' };
 
 export const stateless = () => `
 <span class="menu">

package/src/less/menu/stories/multiSelect.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu/Menu/Multi Select' };
+export default { title: 'Menu/Multi Select' };
 
 export const unselected = () => `
 <span class="menu">

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

@@ -1,18 +1,25 @@
 // this mixin is used by infotip, tooltip, tourtip
 
+// Deprecated
 @bubble-base-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
 
 :root {
+    // Deprecated variables, remove next version
     --bubble-base-box-shadow: @bubble-base-box-shadow;
     --bubble-left-box-shadow: @bubble-base-box-shadow;
     --bubble-right-box-shadow: @bubble-base-box-shadow;
     --bubble-bottom-box-shadow: @bubble-base-box-shadow;
     --bubble-top-box-shadow: @bubble-base-box-shadow;
+    // End deprecated
+
+    --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15))
+        drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }
 
 .bubble() {
     .border-radius-token(bubble-border-radius, border-radius-50);
-    .box-shadow-token(bubble-base-box-shadow);
+
+    filter: var(--bubble-filter);
     font-size: 14px;
     max-width: 344px;
     width: max-content;
@@ -32,7 +39,7 @@
 // creates basic layout
 .bubble-cell() {
     display: flex;
-    padding: @spacing-200;
+    padding: @spacing-100 @spacing-200;
     word-break: break-word;
 }
 
@@ -62,30 +69,28 @@
 
 // styles common to all pointers
 .pointer-base() {
-    height: 16px;
+    height: 8px;
     position: absolute;
     transform: rotate(45deg);
-    width: 16px;
+    width: 8px;
     z-index: 0;
 }
 
 .pointer-bottom() {
-    bottom: -7px;
-    .box-shadow-token(bubble-bottom-box-shadow);
+    bottom: -4px;
     top: auto;
 }
 
 .pointer-side-middle() {
-    top: calc(50% - 8px);
+    top: calc(50% - 4px);
 }
 
 .pointer-top() {
-    .box-shadow-token(bubble-top-box-shadow);
-    top: -7px;
+    top: -4px;
 }
 
 .pointer-center() {
-    left: calc(50% - 8px);
+    left: calc(50% - 4px);
 }
 
 .pointer-top-center() {
@@ -127,40 +132,35 @@
 .pointer-left() {
     .pointer-side-middle();
 
-    left: -7px;
+    left: -4px;
 }
 
 .pointer-left-top() {
-    .box-shadow-token(bubble-left-box-shadow);
-    left: -7px;
+    left: -4px;
     top: 12px;
 }
 
 .pointer-left-bottom() {
     bottom: 12px;
-    .box-shadow-token(bubble-left-box-shadow);
-    left: -7px;
+    left: -4px;
     top: auto;
 }
 
 .pointer-right() {
     .pointer-side-middle();
-    .box-shadow-token(bubble-right-box-shadow);
     left: auto;
-    right: -7px;
+    right: -4px;
 }
 
 .pointer-right-top() {
-    .box-shadow-token(bubble-right-box-shadow);
     left: auto;
-    right: -7px;
+    right: -4px;
     top: 12px;
 }
 
 .pointer-right-bottom() {
     bottom: 12px;
-    .box-shadow-token(bubble-right-box-shadow);
     left: auto;
-    right: -7px;
+    right: -4px;
     top: auto;
 }

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

@@ -1,6 +1,6 @@
 .filter-button-base() {
     align-items: center;
-    border: none;
+    border: 1px solid transparent;
     border-radius: 16px;
     box-sizing: border-box;
     .color-token(filter-button-foreground-color, color-foreground-primary);
@@ -14,7 +14,7 @@
     margin: 0;
     max-width: 280px;
     min-width: 56px;
-    padding: @spacing-100 @spacing-200;
+    padding: 0 @spacing-200;
     text-align: center;
     text-decoration: none;
     vertical-align: bottom;

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

@@ -9,14 +9,14 @@
     .color-token(page-notice-color, color-foreground-on-inverse);
     font-size: @font-size-regular;
     margin: @spacing-100 0;
-    padding: @spacing-300 @spacing-200;
+    padding: @spacing-200;
 }
 
 div[role="region"].page-notice,
 section.page-notice {
     display: grid;
     // provide explicit structure up front, create loose markup model
-    grid-template-columns: 40px auto auto auto;
+    grid-template-columns: 32px auto auto auto;
 }
 
 span[role="region"].page-notice {
@@ -26,7 +26,7 @@ span[role="region"].page-notice {
 .page-notice__title {
     font-size: @font-size-regular;
     font-weight: normal;
-    margin: 0;
+    margin: 4px 0 0;
 }
 
 /* legacy version with separate bold heading */
@@ -109,6 +109,7 @@ span[role="region"].page-notice {
 .page-notice__footer {
     grid-column: 4;
     grid-row: 1;
+    text-align: right;
 }
 
 /* support legacy 6.5 notice with heading + paragaphs */
@@ -133,13 +134,14 @@ p.page-notice__cta {
     }
 
     .page-notice__title {
-        margin-top: 4px;
+        margin-top: 2px;
     }
 
     p.page-notice__cta {
         grid-column: 4;
         grid-row: 1;
         justify-self: end;
+        margin-bottom: 0;
         margin-top: 0;
         padding-right: @spacing-200;
     }
@@ -156,6 +158,10 @@ p.page-notice__cta {
         padding-right: 0;
     }
 
+    .page-notice__main {
+        padding-right: 0;
+    }
+
     .page-notice__footer {
         margin-left: initial;
         margin-right: auto;

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

@@ -1,4 +1,4 @@
-export default { title: 'Page Notice/Page Notice' };
+export default { title: 'Page Notice' };
 
 export const general = () => `
 <section class="page-notice page-notice--general" role="region" aria-label="Information">
@@ -33,8 +33,8 @@ export const generalWithLink = () => `
 export const confirmationWithButton = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -49,8 +49,8 @@ export const confirmationWithButton = () => `
 export const confirmationWithLink = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -65,8 +65,8 @@ export const confirmationWithLink = () => `
 export const attentionWithButton = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled" focusable="false" height="24" width="24" role="img" aria-label="Attention">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -81,8 +81,8 @@ export const attentionWithButton = () => `
 export const attentionWithLink = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled" focusable="false" height="24" width="24" role="img" aria-label="Attention">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -97,8 +97,8 @@ export const attentionWithLink = () => `
 export const informationWithButton = () => `
 <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 class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -113,8 +113,8 @@ export const informationWithButton = () => `
 export const informationWithLink = () => `
 <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 class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -129,8 +129,8 @@ export const informationWithLink = () => `
 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 class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -140,8 +140,8 @@ export const dismissableWithTitle = () => `
     <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 aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
+                <use href="#icon-close-small"></use>
             </svg>
         </a>
     </div>
@@ -151,8 +151,8 @@ export const dismissableWithTitle = () => `
 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 class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -161,8 +161,8 @@ export const dismissableWithoutTitle = () => `
     <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 aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
+                <use href="#icon-close-small"></use>
             </svg>
         </a>
     </div>
@@ -172,8 +172,8 @@ export const dismissableWithoutTitle = () => `
 export const formErrors = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled" focusable="false" height="24" width="24" role="img" aria-label="Attention">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">