npm - @ebay/skin - Versions diffs - 17.3.0-next.0 → 17.4.0-next.0 - Mend

@ebay/skin 17.3.0-next.0 → 17.4.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

package/.changeset/big-cheetahs-peel.md +5 -0
package/.changeset/kind-pens-own.md +5 -0
package/.changeset/loud-carrots-protect.md +5 -0
package/.changeset/metal-cars-promise.md +5 -0
package/.changeset/pre.json +7 -9
package/.changeset/shaggy-ways-pump.md +5 -0
package/.changeset/shaggy-yaks-guess.md +5 -0
package/.github/workflows/jekyll-gh-pages.yml +8 -2
package/.storybook/main.js +1 -1
package/.storybook/manager.js +1 -1
package/CHANGELOG.md +40 -0
package/ICON-CREATION.md +1 -1
package/_cdn/skin/v17.4.0-next.0/skin-default.min.css +76 -0
package/_cdn/skin/v17.4.0-next.0/skin-full.min.css +160 -0
package/_cdn/skin/v17.4.0-next.0/skin-headless.min.css +6 -0
package/dist/icon/icon.css +20 -0
package/dist/icon-button/icon-button.css +113 -0
package/dist/listbox-button/listbox-button.css +23 -4
package/dist/phone-input/phone-input.css +142 -0
package/dist/skeleton/skeleton.css +6 -0
package/dist/svg/icon/icon-bids-24.svg +4 -2
package/dist/svg/icon/icon-bids-64.svg +2 -5
package/dist/svg/icon/icon-bookmark-filled-16.svg +7 -0
package/dist/svg/icon/icon-bookmark-filled-24.svg +7 -0
package/dist/svg/icon/icon-exclude-16.svg +7 -0
package/dist/svg/icon/icon-exclude-24.svg +7 -0
package/dist/svg/icon/icon-fast-and-free-16.svg +4 -2
package/dist/svg/icon/icon-fast-and-free-24.svg +4 -2
package/dist/svg/icon/icon-inspect-64.svg +7 -0
package/dist/svg/icon/icon-on-the-way-16.svg +4 -3
package/dist/svg/icon/icon-on-the-way-24.svg +4 -2
package/dist/svg/icon/icon-wallet-24.svg +4 -2
package/dist/svg/icon/icon-wallet-64.svg +4 -2
package/dist/svg/icons.svg +72 -27
package/dist/tokens/evo-dark.css +14 -9
package/dist/tokens/evo-light.css +13 -3
package/eslint.config.mjs +15 -0
package/index.browser.json +1 -0
package/index.css +1 -0
package/index.js +1 -0
package/index.mjs +1 -0
package/lint.log +10 -0
package/package.json +23 -23
package/phone-input.browser.json +1 -0
package/phone-input.css +1 -0
package/phone-input.js +1 -0
package/phone-input.mjs +1 -0
package/scripts/jekyll-config.js +2 -4
package/src/less/alert-dialog/stories/alert-dialog.stories.js +16 -0
package/src/less/badge/stories/badge.stories.js +4 -0
package/src/less/breadcrumbs/stories/button-cascade.stories.js +29 -0
package/src/less/breadcrumbs/stories/button-overflow.stories.js +48 -0
package/src/less/breadcrumbs/stories/link-cascade.stories.js +29 -0
package/src/less/breadcrumbs/stories/link-overflow.stories.js +51 -0
package/src/less/bundles/skin-headless.less +1 -0
package/src/less/button/stories/button/text-spacing.stories.js +16 -0
package/src/less/button/stories/fake-button/text-spacing.stories.js +13 -0
package/src/less/calendar/stories/calendar.stories.js +210 -0
package/src/less/checkbox/stories/checked.stories.js +20 -0
package/src/less/chips-combobox/stories/chips-combobox.stories.js +58 -0
package/src/less/combobox/stories/combobox.stories.js +21 -0
package/src/less/confirm-dialog/stories/confirm-dialog.stories.js +17 -0
package/src/less/cta-button/stories/cta-button.stories.js +11 -0
package/src/less/date-textbox/stories/date-textbox.stories.js +27 -0
package/src/less/details/stories/details.stories.js +14 -0
package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +27 -0
package/src/less/field/stories/helper-texts-stacked.stories.js +17 -0
package/src/less/filter-button/stories/button.stories.js +8 -0
package/src/less/filter-menu/stories/filter-menu.stories.js +41 -0
package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +238 -0
package/src/less/flag/stories/flag.stories.js +9 -0
package/src/less/floating-label/stories/floating-label.stories.js +102 -0
package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +27 -0
package/src/less/global/stories/global.stories.js +16 -0
package/src/less/icon/generated/icon.less +20 -0
package/src/less/icon-button/icon-button.less +133 -0
package/src/less/icon-button/stories/buttons.stories.js +241 -0
package/src/less/icon-button/stories/links.stories.js +241 -0
package/src/less/infotip/stories/infotip.stories.js +27 -2
package/src/less/inline-notice/stories/inline.stories.js +13 -0
package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +24 -0
package/src/less/link/stories/link.stories.js +9 -3
package/src/less/listbox/stories/listbox.stories.js +37 -0
package/src/less/listbox-button/listbox-button.less +9 -1
package/src/less/listbox-button/stories/base.stories.js +42 -0
package/src/less/menu/stories/misc.stories.js +10 -0
package/src/less/menu-button/stories/base.stories.js +26 -0
package/src/less/page-notice/stories/page-notice.stories.js +22 -0
package/src/less/pagination/stories/overflow.stories.js +49 -0
package/src/less/panel-dialog/stories/panel-dialog.stories.js +45 -0
package/src/less/phone-input/phone-input.less +173 -0
package/src/less/phone-input/stories/phone-input.stories.js +825 -0
package/src/less/progress-bar-expressive/stories/progress-bar-expressive.stories.js +31 -0
package/src/less/progress-stepper/stories/progress-stepper.stories.js +52 -0
package/src/less/radio/stories/checked.stories.js +49 -2
package/src/less/section-notice/stories/icon-16.stories.js +25 -1
package/src/less/section-title/stories/section-title.stories.js +17 -0
package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +10 -0
package/src/less/select/stories/default.stories.js +13 -0
package/src/less/signal/stories/signal.stories.js +6 -0
package/src/less/skeleton/skeleton.less +11 -0
package/src/less/skeleton/stories/composite.stories.js +1 -1
package/src/less/snackbar-dialog/stories/base.stories.js +14 -0
package/src/less/split-button/stories/base.stories.js +30 -0
package/src/less/tabs/stories/tabs/block.stories.js +17 -0
package/src/less/tabs/stories/tabs/inlineBlock.stories.js +17 -0
package/src/less/textbox/stories/textbox.stories.js +6 -0
package/src/less/toast-dialog/stories/toast-dialog.stories.js +23 -0
package/src/less/toggle-button/stories/gallery-layout.stories.js +13 -0
package/src/less/toggle-button/stories/list-layout.stories.js +14 -0
package/src/less/toggle-button/stories/minimal-layout.stories.js +8 -0
package/src/less/tooltip/stories/tooltip.stories.js +19 -0
package/src/less/tourtip/stories/tourtip.stories.js +21 -0
package/src/svg/icon/icon-bids-24.svg +4 -2
package/src/svg/icon/icon-bids-64.svg +2 -5
package/src/svg/icon/icon-bookmark-filled-16.svg +7 -0
package/src/svg/icon/icon-bookmark-filled-24.svg +7 -0
package/src/svg/icon/icon-exclude-16.svg +7 -0
package/src/svg/icon/icon-exclude-24.svg +7 -0
package/src/svg/icon/icon-fast-and-free-16.svg +4 -2
package/src/svg/icon/icon-fast-and-free-24.svg +4 -2
package/src/svg/icon/icon-inspect-64.svg +7 -0
package/src/svg/icon/icon-on-the-way-16.svg +4 -3
package/src/svg/icon/icon-on-the-way-24.svg +4 -2
package/src/svg/icon/icon-wallet-24.svg +4 -2
package/src/svg/icon/icon-wallet-64.svg +4 -2
package/src/svg/icons.svg +72 -27
package/src/tokens/evo-dark.css +14 -9
package/src/tokens/evo-light.css +13 -3
package/svg.svg +72 -27
package/.changeset/clever-trees-trade.md +0 -5
package/.changeset/fresh-suits-fold.md +0 -5
package/.changeset/grumpy-emus-jump.md +0 -5
package/.changeset/loud-zebras-fail.md +0 -5
package/.changeset/strange-forks-flow.md +0 -5
package/.changeset/strong-schools-tap.md +0 -5
package/.changeset/strong-toys-behave.md +0 -5
package/.changeset/tough-cougars-poke.md +0 -5
package/.eslintrc +0 -14
package/_cdn/skin/v17.3.0-next.0/skin-default.min.css +0 -69
package/_cdn/skin/v17.3.0-next.0/skin-full.min.css +0 -151
package/_cdn/skin/v17.3.0-next.0/skin-headless.min.css +0 -6
package/src/less/section-notice/stories/icon-24.stories.js +0 -251

