@stackoverflow/stacks 2.4.0 → 2.5.0

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

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

@@ -1,51 +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";
-
-const user = userEvent.setup();
-
-describe("expandable-control", () => {
-    it("should focus on expandable content only when expanded", async () => {
-        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,
-        });
-
-        expect(
-            screen.queryByRole("button", {
-                name: "inside expandable",
-            })
-        ).to.be.null;
-
-        await user.click(expandableTrigger);
-
-        // expandable is now expanded
-        expandableTrigger = screen.getByRole("button", {
-            name: "expandable trigger",
-            expanded: true,
-        });
-
-        expect(
-            screen.getByRole("button", {
-                name: "inside expandable",
-            })
-        ).to.be.visible;
-    });
-});

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

@@ -1,26 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-describe("expandable", () => {
-    runVisualTests({
-        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>
-        `,
-    });
-});

package/lib/components/input-fill/input-fill.a11y.test.ts

@@ -1,21 +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 template = ({ component, testid }: any) => html`
-    <div data-testid="${testid}" class="p8 ws1">${component}</div>
-`;
-
-describe("input-fill", () => {
-    runA11yTests({
-        baseClass: `s-input-fill`,
-        modifiers: {
-            global: ["order-first", "order-last"],
-        },
-        children: {
-            default: "input fill",
-        },
-        template,
-    });
-});

package/lib/components/input-fill/input-fill.visual.test.ts

@@ -1,21 +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 template = ({ component, testid }: any) => html`
-    <div data-testid="${testid}" class="p8 ws1">${component}</div>
-`;
-
-describe("input-fill", () => {
-    runVisualTests({
-        baseClass: `s-input-fill`,
-        modifiers: {
-            global: ["order-first", "order-last"],
-        },
-        children: {
-            default: "input fill",
-        },
-        template,
-    });
-});

package/lib/components/input-icon/input-icon.a11y.test.ts

@@ -1,81 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-const modifiers = [
-    {
-        name: "error",
-        parentClasses: "has-error",
-    },
-    {
-        name: "success",
-        parentClasses: "has-success",
-    },
-    {
-        name: "warning",
-        parentClasses: "has-warning",
-    },
-    {
-        name: "disabled",
-        parentClasses: "is-disabled",
-    },
-    {
-        name: "readonly",
-        parentClasses: "is-readonly",
-    },
-    {
-        name: "creditcard",
-        modifier: "creditcard",
-        inputClasses: "s-input__creditcard",
-    },
-    {
-        name: "search",
-        modifier: "search",
-        inputClasses: "s-input__search",
-    },
-];
-
-const getSvgPath = (name: string) => {
-    switch (name) {
-        case "creditcard":
-            return '<path d="M3 3h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2Zm0 6v4h12V9H3Zm0-3h12V5H3v1Z"></path>';
-        case "search":
-            return '<path d="m18 16.5-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0Z"></path>';
-        default:
-            return '<path d="M9.06 3C4 3 1 9 1 9s3 6 8.06 6C14 15 17 9 17 9s-3-6-7.94-6ZM9 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2Z"></path>'; // eye icon path
-    }
-};
-
-describe("input-icon", () => {
-    modifiers.forEach(({ name, parentClasses, modifier }) => {
-        runA11yTests({
-            baseClass: `s-input-icon`,
-            tag: "svg",
-            children: {
-                [name]: getSvgPath(name), // IconSearch
-            },
-            modifiers: {
-                standalone: modifier ? [`${modifier}`] : [],
-                global: parentClasses ? [`parent-${parentClasses}`] : [],
-            },
-            attributes: {
-                "aria-hidden": "true",
-                "width": "18",
-                "height": "18",
-                "viewBox": "0 0 18 18",
-            },
-            template: ({ component, testid }) => html`
-                <div
-                    data-testid="${testid}"
-                    class="d-flex fd-column g4 fc-black ps-relative wmx2 p8 ${parentClasses ??
-                    ""}"
-                >
-                    <div class="d-flex ps-relative svg-icon">${component}</div>
-                </div>
-            `,
-            options: {
-                includeNullModifier: false,
-            },
-        });
-    });
-});

package/lib/components/input-icon/input-icon.visual.test.ts

@@ -1,92 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-const modifiers = [
-    {
-        name: "error",
-        parentClasses: "has-error",
-    },
-    {
-        name: "success",
-        parentClasses: "has-success",
-    },
-    {
-        name: "warning",
-        parentClasses: "has-warning",
-    },
-    {
-        name: "disabled",
-        parentClasses: "is-disabled",
-    },
-    {
-        name: "readonly",
-        parentClasses: "is-readonly",
-    },
-    {
-        name: "creditcard",
-        modifier: "creditcard",
-        inputClasses: "s-input__creditcard",
-    },
-    {
-        name: "search",
-        modifier: "search",
-        inputClasses: "s-input__search",
-    },
-];
-
-const getSvgPath = (name: string) => {
-    switch (name) {
-        case "creditcard":
-            return '<path d="M3 3h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2Zm0 6v4h12V9H3Zm0-3h12V5H3v1Z"></path>';
-        case "search":
-            return '<path d="m18 16.5-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0Z"></path>';
-        default:
-            return '<path d="M9.06 3C4 3 1 9 1 9s3 6 8.06 6C14 15 17 9 17 9s-3-6-7.94-6ZM9 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2Z"></path>'; // eye icon path
-    }
-};
-
-describe("input-icon", () => {
-    modifiers.forEach(({ name, parentClasses, modifier, inputClasses }) => {
-        runVisualTests({
-            baseClass: `s-input-icon`,
-            tag: "svg",
-            children: {
-                [name]: getSvgPath(name), // IconSearch
-            },
-            modifiers: {
-                standalone: modifier ? [`${modifier}`] : [],
-                global: parentClasses ? [`parent-${parentClasses}`] : [],
-            },
-            attributes: {
-                "aria-hidden": "true",
-                "width": "18",
-                "height": "18",
-                "viewBox": "0 0 18 18",
-            },
-            template: ({ component, testid }) => html`
-                <div
-                    data-testid="${testid}"
-                    class="d-flex fd-column g4 fc-black ps-relative wmx2 p8 ${parentClasses ??
-                    ""}"
-                >
-                    <label class="s-label v-visible-sr" for="ex-input"
-                        >Input</label
-                    >
-                    <div class="d-flex ps-relative svg-icon">
-                        <input
-                            id="ex-input"
-                            type="text"
-                            class="s-input ${inputClasses ?? ""}"
-                            placeholder="${name} input…"
-                        />
-                        ${component}
-                    </div>
-                </div>
-            `,
-            options: {
-                includeNullModifier: false,
-            },
-        });
-    });
-});

package/lib/components/input-message/input-message.a11y.test.ts

@@ -1,57 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-const states = [
-    {
-        class: "",
-        children:
-            'This is a stateless input message. <a href="">Learn more</a>.',
-    },
-    {
-        class: "has-error",
-        children: 'This is an error input message. <a href="">Learn more</a>.',
-    },
-    {
-        class: "has-success",
-        children: 'This is a success input message. <a href="">Learn more</a>.',
-    },
-    {
-        class: "has-warning",
-        children: 'This is a warning input message. <a href="">Learn more</a>.',
-    },
-    {
-        class: "disabled",
-        children: "This is a disabled input message.",
-    },
-];
-
-describe("input-message", () => {
-    states.forEach((state) => {
-        runA11yTests({
-            baseClass: `s-input-message ${
-                state.class ? `state-${state.class}` : ""
-            }`,
-            children: {
-                default: state.children,
-            },
-            template: ({ component, testid }) => {
-                const isDisabled = state.class === "disabled";
-                const stateClass =
-                    state.class && state.class !== "disabled"
-                        ? state.class
-                        : "";
-
-                return html`
-                    <fieldset
-                        data-testid="${testid}"
-                        class="${stateClass}"
-                        ?disabled="${isDisabled}"
-                    >
-                        ${component}
-                    </fieldset>
-                `;
-            },
-        });
-    });
-});