@ebay/skin 17.3.0 → 17.4.0-next.1

package/src/less/breadcrumbs/stories/link-overflow.stories.js

@@ -143,3 +143,54 @@ export const expanded = () => `
     </ul>
 </nav>
 `;
+
+export const textSpacing = () => `
+<nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow demo-a11y-text-spacing" role="navigation">
+    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
+    <ul>
+        <li>
+            <a href="https://www.ebay.com/">ebay</a>
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </li>
+        <li>
+            <span class="fake-menu-button">
+                <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
+                        <use href="#icon-overflow-horizontal-16"></use>
+                    </svg>
+                </button>
+
+                <ul class="fake-menu-button__menu">
+
+                    <div role="menu" class="fake-menu-button__items">
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
+                        </div>
+                        <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
+                            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906">Smart Watch Bands</a>
+                        </div>
+                    </div>
+                </ul>
+            </span>
+
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </li>
+        <li>
+            <a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2">Smart Watch Band Long Band Text Type 2</a>
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
+            </svg>
+        </li>
+        <li>
+            <a aria-current="location">Current Band</a>
+        </li>
+    </ul>
+</nav>
+`;

package/src/less/bundles/skin-headless.less

@@ -43,6 +43,7 @@
 @import "../page-notice/page-notice.less";
 @import "../pagination/pagination.less";
 @import "../panel-dialog/panel-dialog.less";
+@import "../phone-input/phone-input.less";
 @import "../progress-bar/progress-bar.less";
 @import "../progress-bar-expressive/progress-bar-expressive.less";
 @import "../progress-spinner/progress-spinner.less";

package/src/less/button/stories/button/text-spacing.stories.js

@@ -0,0 +1,16 @@
+export default { title: "Skin/Button/Text Spacing" };
+
+export const textOnly = () =>
+    '<button class="btn demo-a11y-text-spacing">Button</button>';
+
+export const form = () =>
+    '<button class="btn btn--form demo-a11y-text-spacing">Button</button>';
+
+export const iconAndText = () => `
+<button type="button" class="btn demo-a11y-text-spacing">
+    <span class="btn__cell">
+        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <span>Button</span>
+    </span>
+</button>
+`;

package/src/less/button/stories/fake-button/text-spacing.stories.js

@@ -0,0 +1,13 @@
+export default { title: "Skin/Fake Button/Text Spacing" };
+
+export const textOnly = () =>
+    '<a href="http://www.ebay/com" class="fake-btn demo-a11y-text-spacing">Fake Button</a>';
+
+export const iconAndText = () => `
+<a class="fake-btn demo-a11y-text-spacing" href="http://www.ebay.com">
+    <span class="fake-btn__cell">
+        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <span>Fake Button</span>
+    </span>
+</a>
+`;

package/src/less/calendar/stories/calendar.stories.js

@@ -507,6 +507,216 @@ export const header = () => /* HTML */ `
     </div>
 `;
 
