@stackoverflow/stacks 1.8.0 → 1.9.0

package/lib/{css/atomic/borders.less → atomic/border.less}

@@ -335,6 +335,24 @@
 .bc-yellow-800 { border-color: var(--yellow-800) !important; }
 .bc-yellow-900 { border-color: var(--yellow-900) !important; }
 
+//  $$  GOLD
+//  ----------------------------------------------------------------------------
+.bc-gold-lighter { border-color: var(--gold-lighter) !important; }
+.bc-gold { border-color: var(--gold) !important; }
+.bc-gold-darker { border-color: var(--gold-darker) !important; }
+
+//  $$  SILVER
+//  ----------------------------------------------------------------------------
+.bc-silver-lighter { border-color: var(--silver-lighter) !important; }
+.bc-silver { border-color: var(--silver) !important; }
+.bc-silver-darker { border-color: var(--silver-darker) !important; }
+
+//  $$  BRONZE
+//  ----------------------------------------------------------------------------
+.bc-bronze-lighter { border-color: var(--bronze-lighter) !important; }
+.bc-bronze { border-color: var(--bronze) !important; }
+.bc-bronze-darker { border-color: var(--bronze-darker) !important; }
+
 //  $$  PRIMARY
 //  ----------------------------------------------------------------------------
 .bc-theme-primary-025 { border-color: var(--theme-primary-025) !important; }

package/lib/{css/base/icons.less → base/icon.less}

@@ -1,12 +1,3 @@
-//
-//  STACK OVERFLOW
-//  ICON STYLES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-
 .svg-icon,
 .svg-spot {
     vertical-align: bottom; // Make SVG play nicely while inline with text by default

package/lib/components/activity-indicator/activity-indicator.a11y.test.ts

@@ -0,0 +1,21 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("activity-indicator", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-activity-indicator",
+        variants: ["danger", "success", "warning"],
+        children: {
+            default: `<div class="v-visible-sr">New activity</div>`,
+            new: `new<div class="v-visible-sr">New activity</div>`,
+        },
+        skippedTestids: [
+            "s-activity-indicator-dark-new", // TODO fix contrast issue
+            "s-activity-indicator-dark-success-new", // TODO fix contrast issue
+            "s-activity-indicator-dark-warning-new", // TODO fix contrast issue
+            "s-activity-indicator-light-success-new", // TODO fix contrast issue
+            "s-activity-indicator-light-warning-new", // TODO fix contrast issue
+        ],
+    });
+});

package/lib/components/activity-indicator/activity-indicator.visual.test.ts

@@ -0,0 +1,23 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("activity-indicator", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-activity-indicator",
+        variants: ["danger", "success", "warning"],
+        children: {
+            default: `<div class="v-visible-sr">New activity</div>`,
+            new: `new<div class="v-visible-sr">New activity</div>`,
+        },
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center hs1 ws1 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});

package/lib/components/avatar/avatar.a11y.test.ts

@@ -0,0 +1,36 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    const srEl = `<span class="v-visible-sr">Stack Overflow</span>`;
+    switch (child) {
+        case "image":
+            return `<img
+                class="s-avatar--image"
+                src="https://picsum.photos/id/1/48"
+                alt="team logo"
+            />${srEl}`;
+        case "letter":
+            return `<div
+                class="s-avatar--letter"
+                aria-hidden="true">
+                    S
+            </div>${srEl}`;
+        default:
+            return srEl;
+    }
+};
+
+describe("avatar", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-avatar",
+        variants: ["24", "32", "48", "64", "96", "128"],
+        children: {
+            default: getChild(),
+            image: getChild("image"),
+            letter: getChild("letter"),
+        },
+        tag: "span",
+    });
+});

package/lib/components/avatar/avatar.visual.test.ts

