@stackoverflow/stacks 2.1.0 → 2.2.0

package/lib/atomic/misc.less

@@ -1,3 +1,8 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/color-mixins.less";
+@import (reference) "../exports/constants-helpers.less";
+@import (reference) "../exports/mixins.less";
+
 //
 //  STACK OVERFLOW
 //  UTILITIES
@@ -78,6 +83,31 @@
     background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
 }
 
+// Focus styles
+.focus,
+.f\:focus:focus,
+.f\:focus:focus-within {
+    .focus-styles();
+}
+
+.focus-inset,
+.f\:focus-inset:focus,
+.f\:focus-inset:focus-within {
+    .focus-styles(true);
+}
+
+.focus-bordered,
+.f\:focus-bordered:focus,
+.f\:focus-bordered:focus-within {
+    .focus-styles(false, true);
+}
+
+.focus-inset-bordered,
+.f\:focus-inset-bordered:focus,
+.f\:focus-inset-bordered:focus-within {
+    .focus-styles(true, true);
+}
+
 //  ============================================================================
 //  $  OBJECT-FIT / OBJECT-POSITION
 //  ----------------------------------------------------------------------------

package/lib/atomic/misc.less.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../test/less-test-utils";
+
+describe("atomic: misc", () => {
+    it("should output all atomic css classes", async () => {
+        const css = await renderLess(`
+            @import "./lib/atomic/misc.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

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

@@ -1,28 +1,38 @@
 import { runA11yTests } from "../../test/a11y-test-utils";
-// import { Icons } from "@stackoverflow/stacks-icons";
+import { IconEyeSm } from "@stackoverflow/stacks-icons/icons";
 import "../../index";
 
 const variants = {
     blings: ["gold", "silver", "bronze"],
     numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
-    states: {
-        filled: ["danger", "muted"],
-        other: ["info", "warning"],
-    },
+    filled: ["danger", "muted"],
+    states: ["danger", "muted", "info", "new", "warning"],
     users: ["admin", "moderator", "staff"],
 };
 
 describe("badge", () => {
-    // Award badges (Default/badge counts)
+    // Base badge
+    runA11yTests({
+        baseClass: "s-badge",
+        children: {
+            default: `base badge`,
+        },
+        tag: "span",
+    });
+
+    // Award badges
     variants.blings.map((bling) => {
         runA11yTests({
             baseClass: "s-badge",
             variants: [bling],
             children: {
                 default: `<span class="s-award-bling s-award-bling__${bling}">
-                    Altruist
+                    with bling
                 </span>`,
             },
+            options: {
+                includeNullVariant: false,
+            },
             tag: "span",
         });
     });
@@ -34,22 +44,49 @@ describe("badge", () => {
         children: {
             default: "123",
         },
+        options: {
+            includeNullVariant: false,
+        },
+        tag: "span",
+    });
+
+    // State badges
+    runA11yTests({
+        baseClass: "s-badge",
+        variants: variants.states,
+        children: {
+            default: `badge`,
+        },
+        tag: "span",
+        skippedTestids: ["s-badge-dark-new"],
+    });
+
+    // State badges w/ filled modifier
+    runA11yTests({
+        baseClass: "s-badge",
+        variants: variants.filled,
+        modifiers: {
+            primary: ["filled"],
+        },
+        children: {
+            default: `filled badge`,
+        },
         options: {
             includeNullModifier: false,
         },
         tag: "span",
     });
 
-    // Icon badges
+    // State badges w/ filled modifier and icon
     runA11yTests({
         baseClass: "s-badge",
-        variants: [...variants.states.filled, ...variants.states.other],
+        variants: variants.filled,
         modifiers: {
-            primary: ["icon"],
+            primary: ["filled"],
+            secondary: ["icon"],
         },
         children: {
-            default: "with icon",
-            //     icon: Icons.IconEyeSm,  // TODO fix the icon imports
+            default: `${IconEyeSm} icon badge`,
         },
         options: {
             includeNullModifier: false,
@@ -57,20 +94,18 @@ describe("badge", () => {
         tag: "span",
     });
 
-    // Filled badges
+    // State badges w/ icon
     runA11yTests({
         baseClass: "s-badge",
-        variants: variants.states.filled,
+        variants: variants.states.filter((state) => state !== "new"),
         modifiers: {
             primary: ["icon"],
         },
         children: {
-            default: "filled",
-            //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
+            default: `${IconEyeSm} icon badge`,
         },
         options: {
             includeNullModifier: false,
-            includeNullVariant: false,
         },
         tag: "span",
     });
@@ -83,7 +118,10 @@ describe("badge", () => {
             primary: ["xs", "sm"],
         },
         children: {
-            default: "user",
+            default: "user badge",
+        },
+        options: {
+            includeNullVariant: false,
         },
         tag: "span",
     });
@@ -97,6 +135,9 @@ describe("badge", () => {
         children: {
             default: "size badge",
         },
+        options: {
+            includeNullModifier: false,
+        },
         tag: "span",
     });
 });

package/lib/components/badge/badge.less

@@ -4,10 +4,12 @@
     --_ba-bg: var(--black-150);
     --_ba-fc: var(--black-500);
     --_ba-fs: var(--fs-caption);
+    --_ba-fw: normal;
     --_ba-g: 0.3em;
     --_ba-lh: 2;
     --_ba-px: var(--su6);
     --_ba-py: 0;
+    --_ba-tt: unset;
     --_ba-wmn: 0;
 
     // CONTEXTUAL STYLES
@@ -26,6 +28,10 @@
         &__staff {
             --_ba-bc: currentColor;
         }
+
+        &__new {
+            --_ba-fc: var(--purple-600);
+        }
     });
 
     // MODIFIERS
@@ -208,6 +214,14 @@
         }
     }
 
+    &&__new {
+        --_ba-bc: var(--_ba-bg);
+        --_ba-bg: var(--purple-100);
+        --_ba-fc: var(--purple-400);
+        --_ba-fw: bold;
+        --_ba-tt: uppercase;
+    }
+
     // CHILD ELEMENTS
     &--image, // Included with no base class to account for usage in .s-progress__badge
     & &--image {
@@ -228,14 +242,15 @@
     color: var(--_ba-fc);
     font-size: var(--_ba-fs);
     gap: var(--_ba-g);
+    font-weight: var(--_ba-fw);
     line-height: var(--_ba-lh);
     min-width: var(--_ba-wmn);
     padding: var(--_ba-py) var(--_ba-px);
+    text-transform: var(--_ba-tt);
 
     align-items: center;
     border-radius: var(--br-sm);
     display: inline-flex;
-    font-weight: normal;
     justify-content: center;
     text-decoration: none;
     vertical-align: middle;

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

@@ -1,15 +1,13 @@
 import { runVisualTests } from "../../test/visual-test-utils";
-// import { Icons } from "@stackoverflow/stacks-icons";
+import { IconEyeSm } from "@stackoverflow/stacks-icons/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"],
-    },
+    filled: ["danger", "muted"],
+    states: ["danger", "muted", "info", "new", "warning"],
     users: ["admin", "moderator", "staff"],
 };
 
@@ -46,7 +44,6 @@ describe("badge", () => {
             },
             options: {
                 includeNullVariant: false,
-                includeNullModifier: false,
             },
             tag: "span",
             template,
@@ -62,22 +59,52 @@ describe("badge", () => {
         },
         options: {
             includeNullVariant: false,
+        },
+        tag: "span",
+        template,
+    });
+
+    // State badges
+    runVisualTests({
+        baseClass: "s-badge",
+        variants: variants.states,
+        children: {
+            default: `state badge`,
+        },
+        tag: "span",
+        options: {
+            includeNullVariant: false,
+        },
+        template,
+    });
+
+    // State badges w/ filled modifier
+    runVisualTests({
+        baseClass: "s-badge",
+        variants: variants.filled,
+        modifiers: {
+            primary: ["filled"],
+        },
+        children: {
+            default: `filled badge`,
+        },
+        options: {
             includeNullModifier: false,
         },
         tag: "span",
         template,
     });
 
-    // Icon badges
+    // State badges w/ filled modifier and icon
     runVisualTests({
         baseClass: "s-badge",
-        variants: [...variants.states.filled, ...variants.states.other],
+        variants: variants.filled,
         modifiers: {
-            primary: ["icon"],
+            primary: ["filled"],
+            secondary: ["icon"],
         },
         children: {
-            default: "with icon",
-            //     icon: Icons.IconEyeSm,  // TODO fix the icon imports
+            default: `${IconEyeSm} icon badge`,
         },
         options: {
             includeNullModifier: false,
@@ -86,17 +113,18 @@ describe("badge", () => {
         template,
     });
 
-    // Filled badges
+    // State badges w/ icon
     runVisualTests({
         baseClass: "s-badge",
-        variants: variants.states.filled,
+        variants: variants.states.filter((state) => state !== "new"),
+        modifiers: {
+            primary: ["icon"],
+        },
         children: {
-            default: "filled",
-            //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
+            default: `${IconEyeSm} icon badge`,
         },
         options: {
             includeNullModifier: false,
-            includeNullVariant: false,
         },
         tag: "span",
         template,

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
+        });
+    });
+});