@stackoverflow/stacks 1.8.0 → 1.9.0

package/lib/css/stacks-static.less

@@ -1,87 +0,0 @@
-// stacks-static.less contains styles which we DO NOT allow communities to modify via variables
-// BASE
-@import "base/reset.less";
-@import "base/fieldset.less";
-@import "base/icons.less";
-@import "input-utils.less";
-
-// 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";
-@import "components/checkboxes-radios.less";
-@import "components/code-blocks.less";
-@import "components/description.less";
-@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/select.less";
-@import "components/sidebar-widgets.less";
-@import "components/spinner.less";
-@import "components/table.less";
-@import "components/tags.less";
-@import "components/toggle-switches.less";
-@import "components/topbar.less";
-@import "components/uploader.less";
-@import "components/user-cards.less";
-
-// LESS CONSTANTS AND MIXINS
-@import "exports/exports.less";
-
-// ATOMIC CLASSES
-@import "atomic/borders.less";
-@import "atomic/colors.less";
-@import "atomic/flex.less";
-@import "atomic/gap.less";
-@import "atomic/grid.less";
-@import "atomic/spacing.less";
-@import "atomic/typography.less";
-@import "atomic/misc.less";
-@import "atomic/width-height.less";
-
-/* stylelint-disable */
-#stacks-internals #screen-lg({
-    #stacks-internals-collect-large();
-});
-#stacks-internals #screen-md({
-    #stacks-internals-collect-medium();
-});
-#stacks-internals #screen-sm({
-    #stacks-internals-collect-small();
-});
-
-@media print { // We need printing styles to be last so they can override all other styles.
-    .print\:d-block & {
-        display: block !important;
-    }
-    .print\:d-none & {
-        display: none !important;
-    }
-}
-/* stylelint-enable */
-
-// CONFIG
-@import "base/configuration-static.less";
-@import "base/internals.less";
-
-// [1] The following items are elements which we DO NOT allow communities to modify via variables.

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

@@ -1,77 +0,0 @@
-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} 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();
-    });
-};
-
-// TODO move to test utils
-const buildTestid = (arr) => arr.filter(Boolean).join("-");
-
-describe("s-avatar", () => {
-    // Test default, high contrast themes
-    baseThemes.forEach((baseTheme) => {
-        // Test light, dark theme
-        colorThemes.forEach((colorTheme) => {
-            const theme = [baseTheme, colorTheme].filter(Boolean);
-            const testidBase = buildTestid(["s-avatar", ...theme]);
-
-            // Test each size
-            ["", ...avatarStyles.sizes].forEach((size) => {
-                const sizeClasses = size ? ` s-avatar__${size}` : "";
-                const classesSize = ` ${sizeClasses}`;
-                const testidSize = buildTestid([testidBase, size]);
-
-                // Test each size with each child
-                ["", ...avatarStyles.children].forEach((child) => {
-                    const testidChildren = buildTestid([
-                        testidSize,
-                        `with-${child}`,
-                    ]);
-
-                    makeTest({
-                        child,
-                        classes: classesSize,
-                        testid: testidChildren,
-                        theme,
-                    });
-                });
-            });
-        });
-    });
-});

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

@@ -1,61 +0,0 @@
-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-btn.a11y.test.ts

