@ebay/skin 14.2.0 → 15.0.0-0

package/src/less/expand-button/expand-button.less

@@ -1,181 +0,0 @@
-// DEPRECATED. Remove in v15
-
-@import "../variables/variables.less";
-@import "../mixins/private/button-mixins.less";
-@import "../mixins/private/token-mixins.less";
-
-button.expand-btn {
-    .btn-base();
-
-    background-color: transparent;
-    border: 1px solid;
-    border-color: inherit;
-    .border-radius-token(expand-btn-border-radius, border-radius-50);
-    color: inherit;
-    display: inline-block;
-    font-size: 1em;
-    max-width: 100%;
-    padding: @button-padding-vertical 16px;
-
-    &:hover,
-    &:focus {
-        background-color: var(--color-state-primary-hover);
-    }
-
-    &:active {
-        background-color: var(--color-state-primary-active);
-    }
-}
-
-button.expand-btn svg.icon {
-    .btn-icon-base();
-
-    flex-shrink: 0;
-}
-
-// deprecated
-button.expand-btn--wide {
-    padding-left: @button-padding-horizontal-wide;
-    padding-right: @button-padding-horizontal-wide;
-}
-
-button.expand-btn--fluid {
-    width: 100%;
-}
-
-span.expand-btn__cell {
-    .btn-cell-base();
-
-    justify-content: space-between;
-}
-
-span.expand-btn__cell--fixed-height svg.icon {
-    align-self: center;
-    overflow: visible;
-}
-
-span.expand-btn__cell--center span {
-    flex: 0 1 auto;
-    left: 50%;
-    padding: 0 20px;
-    position: relative;
-    transform: translateX(-50%);
-}
-
-span.expand-btn__cell--center svg.icon:last-child {
-    flex: 0 1 auto;
-    margin-left: auto;
-}
-
-button.expand-btn[disabled],
-button.expand-btn[aria-disabled="true"] {
-    .border-color-token(expand-btn-disabled-border-color, color-stroke-disabled);
-    .color-token(expand-btn-disabled-foreground-color, color-foreground-disabled);
-}
-
-button.expand-btn svg.icon:only-child {
-    display: flex;
-    margin: 0;
-}
-
-button.expand-btn[aria-expanded="true"] svg.icon--dropdown {
-    transform: rotate(180deg);
-}
-
-[dir="rtl"] button.expand-btn svg.icon {
-    &:first-child {
-        margin-left: 8px;
-        margin-right: 0;
-    }
-
-    &:last-child {
-        margin-left: 0;
-        margin-right: 8px;
-    }
-}
-
-[dir="rtl"] button.expand-btn span.expand-btn__cell--center {
-    span {
-        left: auto;
-        right: 50%;
-        transform: translateX(50%);
-    }
-
-    svg.icon:last-child {
-        margin-left: 0;
-        margin-right: auto;
-    }
-}
-
-button.expand-btn--large {
-    min-height: @button-height-large;
-    padding-bottom: @button-padding-vertical-large;
-    padding-top: @button-padding-vertical-large;
-}
-
-button.expand-btn--large-fixed-height {
-    height: @button-height-large;
-    padding-bottom: @button-padding-vertical-large;
-    padding-top: @button-padding-vertical-large;
-}
-
-button.expand-btn--large-truncated {
-    .btn-truncate();
-
-    height: @button-height-large;
-    padding-bottom: @button-padding-vertical-large;
-    padding-top: @button-padding-vertical-large;
-}
-
-// code smell (chained modifier)
-button.expand-btn.expand-btn--no-text,
-button.expand-btn.expand-btn--icon-only {
-    height: @button-height-small;
-    padding-left: 8px;
-    padding-right: 8px;
-}
-
-// code smell (chained modifier)
-button.expand-btn--no-text.expand-btn--large,
-button.expand-btn--icon-only.expand-btn--large {
-    height: @button-height-large;
-}
-
-button.expand-btn--floating-label {
-    padding-bottom: 0;
-    padding-top: 0;
-}
-
-button.expand-btn--floating-label .expand-btn__text {
-    min-height: 19px;
-    padding-bottom: 2px;
-    padding-top: 17px;
-}
-
-button.expand-btn--floating-label .expand-btn__floating-label {
-    align-self: flex-start;
-    display: inline-block;
-    overflow: hidden;
-    padding-bottom: 2px;
-    padding-top: 17px;
-    pointer-events: none;
-    position: absolute;
-    text-align: left;
-    text-overflow: ellipsis;
-    transform: scale(0.75, 0.75) translate(0, -18px);
-    transform-origin: left;
-    white-space: nowrap;
-    width: calc(100% - 24px);
-    z-index: 1;
-}
-
-button.expand-btn--floating-label .expand-btn__floating-label--animate {
-    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-        bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
-}
-
-button.expand-btn--floating-label .expand-btn__floating-label--inline {
-    font-size: 0.875rem;
-    position: unset;
-    transform: translate(0, -6px);
-}

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