package/src/less/icon-button/stories/buttons.stories.js ADDED Viewed

@@ -0,0 +1,241 @@
+export default { title: "Skin/Icon Button/Buttons" };
+export const base = () => `
+<button class="icon-btn icon-btn--large" type="button" aria-label="Save">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn" type="button" aria-label="Save">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small" type="button" aria-label="Save">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+`;
+export const baseSpinner = () => `
+<button class="icon-btn icon-btn--large" type="button" aria-label="Save">
+    <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>
+</button>
+<button class="icon-btn" type="button" aria-label="Save">
+    <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>
+</button>
+<button class="icon-btn icon-btn--small" type="button" aria-label="Save">
+    <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>
+</button>
+`;
+export const baseDisabled = () => `
+<button class="icon-btn icon-btn--large" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+`;
+export const primary = () => `
+<button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+`;
+export const primarySpinner = () => `
+<button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
+    <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>
+</button>
+<button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
+    <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>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
+    <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>
+</button>
+`;
+export const primaryDisabled = () => `
+<button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--primary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+`;
+export const secondary = () => `
+<button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--secondary" type="button" aria-label="Save">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+`;
+export const secondarySpinner = () => `
+<button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save">
+    <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>
+</button>
+<button class="icon-btn icon-btn--secondary" type="button" aria-label="Save">
+    <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>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save">
+    <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>
+</button>
+`;
+export const secondaryDisabled = () => `
+<button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--secondary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+`;
+export const tertiary = () => `
+<button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save">
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save">
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save">
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+`;
+export const tertiarySpinner = () => `
+<button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save">
+    <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>
+</button>
+<button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save">
+    <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>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save">
+    <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>
+</button>
+`;
+export const tertiaryDisabled = () => `
+<button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-24"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-20"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save" disabled>
+    <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
+        <use href="#icon-save-16"></use>
+    </svg>
+</button>
+`;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>
+`;