@stackoverflow/stacks 2.3.3 → 2.5.0

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

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

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

@@ -1,27 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("link", () => {
-    // TODO check for visited styling
-    runA11yTests({
-        baseClass: "s-link",
-        modifiers: {
-            primary: [
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-                "visited",
-            ],
-            secondary: ["dropdown"],
-        },
-        children: {
-            default: "s-link",
-        },
-        tag: "a",
-        attributes: {
-            href: "#",
-        },
-    });
-});

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

@@ -1,31 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-describe("link", () => {
-    // TODO check for visited styling
-    runVisualTests({
-        baseClass: "s-link",
-        modifiers: {
-            primary: [
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-                "visited",
-            ],
-            secondary: ["dropdown"],
-        },
-        children: {
-            default: "s-link",
-        },
-        tag: "a",
-        attributes: {
-            href: "#",
-        },
-        template: ({ component, testid }) => html`
-            <div data-testid="${testid}" class="p4 ws1">${component}</div>
-        `,
-    });
-});

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

@@ -1,47 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-const getChild = (child?: string): string => {
-    return `
-        <div class="s-link-preview--header">
-            <div class="s-link-preview--icon">👋</div>
-            <div>
-                <a href="#" class="s-link-preview--title">
-                    Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?
-                </a>
-                <div class="s-link-preview--details">
-                    Issue submitted by Ricky Otero on <relative-time datetime="2019-08-12T04:05:22Z" title="Aug 12, 2019, 12:05 AM EDT">Aug 12, 2019</relative-time> • <strong>RESOLVED</strong>
-                </div>
-            </div>
-        </div>
-        ${
-            child
-                ? child
-                : `
-            <div class="s-link-preview--body">
-                <p>I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.</p>
-                <p>The result of this call (an array of user data), needs to be exported as a function and called in another file.</p>
-                <p>If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!</p>
-                <p>Thanks!</p>
-            </div>
-        `
-        }
-        <div class="s-link-preview--footer">
-            <a href="#" class="s-link-preview--url">https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1</a>
-            <a href="#" class="s-link-preview--misc">Privacy notice</a>
-        </div>
-    `;
-};
-describe("link preview", () => {
-    runA11yTests({
-        baseClass: "s-link-preview",
-        children: {
-            default: getChild(),
-            code: getChild(`
-                <div class="s-link-preview--code">
-                    <pre class="language-js s-code-block" tabindex="0"><code class="language-js s-code-block"><span class="hljs-meta">'use strict'</span>;</code></pre>
-                </div>
-            `),
-        },
-    });
-});

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

@@ -1,52 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-const getChild = (child?: string): string => {
-    return `
-        <div class="s-link-preview--header">
-            <div class="s-link-preview--icon">👋</div>
-            <div>
-                <a href="#" class="s-link-preview--title">
-                    Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?
-                </a>
-                <div class="s-link-preview--details">
-                    Issue submitted by Ricky Otero on <relative-time datetime="2019-08-12T04:05:22Z" title="Aug 12, 2019, 12:05 AM EDT">Aug 12, 2019</relative-time> • <strong>RESOLVED</strong>
-                </div>
-            </div>
-        </div>
-        ${
-            child
-                ? child
-                : `
-            <div class="s-link-preview--body">
-                <p>I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.</p>
-                <p>The result of this call (an array of user data), needs to be exported as a function and called in another file.</p>
-                <p>If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!</p>
-                <p>Thanks!</p>
-            </div>
-        `
-        }
-        <div class="s-link-preview--footer">
-            <a href="#" class="s-link-preview--url">https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1</a>
-            <a href="#" class="s-link-preview--misc">Privacy notice</a>
-        </div>
-    `;
-};
-
-describe("link preview", () => {
-    runVisualTests({
-        baseClass: "s-link-preview",
-        children: {
-            default: getChild(),
-            code: getChild(`
-                <div class="s-link-preview--code">
-                    <pre class="language-js s-code-block" tabindex="0"><code class="language-js s-code-block"><span class="hljs-meta">'use strict'</span>;</code></pre>
-                </div>
-            `),
-        },
-        template: ({ component, testid }) => html`
-            <div class="ws8 p8" data-testid="${testid}">${component}</div>
-        `,
-    });
-});

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

