@ebay/skin 17.5.0 → 18.0.0-next.0

package/src/less/toggle-button-group/stories/minimal-layout.stories.js

@@ -1,341 +0,0 @@
-export default { title: "Skin/Toggle Button Group/Minimal Layout" };
-
-export const _2Column = () => `
-<ul aria-label="Buttons" class="toggle-button-group" data-columns="2">
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">4.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8.5</span>
-            </span>
-        </button>
-    </li>
-</ul>
-`;
-
-export const _3Column = () => `
-<ul aria-label="Buttons" class="toggle-button-group" data-columns="3">
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">4.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8.5</span>
-            </span>
-        </button>
-    </li>
-</ul>
-`;
-
-export const _4Column = () => `
-<ul aria-label="Buttons" class="toggle-button-group" data-columns="4">
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">4.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8.5</span>
-            </span>
-        </button>
-    </li>
-</ul>
-`;
-
-export const _5Column = () => `
-<ul aria-label="Buttons" class="toggle-button-group" data-columns="5">
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">4.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8.5</span>
-            </span>
-        </button>
-    </li>
-</ul>
-`;
-
-export const _6Column = () => `
-<ul aria-label="Buttons" class="toggle-button-group" data-columns="6">
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">4.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false">
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">5.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">6.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">7.5</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8</span>
-            </span>
-        </button>
-    </li>
-    <li>
-        <button type="button" class="toggle-button" aria-pressed="false"> 
-            <span class="toggle-button__content">
-                <span class="toggle-button__title">8.5</span>
-            </span>
-        </button>
-    </li>
-</ul>
-`;

package/src/less/toggle-button-group/toggle-button-group.less

@@ -1,111 +0,0 @@
-@import "../variables/variables.less";
-
-.toggle-button-group {
-    display: inline-block;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-}
-
-.toggle-button-group li {
-    display: inline-block;
-    margin-bottom: var(--spacing-50);
-    margin-left: var(--spacing-50);
-    margin-right: var(--spacing-50);
-    margin-top: var(--spacing-50);
-    max-width: var(--toggle-button-width-max);
-    min-height: var(--toggle-button-height-min);
-    min-width: var(--toggle-button-width-min);
-}
-
-.toggle-button-group .toggle-button {
-    width: 100%;
-}
-
-/* Layout Themes */
-.toggle-button-group--list-layout li {
-    max-width: var(--toggle-button-list-width-max);
-    min-width: var(--toggle-button-list-width-min);
-}
-
-.toggle-button-group--list-layout .toggle-button {
-    justify-content: left;
-    max-width: var(--toggle-button-list-width-max);
-    min-width: var(--toggle-button-list-width-min);
-}
-
-.toggle-button-group--gallery-layout li {
-    max-width: var(--toggle-button-gallery-width-max);
-    min-width: var(--toggle-button-gallery-width-min);
-}
-
-.toggle-button-group--gallery-layout .toggle-button {
-    flex-direction: column;
-}
-
-.toggle-button-group--gallery-layout .toggle-button__image,
-.toggle-button-group--gallery-layout .toggle-button__icon {
-    margin-bottom: 0;
-    margin-right: 0;
-}
-
-.toggle-button-group--gallery-layout
-    .toggle-button__icon
-    ~ .toggle-button__content,
-.toggle-button-group--gallery-layout
-    .toggle-button__image-container
-    ~ .toggle-button__content {
-    align-self: flex-start;
-}
-
-.toggle-button-group--gallery-layout .toggle-button__icon,
-.toggle-button-group--gallery-layout .toggle-button__image-container {
-    margin-bottom: 0;
-    margin-right: 0;
-    text-align: left;
-}
-
-.toggle-button-group--gallery-layout .toggle-button__image-container {
-    padding-bottom: 60%;
-    position: relative;
-    text-align: center;
-    width: 100%;
-}
-
-.toggle-button-group--gallery-layout .toggle-button__image {
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 100%;
-}
-
-.toggle-button-group--gallery-layout .toggle-button__image-container img {
-    height: 100%;
-    max-height: 200px;
-    max-width: initial;
-}
-
-/* Columns */
-.toggle-button-group[data-columns="2"] li {
-    width: calc(100% / 2 - 11px);
-}
-
-.toggle-button-group[data-columns="3"] li {
-    width: calc(100% / 3 - 11px);
-}
-
-.toggle-button-group[data-columns="4"] li {
-    width: calc(100% / 4 - 11px);
-}
-
-.toggle-button-group[data-columns="5"] li {
-    width: calc(100% / 5 - 11px);
-}
-
-.toggle-button-group[data-columns="6"] li {
-    width: calc(100% / 6 - 11px);
-}

package/src/less/tooltip/tooltip.less

