@stackoverflow/stacks 1.6.7 → 1.7.1

package/lib/css/components/table.less

@@ -0,0 +1,297 @@
+.s-table-container {
+    overflow-x: auto;
+    @scrollbar-styles();
+}
+
+.s-table {
+    @ta-cell-border: var(--su-static1) solid var(--bc-medium);
+    @ta-columns: (100% / 12);
+
+    --_ta-tbody-tbody-bc: var(--bc-medium);
+    --_ta-tbody-tbody-bw: var(--su-static2);
+    --_ta-tbody-tr-even-bg: unset;
+    --_ta-td-bbw: 0;
+    --_ta-td-bc: var(--bc-medium);
+    --_ta-td-fs: unset;
+    --_ta-td-fw: unset;
+    --_ta-td-p: var(--su8);
+    --_ta-td-ta: left;
+    --_ta-td-va: middle;
+    --_ta-td-w: unset;
+    --_ta-thead-th-bg: var(--black-025);
+    --_ta-th-bbw: 0;
+    --_ta-th-bc: var(--bc-medium);
+    --_ta-th-fs: unset;
+    --_ta-th-p: var(--su8);
+    --_ta-th-ta: left;
+    --_ta-th-va: middle;
+    --_ta-th-w: unset;
+
+    // VARIANTS
+    &&__stripes {
+        --_ta-tbody-tr-even-bg: var(--black-025);
+        --_ta-thead-th-bg: var(--black-050);
+    }
+
+    // MODIFIERS
+    &.ta-center {
+        --_ta-td-ta: center;
+        --_ta-th-ta: center;
+    }
+
+    &.ta-left {
+        --_ta-td-ta: left;
+        --_ta-th-ta: left;
+    }
+
+    &.ta-justify {
+        --_ta-td-ta: justify;
+        --_ta-th-ta: justify;
+    }
+
+    &.ta-right {
+        --_ta-td-ta: right;
+        --_ta-th-ta: right;
+    }
+
+    &.va-bottom {
+        --_ta-td-va: bottom;
+        --_ta-th-va: bottom;
+    }
+
+    &.va-middle {
+        --_ta-td-va: middle;
+        --_ta-th-va: middle;
+    }
+
+    &.va-top {
+        --_ta-td-va: top;
+        --_ta-th-va: top;
+    }
+
+    &&__b0 {
+        --_ta-td-bc: transparent;
+        --_ta-th-bc: transparent;
+        --_ta-tbody-tbody-bc: transparent; // [1]
+        --_ta-tbody-tbody-bw: var(--su-static12); // [1]
+        --_ta-thead-th-bg: transparent;
+
+        thead th {
+            font-size: inherit;
+            text-transform: initial;
+            letter-spacing: initial;
+        }
+    }
+
+    &&__bx {
+        tr {
+            > *:not(:first-child) {
+                border-left-color: transparent;
+            }
+            > *:not(:last-child) {
+                border-right-color: transparent;
+            }
+        }
+    }
+
+    &&__bx-simple {
+        --_ta-thead-th-bg: transparent;
+        --_ta-foot-td-bc: transparent;
+        --_ta-foot-th-bc: transparent;
+
+        td,
+        th {
+            border-left-color: transparent;
+            border-right-color: transparent;
+        }
+
+        tbody tr {
+            &:first-of-type th,
+            &:first-of-type td {
+                border-top-color: transparent;
+            }
+            &:last-of-type th,
+            &:last-of-type td {
+                border-bottom-color: transparent;
+            }
+        }
+
+        thead th {
+            border-top-color: transparent;
+            border-bottom-color: var(--bc-darker);
+            font-size: inherit;
+            text-transform: initial;
+            letter-spacing: initial;
+        }
+    }
+
+    &&__sortable {
+        thead th {
+            a { //  If an anchor is used, it should appear like a normal header
+                color: inherit;
+            }
+
+            &.is-sorted { //  Selected state
+                color: var(--black-900);
+            }
+
+            color: var(--fc-light);
+            cursor: pointer;
+        }
+    }
+
+    // Sizes
+    &&__sm {
+        --_ta-td-p: var(--su4);
+        --_ta-th-p: var(--su4);
+    }
+
+    &&__lg {
+        --_ta-td-p: var(--su12);
+        --_ta-th-p: var(--su12);
+    }
+
+    // CHILD ELEMENTS
+    & &--cell {
+        .generate-cell-widths-classes(@n, @i: 1) when (@i =< @n) {
+            &@{i} { // generates iterated cell classes
+                @ta-cell-w: @ta-columns * @i;
+                --_ta-td-w: @ta-cell-w;
+                --_ta-th-w: @ta-cell-w;
+            }
+            .generate-cell-widths-classes(@n, (@i + 1));
+        }
+  
+        .generate-cell-widths-classes(12);
+    }
+
+    & &--totals {
+        --_ta-td-fs: var(--fs-subheading);
+        --_ta-td-pt: var(--su12);
+        --_ta-td-fw: bold;
+        --_ta-th-fs: var(--fs-subheading);
+        --_ta-th-pt: var(--su12);
+    }
+
+    tbody {
+        + tbody { // If two table bodies are next to each other, visually separate them
+            border-top: var(--_ta-tbody-tbody-bw) solid var(--_ta-tbody-tbody-bc);
+        }
+
+        th {
+            font-weight: normal;
+        }
+
+        tr {
+            &:nth-child(2n) {
+                background-color: var(--_ta-tbody-tr-even-bg);
+            }
+        }
+    }
+
+    td {
+        .s-checkbox {
+            display: block;
+        }
+
+        &.s-table--bulk {
+            --_ta-td-w: calc(var(--su32) - var(--su2)); // 30px;
+        }
+
+        &.s-table--progress {
+            --_ta-td-ta: right;
+            --_ta-td-brw: 0;
+        }
+
+        &.s-table--progress-bar {
+            --_ta-td-blw: 0;
+            --_ta-td-pl: 0;
+            --_ta-td-w: 120px;
+        }
+
+        border: var(--su-static1) solid var(--_ta-td-bc);
+        border-bottom-width: var(--_ta-td-bbw, var(--su-static1));
+        border-left-width: var(--_ta-td-blw, var(--su-static1));
+        border-right-width: var(--_ta-td-brw, var(--su-static1));
+        border-top-width: var(--_ta-td-btw, var(--su-static1));
+        font-size: var(--_ta-td-fs);
+        font-weight: var(--_ta-td-fw);
+        padding: var(--_ta-td-p);
+        padding-left: var(--_ta-td-pl, var(--_ta-td-p));
+        padding-top: var(--_ta-td-pt, var(--_ta-td-p));
+        text-align: var(--_ta-td-ta);
+        vertical-align: var(--_ta-td-va);
+        width: var(--_ta-td-w);
+
+        color: var(--fc-medium);
+    }
+
+    tfoot {
+        td {
+            border-bottom-color: var(--_ta-foot-td-bc, var(--_ta-td-bc));
+        }
+
+        th {
+            border-bottom-color: var(--_ta-foot-th-bc, var(--_ta-td-bc));
+        }
+    }
+
+    th {
+        .s-checkbox {
+            display: block;
+        }
+
+        &.s-table--bulk {
+            --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px;
+        }
+
+        border: var(--su-static1) solid var(--_ta-th-bc);
+        border-width: var(--su-static1) var(--su-static1) var(--_ta-th-bbw);
+        font-size: var(--_ta-th-fs);
+        padding: var(--_ta-th-p);
+        padding-top: var(--_ta-th-pt, var(--_ta-th-p));
+        text-align: var(--_ta-th-ta);
+        vertical-align: var(--_ta-th-va);
+        width: var(--_ta-th-w);
+
+        color: var(--fc-dark);
+        font-weight: bold;
+    }
+
+    thead {
+        th {
+            background-color: var(--_ta-thead-th-bg);
+
+            line-height: var(--lh-sm);
+            vertical-align: bottom;
+            white-space: nowrap;
+        }
+    }
+
+    tr {
+        &:last-of-type {
+            --_ta-td-bbw: var(--su-static1);
+            --_ta-th-bbw: var(--su-static1);
+        }
+
+        &.is-disabled {
+            background-color: var(--black-025);
+            --_ta-tbody-tr-even-bg: var(--black-025);
+
+            th:not(.is-enabled),
+            td:not(.is-enabled) {
+                opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3
+            }
+        }
+    }
+
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: table;
+    font-size: var(--fs-body1);
+    max-width: 100%;
+    width: 100%;
+}
+
+// [1]  This makes the border transparent, so we need to use whitespace
+//      to achieve the same effect a 2px gray border achieves.

