@stackoverflow/stacks 1.8.0 → 1.9.1

package/lib/{css/base → base}/reset.less

@@ -1,20 +1,20 @@
-// the default CSS reset is normalize.css; other possibilities are the Eric Meyer reset, and no reset at all.
-
-#stacks-internals() {
-    #include-css-reset(meyer) {
-        @import "reset-meyer.less";
-    }
-    #include-css-reset(normalize) {
-        @import "reset-normalize.less";
-    }
-    /* stylelint-disable block-no-empty */
-    #include-css-reset(none) {
-    }
-    /* stylelint-enable */
-}
-
-& {
-    #stacks-internals #load-static-config();
-    #stacks-internals #include-css-reset(@css-reset);
-}
-
+// the default CSS reset is normalize.css; other possibilities are the Eric Meyer reset, and no reset at all.
+
+#stacks-internals() {
+    #include-css-reset(meyer) {
+        @import "reset-meyer.less";
+    }
+    #include-css-reset(normalize) {
+        @import "reset-normalize.less";
+    }
+    /* stylelint-disable block-no-empty */
+    #include-css-reset(none) {
+    }
+    /* stylelint-enable */
+}
+
+& {
+    #stacks-internals #load-static-config();
+    #stacks-internals #include-css-reset(@css-reset);
+}
+

package/lib/components/activity-indicator/activity-indicator.a11y.test.ts

@@ -0,0 +1,21 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("activity-indicator", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-activity-indicator",
+        variants: ["danger", "success", "warning"],
+        children: {
+            default: `<div class="v-visible-sr">New activity</div>`,
+            new: `new<div class="v-visible-sr">New activity</div>`,
+        },
+        skippedTestids: [
+            "s-activity-indicator-dark-new", // TODO fix contrast issue
+            "s-activity-indicator-dark-success-new", // TODO fix contrast issue
+            "s-activity-indicator-dark-warning-new", // TODO fix contrast issue
+            "s-activity-indicator-light-success-new", // TODO fix contrast issue
+            "s-activity-indicator-light-warning-new", // TODO fix contrast issue
+        ],
+    });
+});

package/lib/{css/components → components/activity-indicator}/activity-indicator.less

@@ -1,40 +1,40 @@
-.s-activity-indicator {
-    --_ai-focus-ring: var(--focus-ring);
-    --_ai-bg: var(--theme-secondary-400);
-    --_ai-fc: @white;
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        --_ai-fc: var(--white);
-    });
-
-    // VARIANTS
-    &&__danger {
-        --_ai-bg: var(--red-500);
-        --_ai-focus-ring: var(--focus-ring-error);
-    }
-
-    &&__success {
-        --_ai-bg: var(--green-500);
-        --_ai-focus-ring: var(--focus-ring-success);
-    }
-
-    &&__warning {
-        --_ai-bg: var(--yellow-600);
-        --_ai-focus-ring: var(--focus-ring-warning);
-    }
-
-    background-color: var(--_ai-bg);
-    box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
-    color: var(--_ai-fc);
-
-    border-radius: 1000px;
-    display: inline-block;
-    font-size: var(--fs-fine);
-    font-weight: 600;
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    min-width: var(--su-static12);
-    min-height: var(--su-static12);
-    padding: var(--su2) var(--su4);
-    text-transform: uppercase;
-}
+.s-activity-indicator {
+    --_ai-focus-ring: var(--focus-ring);
+    --_ai-bg: var(--theme-secondary-400);
+    --_ai-fc: @white;
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        --_ai-fc: var(--white);
+    });
+
+    // VARIANTS
+    &&__danger {
+        --_ai-bg: var(--red-500);
+        --_ai-focus-ring: var(--focus-ring-error);
+    }
+
+    &&__success {
+        --_ai-bg: var(--green-500);
+        --_ai-focus-ring: var(--focus-ring-success);
+    }
+
+    &&__warning {
+        --_ai-bg: var(--yellow-600);
+        --_ai-focus-ring: var(--focus-ring-warning);
+    }
+
+    background-color: var(--_ai-bg);
+    box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
+    color: var(--_ai-fc);
+
+    border-radius: 1000px;
+    display: inline-block;
+    font-size: var(--fs-fine);
+    font-weight: 600;
+    line-height: 1.1; // Custom line-height to satisfy 1x screens
+    min-width: var(--su-static12);
+    min-height: var(--su-static12);
+    padding: var(--su2) var(--su4);
+    text-transform: uppercase;
+}

package/lib/components/activity-indicator/activity-indicator.visual.test.ts

@@ -0,0 +1,23 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("activity-indicator", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-activity-indicator",
+        variants: ["danger", "success", "warning"],
+        children: {
+            default: `<div class="v-visible-sr">New activity</div>`,
+            new: `new<div class="v-visible-sr">New activity</div>`,
+        },
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center hs1 ws1 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});

