@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/src/{less/confirm-dialog/confirm-dialog.less → sass/confirm-dialog/confirm-dialog.scss}

@@ -1,14 +1,14 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dialog-mixins.less";
-@import "../mixins/public/typography-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dialog-mixins";
+@import "../mixins/public/typography-mixins";
+@import "../mixins/private/token-mixins";
 
 .confirm-dialog[role="dialog"] {
-    .lightbox-dialog-base();
+    @include lightbox-dialog-base();
 }
 
 .confirm-dialog__window {
-    .lightbox-dialog-window();
+    @include lightbox-dialog-window();
 
     margin-left: var(--spacing-200);
     margin-right: var(--spacing-200);
@@ -17,7 +17,7 @@
 }
 
 .confirm-dialog__title {
-    .typography-large-1();
+    @include typography-large-1();
 
     margin: 0;
 }
@@ -57,7 +57,8 @@ button.confirm-dialog__confirm {
 
 .confirm-dialog--hide,
 .confirm-dialog--show-init {
-    && {
+    &.confirm-dialog--hide,
+    &.confirm-dialog--show-init {
         display: flex;
     }
 
@@ -73,7 +74,8 @@ button.confirm-dialog__confirm {
 
 .confirm-dialog--show,
 .confirm-dialog--hide-init {
-    && {
+    &.confirm-dialog--show,
+    &.confirm-dialog--hide-init {
         display: flex;
     }
 
@@ -87,15 +89,15 @@ button.confirm-dialog__confirm {
     }
 }
 
-@media (min-width: @_screen-size-MD) {
+@media (min-width: $_screen-size-MD) {
     .confirm-dialog__window {
-        .lightbox-dialog-window-large();
+        @include lightbox-dialog-window-large();
 
         max-width: calc(88% - var(--spacing-400));
     }
 }
 
-@media (min-width: @_screen-size-LG) {
+@media (min-width: $_screen-size-LG) {
     .confirm-dialog__window {
         max-width: var(--dialog-lightbox-max-width);
     }

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

@@ -0,0 +1,105 @@
+@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/{less → sass}/cta-button/stories/cascade.stories.js

@@ -4,7 +4,7 @@ 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--arrow-right-24" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
@@ -16,7 +16,7 @@ export const 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--arrow-right-24" height="8" width="8" aria-hidden="true">
+            <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>
@@ -28,7 +28,7 @@ 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--arrow-right-24" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>

package/src/{less → sass}/cta-button/stories/cta-button.stories.js

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

package/src/{less → sass}/cta-button/stories/dimensions.stories.js

@@ -4,7 +4,7 @@ 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--arrow-right-24" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
@@ -15,7 +15,7 @@ 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--arrow-right-24" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>

package/src/{less/date-textbox/date-textbox.less → sass/date-textbox/date-textbox.scss}

@@ -1,9 +1,9 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/private/bubble-mixins.less";
+@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]
+    /* 343px - (2 * var(--spacing-200)) [not autmatically compiled by LESS] */
     --calendar-month-width: 311px;
 }
 
@@ -12,7 +12,11 @@
 }
 
 .date-textbox__popover {
-    .background-color-token(calendar-background-color, color-background-elevated);
+    @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);
@@ -25,7 +29,7 @@
     display: none;
 }
 
-@media only screen and (max-width: @_screen-size-SM) {
+@media only screen and (max-width: $_screen-size-SM) {
     .date-textbox__popover {
         left: 0;
         margin-left: 0;

package/src/{less → sass}/date-textbox/stories/date-textbox.stories.js

@@ -2,10 +2,10 @@ export default { title: "Skin/Date Textbox" };
 
 export const base = () => `
 <span class="date-textbox">
-    <span class="textbox textbox--icon-end">
+    <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--calendar-24" width="16" height="16">
+            <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
                 <use href="#icon-calendar-24"></use>
             </svg>
         </button>
@@ -14,11 +14,11 @@ export const base = () => `
 `;
 
 export const disabled = () => `
-<span class="date-textbox">
-    <span class="textbox textbox--icon-end">
+<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--calendar-24" width="16" height="16">
+            <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
                 <use href="#icon-calendar-24"></use>
             </svg>
         </button>
@@ -28,10 +28,26 @@ export const disabled = () => `
 
 export const textSpacing = () => `
 <span class="date-textbox demo-a11y-text-spacing">
-    <span class="textbox textbox--icon-end">
+    <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--calendar-24" width="16" height="16">
+            <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
                 <use href="#icon-calendar-24"></use>
             </svg>
         </button>

package/src/{less/details/details.less → sass/details/details.scss}

@@ -1,10 +1,14 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 summary.details__summary {
     align-items: center;
     box-sizing: border-box;
-    .color-token(details-summary-foreground-color, color-foreground-accent);
+    @include color-token(
+        details-summary-foreground-color,
+        color-foreground-accent
+    );
+
     display: inline-block;
     list-style-position: inside;
     list-style-type: none; /* Remove details marker for non-webkit */
@@ -39,7 +43,7 @@ span.details__icon {
     margin-inline-start: 8px;
 }
 
-// progressive enhancement - override hidden SVG
+/* progressive enhancement - override hidden SVG */
 span.details__icon[hidden] {
     display: inline-block;
 }
@@ -54,7 +58,7 @@ details.details[open] {
     }
 }
 
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 details.details summary:focus:not(:focus-visible) {
     outline: none;
 }

package/src/{less → sass}/details/stories/cascade.stories.js

@@ -6,7 +6,7 @@ export const RTL = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--chevron-down-12" aria-hidden="true">
+                <svg class="icon icon--12" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
@@ -22,7 +22,7 @@ export const colour = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--chevron-down-12" aria-hidden="true">
+                <svg class="icon icon--12" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
@@ -38,7 +38,7 @@ export const fontSize = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--chevron-down-12" aria-hidden="true">
+                <svg class="icon icon--12" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>

package/src/{less → sass}/details/stories/details.stories.js

@@ -5,7 +5,7 @@ export const closed = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" aria-hidden="true">
+            <svg class="icon icon--12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -19,7 +19,7 @@ export const open = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" aria-hidden="true">
+            <svg class="icon icon--12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -33,7 +33,7 @@ export const textSpacing = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" aria-hidden="true">
+            <svg class="icon icon--12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -47,7 +47,7 @@ export const centered = () => `
     <summary class="details__summary details__summary--center">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" aria-hidden="true">
+            <svg class="icon icon--12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -61,7 +61,7 @@ export const small = () => `
     <summary class="details__summary details__summary--small">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" aria-hidden="true">
+            <svg class="icon icon--12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>

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

@@ -0,0 +1,98 @@
+@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

@@ -0,0 +1,39 @@
+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>`;