@stackoverflow/stacks 1.10.1 → 1.10.3

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

@@ -0,0 +1,160 @@
+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",
+            // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+            skippedTestids: [
+                "s-badge-dark",
+                "s-badge-dark-gold",
+                "s-badge-dark",
+                "s-badge-dark-silver",
+                "s-badge-dark",
+                "s-badge-dark-bronze",
+            ],
+        });
+    });
+
+    // Number counts
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-badge",
+        variants: variants.numbers,
+        children: {
+            default: "123",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        tag: "span",
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [
+            "s-badge-dark-answered",
+            "s-badge-dark-important",
+            "s-badge-dark-rep-down",
+            "s-badge-light-answered",
+            "s-badge-light-rep",
+            "s-badge-dark",
+            "s-badge-dark-bounty",
+            "s-badge-dark-rep",
+            "s-badge-dark-votes",
+            "s-badge-light-rep-down",
+        ],
+    });
+
+    // 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",
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [
+            "s-badge-dark-danger-icon",
+            "s-badge-dark-icon",
+            "s-badge-light-danger-icon",
+            "s-badge-light-warning-icon",
+        ],
+    });
+
+    // 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",
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [
+            "s-badge-dark-danger-icon",
+            "s-badge-light-danger-icon",
+        ],
+    });
+
+    // User badges
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-badge",
+        variants: variants.users,
+        modifiers: {
+            primary: ["xs", "sm"],
+        },
+        children: {
+            default: "user",
+        },
+        tag: "span",
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [
+            /^s-badge-dark-admin.*/,
+            "s-badge-dark",
+            "s-badge-dark-sm",
+            "s-badge-dark-xs",
+            "s-badge-light-admin",
+            "s-badge-light-admin-sm",
+            "s-badge-light-admin-xs",
+            "s-badge-light-staff",
+            "s-badge-light-staff-sm",
+            "s-badge-light-staff-xs",
+        ],
+    });
+
+    // Sizes
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-badge",
+        modifiers: {
+            primary: ["xs", "sm"],
+        },
+        children: {
+            default: "size badge",
+        },
+        tag: "span",
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: ["s-badge-dark", "s-badge-dark-sm", "s-badge-dark-xs"],
+    });
+});

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

@@ -0,0 +1,150 @@
+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", () => {
+    // Base badge
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        children: {
+            default: `base badge`,
+        },
+        tag: "span",
+        template,
+    });
+
+    // Award badges
+    variants.blings.map((bling) => {
+        runComponentTests({
+            type: "visual",
+            baseClass: "s-badge",
+            variants: [bling],
+            children: {
+                default: `<span class="s-award-bling s-award-bling__${bling}">
+                    with bling
+                </span>`,
+            },
+            options: {
+                ...defaultOptions,
+                includeNullVariant: false,
+                includeNullModifier: false,
+            },
+            tag: "span",
+            template,
+        });
+    });
+
+    // Number counts
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        variants: variants.numbers,
+        children: {
+            default: "123",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            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,
+        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",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+        tag: "span",
+        template,
+    });
+
+    // Sizes
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        modifiers: {
+            primary: ["xs", "sm"],
+        },
+        children: {
+            default: "size badge",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        tag: "span",
+        template,
+    });
+});

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

@@ -33,5 +33,19 @@ describe("banner", () => {
         children: {
             default: bannerChild,
         },
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [
+            "s-banner-dark",
+            "s-banner-dark-danger",
+            "s-banner-dark-danger-important",
+            "s-banner-dark-important",
+            "s-banner-dark-info",
+            "s-banner-dark-success",
+            "s-banner-dark-success-important",
+            "s-banner-dark-warning",
+            "s-banner-dark-warning-important",
+            "s-banner-light-success-important",
+            "s-banner-light-warning-important",
+        ],
     });
 });

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

@@ -23,6 +23,8 @@ describe("block-link", () => {
             default: `block link`,
         },
         template: blockLinkTemplate,
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: ["s-block-link-dark"],
     });
 
     // Base + danger
@@ -39,8 +41,12 @@ describe("block-link", () => {
             ...defaultOptions,
             includeNullModifier: false,
         },
-        skippedTestids: ["s-block-link-dark-danger"],
         template: blockLinkTemplate,
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [
+            "s-block-link-dark-danger",
+            "s-block-link-light-danger",
+        ],
     });
 
     // All left and rignt variants