@@ -1,39 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("menu", () => {
-    runA11yTests({
-        baseClass: `s-menu`,
-        children: {
-            default: `
-                <li class="s-menu--title" role="separator">Title 1</li>
-                <li role="menuitem">
-                    <a href="#" class="s-block-link">Example li</a>
-                </li>
-                <li class="s-menu--title" role="separator">Title 2</li>
-                <li role="menuitem">
-                    <a href="#" class="s-block-link s-block-link__left is-selected">Selected link</a>
-                </li>
-                <li role="menuitem">
-                    <a href="#" class="s-block-link">Example li</a>
-                </li>
-                <li role="menuitem" class="s-menu--label">Example label</li>
-                <li role="menuitem">
-                    <a href="#" class="s-block-link">Block link</a>
-                </li>
-                <li class="s-menu--divider" role="separator"></li>
-                <li role="menuitem">
-                    <a href="…" class="s-block-link s-block-link__danger">Danger link</a>
-                </li>
-            `,
-        },
-        tag: "ul",
-        attributes: {
-            role: "menu",
-        },
-        template: ({ component, testid }) => html`
-            <div class="ws2" data-testid="${testid}">${component}</div>
-        `,
-    });
-});

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

@@ -1,39 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-describe("menu", () => {
-    runVisualTests({
-        baseClass: `s-menu`,
-        children: {
-            default: `
-                <li class="s-menu--title" role="separator">Title 1</li>
-                <li role="menuitem">
-                    <a href="#" class="s-block-link">Example li</a>
-                </li>
-                <li class="s-menu--title" role="separator">Title 2</li>
-                <li role="menuitem">
-                    <a href="#" class="s-block-link s-block-link__left is-selected">Selected link</a>
-                </li>
-                <li role="menuitem">
-                    <a href="#" class="s-block-link">Example li</a>
-                </li>
-                <li role="menuitem" class="s-menu--label">Example label</li>
-                <li role="menuitem">
-                    <a href="#" class="s-block-link">Block link</a>
-                </li>
-                <li class="s-menu--divider" role="separator"></li>
-                <li role="menuitem">
-                    <a href="…" class="s-block-link s-block-link__danger">Danger link</a>
-                </li>
-            `,
-        },
-        tag: "ul",
-        attributes: {
-            role: "menu",
-        },
-        template: ({ component, testid }) => html`
-            <div class="ws2" data-testid="${testid}">${component}</div>
-        `,
-    });
-});

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

@@ -1,41 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
-import "../../index";
-
-describe("modal", () => {
-    runA11yTests({
-        baseClass: `s-modal`,
-        variants: ["danger"],
-        modifiers: {
-            primary: ["celebration"],
-            secondary: ["full"],
-        },
-        children: {
-            default: `
-                <div class="s-modal--dialog" role="document">
-                    <h1 class="s-modal--header" id="modal-title">Modal header</h1>
-                    <p class="s-modal--body" id="modal-description">Modal body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
-                    <div class="d-flex gx8 s-modal--footer">
-                        <button class="s-btn s-btn__filled" type="button">Confirm</button>
-                        <button class="s-btn s-btn__muted" type="button">Cancel</button>
-                    </div>
-                    <button class="s-modal--close s-btn s-btn__muted" type="button" aria-label="Close">
-                        ${IconClearSm}
-                    </button>
-                </div>
-            `,
-        },
-        tag: "aside",
-        attributes: {
-            "id": "example-modal",
-            "tabindex": "-1",
-            "aria-hidden": "false",
-            "aria-labelledby": "modal-title",
-            "class": "ps-relative p32",
-        },
-        template: ({ component, testid }) => html`
-            <div class="m8 ws6" data-testid="${testid}">${component}</div>
-        `,
-    });
-});