@@ -1,123 +0,0 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import "../ts/index";
-
-// TODO abstract to a helper file…
-// TODO reinstate "theme-dark" test once we add ability to skip tests or resolve dark mode contrast issues
-// const colorThemes = ["theme-dark", "theme-light"];
-const colorThemes = ["theme-light"];
-const baseThemes = ["", "theme-highcontrast"];
-
-const btnStyles = {
-    variants: ["danger", "muted", "primary"],
-    modifiers: ["filled", "outlined", "filled-outlined"],
-    secondaryModifiers: ["dropdown", "icon"],
-    globalModifiers: ["is-loading"],
-    sizes: ["xs", "sm", "md"],
-    resets: ["link", "unset"],
-    social: ["facebook", "github", "google"],
-    // TODO reinstate children test once we add ability to skip tests or resolve badge contrast issues
-    // children: ["badge"],
-};
-
-const makeTest = ({ testid, theme, classes, child = "" }) => {
-    it(`a11y: ${testid} should be accessible`, async () => {
-        await fixture(html`<button
-            class="s-btn${classes}"
-            role="button"
-            data-testid="${testid}"
-        >
-            Ask question
-            <span class="${child === "badge" ? "s-btn--badge" : "d-none"}">
-                <span class="s-btn--number">198</span>
-            </span>
-        </button>`);
-
-        document.body.className = "";
-        document.body.classList.add(...theme);
-        const button = screen.getByTestId(testid);
-        // TODO add conditional option for high contrast mode to test against AAA
-        await expect(button).to.be.accessible();
-    });
-};
-
-// TODO move to test utils
-const buildTestid = (arr) => arr.filter(Boolean).join("-");
-
-describe("s-btn", () => {
-    // Test default, high contrast themes
-    baseThemes.forEach((baseTheme) => {
-        // Test light, dark theme
-        colorThemes.forEach((colorTheme) => {
-            const theme = [baseTheme, colorTheme].filter(Boolean);
-            const testidBase = buildTestid(["s-btn", ...theme]);
-
-            // Test each combination of base modifiers
-            ["", ...btnStyles.modifiers].forEach((modifier) => {
-                const modifierClasses = modifier
-                    ? ` s-btn__${modifier.replace("-", " s-btn__")}`
-                    : "";
-
-                // Test each variant
-                ["", ...btnStyles.variants].forEach((variant) => {
-                    const variantClasses = variant ? ` s-btn__${variant}` : "";
-                    const classesVariant = ` ${variantClasses}${modifierClasses}`;
-                    const testidVariant = buildTestid([
-                        testidBase,
-                        variant,
-                        modifier,
-                    ]);
-
-                    // Test each variant with each child
-                    // TODO reinstate children test once we add ability to skip tests or resolve badge contrast issues
-                    // [...btnStyles.children].forEach((child) => {
-                    //     const testidChildren = `${testidVariant}${
-                    //         child ? `-with-${child}` : ""
-                    //     }`;
-                    //     makeTest({
-                    //         child,
-                    //         classes: classesVariant,
-                    //         testid: testidChildren,
-                    //         theme,
-                    //     });
-                    // });
-
-                    [
-                        "", // Test no additional classes
-                        ...btnStyles.sizes, // Test each size
-                        ...btnStyles.resets, // Test each reset
-                        ...btnStyles.social, // Test each social style
-                    ].forEach((style) => {
-                        const testidStyle = buildTestid([testidVariant, style]);
-                        const classesStyle = `${classesVariant}${
-                            style ? ` s-btn__${style}` : ""
-                        }`;
-
-                        makeTest({
-                            classes: classesStyle,
-                            testid: testidStyle,
-                            theme,
-                        });
-                    });
-
-                    // Test each globalModifier
-                    [...btnStyles.globalModifiers].forEach((globalModifier) => {
-                        const testidGlobal = buildTestid([
-                            testidVariant,
-                            globalModifier,
-                        ]);
-                        const classesGlobal = `${classesVariant}${
-                            globalModifier ? ` ${globalModifier}` : ""
-                        }`;
-
-                        makeTest({
-                            classes: classesGlobal,
-                            testid: testidGlobal,
-                            theme,
-                        });
-                    });
-                });
-            });
-        });
-    });
-});

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

@@ -1,16 +0,0 @@
-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 () => {
-        // Adding a padded wrapper to avoid GitHub Actions diff discrepancies
-        const btn = await fixture(html`
-            <div style="height: 38px; width: 88px; display: inline-block;">
-                <button class="s-btn is-loading" type="button">Loading</button>
-            </div>
-        `);
-
-        await visualDiff(btn, "s-btn-is-loading");
-    });
-});

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

@@ -1,48 +0,0 @@
-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,17 +0,0 @@
-// 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,
-    detachPopover,
-    hidePopover,
-    BasePopoverController,
-    PopoverController,
-    showPopover,
-} from "./s-popover";
-export { TableController } from "./s-table";
-export { setTooltipHtml, setTooltipText, TooltipController } from "./s-tooltip";
-export { UploaderController } from "./s-uploader";