package/lib/css/stacks-dynamic.less

@@ -17,14 +17,6 @@
 //  --  SET BASIC STYLES FOR BODY
 @import "base/body.less";
 
-//  --  COMPONENTS
-@import "components/buttons.less";
-@import "components/links.less";
-@import "components/link-previews.less";
-@import "components/notices.less";
-@import "components/tags.less";
-@import "components/pagination.less";
-
 //  --  LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";
 

package/lib/css/stacks-static.less

@@ -18,10 +18,13 @@
 
 //  --  COMPONENTS
 @import "components/activity-indicator.less";
+@import "components/anchors.less";
 @import "components/award-bling.less";
 @import "components/avatars.less";
 @import "components/badges.less";
+@import "components/buttons.less";
 @import "components/empty-states.less";
+@import "components/block-link.less";
 @import "components/breadcrumbs.less";
 @import "components/button-groups.less";
 @import "components/cards.less";
@@ -29,17 +32,22 @@
 @import "components/expandable.less";
 @import "components/inputs.less";
 @import "components/labels.less";
+@import "components/link.less";
+@import "components/link-previews.less";
 @import "components/menu.less";
 @import "components/modals.less";
 @import "components/navigation.less";
+@import "components/notices.less";
 @import "components/page-titles.less";
+@import "components/pagination.less";
 @import "components/popovers.less";
 @import "components/post-summary.less";
 @import "components/progress-bars.less";
 @import "components/prose.less";
 @import "components/sidebar-widgets.less";
 @import "components/spinner.less";
