@ebay/skin 18.1.0 → 18.2.1

package/src/sass/cta-button/cta-button.scss

@@ -1,105 +0,0 @@
-@import "../variables/variables";
-@import "../mixins/private/button-mixins";
-@import "../mixins/private/token-mixins";
-
-a.cta-btn {
-    @include btn-base();
-
-    @include background-color-token(
-        cta-btn-background-color,
-        color-background-primary
-    );
-
-    border-color: currentColor;
-    border-radius: var(
-        --cta-btn-border-radius,
-        calc($button-height-regular / 2)
-    );
-    @include color-token(cta-btn-foreground-color, color-foreground-primary);
-
-    display: inline-block;
-    font-size: var(--font-size-default);
-    max-width: 100%;
-    padding: $button-padding-vertical 20px;
-}
-
-a.cta-btn:visited {
-    @include color-token(
-        cta-btn-visited-foreground-color,
-        color-foreground-primary
-    );
-}
-
-a.cta-btn:focus,
-a.cta-btn:hover {
-    @include background-color-token(
-        cta-btn-hover-background-color,
-        color-foreground-primary
-    );
-    @include border-color-token(
-        cta-btn-hover-border-color,
-        color-foreground-primary
-    );
-    @include color-token(
-        cta-btn-hover-foreground-color,
-        color-background-primary
-    );
-}
-
-a.cta-btn:not([href]),
-a.cta-btn[aria-disabled="true"] {
-    @include background-color-token(
-        cta-btn-disabled-background-color,
-        color-background-primary
-    );
-    @include border-color-token(
-        cta-btn-disabled-border-color,
-        color-stroke-disabled
-    );
-    @include color-token(
-        cta-btn-disabled-foreground-color,
-        color-foreground-disabled
-    );
-}
-
-a.cta-btn--fluid {
-    width: 100%;
-}
-
-span.cta-btn__cell {
-    @include btn-cell-base();
-    @include btn-cell-fixed-height();
-    @include btn-cell-truncated();
-
-    justify-content: center;
-}
-
-a.cta-btn svg.icon {
-    @include btn-icon-base();
-
-    flex-shrink: 0;
-    height: 10px;
-    width: 10px;
-}
-
-span.cta-btn__cell--fixed-height svg.icon {
-    align-self: center;
-    height: 1rem;
-    overflow: visible; /* needed? */
-    width: 1rem;
-}
-
-a.cta-btn--truncated {
-    @include btn-truncate();
-}
-
-a.cta-btn--large {
-    border-radius: $button-border-radius-large;
-    display: inline-flex;
-    font-size: var(--font-size-medium);
-    min-height: $button-height-large;
-}
-
-[dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {
-    transform: rotate(180deg);
-}

package/src/sass/cta-button/stories/cascade.stories.js

@@ -1,36 +0,0 @@
-export default { title: "Skin/CTA Button/Cascade" };
-
-export const color = () => `
-<a class="cta-btn" href="http://www.ebay.com" style="color: red">
-    <span class="cta-btn__cell">
-        <span>Link</span>
-        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
-            <use href="#icon-arrow-right-24"></use>
-        </svg>
-    </span>
-</a>
-`;
-
-export const RTL = () => `
-<div dir="rtl">
-    <a class="cta-btn" href="http://www.ebay.com" style="color: red">
-        <span class="cta-btn__cell">
-            <span style="margin-right: 2px;">Link</span>
-            <svg style="margin-right: 5px; margin-left: 2px;" class="icon icon--24" height="8" width="8" aria-hidden="true">
-                <use href="#icon-arrow-right-24"></use>
-            </svg>
-        </span>
-    </a>
-<div>
-`;
-
-export const fontSize = () => `
-<a class="cta-btn" href="http://www.ebay.com" style="font-size: 200%">
-    <span class="cta-btn__cell">
-        <span>Link</span>
-        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
-            <use href="#icon-arrow-right-24"></use>
-        </svg>
-    </span>
-</a>
-`;

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

@@ -1,23 +0,0 @@
-export default { title: "Skin/CTA Button" };
-
-export const base = () => `
-<a class="cta-btn" href="http://www.ebay.com">
-    <span class="cta-btn__cell">
-        <span>Link</span>
-        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
-            <use href="#icon-arrow-right-24"></use>
-        </svg>
-    </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--24" height="8" width="8" aria-hidden="true">
-            <use href="#icon-arrow-right-24"></use>
-        </svg>
-    </span>
-</a>
-`;

package/src/sass/cta-button/stories/dimensions.stories.js

@@ -1,23 +0,0 @@
-export default { title: "Skin/CTA Button/Dimensions" };
-
-export const large = () => `
-<a class="cta-btn cta-btn--large" href="http://www.ebay.com">
-    <span class="cta-btn__cell">
-        <span>Link</span>
-        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
-            <use href="#icon-arrow-right-24"></use>
-        </svg>
-    </span>
-</a>
-`;
-
-export const largeFixedWidthTruncated = () => `
-<a style="width: 200px;" class="cta-btn cta-btn--large cta-btn--truncated" href="http://www.ebay.com">
-    <span class="cta-btn__cell">
-        <span>Link with a lot of text that should wrap</span>
-        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
-            <use href="#icon-arrow-right-24"></use>
-        </svg>
-    </span>
-</a>
-`;

package/src/sass/date-textbox/date-textbox.scss

@@ -1,37 +0,0 @@
-@import "../variables/variables";
-@import "../mixins/private/token-mixins";
-@import "../mixins/private/bubble-mixins";
-
-.date-textbox {
-    /* 343px - (2 * var(--spacing-200)) [not autmatically compiled by LESS] */
-    --calendar-month-width: 311px;
-}
-
-.date-textbox > .textbox + .textbox {
-    margin-left: var(--spacing-100);
-}
-
-.date-textbox__popover {
-    @include background-color-token(
-        calendar-background-color,
-        color-background-elevated
-    );
-
-    border-radius: var(--spacing-200);
-    box-shadow: var(--bubble-shadow);
-    margin-left: calc(var(--spacing-100) * -1);
-    padding: var(--spacing-200);
-    position: absolute;
-    z-index: 1;
-}
-
-.date-textbox__popover[hidden] {
-    display: none;
-}
-
-@media only screen and (max-width: $_screen-size-SM) {
-    .date-textbox__popover {
-        left: 0;
-        margin-left: 0;
-    }
-}

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

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

package/src/sass/details/details.scss

@@ -1,73 +0,0 @@
-@import "../variables/variables";
-@import "../mixins/private/token-mixins";
-
-summary.details__summary {
-    @include border-radius-token(expand-btn-border-radius, border-radius-50);
-    @include color-token(
-        details-summary-foreground-color,
-        color-foreground-primary
-    );
-
-    align-items: center;
-    box-sizing: border-box;
-    display: inline-flex;
-    font-size: var(--font-size-default);
-    font-weight: var(--font-weight-bold);
-    list-style-position: inside;
-    list-style-type: none; /* Remove details marker for non-webkit */
-    padding: 12px 8px;
-
-    &::before {
-        content: none;
-    }
-
-    /* Remove details marker for non-webkit */
-    &::-webkit-details-marker {
-        display: none;
-    }
-
-    &:focus,
-    &:hover {
-        background-color: var(--color-state-secondary-hover);
-        outline: 1;
-    }
-
-    &:active {
-        background-color: var(--color-state-secondary-active);
-        outline: 1;
-    }
-}
-
-summary.details__summary--center {
-    justify-content: center;
-    width: 100%;
-}
-
-summary.details__summary--small {
-    font-size: var(--font-size-small);
-    padding: 4px 8px;
-}
-
-span.details__icon {
-    margin-inline-start: 8px;
-}
-
-/* progressive enhancement - override hidden SVG */
-span.details__icon[hidden] {
-    display: inline-flex;
-}
-
-details.details[open] {
-    span.details__icon {
-        transform: rotate(180deg);
-    }
-
-    summary.details__summary::before {
-        content: none;
-    }
-}
-
-/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
-details.details summary:focus:not(:focus-visible) {
-    outline: none;
-}

package/src/sass/details/stories/cascade.stories.js

@@ -1,49 +0,0 @@
-export default { title: "Skin/Details/Cascade" };
-
-export const RTL = () => `
-<div dir="rtl">
-    <details class="details" open>
-        <summary class="details__summary">
-            <span class="details__label">Details</span>
-            <span class="details__icon" hidden>
-                <svg class="icon icon--16" aria-hidden="true">
-                    <use href="#icon-chevron-down-16"></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>
-</div>
-`;
-
-export const colour = () => `
-<div style="color: red">
-    <details class="details" open>
-        <summary class="details__summary">
-            <span class="details__label">Details</span>
-            <span class="details__icon" hidden>
-                <svg class="icon icon--16" aria-hidden="true">
-                    <use href="#icon-chevron-down-16"></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>
-</div>
-`;
-
-export const fontSize = () => `
-<div style="font-size: 200%">
-    <details class="details" open>
-        <summary class="details__summary">
-            <span class="details__label">Details</span>
-            <span class="details__icon" hidden>
-                <svg class="icon icon--16" aria-hidden="true">
-                    <use href="#icon-chevron-down-16"></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>
-</div>
-`;

package/src/sass/details/stories/details.stories.js

@@ -1,101 +0,0 @@
-export default { title: "Skin/Details" };
-
-export const closed = () => `
-<details class="details">
-    <summary class="details__summary">
-        <span class="details__label">Details</span>
-        <span class="details__icon" hidden>
-            <svg class="icon icon--16" aria-hidden="true">
-                <use href="#icon-chevron-down-16"></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 open = () => `
-<details class="details" open>
-    <summary class="details__summary">
-        <span class="details__label">Details</span>
-        <span class="details__icon" hidden>
-            <svg class="icon icon--16" aria-hidden="true">
-                <use href="#icon-chevron-down-16"></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 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--16" aria-hidden="true">
-                <use href="#icon-chevron-down-16"></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">
-        <span class="details__label">Details</span>
-        <span class="details__icon" hidden>
-            <svg class="icon icon--16" aria-hidden="true">
-                <use href="#icon-chevron-down-16"></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 small = () => `
-<details class="details" open>
-    <summary class="details__summary details__summary--small">
-        <span class="details__label">Details</span>
-        <span class="details__icon" hidden>
-            <svg class="icon icon--16" aria-hidden="true">
-                <use href="#icon-chevron-down-16"></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>
-`;
-
-// Deprecated stories
-export const closed12pxIcon = () => `
-<details class="details">
-    <summary class="details__summary">
-        <span class="details__label">Details</span>
-        <span class="details__icon" hidden>
-            <svg class="icon icon--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>
-`;
-
-// Deprecated stories
-export const open12pxIcon = () => `
-<details class="details" open>
-    <summary class="details__summary">
-        <span class="details__label">Details</span>
-        <span class="details__icon" hidden>
-            <svg class="icon icon--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>
-`;

package/src/sass/donut-chart/donut-chart.scss

@@ -1,98 +0,0 @@
-@import "../variables/variables";
-
-:root {
-    --donut-chart-max-width: 600px;
-    --donut-chart-graph-size-sm: 140px;
-    --donut-chart-graph-size-lg: 210px;
-}
-
-.donut-chart {
-    container-name: donut-chart;
-    container-type: inline-size;
-    width: 100%;
-}
-
-.donut-chart__grid {
-    column-gap: var(--spacing-400);
-    display: grid;
-    grid-template-columns: 1fr minmax(var(--donut-chart-graph-size-sm), 1fr);
-    grid-template-rows: auto 1fr auto;
-    max-width: var(--donut-chart-max-width);
-    row-gap: var(--spacing-200);
-    width: 100%;
-}
-
-.donut-chart__title {
-    font-size: var(--font-size-medium);
-    font-weight: var(--font-weight-bold);
-}
-
-.donut-chart__graph {
-    align-self: flex-end;
-    grid-column: 2;
-    grid-row: 1 / -1;
-    min-height: var(--donut-chart-graph-size-sm);
-    position: relative;
-    width: 100%;
-}
-
-.donut-chart__metric-value {
-    font-size: var(--font-size-giant-1);
-    font-weight: var(--font-weight-bold);
-}
-
-.donut-chart__metric-label {
-    font-size: var(--font-size-regular);
-}
-
-.donut-chart__legend {
-    align-self: flex-end;
-    grid-column: 1 / -1;
-}
-
-@container (width > 450px) {
-    .donut-chart__grid {
-        column-gap: var(--spacing-800);
-        grid-template-columns: 1fr minmax(var(--donut-chart-graph-size-lg), 1fr);
-        row-gap: var(--spacing-250);
-    }
-
-    .donut-chart__legend {
-        grid-column: 1;
-        grid-row-end: -1;
-    }
-
-    .donut-chart__graph {
-        min-height: var(--donut-chart-graph-size-lg);
-    }
-
-    .donut-chart__legend-container {
-        margin-top: var(--spacing-100);
-    }
-}
-
-@supports not (container-type: inline-size) {
-    @media (min-width: $_screen-size-LG) {
-        .donut-chart__grid {
-            column-gap: var(--spacing-800);
-            grid-template-columns: 1fr minmax(
-                    var(--donut-chart-graph-size-lg),
-                    1fr
-                );
-            row-gap: var(--spacing-250);
-        }
-
-        .donut-chart__legend {
-            grid-column: 1;
-            grid-row-end: -1;
-        }
-
-        .donut-chart__graph {
-            min-height: var(--donut-chart-graph-size-lg);
-        }
-
-        .donut-chart__legend-container {
-            margin-top: var(--spacing-100);
-        }
-    }
-}

package/src/sass/donut-chart/stories/donut-chart.stories.js

@@ -1,39 +0,0 @@
-export default { title: "Skin/Charts/Donut Chart" };
-
-export const base = () => `
-<div class="donut-chart">
-    <div class="donut-chart__grid">
-        <div class="donut-chart__title">
-            Donut chart title
-        </div>
-        <div class="donut-chart__metric">
-            <div class="donut-chart__metric-value">
-                175
-            </div>
-            <div class="donut-chart__metric-label">
-                Returns processed
-            </div>
-        </div>
-        <div class="donut-chart__graph">
-            <div style="position:absolute;width:100%;height:100%;background-color:var(--color-background-secondary);border-radius:16px;display:grid;place-items:center;">Graph placeholder</div>
-        </div>
-        <div class="donut-chart__legend">
-            <div class="chart-legend">
-                <dl>
-                    <div class="chart-legend__item chart-legend__item--primary">
-                        <dt class="chart-legend__label">Portion 1</dt>
-                        <dd class="chart-legend__value">10%</dd>
-                    </div>
-                    <div class="chart-legend__item chart-legend__item--secondary">
-                        <dt class="chart-legend__label">Portion 2</dt>
-                        <dd class="chart-legend__value">20%</dd>
-                    </div>
-                    <div class="chart-legend__item chart-legend__item--tertiary">
-                        <dt class="chart-legend__label">Portion 3</dt>
-                        <dd class="chart-legend__value">30%</dd>
-                    </div>
-                </dl>
-            <div>
-        </div>
-    </div>
-</div>`;