@stackoverflow/stacks 1.10.1 → 1.10.2

package/dist/js/stacks.js

@@ -6560,6 +6560,7 @@ class UploaderController extends StacksController {
         let thumbElement;
         if (file.type.match("image/*") && file.data) {
             thumbElement = document.createElement("img");
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
             thumbElement.src = file.data.toString();
             thumbElement.alt = file.name;
         }

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

@@ -0,0 +1,121 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+// import { Icons } from "@stackoverflow/stacks-icons";
+import "../../index";
+
+const variants = {
+    blings: ["gold", "silver", "bronze"],
+    numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
+    states: {
+        filled: ["danger", "muted"],
+        other: ["info", "warning"],
+    },
+    users: ["admin", "moderator", "staff"],
+};
+
+describe("badge", () => {
+    // Award badges (Default/badge counts)
+    variants.blings.map((bling) => {
+        runComponentTests({
+            type: "a11y",
+            baseClass: "s-badge",
+            variants: [bling],
+            children: {
+                default: `<span class="s-award-bling s-award-bling__${bling}">
+                    Altruist
+                </span>`,
+            },
+            tag: "span",
+        });
+    });
+
+    // Number counts
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-badge",
+        variants: variants.numbers,
+        children: {
+            default: "123",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        tag: "span",
+        skippedTestids: [
+            "s-badge-dark-answered", // TODO remove when contrast bugs are fixed
+            "s-badge-dark-important", // TODO remove when contrast bugs are fixed
+            "s-badge-dark-rep-down", // TODO remove when contrast bugs are fixed
+            "s-badge-light-answered", // TODO remove when contrast bugs are fixed
+            "s-badge-light-rep", // TODO remove when contrast bugs are fixed
+        ],
+    });
+
+    // Icon badges
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-badge",
+        variants: [...variants.states.filled, ...variants.states.other],
+        modifiers: {
+            primary: ["icon"],
+        },
+        children: {
+            default: "with icon",
+            //     icon: Icons.IconEyeSm,  // TODO fix the icon imports
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        tag: "span",
+    });
+
+    // Filled badges
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-badge",
+        variants: variants.states.filled,
+        modifiers: {
+            primary: ["icon"],
+        },
+        children: {
+            default: "filled",
+            //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+            includeNullVariant: false,
+        },
+        tag: "span",
+    });
+
+    // User badges
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-badge",
+        variants: variants.users,
+        modifiers: {
+            primary: ["xs", "sm"],
+        },
+        children: {
+            default: "user",
+        },
+        tag: "span",
+        skippedTestids: [
+            /^s-badge-dark-admin.*/, // TODO remove when contrast bugs are fixed
+        ],
+    });
+
+    // Sizes
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-badge",
+        modifiers: {
+            primary: ["xs", "sm"],
+        },
+        children: {
+            default: "size badge",
+        },
+        tag: "span",
+    });
+});

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

