@ebay/skin 15.0.0 → 15.1.0-1

package/src/less/section-notice/section-notice.less

@@ -5,18 +5,19 @@
     .background-color-token(section-notice-default-background-color, color-background-secondary);
     .border-radius-token(section-notice-border-radius, border-radius-50);
     font-size: @font-size-14;
-    justify-content: flex-start;
     margin: 8px 0;
     padding: 16px;
 }
 
 div[role="region"].section-notice,
 section.section-notice {
-    display: flex;
+    display: grid;
+    // provide explicit structure up front, create loose markup model
+    grid-template-columns: 32px auto auto auto;
 }
 
 span[role="region"].section-notice {
-    display: inline-flex;
+    display: grid;
 }
 
 .section-notice__title {
@@ -25,6 +26,11 @@ span[role="region"].section-notice {
     margin: 0;
 }
 
+// force links with text having more than one word to remain on same line
+.section-notice__cta a {
+    white-space: nowrap;
+}
+
 /* legacy version with separate bold heading */
 .section-notice__title:not(:only-child) {
     font-weight: bold;
@@ -50,30 +56,44 @@ span[role="region"].section-notice {
     .color-token(section-notice-foreground-color, color-foreground-primary);
 }
 
+.section-notice .icon {
+    vertical-align: top;
+}
+
 .section-notice__header {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    padding-right: @spacing-150;
+    grid-column: 1;
+    grid-row: 1;
+    height: @spacing-200;
+    padding-right: @spacing-200;
 }
 
-.section-notice__main,
-.section-notice__footer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+.section-notice__main {
+    grid-column: 2;
+    grid-row: 1;
+    padding-right: @spacing-200;
 }
 
 .section-notice__footer {
-    flex-shrink: 0;
-    margin-left: auto;
-    padding-left: 0;
-    width: auto;
+    grid-column: 4;
+    grid-row: 1;
+    justify-self: end;
 }
 
-/* support legacy 6.5 notice with heading + paragaphs */
 .section-notice__main p {
     font-size: @font-size-regular;
+    margin: 0;
+}
+
+p.section-notice__cta {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+    margin-right: @spacing-200;
+    margin-top: @spacing-200;
+}
+
+/* support legacy 6.5 notice with heading + paragaphs */
+.section-notice__main .section-notice__title ~ p {
     margin: @spacing-50 0 0;
 }
 
@@ -86,6 +106,15 @@ span[role="region"].section-notice {
         margin: @spacing-200 0;
     }
 
+    p.section-notice__cta {
+        grid-column: 4;
+        grid-row: 1;
+        justify-self: end;
+        margin-bottom: 0;
+        margin-top: 0;
+        padding-right: @spacing-200;
+    }
+
     .section-notice__footer {
         margin-top: 0;
         padding-left: @spacing-200;
@@ -99,9 +128,19 @@ span[role="region"].section-notice {
     }
 
     .section-notice__footer {
+        justify-self: start;
         margin-left: initial;
         margin-right: auto;
         padding-left: initial;
         padding-right: 0;
     }
+
+    .section-notice__main {
+        padding-right: 0;
+    }
+
+    p.page-notice__cta {
+        margin-left: 16px;
+        padding-left: 16px;
+    }
 }

package/src/less/section-notice/stories/rtl.stories.js

@@ -0,0 +1,66 @@
+export default { title: 'Section Notice/RTL' };
+
+export const confirmationWithButton = () => `
+<div dir="rtl">
+    <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
+        <div class="page-notice__header">
+            <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">
+            <h2 class="page-notice__title">You have opted into eBay Pay</h2>
+        </div>
+        <div class="page-notice__footer">
+            <button class="fake-link">Dismiss</button>
+        </div>
+    </section>
+</div>
+`;
+
+export const dismissableWithTitle = () => `
+<div dir="rtl">
+    <section class="page-notice page-notice--information" role="region" aria-label="Information">
+        <div class="page-notice__header">
+            <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">
+            <h3 class="page-notice__title">Notice Title</h3>
+            <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
+        </div>
+        <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="14" width="14">
+                    <use href="#icon-close-small"></use>
+                </svg>
+            </a>
+        </div>
+    </section>
+</div>
+`;
+
+export const dismissableWithoutTitle = () => `
+<div dir="rtl">
+    <section class="page-notice page-notice--information" role="region" aria-label="Information">
+        <div class="page-notice__header">
+            <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">
+            <h3 class="page-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h3>
+        </div>
+        <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="14" width="14">
+                    <use href="#icon-close-small"></use>
+                </svg>
+            </a>
+        </div>
+    </section>
+</div>
+`;

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

@@ -30,6 +30,22 @@ export const generalWithLink = () => `
 </div>
 `;
 
+export const confirmationWithParagraph = () => `
+<div class="section-notice section-notice--confirmation" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+            <use href="#icon-confirmation-filled-small"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <p>Your price has been updated.</p>
+    </div>
+    <div class="section-notice__footer">
+        <button class="fake-link">Dismiss</button>
+    </div>
+</div>
+`;
+
 export const confirmationWithButton = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
@@ -125,3 +141,46 @@ export const informationWithLink = () => `
     </div>
 </div>
 `;
+
+export const dismissableWithTitle = () => `
+<section class="section-notice section-notice--information" role="region" aria-label="Information">
+    <div class="section-notice__header">
+        <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="section-notice__main">
+        <h3 class="section-notice__title">Notice Title</h3>
+        <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
+    </div>
+    <p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
+    <div class="section-notice__footer">
+        <button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
+                <use href="#icon-close"></use>
+            </svg>
+        </a>
+    </div>
+</section>
+`;
+
+export const dismissableWithoutTitle = () => `
+<section class="section-notice section-notice--information" role="region" aria-label="Information">
+    <div class="section-notice__header">
+        <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="section-notice__main">
+        <h3 class="section-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h3>
+    </div>
+    <p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
+    <div class="section-notice__footer">
+        <button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
+                <use href="#icon-close"></use>
+            </svg>
+        </a>
+    </div>
+</section>
+`;

package/src/less/section-notice/stories/test.stories.js

@@ -18,6 +18,30 @@ export const RTL = () => `
 </div>
 `;
 
+export const RTLDismissable = () => `
+<div dir="rtl">
+    <section class="page-notice page-notice--information" role="region" aria-label="Information">
+        <div class="page-notice__header">
+            <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">
+            <h3 class="page-notice__title">Notice Title</h3>
+            <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
+        </div>
+        <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="14" width="14">
+                    <use href="#icon-close-small"></use>
+                </svg>
+            </a>
+        </div>
+    </section>
+</div>
+`;
+
 export const longText = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">

package/src/less/tourtip/stories/tourtip.stories.js

@@ -41,3 +41,54 @@ export const expanded = () => `
         </div>
     </div>
 </div>`;
+
+export const withActions = () => `
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer tourtip__pointer--top"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use xlink:href="#icon-close"></use>
+                    </svg>
+                </button>
+                <div class="tourtip__footer">
+                    <span class="tourtip__index">1 / 3</span>
+                    <button class="fake-link">Back</button>
+                    <button class="btn btn--primary">Next</button>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export const withOneAction = () => `
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer tourtip__pointer--top"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use xlink:href="#icon-close"></use>
+                    </svg>
+                </button>
+                <div class="tourtip__footer">
+                    <span class="tourtip__index">2 / 3</span>
+                    <button class="btn btn--primary">Next</button>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>`;

package/src/less/tourtip/tourtip.less

@@ -30,6 +30,8 @@ span.tourtip__mask {
 .tourtip__cell {
     .bubble-cell();
 
+    flex-wrap: wrap;
+
     a {
         .color-token(tourtip-foreground-color, color-foreground-primary);
 
@@ -41,10 +43,14 @@ span.tourtip__mask {
 
 .tourtip__content {
     .bubble-content();
+
+    flex-basis: 0;
 }
 
 button.tourtip__close {
     .bubble-close();
+
+    outline-offset: -2px;
 }
 
 button.tourtip__close > svg {
@@ -121,6 +127,40 @@ span.tourtip__heading {
     display: block;
 }
 
+.tourtip__footer {
+    align-items: center;
+    display: flex;
+    justify-content: end;
+    margin-top: 16px;
+    width: 100%;
+}
+
+.tourtip__footer > button:not(:last-child),
+.tourtip__footer > a:not(:last-child) {
+    margin-right: 8px;
+}
+
+// stylelint-disable no-descending-specificity
+// TODO need to remove this once we update fake-links/links to allow no underline and black text
+.tourtip__footer > .fake-link,
+.tourtip__footer > a {
+    color: var(--color-foreground-primary);
+
+    text-decoration: none;
+
+    &:hover:not(:disabled) {
+        color: var(--color-foreground-primary);
+
+        text-decoration: underline;
+    }
+}
+// stylelint-enable no-descending-specificity
+
+.tourtip__index {
+    .color-token(tourtip-index-color, color-foreground-secondary);
+    flex: 1;
+}
+
 @media (min-width: 601px) {
     .tourtip__overlay {
         .bubble-large-screen();