@ebay/skin 17.3.0 → 17.4.0-next.1

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

@@ -0,0 +1,241 @@
+export default { title: "Skin/Icon Button/Links" };
+
+export const base = () => `
+<a aria-label="settings" class="icon-link icon-link--large" href="https://www.ebay.com">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="settings" class="icon-link" href="https://www.ebay.com">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="settings" class="icon-link icon-link--small" href="https://www.ebay.com">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+`;
+
+export const baseSpinner = () => `
+<a aria-label="loading" class="icon-link icon-link--large" href="https://www.ebay.com">
+    <span class="progress-spinner progress-spinner--large">
+        <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
+            <use href="#icon-spinner-24"></use>
+        </svg>
+    </span>
+</a>
+<a aria-label="loading" class="icon-link" href="https://www.ebay.com">
+    <span class="progress-spinner">
+        <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small" href="https://www.ebay.com">
+    <span class="progress-spinner progress-spinner--small">
+        <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</a>
+`;
+
+export const baseDisabled = () => `
+<a aria-label="settings" class="icon-link icon-link--large">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="settings" class="icon-link">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="settings" class="icon-link icon-link--small">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+`;
+
+export const primary = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--primary" href="https://www.ebay.com">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--primary" href="https://www.ebay.com">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--primary" href="https://www.ebay.com">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+`;
+
+export const primarySpinner = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--primary" href="https://www.ebay.com">
+    <span class="progress-spinner progress-spinner--large">
+        <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
+            <use href="#icon-spinner-24"></use>
+        </svg>
+    </span>
+</a>
+<a aria-label="loading" class="icon-link icon-link--primary" href="https://www.ebay.com">
+    <span class="progress-spinner">
+        <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--primary" href="https://www.ebay.com">
+    <span class="progress-spinner progress-spinner--small">
+        <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</a>
+`;
+
+export const primaryDisabled = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--primary">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--primary">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--primary">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+`;
+
+export const secondary = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--secondary" href="https://www.ebay.com">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--secondary" href="https://www.ebay.com">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--secondary" href="https://www.ebay.com">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+`;
+
+export const secondarySpinner = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--secondary" href="https://www.ebay.com">
+    <span class="progress-spinner progress-spinner--large">
+        <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
+            <use href="#icon-spinner-24"></use>
+        </svg>
+    </span>
+</a>
+<a aria-label="loading" class="icon-link icon-link--secondary" href="https://www.ebay.com">
+    <span class="progress-spinner">
+        <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--secondary" href="https://www.ebay.com">
+    <span class="progress-spinner progress-spinner--small">
+        <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</a>
+`;
+
+export const secondaryDisabled = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--secondary">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--secondary">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--secondary">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+`;
+
+export const tertiary = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--tertiary" href="https://www.ebay.com">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--tertiary" href="https://www.ebay.com">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--tertiary" href="https://www.ebay.com">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+`;
+
+export const tertiarySpinner = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--tertiary" href="https://www.ebay.com">
+    <span class="progress-spinner progress-spinner--large">
+        <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
+            <use href="#icon-spinner-24"></use>
+        </svg>
+    </span>
+</a>
+<a aria-label="loading" class="icon-link icon-link--tertiary" href="https://www.ebay.com">
+    <span class="progress-spinner">
+        <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--tertiary" href="https://www.ebay.com">
+    <span class="progress-spinner progress-spinner--small">
+        <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
+            <use href="#icon-spinner-20"></use>
+        </svg>
+    </span>
+</a>
+`;
+
+export const tertiaryDisabled = () => `
+<a aria-label="loading" class="icon-link icon-link--large icon-link--tertiary">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--tertiary">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</a>
+<a aria-label="loading" class="icon-link icon-link--small icon-link--tertiary">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</a>
+`;

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

@@ -40,7 +40,7 @@ export const expanded = () => `
                     <h3 class="infotip__heading">Infotip</h3>
                     <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">
