@ebay/skin 17.5.0 → 18.0.0

package/src/sass/infotip/infotip.scss

@@ -0,0 +1,136 @@
+@import "../variables/variables";
+@import "../mixins/private/bubble-mixins";
+@import "../mixins/private/token-mixins";
+
+.infotip {
+    position: relative;
+}
+
+span.infotip {
+    display: inline-block;
+}
+
+.infotip__overlay {
+    @include bubble();
+    @include background-color-token(
+        infotip-background-color,
+        color-background-elevated
+    );
+    @include color-token(infotip-foreground-color, color-foreground-primary);
+
+    display: none;
+}
+
+.infotip__mask {
+    @include bubble-mask();
+    @include background-color-token(
+        infotip-background-color,
+        color-background-elevated
+    );
+    @include color-token(infotip-foreground-color, color-foreground-primary);
+}
+
+span.infotip__mask {
+    display: block;
+}
+
+.infotip__cell {
+    @include bubble-cell();
+}
+
+.infotip__content {
+    @include bubble-content();
+}
+
+.infotip__pointer {
+    @include background-color-token(
+        infotip-background-color,
+        color-background-elevated
+    );
+
+    @include pointer-base();
+}
+
+.infotip__pointer--top-left {
+    @include pointer-top-left();
+}
+
+.infotip__pointer--top {
+    @include pointer-top-center();
+}
+
+.infotip__pointer--top-right {
+    @include pointer-top-right();
+}
+
+.infotip__pointer--bottom-left {
+    @include pointer-bottom-left();
+}
+
+.infotip__pointer--bottom {
+    @include pointer-bottom-center();
+}
+
+.infotip__pointer--bottom-right {
+    @include pointer-bottom-right();
+}
+
+.infotip__pointer--left {
+    @include pointer-left();
+}
+
+.infotip__pointer--left-bottom {
+    @include pointer-left-bottom();
+}
+
+.infotip__pointer--left-top {
+    @include pointer-left-top();
+}
+
+.infotip__pointer--right {
+    @include pointer-right();
+}
+
+.infotip__pointer--right-bottom {
+    @include pointer-right-bottom();
+}
+
+.infotip__pointer--right-top {
+    @include pointer-right-top();
+}
+
+.infotip__heading {
+    font-size: 1em;
+    font-weight: bold;
+    margin: 0 0 var(--spacing-50);
+}
+
+span.infotip__heading {
+    display: block;
+}
+
+.infotip__host[aria-expanded="true"] ~ .infotip__overlay {
+    display: block;
+}
+
+/* todo: refactor out this dependency. Use a mixin instead */
+.infotip .icon-btn {
+    display: inline-flex;
+    flex-shrink: 0; /* todo: Should move to icon-btn in next major */
+    height: 20px;
+    min-width: 20px;
+    outline-offset: 2px;
+    overflow: visible;
+    width: 20px;
+}
+
+button.infotip__close,
+.infotip__close {
+    margin-left: var(--spacing-200);
+}
+
+@media (min-width: $_screen-size-SM) {
+    .infotip__overlay {
+        @include bubble-large-screen();
+    }
+}

package/src/{less → sass}/infotip/stories/infotip.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Infotip" };
 export const collapsed = () => `
 <span class="infotip">
     <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
-        <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
             <use href="#icon-information-16"></use>
         </svg>
     </button>
@@ -16,7 +16,7 @@ export const collapsed = () => `
                     <p>Here's a tip to help you be successful at your task.</p>
                 </span>
                 <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                    <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -28,7 +28,7 @@ export const collapsed = () => `
 export const expanded = () => `
 <span class="infotip">
     <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
-        <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
             <use href="#icon-information-16"></use>
         </svg>
     </button>
@@ -41,7 +41,7 @@ export const expanded = () => `
                     <p>Here's a tip to help you be successful at your task.</p>
                 </span>
                 <button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
-                    <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -55,7 +55,7 @@ export const paragraphCollapsed = () => `
     Inside paragraph
     <span class="infotip">
         <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
-            <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
+            <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
                 <use href="#icon-information-16"></use>
             </svg>
         </button>
@@ -68,7 +68,7 @@ export const paragraphCollapsed = () => `
                         <span>Here's a tip to help you be successful at your task.</span>
                     </span>
                     <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                        <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
+                        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                             <use href="#icon-close-16"></use>
                         </svg>
                     </button>
@@ -83,7 +83,7 @@ export const paragraphExpanded = () => `
     Inside paragraph
     <span class="infotip">
         <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
-            <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
+            <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
                 <use href="#icon-information-16"></use>
             </svg>
         </button>