@@ -0,0 +1,128 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+// import { Icons } from "@stackoverflow/stacks-icons";
+import "../../index";
+import { html } from "@open-wc/testing";
+
+const variants = {
+    blings: ["gold", "silver", "bronze"],
+    numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
+    states: {
+        filled: ["danger", "muted"],
+        other: ["info", "warning"],
+    },
+    users: ["admin", "moderator", "staff"],
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div
+        class="d-inline-flex ai-center jc-center hs1 ws1 p8"
+        data-testid="${testid}"
+    >
+        ${component}
+    </div>
+`;
+
+describe("badge", () => {
+    // Award badges (Default/badge counts)
+    variants.blings.map((bling) => {
+        runComponentTests({
+            type: "visual",
+            baseClass: "s-badge",
+            variants: [bling],
+            children: {
+                default: `<span class="s-award-bling s-award-bling__${bling}">
+                    Altruist
+                </span>`,
+            },
+            tag: "span",
+            template,
+        });
+    });
+
+    // Number counts
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        variants: variants.numbers,
+        children: {
+            default: "123",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        tag: "span",
+        template,
+    });
+
+    // Icon badges
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        variants: [...variants.states.filled, ...variants.states.other],
+        modifiers: {
+            primary: ["icon"],
+        },
+        children: {
+            default: "with icon",
+            //     icon: Icons.IconEyeSm,  // TODO fix the icon imports
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        tag: "span",
+        template,
+    });
+
+    // Filled badges
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        variants: variants.states.filled,
+        modifiers: {
+            primary: ["icon"],
+        },
+        children: {
+            default: "filled",
+            //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+            includeNullVariant: false,
+        },
+        tag: "span",
+        template,
+    });
+
+    // User badges
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        variants: variants.users,
+        modifiers: {
+            primary: ["xs", "sm"],
+        },
+        children: {
+            default: "user badge",
+        },
+        tag: "span",
+        template,
+    });
+
+    // Sizes
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        modifiers: {
+            primary: ["xs", "sm"],
+        },
+        children: {
+            default: "size badge",
+        },
+        tag: "span",
+        template,
+    });
+});

package/lib/components/check-control/check-control.a11y.test.ts

@@ -0,0 +1,40 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+["checkbox", "radio"].forEach((type) => {
+    describe("s-check-control", () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "a11y",
+                baseClass: "s-check-control",
+                modifiers: {
+                    global: ["has-warning", "has-error", "has-success"],
+                },
+                children: {
+                    default: `
+                        <input
+                            class="s-${type}"
+                            type="${type}"
+                            id="test-input"
+                            name=""
+                            ${state === "checked" ? "checked" : ""}/>
+                        <label class="s-label" for="test-input">
+                            Label ${type}
+                            <p class="s-input-message">Description</p>
+                        </label>
+                    `,
+                },
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: `${state}-${type}`,
+                },
+                // TODO remove when contrast bugs are fixed
+                skippedTestids: [
+                    /^s-check-control-dark-has-error-(checked|unchecked)-(checkbox|radio)$/,
+                    /^s-check-control-light-has-(success|warning)-(checked|unchecked)-(checkbox|radio)$/,
+                ],
+            });
+        });
+    });
+});

package/lib/components/check-control/check-control.visual.test.ts

@@ -0,0 +1,38 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+["checkbox", "radio"].forEach((type) => {
+    describe("s-check-control", () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "visual",
+                baseClass: "s-check-control",
+                modifiers: {
+                    global: ["has-warning", "has-error", "has-success"],
+                },
+                attributes: {
+                    class: "bg-black-100 hs1 ws2 p8",
+                },
+                children: {
+                    default: `
+                        <input
+                            class="s-${type}"
+                            type="${type}"
+                            id="test-input"
+                            name=""
+                            ${state === "checked" ? "checked" : ""}/>
+                        <label class="s-label" for="test-input">
+                            Label ${type}
+                            <p class="s-input-message">Description</p>
+                        </label>
+                    `,
+                },
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: `${state}-${type}`,
+                },
+            });
+        });
+    });
+});

package/lib/components/check-group/check-group.a11y.test.ts

@@ -0,0 +1,51 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+type CheckGroup = "checkbox" | "radio";
+const checkTypes: CheckGroup[] = ["checkbox", "radio"];
+
+checkTypes.forEach((type) => {
+    describe("s-check-group", () => {
+        const checkEls: {
+            type: CheckGroup;
+            id: string;
+            state?: "checked" | "unchecked" | "indeterminate";
+        }[] = [
+            { type, id: `test-${type}1`, state: "checked" },
+            { type, id: `test-${type}2` },
+        ];
+        runComponentTests({
+            type: "a11y",
+            tag: "fieldset",
+            baseClass: "s-check-group",
+            variants: ["horizontal"],
+            children: {
+                default: `
+                    <legend class="s-label">${type} group</legend>
+                    ${checkEls
+                        .map(
+                            ({ type, state, id }, index) => `
+                        <div class="s-check-control">
+                            <input
+                                class="s-${type}"
+                                type="${type}"
+                                id="${id}-${index}"
+                                name=""
+                                ${state === "checked" ? "checked" : ""}/>
+                            <label class="s-label" for="${id}-${index}">
+                                ${type} label ${index}
+                                <p class="s-input-message">Description</p>
+                            </label>
+                        </div>
+                    `
+                        )
+                        .join("")}
+                `,
+            },
+            options: {
+                ...defaultOptions,
+                testidSuffix: type,
+            },
+        });
+    });
+});

package/lib/components/check-group/check-group.visual.test.ts

@@ -0,0 +1,58 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+type CheckGroup = "checkbox" | "radio";
+const checkTypes: CheckGroup[] = ["checkbox", "radio"];
+
+// Account for horizontal variant
+[true, false].forEach((isHorizontal) => {
+    checkTypes.forEach((type) => {
+        describe("s-check-group", () => {
+            const checkEls: {
+                type: CheckGroup;
+                id: string;
+                state?: "checked" | "unchecked" | "indeterminate";
+            }[] = [
+                { type, id: `test-${type}1`, state: "checked" },
+                { type, id: `test-${type}2` },
+            ];
+            runComponentTests({
+                type: "visual",
+                tag: "fieldset",
+                baseClass: "s-check-group",
+                attributes: {
+                    class: isHorizontal ? "hs1 ws3 p8" : "hs2 ws2 p8",
+                },
+                variants: isHorizontal ? ["horizontal"] : [],
+                children: {
+                    default: `
+                        <legend class="s-label">${type} group</legend>
+                        ${checkEls
+                            .map(
+                                ({ type, state, id }, index) => `
+                            <div class="s-check-control">
+                                <input
+                                    class="s-${type}"
+                                    type="${type}"
+                                    id="${id}-${index}"
+                                    name=""
+                                    ${state === "checked" ? "checked" : ""}/>
+                                <label class="s-label" for="${id}-${index}">
+                                    ${type} label ${index}
+                                    <p class="s-input-message">Description</p>
+                                </label>
+                            </div>
+                        `
+                            )
+                            .join("")}
+                    `,
+                },
+                options: {
+                    ...defaultOptions,
+                    includeNullVariant: !isHorizontal,
+                    testidSuffix: type,
+                },
+            });
+        });
+    });
+});

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

@@ -0,0 +1,39 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const checkboxTemplate = ({ component, testid, id }: any) =>
+    html` <div class="s-check-control" data-testid="${testid}">
+        ${component}
+        <label class="s-label" for="${id}">Label</label>
+    </div>`;
+
+["checkbox", "radio"].forEach((type) => {
+    describe(type, () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "a11y",
+                tag: "input",
+                baseClass: `s-${type}`,
+                attributes: {
+                    name: "test-name",
+                    id: "test-id",
+                    type,
+                    ...(state === "checked" ? { checked: "checked" } : {}),
+                },
+                template: ({ component, testid }) =>
+                    checkboxTemplate({
+                        component,
+                        testid,
+                        id: "test-id",
+                    }),
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: state,
+                },
+            });
+        });
+    });
+});

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

@@ -0,0 +1,35 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const checkboxTemplate = ({ component, testid }: any) =>
+    html`<div
+        class="d-inline-flex ai-center jc-center bg-black-100 hs1 ws1 p8"
+        data-testid="${testid}"
+    >
+        ${component}
+    </div>`;
+
+["checkbox", "radio"].forEach((type) => {
+    describe(type, () => {
+        // TODO include indeterminate
+        ["checked", "unchecked"].forEach((state) => {
+            runComponentTests({
+                type: "visual",
+                tag: "input",
+                baseClass: `s-${type}`,
+                attributes: {
+                    type,
+                    ...(state === "checked" ? { checked: "checked" } : {}),
+                },
+                template: ({ component, testid }) =>
+                    checkboxTemplate({ component, testid }),
+                options: {
+                    ...defaultOptions,
+                    testidSuffix: state,
+                },
+            });
+        });
+    });
+});

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

@@ -0,0 +1,30 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// account for parent with `.is-disabled` class
+[true, false].forEach((isDisabled) => {
+    describe("description", () => {
+        runComponentTests({
+            type: "a11y",
+            tag: "p",
+            baseClass: "s-description",
+            children: {
+                default: `Describes the site in the product, emails, integrations, and logs.`,
+            },
+            options: {
+                ...defaultOptions,
+                testidSuffix: isDisabled ? "is-disabled" : "",
+            },
+            template: ({ component, testid }) => html`
+                <div
+                    class="${isDisabled ? "is-disabled" : ""}"
+                    data-testid="${testid}"
+                >
+                    ${component}
+                </div>
+            `,
+            skippedTestids: [/^.*-is-disabled$/],
+        });
+    });
+});

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

@@ -0,0 +1,30 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// account for parent with `.is-disabled` class
+[true, false].forEach((isDisabled) => {
+    describe("description", () => {
+        runComponentTests({
+            type: "visual",
+            tag: "p",
+            baseClass: "s-description",
+            children: {
+                default: `Describes the site in the product, emails, integrations, and logs.`,
+            },
+            options: {
+                ...defaultOptions,
+                testidSuffix: isDisabled ? "is-disabled" : "",
+            },
+            template: ({ component, testid }) => html`
+                <div
+                    class="bg-black-100 d-inline-flex ai-center jc-center hs1 ws2 p8
+                    ${isDisabled ? "is-disabled" : ""}"
+                    data-testid="${testid}"
+                >
+                    ${component}
+                </div>
+            `,
+        });
+    });
+});

package/lib/components/toggle-switch/toggle-switch.a11y.test.ts

@@ -0,0 +1,73 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("toggle-switch", () => {
+    // Single toggle switch
+    [true, false].forEach((checked) => {
+        [true, false].forEach((disabled) => {
+            const idSuffix = `${checked ? "-checked" : ""}${
+                disabled ? "-disabled" : ""
+            }`;
+            const id = `toggle-switch${idSuffix}`;
+
+            runComponentTests({
+                type: "a11y",
+                baseClass: "s-toggle-switch",
+                modifiers: {
+                    global: idSuffix ? [idSuffix.substring(1)] : [], // for proper testid generation
+                },
+                tag: "input",
+                attributes: {
+                    id,
+                    type: "checkbox",
+                    ...(checked ? { checked: "" } : {}),
+                    ...(disabled ? { disabled: "" } : {}),
+                },
+                template: ({ component, testid }) => html`
+                    <div data-testid="${testid}">
+                        <label for="${id}">toggle</label>
+                        ${component}
+                    </div>
+                `,
+            });
+        });
+    });
+
+    // Multiple toggle switch variant
+    [true, false].forEach((offChecked) => {
+        runComponentTests({
+            type: "a11y",
+            baseClass: "s-toggle-switch",
+            variants: ["multiple"],
+            modifiers: {
+                global: offChecked ? ["off"] : [], // for proper testid generation
+            },
+            children: {
+                default: `
+                    <input type="radio" name="group" id="four" ${
+                        offChecked ? 'checked=""' : ""
+                    }>
+                    <label for="four" class="s-toggle-switch--label-off">Off</label>
+                    <input type="radio" name="group" id="one" ${
+                        !offChecked ? 'checked=""' : ""
+                    }>
+                    <label for="one">one</label>
+                    <input type="radio" name="group" id="two">
+                    <label for="two">two</label>
+                `,
+            },
+            options: {
+                ...defaultOptions,
+                includeNullVariant: false,
+            },
+            template: ({ component, testid }) => html`
+                <div data-testid="${testid}">${component}</div>
+            `,
+            skippedTestids: [
+                "s-toggle-switch-dark-multiple", // TODO fix contrast issue
+                "s-toggle-switch-light-multiple", // TODO fix contrast issue
+            ],
+        });
+    });
+});

package/lib/components/toggle-switch/toggle-switch.less

@@ -5,7 +5,8 @@
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-500);
 
-    fieldset[disabled] & {
+    fieldset[disabled] &,
+    &[disabled] {
         &,
         & label {
             cursor: not-allowed;