@ebay/skin 17.2.0 → 17.3.0

package/src/less/progress-bar-expressive/progress-bar-expressive.less

@@ -0,0 +1,456 @@
+@import "../variables/variables.less";
+
+:root {
+    --progress-bar-expressive-color-1: #e53238;
+    --progress-bar-expressive-color-2: #0064d2;
+    --progress-bar-expressive-color-3: #f5af02;
+    --progress-bar-expressive-color-4: #86b817;
+    --progress-bar-expressive-line-border-radius: 2px;
+    --progress-bar-expressive-line-count: 12;
+    --progress-bar-expressive-line-gap: var(--spacing-50);
+    --progress-bar-expressive-line-height: 6px;
+    --progress-bar-expressive-line-scale-duration: 3s;
+    --progress-bar-expressive-line-scroll-duration: 20s;
+    /* Each line has a final width of 10% - 40% of the lines container.
+       In each set of four lines, the widths add up to 100%.
+       These widths are defined in CSS variables so they can more 
+       easily be randomized in Javascript, if desired. */
+    --progress-bar-expressive-line-width-a1: 25%;
+    --progress-bar-expressive-line-width-a2: 15%;
+    --progress-bar-expressive-line-width-a3: 40%;
+    --progress-bar-expressive-line-width-a4: 20%;
+    --progress-bar-expressive-line-width-b1: 17%;
+    --progress-bar-expressive-line-width-b2: 21%;
+    --progress-bar-expressive-line-width-b3: 30%;
+    --progress-bar-expressive-line-width-b4: 32%;
+    --progress-bar-expressive-line-width-c1: 39%;
+    --progress-bar-expressive-line-width-c2: 29%;
+    --progress-bar-expressive-line-width-c3: 20%;
+    --progress-bar-expressive-line-width-c4: 12%;
+    --progress-bar-expressive-message-animatein-duration: 833ms;
+    --progress-bar-expressive-message-animateout-duration: 400ms;
+
+    @media (prefers-color-scheme: dark) {
+        --progress-bar-expressive-color-1: #f0343b;
+        --progress-bar-expressive-color-2: #0078fc;
+        --progress-bar-expressive-color-3: #e8a502;
+        --progress-bar-expressive-color-4: #86b817;
+    }
+}
+
+.progress-bar-expressive {
+    align-items: stretch;
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-content: end;
+    margin: 0 auto;
+    max-width: 375px;
+    row-gap: var(--spacing-300);
+    width: 100%;
+}
+
+.progress-bar-expressive--loaded {
+    display: none;
+}
+
+.progress-bar-expressive__messages {
+    color: var(--color-foreground-primary);
+    font-size: var(--font-size-large-1);
+    font-weight: var(--font-weight-regular);
+    line-height: calc(var(--spacing-50) + var(--spacing-300)); // 26px
+    margin: 0 var(--spacing-200);
+    min-height: 3rem;
+    position: relative;
+    text-align: center;
+}
+
+.progress-bar-expressive__messages--medium {
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--spacing-300);
+}
+
+.progress-bar-expressive__message {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
+// current message
+.progress-bar-expressive__message[role="status"] {
+    opacity: 1;
+}
+
+// next message
+.progress-bar-expressive__message[aria-hidden="true"] {
+    opacity: 0;
+}
+
+.progress-bar-expressive__message--in {
+    animation: progress-bar-expressive-message-animatein
+        var(--progress-bar-expressive-message-animatein-duration)
+        cubic-bezier(0.3, 0, 0, 1) both;
+}
+
+.progress-bar-expressive__message--out {
+    animation: progress-bar-expressive-message-animateout
+        var(--progress-bar-expressive-message-animateout-duration)
+        cubic-bezier(0.3, 0, 0, 1) both;
+}
+
+.progress-bar-expressive__progress[role="progressbar"] {
+    border-radius: var(--progress-bar-expressive-line-border-radius);
+
+    margin: 0 var(--spacing-200);
+    overflow: hidden;
+}
+
+.progress-bar-expressive__lines {
+    display: flex;
+    overflow: visible;
+    // Account for gaps between lines
+    width: calc(100% - (3 * var(--progress-bar-expressive-line-gap)));
+}
+
+.progress-bar-expressive__line {
+    /* Default animation behavior: Lines scroll and resize.
+       Animate line's width from 0% to its pre-defined width.
+       Simultaneously cycle the line's order in its flex container
+       to push its siblings forward and achieve an infinite loop. 
+
+       Note that Safari < 14 does not support flex order animations.
+       In these browsers, the lines do not appear to infinitely
+       scroll. Instead, they scale up, reset their size, and repeat. */
+    animation:
+        progress-bar-expressive-line-reorder
+            var(--progress-bar-expressive-line-scale-duration)
+            steps(var(--progress-bar-expressive-line-count)) infinite,
+        progress-bar-expressive-line-scale-width
+            var(--progress-bar-expressive-line-scale-duration) infinite;
+    border-radius: var(--progress-bar-expressive-line-border-radius);
+    display: inline-block;
+    flex-shrink: 0;
+    height: var(--progress-bar-expressive-line-height);
+    line-height: 0;
+    order: 1;
+}
+
+// Set line colors
+.progress-bar-expressive__line:nth-child(4n + 1) {
+    background-color: var(--progress-bar-expressive-color-4);
+}
+.progress-bar-expressive__line:nth-child(4n + 2) {
+    background-color: var(--progress-bar-expressive-color-3);
+}
+.progress-bar-expressive__line:nth-child(4n + 3) {
+    background-color: var(--progress-bar-expressive-color-2);
+}
+.progress-bar-expressive__line:nth-child(4n + 4) {
+    background-color: var(--progress-bar-expressive-color-1);
+}
+
+// Set line widths and animation delays
+.progress-bar-expressive__line:nth-child(1) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    var(--progress-bar-expressive-line-scale-duration) /
+                    var(--progress-bar-expressive-line-count))
+    );
+    width: var(--progress-bar-expressive-line-width-a1);
+}
+.progress-bar-expressive__line:nth-child(2) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 2
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-a2);
+}
+.progress-bar-expressive__line:nth-child(3) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 3
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-a3);
+}
+.progress-bar-expressive__line:nth-child(4) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 4
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-a4);
+}
+.progress-bar-expressive__line:nth-child(5) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 5
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-b1);
+}
+.progress-bar-expressive__line:nth-child(6) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 6
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-b2);
+}
+.progress-bar-expressive__line:nth-child(7) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 7
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-b3);
+}
+.progress-bar-expressive__line:nth-child(8) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 8
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-b4);
+}
+.progress-bar-expressive__line:nth-child(9) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 9
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-c1);
+}
+.progress-bar-expressive__line:nth-child(10) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 10
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-c2);
+}
+.progress-bar-expressive__line:nth-child(11) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 11
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-c3);
+}
+.progress-bar-expressive__line:nth-child(12) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 12
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-c4);
+}
+
+/* With reduced motion, there are no animated transitions
+   between messages and the lines scroll but do not resize. */
+@media (prefers-reduced-motion) {
+    // Remove default message animation
+    .progress-bar-expressive__message--in,
+    .progress-bar-expressive__message--out {
+        animation: none;
+    }
+
+    .progress-bar-expressive__message[aria-hidden="true"] {
+        display: none;
+    }
+
+    // Fade in first message
+    .progress-bar-expressive__messages:not(
+            .progress-bar-expressive__messages--medium
+        )
+        .progress-bar-expressive__message--initial[role="status"] {
+        animation: progress-bar-expressive-message-fadein
+            var(--progress-bar-expressive-message-animatein-duration)
+            cubic-bezier(0.3, 0, 0, 1) both;
+    }
+
+    // Scroll the entire line container
+    .progress-bar-expressive__lines {
+        animation: progress-bar-expressive-reduced-motion-line-scroll
+            var(--progress-bar-expressive-line-scroll-duration) linear infinite;
+        overflow: visible;
+    }
+
+    // Remove default line animation
+    .progress-bar-expressive__line {
+        animation: none;
+        animation-delay: none;
+        margin-right: var(--progress-bar-expressive-line-gap);
+    }
+
+    // Reset line colors
+    .progress-bar-expressive__line:nth-child(4n + 1) {
+        background-color: var(--progress-bar-expressive-color-1);
+    }
+    .progress-bar-expressive__line:nth-child(4n + 2) {
+        background-color: var(--progress-bar-expressive-color-2);
+    }
+    .progress-bar-expressive__line:nth-child(4n + 3) {
+        background-color: var(--progress-bar-expressive-color-3);
+    }
+    .progress-bar-expressive__line:nth-child(4n + 4) {
+        background-color: var(--progress-bar-expressive-color-4);
+    }
+
+    // To achieve a seamless loop, the last set of line widths
+    // need to match the first set of line widths
+    .progress-bar-expressive__line:nth-child(9) {
+        width: var(--progress-bar-expressive-line-width-a1);
+    }
+
+    .progress-bar-expressive__line:nth-child(10) {
+        width: var(--progress-bar-expressive-line-width-a2);
+    }
+
+    .progress-bar-expressive__line:nth-child(11) {
+        width: var(--progress-bar-expressive-line-width-a3);
+    }
+
+    .progress-bar-expressive__line:nth-child(12) {
+        width: var(--progress-bar-expressive-line-width-a4);
+    }
+}
+
+@keyframes progress-bar-expressive-message-animateout {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(calc(var(--font-size-24) * -1));
+    }
+}
+
+@keyframes progress-bar-expressive-message-animatein {
+    0% {
+        opacity: 0;
+        transform: translateY(var(--font-size-24));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes progress-bar-expressive-message-fadein {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes progress-bar-expressive-line-reorder {
+    0% {
+        order: 0;
+    }
+    100% {
+        order: var(--progress-bar-expressive-line-count);
+    }
+}
+
+@keyframes progress-bar-expressive-line-scale-width {
+    0% {
+        margin-right: 0;
+        width: 0;
+    }
+
+    12.5% {
+        margin-right: var(--progress-bar-expressive-line-gap);
+    }
+
+    50%,
+    100% {
+        margin-right: var(--progress-bar-expressive-line-gap);
+    }
+}
+
+@keyframes progress-bar-expressive-reduced-motion-line-scroll {
+    0% {
+        transform: translateX(
+            calc(-200% - 8 * var(--progress-bar-expressive-line-gap))
+        );
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}

package/src/less/progress-bar-expressive/stories/progress-bar-expressive.stories.js

@@ -0,0 +1,117 @@
+export default { title: "Skin/Progress Bar Expressive" };
+
+export const base = () => `
+<div class="progress-bar-expressive">
+    <div role="progressbar" aria-label="Loading..." class="progress-bar-expressive__progress">
+        <div class="progress-bar-expressive__lines">
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+        </div>
+    </div>
+</div>
+`;
+
+export const withMessages = () => `
+<div class="progress-bar-expressive">
+    <div class="progress-bar-expressive__messages">
+        <div aria-hidden="true" class="progress-bar-expressive__message">
+            We're finishing your order.
+        </div>
+        <div role="status" id="unique-id" class="progress-bar-expressive__message">
+            Hang tight.
+        </div>
+    </div>
+    <div role="progressbar" aria-label="Loading..." aria-describedby="unique-id" class="progress-bar-expressive__progress">
+        <div class="progress-bar-expressive__lines">
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+        </div>
+    </div>
+</div>
+`;
+
+export const withMediumText = () => `
+<div class="progress-bar-expressive progress-bar-expressive--medium">
+    <div class="progress-bar-expressive__messages progress-bar-expressive__messages--medium">
+        <div aria-hidden="true" class="progress-bar-expressive__message">
+            We're finishing your order.
+        </div>
+        <div role="status" id="unique-id" class="progress-bar-expressive__message">
+            Hang tight.
+        </div>
+    </div>
+    <div role="progressbar" aria-label="Loading..." aria-describedby="unique-id" class="progress-bar-expressive__progress">
+        <div class="progress-bar-expressive__lines">
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+        </div>
+    </div>
+</div>
+`;
+
+export const withLongMessages = () => `
+<div class="progress-bar-expressive">
+    <div class="progress-bar-expressive__messages">
+        <div aria-hidden="true" class="progress-bar-expressive__message">
+            Work with a content designer to simplify your messages.
+        </div>
+        <div role="status" id="unique-id" class="progress-bar-expressive__message">
+            Messages should be one line, but sometimes that's hard to achieve.
+        </div>
+    </div>
+    <div role="progressbar" aria-label="Loading..." aria-describedby="unique-id" class="progress-bar-expressive__progress">
+        <div class="progress-bar-expressive__lines">
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+            <div class="progress-bar-expressive__line"></div>
+        </div>
+    </div>
+</div>
+`;

package/src/less/section-notice/section-notice.less

@@ -16,6 +16,7 @@ section.section-notice {
     grid-template-columns: 32px auto auto auto;
 }
 
+// TODO: Remove in 18.0.0 since Education Notice is now its own module.
 .section-notice--education {
     .background-color-token(section-notice-education-background-color, color-background-education);
 }

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

@@ -1,5 +1,96 @@
 export default { title: "Skin/Toggle Button Group/Gallery Layout" };
 
+export const usingIMGTag = () => `
+<ul aria-label="Toggle buttons" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="3">
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__image-container">
+                    <span class="toggle-button__image">
+                        <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                    </span>
+                </span>
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">
+                        <span>HTML Profile Image</span>
+                    </span>
+                    <span class="toggle-button__subtitle">Using Cover</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__image-container">
+                    <span class="toggle-button__image">
+                        <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg" alt="">
+                    </span>
+                </span>
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">
+                        <span>HTML Landscape Image</span>
+                    </span>
+                    <span class="toggle-button__subtitle">Using Cover</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__image-container">
+                    <span class="toggle-button__image">
+                        <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg" alt="">
+                    </span>
+                </span>
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">
+                        <span>HTML Square Image</span>
+                    </span>
+                    <span class="toggle-button__subtitle">Using Cover</span>
+                </span>
+            </button>
+        </li>
+    </ul>
+`;
+
+export const usingCSSImage = () => `
+<ul aria-label="Toggle buttons" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="3">
+    <li>
+        <button type="button" class="toggle-button" aria-pressed="false">
+            <span class="toggle-button__image-container">
+                <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; background-position: center 15%;">
+                </span>
+            </span>
+            <span class="toggle-button__content">
+                <span class="toggle-button__title">CSS Profile Image</span>
+                <span class="toggle-button__subtitle">Using Contain</span>
+            </span>
+        </button>
+    </li>
+    <li>
+        <button type="button" class="toggle-button" aria-pressed="false">
+            <span class="toggle-button__image-container">
+                <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                </span>
+            </span>
+            <span class="toggle-button__content">
+                <span class="toggle-button__title">CSS Profile Image</span>
+                <span class="toggle-button__subtitle">Using Cover</span>
+            </span>
+        </button>
+    </li>
+    <li>
+        <button type="button" class="toggle-button" aria-pressed="false">
+            <span class="toggle-button__image-container">
+                <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 30%;">
+                </span>
+            </span>
+            <span class="toggle-button__content">
+                <span class="toggle-button__title">CSS Square Image</span>
+                <span class="toggle-button__subtitle">Using Cover</span>
+            </span>
+        </button>
+    </li>
+</ul>
+`;
+
 export const _2Column = () => `
 <ul aria-label="Buttons" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="2">
     <li>

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

@@ -9,7 +9,7 @@
 }
 
 .toggle-button-group li {
-    display: inline-table;
+    display: inline-block;
     margin-bottom: var(--spacing-50);
     margin-left: var(--spacing-50);
     margin-right: var(--spacing-50);