@@ -1,56 +0,0 @@
-export default { title: 'Expand Button/Base' };
-
-export const collapsed = () => `
-<button type="button" class="expand-btn" aria-expanded="false">
-     <span class="expand-btn__cell">
-         <span>Button</span>
-         <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-             <use xlink:href="#icon-dropdown"></use>
-         </svg>
-     </span>
- </button>
-`;
-
-export const expanded = () => `
-<button type="button" class="expand-btn" aria-expanded="true">
-     <span class="expand-btn__cell">
-         <span>Button</span>
-         <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-             <use xlink:href="#icon-dropdown"></use>
-         </svg>
-     </span>
- </button>
-`;
-
-export const disabled = () => `
-<button type="button" class="expand-btn" disabled>
-    <span class="expand-btn__cell">
-        <span>Button</span>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
-        </svg>
-    </span>
-</button>
-`;
-
-export const large = () => `
-<button type="button" class="expand-btn expand-btn--large" aria-expanded="true">
-     <span class="expand-btn__cell">
-         <span>Button</span>
-         <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-             <use xlink:href="#icon-dropdown"></use>
-         </svg>
-     </span>
- </button>
-`;
-
-export const longText = () => `
-<button type="button" class="expand-btn">
-    <span class="expand-btn__cell">
-        <span>Button with a lot of text that should just get wider and wider and wider</span>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
-        </svg>
-    </span>
-</button>
-`;

package/src/less/expand-button/stories/cascade.stories.js

@@ -1,54 +0,0 @@
-export default { title: 'Expand Button/Cascade' };
-
-export const color = () => `
-<button type="button" class="expand-btn" style="color: green">
-    <span class="expand-btn__cell">
-        <span>Button</span>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
-        </svg>
-    </span>
-</button>
-`;
-
-export const RTL = () => `
-<div dir="rtl">
-    <button type="button" class="expand-btn">
-        <span class="expand-btn__cell">
-            <span>Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
-            </svg>
-        </span>
-    </button>
-</div>
-`;
-
-export const iconAndTextRTL = () => `
-<div dir="rtl">
-    <button type="button" class="expand-btn">
-        <span class="expand-btn__cell">
-            <svg aria-hidden="true" class="icon icon--settings" focusable="false" height="16" width="16">
-                <use xlink:href="#icon-settings"></use>
-            </svg>
-            <span>Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
-            </svg>
-        </span>
-    </button>
-</div>
-`;
-
-export const centeredRTL = () => `
-<div dir="rtl">
-    <button type="button" class="expand-btn" style="width: 200px;">
-        <span class="expand-btn__cell expand-btn__cell--center">
-            <span>Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
-            </svg>
-        </span>
-    </button>
-</div>
-`;

package/src/less/expand-button/stories/dimensions.stories.js

@@ -1,45 +0,0 @@
-export default { title: 'Expand Button/Dimensions' };
-
-export const fixedWidth = () => `
-<button style="width: 200px;" type="button" class="expand-btn">
-    <span class="expand-btn__cell">
-        <span>Button with a lot of text that should just get taller and taller and taller</span>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
-        </svg>
-    </span>
-</button>
-`;
-
-export const fixedWidthAndHeight = () => `
-<button style="width: 200px;" type="button" class="expand-btn expand-btn--fixed-height">
-    <span class="expand-btn__cell expand-btn__cell--fixed-height">
-        <span>Button with a lot of text that should wrap with some truncation</span>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
-        </svg>
-    </span>
-</button>
-`;
-
-export const fixedWidthAndHeightTruncated = () => `
-<button style="width: 200px;" type="button" class="expand-btn expand-btn--fixed-height expand-btn--truncated">
-    <span class="expand-btn__cell expand-btn__cell--fixed-height expand-btn__cell--truncated">
-        <span>Button with a lot of text that should wrap with some truncation</span>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
-        </svg>
-    </span>
-</button>
-`;
-
-export const wide = () => `
-<button type="button" class="expand-btn expand-btn--wide" aria-expanded="false">
-     <span class="expand-btn__cell">
-         <span>Button</span>
-         <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-             <use xlink:href="#icon-dropdown"></use>
-         </svg>
-     </span>
- </button>
-`;

package/src/less/icon/aliased.less

@@ -1,12 +0,0 @@
-@import "./base.less";
-@import "./generated/aliased.less";
-
-svg.icon--dropdown {
-    height: 8px;
-    width: 8px;
-}
-
-svg.icon--breadcrumb {
-    height: 8px;
-    width: 8px;
-}

