@stackoverflow/stacks 2.0.1 → 2.0.3

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/label/label.a11y.test.ts

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

@@ -79,6 +79,7 @@
         vertical-align: text-bottom;
     }
 
+    // TODO we shouldn't support descriptions and messages within labels
     .s-description,
     .s-input-message {
         font-weight: normal;

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

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

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

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