+                <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">
                         <use href="#icon-close-16"></use>
                     </svg>
@@ -95,7 +95,7 @@ export const paragraphExpanded = () => `
                         <span class="infotip__heading" role="heading" aria-level=5>Infotip</span>
                         <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">
+                    <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">
                             <use href="#icon-close-16"></use>
                         </svg>
@@ -131,3 +131,28 @@ export const infotipModal = () => `
         </div>
     </div>
  `;
+
+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">
+            <use href="#icon-information-16"></use>
+        </svg>
+    </button>
+    <div class="infotip__overlay" style="left: calc(50% - 16px); right: auto; top: calc(100% + 8px); bottom: auto;">
+        <span class="infotip__pointer infotip__pointer--top-left"></span>
+        <div class="infotip__mask">
+            <div class="infotip__cell">
+                <span class="infotip__content">
+                    <h3 class="infotip__heading">Infotip</h3>
+                    <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">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</span>`;

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

@@ -146,3 +146,16 @@ export const longWordInConstrainedWidth = () => `
     </div>
 </div>
 `;
+
+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">
+            <use href="#icon-information-filled-16"></use>
+        </svg>
+    </span>
+    <span class="inline-notice__main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </span>
+</div>
+`;

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

@@ -492,3 +492,27 @@ export const expressivePrev = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog demo-a11y-text-spacing" 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>
+            <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>
+        </div>
+    </div>
+</div>
+`;

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

@@ -6,14 +6,14 @@ export const base = () => `
 
 export const action = () => `
 <a class="action-link" href="https://www.ebay.com/?r=${Math.floor(
-    Math.random() * Math.floor(1000)
+    Math.random() * Math.floor(1000),
 )}">See all 17 Reviews</a>
 `;
 
 export const RTL = () => `
 <div dir="rtl">
     <a class="action-link" href="https://www.ebay.com/?r=${Math.floor(
-        Math.random() * Math.floor(1000)
+        Math.random() * Math.floor(1000),
     )}">See all 17 Reviews</a>
 <div>
 `;
@@ -23,5 +23,11 @@ export const fake = () =>
 
 export const nav = () =>
     `<a class="nav-link" href="https://www.ebay.com/?r=${Math.floor(
-        Math.random() * Math.floor(1000)
+        Math.random() * Math.floor(1000),
     )}">Link 1</a></li>`;
+
+export const textSpacing = () => `
+<a class="action-link demo-a11y-text-spacing" href="https://www.ebay.com/?r=${Math.floor(
+    Math.random() * Math.floor(1000),
+)}">Text Spacing</a>
+`;

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

@@ -148,3 +148,40 @@ export const subtitleSelected = () => `
     </div>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="listbox demo-a11y-text-spacing">
+    <div class="listbox__options" role="listbox" tabindex="0">
+        <div class="listbox__option" role="option" aria-selected="true">
+            <span class="listbox__value">Option 1</span>
+            <span class="listbox__description">
+                <span class="clipped">.</span>
+                More info about option 1
+            </span>
+            <svg class="icon icon--tick-16" height="8" width="8">
+                <use href="#icon-tick-16"></use>
+            </svg>
+        </div>
+        <div class="listbox__option" role="option" aria-selected="false">
+            <span class="listbox__value">Option 2</span>
+            <span class="listbox__description">
+                <span class="clipped">.</span>
+                More info about option 2
+            </span>
+             <svg class="icon icon--tick-16" height="8" width="8">
+                <use href="#icon-tick-16"></use>
+            </svg>
+        </div>
+        <div class="listbox__option" role="option" aria-selected="false">
+            <span class="listbox__value">Option 3</span>
+            <span class="listbox__description">
+                <span class="clipped">.</span>
+                More info about option 3
+            </span>
+            <svg class="icon icon--tick-16" height="8" width="8">
+                <use href="#icon-tick-16"></use>
+            </svg>
+        </div>
+    </div>
+</span>
+`;