+export const textSpacing = () => `
+    <div class="calendar demo-a11y-text-spacing">
+        <div class="calendar__header">
+            <div class="calendar__header--inner">
+                <button
+                    class="icon-btn icon-btn--small icon-btn--transparent"
+                    aria-label="Previous Month - July 2019"
+                    variant="icon"
+                >
+                    <svg class="icon icon--chevron-left-24">
+                        <use href="#icon-chevron-left-24"></use>
+                    </svg>
+                </button>
+                <h3>August 2019</h3>
+                <button
+                    class="icon-btn icon-btn--small icon-btn--transparent"
+                    aria-label="Next Month - September 2019"
+                    variant="icon"
+                >
+                    <svg class="icon icon--chevron-right-24">
+                        <use href="#icon-chevron-right-24"></use>
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <div class="calendar__body">
+            <div class="calendar__month">
+                <table>
+                    <caption>
+                        August 2019
+                    </caption>
+                    <thead>
+                        <tr>
+                            <th>Su</th>
+                            <th>Mo</th>
+                            <th>Tu</th>
+                            <th>We</th>
+                            <th>Th</th>
+                            <th>Fr</th>
+                            <th>Sa</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td colspan="4"></td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >1<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >2<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >3<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >4<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >5<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >6<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >7<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >8<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >9<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >10<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >11<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >12<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--disabled"
+                                    >13<span class="clipped">
+                                        - inactive</span
+                                    ></span
+                                >
+                            </td>
+                            <td>
+                                <span class="calendar__cell--current"
+                                    >14<span class="clipped">
+                                        - today</span
+                                    ></span
+                                >
+                            </td>
+                            <td><span>15</span></td>
+                            <td><span>16</span></td>
+                            <td><span>17</span></td>
+                        </tr>
+                        <tr>
+                            <td><span>18</span></td>
+                            <td><span>19</span></td>
+                            <td><span>20</span></td>
+                            <td><span>21</span></td>
+                            <td><span>22</span></td>
+                            <td
+                                class="calendar__cell--selected calendar__range calendar__range--start"
+                            >
+                                <span
+                                    >23<span class="clipped">
+                                        - selected - start of range</span
+                                    ></span
+                                >
+                            </td>
+                            <td class="calendar__range">
+                                <span
+                                    >24<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="calendar__range">
+                                <span
+                                    >25<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
+                            </td>
+                            <td class="calendar__range">
+                                <span
+                                    >26<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
+                            </td>
+                            <td
+                                class="calendar__cell--selected calendar__range calendar__range--end"
+                            >
+                                <span
+                                    >27<span class="clipped">
+                                        - selected - end of range</span
+                                    ></span
+                                >
+                            </td>
+                            <td><span>28</span></td>
+                            <td><span>29</span></td>
+                            <td><span>30</span></td>
+                            <td><span>31</span></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+`;
+
 export const double = () => /* HTML */ `
     <div class="calendar">
         <div class="calendar__body">

package/src/less/checkbox/stories/checked.stories.js

@@ -118,3 +118,23 @@ export const multiLineLabel = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div class="demo-a11y-text-spacing">
+    <legend>Choose an Option</legend>
+    <div style="display: flex;" class="field">
+        <span class="checkbox field__control">
+            <input aria-label="Multiline checkbox 2" class="checkbox__control" id="group-checkbox-2" type="checkbox" value="2" name="checkbox-group" />
+            <span class="checkbox__icon" hidden>
+                <svg class="checkbox__unchecked" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="checkbox__checked" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+        </span>
+        <label class="field__label field__label--end" for="group-checkbox-2">Option 2</label>
+    </div>
+</div>
+`;

package/src/less/chips-combobox/stories/chips-combobox.stories.js

@@ -348,6 +348,64 @@ export const expanded = () => `
 </span>
 `;
 
+export const textSpacing = () => `
+<span class="chips-combobox demo-a11y-text-spacing">
+    <ul class="chips-combobox__items" aria-label="Selected sports">
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
+                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
+                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+        <li>
+            <span class="chip">
+                <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
+                <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
+                    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
+                        <use href="#icon-close-12"></use>
+                    </svg>
+                </button>
+            </span>
+        </li>
+    </ul>
+    <span class="combobox combobox--js combobox--expanded chips-combobox__combobox">
+        <span class="combobox__control chips-combobox_combobox__control">
+            <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
+            <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+        <div class="combobox__listbox">
+            <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
+                <div class="combobox__option" role="option">
+                    <span>Soccer</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Hockey</span>
+                </div>
+                <div class="combobox__option" role="option">
+                    <span>Tennis</span>
+                </div>
+            </div>
+        </div>
+    </span>
+</span>
+`;
+
 export const disabledState = () => `
 <span class="chips-combobox" aria-disabled="true">
     <ul class="chips-combobox__items" aria-label="Selected sports">

package/src/less/combobox/stories/combobox.stories.js

@@ -42,6 +42,27 @@ export const expanded = () => `
 </span>
 `;
 
+export const textSpacing = () => `
+<span class="combobox combobox--expanded demo-a11y-text-spacing">
+    <span class="combobox__control">
+        <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+        </svg>
+    </span>
+    <div class="combobox__listbox">
+        <div id="listbox1" class="combobox__options" role="listbox">
+            <div class="combobox__option" role="option">
+                <span>Option 1</span>
+            </div>
+            <div class="combobox__option" role="option">
+                <span>Option 2</span>
+            </div>
+        </div>
+    </div>
+</span>
+`;
+
 export const disabled = () => `
 <span class="combobox">
     <span class="combobox__control">

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