-@import "components/tables.less";
+@import "components/table.less";
+@import "components/tags.less";
 @import "components/toggle-switches.less";
 @import "components/topbar.less";
 @import "components/uploader.less";

package/lib/test/s-avatar.test.ts

@@ -0,0 +1,74 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import "../ts/index";
+
+// TODO abstract to a helper file… maybe create a helper function to test in all themes
+const colorThemes = ["theme-dark", "theme-light"];
+const baseThemes = ["", "theme-highcontrast"];
+
+const avatarStyles = {
+    sizes: ["24", "32", "48", "64", "96", "128"],
+    children: ["image", "letter"],
+};
+
+const makeTest = ({ testid, theme, classes, child = "" }) => {
+    it(`a11y: ${testid} styles in should be accessible`, async () => {
+        await fixture(html`<a
+            href="#"
+            class="s-avatar${classes}"
+            data-testid="${testid}"
+        >
+            <div
+                class="${child === "letter" ? "s-avatar--letter" : "d-none"}"
+                aria-hidden="true"
+            >
+                S
+            </div>
+            <img
+                class="${child === "image" ? "s-avatar--image" : "d-none"}"
+                src="https://picsum.photos/48"
+                alt="team logo"
+            />
+            <span class="v-visible-sr">Stack Overflow</span>
+        </a>`);
+
+        document.body.className = "";
+        document.body.classList.add(...theme);
+        const avatar = screen.getByTestId(testid);
+        // TODO add conditional option for high contrast mode to test against AAA
+        await expect(avatar).to.be.accessible();
+    });
+};
+
+describe("s-avatar", () => {
+    // Test default, high contrast themes
+    baseThemes.forEach((baseTheme) => {
+        // Test light, dark theme
+        colorThemes.forEach((colorTheme) => {
+            const testidBase = `s-avatar-${
+                baseTheme ? `${baseTheme}-` : ""
+            }${colorTheme}`;
+            const theme = [baseTheme, colorTheme].filter(Boolean);
+
+            // Test each size
+            ["", ...avatarStyles.sizes].forEach((size) => {
+                const sizeClasses = size ? ` s-avatar__${size}` : "";
+                const classesSize = ` ${sizeClasses}`;
+                const testidSize = `${testidBase}-${size}`;
+
+                // Test each size with each child
+                ["", ...avatarStyles.children].forEach((child) => {
+                    const testidChildren = `${testidSize}${
+                        child ? `-with-${child}` : ""
+                    }`;
+                    makeTest({
+                        child,
+                        classes: classesSize,
+                        testid: testidChildren,
+                        theme,
+                    });
+                });
+            });
+        });
+    });
+});