package/src/less/icon/base.less

@@ -1,14 +0,0 @@
-@import "../variables/variables.less";
-@import "../mixins/private/icon-mixins.less";
-@import "../mixins/private/token-mixins.less";
-
-svg {
-    &.icon {
-        .icon-base-mixin();
-    }
-
-    &.icon--disabled {
-        .color-token(color-foreground-disabled);
-        fill: currentColor;
-    }
-}

package/src/less/icon/content.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/content.less";

package/src/less/icon/device.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/device.less";

package/src/less/icon/direction.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/direction.less";

package/src/less/icon/filter.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/filter.less";

package/src/less/icon/general.less

@@ -1,2 +0,0 @@
-@import "./base.less";
-@import "./generated/general.less";

package/src/less/icon/generated/aliased.less

@@ -1,25 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--back {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--carousel-next {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--carousel-prev {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--pagination-next {
-    height: 14px;
-    width: 14px;
-}
-svg.icon--pagination-prev {
-    height: 14px;
-    width: 14px;
-}
-svg.icon--cta {
-    height: 18px;
-    width: 20px;
-}

package/src/less/icon/generated/content.less

@@ -1,29 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--add {
-    height: 20px;
-    width: 20px;
-}
-svg.icon--clear {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--edit {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--remove {
-    height: 2px;
-    width: 20px;
-}
-svg.icon--add-small {
-    height: 14px;
-    width: 14px;
-}
-svg.icon--clear-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--edit-small {
-    height: 16px;
-    width: 16px;
-}

package/src/less/icon/generated/device.less

@@ -1,33 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--camera {
-    height: 20px;
-    width: 24px;
-}
-svg.icon--mic {
-    height: 22px;
-    width: 16px;
-}
-svg.icon--mobile {
-    height: 22px;
-    width: 14px;
-}
-svg.icon--mobile-signal {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--print {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--security-key {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--camera-small {
-    height: 14px;
-    width: 16px;
-}
-svg.icon--mic-small {
-    height: 16px;
-    width: 12px;
-}

package/src/less/icon/generated/direction.less

@@ -1,93 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--arrow-move {
-    height: 15px;
-    width: 15px;
-}
-svg.icon--arrow-left {
-    height: 18px;
-    width: 20px;
-}
-svg.icon--arrow-right {
-    height: 18px;
-    width: 20px;
-}
-svg.icon--arrow-right-extra-small {
-    height: 10px;
-    width: 10px;
-}
-svg.icon--chevron-down {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--chevron-down-extra-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--chevron-left {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--chevron-right {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--chevron-up {
-    height: 24px;
-    width: 24px;
-}
-svg.icon--chevron-up-extra-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--arrow-right-bold {
-    height: 21px;
-    width: 22px;
-}
-svg.icon--chevron-up-bold {
-    height: 12.58px;
-    width: 21.6px;
-}
-svg.icon--chevron-down-bold {
-    height: 12.58px;
-    width: 21.6px;
-}
-svg.icon--chevron-down-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--chevron-left-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--chevron-right-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--chevron-up-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--arrow-left-small {
-    height: 14px;
-    width: 14px;
-}
-svg.icon--arrow-move-small {
-    height: 11px;
-    width: 11px;
-}
-svg.icon--arrow-right-small {
-    height: 14px;
-    width: 14px;
-}
-svg.icon--chevron-left-extra-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--chevron-right-extra-small {
-    height: 16px;
-    width: 16px;
-}
-svg.icon--arrow-left-medium {
-    height: 20px;
-    width: 20px;
-}

package/src/less/icon/generated/filter.less

@@ -1,53 +0,0 @@
-/* This is a generated file, DO NOT EDIT */
-svg.icon--tablet-condensed-grid {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--tablet-condensed-grid-filled {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--tablet-relaxed-grid {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--tablet-relaxed-grid-filled {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--tablet-vertical-split {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--tablet-vertical-split-filled {
-    height: 22px;
-    width: 22px;
-}
-svg.icon--filter-gallery-small {
-    height: 14px;
-    width: 15.75px;
-}
-svg.icon--filter-list-small {
-    height: 14px;
-    width: 15.75px;
-}
-svg.icon--filter-single-small {
-    height: 14px;
-    width: 16px;
-}
-svg.icon--filter-gallery {
-    height: 18px;
-    width: 22px;
-}
-svg.icon--filter-list {
-    height: 18px;
-    width: 22px;
-}
-svg.icon--filter-single {
-    height: 18px;
-    width: 22px;
-}
-svg.icon--filter-single-selected {
-    height: 18px;
-    width: 22px;
-}