@stackoverflow/stacks 2.1.0 → 2.1.1

package/lib/components/button/button.less

@@ -412,7 +412,7 @@
         .focus-styles(true, true);
     }
 
-    &:not(&__link):not(&__unset)&:not(&__facebook):not(&__github):not(&__google):not(.is-selected):focus-visible,
+    &:not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google):not(.is-selected):focus-visible,
     &--radio:focus-visible + & {
         &,
         &.s-btn__filled {
@@ -425,17 +425,30 @@
         }
     }
 
-    &:not(&__link):not(&__unset)&:not(&__facebook):not(&__github):not(&__google):not(.is-selected) {
+    &:not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google):not(.is-selected) {
         &:hover {
             &.s-btn__filled {
                 background-color: var(--_bu-filled-bg-hover);
                 border-color: var(--_bu-filled-bc-hover);
                 color: var(--_bu-filled-fc-hover);
             }
+
             &:not(.s-btn__outlined) {
                 border-color: var(--_bu-bc-hover);
             }
 
+            &:visited:not(:hover):not(:focus) {
+                &.s-btn__filled {
+                    background-color: var(--_bu-filled-bg);
+                    border-color: var(--_bu-filled-bc);
+                    color: var(--_bu-filled-fc);
+                }
+
+                background-color: var(--_bu-bg);
+                border-color: var(--_bu-bc);
+                color: var(--_bu-fc);
+            }
+
             background-color: var(--_bu-bg-hover);
             color: var(--_bu-fc-hover);
         }
@@ -453,19 +466,6 @@
         }
     }
 
-
-    &:visited:not(:hover):not(:focus) {
-        &.s-btn__filled {
-            background-color: var(--_bu-filled-bg);
-            border-color: var(--_bu-filled-bc);
-            color: var(--_bu-filled-fc);
-        }
-
-        background-color: var(--_bu-bg);
-        border-color: var(--_bu-bc);
-        color: var(--_bu-fc);
-    }
-
     background-color: var(--_bu-bg, inherit); // [1]
     border: var(--_bu-baw) solid var(--_bu-bc);
     border-radius: var(--_bu-br);

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

@@ -0,0 +1,81 @@
+import { html } from "@open-wc/testing";
+import { runA11yTests } from "../../test/a11y-test-utils";
+import "../../index";
+
+const modifiers = [
+    {
+        name: "error",
+        parentClasses: "has-error",
+    },
+    {
+        name: "success",
+        parentClasses: "has-success",
+    },
+    {
+        name: "warning",
+        parentClasses: "has-warning",
+    },
+    {
+        name: "disabled",
+        parentClasses: "is-disabled",
+    },
+    {
+        name: "readonly",
+        parentClasses: "is-readonly",
+    },
+    {
+        name: "creditcard",
+        modifier: "creditcard",
+        inputClasses: "s-input__creditcard",
+    },
+    {
+        name: "search",
+        modifier: "search",
+        inputClasses: "s-input__search",
+    },
+];
+
+const getSvgPath = (name: string) => {
+    switch (name) {
+        case "creditcard":
+            return '<path d="M3 3h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2Zm0 6v4h12V9H3Zm0-3h12V5H3v1Z"></path>';
+        case "search":
+            return '<path d="m18 16.5-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0Z"></path>';
+        default:
+            return '<path d="M9.06 3C4 3 1 9 1 9s3 6 8.06 6C14 15 17 9 17 9s-3-6-7.94-6ZM9 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2Z"></path>'; // eye icon path
+    }
+};
+
+describe("input-icon", () => {
+    modifiers.forEach(({ name, parentClasses, modifier }) => {
+        runA11yTests({
+            baseClass: `s-input-icon`,
+            tag: "svg",
+            children: {
+                [name]: getSvgPath(name), // IconSearch
+            },
+            modifiers: {
+                standalone: modifier ? [`${modifier}`] : [],
+                global: parentClasses ? [`parent-${parentClasses}`] : [],
+            },
+            attributes: {
+                "aria-hidden": "true",
+                "width": "18",
+                "height": "18",
+                "viewBox": "0 0 18 18",
+            },
+            template: ({ component, testid }) => html`
+                <div
+                    data-testid="${testid}"
+                    class="d-flex fd-column g4 fc-black ps-relative wmx2 p8 ${parentClasses ??
+                    ""}"
+                >
+                    <div class="d-flex ps-relative svg-icon">${component}</div>
+                </div>
+            `,
+            options: {
+                includeNullModifier: false,
+            },
+        });
+    });
+});