@@ -0,0 +1,54 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const base64Image =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF/3IA/////44y/8OS/+fU//Xs/6tn/9e2EhvbMQAABH9JREFUeNrs3e1y2ygAhWELJHH/d7zuJpN1XAnxoe408Ly/6xnnHXEOIEwfDwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gbAGEhrZl2VloY20PIk8tAzZbfkXA7eeuHyysVfdFMsXiY66ptiWF8Re05BdxF7HkBV7PUNW7FVx4E7sVSwrDjBw2+pC7NWwHtkTe3ULM7En9v6O2ONF7Ik9sSf2IPbEntgTexB7t8feTsynniD2Oh6tXex1hFoUe02kaxVi72JMZs+Rib0LLdkXFGLvaECWjkOxdxVmUex1rB6S2Kss2lcytSH2LnVkakPsXQ7E8xwTe5fuMrUh9vKj8CP4xN7lNOXc3mnwib1M2X7Z28VeS93mg0/sFZTG6WCMVSE51fqsYL4s9jpqQ+yV1caxErHXUxtir6c2xF5HbYRF7LXXhtjrqQ2x11MbYu9tLG4VtSH2empD7BUNxpPaSGKvPPh2sdcxX45i78baEHs18+X32hB7NfPl99oQex21MVHsxViaR8W1MU3s/XpMSvWF0tqYJfY+BmMq01dcG+scP6/6enTK9BW+1J0j9l5aYN0rP5BzM0XsbSUnAlpqY4LYezexFeRSbpslH3uDXdF64OG6est258PohXE8BK+7o6g29rJTQsPt1F3qK9qdTwMP2Wz2X1Vv0UvdbeQ53nl2Xesr2Z0Pww7Zs5lsafWW1MY+6JDNxv5/+kLb5/fXfzLirRdhKSGnr6A2tkGvJoxLGZnqva6NkAbdgA+pUN9a+QuWYYPu+98ee/W1/PJgoMG7lek7nW3UHiEdbKpcqu+kO2L9b4aG0rcWjt5jfWf2Z7kCeE891XtSG/O86A5d+tbZj1h0VW+c/ja90FG9uxMCFdWb/+SkZ1Oaq/d1vjzvXfvF+tLp+aiZT5S1Vm90lrFj02B3bW1d9X7T92u+7Aq9qk2D+Fob/v/Myu7YostC76xe9K966evfr5+7ekuXHVy1V6+R275pEMd3kPbGB+Syeod/8D7Sf41NBvPdMf7a4uXpaTGY0zd+4r0vDlKtwdPqHf/BOzzf8zQYqvRtcz54mXfUNUVyUL0T7AhcrBbKY/C36p1geVEy1y00+F3fBA9eKFxnlRXJa/XOcKxnqeF6Pv1VvTPc7RuXai6K5LN6Z9hQSUsb2Rh86pviUultaScTg/sMD15YeqmcT8/bFx1Foi/umk9P3hcMfqTenrabBT5j8DGTwHivwelOCTwNrnfJm/Ol2U0GZ74WdE+dBn9+Z/z2J9UZ7IjB7dZv8gPl9RRJIq89BiN57QZ38trn04G8k62E6xjcHuQ1D+JEXrvBnbz2+XQgr30+/SCveT69ktceg4m8doOBvDG/CXnkkTezvOXPQB555JFHHnnkkUceeeSRRx555JFHHnnkkWcnmTzyyCOPPPLII4888sgjjzzfhDzyyCOPPPL+9Ff+eyCPPPLII4888sgjjzzyyCOPPPLII4888sgDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPy//CPAAPiZOI3BPDFQAAAAAElFTkSuQmCC";
+
+const getChild = (child?: string): string => {
+    const srEl = `<span class="v-visible-sr">Stack Overflow</span>`;
+    switch (child) {
+        case "image":
+            return `<img
+                class="s-avatar--image"
+                src="${base64Image}"
+                alt="team logo"
+            />${srEl}`;
+        case "letter":
+            return `<div
+                class="s-avatar--letter"
+                aria-hidden="true">
+                    S
+            </div>${srEl}`;
+        default:
+            return srEl;
+    }
+};
+
+describe("avatar", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-avatar",
+        variants: ["24", "32", "48", "64", "96", "128"],
+        children: {
+            default: getChild(),
+            image: getChild("image"),
+            letter: getChild("letter"),
+        },
+        attributes: {
+            href: "#",
+        },
+        tag: "a",
+        template: ({ component, testid }) => html`
+            <div
+                data-testid="${testid}"
+                class="d-inline-flex ai-center jc-center hmn1 wmn1 p8"
+            >
+                ${component}
+            </div>
+        `,
+        skippedTestids: [
+            /-letter/, // TODO: resolve font-family thrashing issues
+        ],
+    });
+});

