@stackoverflow/stacks 2.2.0 → 2.3.0

package/lib/components/button-group/button-group.less

@@ -2,82 +2,76 @@
     // CONTEXTUAL STYLES
     #stacks-internals #screen-sm({
         .s-btn {
+            --_bu-px: 0.4em;
+
             &.s-btn__dropdown {
                 padding-right: 1.2em;
 
                 &:after {
-                    right: 0.4em;
+                    right: var(--_bu-px);
                 }
             }
-
-            padding-left: 0.4em;
-            padding-right: 0.4em;
         }
     }, @force-selector: true);
 
-    // VARIANTS
-    &:not(&--radio) .s-btn:not(:first-child):not(:last-child),
-    &&--radio .s-btn:not(:first-of-type):not(:last-of-type) {
-        border-radius: 0;
-    }
-
-    &:not(&--radio) .s-btn:first-child:not(:only-child),
-    &&--radio .s-btn:first-of-type:not(:last-of-type) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    &:not(&--radio) .s-btn:last-child:not(:only-child),
-    &&--radio .s-btn:last-of-type:not(:first-of-type) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+    // CHILD ELEMENTS
+    form {
+        display: flex;
+        margin-right: calc(var(--su-static1) * -1); // -1px
     }
 
-    &:not(&--radio) .s-btn:not(:last-child),
-    &&--radio .s-btn:not(:last-of-type) {
-        margin-right: calc(var(--su-static1) * -1);
-    }
+    .s-btn {
+        --_bu-br: var(--br-sm);
+        --_bu-bc-hover: transparent;
 
-    // CHILD ELEMENTS
-    form {
-        &:not(:first-child):not(:last-child) {
-            .s-btn {
-                border-radius: 0;
-            }
+        &,
+        &.s-btn__md {
+            --_bu-px: var(--su12);
+            --_bu-py: var(--su8);
         }
 
-        &:last-child:not(:only-child) {
-            .s-btn:not(:last-child) {
-                border-radius: 0;
-            }
+        &.s-btn___xs {
+            --_bu-px: var(--su8);
+            --_bu-py: var(--su4);
         }
 
-        &:first-child:not(:only-child) {
-            .s-btn:not(:first-child) {
-                border-radius: 0;
-            }
+        &.s-btn___sm {
+            --_bu-px: calc(var(--su8) + var(--su2));
+            --_bu-py: var(--su6);
         }
 
-        display: flex;
-        margin-right: calc(var(--su-static1) * -1); // -1px
-    }
+        &.is-selected,
+        &--radio:checked + .s-btn {
+            font-weight: bold;
+        }
 
-    .s-btn {
-        &:active {
-            z-index: var(--zi-active);
+        .s-btn--badge {
+            font-weight: normal;
         }
 
-        &.is-selected,
-        &--radio:checked + .s-btn {
-            z-index: var(--zi-selected); // When the button is active or selected, it should pop above its siblings
+        & .s-btn--text {
+            &:before {
+                content: attr(data-text);
+                content: attr(data-text) / "";
+                font-weight: bold;
+                height: 0;
+                pointer-events: none;
+                user-select: none;
+                visibility: hidden;
+            }
+
+            display: inline-flex;
+            flex-direction: column;
         }
 
-        margin-bottom: calc(var(--su-static1) * -1); // When wrapping we need to account for the border
         white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
     }
 
     // STATIC COMPONENT STYLES
-    display: flex;
+    border: var(--su-static1) solid var(--black-300);
+    border-radius: var(--br-md);
+    display: inline-flex; // TODO investigate if changing from flex to inline-flex will be an issue
     flex-wrap: wrap;
     margin-bottom: var(--su-static1); // Compensate for buttons having a margin bottom of -1px to account for row wrapping
+    padding: calc(var(--su-static4) - var(--su-static1));
 }

package/lib/components/button-group/button-group.test.setup.ts

@@ -0,0 +1,77 @@
+import { html } from "@open-wc/testing";
+import type { TestVariationArgs } from "../../test/test-utils";
+
+const btns = [
+    { name: "Newest", isSelected: true },
+    { name: "Frequent" },
+    { name: "Active" },
+];
+
+const getBtn = ({
+    name = "",
+    isRadio,
+    isSelected,
+    hasBadge,
+}: {
+    name: string;
+    isRadio?: boolean;
+    isSelected?: boolean;
+    hasBadge?: boolean;
+}): string => {
+    const baseClasses = "s-btn s-btn__muted";
+    const btnChildren = `
+        <span class="s-btn--text" data-text="${name}">${name}</span>
+        ${
+            hasBadge
+                ? `<span class="s-btn--badge"><span class="s-btn--number">123</span></span>`
+                : ""
+        }
+    `;
+
+    return isRadio
+        ? `<input
+            class="s-btn--radio"
+            type="radio"
+            name="test-btn-radio-group"
+            id="btn-${name}"
+            ${isSelected ? "checked" : ""}/>
+            <label class="${baseClasses}" for="btn-${name}">
+                ${btnChildren}
+            </label>`
+        : `<button
+            class="${baseClasses}${isSelected ? " is-selected" : ""}"
+            ${isSelected ? `aria-current="true"` : ""}
+            type="button">
+                ${btnChildren}
+            </button>`;
+};
+
+const getBtns = (ids: number[]): string => {
+    return ids.map((id) => getBtn(btns[id])).join("");
+};
+
+const testArgs: TestVariationArgs = {
+    baseClass: "s-btn-group",
+    children: {
+        default: getBtns([0, 1, 2]),
+        single: getBtns([0]),
+        form: `
+            ${getBtns([0])}
+            <form class="mb0 p0">
+                ${getBtn(btns[1])}
+            </form>
+            ${getBtns([2])}
+        `,
+        badge: btns.map((btn) => getBtn({ ...btn, hasBadge: true })).join(""),
+        radio: btns.map((btn) => getBtn({ ...btn, isRadio: true })).join(""),
+    },
+    template: ({ component, testid }) =>
+        html`<div
+            class="d-inline-flex ai-center jc-center p8"
+            data-testid="${testid}"
+        >
+            ${component}
+        </div>`,
+};
+
+export { testArgs };

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

@@ -0,0 +1,7 @@
+import { testArgs } from "./button-group.test.setup";
+import { runVisualTests } from "../../test/visual-test-utils";
+import "../../index";
+
+describe("button group", () => {
+    runVisualTests(testArgs);
+});

package/lib/components/input_textarea/input_textarea.less

@@ -102,7 +102,9 @@
     }
 
     // INTERACTION
-    &:focus {
+    // Note: We're applying the focus styles both on `:focus` and `:focus-within` since this component can sometimes be used on the parent of an input such as in our tag selector in Core.
+    &:focus,
+    &:focus-within {
         .focus-styles();
     }
 

package/lib/components/post-summary/post-summary.a11y.test.ts

@@ -0,0 +1,25 @@
+import { runA11yTests } from "../../test/a11y-test-utils";
+import testArgs from "./post-summary.test.setup";
+import "../../index";
+
+describe("post-summary", () => {
+    // Base, sparce
+    runA11yTests({
+        ...testArgs.base,
+        // TODO resolve test failures
+        skippedTestids: [
+            /-deleted/,
+            /-ignored/,
+            /-highcontrast-(light|dark)-watched/,
+        ],
+    });
+
+    // Truncated description sizes
+    runA11yTests(testArgs.sizes);
+
+    // Stats - answers, view hotness
+    runA11yTests(testArgs.stats);
+
+    // Badges
+    runA11yTests(testArgs.badges);
+});

package/lib/components/post-summary/post-summary.test.setup.ts

@@ -0,0 +1,435 @@
+import { html } from "@open-wc/testing";
+import {
+    IconArchiveSm,
+    IconCheckmarkSm,
+    IconEllipsisVertical,
+    IconEyeSm,
+    IconNotInterested,
+    IconPencilSm,
+    IconTackSm,
+    IconTrashSm,
+} from "@stackoverflow/stacks-icons/icons";
+import type { TestVariationArgs } from "../../test/test-utils";
+import "../../index";
+
+type BadgeType =
+    | "danger"
+    | "danger-filled"
+    | "info"
+    | "muted"
+    | "muted-filled"
+    | "warning";
+
+type Stats = {
+    votes: number;
+    views: number;
+    answers: number;
+    accepted?: boolean;
+    bounty?: number;
+    badge?: BadgeType;
+};
+
+type Tags = { text: string; type?: "required" | "moderator" }[];
+
+type TruncationSizes = "sm" | "md" | "lg" | "";
+
+const formatNumber = (num: number) => {
+    switch (true) {
+        case num > 10000090:
+            return (num / 1000000).toFixed(0) + "m";
+        case num > 1000000:
+            return (num / 1000000).toFixed(1) + "m";
+        case num > 10000:
+            return (num / 1000).toFixed(0) + "k";
+        case num > 1000:
+            return (num / 1000).toFixed(1) + "k";
+        default:
+            return num.toString();
+    }
+};
+
+const getBadge = (type: BadgeType) => {
+    const badgeClasses = type
+        .split("-")
+        .map((modifier) => `s-badge__${modifier}`)
+        .join(" ");
+    const getIcon = () => {
+        switch (type) {
+            case "danger":
+                return IconNotInterested;
+            case "danger-filled":
+                return IconTrashSm;
+            case "info":
+                return IconPencilSm;
+            case "muted":
+                return IconArchiveSm;
+            case "muted-filled":
+                return IconTackSm;
+            case "warning":
+                return IconEyeSm;
+            default:
+                return "";
+        }
+    };
+
+    const getText = () => {
+        switch (type) {
+            case "danger":
+                return "Closed";
+            case "danger-filled":
+                return "Deleted";
+            case "info":
+                return "Draft";
+            case "muted":
+                return "Archived";
+            case "muted-filled":
+                return "Pinned";
+            case "warning":
+                return "Review";
+            default:
+                return "";
+        }
+    };
+
+    return `
+      <div
+          class="s-post-summary--stats-item s-badge s-badge__icon ${badgeClasses}"
+      >
+          ${getIcon()}
+          ${getText()}
+      </div>`;
+};
+
+const getDescription = (truncation?: TruncationSizes, text?: string) => `
+  <p class="s-post-summary--content-excerpt
+      ${truncation ? `s-post-summary--content-excerpt__${truncation}` : ""}
+  ">
+      ${text ? text : "In the spirit of type safety associated with the CriteriaQuery JPA 2.0 also has an API to support Metamodel representation of entities. Is anyone aware of a fully functional implementation of this API (to generate the Metamodel as opposed to creating the metamodel classes manually)? It would be awesome if someone also knows the steps for setting this up in Eclipse (I assume it's as simple as setting up an annotation processor, but you never know)."}
+  </p>
+`;
+
+const getHotnessClass = (num: number) => {
+    switch (true) {
+        case num > 100000:
+            return "is-supernova";
+        case num > 10000:
+            return "is-hot";
+        case num > 1000:
+            return "is-warm";
+        default:
+            return "";
+    }
+};
+
+const getStats = ({
+    votes,
+    views,
+    answers,
+    accepted,
+    bounty,
+    badge,
+}: Stats) => `
+  <div class="s-post-summary--stats">
+      ${badge ? getBadge(badge) : ""}
+      <div class="s-post-summary--stats-item s-post-summary--stats-item__emphasized">
+          <span class="s-post-summary--stats-item-number">${formatNumber(votes)}</span>
+          <span class="s-post-summary--stats-item-unit">${votes === 1 ? "vote" : "votes"}</span>
+      </div>
+      <div class="s-post-summary--stats-item ${accepted ? "has-accepted-answer" : ""} ${answers > 0 ? "has-answers" : ""}">
+          ${accepted ? IconCheckmarkSm : ""}
+          <span class="s-post-summary--stats-item-number">${formatNumber(answers)}</span>
+          <span class="s-post-summary--stats-item-unit">${answers === 1 ? "answer" : "answers"}</span>
+      </div>
+      <div class="s-post-summary--stats-item ${getHotnessClass(views)}">
+          <span class="s-post-summary--stats-item-number">${formatNumber(views)}</span>
+          <span class="s-post-summary--stats-item-unit">${views === 1 ? "view" : "views"}</span>
+      </div>
+      ${
+          bounty
+              ? `
+          <div class="s-post-summary--stats-item s-badge s-badge__bounty">
+              +${bounty}
+          </div>
+      `
+              : ""
+      }
+  </div>
+`;
+
+const getTags = (tags?: Tags) => {
+    const tagsArr = tags ?? [
+        {
+            text: "feature-request",
+            type: "required",
+        },
+        {
+            text: "status-complete",
+            type: "moderator",
+        },
+        {
+            text: "design",
+        },
+    ];
+
+    const tagsHTML = tagsArr
+        .map(
+            ({ text, type }) => `
+    <a class="s-tag ${type ? `s-tag__${type}` : ""}" href="/">${text}</a>
+  `
+        )
+        .join("");
+
+    return `<div class="s-post-summary--meta-tags">${tagsHTML}</div>`;
+};
+
+const getUser = () => `
+  <div class="s-user-card s-user-card__minimal">
+      <a href="#" class="s-avatar s-user-card--avatar">
+          <img class="s-avatar--image" src="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" alt="placeholder avatar">
+          <span class="v-visible-sr">Tracy Smith</span>
+      </a>
+      <a href="#" class="s-user-card--link">Tracy Smith</a>
+      <ul class="s-user-card--awards">
+          <li class="s-user-card--rep">1350</li>
+      </ul>
+      <time class="s-user-card--time">asked just now</time>
+  </div>
+`;
+
+const getChildren = ({
+    show = {
+        description: false,
+        menuBtn: false,
+        stats: false,
+        tags: false,
+        title: false,
+        user: false,
+    },
+    description = {
+        truncation: "",
+        text: "",
+    },
+    stats,
+    tags,
+    title,
+}: {
+    show?: {
+        description?: boolean;
+        menuBtn?: boolean;
+        stats?: boolean;
+        tags?: boolean;
+        title?: boolean;
+        user?: boolean;
+    };
+    description?: {
+        truncation?: TruncationSizes;
+        text?: string;
+    };
+    stats?: Stats;
+    tags?: Tags;
+    title?: string;
+}) => {
+    const titleEl =
+        show.title || title
+            ? `
+        <h3 class="s-post-summary--content-title">
+            ${title ? title : "How to generate the JPA entity Metamodel?"}
+        </h3>
+    `
+            : "";
+    const descriptionEl =
+        show.description || description.truncation || description.text
+            ? description
+                ? getDescription(description.truncation, description.text)
+                : getDescription()
+            : "";
+    const tagsEl = show.tags || tags ? getTags(tags) : "";
+    const userEl = show.user ? getUser() : "";
+    const menuBtnEl = show.menuBtn
+        ? `
+        <a href="#" class="s-btn s-btn__muted s-post-summary--content-menu-button">
+            ${IconEllipsisVertical}
+            <span class="v-visible-sr">menu</span>
+        </a>
+    `
+        : "";
+
+    return `
+    ${
+        show.stats || stats
+            ? getStats(
+                  stats
+                      ? stats
+                      : {
+                            votes: 95,
+                            views: 104123,
+                            answers: 5,
+                            accepted: true,
+                            bounty: 50,
+                        }
+              )
+            : ""
+    }
+    ${
+        titleEl || descriptionEl || tagsEl || userEl || menuBtnEl
+            ? `
+      <div class="s-post-summary--content">
+          ${titleEl}
+          ${descriptionEl}
+          <div class="s-post-summary--meta">
+              ${tagsEl}
+              ${userEl}
+          </div>
+          ${menuBtnEl}
+      </div>`
+            : ""
+    }
+  `;
+};
+
+const getBadgeChildren = (badge: BadgeType) => {
+    return getChildren({
+        show: {
+            stats: true,
+        },
+        stats: {
+            badge: badge as BadgeType,
+            answers: 0,
+            votes: 1,
+            views: 20,
+        },
+    });
+};
+
+const getSizeChildren = (size: string) => {
+    return getChildren({
+        show: {
+            description: true,
+            menuBtn: true,
+            stats: true,
+            tags: true,
+            title: true,
+            user: true,
+        },
+        description: {
+            truncation: size as TruncationSizes,
+        },
+    });
+};
+
+const getStatsChildren = ({
+    accepted = false,
+    answers = 1,
+    views = 20,
+}: {
+    accepted?: boolean;
+    answers?: number;
+    views?: number;
+}) =>
+    getChildren({
+        show: {
+            stats: true,
+        },
+        stats: {
+            votes: 1,
+            answers,
+            accepted,
+            views,
+        },
+    });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="d-flex ai-center jc-center p8 ws6" data-testid="${testid}">
+        ${component}
+    </div>
+`;
+
+const testArgs: {
+    [key: string]: TestVariationArgs;
+} = {
+    base: {
+        baseClass: "s-post-summary",
+        modifiers: {
+            primary: ["deleted", "ignored", "watched"], // variants described as modifiers to test colliding modifiers
+            secondary: ["minimal"],
+            global: ["w100"],
+        },
+        children: {
+            default: getChildren({
+                show: {
+                    description: true,
+                    menuBtn: true,
+                    stats: true,
+                    tags: true,
+                    title: true,
+                    user: true,
+                },
+            }),
+            sparce: getChildren({
+                show: {
+                    stats: true,
+                    tags: true,
+                    title: true,
+                    user: true,
+                },
+                tags: [
+                    {
+                        text: "featured-request",
+                        type: "required",
+                    },
+                ],
+                title: "Short title",
+            }),
+        },
+        options: {
+            includeNullModifier: false,
+        },
+        template,
+    },
+    badges: {
+        baseClass: "s-post-summary",
+        children: {
+            "badge-danger": getBadgeChildren("danger"),
+            "badge-danger-filled": getBadgeChildren("danger-filled"),
+            "badge-info": getBadgeChildren("info"),
+            "badge-muted": getBadgeChildren("muted"),
+            "badge-muted-filled": getBadgeChildren("muted-filled"),
+            "badge-warning": getBadgeChildren("warning"),
+        },
+        template,
+    },
+    sizes: {
+        baseClass: "s-post-summary",
+        modifiers: {
+            global: ["w100"],
+        },
+        children: {
+            "description-sm": getSizeChildren("sm"),
+            "description-md": getSizeChildren("md"),
+            "description-lg": getSizeChildren("lg"),
+        },
+        options: {
+            includeNullModifier: false,
+        },
+        template,
+    },
+    stats: {
+        baseClass: "s-post-summary",
+        children: {
+            "stats-unanswered": getStatsChildren({ answers: 0 }),
+            "stats-answered": getStatsChildren({ answers: 1 }),
+            "stats-answered-accepted": getStatsChildren({
+                answers: 10,
+                accepted: true,
+            }),
+            "stats-views": getStatsChildren({ views: 1 }),
+            "stats-views-warm": getStatsChildren({ views: 1001 }),
+            "stats-views-hot": getStatsChildren({ views: 10001 }),
+            "stats-views-supernova": getStatsChildren({ views: 100001 }),
+        },
+        template,
+    },
+};
+
+export default testArgs;