@@ -58,12 +64,13 @@ describe("block-link", () => {
             ...defaultOptions,
             includeNullVariant: false,
         },
+        template: blockLinkTemplate,
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
         skippedTestids: [
             "s-block-link-dark-left-is-selected-danger",
             "s-block-link-dark-right-is-selected-danger",
             "s-block-link-light-left-is-selected-danger",
             "s-block-link-light-right-is-selected-danger",
         ],
-        template: blockLinkTemplate,
     });
 });

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

@@ -33,5 +33,7 @@ describe("breadcrumbs", () => {
                 ${component}
             </div>
         `,
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: ["s-breadcrumbs-dark", "s-breadcrumbs-light"],
     });
 });

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

@@ -25,8 +25,139 @@ describe("button", () => {
         excludedTestids: [
             /primary-outlined/, // This combination is not supported
         ],
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
         skippedTestids: [
-            /s-btn-dark/, // TODO remove when contrast bugs are fixed
+            "s-btn-light",
+            "s-btn-light-dropdown",
+            "s-btn-light-dropdown-is-loading",
+            "s-btn-light-icon",
+            "s-btn-light-icon-is-loading",
+            "s-btn-light-is-loading",
+            "s-btn-light-link",
+            "s-btn-light-muted-filled",
+            "s-btn-light-muted-filled-dropdown",
+            "s-btn-light-muted-filled-dropdown-is-loading",
+            "s-btn-light-muted-filled-icon",
+            "s-btn-light-muted-filled-icon-is-loading",
+            "s-btn-light-muted-filled-is-loading",
+            "s-btn-light-muted-filled-sm",
+            "s-btn-light-muted-filled-sm-is-loading",
+            "s-btn-light-muted-filled-xs",
+            "s-btn-light-muted-filled-xs-is-loading",
+            "s-btn-light-outlined",
+            "s-btn-light-outlined-dropdown",
+            "s-btn-light-outlined-dropdown-is-loading",
+            "s-btn-light-outlined-icon",
+            "s-btn-light-outlined-icon-is-loading",
+            "s-btn-light-outlined-is-loading",
+            "s-btn-light-outlined-sm",
+            "s-btn-light-outlined-sm-is-loading",
+            "s-btn-light-outlined-xs",
+            "s-btn-light-outlined-xs-is-loading",
+            "s-btn-light-sm",
+            "s-btn-light-sm-is-loading",
+            "s-btn-light-xs",
+            "s-btn-light-xs-is-loading",
+            "s-btn-dark",
+            "s-btn-dark-danger",
+            "s-btn-dark-danger-dropdown",
+            "s-btn-dark-danger-dropdown-is-loading",
+            "s-btn-dark-danger-icon",
+            "s-btn-dark-danger-icon-is-loading",
+            "s-btn-dark-danger-is-loading",
+            "s-btn-dark-danger-md",
+            "s-btn-dark-danger-md-is-loading",
+            "s-btn-dark-danger-outlined",
+            "s-btn-dark-danger-outlined-dropdown",
+            "s-btn-dark-danger-outlined-dropdown-is-loading",
+            "s-btn-dark-danger-outlined-icon",
+            "s-btn-dark-danger-outlined-icon-is-loading",
+            "s-btn-dark-danger-outlined-is-loading",
+            "s-btn-dark-danger-outlined-md",
+            "s-btn-dark-danger-outlined-md-is-loading",
+            "s-btn-dark-danger-outlined-sm",
+            "s-btn-dark-danger-outlined-sm-is-loading",
+            "s-btn-dark-danger-outlined-xs",
+            "s-btn-dark-danger-outlined-xs-is-loading",
+            "s-btn-dark-danger-sm",
+            "s-btn-dark-danger-sm-is-loading",
+            "s-btn-dark-danger-xs",
+            "s-btn-dark-danger-xs-is-loading",
+            "s-btn-dark-dropdown",
+            "s-btn-dark-dropdown-is-loading",
+            "s-btn-dark-filled",
+            "s-btn-dark-filled-dropdown",
+            "s-btn-dark-filled-dropdown-is-loading",
+            "s-btn-dark-filled-icon",
+            "s-btn-dark-filled-icon-is-loading",
+            "s-btn-dark-filled-is-loading",
+            "s-btn-dark-filled-sm",
+            "s-btn-dark-filled-sm-is-loading",
+            "s-btn-dark-filled-xs",
+            "s-btn-dark-filled-xs-is-loading",
+            "s-btn-dark-google",
+            "s-btn-dark-icon",
+            "s-btn-dark-icon-is-loading",
+            "s-btn-dark-is-loading",
+            "s-btn-dark-link",
+            "s-btn-dark-md",
+            "s-btn-dark-md-is-loading",
+            "s-btn-dark-muted",
+            "s-btn-dark-muted-dropdown",
+            "s-btn-dark-muted-dropdown-is-loading",
+            "s-btn-dark-muted-filled",
+            "s-btn-dark-muted-filled-dropdown",
+            "s-btn-dark-muted-filled-dropdown-is-loading",
+            "s-btn-dark-muted-filled-icon",
+            "s-btn-dark-muted-filled-icon-is-loading",
+            "s-btn-dark-muted-filled-is-loading",
+            "s-btn-dark-muted-filled-sm",
+            "s-btn-dark-muted-filled-sm-is-loading",
+            "s-btn-dark-muted-filled-xs",
+            "s-btn-dark-muted-filled-xs-is-loading",
+            "s-btn-dark-muted-icon",
+            "s-btn-dark-muted-icon-is-loading",
+            "s-btn-dark-muted-is-loading",
+            "s-btn-dark-muted-outlined",
+            "s-btn-dark-muted-outlined-dropdown",
+            "s-btn-dark-muted-outlined-dropdown-is-loading",
+            "s-btn-dark-muted-outlined-icon",
+            "s-btn-dark-muted-outlined-icon-is-loading",
+            "s-btn-dark-muted-outlined-is-loading",
+            "s-btn-dark-muted-outlined-sm",
+            "s-btn-dark-muted-outlined-sm-is-loading",
+            "s-btn-dark-muted-outlined-xs",
+            "s-btn-dark-muted-outlined-xs-is-loading",
+            "s-btn-dark-muted-sm",
+            "s-btn-dark-muted-sm-is-loading",
+            "s-btn-dark-muted-xs",
+            "s-btn-dark-muted-xs-is-loading",
+            "s-btn-dark-outlined",
+            "s-btn-dark-outlined-dropdown",
+            "s-btn-dark-outlined-dropdown-is-loading",
+            "s-btn-dark-outlined-icon",
+            "s-btn-dark-outlined-icon-is-loading",
+            "s-btn-dark-outlined-is-loading",
+            "s-btn-dark-outlined-md",
+            "s-btn-dark-outlined-md-is-loading",
+            "s-btn-dark-outlined-sm",
+            "s-btn-dark-outlined-sm-is-loading",
+            "s-btn-dark-outlined-xs",
+            "s-btn-dark-outlined-xs-is-loading",
+            "s-btn-dark-primary-filled",
+            "s-btn-dark-primary-filled-dropdown",
+            "s-btn-dark-primary-filled-dropdown-is-loading",
+            "s-btn-dark-primary-filled-icon",
+            "s-btn-dark-primary-filled-icon-is-loading",
+            "s-btn-dark-primary-filled-is-loading",
+            "s-btn-dark-primary-filled-sm",
+            "s-btn-dark-primary-filled-sm-is-loading",
+            "s-btn-dark-primary-filled-xs",
+            "s-btn-dark-primary-filled-xs-is-loading",
+            "s-btn-dark-sm",
+            "s-btn-dark-sm-is-loading",
+            "s-btn-dark-xs",
+            "s-btn-dark-xs-is-loading",
         ],
     });
 });

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

@@ -9,5 +9,11 @@ describe("card", () => {
         children: {
             default: `<p>This is a description of the card’s content.</p>`,
         },
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [
+            "s-card-dark-muted",
+            "s-card-light-muted",
+            "s-card-highcontrast-light-muted",
+        ],
     });
 });

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

@@ -0,0 +1,48 @@
+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: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+                skippedTestids: [
+                    /^s-check-control-dark-has-error-(checked|unchecked)-(checkbox|radio)$/,
+                    /^s-check-control-light-has-(success|warning)-(checked|unchecked)-(checkbox|radio)$/,
+                    "s-check-control-dark-has-success-checked-checkbox",
+                    "s-check-control-light-has-error-checked-checkbox",
+                    "s-check-control-dark-has-success-unchecked-checkbox",
+                    "s-check-control-light-has-error-unchecked-checkbox",
+                    "s-check-control-dark-has-success-checked-radio",
+                    "s-check-control-light-has-error-checked-radio",
+                    "s-check-control-dark-has-success-unchecked-radio",
+                    "s-check-control-light-has-error-unchecked-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,
+            },
+        });
+    });
+});