@@ -96,7 +96,7 @@ export const paragraphExpanded = () => `
                         <span>Here's a tip to help you be successful at your task.</span>
                     </span>
                     <button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
-                        <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
+                        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                             <use href="#icon-close-16"></use>
                         </svg>
                     </button>
@@ -109,7 +109,7 @@ export const paragraphExpanded = () => `
 export const infotipModal = () => `
     <span class="infotip infotip--modal">
         <button class="icon-btn icon-btn--transparent dialog-button" type="button" data-makeup-for="lightbox-dialog-mini-infotip-0" aria-expanded="true" aria-label="Help">
-            <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
+            <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
                 <use href="#icon-information-16"></use>
             </svg>
         </button>
@@ -120,7 +120,7 @@ export const infotipModal = () => `
             <div class="lightbox-dialog__header">
                 <h2>Info</h2>
                 <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
-                    <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                    <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -135,7 +135,7 @@ export const infotipModal = () => `
 export const textSpacing = () => `
 <span class="infotip demo-a11y-text-spacing">
     <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
-        <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
             <use href="#icon-information-16"></use>
         </svg>
     </button>
@@ -148,7 +148,7 @@ export const textSpacing = () => `
                     <p>Here's a tip to help you be successful at your task.</p>
                 </span>
                 <button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
-                    <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>

package/src/{less/inline-notice/inline-notice.less → sass/inline-notice/inline-notice.scss}

@@ -1,5 +1,5 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .inline-notice {
     margin: var(--spacing-100) 0;
@@ -25,5 +25,5 @@ span.inline-notice {
 
 .inline-notice a,
 .inline-notice button.fake-link {
-    .color-token(color-foreground-primary);
+    @include color-token(color-foreground-primary);
 }

package/src/{less → sass}/inline-notice/stories/inline.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Inline Notice" };
 export const confirmation = () => `
 <div class="inline-notice inline-notice--confirmation">
     <span class="inline-notice__header">
-        <svg class="icon icon--confirmation-filled-16" role="img">
+        <svg class="icon icon--16" role="img">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </span>
@@ -17,7 +17,7 @@ export const RTL = () => `
 <div dir="rtl">
     <div class="inline-notice inline-notice--confirmation">
         <span class="inline-notice__header">
-            <svg class="icon icon--confirmation-filled-16" role="img">
+            <svg class="icon icon--16" role="img">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </span>
@@ -31,7 +31,7 @@ export const RTL = () => `
 export const attention = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -44,7 +44,7 @@ export const attention = () => `
 export const information = () => `
 <div class="inline-notice inline-notice--information">
     <span class="inline-notice__header">
-        <svg class="icon icon--information-filled-16" role="img">
+        <svg class="icon icon--16" role="img">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </span>
@@ -65,7 +65,7 @@ export const general = () => `
 export const paragraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -79,7 +79,7 @@ export const paragraphAndLink = () => `
 export const longParagraph = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -92,7 +92,7 @@ export const longParagraph = () => `
 export const longParagraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header" role="img">
-        <svg class="icon icon--attention-filled-16">
+        <svg class="icon icon--16">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -106,7 +106,7 @@ export const longParagraphAndLink = () => `
 export const multiParagraph = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -120,7 +120,7 @@ export const multiParagraph = () => `
 export const multiParagraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -136,7 +136,7 @@ export const longWordInConstrainedWidth = () => `
 <div style="width:300px;">
     <div class="inline-notice inline-notice--confirmation">
         <span class="inline-notice__header">
-            <svg class="icon icon--confirmation-filled-16" role="img">
+            <svg class="icon icon--16" role="img">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </span>
@@ -150,7 +150,7 @@ export const longWordInConstrainedWidth = () => `
 export const textSpacing = () => `
 <div class="inline-notice inline-notice--information demo-a11y-text-spacing">
     <span class="inline-notice__header">
-        <svg class="icon icon--information-filled-16" role="img">
+        <svg class="icon icon--16" role="img">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </span>

package/src/{less/lightbox-dialog/lightbox-dialog.less → sass/lightbox-dialog/lightbox-dialog.scss}

