@stackoverflow/stacks - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

lib/components/button/button.a11y.test.ts

@@ -0,1 +1,2 @@
+import testArgs from "./button.test.setup";
 import { runA11yTests } from "../../test/a11y-test-utils";
@@ -6,21 +7,16 @@ import "../../index";
     runA11yTests({
-        baseClass: "s-btn",
-        variants: ["danger", "muted"],
-        modifiers: {
-            primary: ["filled", "outlined"],
-            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
-            global: ["is-loading"],
-            standalone: [
-                ...["link", "unset"],
-                ...["facebook", "github", "google"],
-            ],
-        },
-        attributes: {
-            type: "button",
-        },
-        children: {
-            default: "Ask question",
-        },
-        tag: "button",
+        ...testArgs,
+        excludedTestids: [
+            /^s-btn-(?=.*unset).*badge$/, // s-btn with badge and unset variant not supported
+        ],
+        skippedTestids: [
+            // TODO resolve btn badge contrast issues
+            // matches tests with a badge in light and dark modes
+            /s-btn-(light|dark).*?badge/,
+            // matches tests with a badge in highcontrast-light modes, excluding filled, danger, github, facebook, sm, or xs
+            /s-btn-highcontrast-light-(?!.*(filled|danger|github|facebook|sm|xs)).*?badge/,
+            // matches tests with a badge in highcontrast-light modes, are muted and/or outlined, and are sm or xs
+            /s-btn-highcontrast-light-(?:muted-outlined-|muted-|outlined-)?(?:sm|xs).*?badge/,
+        ],
     });
 });

lib/components/button/button.visual.test.ts

@@ -1,39 +0,9 @@
-import { html } from "@open-wc/testing";
+import testArgs from "./button.test.setup";
 import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
+import { html } from "@open-wc/testing";
 
-const getChild = (child?: string): string => {
-    switch (child) {
-        case "badge":
-            return `Ask question
-                <span class="s-btn--badge">
-                    <span class="s-btn--number">198</span>
-                </span>`;
-        default:
-            return "Ask question";
-    }
-};
-
 describe("button", () => {
-    // TODO test disabled states, interaction pseudo-classes
     runVisualTests({
-        baseClass: "s-btn",
-        variants: ["danger", "muted"],
-        modifiers: {
-            primary: ["filled", "outlined"],
-            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
-            global: ["is-loading"],
-            standalone: [
-                ...["link", "unset"],
-                ...["facebook", "github", "google"],
-            ],
-        },
-        attributes: {
-            type: "button",
-        },
-        children: {
-            default: getChild(),
-            badge: getChild("badge"),
-        },
-        tag: "button",
+        ...testArgs,
         template: ({ component, testid }) => html`
@@ -40,0 +10,0 @@ <div

lib/components/topbar/topbar.visual.test.ts

@@ -13,2 +13,3 @@ import { runVisualTests } from "../../test/visual-test-utils";
 } from "@stackoverflow/stacks-icons/icons";
+import { html } from "@open-wc/testing";
 
@@ -189,2 +190,29 @@ const base64Image =
     });
+
+    // Custom theme variables
+    runVisualTests({
+        baseClass: "s-topbar",
+        children: {
+            themed: topbars.default,
+        },
+        template: ({ component, testid }) => html`
+            <div data-testid="${testid}">
+                <style type="text/css">
+                    .s-topbar {
+                        --theme-topbar-accent-border: red;
+                        --theme-topbar-background-color: green;
+                        --theme-topbar-bottom-border: blue;
+                        --theme-topbar-height: 80px;
+                        --theme-topbar-item-color: yellow;
+                        --theme-topbar-search-background: pink;
+                        --theme-topbar-search-border: purple;
+                        --theme-topbar-search-placeholder: white;
+                        --theme-topbar-select-background: lightblue;
+                        --theme-topbar-select-color: magenta;
+                    }
+                </style>
+                ${component}
+            </div>
+        `,
+    });
 });

lib/tsconfig.build.json

 {
     "extends": "./tsconfig.json",
-    "exclude": ["test/**/*.ts", "**/*.test.ts"]
+    "exclude": ["test/**/*.ts", "**/*.test.ts", "**/*.setup.ts"]
 }

lib/tsconfig.json

@@ -13,6 +13,6 @@ {
         "paths": {
-            "@open-wc/testing": ["./test/open-wc-testing-patch.d.ts"],
-        },
+            "@open-wc/testing": ["./test/open-wc-testing-patch.d.ts"]
+        }
     },
-    "include": ["**/*.ts"],
+    "include": ["**/*.ts"]
 }

package.json

@@ -8,3 +8,3 @@ {
     },
-    "version": "2.2.0",
+    "version": "2.3.0",
     "files": [
@@ -51,3 +51,3 @@ "dist",
         "@rollup/plugin-replace": "^5.0.5",
-        "@stackoverflow/stacks-editor": "^0.10.1",
+        "@stackoverflow/stacks-editor": "^0.10.2",
         "@stackoverflow/stacks-icons": "^6.0.1",
@@ -59,4 +59,4 @@ "@testing-library/dom": "^9.3.4",
         "@types/mocha": "^10.0.6",
-        "@typescript-eslint/eslint-plugin": "^6.20.0",
-        "@typescript-eslint/parser": "^6.21.0",
+        "@typescript-eslint/eslint-plugin": "^7.1.0",
+        "@typescript-eslint/parser": "^7.1.0",
         "@web/dev-server-esbuild": "^1.0.2",
@@ -68,11 +68,11 @@ "@web/dev-server-rollup": "^0.6.1",
         "apca-check": "^0.1.0",
-        "colorjs.io": "^0.4.5",
+        "colorjs.io": "^0.5.0",
         "concurrently": "^8.2.2",
         "css-loader": "^6.10.0",
         "cssbeautify": "^0.3.1",
-        "cssnano": "^6.0.3",
+        "cssnano": "^6.0.5",
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
@@ -84,6 +84,6 @@ "eslint-plugin-no-unsanitized": "^4.0.2",
         "markdown-it": "^14.0.0",
-        "mini-css-extract-plugin": "^2.8.0",
+        "mini-css-extract-plugin": "^2.8.1",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^8.0.0",
-        "prettier": "^3.2.4",
+        "postcss-loader": "^8.1.1",
+        "prettier": "^3.2.5",
         "rollup-plugin-postcss": "^4.0.2",
@@ -96,4 +96,4 @@ "stylelint": "^16.2.1",
         "typescript": "^5.3.3",
-        "vitest": "^1.2.2",
-        "webpack": "^5.90.1",
+        "vitest": "^1.3.1",
+        "webpack": "^5.90.3",
         "webpack-cli": "^5.1.4",
@@ -100,0 +100,0 @@ "webpack-merge": "^5.10.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3118149

increased by3.53%

Number of package files

227

increased by4.61%

Lines of code

45816

increased by4.84%

No dependency changes