package/lib/test/s-banner.test.ts

@@ -0,0 +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");
+    });
+});

package/lib/test/s-banner.visual.test.ts

@@ -0,0 +1,61 @@
+import { html, fixture } from "@open-wc/testing";
+import { visualDiff } from "@web/test-runner-visual-regression";
+import "../ts/index";
+
+const testBanner = (variant = "info", important = false) => {
+    const importantClass = important ? "s-banner__important" : "";
+
+    return html`<aside
+        class="s-banner s-banner__${variant} ${importantClass} is-pinned ps-relatives"
+        role="alert"
+        aria-hidden="false"
+    >
+        <div
+            class="d-flex flex__center jc-space-between s-banner--container"
+            role="alertdialog"
+            aria-describedby="banner-message"
+        >
+            <div aria-label="banner message">
+                Test Banner: ${variant} ${importantClass}
+            </div>
+            <div class="ml-auto myn8">
+                <span class="s-btn s-banner--btn">Close</span>
+            </div>
+        </div>
+    </aside>`;
+};
+
+describe("s-banner", () => {
+    it("should not introduce visual regressions for info banner", async () => {
+        const banner = await fixture(testBanner("info"));
+        await visualDiff(banner, "s-banner__info");
+    });
+    it("should not introduce visual regressions for important info banner", async () => {
+        const banner = await fixture(testBanner("info", true));
+        await visualDiff(banner, "s-banner__info-important");
+    });
+    it("should not introduce visual regressions for success banner", async () => {
+        const banner = await fixture(testBanner("success"));
+        await visualDiff(banner, "s-banner__success");
+    });
+    it("should not introduce visual regressions for important success banner", async () => {
+        const banner = await fixture(testBanner("success", true));
+        await visualDiff(banner, "s-banner__success-important");
+    });
+    it("should not introduce visual regressions for warning banner", async () => {
+        const banner = await fixture(testBanner("warning"));
+        await visualDiff(banner, "s-banner__warning");
+    });
+    it("should not introduce visual regressions for important warning banner", async () => {
+        const banner = await fixture(testBanner("warning", true));
+        await visualDiff(banner, "s-banner__warning-important");
+    });
+    it("should not introduce visual regressions for danger banner", async () => {
+        const banner = await fixture(testBanner("danger"));
+        await visualDiff(banner, "s-banner__danger");
+    });
+    it("should not introduce visual regressions for important danger banner", async () => {
+        const banner = await fixture(testBanner("danger", true));
+        await visualDiff(banner, "s-banner__danger-important");
+    });
+});

package/lib/test/s-button.visual.test.ts

@@ -0,0 +1,12 @@
+// import { html, fixture } from "@open-wc/testing";
+// import { visualDiff } from "@web/test-runner-visual-regression";
+// import "../ts/index";
+
+// describe("s-btn", () => {
+//     it("should not introduce visual regressions for loading button", async () => {
+//         const btn = await fixture(html`
+//             <button class="s-btn is-loading" type="button">Loading</button>
+//         `);
+//         await visualDiff(btn, "s-btn-is-loading");
+//     });
+// });

package/lib/test/s-toast.test.ts