package/lib/{css/components/anchors.less → components/anchor/anchor.less}

@@ -1,61 +1,61 @@
-.s-anchors {
-    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
-    // --_an-a-fc
-    // --_an-a-fc-hover
-
-    // MODIFIERS
-    &&__underlined {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            text-decoration: underline;
-        }
-    }
-
-    // VARIANTS
-    &&__danger {
-        --_an-a-fc: var(--red-500);
-        --_an-a-fc-hover: var(--red-400);
-    }
-
-    &&__default {
-        --_an-a-fc: var(--theme-link-color);
-        --_an-a-fc-hover: var(--theme-link-color-hover);
-    }
-
-    &&__grayscale {
-        --_an-a-fc: var(--black-700);
-        --_an-a-fc-hover: var(--black-600);
-    }
-
-    &&__inherit {
-        --_an-a-fc: inherit;
-        --_an-a-fc-hover: inherit;
-    }
-
-    &&__muted {
-        --_an-a-fc: var(--black-500);
-        --_an-a-fc-hover: var(--black-400);
-    }
-
-    &&__danger,
-    &&__default,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            &:hover,
-            &:active {
-                &,
-                &:visited {
-                    color: var(--_an-a-fc-hover);
-                }
-            }
-
-            &,
-            &:visited {
-                color: var(--_an-a-fc, inherit);
-            }
-        }
-    }
-}
+.s-anchors {
+    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
+    // --_an-a-fc
+    // --_an-a-fc-hover
+
+    // MODIFIERS
+    &&__underlined {
+        a:not(.s-link),
+        .s-btn.s-btn__link {
+            text-decoration: underline;
+        }
+    }
+
+    // VARIANTS
+    &&__danger {
+        --_an-a-fc: var(--red-500);
+        --_an-a-fc-hover: var(--red-400);
+    }
+
+    &&__default {
+        --_an-a-fc: var(--theme-link-color);
+        --_an-a-fc-hover: var(--theme-link-color-hover);
+    }
+
+    &&__grayscale {
+        --_an-a-fc: var(--black-700);
+        --_an-a-fc-hover: var(--black-600);
+    }
+
+    &&__inherit {
+        --_an-a-fc: inherit;
+        --_an-a-fc-hover: inherit;
+    }
+
+    &&__muted {
+        --_an-a-fc: var(--black-500);
+        --_an-a-fc-hover: var(--black-400);
+    }
+
+    &&__danger,
+    &&__default,
+    &&__grayscale,
+    &&__inherit,
+    &&__muted {
+        a:not(.s-link),
+        .s-btn.s-btn__link {
+            &:hover,
+            &:active {
+                &,
+                &:visited {
+                    color: var(--_an-a-fc-hover);
+                }
+            }
+
+            &,
+            &:visited {
+                color: var(--_an-a-fc, inherit);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,36 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    const srEl = `<span class="v-visible-sr">Stack Overflow</span>`;
+    switch (child) {
+        case "image":
+            return `<img
+                class="s-avatar--image"
+                src="https://picsum.photos/id/1/48"
+                alt="team logo"
+            />${srEl}`;
+        case "letter":
+            return `<div
+                class="s-avatar--letter"
+                aria-hidden="true">
+                    S
+            </div>${srEl}`;
+        default:
+            return srEl;
+    }
+};
+
+describe("avatar", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-avatar",
+        variants: ["24", "32", "48", "64", "96", "128"],
+        children: {
+            default: getChild(),
+            image: getChild("image"),
+            letter: getChild("letter"),
+        },
+        tag: "span",
+    });
+});

package/lib/{css/components/avatars.less → components/avatar/avatar.less}