package/lib/components/input-icon/input-icon.visual.test.ts

@@ -0,0 +1,92 @@
+import { html } from "@open-wc/testing";
+import { runVisualTests } from "../../test/visual-test-utils";
+import "../../index";
+
+const modifiers = [
+    {
+        name: "error",
+        parentClasses: "has-error",
+    },
+    {
+        name: "success",
+        parentClasses: "has-success",
+    },
+    {
+        name: "warning",
+        parentClasses: "has-warning",
+    },
+    {
+        name: "disabled",
+        parentClasses: "is-disabled",
+    },
+    {
+        name: "readonly",
+        parentClasses: "is-readonly",
+    },
+    {
+        name: "creditcard",
+        modifier: "creditcard",
+        inputClasses: "s-input__creditcard",
+    },
+    {
+        name: "search",
+        modifier: "search",
+        inputClasses: "s-input__search",
+    },
+];
+
+const getSvgPath = (name: string) => {
+    switch (name) {
+        case "creditcard":
+            return '<path d="M3 3h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2Zm0 6v4h12V9H3Zm0-3h12V5H3v1Z"></path>';
+        case "search":
+            return '<path d="m18 16.5-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0Z"></path>';
+        default:
+            return '<path d="M9.06 3C4 3 1 9 1 9s3 6 8.06 6C14 15 17 9 17 9s-3-6-7.94-6ZM9 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2Z"></path>'; // eye icon path
+    }
+};
+
+describe("input-icon", () => {
+    modifiers.forEach(({ name, parentClasses, modifier, inputClasses }) => {
+        runVisualTests({
+            baseClass: `s-input-icon`,
+            tag: "svg",
+            children: {
+                [name]: getSvgPath(name), // IconSearch
+            },
+            modifiers: {
+                standalone: modifier ? [`${modifier}`] : [],
+                global: parentClasses ? [`parent-${parentClasses}`] : [],
+            },
+            attributes: {
+                "aria-hidden": "true",
+                "width": "18",
+                "height": "18",
+                "viewBox": "0 0 18 18",
+            },
+            template: ({ component, testid }) => html`
+                <div
+                    data-testid="${testid}"
+                    class="d-flex fd-column g4 fc-black ps-relative wmx2 p8 ${parentClasses ??
+                    ""}"
+                >
+                    <label class="s-label v-visible-sr" for="ex-input"
+                        >Input</label
+                    >
+                    <div class="d-flex ps-relative svg-icon">
+                        <input
+                            id="ex-input"
+                            type="text"
+                            class="s-input ${inputClasses ?? ""}"
+                            placeholder="${name} input…"
+                        />
+                        ${component}
+                    </div>
+                </div>
+            `,
+            options: {
+                includeNullModifier: false,
+            },
+        });
+    });
+});

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

@@ -0,0 +1,72 @@
+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 template = ({ component, testid, className }: any) => html`
+    <div class="d-inline-flex p8 ${className}" data-testid="${testid}">
+        ${component}
+    </div>
+`;
+
+const child = (attr?: string): string => {
+    return `
+    <label for="select-menu">Transportation method</label>
+    <select id="select-menu" ${attr}>
+        <option value="" selected>Please select one…</option>
+        <option value="walk">Walk</option>
+        <option value="bike">Bicycle</option>
+        <option value="car">Automobile</option>
+        <option value="rail">Train</option>
+        <option value="fly">Plane</option>
+    </select>`;
+};
+
+describe("select", () => {
+    // default, sizes
+    runA11yTests({
+        baseClass: "s-select",
+        modifiers: {
+            primary: ["sm", "md", "lg", "xl"],
+        },
+        children: {
+            default: child(),
+        },
+        template,
+    });
+
+    // modifier classes
+    [
+        {
+            class: "is-disabled",
+            attr: 'disabled=""',
+        },
+        {
+            class: "is-readonly",
+            attr: 'readonly=""',
+        },
+        {
+            class: "has-success",
+        },
+        {
+            class: "has-error",
+        },
+        {
+            class: "has-warning",
+        },
+    ].forEach((state) => {
+        runA11yTests({
+            baseClass: `s-select state-${state.class}`,
+            children: {
+                default: child(state.attr),
+            },
+            template: ({ component, testid }) =>
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                template({ component, testid, className: state.class }),
+            options: {
+                includeNullModifier: false,
+            },
+            skippedTestids: [/readonly/], // Skipping readonly since it doesn't need to meet APCA contrast minimums
+        });
+    });
+});

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