package/lib/components/modal/modal.test.ts

@@ -1,155 +0,0 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen, waitFor } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import "../../index";
-
-const user = userEvent.setup();
-
-const createModal = ({
-    hidden = true,
-    initialFocusEl,
-}: { hidden?: boolean; initialFocusEl?: ReturnType<typeof html> } = {}) => html`
-    <div data-controller="s-modal">
-        <button
-            class="s-btn"
-            data-action="s-modal#show"
-            data-testid="trigger">
-            Show Modal
-        </button>
-
-        <aside
-            class="s-modal"
-            id="modal-base"
-            tabindex="-1"
-            role="dialog"
-            aria-labelledby="modal-base-title"
-            aria-describedby="modal-base-description"
-            aria-hidden="${hidden}"
-            data-s-modal-target="modal"
-            data-testid="modal">
-            <div class="s-modal--dialog" role="document">
-                <h1 class="s-modal--header" id="modal-base-title">Title</h1>
-
-                <p class="s-modal--body">
-                    <span id="modal-base-description">Description</span>
-                    <form>
-                        <input type="text" data-testid="first-focusable-element" />
-                        ${initialFocusEl}
-                    </form>
-                </p>
-
-                <div class="d-flex gx8 s-modal--footer">
-                    <button class="flex--item s-btn s-btn__primary" type="button">Save changes</button>
-                    <button class="flex--item s-btn" type="button" data-action="s-modal#hide">Cancel</button>
-                </div>
-
-                <button
-                    class="s-btn s-btn__muted s-modal--close"
-                    type="button"
-                    aria-label="Close"
-                    data-action="s-modal#hide"
-                    data-testid="close-btn">
-                    Close
-                </button>
-            </div>
-        </aside>
-    </div>
-`;
-
-describe("modal", () => {
-    it("should make the modal visible when toggle button is clicked", async () => {
-        await fixture(createModal());
-
-        const modal = await screen.findByTestId("modal");
-        const trigger = await screen.findByTestId("trigger");
-
-        expect(modal).not.to.be.visible;
-
-        await user.click(trigger);
-
-        expect(modal).to.be.visible;
-    });
-
-    it("should hide the modal when the close button is clicked", async () => {
-        await fixture(createModal({ hidden: false }));
-
-        const modal = await screen.findByTestId("modal");
-        const closeBtn = await screen.findByTestId("close-btn");
-
-        expect(modal).to.be.visible;
-
-        await user.click(closeBtn);
-
-        await waitFor(() => expect(modal).not.to.be.visible);
-    });
-
-    it('should focus on the first element with `data-s-modal-target"initialFocus"` when modal is shown', async () => {
-        await fixture(
-            createModal({
-                initialFocusEl: html`<input
-                    type="text"
-                    data-testid="initialFocus"
-                    data-s-modal-target="initialFocus"
-                />`,
-            })
-        );
-
-        const modal = await screen.findByTestId("modal");
-        const trigger = await screen.findByTestId("trigger");
-        const initialFocusEl = await screen.findByTestId("initialFocus");
-
-        expect(modal).not.to.be.visible;
-
-        await user.click(trigger);
-        expect(modal).to.be.visible;
-
-        await waitFor(() => expect(initialFocusEl).to.have.focus);
-    });
-
-    it("should focus on the first focusable element when modal is shown and no initialFocus is specified", async () => {
-        await fixture(createModal());
-
-        const modal = await screen.findByTestId("modal");
-        const trigger = await screen.findByTestId("trigger");
-        const focusableEl = await screen.findByTestId(
-            "first-focusable-element"
-        );
-
-        expect(modal).not.to.be.visible;
-        expect(focusableEl).not.to.have.focus;
-
-        await user.click(trigger);
-        expect(modal).to.be.visible;
-
-        await waitFor(() => expect(focusableEl).to.have.focus);
-    });
-
-    it("should not change set focus when an element within the modal is already focused", async () => {
-        await fixture(createModal());
-
-        const modal = await screen.findByTestId("modal");
-        const trigger = await screen.findByTestId("trigger");
-        const firstFocusableEl = await screen.findByTestId(
-            "first-focusable-element"
-        );
-        const closeButton = await screen.findByTestId("close-btn");
-
-        expect(modal).not.to.be.visible;
-        expect(firstFocusableEl).not.to.have.focus;
-
-        await user.click(trigger);
-        expect(modal).to.be.visible;
-
-        // manually focus on an element within the modal
-        closeButton.focus();
-
-        // wait for s-modal:shown css transition to complete
-        await new Promise((resolve) =>
-            modal.addEventListener("s-modal:shown", resolve)
-        );
-
-        // check that focus stayed on the manually focused element and
-        // has not changed to the first focusable element
-        expect(closeButton).to.have.focus;
-    });
-});

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

