@stackoverflow/stacks 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/css/stacks.css +677 -508
- package/dist/css/stacks.min.css +1 -1
- package/lib/css/base/fieldset.less +5 -0
- package/lib/css/components/buttons.less +4 -4
- package/lib/css/components/checkboxes-radios.less +158 -0
- package/lib/css/components/description.less +9 -0
- package/lib/css/components/inputs.less +198 -567
- package/lib/css/components/labels.less +4 -4
- package/lib/css/components/link.less +23 -8
- package/lib/css/components/post-summary.less +10 -2
- package/lib/css/components/select.less +148 -0
- package/lib/css/components/tags.less +3 -3
- package/lib/css/components/toggle-switches.less +8 -0
- package/lib/css/exports/mixins.less +73 -11
- package/lib/css/input-utils.less +44 -0
- package/lib/css/stacks-static.less +16 -26
- package/lib/test/s-avatar.a11y.test.ts +77 -0
- package/lib/test/s-btn.a11y.test.ts +123 -0
- package/lib/test/{s-button.visual.test.ts → s-btn.visual.test.ts} +5 -1
- package/package.json +17 -16
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { html, fixture, expect } from "@open-wc/testing";
|
|
2
|
+
import { screen } from "@testing-library/dom";
|
|
3
|
+
import "../ts/index";
|
|
4
|
+
|
|
5
|
+
// TODO abstract to a helper file…
|
|
6
|
+
// TODO reinstate "theme-dark" test once we add ability to skip tests or resolve dark mode contrast issues
|
|
7
|
+
// const colorThemes = ["theme-dark", "theme-light"];
|
|
8
|
+
const colorThemes = ["theme-light"];
|
|
9
|
+
const baseThemes = ["", "theme-highcontrast"];
|
|
10
|
+
|
|
11
|
+
const btnStyles = {
|
|
12
|
+
variants: ["danger", "muted", "primary"],
|
|
13
|
+
modifiers: ["filled", "outlined", "filled-outlined"],
|
|
14
|
+
secondaryModifiers: ["dropdown", "icon"],
|
|
15
|
+
globalModifiers: ["is-loading"],
|
|
16
|
+
sizes: ["xs", "sm", "md"],
|
|
17
|
+
resets: ["link", "unset"],
|
|
18
|
+
social: ["facebook", "github", "google"],
|
|
19
|
+
// TODO reinstate children test once we add ability to skip tests or resolve badge contrast issues
|
|
20
|
+
// children: ["badge"],
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const makeTest = ({ testid, theme, classes, child = "" }) => {
|
|
24
|
+
it(`a11y: ${testid} should be accessible`, async () => {
|
|
25
|
+
await fixture(html`<button
|
|
26
|
+
class="s-btn${classes}"
|
|
27
|
+
role="button"
|
|
28
|
+
data-testid="${testid}"
|
|
29
|
+
>
|
|
30
|
+
Ask question
|
|
31
|
+
<span class="${child === "badge" ? "s-btn--badge" : "d-none"}">
|
|
32
|
+
<span class="s-btn--number">198</span>
|
|
33
|
+
</span>
|
|
34
|
+
</button>`);
|
|
35
|
+
|
|
36
|
+
document.body.className = "";
|
|
37
|
+
document.body.classList.add(...theme);
|
|
38
|
+
const button = screen.getByTestId(testid);
|
|
39
|
+
// TODO add conditional option for high contrast mode to test against AAA
|
|
40
|
+
await expect(button).to.be.accessible();
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
// TODO move to test utils
|
|
45
|
+
const buildTestid = (arr) => arr.filter(Boolean).join("-");
|
|
46
|
+
|
|
47
|
+
describe("s-btn", () => {
|
|
48
|
+
// Test default, high contrast themes
|
|
49
|
+
baseThemes.forEach((baseTheme) => {
|
|
50
|
+
// Test light, dark theme
|
|
51
|
+
colorThemes.forEach((colorTheme) => {
|
|
52
|
+
const theme = [baseTheme, colorTheme].filter(Boolean);
|
|
53
|
+
const testidBase = buildTestid(["s-btn", ...theme]);
|
|
54
|
+
|
|
55
|
+
// Test each combination of base modifiers
|
|
56
|
+
["", ...btnStyles.modifiers].forEach((modifier) => {
|
|
57
|
+
const modifierClasses = modifier
|
|
58
|
+
? ` s-btn__${modifier.replace("-", " s-btn__")}`
|
|
59
|
+
: "";
|
|
60
|
+
|
|
61
|
+
// Test each variant
|
|
62
|
+
["", ...btnStyles.variants].forEach((variant) => {
|
|
63
|
+
const variantClasses = variant ? ` s-btn__${variant}` : "";
|
|
64
|
+
const classesVariant = ` ${variantClasses}${modifierClasses}`;
|
|
65
|
+
const testidVariant = buildTestid([
|
|
66
|
+
testidBase,
|
|
67
|
+
variant,
|
|
68
|
+
modifier,
|
|
69
|
+
]);
|
|
70
|
+
|
|
71
|
+
// Test each variant with each child
|
|
72
|
+
// TODO reinstate children test once we add ability to skip tests or resolve badge contrast issues
|
|
73
|
+
// [...btnStyles.children].forEach((child) => {
|
|
74
|
+
// const testidChildren = `${testidVariant}${
|
|
75
|
+
// child ? `-with-${child}` : ""
|
|
76
|
+
// }`;
|
|
77
|
+
// makeTest({
|
|
78
|
+
// child,
|
|
79
|
+
// classes: classesVariant,
|
|
80
|
+
// testid: testidChildren,
|
|
81
|
+
// theme,
|
|
82
|
+
// });
|
|
83
|
+
// });
|
|
84
|
+
|
|
85
|
+
[
|
|
86
|
+
"", // Test no additional classes
|
|
87
|
+
...btnStyles.sizes, // Test each size
|
|
88
|
+
...btnStyles.resets, // Test each reset
|
|
89
|
+
...btnStyles.social, // Test each social style
|
|
90
|
+
].forEach((style) => {
|
|
91
|
+
const testidStyle = buildTestid([testidVariant, style]);
|
|
92
|
+
const classesStyle = `${classesVariant}${
|
|
93
|
+
style ? ` s-btn__${style}` : ""
|
|
94
|
+
}`;
|
|
95
|
+
|
|
96
|
+
makeTest({
|
|
97
|
+
classes: classesStyle,
|
|
98
|
+
testid: testidStyle,
|
|
99
|
+
theme,
|
|
100
|
+
});
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// Test each globalModifier
|
|
104
|
+
[...btnStyles.globalModifiers].forEach((globalModifier) => {
|
|
105
|
+
const testidGlobal = buildTestid([
|
|
106
|
+
testidVariant,
|
|
107
|
+
globalModifier,
|
|
108
|
+
]);
|
|
109
|
+
const classesGlobal = `${classesVariant}${
|
|
110
|
+
globalModifier ? ` ${globalModifier}` : ""
|
|
111
|
+
}`;
|
|
112
|
+
|
|
113
|
+
makeTest({
|
|
114
|
+
classes: classesGlobal,
|
|
115
|
+
testid: testidGlobal,
|
|
116
|
+
theme,
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
});
|
|
122
|
+
});
|
|
123
|
+
});
|
|
@@ -4,9 +4,13 @@ import "../ts/index";
|
|
|
4
4
|
|
|
5
5
|
describe("s-btn", () => {
|
|
6
6
|
it("should not introduce visual regressions for loading button", async () => {
|
|
7
|
+
// Adding a padded wrapper to avoid GitHub Actions diff discrepancies
|
|
7
8
|
const btn = await fixture(html`
|
|
8
|
-
<
|
|
9
|
+
<div style="height: 38px; width: 88px; display: inline-block;">
|
|
10
|
+
<button class="s-btn is-loading" type="button">Loading</button>
|
|
11
|
+
</div>
|
|
9
12
|
`);
|
|
13
|
+
|
|
10
14
|
await visualDiff(btn, "s-btn-is-loading");
|
|
11
15
|
});
|
|
12
16
|
});
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/StackExchange/Stacks.git"
|
|
7
7
|
},
|
|
8
|
-
"version": "1.
|
|
8
|
+
"version": "1.8.0",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"start:webpack": "webpack --watch --config ./docs/webpack.config.js",
|
|
24
24
|
"start:eleventy": "cd ./docs && eleventy --serve",
|
|
25
25
|
"test": "web-test-runner",
|
|
26
|
+
"test:a11y": "web-test-runner --group=a11y",
|
|
26
27
|
"test:unit": "web-test-runner --group=unit",
|
|
27
28
|
"test:unit:watch": "web-test-runner --group=unit --watch",
|
|
28
29
|
"test:visual": "web-test-runner --group=visual",
|
|
@@ -39,48 +40,48 @@
|
|
|
39
40
|
"@popperjs/core": "^2.11.6"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
|
-
"@11ty/eleventy": "^
|
|
43
|
+
"@11ty/eleventy": "^2.0.0",
|
|
43
44
|
"@highlightjs/cdn-assets": "^11.7.0",
|
|
44
45
|
"@open-wc/testing": "^3.1.7",
|
|
45
46
|
"@rollup/plugin-commonjs": "^24.0.1",
|
|
46
47
|
"@rollup/plugin-replace": "^5.0.2",
|
|
47
|
-
"@stackoverflow/stacks-editor": "^0.8.
|
|
48
|
-
"@stackoverflow/stacks-icons": "^5.
|
|
49
|
-
"@testing-library/dom": "^
|
|
48
|
+
"@stackoverflow/stacks-editor": "^0.8.5",
|
|
49
|
+
"@stackoverflow/stacks-icons": "^5.3.1",
|
|
50
|
+
"@testing-library/dom": "^9.0.0",
|
|
50
51
|
"@testing-library/user-event": "^14.4.3",
|
|
51
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
52
|
-
"@typescript-eslint/parser": "^5.
|
|
52
|
+
"@typescript-eslint/eslint-plugin": "^5.52.0",
|
|
53
|
+
"@typescript-eslint/parser": "^5.52.0",
|
|
53
54
|
"@web/dev-server-esbuild": "^0.3.3",
|
|
54
55
|
"@web/dev-server-rollup": "0.3.21",
|
|
55
56
|
"@web/test-runner": "^0.15.0",
|
|
56
57
|
"@web/test-runner-playwright": "^0.9.0",
|
|
57
58
|
"@web/test-runner-visual-regression": "^0.7.0",
|
|
58
59
|
"concurrently": "^7.6.0",
|
|
59
|
-
"css-loader": "^6.7.
|
|
60
|
+
"css-loader": "^6.7.3",
|
|
60
61
|
"cssnano": "^5.1.14",
|
|
61
62
|
"docsearch.js": "^2.6.3",
|
|
62
63
|
"eleventy-plugin-highlightjs": "^1.1.0",
|
|
63
64
|
"eleventy-plugin-nesting-toc": "^1.3.0",
|
|
64
|
-
"eslint": "^8.
|
|
65
|
+
"eslint": "^8.34.0",
|
|
65
66
|
"eslint-config-prettier": "^8.6.0",
|
|
66
67
|
"eslint-plugin-no-unsanitized": "^4.0.2",
|
|
67
|
-
"jquery": "^3.6.
|
|
68
|
+
"jquery": "^3.6.3",
|
|
68
69
|
"less-loader": "^11.1.0",
|
|
69
70
|
"list.js": "^2.3.1",
|
|
70
71
|
"markdown-it": "^13.0.1",
|
|
71
72
|
"mini-css-extract-plugin": "^2.7.2",
|
|
72
73
|
"postcss-less": "^6.0.0",
|
|
73
74
|
"postcss-loader": "^7.0.2",
|
|
74
|
-
"prettier": "^2.8.
|
|
75
|
+
"prettier": "^2.8.4",
|
|
75
76
|
"rollup-plugin-postcss": "^4.0.2",
|
|
76
|
-
"stylelint": "^
|
|
77
|
-
"stylelint-config-recommended": "^
|
|
78
|
-
"stylelint-config-standard": "^
|
|
77
|
+
"stylelint": "^15.2.0",
|
|
78
|
+
"stylelint-config-recommended": "^10.0.1",
|
|
79
|
+
"stylelint-config-standard": "^30.0.1",
|
|
79
80
|
"terser-webpack-plugin": "^5.3.6",
|
|
80
81
|
"ts-loader": "^9.4.2",
|
|
81
|
-
"typescript": "^4.9.
|
|
82
|
+
"typescript": "^4.9.5",
|
|
82
83
|
"webpack": "^5.75.0",
|
|
83
|
-
"webpack-cli": "^5.0.
|
|
84
|
+
"webpack-cli": "^5.0.1",
|
|
84
85
|
"webpack-merge": "^5.8.0"
|
|
85
86
|
},
|
|
86
87
|
"browserslist": [
|