@ebay/skin 16.6.0 → 16.7.0-0

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

@@ -3,6 +3,7 @@ export default { title: "Skin/Lightbox Dialog" };
 export const base = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
@@ -26,6 +27,7 @@ export const base = () => `
 export const expressiveBase = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--expressive" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
         <div class="lightbox-dialog__header">
            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
@@ -50,6 +52,7 @@ export const expressiveBase = () => `
 export const basePrev = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <div class="lightbox-dialog__header">
             <button class="icon-btn lightbox-dialog__prev" type="button" aria-label="Go back">
                 <svg class="icon icon--chevron-left-16" aria-hidden="true">
@@ -78,6 +81,74 @@ export const basePrev = () => `
 export const scrollingLightbox = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
+        <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-16" aria-hidden="true">
+                    <use href="#icon-close-16"></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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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 expandedLightbox = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
+    <div class="lightbox-dialog__window lightbox-dialog__window--expanded">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
@@ -144,6 +215,7 @@ export const scrollingLightbox = () => `
 export const expressiveScrolling = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--expressive" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
@@ -211,6 +283,7 @@ export const expressiveScrolling = () => `
 export const baseWithFooter = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
@@ -240,6 +313,7 @@ export const baseRTL = () => `
 <div dir="rtl">
     <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
         <div class="lightbox-dialog__window">
+            <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
             <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">
@@ -265,6 +339,7 @@ export const prevRTL = () => `
 <div dir="rtl">
     <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
         <div class="lightbox-dialog__window">
+            <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
             <div class="lightbox-dialog__header">
                 <button class="icon-btn lightbox-dialog__prev" type="button" aria-label="Go back">
                     <svg class="icon icon--chevron-left-16" aria-hidden="true">
@@ -294,6 +369,7 @@ export const prevRTL = () => `
 export const baseWithLongHeader = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox with a very long header that should wrap to the next line, but is actually cut off</h2>
             <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
@@ -317,6 +393,7 @@ export const baseWithLongHeader = () => `
 export const wide = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--wide" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
@@ -340,6 +417,7 @@ export const wide = () => `
 export const narrow = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--narrow" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <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">
@@ -363,6 +441,7 @@ export const narrow = () => `
 export const expressiveWide = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--wide lightbox-dialog--expressive" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
@@ -387,6 +466,7 @@ export const expressiveWide = () => `
 export const expressivePrev = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--expressive" role="dialog">
     <div class="lightbox-dialog__window">
+        <button class="lightbox-dialog__handle" aria-label="Expand Dialog" type="button"></button>
         <div class="lightbox-dialog__image" style="background-image:url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg)"></div>
         <div class="lightbox-dialog__header">
             <button class="icon-btn lightbox-dialog__prev" type="button" aria-label="Go back">

package/src/less/marketsans/marketsans.less

@@ -13,7 +13,8 @@
     font-style: normal;
     font-weight: normal;
     src: url("@{marketsans-url}@{marketsans-filename-regular}.eot");
-    src: url("@{marketsans-url}@{marketsans-filename-regular}.eot?#iefix")
+    src:
+        url("@{marketsans-url}@{marketsans-filename-regular}.eot?#iefix")
             format("embedded-opentype"),
         url("@{marketsans-url}@{marketsans-filename-regular}.woff2")
             format("woff2"),
@@ -31,7 +32,8 @@
     font-style: normal;
     font-weight: bold;
     src: url("@{marketsans-url}@{marketsans-filename-bold}.eot");
-    src: url("@{marketsans-url}@{marketsans-filename-bold}.eot?#iefix")
+    src:
+        url("@{marketsans-url}@{marketsans-filename-bold}.eot?#iefix")
             format("embedded-opentype"),
         url("@{marketsans-url}@{marketsans-filename-bold}.woff2")
             format("woff2"),

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

@@ -42,14 +42,19 @@
 
 .lightbox-dialog-window() {
     .dialog-window();
-    .border-radius-token(lightbox-border-radius, border-radius-100);
+    .border-radius-token(lightbox-border-radius, border-radius-150);
 
-    margin: auto;
+    margin: auto auto 16px;
     max-height: 90%;
     max-width: calc(100% - 32px);
     min-width: 208px;
 }
 
+.lightbox-dialog-window-large() {
+    margin: auto;
+    .border-radius-token(lightbox-border-radius, border-radius-100);
+}
+
 .dialog-header-content(@top-margin: @spacing-200) {
     display: flex;
     // Fix for Safari not honoring min-height

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

@@ -16,6 +16,10 @@ section.section-notice {
     grid-template-columns: 32px auto auto auto;
 }
 
+.section-notice--education {
+    .background-color-token(section-notice-education-background-color, color-background-education);
+}
+
 span[role="region"].section-notice {
     display: grid;
 }
@@ -31,7 +35,7 @@ span[role="region"].section-notice {
     white-space: nowrap;
 }
 
-/* legacy version with separate bold heading */
+// legacy version with separate bold heading
 .section-notice__title:not(:only-child) {
     font-weight: bold;
 }
@@ -98,12 +102,12 @@ p.section-notice__cta {
     margin-top: @spacing-200;
 }
 
-/* support legacy 6.5 notice with heading + paragaphs */
+// support legacy 6.5 notice with heading + paragaphs
 .section-notice__main .section-notice__title ~ p {
     margin: @spacing-50 0 0;
 }
 
-/* LARGE SCREEN ADJUSTMENTS */
+// LARGE SCREEN ADJUSTMENTS
 
 @media (min-width: @_screen-size-SM) {
     section.section-notice,
@@ -148,3 +152,13 @@ p.section-notice__cta {
         padding-left: 16px;
     }
 }
+
+// progressive enhancement adjustment for larger 24x24 icon
+// browsers without :has support will have text top aligned like regular section-notice
+.section-notice__header:has(svg[class*="24"]) {
+    height: @spacing-300;
+
+    + .section-notice__main {
+        padding-top: 2px;
+    }
+}

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

@@ -0,0 +1,156 @@
+export default { title: "Skin/Section Notice/Icon 16" };
+
+export const body = () => `
+<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 icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</div>
+`;
+
+export const title = () => `
+<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 icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</div>
+`;
+
+// known issue: https://github.com/eBay/skin/issues/2146
+export const linkCTA = () => `
+<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 icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+        <a href="https://www.ebay.com">Action</a>
+    </div>
+</div>
+`;
+
+// known issue: https://github.com/eBay/skin/issues/2146
+export const fakeLinkCTA = () => `
+<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 icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+        <button class="fake-link" type="button">Action</button>
+    </div>
+</div>
+`;
+
+export const dismiss = () => `
+<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 icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+    <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+        <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+            <use href="#icon-close-16"></use>
+        </svg>
+    </button>
+    </div>
+</div>
+`;
+
+export const dismissAndLinkCTA = () => `
+<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 icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+export const dismissAndFakeLinkCTA = () => `
+<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 icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification Title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <button class="fake-link" type="button">Action</button>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+`;
+
+// known issue: https://github.com/eBay/skin/issues/2142
+export const RTL = () => `
+<div dir="rtl">
+    <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 icon--confirmation-filled-16">
+                <use href="#icon-confirmation-filled-16"></use>
+            </svg>
+        </div>
+        <div class="section-notice__main">
+            <h3 class="section-notice__title">Notification Title</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+        <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
+        <div class="section-notice__footer">
+            <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+    </div>
+</div>
+`;