@@ -0,0 +1,63 @@
+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 { showToast, hideToast } from "../ts/index";
+
+const user = userEvent.setup();
+
+const testToast = (hidden = true) => html` <button
+        class="js-open-test-toast"
+        data-toggle="s-toast"
+        data-target="#test-toast"
+    >
+        Show test toast
+    </button>
+    <button type="button" aria-label="Dismiss">Close toast</button>
+    <div
+        role="alertdialog"
+        id="test-toast"
+        class="s-toast"
+        aria-hidden="${hidden}"
+        aria-labelledby="toast-message"
+        data-controller="s-toast"
+        data-s-toast-target="toast"
+        data-s-toast-return-element=".js-open-test-toast[data-target='#test-toast']"
+        data-testid="test-toast"
+    >
+        <aside class="s-notice s-notice__success">
+            <div id="notice-message">Test toast</div>
+        </aside>
+    </div>`;
+
+describe("s-toast", () => {
+    it("trigger should make toast visible", async () => {
+        await fixture(testToast(true));
+
+        const button = screen.getAllByRole("button")[0]; // Trigger button
+        const toast = screen.getByTestId("test-toast");
+
+        expect(toast).to.have.attribute("aria-hidden", "true");
+        button.addEventListener("click", () => showToast(toast));
+
+        await user.click(button);
+        expect(toast).to.have.attribute("aria-hidden", "false");
+    });
+
+    it("trigger should hide toast", async () => {
+        await fixture(testToast(false));
+
+        const button = screen.getAllByRole("button")[1]; // Close button
+        const toast = screen.getByTestId("test-toast");
+
+        expect(toast).to.have.attribute("aria-hidden", "false");
+        button.addEventListener("click", () => hideToast(toast));
+
+        await user.click(button);
+        expect(toast).to.have.attribute("aria-hidden", "true");
+    });
+
+    // TODO: add test for refocus trigger
+
+    // TODO: add test for removing toast from DOM
+});

package/lib/test/s-toast.visual.test.ts

@@ -0,0 +1,48 @@
+import { html, fixture } from "@open-wc/testing";
+import { visualDiff } from "@web/test-runner-visual-regression";
+import "../ts/index";
+
+const testToast = (variant = "info", important = false) => {
+    const importantClass = important ? "s-notice__important" : "";
+
+    return html`<div class="s-toast" aria-hidden="false">
+        <aside class="s-notice s-notice__${variant} ${importantClass}">
+            Test toast: ${variant} ${importantClass}
+        </aside>
+    </div>`;
+};
+
+describe("s-toast", () => {
+    it("should not introduce visual regressions for info toast", async () => {
+        const toast = await fixture(testToast("info"));
+        await visualDiff(toast, "s-toast__info");
+    });
+    it("should not introduce visual regressions for important info toast", async () => {
+        const toast = await fixture(testToast("info", true));
+        await visualDiff(toast, "s-toast__info-important");
+    });
+    it("should not introduce visual regressions for success toast", async () => {
+        const toast = await fixture(testToast("success"));
+        await visualDiff(toast, "s-toast__success");
+    });
+    it("should not introduce visual regressions for important success toast", async () => {
+        const toast = await fixture(testToast("success", true));
+        await visualDiff(toast, "s-toast__success-important");
+    });
+    it("should not introduce visual regressions for warning toast", async () => {
+        const toast = await fixture(testToast("warning"));
+        await visualDiff(toast, "s-toast__warning");
+    });
+    it("should not introduce visual regressions for important warning toast", async () => {
+        const toast = await fixture(testToast("warning", true));
+        await visualDiff(toast, "s-toast__warning-important");
+    });
+    it("should not introduce visual regressions for danger toast", async () => {
+        const toast = await fixture(testToast("danger"));
+        await visualDiff(toast, "s-toast__danger");
+    });
+    it("should not introduce visual regressions for important danger toast", async () => {
+        const toast = await fixture(testToast("danger", true));
+        await visualDiff(toast, "s-toast__danger-important");
+    });
+});

package/lib/ts/controllers/index.ts

@@ -1,6 +1,8 @@
 // export all controllers *with helpers* so they can be bulk re-exported by the package entry point
 export { ExpandableController } from "./s-expandable-control";
 export { hideModal, ModalController, showModal } from "./s-modal";
+export { hideBanner, BannerController, showBanner } from "./s-banner";
+export { hideToast, ToastController, showToast } from "./s-toast";
 export { TabListController } from "./s-navigation-tablist";
 export {
     attachPopover,