@@ -1,109 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/bubble-mixins.less";
-@import "../mixins/private/token-mixins.less";
-
-.tooltip {
-    position: relative;
-}
-
-span.tooltip {
-    display: inline-block;
-}
-
-.tooltip__overlay {
-    .bubble();
-}
-
-.tooltip__mask {
-    .bubble-mask();
-    .background-color-token(tooltip-background-color, color-background-elevated);
-    .color-token(tooltip-foreground-color, color-foreground-primary);
-}
-
-span.tooltip__mask {
-    display: block;
-}
-
-.tooltip__cell {
-    .bubble-cell();
-
-    a {
-        .color-token(tooltip-foreground-color, color-foreground-primary);
-
-        &:focus {
-            outline: 1px dashed currentColor;
-        }
-    }
-}
-
-.tooltip__content {
-    .bubble-content();
-}
-
-button.tooltip__close {
-    .bubble-close();
-}
-
-.tooltip__pointer {
-    .pointer-base();
-    .background-color-token(tooltip-background-color, color-background-elevated);
-}
-
-.tooltip__pointer--top-left {
-    .pointer-top-left();
-}
-
-.tooltip__pointer--top {
-    .pointer-top-center();
-}
-
-.tooltip__pointer--top-right {
-    .pointer-top-right();
-}
-
-.tooltip__pointer--bottom-left {
-    .pointer-bottom-left();
-}
-
-.tooltip__pointer--bottom {
-    .pointer-bottom-center();
-}
-
-.tooltip__pointer--bottom-right {
-    .pointer-bottom-right();
-}
-
-.tooltip__pointer--left {
-    .pointer-left();
-}
-
-.tooltip__pointer--left-bottom {
-    .pointer-left-bottom();
-}
-
-.tooltip__pointer--left-top {
-    .pointer-left-top();
-}
-
-.tooltip__pointer--right {
-    .pointer-right();
-}
-
-.tooltip__pointer--right-bottom {
-    .pointer-right-bottom();
-}
-
-.tooltip__pointer--right-top {
-    .pointer-right-top();
-}
-
-.tooltip--expanded .tooltip__overlay,
-.tooltip__host[aria-expanded="true"] ~ .tooltip__overlay {
-    display: block;
-}
-
-@media (min-width: @_screen-size-SM) {
-    .tooltip__overlay {
-        .bubble-large-screen();
-    }
-}

package/src/less/variables/variables.less

@@ -1,70 +0,0 @@
-// Responsive Breakpoints
-// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
-// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
-// most mobile devices would be higher in screen width than the smallest viewport width.
-
-// The variables with underscores are to be considered constants. They can be read, but should not be modified.
-@_screen-size-XS: 320px;
-@_screen-size-SM: 512px;
-@_screen-size-MD: 768px;
-@_screen-size-LG: 1024px;
-@_screen-size-XL: 1280px;
-@_screen-size-XL2: 1440px;
-@_screen-size-XL3: 1680px;
-@_screen-size-XL4: 1920px;
-
-@_page-grid-max-width: 1584px;
-@_page-grid-number-cols-small: 8;
-@_page-grid-number-cols-large: 16;
-@_page-grid-outside-margins-small: 16px;
-@_page-grid-outside-margins-large: 32px;
-@_page-grid-outside-margins-max: 48px;
-@_page-grid-column-gaps-small: var(--spacing-100);
-@_page-grid-column-gaps-large: var(--spacing-200);
-@_page-grid-row-gaps-small: var(--spacing-100);
-@_page-grid-row-gaps-large: var(--spacing-200);
-
-@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
-@marketsans-fontname: "Market Sans";
-@marketsans-filename-regular: "MarketSans-Regular-WebS";
-@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
-
-@font-family-default: @marketsans-fontname, Arial, sans-serif;
-// TODO: remove these in next major version
-@font-weight-regular: 500;
-@font-weight-bold: 700;
-
-@font-size-12: 0.75rem;
-@font-size-14: 0.875rem;
-@font-size-16: 1rem;
-@font-size-18: 1.125rem; // secret size
-@font-size-20: 1.25rem;
-@font-size-24: 1.5rem;
-@font-size-30: 1.875rem;
-@font-size-36: 2.25rem;
-@font-size-46: 2.875rem;
-@font-size-64: 4rem;
-
-@spacing-25: @spacing-100 * 0.25;
-@spacing-50: @spacing-100 * 0.5;
-@spacing-75: @spacing-100 * 0.75;
-@spacing-100: 8px;
-@spacing-125: @spacing-100 * 1.25;
-@spacing-150: @spacing-100 * 1.5;
-@spacing-200: @spacing-100 * 2;
-@spacing-250: @spacing-100 * 2.5;
-@spacing-300: @spacing-100 * 3;
-@spacing-400: @spacing-100 * 4;
-@spacing-450: @spacing-100 * 4.5;
-@spacing-600: @spacing-100 * 6;
-@spacing-700: @spacing-100 * 7;
-@spacing-800: @spacing-100 * 8;
-
-@font-size-giant-3: @font-size-46;
-@font-size-giant-2: @font-size-36;
-@font-size-giant-1: @font-size-30;
-@font-size-large-2: @font-size-24;
-@font-size-large-1: @font-size-20;
-@font-size-medium: @font-size-16;
-@font-size-regular: @font-size-14;
-@font-size-small: @font-size-12;