@stackoverflow/stacks 2.4.0 → 2.5.1

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

@@ -1,73 +0,0 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import "../../index";
-import { showBanner, hideBanner } from "../../controllers";
-
-const user = userEvent.setup();
-
-describe("banner", () => {
-    it("trigger should make banner visible", async () => {
-        await fixture(html`
-            <button data-toggle="s-banner" data-target="#test-banner">
-                Show test banner
-            </button>
-            <aside
-                role="alert"
-                id="test-banner"
-                class="s-banner"
-                aria-labelledby="banner-message"
-                aria-hidden="true"
-                data-controller="s-banner"
-                data-s-banner-target="banner"
-                data-testid="test-banner"
-            >
-                Test banner
-            </aside>
-        `);
-
-        const button = screen.getByRole("button");
-        const banner = screen.getByTestId("test-banner");
-
-        expect(banner).to.have.attribute("aria-hidden", "true");
-        button.addEventListener("click", () => showBanner(banner));
-
-        await user.click(button);
-        expect(banner).to.have.attribute("aria-hidden", "false");
-    });
-
-    it("trigger should hide banner", async () => {
-        await fixture(html`
-            <aside
-                role="alert"
-                id="test-banner"
-                class="s-banner"
-                aria-labelledby="banner-message"
-                aria-hidden="false"
-                data-controller="s-banner"
-                data-s-banner-target="banner"
-                data-testid="test-banner"
-            >
-                Test banner
-                <button
-                    type="button"
-                    class="s-btn s-banner--btn"
-                    aria-label="Dismiss"
-                    data-toggle="s-banner"
-                    data-target="#test-banner"
-                >
-                    Close banner
-                </button>
-            </aside>
-        `);
-
-        const button = screen.getByRole("button");
-        const banner = screen.getByTestId("test-banner");
-
-        expect(banner).to.have.attribute("aria-hidden", "false");
-        button.addEventListener("click", () => hideBanner(banner));
-
-        await user.click(button);
-        expect(banner).to.have.attribute("aria-hidden", "true");
-    });
-});

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

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

package/lib/components/block-link/block-link.a11y.test.ts