@@ -16,3 +16,20 @@ export const base = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div aria-labelledby="confirm-dialog-title" aria-modal="true" class="confirm-dialog confirm-dialog--mask-fade demo-a11y-text-spacing" role="dialog">
+    <div class="confirm-dialog__window confirm-dialog__window--fade">
+        <div class="confirm-dialog__header">
+            <h2 id="confirm-dialog-title" class="confirm-dialog__title">Delete Address?</h2>
+        </div>
+        <div class="confirm-dialog__main">
+            <p id="confirm-dialog__description">You will permanently lose this address.</p>
+        </div>
+        <div class="confirm-dialog__footer">
+            <button class="btn confirm-dialog__reject">Cancel</button>
+            <button class="btn btn--primary confirm-dialog__confirm" aria-describedby="confirm-dialog__description">Delete</button>
+        </div>
+    </div>
+</div>
+`;

package/src/less/cta-button/stories/cta-button.stories.js

@@ -10,3 +10,14 @@ export const base = () => `
     </span>
 </a>
 `;
+
+export const textSpacing = () => `
+<a class="cta-btn demo-a11y-text-spacing" href="http://www.ebay.com">
+    <span class="cta-btn__cell">
+        <span>Link</span>
+        <svg class="icon icon--arrow-right-24" height="8" width="8" aria-hidden="true">
+            <use href="#icon-arrow-right-24"></use>
+        </svg>
+    </span>
+</a>
+`;

package/src/less/date-textbox/stories/date-textbox.stories.js

@@ -0,0 +1,27 @@
+export default { title: "Skin/Date Textbox" };
+
+export const base = () => `
+<span class="date-textbox">
+    <span class="textbox textbox--icon-end">
+        <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
+        <button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar">
+        <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
+            <use href="#icon-calendar-24"></use>
+        </svg>
+        </button>
+    </span>
+</span>
+`;
+
+export const textSpacing = () => `
+<span class="date-textbox demo-a11y-text-spacing">
+    <span class="textbox textbox--icon-end">
+        <input class="textbox__control" placeholder="YYYY-MM-DD" type="text" />
+        <button class="icon-btn icon-btn--transparent" type="button" aria-label="Calendar">
+        <svg aria-hidden="true" class="icon icon--calendar-24" width="16" height="16">
+            <use href="#icon-calendar-24"></use>
+        </svg>
+        </button>
+    </span>
+</span>
+`;

package/src/less/details/stories/details.stories.js

@@ -28,6 +28,20 @@ export const open = () => `
 </details>
 `;
 
+export const textSpacing = () => `
+<details class="details demo-a11y-text-spacing" open>
+    <summary class="details__summary">
+        <span class="details__label">Details</span>
+        <span class="details__icon" hidden>
+            <svg class="icon icon--chevron-down-12" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </summary>
+    <p>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>
+</details>
+`;
+
 export const centered = () => `
 <details class="details" open>
     <summary class="details__summary details__summary--center">

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

@@ -68,6 +68,33 @@ export const withFooter = () => `
 </div>
 `;
 
+export const textSpacing = () => `
+<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow demo-a11y-text-spacing" role="dialog">
+    <div class="drawer-dialog__window drawer-dialog__window--slide">
+        <button class="drawer-dialog__handle"></button>
+        <div class="drawer-dialog__header">
+            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
+            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
+                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="drawer-dialog__main">
+            <p>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.
+            </p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+        <div class="drawer-dialog__footer">
+            <button class="btn">Cancel</button>
+            <button class="btn btn--primary">Submit</button>
+        </div>
+    </div>
+</div>
+`;
+
 export const RTL = () => `
 <div dir="rtl">
     <div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">

package/src/less/field/stories/helper-texts-stacked.stories.js

@@ -67,6 +67,23 @@ export const fluidDescriptionCharacterMeter = () => `
 </div>
 `;
 
+export const textSpacing = () => `
+<div class="field fluid demo-a11y-text-spacing">
+    <label class="field__label field__label--stacked" for="field-character-3-input">Field 1</label>
+    <div class="field__control textbox">
+        <input type="text" aria-describedby="field-character-3-description field-character-1" class="textbox__control textbox__control--fluid" id="field-character-3-input" aria-live="off" />
+    </div>
+    <div class="field__description field__description--group">
+        <span id="field-character-1-description">
+            Field description or error
+        </span>
+        <span id="field-character-1">
+            0 of 140
+        </span>
+    </div>
+</div>
+`;
+
 export const RTL = () => `
 <div dir="rtl">
     <span class="field ">

package/src/less/filter-button/stories/button.stories.js

@@ -25,3 +25,11 @@ export const disabled = () => `
     <span class="filter-button__cell">Button</span>
 </button>
 `;
+
+export const textSpacing = () => `
+<button type="button" class="filter-button demo-a11y-text-spacing">
+    <span class="filter-button__cell">
+        <span class="filter-button__text">Button</span>
+    </span>
+</button>
+`;

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

@@ -121,6 +121,47 @@ export const withFooterButton = () => `
 </span>
 `;
 
+export const textSpacing = () => `
+<span class="filter-menu demo-a11y-text-spacing">
+    <div class="filter-menu__items" role="menu">
+        <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
+        </div>
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 2</span>
+        </div>
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
+                    <use href="#icon-checkbox-unchecked-18"></use>
+                </svg>
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
+                    <use href="#icon-checkbox-checked-18"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 3</span>
+        </div>
+    </div>
+    <button type="button" class="filter-menu__footer">Apply</button>
+</span>
+`;
+
 export const formVersion = () => `
 <span class="filter-menu-form">
     <form name="filter-menu-form-1">