package/src/less/listbox-button/stories/base.stories.js

@@ -365,3 +365,45 @@ export const floatingLabelSelected = () => `
     </div>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="listbox-button demo-a11y-text-spacing">
+    <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
+        <span class="btn__cell">
+            <span class="btn__label">Color: </span>
+            <span class="btn__text">Blue</span>
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Red</span>
+                <svg class="icon icon--tick-16" height="8" width="8">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option" aria-selected="true">
+                <span class="listbox-button__value">Blue</span>
+                <svg class="icon icon--tick-16" height="8" width="8">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Yellow</span>
+                <svg class="icon icon--tick-16" height="8" width="8">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Green</span>
+                <svg class="icon icon--tick-16" height="8" width="8">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+</span>
+`;

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

@@ -30,3 +30,13 @@ export const separator = () => `
     </div>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="menu demo-a11y-text-spacing">
+    <span class="menu__items" role="menu">
+        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 1<span class="badge">1</span></span></div>
+        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 2<span class="badge">10</span></span></div>
+        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 3<span class="badge">99+</span></span></div>
+    </span>
+</span>
+`;

package/src/less/menu-button/stories/base.stories.js

@@ -415,3 +415,29 @@ export const separator = () => `
     </div>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="menu-button demo-a11y-text-spacing">
+    <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
+        <span class="btn__cell">
+            <span class="btn__text">Button</span>
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="menu-button__menu">
+        <div class="menu-button__items" role="menu">
+            <div class="menu-button__item" role="menuitem" tabindex="0">
+                <span>Item 1 with a very very very long string</span>
+            </div>
+            <div class="menu-button__item" role="menuitem">
+                <span>Item 20000</span>
+            </div>
+            <div class="menu-button__item" role="menuitem">
+                <span>Item 30000</span>
+            </div>
+        </div>
+    </div>
+</span>
+`;

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

@@ -198,3 +198,25 @@ export const formErrors = () => `
     </div>
 </section>
 `;
+
+export const textSpacing = () => `
+<section class="page-notice page-notice--information demo-a11y-text-spacing" role="region" aria-label="Information">
+    <div class="page-notice__header">
+        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></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-16" height="14" width="14">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </a>
+    </div>
+</section>
+`;

package/src/less/pagination/stories/overflow.stories.js

@@ -280,3 +280,52 @@ export const endMenuExpanded = () => `
     </a>
 </nav>
 `;
+
+export const textSpacing = () => `
+<nav class="pagination demo-a11y-text-spacing" aria-labelledby="pagination-heading-4" role="navigation">
+    <span aria-live="polite" role="status">
+        <h2 class="clipped" id="pagination-heading-3">Results Pagination - Page 10</h2>
+    </span>
+    <a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
+        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
+        </svg>
+    </a>
+    <ol class="pagination__items">
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1" class="pagination__item">1</a>
+        </li>
+        <li>
+            <span class="pagination__item">
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
+                </svg>
+            </span>
+        </li>
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=43" class="pagination__item">43</a>
+        </li>
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=44" class="pagination__item" aria-current="page">44</a>
+        </li>
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=45" class="pagination__item">45</a>
+        </li>
+        <li>
+            <span class="pagination__item">
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
+                </svg>
+            </span>
+        </li>
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=80" class="pagination__item">80</a>
+        </li>
+    </ol>
+    <a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
+        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
+        </svg>
+    </a>
+</nav>
+`;

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

@@ -202,3 +202,48 @@ export const panelScrollWithFooter = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog demo-a11y-text-spacing" role="dialog">
+    <div class="panel-dialog__window">
+        <div class="panel-dialog__header">
+            <h2 id="panel-title">Scrolling Panel with Footer</h2>
+            <button class="icon-btn panel-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="panel-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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+        </div>
+        <div class="panel-dialog__footer">
+            <button class="btn btn--primary">Submit</button>
+            <button class="btn">Cancel</button>
+        </div>
+    </div>
+</div>
+`;