@@ -0,0 +1,72 @@
+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, className }: any) => html`
+    <div class="d-inline-flex p8 ${className}" data-testid="${testid}">
+        ${component}
+    </div>
+`;
+
+const child = (attr?: string): string => {
+    return `<select id="select-menu" ${attr}>
+        <option value="" selected>Please select one…</option>
+        <option value="walk">Walk</option>
+        <option value="bike">Bicycle</option>
+        <option value="car">Automobile</option>
+        <option value="rail">Train</option>
+        <option value="fly">Plane</option>
+    </select>`;
+};
+
+describe("select", () => {
+    // default, sizes
+    runVisualTests({
+        baseClass: "s-select",
+        modifiers: {
+            primary: ["sm", "md", "lg", "xl"],
+        },
+        children: {
+            default: child(),
+        },
+        template,
+    });
+
+    // modifier classes
+    [
+        {
+            class: "is-disabled",
+            attr: 'disabled=""',
+        },
+        {
+            class: "is-readonly",
+            attr: 'readonly=""',
+        },
+        {
+            class: "has-success",
+        },
+        {
+            class: "has-error",
+        },
+        {
+            class: "has-warning",
+        },
+    ].forEach((state) => {
+        runVisualTests({
+            baseClass: "s-select",
+            modifiers: {
+                global: [`state-${state.class}`],
+            },
+            children: {
+                selected: child(state.attr),
+            },
+            template: ({ component, testid }) =>
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                template({ component, testid, className: state.class }),
+            options: {
+                includeNullModifier: false,
+            },
+        });
+    });
+});

package/lib/test/test-utils.ts

@@ -215,10 +215,14 @@ const generatePrimitiveVariations = ({
                         : modifiers.primary
                     : [""];
                 const secondaryModifiers = modifiers?.secondary
-                    ? ["", ...(<[]>modifiers.secondary)]
+                    ? opts.includeNullModifier
+                        ? ["", ...(<[]>modifiers.secondary)]
+                        : modifiers.secondary
                     : [""];
                 const globalModifiers = modifiers?.global
-                    ? ["", ...(<[]>modifiers.global)]
+                    ? opts.includeNullModifier
+                        ? ["", ...(<[]>modifiers.global)]
+                        : modifiers.global
                     : [""];
 
                 primaryModifiers.forEach((primaryModifier) => {

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.1.0",
+    "version": "2.1.1",
     "files": [
         "dist",
         "lib"
@@ -47,7 +47,7 @@
         "@open-wc/testing": "^4.0.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-replace": "^5.0.5",
-        "@stackoverflow/stacks-editor": "^0.9.1",
+        "@stackoverflow/stacks-editor": "^0.10.0",
         "@stackoverflow/stacks-icons": "^6.0.0",
         "@testing-library/dom": "^9.3.4",
         "@testing-library/user-event": "^14.5.2",
@@ -56,7 +56,7 @@
         "@types/mocha": "^10.0.6",
         "@typescript-eslint/eslint-plugin": "^6.20.0",
         "@typescript-eslint/parser": "^6.21.0",
-        "@web/dev-server-esbuild": "^1.0.1",
+        "@web/dev-server-esbuild": "^1.0.2",
         "@web/dev-server-rollup": "^0.6.1",
         "@web/test-runner": "^0.18.0",
         "@web/test-runner-playwright": "^0.11.0",
@@ -77,12 +77,12 @@
         "less-loader": "^12.2.0",
         "list.js": "^2.3.1",
         "markdown-it": "^14.0.0",
-        "mini-css-extract-plugin": "^2.7.7",
+        "mini-css-extract-plugin": "^2.8.0",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^8.0.0",
         "prettier": "^3.2.4",
         "rollup-plugin-postcss": "^4.0.2",
-        "stylelint": "^16.2.0",
+        "stylelint": "^16.2.1",
         "stylelint-config-recommended": "^14.0.0",
         "stylelint-config-standard": "^36.0.0",
         "terser-webpack-plugin": "^5.3.10",