@stackoverflow/stacks 2.3.3 → 2.5.0

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

@@ -1,435 +0,0 @@
-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,
-            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;

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

@@ -1,17 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import testArgs from "./post-summary.test.setup";
-import "../../index";
-
-describe("post-summary", () => {
-    // Base, sparce
-    runVisualTests(testArgs.base);
-
-    // Truncated description sizes
-    runVisualTests(testArgs.sizes);
-
-    // Stats - answers, view hotness
-    runVisualTests(testArgs.stats);
-
-    // Badges
-    runVisualTests(testArgs.badges);
-});

package/lib/components/progress-bar/progress-bar.a11y.test.ts

@@ -1,189 +0,0 @@
-import { html } from "@open-wc/testing";
-import {
-    IconAchievementsSm,
-    IconCheckmarkSm,
-} from "@stackoverflow/stacks-icons/icons";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = ({ component, testid }: any) => html`
-    <div class="d-flex ai-center jc-center p8 ws2" data-testid="${testid}">
-        ${component}
-    </div>
-`;
-
-const steppedItems = [
-    {
-        complete: true,
-        label: "Select plan",
-    },
-    {
-        complete: true,
-        label: "Team name",
-    },
-    {
-        active: true,
-        label: "Payment",
-    },
-    {
-        label: "Create account",
-    },
-];
-
-const getChildren = (type: string) => {
-    switch (type) {
-        case "badge":
-            return `<div class="s-progress--label" id="example-label">
-                <div class="s-badge--label">Electorate</div>
-            </div>
-            <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="example-label" style="width: 75%;"></div>`;
-        case "circular":
-            return `<svg class="s-progress-bar" role="progressbar" viewbox="0 0 32 32" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
-                <circle cx="16" cy="16" r="14"></circle>
-                <circle cx="16" cy="16" r="14"></circle>
-            </svg>`;
-        case "privilege":
-            return `
-                <div class="s-progress--label" id="progress-label">
-                    ${IconAchievementsSm}
-                    Access Review Queues
-                </div>
-                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="progress-label" style="width: 75%;"></div>
-            `;
-        case "segmented":
-            return `
-                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="…" style="width: 75%;"></div>
-                <ol class="s-progress--segments">
-                    <li></li><li></li><li></li>
-                </ol>
-            `;
-        case "stepped":
-            return steppedItems
-                .map((step, i) => {
-                    return `
-                    <div
-                        class="
-                            s-progress--step
-                            ${step.active ? "is-active" : ""}
-                            ${step.complete ? "is-complete" : ""}
-                        "
-                    >
-                        <a href="#" class="s-progress--stop">
-                            ${step.complete ? IconCheckmarkSm : ""}
-                            <span class="v-visible-sr">${step.label} ${
-                                step.complete ? "complete" : "incomplete"
-                            }</span>
-                        </a>
-                        ${
-                            i > 0
-                                ? '<div class="s-progress--bar s-progress--bar__left"></div>'
-                                : ""
-                        }
-
-                        ${
-                            i < steppedItems.length - 1
-                                ? '<div class="s-progress--bar s-progress--bar__right"></div>'
-                                : ""
-                        }
-                        <a class="s-progress--label">${step.label}</a>
-                    </div>
-                `;
-                })
-                .join("");
-        default:
-            return `<div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="progress" style="width: 75%"></div>`;
-    }
-};
-describe("progress-bar", () => {
-    // Base
-    runA11yTests({
-        baseClass: "s-progress",
-        variants: ["brand", "info"],
-        children: {
-            default: getChildren(""),
-        },
-        template,
-    });
-
-    // Badge
-    runA11yTests({
-        baseClass: "s-progress",
-        variants: ["badge"],
-        modifiers: {
-            primary: ["gold", "silver", "bronze"],
-        },
-        children: {
-            default: getChildren("badge"),
-        },
-        template,
-        options: {
-            includeNullVariant: false,
-            includeNullModifier: false,
-        },
-    });
-
-    // Circular
-    runA11yTests({
-        baseClass: "s-progress",
-        variants: ["circular"],
-        modifiers: {
-            global: ["fc-green-400", "fc-theme-primary"],
-        },
-        children: {
-            default: getChildren("circular"),
-        },
-        template,
-        attributes: {
-            style: "--s-progress-value: .75",
-        },
-        options: {
-            includeNullVariant: false,
-            includeNullModifier: false,
-        },
-    });
-
-    // Privilege
-    runA11yTests({
-        baseClass: "s-progress",
-        variants: ["privilege"],
-        children: {
-            default: getChildren("privilege"),
-        },
-        template,
-        options: {
-            includeNullVariant: false,
-        },
-    });
-
-    // Segmented
-    runA11yTests({
-        baseClass: "s-progress",
-        variants: ["segmented"],
-        children: {
-            default: getChildren("segmented"),
-        },
-        template,
-        options: {
-            includeNullVariant: false,
-        },
-    });
-
-    // Stepped
-    runA11yTests({
-        baseClass: "s-progress",
-        variants: ["stepped"],
-        children: {
-            default: getChildren("stepped"),
-        },
-        template: ({ component, testid }) => html`
-            <div class="d-block p8 ws5" data-testid="${testid}">
-                ${component}
-            </div>
-        `,
-        options: {
-            includeNullVariant: false,
-        },
-        // TODO add skipped test ids
-    });
-});