@@ -1,57 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const blockLinkTemplate = ({ component, testid }: any) =>
-    html`<div
-        class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-        data-testid="${testid}"
-    >
-        ${component}
-    </div>`;
-
-describe("block-link", () => {
-    // Base block link
-    runA11yTests({
-        baseClass: "s-block-link",
-        modifiers: {
-            global: ["is-selected"],
-        },
-        children: {
-            default: `block link`,
-        },
-        template: blockLinkTemplate,
-    });
-
-    // Base + danger
-    runA11yTests({
-        baseClass: "s-block-link",
-        modifiers: {
-            primary: ["danger"],
-        },
-        children: {
-            default: `block link`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        template: blockLinkTemplate,
-    });
-
-    // All left and rignt variants
-    runA11yTests({
-        baseClass: "s-block-link",
-        variants: ["left is-selected", "right is-selected"],
-        modifiers: {
-            primary: ["danger"],
-        },
-        children: {
-            default: `block link`,
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        template: blockLinkTemplate,
-    });
-});

package/lib/components/block-link/block-link.visual.test.ts

@@ -1,57 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const blockLinkTemplate = ({ component, testid }: any) =>
-    html`<div
-        class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-        data-testid="${testid}"
-    >
-        ${component}
-    </div>`;
-
-describe("block-link", () => {
-    // Base block link
-    runVisualTests({
-        baseClass: "s-block-link",
-        modifiers: {
-            global: ["is-selected"],
-        },
-        children: {
-            default: `block link`,
-        },
-        template: blockLinkTemplate,
-    });
-
-    // Base + danger
-    runVisualTests({
-        baseClass: "s-block-link",
-        modifiers: {
-            primary: ["danger"],
-        },
-        children: {
-            default: `block link`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        template: blockLinkTemplate,
-    });
-
-    // All left and rignt variants
-    runVisualTests({
-        baseClass: "s-block-link",
-        variants: ["left is-selected", "right is-selected"],
-        modifiers: {
-            primary: ["danger"],
-        },
-        children: {
-            default: `block link`,
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        template: blockLinkTemplate,
-    });
-});

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

@@ -1,36 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import { html } from "@open-wc/testing";
-import "../../index";
-
-describe("breadcrumbs", () => {
-    runA11yTests({
-        baseClass: "s-breadcrumbs",
-        children: {
-            default: `
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Stacks</a>
-                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
-                </div>
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Help center</a>
-                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
-                </div>
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Icons</a>
-                </div>
-            `,
-        },
-        attributes: {
-            "aria-label": "Breadcrumb navigation",
-        },
-        tag: "nav",
-        template: ({ component, testid }) => html`
-            <div
-                class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-                data-testid="${testid}"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});

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

@@ -1,36 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import { html } from "@open-wc/testing";
-import "../../index";
-
-describe("breadcrumbs", () => {
-    runVisualTests({
-        baseClass: "s-breadcrumbs",
-        children: {
-            default: `
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Stacks</a>
-                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
-                </div>
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Help center</a>
-                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
-                </div>
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Icons</a>
-                </div>
-            `,
-        },
-        attributes: {
-            "aria-label": "Breadcrumb navigation",
-        },
-        tag: "nav",
-        template: ({ component, testid }) => html`
-            <div
-                class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-                data-testid="${testid}"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});

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

@@ -1,21 +0,0 @@
-import testArgs from "./button.test.setup";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("button", () => {
-    runA11yTests({
-        ...testArgs,
-        excludedTestids: [
-            /^s-btn-(?=.*unset).*badge$/, // s-btn with badge and unset variant not supported
-        ],
-        skippedTestids: [
-            // TODO resolve btn badge contrast issues
-            // matches tests with a badge in light and dark modes
-            /s-btn-(light|dark).*?badge/,
-            // matches tests with a badge in highcontrast-light modes, excluding filled, danger, github, facebook, sm, or xs
-            /s-btn-highcontrast-light-(?!.*(filled|danger|github|facebook|sm|xs)).*?badge/,
-            // matches tests with a badge in highcontrast-light modes, are muted and/or outlined, and are sm or xs
-            /s-btn-highcontrast-light-(?:muted-outlined-|muted-|outlined-)?(?:sm|xs).*?badge/,
-        ],
-    });
-});

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

@@ -1,36 +0,0 @@
-import type { TestVariationArgs } 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";
-    }
-};
-
-// TODO test disabled states, interaction pseudo-classes
-const testArgs: TestVariationArgs = {
-    baseClass: "s-btn",
-    variants: ["danger", "muted"],
-    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",
-};
-
-export default testArgs;

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

@@ -1,18 +0,0 @@
-import testArgs from "./button.test.setup";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-import { html } from "@open-wc/testing";
-
-describe("button", () => {
-    runVisualTests({
-        ...testArgs,
-        template: ({ component, testid }) => html`
-            <div
-                class="bg-black-225 d-inline-flex ai-center jc-center hs1 ws2 p8"
-                data-testid="${testid}"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});

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

@@ -1,12 +0,0 @@
-import { testArgs } from "./button-group.test.setup";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("button group", () => {
-    runA11yTests({
-        ...testArgs,
-        // TODO remove skipped tests once btn badge contrast issues are resolved
-        // see also https://github.com/StackExchange/Stacks/pull/1663
-        skippedTestids: [/s-btn-group-(light|dark|highcontrast-light)-badge/],
-    });
-});

package/lib/components/button-group/button-group.test.setup.ts

@@ -1,77 +0,0 @@
-import { html } from "@open-wc/testing";
-import type { TestVariationArgs } from "../../test/test-utils";
-
-const btns = [
-    { name: "Newest", isSelected: true },
-    { name: "Frequent" },
-    { name: "Active" },
-];
-
-const getBtn = ({
-    name = "",
-    isRadio,
-    isSelected,
-    hasBadge,
-}: {
-    name: string;
-    isRadio?: boolean;
-    isSelected?: boolean;
-    hasBadge?: boolean;
-}): string => {
-    const baseClasses = "s-btn s-btn__muted";
-    const btnChildren = `
-        <span class="s-btn--text" data-text="${name}">${name}</span>
-        ${
-            hasBadge
-                ? `<span class="s-btn--badge"><span class="s-btn--number">123</span></span>`
-                : ""
-        }
-    `;
-
-    return isRadio
-        ? `<input
-            class="s-btn--radio"
-            type="radio"
-            name="test-btn-radio-group"
-            id="btn-${name}"
-            ${isSelected ? "checked" : ""}/>
-            <label class="${baseClasses}" for="btn-${name}">
-                ${btnChildren}
-            </label>`
-        : `<button
-            class="${baseClasses}${isSelected ? " is-selected" : ""}"
-            ${isSelected ? `aria-current="true"` : ""}
-            type="button">
-                ${btnChildren}
-            </button>`;
-};
-
-const getBtns = (ids: number[]): string => {
-    return ids.map((id) => getBtn(btns[id])).join("");
-};
-
-const testArgs: TestVariationArgs = {
-    baseClass: "s-btn-group",
-    children: {
-        default: getBtns([0, 1, 2]),
-        single: getBtns([0]),
-        form: `
-            ${getBtns([0])}
-            <form class="mb0 p0">
-                ${getBtn(btns[1])}
-            </form>
-            ${getBtns([2])}
-        `,
-        badge: btns.map((btn) => getBtn({ ...btn, hasBadge: true })).join(""),
-        radio: btns.map((btn) => getBtn({ ...btn, isRadio: true })).join(""),
-    },
-    template: ({ component, testid }) =>
-        html`<div
-            class="d-inline-flex ai-center jc-center p8"
-            data-testid="${testid}"
-        >
-            ${component}
-        </div>`,
-};
-
-export { testArgs };

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

@@ -1,7 +0,0 @@
-import { testArgs } from "./button-group.test.setup";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-describe("button group", () => {
-    runVisualTests(testArgs);
-});

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

@@ -1,12 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("card", () => {
-    runA11yTests({
-        baseClass: "s-card",
-        variants: ["muted"],
-        children: {
-            default: `<p>This is a description of the card’s content.</p>`,
-        },
-    });
-});

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

@@ -1,52 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const cardTemplate = ({ component, testid }: any) =>
-    html`<div
-        class="d-inline-flex ai-center jc-center hs2 ws3 p8"
-        data-testid="${testid}"
-    >
-        ${component}
-    </div>`;
-
-const baseChild = `
-    <h2 class="fs-body3 lh-sm fc-dark">Base card title</h2>
-    <p class="fs-body1 fc-medium">
-        This is a description of the card’s content.
-    </p>
-    <div class="d-flex gx4">
-        <button class="flex--item s-btn s-btn__filled s-btn__sm">
-            Call to action
-        </button>
-        <button class="flex--item s-btn s-btn__sm">Cancel</button>
-    </div>
-`;
-
-describe("card", () => {
-    runVisualTests({
-        baseClass: "s-card",
-        variants: ["muted"],
-        children: {
-            default: baseChild,
-        },
-        template: cardTemplate,
-    });
-
-    // Stacked
-    runVisualTests({
-        baseClass: "s-card",
-        variants: ["stacked"], // dummy variant for testid differentiation
-        children: {
-            default: `<div class="s-card ps-relative b4 l4">${baseChild}</div>`,
-        },
-        attributes: {
-            class: "p0",
-        },
-        template: cardTemplate,
-        options: {
-            includeNullVariant: false,
-        },
-    });
-});

package/lib/components/check-control/check-control.a11y.test.ts

@@ -1,33 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-["checkbox", "radio"].forEach((type) => {
-    describe("s-check-control", () => {
-        // TODO include indeterminate
-        ["checked", "unchecked"].forEach((state) => {
-            runA11yTests({
-                baseClass: "s-check-control",
-                modifiers: {
-                    global: ["has-warning", "has-error", "has-success"],
-                },
-                children: {
-                    default: `
-                        <input
-                            class="s-${type}"
-                            type="${type}"
-                            id="test-input"
-                            name=""
-                            ${state === "checked" ? "checked" : ""}/>
-                        <label class="s-label" for="test-input">
-                            Label ${type}
-                            <p class="s-input-message">Description</p>
-                        </label>
-                    `,
-                },
-                options: {
-                    testidSuffix: `${state}-${type}`,
-                },
-            });
-        });
-    });
-});

package/lib/components/check-control/check-control.visual.test.ts

@@ -1,36 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-["checkbox", "radio"].forEach((type) => {
-    describe("s-check-control", () => {
-        // TODO include indeterminate
-        ["checked", "unchecked"].forEach((state) => {
-            runVisualTests({
-                baseClass: "s-check-control",
-                modifiers: {
-                    global: ["has-warning", "has-error", "has-success"],
-                },
-                attributes: {
-                    class: "bg-black-225 hs1 ws2 p8",
-                },
-                children: {
-                    default: `
-                        <input
-                            class="s-${type}"
-                            type="${type}"
-                            id="test-input"
-                            name=""
-                            ${state === "checked" ? "checked" : ""}/>
-                        <label class="s-label" for="test-input">
-                            Label ${type}
-                            <p class="s-input-message">Description</p>
-                        </label>
-                    `,
-                },
-                options: {
-                    testidSuffix: `${state}-${type}`,
-                },
-            });
-        });
-    });
-});

package/lib/components/check-group/check-group.a11y.test.ts

@@ -1,49 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-type CheckGroup = "checkbox" | "radio";
-const checkTypes: CheckGroup[] = ["checkbox", "radio"];
-
-checkTypes.forEach((type) => {
-    describe("s-check-group", () => {
-        const checkEls: {
-            type: CheckGroup;
-            id: string;
-            state?: "checked" | "unchecked" | "indeterminate";
-        }[] = [
-            { type, id: `test-${type}1`, state: "checked" },
-            { type, id: `test-${type}2` },
-        ];
-        runA11yTests({
-            tag: "fieldset",
-            baseClass: "s-check-group",
-            variants: ["horizontal"],
-            children: {
-                default: `
-                    <legend class="s-label">${type} group</legend>
-                    ${checkEls
-                        .map(
-                            ({ type, state, id }, index) => `
-                        <div class="s-check-control">
-                            <input
-                                class="s-${type}"
-                                type="${type}"
-                                id="${id}-${index}"
-                                name=""
-                                ${state === "checked" ? "checked" : ""}/>
-                            <label class="s-label" for="${id}-${index}">
-                                ${type} label ${index}
-                                <p class="s-input-message">Description</p>
-                            </label>
-                        </div>
-                    `
-                        )
-                        .join("")}
-                `,
-            },
-            options: {
-                testidSuffix: type,
-            },
-        });
-    });
-});