@stackoverflow/stacks 2.3.3 → 2.5.0

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

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

@@ -1,58 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-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. <a href="">Learn more</a>.',
-    },
-];
-
-describe("input-message", () => {
-    states.forEach((state) => {
-        runVisualTests({
-            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="p8 ws3 ${stateClass}"
-                        ?disabled="${isDisabled}"
-                    >
-                        ${component}
-                    </fieldset>
-                `;
-            },
-        });
-    });
-});

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

@@ -1,109 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-// TODO note: all accessibility tests here are skipped currently. Revisit in Stacks v2
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = ({ component, testid, classes = "", icon }: any) => html`
-    <div data-testid="${testid}" class="p8 ws4 ${classes}">
-        <label for="default-id">Label</label>
-        ${component}${icon}
-    </div>
-`;
-
-const customAttributes = [
-    {
-        placeholder: "Enter your text here",
-    },
-    {
-        readonly: "",
-    },
-    {
-        disabled: "",
-    },
-];
-
-const states = ["has-error", "has-warning", "has-success"];
-const sizes = ["sm", "md", "lg", "xl"];
-const otherModifiers = ["creditcard", "search"];
-
-["input", "textarea"].map((type) => {
-    const children =
-        type === "textarea" ? { default: "Enter your text here" } : undefined;
-
-    describe(type, () => {
-        // Base styles w/ value, modifiers
-        runA11yTests({
-            baseClass: `s-${type}`,
-            modifiers: {
-                primary: [...sizes, ...otherModifiers],
-            },
-            tag: type,
-            attributes:
-                type === "input"
-                    ? {
-                          type: "text",
-                          value: "Text input value",
-                          id: `default-id`,
-                      }
-                    : {
-                          id: `default-id`,
-                      },
-            children,
-            template,
-        });
-
-        // Base styles w/o value; w/ readonly attr; w/ disabled attr
-        customAttributes.forEach((attributes) => {
-            const attrString = Object.keys(attributes).sort().join("-");
-
-            runA11yTests({
-                baseClass: `s-${type} ${attrString}`,
-                tag: type,
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                attributes:
-                    type === "input"
-                        ? {
-                              type: "text",
-                              value: attributes.placeholder
-                                  ? null
-                                  : "Text input value",
-                              id: `default-id`,
-                              ...attributes,
-                          }
-                        : {
-                              id: `default-id`,
-                              ...attributes,
-                          },
-                children,
-                template,
-                // TODO revisit these skipped test ids
-                skippedTestids: [/readonly/],
-            });
-        });
-
-        // w/ state classes
-        states.forEach((state) => {
-            runA11yTests({
-                baseClass: `s-${type} state-${state}`,
-                tag: type,
-                attributes:
-                    type === "input"
-                        ? {
-                              type: "text",
-                              value: "Text input value",
-                              id: `default-id`,
-                          }
-                        : {
-                              id: "default-id",
-                          },
-                children,
-                template: ({ component, testid }) =>
-                    template({ component, testid, classes: state }),
-            });
-        });
-        // TODO interaction (focus) states?
-    });
-});

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

@@ -1,95 +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, classes = "", icon }: any) => html`
-    <div data-testid="${testid}" class="p8 ws4 ${classes}">
-        ${component}${icon}
-    </div>
-`;
-
-const customAttributes = [
-    {
-        placeholder: "Enter your text here",
-    },
-    {
-        readonly: "",
-    },
-    {
-        disabled: "",
-    },
-] as Record<string, string>[];
-
-const states = ["has-error", "has-warning", "has-success", "is-readonly"];
-const sizes = ["sm", "md", "lg", "xl"];
-const otherModifiers = ["creditcard", "search"];
-
-["input", "textarea"].map((type) => {
-    const children =
-        type === "textarea" ? { default: "Enter your text here" } : undefined;
-
-    describe(type, () => {
-        // Base styles w/ value, modifiers
-        runVisualTests({
-            baseClass: `s-${type}`,
-            modifiers: {
-                primary: [...sizes, ...otherModifiers],
-            },
-            tag: type,
-            attributes:
-                type === "input"
-                    ? {
-                          type: "text",
-                          value: "Text input value",
-                      }
-                    : {},
-            children,
-            template,
-        });
-
-        // Base styles w/o value; w/ readonly attr; w/ disabled attr
-        customAttributes.forEach((attributes) => {
-            const attrString = Object.keys(attributes).sort().join("-");
-            let attr = attributes;
-            if (type === "input") {
-                attr = {
-                    type: "text",
-                    ...attributes,
-                };
-                if (!attributes.placeholder) {
-                    attr = {
-                        value: "Text input value",
-                        ...attr,
-                    };
-                }
-            }
-            runVisualTests({
-                baseClass: `s-${type} ${attrString}`,
-                tag: type,
-                attributes: attr,
-                children,
-                template,
-            });
-        });
-
-        // w/ state classes; .is-readonly
-        states.forEach((state) => {
-            runVisualTests({
-                baseClass: `s-${type} state-${state}`,
-                tag: type,
-                attributes:
-                    type === "input"
-                        ? {
-                              type: "text",
-                              value: "Text input value",
-                          }
-                        : {},
-                children,
-                template: ({ component, testid }) =>
-                    template({ component, testid, classes: state }),
-            });
-        });
-        // TODO interaction (focus) states?
-    });
-});

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

@@ -1,47 +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 labelTemplate = ({ component, testid }: any) => {
-    return html`
-        <fieldset data-testid="${testid}" class="p8 ws3">${component}</fieldset>
-    `;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getChildren = (status?: any) => {
-    const typeClass =
-        status && status !== "base" ? `s-label--status__${status}` : "";
-    return `
-        Example label
-        ${
-            status
-                ? `
-            <span class="s-label--status ${typeClass}">${
-                status ?? "no type"
-            }</span>
-        `
-                : ""
-        }
-    `;
-};
-
-describe("label", () => {
-    runA11yTests({
-        baseClass: `s-label`,
-        modifiers: {
-            primary: ["sm", "md", "lg", "xl"],
-        },
-        children: {
-            "default": getChildren(),
-            "status": getChildren("base"),
-            "status-beta": getChildren("beta"),
-            "status-new": getChildren("new"),
-            "status-required": getChildren("required"),
-        },
-        tag: "label",
-        template: ({ component, testid }) =>
-            labelTemplate({ component, testid }),
-    });
-});