@@ -1,41 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
-import "../../index";
-
-describe("modal", () => {
-    runVisualTests({
-        baseClass: `s-modal`,
-        variants: ["danger"],
-        modifiers: {
-            primary: ["celebration"],
-            secondary: ["full"],
-        },
-        children: {
-            default: `
-                <div class="s-modal--dialog" role="document">
-                    <h1 class="s-modal--header" id="modal-title">Modal header</h1>
-                    <p class="s-modal--body" id="modal-description">Modal body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
-                    <div class="d-flex gx8 s-modal--footer">
-                        <button class="s-btn s-btn__filled" type="button">Confirm</button>
-                        <button class="s-btn s-btn__muted" type="button">Cancel</button>
-                    </div>
-                    <button class="s-modal--close s-btn s-btn__muted" type="button" aria-label="Close">
-                        ${IconClearSm}
-                    </button>
-                </div>
-            `,
-        },
-        tag: "aside",
-        attributes: {
-            "id": "example-modal",
-            "tabindex": "-1",
-            "aria-hidden": "false",
-            "aria-labelledby": "modal-title",
-            "class": "ps-relative p32",
-        },
-        template: ({ component, testid }) => html`
-            <div class="m8 ws6" data-testid="${testid}">${component}</div>
-        `,
-    });
-});

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

@@ -1,81 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import { WCAGNonTextContrast } from "../../test/assertions";
-import "../../index";
-
-const items = [
-    {
-        label: "Group 1",
-        title: true,
-    },
-    {
-        label: "Product",
-        selected: true,
-    },
-    {
-        label: "Email",
-    },
-    {
-        label: "Group 2",
-        title: true,
-    },
-    {
-        label: "Content",
-    },
-    {
-        label: "Brand",
-    },
-    {
-        label: "Marketing",
-    },
-    {
-        label: "More selected",
-        dropdown: true,
-        selected: true,
-    },
-    {
-        label: "More",
-        dropdown: true,
-    },
-];
-
-const getChildren = (includeTitles = false): string =>
-    items
-        .map((item) => {
-            if (item.title) {
-                return includeTitles
-                    ? `<li class="s-navigation--title">${item.label}</li>`
-                    : "";
-            }
-            const classes = `s-navigation--item${
-                item.selected ? " is-selected" : ""
-            }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
-            return `<li><a href="#" class="${classes}">${item.label}</a></li>`;
-        })
-        .join("");
-
-describe("navigation", () => {
-    runA11yTests({
-        baseClass: "s-navigation",
-        variants: ["vertical", "muted"],
-        modifiers: {
-            primary: ["scroll", "sm"],
-        },
-        tag: "ul",
-        children: {
-            default: getChildren(true),
-        },
-        template: ({ component, testid }) => html`
-            <nav
-                class="d-inline-block p8 wmx3"
-                aria-label="example-navigation"
-                data-testid="${testid}"
-            >
-                ${component}
-            </nav>
-        `,
-        additionalAssertions: [WCAGNonTextContrast],
-        // TODO: fix non-text-contrast SC for s-navigation__muted
-        skippedTestids: [/s-navigation-(light|dark)-muted/],
-    });
-});