@stackoverflow/stacks 1.8.0 → 1.9.1

package/package.json

@@ -1,105 +1,106 @@
-{
-  "name": "@stackoverflow/stacks",
-  "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/StackExchange/Stacks.git"
-  },
-  "version": "1.8.0",
-  "files": [
-    "dist",
-    "lib"
-  ],
-  "main": "./dist/js/stacks.js",
-  "types": "./dist/index.d.ts",
-  "style": "./dist/css/stacks.css",
-  "less": "./lib/css/stacks.less",
-  "unpkg": "dist/css/stacks.min.css",
-  "scripts": {
-    "start": "concurrently -n w: npm:start:*",
-    "build": "concurrently -n w: npm:build:*",
-    "build:bundle": "webpack --mode=production",
-    "build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
-    "start:webpack": "webpack --watch --config ./docs/webpack.config.js",
-    "start:eleventy": "cd ./docs && eleventy --serve",
-    "test": "web-test-runner",
-    "test:a11y": "web-test-runner --group=a11y",
-    "test:unit": "web-test-runner --group=unit",
-    "test:unit:watch": "web-test-runner --group=unit --watch",
-    "test:visual": "web-test-runner --group=visual",
-    "test:visual:update": "web-test-runner --group=visual --update-visual-baseline",
-    "prepublishOnly": "npm run build",
-    "lint": "concurrently -n w: npm:lint:*",
-    "lint:ts": "eslint ./lib/ts",
-    "lint:css": "stylelint ./lib/css",
-    "lint:format": "prettier --check ./lib"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@hotwired/stimulus": "^3.2.1",
-    "@popperjs/core": "^2.11.6"
-  },
-  "devDependencies": {
-    "@11ty/eleventy": "^2.0.0",
-    "@highlightjs/cdn-assets": "^11.7.0",
-    "@open-wc/testing": "^3.1.7",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@stackoverflow/stacks-editor": "^0.8.5",
-    "@stackoverflow/stacks-icons": "^5.3.1",
-    "@testing-library/dom": "^9.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
-    "@web/dev-server-esbuild": "^0.3.3",
-    "@web/dev-server-rollup": "0.3.21",
-    "@web/test-runner": "^0.15.0",
-    "@web/test-runner-playwright": "^0.9.0",
-    "@web/test-runner-visual-regression": "^0.7.0",
-    "concurrently": "^7.6.0",
-    "css-loader": "^6.7.3",
-    "cssnano": "^5.1.14",
-    "docsearch.js": "^2.6.3",
-    "eleventy-plugin-highlightjs": "^1.1.0",
-    "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-no-unsanitized": "^4.0.2",
-    "jquery": "^3.6.3",
-    "less-loader": "^11.1.0",
-    "list.js": "^2.3.1",
-    "markdown-it": "^13.0.1",
-    "mini-css-extract-plugin": "^2.7.2",
-    "postcss-less": "^6.0.0",
-    "postcss-loader": "^7.0.2",
-    "prettier": "^2.8.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "stylelint": "^15.2.0",
-    "stylelint-config-recommended": "^10.0.1",
-    "stylelint-config-standard": "^30.0.1",
-    "terser-webpack-plugin": "^5.3.6",
-    "ts-loader": "^9.4.2",
-    "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-merge": "^5.8.0"
-  },
-  "browserslist": [
-    "last 2 versions",
-    "not dead",
-    "not ie > 0",
-    "not op_mini all",
-    "not baidu > 0",
-    "not and_ff > 0",
-    "not and_qq > 0",
-    "not kaios > 0",
-    "not op_mob > 0",
-    "not ie_mob > 0",
-    "not and_uc > 0",
-    "not Samsung > 0",
-    "not Android > 0"
-  ],
-  "overrides": {
-    "aria-query": "~5.0.0"
-  }
-}
+{
+    "name": "@stackoverflow/stacks",
+    "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/StackExchange/Stacks.git"
+    },
+    "version": "1.9.1",
+    "files": [
+        "dist",
+        "lib"
+    ],
+    "main": "./dist/js/stacks.js",
+    "types": "./dist/index.d.ts",
+    "style": "./dist/css/stacks.css",
+    "less": "./lib/stacks.less",
+    "unpkg": "dist/css/stacks.min.css",
+    "scripts": {
+        "start": "concurrently -n w: npm:start:*",
+        "build": "concurrently -n w: npm:build:*",
+        "build:bundle": "webpack --mode=production",
+        "build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
+        "start:webpack": "webpack --watch --config ./docs/webpack.config.js",
+        "start:eleventy": "cd ./docs && eleventy --serve",
+        "test": "web-test-runner",
+        "test:a11y": "web-test-runner --group=a11y",
+        "test:unit": "web-test-runner --group=unit",
+        "test:unit:watch": "web-test-runner --group=unit --watch",
+        "test:visual": "web-test-runner --group=visual",
+        "test:visual:update": "web-test-runner --group=visual --update-visual-baseline",
+        "prepublishOnly": "npm run build",
+        "format": "prettier --write ./lib",
+        "lint": "concurrently -n w: npm:lint:*",
+        "lint:ts": "eslint ./lib",
+        "lint:css": "stylelint ./lib",
+        "lint:format": "prettier --check ./lib"
+    },
+    "license": "MIT",
+    "dependencies": {
+        "@hotwired/stimulus": "^3.2.1",
+        "@popperjs/core": "^2.11.7"
+    },
+    "devDependencies": {
+        "@11ty/eleventy": "^2.0.1",
+        "@highlightjs/cdn-assets": "^11.7.0",
+        "@open-wc/testing": "^3.1.8",
+        "@rollup/plugin-commonjs": "^24.1.0",
+        "@rollup/plugin-replace": "^5.0.2",
+        "@stackoverflow/stacks-editor": "^0.8.7",
+        "@stackoverflow/stacks-icons": "^5.3.1",
+        "@testing-library/dom": "^9.2.0",
+        "@testing-library/user-event": "^14.4.3",
+        "@typescript-eslint/eslint-plugin": "^5.59.2",
+        "@typescript-eslint/parser": "^5.59.1",
+        "@web/dev-server-esbuild": "^0.4.1",
+        "@web/dev-server-rollup": "^0.4.0",
+        "@web/test-runner": "^0.16.1",
+        "@web/test-runner-playwright": "^0.10.0",
+        "@web/test-runner-visual-regression": "^0.8.0",
+        "concurrently": "^8.0.1",
+        "css-loader": "^6.7.3",
+        "cssnano": "^6.0.0",
+        "docsearch.js": "^2.6.3",
+        "eleventy-plugin-highlightjs": "^1.1.0",
+        "eleventy-plugin-nesting-toc": "^1.3.0",
+        "eslint": "^8.38.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-no-unsanitized": "^4.0.2",
+        "jquery": "^3.6.4",
+        "less-loader": "^11.1.0",
+        "list.js": "^2.3.1",
+        "markdown-it": "^13.0.1",
+        "mini-css-extract-plugin": "^2.7.5",
+        "postcss-less": "^6.0.0",
+        "postcss-loader": "^7.2.4",
+        "prettier": "^2.8.8",
+        "rollup-plugin-postcss": "^4.0.2",
+        "stylelint": "^15.6.1",
+        "stylelint-config-recommended": "^12.0.0",
+        "stylelint-config-standard": "^33.0.0",
+        "terser-webpack-plugin": "^5.3.6",
+        "ts-loader": "^9.4.2",
+        "typescript": "^5.0.4",
+        "webpack": "^5.82.0",
+        "webpack-cli": "^5.0.2",
+        "webpack-merge": "^5.8.0"
+    },
+    "browserslist": [
+        "last 2 versions",
+        "not dead",
+        "not ie > 0",
+        "not op_mini all",
+        "not baidu > 0",
+        "not and_ff > 0",
+        "not and_qq > 0",
+        "not kaios > 0",
+        "not op_mob > 0",
+        "not ie_mob > 0",
+        "not and_uc > 0",
+        "not Samsung > 0",
+        "not Android > 0"
+    ],
+    "overrides": {
+        "aria-query": "~5.0.0"
+    }
+}

package/dist/controllers/index.d.ts

@@ -1,9 +0,0 @@
-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";

package/dist/controllers/s-table.d.ts

@@ -1,8 +0,0 @@
-import * as Stacks from "../stacks";
-export declare class TableController extends Stacks.StacksController {
-    static targets: string[];
-    readonly columnTarget: Element;
-    readonly columnTargets: Element[];
-    setCurrentSort(headElem: Element, direction: "asc" | "desc" | "none"): void;
-    sort(evt: Event): void;
-}

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