@stackoverflow/stacks 1.8.0 → 1.9.1

package/lib/{test/s-banner.test.ts → components/banner/banner.test.ts}

@@ -1,73 +1,73 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import "../ts/index";
-import { showBanner, hideBanner } from "../ts/index";
-
-const user = userEvent.setup();
-
-describe("s-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");
-    });
-});
+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/{ts/controllers/s-banner.ts → components/banner/banner.ts}

@@ -1,149 +1,149 @@
-import * as Stacks from "../stacks";
-
-export class BannerController extends Stacks.StacksController {
-    static targets = ["banner"];
-
-    declare readonly bannerTarget: HTMLElement;
-
-    /**
-     * Toggles the visibility of the banner
-     */
-    toggle(dispatcher: Event | Element | null = null) {
-        this._toggle(undefined, dispatcher);
-    }
-
-    /**
-     * Shows the banner
-     */
-    show(dispatcher: Event | Element | null = null) {
-        this._toggle(true, dispatcher);
-    }
-
-    /**
-     * Hides the banner
-     */
-    hide(dispatcher: Event | Element | null = null) {
-        this._toggle(false, dispatcher);
-    }
-
-    /**
-     * Toggles the visibility of the banner element
-     * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
-     */
-    private _toggle(
-        show?: boolean | undefined,
-        dispatcher: Event | Element | null = null
-    ) {
-        let toShow = show;
-        const isVisible =
-            this.bannerTarget.getAttribute("aria-hidden") === "false";
-
-        // if we're letting the class toggle, we need to figure out if the banner is visible manually
-        if (typeof toShow === "undefined") {
-            toShow = !isVisible;
-        }
-
-        // if the state matches the disired state, return without changing anything
-        if ((toShow && isVisible) || (!toShow && !isVisible)) {
-            return;
-        }
-
-        const dispatchingElement = this.getDispatcher(dispatcher);
-
-        // show/hide events trigger before toggling the class
-        const triggeredEvent = this.triggerEvent(
-            toShow ? "show" : "hide",
-            {
-                dispatcher: this.getDispatcher(dispatchingElement),
-            },
-            this.bannerTarget
-        );
-
-        // if this pre-show/hide event was prevented, don't attempt to continue changing the banner state
-        if (triggeredEvent.defaultPrevented) {
-            return;
-        }
-
-        this.bannerTarget.setAttribute(
-            "aria-hidden",
-            toShow ? "false" : "true"
-        );
-
-        if (!toShow) {
-            this.removeBannerOnHide();
-        }
-
-        this.triggerEvent(
-            toShow ? "shown" : "hidden",
-            {
-                dispatcher: dispatchingElement,
-            },
-            this.bannerTarget
-        );
-    }
-
-    /**
-     * Remove the element on hide if the `remove-when-hidden` flag is set
-     */
-    private removeBannerOnHide() {
-        if (this.data.get("remove-when-hidden") !== "true") {
-            return;
-        }
-
-        this.bannerTarget.addEventListener(
-            "s-banner:hidden",
-            () => {
-                this.element.remove();
-            },
-            { once: true }
-        );
-    }
-
-    /**
-     * Determines the correct dispatching element from a potential input
-     * @param dispatcher The event or element to get the dispatcher from
-     */
-    private getDispatcher(dispatcher: Event | Element | null = null): Element {
-        if (dispatcher instanceof Event) {
-            return <Element>dispatcher.target;
-        } else if (dispatcher instanceof Element) {
-            return dispatcher;
-        } else {
-            return this.element;
-        }
-    }
-}
-
-/**
- * Helper to manually show an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- */
-export function showBanner(element: HTMLElement) {
-    toggleBanner(element, true);
-}
-
-/**
- * Helper to manually hide an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- */
-export function hideBanner(element: HTMLElement) {
-    toggleBanner(element, false);
-}
-
-/**
- * Helper to manually show an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- * @param show whether to force show/hide the banner; toggles the banner if left undefined
- */
-function toggleBanner(element: HTMLElement, show?: boolean | undefined) {
-    const controller = Stacks.application.getControllerForElementAndIdentifier(
-        element,
-        "s-banner"
-    ) as BannerController;
-
-    if (!controller) {
-        throw "Unable to get s-banner controller from element";
-    }
-
-    show ? controller.show() : controller.hide();
-}
+import * as Stacks from "../../stacks";
+
+export class BannerController extends Stacks.StacksController {
+    static targets = ["banner"];
+
+    declare readonly bannerTarget: HTMLElement;
+
+    /**
+     * Toggles the visibility of the banner
+     */
+    toggle(dispatcher: Event | Element | null = null) {
+        this._toggle(undefined, dispatcher);
+    }
+
+    /**
+     * Shows the banner
+     */
+    show(dispatcher: Event | Element | null = null) {
+        this._toggle(true, dispatcher);
+    }
+
+    /**
+     * Hides the banner
+     */
+    hide(dispatcher: Event | Element | null = null) {
+        this._toggle(false, dispatcher);
+    }
+
+    /**
+     * Toggles the visibility of the banner element
+     * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
+     */
+    private _toggle(
+        show?: boolean | undefined,
+        dispatcher: Event | Element | null = null
+    ) {
+        let toShow = show;
+        const isVisible =
+            this.bannerTarget.getAttribute("aria-hidden") === "false";
+
+        // if we're letting the class toggle, we need to figure out if the banner is visible manually
+        if (typeof toShow === "undefined") {
+            toShow = !isVisible;
+        }
+
+        // if the state matches the disired state, return without changing anything
+        if ((toShow && isVisible) || (!toShow && !isVisible)) {
+            return;
+        }
+
+        const dispatchingElement = this.getDispatcher(dispatcher);
+
+        // show/hide events trigger before toggling the class
+        const triggeredEvent = this.triggerEvent(
+            toShow ? "show" : "hide",
+            {
+                dispatcher: this.getDispatcher(dispatchingElement),
+            },
+            this.bannerTarget
+        );
+
+        // if this pre-show/hide event was prevented, don't attempt to continue changing the banner state
+        if (triggeredEvent.defaultPrevented) {
+            return;
+        }
+
+        this.bannerTarget.setAttribute(
+            "aria-hidden",
+            toShow ? "false" : "true"
+        );
+
+        if (!toShow) {
+            this.removeBannerOnHide();
+        }
+
+        this.triggerEvent(
+            toShow ? "shown" : "hidden",
+            {
+                dispatcher: dispatchingElement,
+            },
+            this.bannerTarget
+        );
+    }
+
+    /**
+     * Remove the element on hide if the `remove-when-hidden` flag is set
+     */
+    private removeBannerOnHide() {
+        if (this.data.get("remove-when-hidden") !== "true") {
+            return;
+        }
+
+        this.bannerTarget.addEventListener(
+            "s-banner:hidden",
+            () => {
+                this.element.remove();
+            },
+            { once: true }
+        );
+    }
+
+    /**
+     * Determines the correct dispatching element from a potential input
+     * @param dispatcher The event or element to get the dispatcher from
+     */
+    private getDispatcher(dispatcher: Event | Element | null = null): Element {
+        if (dispatcher instanceof Event) {
+            return <Element>dispatcher.target;
+        } else if (dispatcher instanceof Element) {
+            return dispatcher;
+        } else {
+            return this.element;
+        }
+    }
+}
+
+/**
+ * Helper to manually show an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ */
+export function showBanner(element: HTMLElement) {
+    toggleBanner(element, true);
+}
+
+/**
+ * Helper to manually hide an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ */
+export function hideBanner(element: HTMLElement) {
+    toggleBanner(element, false);
+}
+
+/**
+ * Helper to manually show an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ * @param show whether to force show/hide the banner; toggles the banner if left undefined
+ */
+function toggleBanner(element: HTMLElement, show?: boolean | undefined) {
+    const controller = Stacks.application.getControllerForElementAndIdentifier(
+        element,
+        "s-banner"
+    ) as BannerController;
+
+    if (!controller) {
+        throw "Unable to get s-banner controller from element";
+    }
+
+    show ? controller.show() : controller.hide();
+}

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

@@ -0,0 +1,37 @@
+import { runComponentTests } from "../../test/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", () => {
+    runComponentTests({
+        type: "visual",
+        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

@@ -0,0 +1,68 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/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
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-block-link",
+        modifiers: {
+            global: ["is-selected"],
+        },
+        children: {
+            default: `block link`,
+        },
+        template: blockLinkTemplate,
+    });
+
+    // Base + danger
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-block-link",
+        modifiers: {
+            primary: ["danger"],
+        },
+        children: {
+            default: `block link`,
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        skippedTestids: ["s-block-link-dark-danger"],
+        template: blockLinkTemplate,
+    });
+
+    // All left and rignt variants
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-block-link",
+        variants: ["left is-selected", "right is-selected"],
+        modifiers: {
+            primary: ["danger"],
+        },
+        children: {
+            default: `block link`,
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+        skippedTestids: [
+            "s-block-link-dark-left-is-selected-danger",
+            "s-block-link-dark-right-is-selected-danger",
+            "s-block-link-light-left-is-selected-danger",
+            "s-block-link-light-right-is-selected-danger",
+        ],
+        template: blockLinkTemplate,
+    });
+});