@stackoverflow/stacks 2.3.3 → 2.5.0

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

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

@@ -1,73 +0,0 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import "../../index";
-import { showBanner, hideBanner } from "../../controllers";
-
-const user = userEvent.setup();
-
-describe("banner", () => {
-    it("trigger should make banner visible", async () => {
-        await fixture(html`
-            <button data-toggle="s-banner" data-target="#test-banner">
-                Show test banner
-            </button>
-            <aside
-                role="alert"
-                id="test-banner"
-                class="s-banner"
-                aria-labelledby="banner-message"
-                aria-hidden="true"
-                data-controller="s-banner"
-                data-s-banner-target="banner"
-                data-testid="test-banner"
-            >
-                Test banner
-            </aside>
-        `);
-
-        const button = screen.getByRole("button");
-        const banner = screen.getByTestId("test-banner");
-
-        expect(banner).to.have.attribute("aria-hidden", "true");
-        button.addEventListener("click", () => showBanner(banner));
-
-        await user.click(button);
-        expect(banner).to.have.attribute("aria-hidden", "false");
-    });
-
-    it("trigger should hide banner", async () => {
-        await fixture(html`
-            <aside
-                role="alert"
-                id="test-banner"
-                class="s-banner"
-                aria-labelledby="banner-message"
-                aria-hidden="false"
-                data-controller="s-banner"
-                data-s-banner-target="banner"
-                data-testid="test-banner"
-            >
-                Test banner
-                <button
-                    type="button"
-                    class="s-btn s-banner--btn"
-                    aria-label="Dismiss"
-                    data-toggle="s-banner"
-                    data-target="#test-banner"
-                >
-                    Close banner
-                </button>
-            </aside>
-        `);
-
-        const button = screen.getByRole("button");
-        const banner = screen.getByTestId("test-banner");
-
-        expect(banner).to.have.attribute("aria-hidden", "false");
-        button.addEventListener("click", () => hideBanner(banner));
-
-        await user.click(button);
-        expect(banner).to.have.attribute("aria-hidden", "true");
-    });
-});

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

@@ -1,36 +0,0 @@
-import { runVisualTests } from "../../test/visual-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", () => {
-    runVisualTests({
-        baseClass: "s-banner",
-        variants: ["info", "success", "warning", "danger"],
-        modifiers: {
-            primary: ["important"],
-        },
-        attributes: {
-            role: "alert",
-            ariaHidden: "false",
-        },
-        children: {
-            default: bannerChild,
-        },
-    });
-});

package/lib/components/block-link/block-link.a11y.test.ts

@@ -1,57 +0,0 @@
-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 blockLinkTemplate = ({ component, testid }: any) =>
-    html`<div
-        class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-        data-testid="${testid}"
-    >
-        ${component}
-    </div>`;
-
-describe("block-link", () => {
-    // Base block link
-    runA11yTests({
-        baseClass: "s-block-link",
-        modifiers: {
-            global: ["is-selected"],
-        },
-        children: {
-            default: `block link`,
-        },
-        template: blockLinkTemplate,
-    });
-
-    // Base + danger
-    runA11yTests({
-        baseClass: "s-block-link",
-        modifiers: {
-            primary: ["danger"],
-        },
-        children: {
-            default: `block link`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        template: blockLinkTemplate,
-    });
-
-    // All left and rignt variants
-    runA11yTests({
-        baseClass: "s-block-link",
-        variants: ["left is-selected", "right is-selected"],
-        modifiers: {
-            primary: ["danger"],
-        },
-        children: {
-            default: `block link`,
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        template: blockLinkTemplate,
-    });
-});

package/lib/components/block-link/block-link.visual.test.ts

@@ -1,57 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const blockLinkTemplate = ({ component, testid }: any) =>
-    html`<div
-        class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-        data-testid="${testid}"
-    >
-        ${component}
-    </div>`;
-
-describe("block-link", () => {
-    // Base block link
-    runVisualTests({
-        baseClass: "s-block-link",
-        modifiers: {
-            global: ["is-selected"],
-        },
-        children: {
-            default: `block link`,
-        },
-        template: blockLinkTemplate,
-    });
-
-    // Base + danger
-    runVisualTests({
-        baseClass: "s-block-link",
-        modifiers: {
-            primary: ["danger"],
-        },
-        children: {
-            default: `block link`,
-        },
-        options: {
-            includeNullModifier: false,
-        },
-        template: blockLinkTemplate,
-    });
-
-    // All left and rignt variants
-    runVisualTests({
-        baseClass: "s-block-link",
-        variants: ["left is-selected", "right is-selected"],
-        modifiers: {
-            primary: ["danger"],
-        },
-        children: {
-            default: `block link`,
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        template: blockLinkTemplate,
-    });
-});

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

@@ -1,36 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import { html } from "@open-wc/testing";
-import "../../index";
-
-describe("breadcrumbs", () => {
-    runA11yTests({
-        baseClass: "s-breadcrumbs",
-        children: {
-            default: `
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Stacks</a>
-                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
-                </div>
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Help center</a>
-                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
-                </div>
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Icons</a>
-                </div>
-            `,
-        },
-        attributes: {
-            "aria-label": "Breadcrumb navigation",
-        },
-        tag: "nav",
-        template: ({ component, testid }) => html`
-            <div
-                class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-                data-testid="${testid}"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});

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

@@ -1,36 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import { html } from "@open-wc/testing";
-import "../../index";
-
-describe("breadcrumbs", () => {
-    runVisualTests({
-        baseClass: "s-breadcrumbs",
-        children: {
-            default: `
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Stacks</a>
-                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
-                </div>
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Help center</a>
-                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
-                </div>
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link" href="#">Icons</a>
-                </div>
-            `,
-        },
-        attributes: {
-            "aria-label": "Breadcrumb navigation",
-        },
-        tag: "nav",
-        template: ({ component, testid }) => html`
-            <div
-                class="d-inline-flex ai-center jc-center hs1 ws2 p8"
-                data-testid="${testid}"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});