@stackoverflow/stacks 2.4.0 → 2.5.0

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

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

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

@@ -1,12 +0,0 @@
-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/atomic/spacing.less.test.ts

@@ -1,12 +0,0 @@
-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/spacing.less";
-        `);
-
-        expect(css).toMatchSnapshot();
-    });
-});

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

@@ -1,13 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("activity-indicator", () => {
-    runA11yTests({
-        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>`,
-        },
-    });
-});

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

@@ -1,22 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-describe("activity-indicator", () => {
-    runVisualTests({
-        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/components/anchor/anchor.a11y.test.ts

@@ -1,35 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-// TODO check for visited styling
-const link = (text = "", visited = true, classes = "") =>
-    `<a class="${classes}" href="${
-        visited ? "/" : "https://stackoverflow.design/404-unvisited"
-    }">${text}</a>`;
-
-describe("anchors", () => {
-    runA11yTests({
-        baseClass: "s-anchors",
-        modifiers: {
-            primary: [
-                "default",
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-            ],
-        },
-        children: {
-            default: `A ${link(
-                "link"
-            )}, a <button class="s-btn s-btn__link">button</button>, an ${link(
-                "unvisited link",
-                false
-            )}.`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-    });
-});

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

@@ -1,47 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// TODO check for visited styling
-const link = (text = "", classes = "") =>
-    `<a class="${classes}" href="#">${text}</a>`;
-const links = `A ${link(
-    "link"
-)}, a <button class="s-btn s-btn__link">button</button>, an ${link(
-    "unvisited link"
-)}.<br/>Nested: ${link("danger", "s-link s-link__danger")}, ${link(
-    "grayscale",
-    "s-link s-link__grayscale"
-)}.`;
-
-describe("anchors", () => {
-    runVisualTests({
-        baseClass: "s-anchors",
-        modifiers: {
-            primary: [
-                "default",
-                "grayscale",
-                "muted",
-                "danger",
-                "inherit",
-                "underlined",
-            ],
-        },
-        children: {
-            // children include nested anchors block to test for appropriate nested styling
-            default: `
-                ${links}
-                <div class="s-card s-anchors s-anchors__danger">Danger: ${links}</div>
-                <div class="s-card s-anchors s-anchors__muted mt4">Muted: ${links}</div>
-            `,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        template: ({ component, testid }) => html`
-            <div data-testid="${testid}" class="s-card ws3 fc-green-500">
-                ${testid}: ${component}
-            </div>
-        `,
-    });
-});

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

@@ -1,35 +0,0 @@
-import { runA11yTests } from "../../test/a11y-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", () => {
-    runA11yTests({
-        baseClass: "s-avatar",
-        variants: ["24", "32", "48", "64", "96", "128"],
-        children: {
-            default: getChild(),
-            image: getChild("image"),
-            letter: getChild("letter"),
-        },
-        tag: "span",
-    });
-});

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

@@ -1,50 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-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", () => {
-    runVisualTests({
-        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>
-        `,
-    });
-});

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

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

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

@@ -1,24 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import { html } from "@open-wc/testing";
-import "../../index";
-
-describe("anchors", () => {
-    runVisualTests({
-        baseClass: "s-award-bling",
-        variants: ["gold", "silver", "bronze"],
-        children: {
-            default: `100 <div class="v-visible-sr">award</div>`,
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        template: ({ component, testid }) => html`
-            <div
-                class="d-inline-flex ai-center jc-center hs1 ws1 p8"
-                data-testid="${testid}"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});

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

@@ -1,143 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import { IconEyeSm } from "@stackoverflow/stacks-icons/icons";
-import "../../index";
-
-const variants = {
-    blings: ["gold", "silver", "bronze"],
-    numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
-    filled: ["danger", "muted"],
-    states: ["danger", "muted", "info", "new", "warning"],
-    users: ["admin", "moderator", "staff"],
-};
-
-describe("badge", () => {
-    // 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}">
-                    with bling
-                </span>`,
-            },
-            options: {
-                includeNullVariant: false,
-            },
-            tag: "span",
-        });
-    });
-
-    // Number counts
-    runA11yTests({
-        baseClass: "s-badge",
-        variants: variants.numbers,
-        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",
-    });
-
-    // State badges w/ filled modifier and icon
-    runA11yTests({
-        baseClass: "s-badge",
-        variants: variants.filled,
-        modifiers: {
-            primary: ["filled"],
-            secondary: ["icon"],
-        },
-        children: {
-            default: `${IconEyeSm} icon badge`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        tag: "span",
-    });
-
-    // State badges w/ icon
-    runA11yTests({
-        baseClass: "s-badge",
-        variants: variants.states.filter((state) => state !== "new"),
-        modifiers: {
-            primary: ["icon"],
-        },
-        children: {
-            default: `${IconEyeSm} icon badge`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        tag: "span",
-    });
-
-    // User badges
-    runA11yTests({
-        baseClass: "s-badge",
-        variants: variants.users,
-        modifiers: {
-            primary: ["xs", "sm"],
-        },
-        children: {
-            default: "user badge",
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        tag: "span",
-    });
-
-    // Sizes
-    runA11yTests({
-        baseClass: "s-badge",
-        modifiers: {
-            primary: ["xs", "sm"],
-        },
-        children: {
-            default: "size badge",
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        tag: "span",
-    });
-});

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

@@ -1,165 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-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"],
-    filled: ["danger", "muted"],
-    states: ["danger", "muted", "info", "new", "warning"],
-    users: ["admin", "moderator", "staff"],
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = ({ component, testid }: any) => html`
-    <div
-        class="d-inline-flex ai-center jc-center hs1 ws1 p8"
-        data-testid="${testid}"
-    >
-        ${component}
-    </div>
-`;
-
-describe("badge", () => {
-    // Base badge
-    runVisualTests({
-        baseClass: "s-badge",
-        children: {
-            default: `base badge`,
-        },
-        tag: "span",
-        template,
-    });
-
-    // Award badges
-    variants.blings.map((bling) => {
-        runVisualTests({
-            baseClass: "s-badge",
-            variants: [bling],
-            children: {
-                default: `<span class="s-award-bling s-award-bling__${bling}">
-                    with bling
-                </span>`,
-            },
-            options: {
-                includeNullVariant: false,
-            },
-            tag: "span",
-            template,
-        });
-    });
-
-    // Number counts
-    runVisualTests({
-        baseClass: "s-badge",
-        variants: variants.numbers,
-        children: {
-            default: "123",
-        },
-        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,
-    });
-
-    // State badges w/ filled modifier and icon
-    runVisualTests({
-        baseClass: "s-badge",
-        variants: variants.filled,
-        modifiers: {
-            primary: ["filled"],
-            secondary: ["icon"],
-        },
-        children: {
-            default: `${IconEyeSm} icon badge`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        tag: "span",
-        template,
-    });
-
-    // State badges w/ icon
-    runVisualTests({
-        baseClass: "s-badge",
-        variants: variants.states.filter((state) => state !== "new"),
-        modifiers: {
-            primary: ["icon"],
-        },
-        children: {
-            default: `${IconEyeSm} icon badge`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        tag: "span",
-        template,
-    });
-
-    // User badges
-    runVisualTests({
-        baseClass: "s-badge",
-        variants: variants.users,
-        modifiers: {
-            primary: ["xs", "sm"],
-        },
-        children: {
-            default: "user badge",
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        tag: "span",
-        template,
-    });
-
-    // Sizes
-    runVisualTests({
-        baseClass: "s-badge",
-        modifiers: {
-            primary: ["xs", "sm"],
-        },
-        children: {
-            default: "size badge",
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        tag: "span",
-        template,
-    });
-});

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

@@ -1,36 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-const bannerChild = `
-    <div
-        class="d-flex flex__center jc-space-between s-banner--container"
-        role="alertdialog"
-        aria-labelledby="banner-title"
-        aria-describedby="banner-description"
-    >
-        <div aria-label="banner message">
-            <h2 id="banner-title">Banner heading</h2>
-            <p id="banner-description">Banner description</p>
-        </div>
-        <div class="ml-auto myn8">
-            <span class="s-btn s-banner--btn">Close</span>
-        </div>
-    </div>
-`;
-
-describe("banner", () => {
-    runA11yTests({
-        baseClass: "s-banner",
-        variants: ["info", "success", "warning", "danger"],
-        modifiers: {
-            primary: ["important"],
-        },
-        attributes: {
-            role: "alert",
-            ariaHidden: "false",
-        },
-        children: {
-            default: bannerChild,
-        },
-    });
-});