@stackoverflow/stacks 2.3.3 → 2.5.0

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__primary 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,
-            },
-        });
-    });
-});

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

@@ -1,56 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-type CheckGroup = "checkbox" | "radio";
-const checkTypes: CheckGroup[] = ["checkbox", "radio"];
-
-// Account for horizontal variant
-[true, false].forEach((isHorizontal) => {
-    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` },
-            ];
-            runVisualTests({
-                tag: "fieldset",
-                baseClass: "s-check-group",
-                attributes: {
-                    class: isHorizontal ? "hs1 ws3 p8" : "hs2 ws2 p8",
-                },
-                variants: isHorizontal ? ["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: {
-                    includeNullVariant: !isHorizontal,
-                    testidSuffix: type,
-                },
-            });
-        });
-    });
-});

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

@@ -1,37 +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 checkboxTemplate = ({ component, testid, id }: any) =>
-    html` <div class="s-check-control" data-testid="${testid}">
-        ${component}
-        <label class="s-label" for="${id}">Label</label>
-    </div>`;
-
-["checkbox", "radio"].forEach((type) => {
-    describe(type, () => {
-        // TODO include indeterminate
-        ["checked", "unchecked"].forEach((state) => {
-            runA11yTests({
-                tag: "input",
-                baseClass: `s-${type}`,
-                attributes: {
-                    name: "test-name",
-                    id: "test-id",
-                    type,
-                    ...(state === "checked" ? { checked: "checked" } : {}),
-                },
-                template: ({ component, testid }) =>
-                    checkboxTemplate({
-                        component,
-                        testid,
-                        id: "test-id",
-                    }),
-                options: {
-                    testidSuffix: state,
-                },
-            });
-        });
-    });
-});

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

@@ -1,33 +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 checkboxTemplate = ({ component, testid }: any) =>
-    html`<div
-        class="d-inline-flex ai-center jc-center bg-black-225 hs1 ws1 p8"
-        data-testid="${testid}"
-    >
-        ${component}
-    </div>`;
-
-["checkbox", "radio"].forEach((type) => {
-    describe(type, () => {
-        // TODO include indeterminate
-        ["checked", "unchecked"].forEach((state) => {
-            runVisualTests({
-                tag: "input",
-                baseClass: `s-${type}`,
-                attributes: {
-                    type,
-                    ...(state === "checked" ? { checked: "checked" } : {}),
-                },
-                template: ({ component, testid }) =>
-                    checkboxTemplate({ component, testid }),
-                options: {
-                    testidSuffix: state,
-                },
-            });
-        });
-    });
-});

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

@@ -1,27 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import highlightedFixtures from "./code-block.fixtures";
-import "../../index";
-
-describe("code block", () => {
-    Object.keys(highlightedFixtures).forEach((language) => {
-        runA11yTests({
-            tag: "pre",
-            baseClass: `s-code-block language-${language}`,
-            children: {
-                default: highlightedFixtures[language],
-            },
-            options: {
-                includeNullModifier: false,
-            },
-            attributes: {
-                tabindex: "0",
-            },
-            // TODO revisit these skipped test ids
-            skippedTestids: [
-                /s-code-block-language-(html|css|javascript)-dark/,
-                /s-code-block-language-html-highcontrast-(light|dark)/,
-                "s-code-block-language-javascript-highcontrast-light",
-            ],
-        });
-    });
-});

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

@@ -1,18 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import highlightedFixtures from "./code-block.fixtures";
-import "../../index";
-
-describe("code block", () => {
-    Object.keys(highlightedFixtures).forEach((language) => {
-        runVisualTests({
-            tag: "pre",
-            baseClass: `s-code-block language-${language}`,
-            children: {
-                default: highlightedFixtures[language],
-            },
-            options: {
-                includeNullModifier: false,
-            },
-        });
-    });
-});

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

@@ -1,28 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-// account for parent with `.is-disabled` class
-[true, false].forEach((isDisabled) => {
-    describe("description", () => {
-        runA11yTests({
-            tag: "p",
-            baseClass: "s-description",
-            children: {
-                default: `Describes the site in the product, emails, integrations, and logs.`,
-            },
-            options: {
-                testidSuffix: isDisabled ? "is-disabled" : "",
-            },
-            template: ({ component, testid }) => html`
-                <div
-                    class="${isDisabled ? "is-disabled" : ""}"
-                    data-testid="${testid}"
-                >
-                    ${component}
-                </div>
-            `,
-            skippedTestids: [/is-disabled/],
-        });
-    });
-});

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

@@ -1,28 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// account for parent with `.is-disabled` class
-[true, false].forEach((isDisabled) => {
-    describe("description", () => {
-        runVisualTests({
-            tag: "p",
-            baseClass: "s-description",
-            children: {
-                default: `Describes the site in the product, emails, integrations, and logs.`,
-            },
-            options: {
-                testidSuffix: isDisabled ? "is-disabled" : "",
-            },
-            template: ({ component, testid }) => html`
-                <div
-                    class="bg-black-225 d-inline-flex ai-center jc-center hs1 ws2 p8
-                    ${isDisabled ? "is-disabled" : ""}"
-                    data-testid="${testid}"
-                >
-                    ${component}
-                </div>
-            `,
-        });
-    });
-});

package/lib/components/empty-state/empty-state.a11y.test.ts

@@ -1,16 +0,0 @@
-import { html } from "@open-wc/testing";
-import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("empty-state", () => {
-    runA11yTests({
-        baseClass: "s-empty-state",
-        children: {
-            default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
-        },
-        template: ({ component, testid }) => html`
-            <div class="ws3 p16" data-testid="${testid}">${component}</div>
-        `,
-    });
-});

package/lib/components/empty-state/empty-state.visual.test.ts

@@ -1,16 +0,0 @@
-import { html } from "@open-wc/testing";
-import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-describe("empty-state", () => {
-    runVisualTests({
-        baseClass: "s-empty-state",
-        children: {
-            default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
-        },
-        template: ({ component, testid }) => html`
-            <div class="ws3 p16" data-testid="${testid}">${component}</div>
-        `,
-    });
-});

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

@@ -1,26 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("expandable", () => {
-    runA11yTests({
-        baseClass: "s-expandable",
-        modifiers: {
-            global: ["is-expanded"],
-        },
-        children: {
-            default: `
-                <div class="s-expandable--content">
-                    <p class="mb8">Expandable: Lorem ipsum dolor sit amet, ex iudicabit necessitatibus usu, cetero laboramus concludaturque mel no, facilisis posidonium cu cum. Pro ex senserit dissentiunt, imperdiet intellegam at sed, ex pri dicit eruditi convenire. Est harum movet gubergren ei, errem dictas evertitur ea sit, at mei oratio eligendi. Ad vis legere possit, vis ne ipsum democritum appellantur. Nullam ancillae iudicabit his ad.</p>
-                </div>
-            `,
-        },
-        template: ({ component, testid }) => html`
-            <div class="ws2 p8" data-testid="${testid}">
-                <div><p>Before expandable content</p></div>
-                ${component}
-                <div><p>After expandable content</p></div>
-            </div>
-        `,
-    });
-});