@stackoverflow/stacks 1.7.1 → 1.9.0

package/lib/css/stacks-static.less

@@ -1,97 +0,0 @@
-//
-//  STACK OVERFLOW
-//  STATIC STACK ELEMENTS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  This is where all the magic happens.
-//
-//  ============================================================================
-//  $   STATIC ELEMENTS
-//      The following items are elements which we DO NOT allow communities
-//      to modify via variables.
-//  ----------------------------------------------------------------------------
-@import "base/reset.less";
-@import "base/icons.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/code-blocks.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/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();
-});
-
-// We need printing styles to be last so they can override all other styles.
-.print\:d-block {
-    @media print {
-        display: block !important;
-    }
-}
-
-.print\:d-none {
-    @media print {
-        display: none !important;
-    }
-}
-/* stylelint-enable */
-
-//  --  CONFIG
-@import "base/configuration-static.less";
-@import "base/internals.less";

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

@@ -1,74 +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} 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.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-button.visual.test.ts

@@ -1,12 +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 () => {
-//         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.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";