@@ -1,6 +1,6 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dialog-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dialog-mixins";
+@import "../mixins/private/token-mixins";
 
 :root {
     --dialog-lightbox-wide-max-width: 896px;
@@ -8,26 +8,26 @@
 }
 
 .lightbox-dialog[role="dialog"] {
-    .lightbox-dialog-base();
+    @include lightbox-dialog-base();
 }
 
 .lightbox-dialog__window {
-    .lightbox-dialog-window();
+    @include lightbox-dialog-window();
 }
 
 .lightbox-dialog__header {
-    .dialog-header-content();
+    @include dialog-header-content();
 }
 
 .lightbox-dialog__main {
-    .dialog-body-content();
+    @include dialog-body-content();
 
     min-height: 18px;
     overflow: auto;
 }
 
 .lightbox-dialog__footer {
-    .dialog-footer-content();
+    @include dialog-footer-content();
 }
 
 .lightbox-dialog__image {
@@ -57,8 +57,8 @@
     padding: var(--spacing-200) var(--spacing-300);
 }
 
-// inherits from .icon-btn
-// Might need to see if icon-btn can support a small version
+/* inherits from .icon-btn */
+/* Might need to see if icon-btn can support a small version */
 button.icon-btn.lightbox-dialog__prev,
 button.icon-btn.lightbox-dialog__close {
     align-self: flex-start;
@@ -117,7 +117,8 @@ button.icon-btn.lightbox-dialog__prev {
 
 .lightbox-dialog--hide,
 .lightbox-dialog--show-init {
-    && {
+    &.lightbox-dialog--hide,
+    &.lightbox-dialog--show-init {
         display: flex;
     }
 
@@ -138,7 +139,8 @@ button.icon-btn.lightbox-dialog__prev {
 
 .lightbox-dialog--show,
 .lightbox-dialog--hide-init {
-    && {
+    &.lightbox-dialog--show,
+    &.lightbox-dialog--hide-init {
         display: flex;
     }
 
@@ -157,6 +159,7 @@ button.icon-btn.lightbox-dialog__prev {
     }
 }
 
+// Deprecated
 .lightbox-dialog__handle {
     background-color: transparent;
     border: none;
@@ -169,9 +172,10 @@ button.icon-btn.lightbox-dialog__prev {
     z-index: 2;
 }
 
-// Added :after class in order to increase parent hit box
+/* Added :after class in order to increase parent hit box */
 .lightbox-dialog__handle::after {
-    .background-color-token(dialog-handle-color, color-stroke-default);
+    @include background-color-token(dialog-handle-color, color-stroke-default);
+
     border-radius: 3px;
     content: "";
     display: block;
@@ -179,24 +183,62 @@ button.icon-btn.lightbox-dialog__prev {
     width: 24px;
 }
 
+// Deprecated, remove next major
+// This is tied with handle, once we remove handle this needs to be removed
 .lightbox-dialog__window--expanded {
     height: 95%;
     max-height: 95%;
 }
 
 [dir="rtl"] {
-    button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
+    button.icon-btn.lightbox-dialog__prev .icon--16 {
         transform: rotate(180deg);
     }
 }
-// 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--fullscreen .lightbox-dialog__window,
+.lightbox-dialog--large .lightbox-dialog__window {
+    align-self: center;
+    margin: var(--spacing-100);
+    height: 70%;
+
+    // This is needed like this becuase max-height 100% would cause a scroll overflow
+    max-height: 95%;
+}
+
+@media (max-width: $_screen-size-SM) {
+    .lightbox-dialog--large .lightbox-dialog__window {
+        width: 100%;
+        height: 95%;
+
+        // This is needed like this becuase max-height 100% would cause a scroll overflow
+        max-height: 95%;
+    }
+
+    .lightbox-dialog--fullscreen .lightbox-dialog__window {
+        border-radius: 0;
+        height: 100%;
+        margin: 0;
+        max-height: 100%;
+        max-width: 100%;
+        width: 100%;
+    }
+
+    // Deprecated
+    .lightbox-dialog--fullscreen .lightbox-dialog__handle,
+    .lightbox-dialog--large .lightbox-dialog__handle {
+        display: none;
+    }
+}
+/* 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();
+        @include lightbox-dialog-window-large();
 
         max-width: calc(88% - var(--spacing-400));
     }
 
+    // Deprecated
     .lightbox-dialog__handle {
         display: none;
     }
@@ -206,7 +248,7 @@ button.icon-btn.lightbox-dialog__prev {
     }
 
     .lightbox-dialog__window .lightbox-dialog__footer {
-        .dialog-footer-content-large();
+        @include dialog-footer-content-large();
     }
     .lightbox-dialog--show .lightbox-dialog__window--animate,
     .lightbox-dialog--hide-init .lightbox-dialog__window--animate,
@@ -216,7 +258,7 @@ button.icon-btn.lightbox-dialog__prev {
     }
 }
 
-@media (min-width: @_screen-size-MD) {
+@media (min-width: $_screen-size-MD) {
     .lightbox-dialog__window {
         max-width: var(--dialog-lightbox-max-width);
     }