package/lib/components/banner/banner.less

@@ -0,0 +1,51 @@
+// See also ./lib/components/notice/notice.less
+// TODO deprecate .s-banner (by turning it into a modifier on .s-notice)
+// This would reduce the amount of CSS we ship to the client and simplify our codebase
+.s-banner {
+    --_no-x-offset: 0; // [1]
+    .construct-notice-component(s-banner);
+
+    &[aria-hidden="true"] { // If you want to hide and reveal the banner
+        --_no-x-offset: calc(var(--su48) + var(--su2) * -1); // -50px
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    &[aria-hidden="false"] {
+        --_no-x-offset: calc(var(--su48) + var(--su1)); // 49px
+        opacity: 1;
+        visibility: visible;
+    }
+
+    &.is-pinned { //  If you want to put the banner above the topbar
+        z-index: calc(var(--zi-navigation-fixed) + 1);
+    }
+
+    &__body-pt {
+        padding-top: 93px;
+    }
+
+    & &--container { // When we want to keep hero content capped
+        margin: 0 auto;
+        max-width: calc(var(--s-step) * 10);
+        position: relative;
+        width: 100%;
+    }
+
+    border-width: var(--su-static1) 0;
+    inset: 0 0 auto 0;
+    padding: var(--su12);
+    position: fixed;
+    -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
+    transform: translate3d(0, var(--_no-x-offset), 0);
+    width: 100%;
+    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
+}
+
+//  [1] When we use .s-banner, we need to adjust the padding-top on
+//      the body tag. This class correctly adjusts the body padding ONLY if
+//      the notice is one line. If it wraps to multiple lines, more classes or
+//      (ideally) JS will need to be used to determine the notice's height
+//      at the time of render. The padding value is determined like so:
+//      50px (top bar) + 44px (notice height) - 1px (bottom border)
+//      The borders subtraction are necessary to neatly tuck everything together.

package/lib/{test/s-banner.test.ts → components/banner/banner.test.ts}

@@ -1,12 +1,12 @@
 import { html, fixture, expect } from "@open-wc/testing";
 import { screen } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import "../ts/index";
-import { showBanner, hideBanner } from "../ts/index";
+import "../../index";
+import { showBanner, hideBanner } from "../../controllers";
 
 const user = userEvent.setup();
 
-describe("s-banner", () => {
+describe("banner", () => {
     it("trigger should make banner visible", async () => {
         await fixture(html`
             <button data-toggle="s-banner" data-target="#test-banner">
@@ -29,10 +29,12 @@ describe("s-banner", () => {
         const button = screen.getByRole("button");
         const banner = screen.getByTestId("test-banner");
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(banner).to.have.attribute("aria-hidden", "true");
         button.addEventListener("click", () => showBanner(banner));
 
         await user.click(button);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(banner).to.have.attribute("aria-hidden", "false");
     });
 
@@ -64,10 +66,12 @@ describe("s-banner", () => {
         const button = screen.getByRole("button");
         const banner = screen.getByTestId("test-banner");
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(banner).to.have.attribute("aria-hidden", "false");
         button.addEventListener("click", () => hideBanner(banner));
 
         await user.click(button);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(banner).to.have.attribute("aria-hidden", "true");
     });
 });

package/lib/{ts/controllers/s-banner.ts → components/banner/banner.ts}

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 export class BannerController extends Stacks.StacksController {
     static targets = ["banner"];

package/lib/components/banner/banner.visual.test.ts

@@ -0,0 +1,36 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const bannerChild = `
+    <div
+        class="d-flex flex__center jc-space-between s-banner--container"
+        role="alertdialog"
+        aria-describedby="banner-message"
+    >
+        <div aria-label="banner message">
+            Test Banner
+        </div>
+        <div class="ml-auto myn8">
+            <span class="s-btn s-banner--btn">Close</span>
+        </div>
+    </div>
+`;
+
+describe("banner", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-banner",
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        attributes: {
+            role: "alert",
+            ariaHidden: "false",
+        },
+        children: {
+            default: bannerChild,
+        },
+        tag: "aside",
+    });
+});

package/lib/components/button/button.a11y.test.ts

@@ -0,0 +1,32 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("button", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-btn",
+        variants: ["danger", "muted", "primary"],
+        modifiers: {
+            primary: ["filled", "outlined"],
+            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
+            global: ["is-loading"],
+            standalone: [
+                ...["link", "unset"],
+                ...["facebook", "github", "google"],
+            ],
+        },
+        attributes: {
+            type: "button",
+        },
+        children: {
+            default: "Ask question",
+        },
+        tag: "button",
+        excludedTestids: [
+            /primary-outlined/, // This combination is not supported
+        ],
+        skippedTestids: [
+            /s-btn-dark/, // TODO remove when contrast bugs are fixed
+        ],
+    });
+});

package/lib/{css/components/buttons.less → components/button/button.less}

@@ -142,8 +142,6 @@
         &:focus-visible {
             outline-style: auto;
         }
-
-        outline: initial;
     }
 
     &&__link {
@@ -170,6 +168,7 @@
         .s-link();
         display: inline;
         font: inherit;
+        outline: revert;
         text-align: inherit;
     }
 
@@ -191,6 +190,8 @@
             font: unset;
             user-select: auto;
         }
+
+        outline: initial;
     }
 
     // Pseudo-elements and child-based modifiers

package/lib/components/button/button.visual.test.ts

@@ -0,0 +1,52 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    switch (child) {
+        case "badge":
+            return `Ask question
+                <span class="s-btn--badge">
+                    <span class="s-btn--number">198</span>
+                </span>`;
+        default:
+            return "Ask question";
+    }
+};
+
+describe("button", () => {
+    // TODO test disabled states, interaction pseudo-classes
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-btn",
+        variants: ["danger", "muted", "primary"],
+        modifiers: {
+            primary: ["filled", "outlined"],
+            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
+            global: ["is-loading"],
+            standalone: [
+                ...["link", "unset"],
+                ...["facebook", "github", "google"],
+            ],
+        },
+        attributes: {
+            type: "button",
+        },
+        children: {
+            default: getChild(),
+            badge: getChild("badge"),
+        },
+        tag: "button",
+        template: ({ component, testid }) => html`
+            <div
+                class="bg-black-100 d-inline-flex ai-center jc-center hs1 ws2 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+        excludedTestids: [
+            /primary-outlined/, // This combination is not supported
+        ],
+    });
+});

package/lib/{css/components/cards.less → components/card/card.less}

@@ -17,7 +17,7 @@
     }
 
     // CHILD ELEMENTS
-    p:last-of-type {
+    > :last-child {
         margin-bottom: 0;
     }
 

package/lib/components/check-control/check-control.less

@@ -0,0 +1,17 @@
+.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
+    --_cc-ai: center;
+
+    // CONTEXTUAL STYLES
+    .s-check-group & {
+        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
+    }
+
+    // CHILD ELEMENTS
+    .s-label {
+        font-weight: normal;
+    }
+
+    align-items: var(--_cc-ai);
+    display: flex;
+    gap: var(--su8);
+}

package/lib/components/check-group/check-group.less

@@ -0,0 +1,19 @@
+.s-check-group {
+    --_cg-fd: column;
+
+    // MODIFIERS
+    &&__horizontal {
+        --_cg-fd: row;
+    }
+
+    // CHILD ELEMENTS
+    // TODO HACK? <legend> isn't respecting gap...
+    legend.s-label {
+        margin-bottom: var(--su8);
+    }
+
+    flex-direction: var(--_cg-fd);
+
+    display: flex;
+    gap: var(--su8);
+}

package/lib/{css/components → components/expandable}/expandable.less

@@ -17,6 +17,7 @@
         margin-bottom @ex-transition-duration cubic-bezier(0, 0, 0, 1),
         transform @ex-transition-duration cubic-bezier(1, 0, 1, 1),
         opacity @ex-transition-duration cubic-bezier(1, 0, 1, 1);
+    --_ex-content-v: unset;
 
     &:not(.is-expanded) {
         --_ex-after-h: 0;
@@ -32,6 +33,7 @@
             max-height 0s @ex-transition-duration,
             transform @ex-transition-duration cubic-bezier(0, 1, 1, 1),
             opacity @ex-transition-duration cubic-bezier(0, 1, 1, 1);
+        --_ex-content-v: hidden;
 
         & .s-expandable--content {
             @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
@@ -62,6 +64,7 @@
         opacity: var(--_ex-content-o);
         -webkit-transform: var(--_ex-content-transform);
         transform: var(--_ex-content-transform);
+        visibility: var(--_ex-content-v);
 
         -ms-flex-preferred-size: 100%;
         flex-basis: 100%;

package/lib/components/expandable/expandable.test.ts

@@ -0,0 +1,53 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import "../../index";
+
+const user = userEvent.setup();
+
+describe("expandable-control", () => {
+    it("should focus on expandable content only when expanded", async () => {
+        const trigger = await fixture(html`
+            <button
+                data-controller="s-expandable-control"
+                aria-expanded="false"
+                aria-controls="expandable-example"
+            >
+                expandable trigger
+            </button>
+            <div class="s-expandable" id="expandable-example">
+                <div class="s-expandable--content">
+                    <button>inside expandable</button>
+                </div>
+            </div>
+        `);
+
+        // expandable is not expanded
+        let expandableTrigger = screen.getByRole("button", {
+            name: "expandable trigger",
+            expanded: false,
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        expect(
+            screen.queryByRole("button", {
+                name: "inside expandable",
+            })
+        ).to.be.null;
+
+        await userEvent.click(expandableTrigger);
+
+        // expandable is now expanded
+        expandableTrigger = screen.getByRole("button", {
+            name: "expandable trigger",
+            expanded: true,
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        expect(
+            screen.getByRole("button", {
+                name: "inside expandable",
+            })
+        ).to.be.visible;
+    });
+});

package/lib/{ts/controllers/s-expandable-control.ts → components/expandable/expandable.ts}

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 // Radio buttons only trigger a change event when they're *checked*, but not when
 // they're *unchecked*. Therefore, if we have an active `s-expandable-control` in

package/lib/components/input-fill/input-fill.less

@@ -0,0 +1,35 @@
+.s-input-fill {
+    --_if-bc: var(--bc-darker);
+    --_if-bg: var(--black-050);
+    --_if-blw: 0;
+    --_if-blr: 0;
+    --_if-brr: 0;
+    --_if-brw: 0;
+
+    &&__clear {
+        --_if-bc: transparent;
+        --_if-bg: transparent;
+    }
+
+    &.order-first {
+        --_if-blw: var(--su-static1);
+        --_if-blr: var(--br-sm);
+    }
+
+    &.order-last {
+        --_if-brw: var(--su-static1);
+        --_if-brr: var(--br-sm);
+    }
+
+    background-color: var(--_if-bg);
+    border: var(--su-static1) solid var(--_if-bc);
+    border-left-width: var(--_if-blw);
+    border-right-width: var(--_if-brw);
+    border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
+
+    color: var(--fc-medium);
+    font-family: inherit;
+    line-height: var(--lh-sm);
+    padding: 0.6em 0.7em;
+    white-space: nowrap;
+}

package/lib/components/input-icon/input-icon.less

@@ -0,0 +1,45 @@
+.s-input-icon {
+    --_ii-fc: unset;
+    --_ii-r: 0.7em;
+
+    // MODIFIERS
+    .has-error & {
+        --_ii-fc: var(--red-400);
+    }
+
+    .has-success & {
+        --_ii-fc: var(--green-400);
+    }
+
+    .has-warning & {
+        --_ii-fc: var(--yellow-600);
+    }
+
+    .is-disabled & {
+        --_ii-fc: var(--black-400);
+    }
+
+    .is-readonly & {
+        --_ii-fc: var(--black-200);
+
+        .highcontrast-mode({
+            --_ii-fc: var(--fc-light);
+        });
+    }
+
+    &&__creditcard,
+    &&__search {
+        --_ii-r: auto;
+
+        color: var(--black-400);
+        left: 0.7em;
+    }
+
+    color: var(--_ii-fc);
+    right: var(--_ii-r);
+
+    margin-top: -9px; // Half the icon's height at 18px for centering;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+}