@stackoverflow/stacks 2.4.0 → 2.5.0

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

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