@stackoverflow/stacks 2.0.0 → 2.0.2

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

@@ -0,0 +1,17 @@
+import { html } from "@open-wc/testing";
+import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("empty-state", () => {
+    runComponentTests({
+        type: "a11y",
+        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

@@ -0,0 +1,17 @@
+import { html } from "@open-wc/testing";
+import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("empty-state", () => {
+    runComponentTests({
+        type: "visual",
+        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/input-fill/input-fill.a11y.test.ts

@@ -0,0 +1,22 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/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", () => {
+    runComponentTests({
+        type: "a11y",
+        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

@@ -0,0 +1,22 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/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", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: `s-input-fill`,
+        modifiers: {
+            global: ["order-first", "order-last"],
+        },
+        children: {
+            default: "input fill",
+        },
+        template,
+    });
+});

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

@@ -0,0 +1,58 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/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) => {
+        runComponentTests({
+            type: "a11y",
+            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

@@ -0,0 +1,59 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/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) => {
+        runComponentTests({
+            type: "visual",
+            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/progress-bar/progress-bar.a11y.test.ts

@@ -0,0 +1,200 @@
+import { html } from "@open-wc/testing";
+import {
+    IconAchievementsSm,
+    IconCheckmarkSm,
+} from "@stackoverflow/stacks-icons/icons";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="d-flex ai-center jc-center p8 ws2" data-testid="${testid}">
+        ${component}
+    </div>
+`;
+
+const steppedItems = [
+    {
+        complete: true,
+        label: "Select plan",
+    },
+    {
+        complete: true,
+        label: "Team name",
+    },
+    {
+        active: true,
+        label: "Payment",
+    },
+    {
+        label: "Create account",
+    },
+];
+
+const getChildren = (type: string) => {
+    switch (type) {
+        case "badge":
+            return `<div class="s-progress--label" id="example-label">
+                <div class="s-badge--label">Electorate</div>
+            </div>
+            <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="example-label" style="width: 75%;"></div>`;
+        case "circular":
+            return `<svg class="s-progress-bar" role="progressbar" viewbox="0 0 32 32" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
+                <circle cx="16" cy="16" r="14"></circle>
+                <circle cx="16" cy="16" r="14"></circle>
+            </svg>`;
+        case "privilege":
+            return `
+                <div class="s-progress--label" id="progress-label">
+                    ${IconAchievementsSm}
+                    Access Review Queues
+                </div>
+                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="progress-label" style="width: 75%;"></div>
+            `;
+        case "segmented":
+            return `
+                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="…" style="width: 75%;"></div>
+                <ol class="s-progress--segments">
+                    <li></li><li></li><li></li>
+                </ol>
+            `;
+        case "stepped":
+            return steppedItems
+                .map((step, i) => {
+                    return `
+                    <div
+                        class="
+                            s-progress--step
+                            ${step.active ? "is-active" : ""}
+                            ${step.complete ? "is-complete" : ""}
+                        "
+                    >
+                        <a href="#" class="s-progress--stop">
+                            ${step.complete ? IconCheckmarkSm : ""}
+                            <span class="v-visible-sr">${step.label} ${
+                                step.complete ? "complete" : "incomplete"
+                            }</span>
+                        </a>
+                        ${
+                            i > 0
+                                ? '<div class="s-progress--bar s-progress--bar__left"></div>'
+                                : ""
+                        }
+
+                        ${
+                            i < steppedItems.length - 1
+                                ? '<div class="s-progress--bar s-progress--bar__right"></div>'
+                                : ""
+                        }
+                        <a class="s-progress--label">${step.label}</a>
+                    </div>
+                `;
+                })
+                .join("");
+        default:
+            return `<div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="progress" style="width: 75%"></div>`;
+    }
+};
+describe("progress-bar", () => {
+    // Base
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["brand", "info"],
+        children: {
+            default: getChildren(""),
+        },
+        template,
+    });
+
+    // Badge
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["badge"],
+        modifiers: {
+            primary: ["gold", "silver", "bronze"],
+        },
+        children: {
+            default: getChildren("badge"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            includeNullModifier: false,
+        },
+    });
+
+    // Circular
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["circular"],
+        modifiers: {
+            global: ["fc-green-400", "fc-theme-primary"],
+        },
+        children: {
+            default: getChildren("circular"),
+        },
+        template,
+        attributes: {
+            style: "--s-progress-value: .75",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            includeNullModifier: false,
+        },
+    });
+
+    // Privilege
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["privilege"],
+        children: {
+            default: getChildren("privilege"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+
+    // Segmented
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["segmented"],
+        children: {
+            default: getChildren("segmented"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+
+    // Stepped
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["stepped"],
+        children: {
+            default: getChildren("stepped"),
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-block p8 ws5" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+        // TODO add skipped test ids
+    });
+});

package/lib/components/progress-bar/progress-bar.visual.test.ts

@@ -0,0 +1,199 @@
+import { html } from "@open-wc/testing";
+import {
+    IconAchievementsSm,
+    IconCheckmarkSm,
+} from "@stackoverflow/stacks-icons/icons";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="d-flex ai-center jc-center p8 ws2" data-testid="${testid}">
+        ${component}
+    </div>
+`;
+
+const steppedItems = [
+    {
+        complete: true,
+        label: "Select plan",
+    },
+    {
+        complete: true,
+        label: "Team name",
+    },
+    {
+        active: true,
+        label: "Payment",
+    },
+    {
+        label: "Create account",
+    },
+];
+
+const getChildren = (type: string) => {
+    switch (type) {
+        case "badge":
+            return `<div class="s-progress--label" id="example-label">
+                <div class="s-badge--label">Electorate</div>
+            </div>
+            <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="example-label" style="width: 75%;"></div>`;
+        case "circular":
+            return `<svg class="s-progress-bar" role="progressbar" viewbox="0 0 32 32" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
+                <circle cx="16" cy="16" r="14"></circle>
+                <circle cx="16" cy="16" r="14"></circle>
+            </svg>`;
+        case "privilege":
+            return `
+                <div class="s-progress--label" id="progress-label">
+                    ${IconAchievementsSm}
+                    Access Review Queues
+                </div>
+                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="progress-label" style="width: 75%;"></div>
+            `;
+        case "segmented":
+            return `
+                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="…" style="width: 75%;"></div>
+                <ol class="s-progress--segments">
+                    <li></li><li></li><li></li>
+                </ol>
+            `;
+        case "stepped":
+            return steppedItems
+                .map((step, i) => {
+                    return `
+                    <div
+                        class="
+                            s-progress--step
+                            ${step.active ? "is-active" : ""}
+                            ${step.complete ? "is-complete" : ""}
+                        "
+                    >
+                        <a href="#" class="s-progress--stop">
+                            ${step.complete ? IconCheckmarkSm : ""}
+                            <span class="v-visible-sr">${step.label} ${
+                                step.complete ? "complete" : "incomplete"
+                            }</span>
+                        </a>
+                        ${
+                            i > 0
+                                ? '<div class="s-progress--bar s-progress--bar__left"></div>'
+                                : ""
+                        }
+
+                        ${
+                            i < steppedItems.length - 1
+                                ? '<div class="s-progress--bar s-progress--bar__right"></div>'
+                                : ""
+                        }
+                        <a class="s-progress--label">${step.label}</a>
+                    </div>
+                `;
+                })
+                .join("");
+        default:
+            return `<div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="progress" style="width: 75%"></div>`;
+    }
+};
+describe("progress-bar", () => {
+    // Base
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["brand", "info"],
+        children: {
+            default: getChildren(""),
+        },
+        template,
+    });
+
+    // Badge
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["badge"],
+        modifiers: {
+            primary: ["gold", "silver", "bronze"],
+        },
+        children: {
+            default: getChildren("badge"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            includeNullModifier: false,
+        },
+    });
+
+    // Circular
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["circular"],
+        modifiers: {
+            global: ["fc-green-400", "fc-theme-primary"],
+        },
+        children: {
+            default: getChildren("circular"),
+        },
+        template,
+        attributes: {
+            style: "--s-progress-value: .75",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            includeNullModifier: false,
+        },
+    });
+
+    // Privilege
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["privilege"],
+        children: {
+            default: getChildren("privilege"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+
+    // Segmented
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["segmented"],
+        children: {
+            default: getChildren("segmented"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+
+    // Stepped
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["stepped"],
+        children: {
+            default: getChildren("stepped"),
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-block p8 ws5" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+});