@@ -1,108 +1,108 @@
-.s-avatar {
-    --_av-size: var(--su-static16);
-    --_av-bg: @white; // Force a white background color for when we have transparent avatars
-    --_av-br: var(--br-sm);
-    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
-    --_av-scale-badge: 1;
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        .s-avatar--letter {
-            color: var(--white);
-        }
-
-        background-color: var(--black);
-        box-shadow: 0 0 0 1px var(--black);
-        color: var(--white);
-    });
-
-    // MODIFIERS
-    // Sizes
-    &&__32,
-    &&__48 {
-        --_av-br: var(--br-md);
-    }
-
-    &&__96,
-    &&__128 {
-        --_av-br: calc(var(--br-lg) + var(--br-sm));
-        --_av-scale-badge: 3;
-    }
-
-    &&__24 {
-        --_av-size: var(--su-static24);
-        --_av-fs-letter: var(--su-static16);
-        --_av-scale-badge: 1.1;
-    }
-
-    &&__32 {
-        --_av-size: var(--su-static32);
-        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
-        --_av-scale-badge: 1.3;
-    }
-
-    &&__48 {
-        --_av-size: var(--su-static48);
-        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
-        --_av-scale-badge: 1.6;
-    }
-
-    &&__64 {
-        --_av-size: var(--su-static64);
-        --_av-br: var(--br-lg);
-        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
-        --_av-scale-badge: 2.4;
-    }
-
-    &&__96 {
-        --_av-size: var(--su-static96);
-        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
-    }
-
-    &&__128 {
-        --_av-size: var(--su-static128);
-        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
-    }
-
-    // CHILD ELEMENTS
-    & &--badge {
-        bottom: calc(var(--su-static4) * -1); // -4px
-        position: absolute;
-        right: calc(var(--su-static4) * -1); // -4px
-        -webkit-transform: scale(var(--_av-scale-badge));
-        transform: scale(var(--_av-scale-badge));
-    }
-
-    & &--image {
-        border-radius: var(--_av-br);
-        display: block;
-        height: var(--_av-size);
-        width: var(--_av-size);
-    }
-
-    & &--letter {
-        color: @white; // Force a light appearance of text rendering
-        display: block; // Make sure we're treating the letter as a block-level element
-        font-size: var(--_av-fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
-        font-weight: bold;
-        line-height: 1.4; // Guards against some line-height trolling from the parent
-        text-align: center;
-        text-transform: uppercase; // Force uppercase in avatars when team name is lowercase
-        // We don't need text selection on our letter
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    background-color: var(--_av-bg); 
-    border-radius: var(--_av-br);
-    height: var(--_av-size);
-    width: var(--_av-size);
-
-    background-repeat: no-repeat;
-    background-size: 100%;
-    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
-    position: relative;
-    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
-}
+.s-avatar {
+    --_av-size: var(--su-static16);
+    --_av-bg: @white; // Force a white background color for when we have transparent avatars
+    --_av-br: var(--br-sm);
+    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
+    --_av-scale-badge: 1;
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        .s-avatar--letter {
+            color: var(--white);
+        }
+
+        background-color: var(--black);
+        box-shadow: 0 0 0 1px var(--black);
+        color: var(--white);
+    });
+
+    // MODIFIERS
+    // Sizes
+    &&__32,
+    &&__48 {
+        --_av-br: var(--br-md);
+    }
+
+    &&__96,
+    &&__128 {
+        --_av-br: calc(var(--br-lg) + var(--br-sm));
+        --_av-scale-badge: 3;
+    }
+
+    &&__24 {
+        --_av-size: var(--su-static24);
+        --_av-fs-letter: var(--su-static16);
+        --_av-scale-badge: 1.1;
+    }
+
+    &&__32 {
+        --_av-size: var(--su-static32);
+        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
+        --_av-scale-badge: 1.3;
+    }
+
+    &&__48 {
+        --_av-size: var(--su-static48);
+        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
+        --_av-scale-badge: 1.6;
+    }
+
+    &&__64 {
+        --_av-size: var(--su-static64);
+        --_av-br: var(--br-lg);
+        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
+        --_av-scale-badge: 2.4;
+    }
+
+    &&__96 {
+        --_av-size: var(--su-static96);
+        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
+    }
+
+    &&__128 {
+        --_av-size: var(--su-static128);
+        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
+    }
+
+    // CHILD ELEMENTS
+    & &--badge {
+        bottom: calc(var(--su-static4) * -1); // -4px
+        position: absolute;
+        right: calc(var(--su-static4) * -1); // -4px
+        -webkit-transform: scale(var(--_av-scale-badge));
+        transform: scale(var(--_av-scale-badge));
+    }
+
+    & &--image {
+        border-radius: var(--_av-br);
+        display: block;
+        height: var(--_av-size);
+        width: var(--_av-size);
+    }
+
+    & &--letter {
+        color: @white; // Force a light appearance of text rendering
+        display: block; // Make sure we're treating the letter as a block-level element
+        font-size: var(--_av-fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
+        font-weight: bold;
+        line-height: 1.4; // Guards against some line-height trolling from the parent
+        text-align: center;
+        text-transform: uppercase; // Force uppercase in avatars when team name is lowercase
+        // We don't need text selection on our letter
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    background-color: var(--_av-bg); 
+    border-radius: var(--_av-br);
+    height: var(--_av-size);
+    width: var(--_av-size);
+
+    background-repeat: no-repeat;
+    background-size: 100%;
+    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
+    position: relative;
+    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
+}

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

@@ -0,0 +1,54 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const base64Image =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF/3IA/////44y/8OS/+fU//Xs/6tn/9e2EhvbMQAABH9JREFUeNrs3e1y2ygAhWELJHH/d7zuJpN1XAnxoe408Ly/6xnnHXEOIEwfDwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gbAGEhrZl2VloY20PIk8tAzZbfkXA7eeuHyysVfdFMsXiY66ptiWF8Re05BdxF7HkBV7PUNW7FVx4E7sVSwrDjBw2+pC7NWwHtkTe3ULM7En9v6O2ONF7Ik9sSf2IPbEntgTexB7t8feTsynniD2Oh6tXex1hFoUe02kaxVi72JMZs+Rib0LLdkXFGLvaECWjkOxdxVmUex1rB6S2Kss2lcytSH2LnVkakPsXQ7E8xwTe5fuMrUh9vKj8CP4xN7lNOXc3mnwib1M2X7Z28VeS93mg0/sFZTG6WCMVSE51fqsYL4s9jpqQ+yV1caxErHXUxtir6c2xF5HbYRF7LXXhtjrqQ2x11MbYu9tLG4VtSH2empD7BUNxpPaSGKvPPh2sdcxX45i78baEHs18+X32hB7NfPl99oQex21MVHsxViaR8W1MU3s/XpMSvWF0tqYJfY+BmMq01dcG+scP6/6enTK9BW+1J0j9l5aYN0rP5BzM0XsbSUnAlpqY4LYezexFeRSbpslH3uDXdF64OG6est258PohXE8BK+7o6g29rJTQsPt1F3qK9qdTwMP2Wz2X1Vv0UvdbeQ53nl2Xesr2Z0Pww7Zs5lsafWW1MY+6JDNxv5/+kLb5/fXfzLirRdhKSGnr6A2tkGvJoxLGZnqva6NkAbdgA+pUN9a+QuWYYPu+98ee/W1/PJgoMG7lek7nW3UHiEdbKpcqu+kO2L9b4aG0rcWjt5jfWf2Z7kCeE891XtSG/O86A5d+tbZj1h0VW+c/ja90FG9uxMCFdWb/+SkZ1Oaq/d1vjzvXfvF+tLp+aiZT5S1Vm90lrFj02B3bW1d9X7T92u+7Aq9qk2D+Fob/v/Myu7YostC76xe9K966evfr5+7ekuXHVy1V6+R275pEMd3kPbGB+Syeod/8D7Sf41NBvPdMf7a4uXpaTGY0zd+4r0vDlKtwdPqHf/BOzzf8zQYqvRtcz54mXfUNUVyUL0T7AhcrBbKY/C36p1geVEy1y00+F3fBA9eKFxnlRXJa/XOcKxnqeF6Pv1VvTPc7RuXai6K5LN6Z9hQSUsb2Rh86pviUultaScTg/sMD15YeqmcT8/bFx1Foi/umk9P3hcMfqTenrabBT5j8DGTwHivwelOCTwNrnfJm/Ol2U0GZ74WdE+dBn9+Z/z2J9UZ7IjB7dZv8gPl9RRJIq89BiN57QZ38trn04G8k62E6xjcHuQ1D+JEXrvBnbz2+XQgr30+/SCveT69ktceg4m8doOBvDG/CXnkkTezvOXPQB555JFHHnnkkUceeeSRRx555JFHHnnkkWcnmTzyyCOPPPLII4888sgjjzzfhDzyyCOPPPL+9Ff+eyCPPPLII4888sgjjzzyyCOPPPLII4888sgDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPy//CPAAPiZOI3BPDFQAAAAAElFTkSuQmCC";
+
+const getChild = (child?: string): string => {
+    const srEl = `<span class="v-visible-sr">Stack Overflow</span>`;
+    switch (child) {
+        case "image":
+            return `<img
+                class="s-avatar--image"
+                src="${base64Image}"
+                alt="team logo"
+            />${srEl}`;
+        case "letter":
+            return `<div
+                class="s-avatar--letter"
+                aria-hidden="true">
+                    S
+            </div>${srEl}`;
+        default:
+            return srEl;
+    }
+};
+
+describe("avatar", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-avatar",
+        variants: ["24", "32", "48", "64", "96", "128"],
+        children: {
+            default: getChild(),
+            image: getChild("image"),
+            letter: getChild("letter"),
+        },
+        attributes: {
+            href: "#",
+        },
+        tag: "a",
+        template: ({ component, testid }) => html`
+            <div
+                data-testid="${testid}"
+                class="d-inline-flex ai-center jc-center hmn1 wmn1 p8"
+            >
+                ${component}
+            </div>
+        `,
+        skippedTestids: [
+            /-letter/, // TODO: resolve font-family thrashing issues
+        ],
+    });
+});

package/lib/components/award-bling/award-bling.a11y.test.ts

@@ -0,0 +1,17 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("award-bling", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-award-bling",
+        variants: ["gold", "silver", "bronze"],
+        children: {
+            default: `100 <div class="v-visible-sr">award</div>`,
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+});