@stackoverflow/stacks 1.7.0 → 1.7.1
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.
|
@@ -13,6 +13,21 @@ a,
|
|
|
13
13
|
|
|
14
14
|
// STATES
|
|
15
15
|
&.s-link {
|
|
16
|
+
&__danger,
|
|
17
|
+
&__grayscale,
|
|
18
|
+
&__inherit,
|
|
19
|
+
&__muted,
|
|
20
|
+
&__visited {
|
|
21
|
+
&:visited {
|
|
22
|
+
&:active,
|
|
23
|
+
&:hover {
|
|
24
|
+
color: var(--_li-fc-hover);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
color: var(--_li-fc-visited);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
16
31
|
// MODIFIERS
|
|
17
32
|
&__dropdown {
|
|
18
33
|
&:after {
|
|
@@ -71,14 +86,7 @@ a,
|
|
|
71
86
|
// INTERACTION
|
|
72
87
|
&:active,
|
|
73
88
|
&:hover {
|
|
74
|
-
|
|
75
|
-
&:visited {
|
|
76
|
-
color: var(--_li-fc-hover);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&:visited {
|
|
81
|
-
color: var(--_li-fc-visited);
|
|
89
|
+
color: var(--_li-fc-hover);
|
|
82
90
|
}
|
|
83
91
|
|
|
84
92
|
color: var(--_li-fc);
|
|
@@ -0,0 +1,74 @@
|
|
|
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… maybe create a helper function to test in all themes
|
|
6
|
+
const colorThemes = ["theme-dark", "theme-light"];
|
|
7
|
+
const baseThemes = ["", "theme-highcontrast"];
|
|
8
|
+
|
|
9
|
+
const avatarStyles = {
|
|
10
|
+
sizes: ["24", "32", "48", "64", "96", "128"],
|
|
11
|
+
children: ["image", "letter"],
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const makeTest = ({ testid, theme, classes, child = "" }) => {
|
|
15
|
+
it(`a11y: ${testid} styles in should be accessible`, async () => {
|
|
16
|
+
await fixture(html`<a
|
|
17
|
+
href="#"
|
|
18
|
+
class="s-avatar${classes}"
|
|
19
|
+
data-testid="${testid}"
|
|
20
|
+
>
|
|
21
|
+
<div
|
|
22
|
+
class="${child === "letter" ? "s-avatar--letter" : "d-none"}"
|
|
23
|
+
aria-hidden="true"
|
|
24
|
+
>
|
|
25
|
+
S
|
|
26
|
+
</div>
|
|
27
|
+
<img
|
|
28
|
+
class="${child === "image" ? "s-avatar--image" : "d-none"}"
|
|
29
|
+
src="https://picsum.photos/48"
|
|
30
|
+
alt="team logo"
|
|
31
|
+
/>
|
|
32
|
+
<span class="v-visible-sr">Stack Overflow</span>
|
|
33
|
+
</a>`);
|
|
34
|
+
|
|
35
|
+
document.body.className = "";
|
|
36
|
+
document.body.classList.add(...theme);
|
|
37
|
+
const avatar = screen.getByTestId(testid);
|
|
38
|
+
// TODO add conditional option for high contrast mode to test against AAA
|
|
39
|
+
await expect(avatar).to.be.accessible();
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
describe("s-avatar", () => {
|
|
44
|
+
// Test default, high contrast themes
|
|
45
|
+
baseThemes.forEach((baseTheme) => {
|
|
46
|
+
// Test light, dark theme
|
|
47
|
+
colorThemes.forEach((colorTheme) => {
|
|
48
|
+
const testidBase = `s-avatar-${
|
|
49
|
+
baseTheme ? `${baseTheme}-` : ""
|
|
50
|
+
}${colorTheme}`;
|
|
51
|
+
const theme = [baseTheme, colorTheme].filter(Boolean);
|
|
52
|
+
|
|
53
|
+
// Test each size
|
|
54
|
+
["", ...avatarStyles.sizes].forEach((size) => {
|
|
55
|
+
const sizeClasses = size ? ` s-avatar__${size}` : "";
|
|
56
|
+
const classesSize = ` ${sizeClasses}`;
|
|
57
|
+
const testidSize = `${testidBase}-${size}`;
|
|
58
|
+
|
|
59
|
+
// Test each size with each child
|
|
60
|
+
["", ...avatarStyles.children].forEach((child) => {
|
|
61
|
+
const testidChildren = `${testidSize}${
|
|
62
|
+
child ? `-with-${child}` : ""
|
|
63
|
+
}`;
|
|
64
|
+
makeTest({
|
|
65
|
+
child,
|
|
66
|
+
classes: classesSize,
|
|
67
|
+
testid: testidChildren,
|
|
68
|
+
theme,
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { html, fixture } from "@open-wc/testing";
|
|
2
|
-
import { visualDiff } from "@web/test-runner-visual-regression";
|
|
3
|
-
import "../ts/index";
|
|
1
|
+
// import { html, fixture } from "@open-wc/testing";
|
|
2
|
+
// import { visualDiff } from "@web/test-runner-visual-regression";
|
|
3
|
+
// import "../ts/index";
|
|
4
4
|
|
|
5
|
-
describe("s-btn", () => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
});
|
|
5
|
+
// describe("s-btn", () => {
|
|
6
|
+
// it("should not introduce visual regressions for loading button", async () => {
|
|
7
|
+
// const btn = await fixture(html`
|
|
8
|
+
// <button class="s-btn is-loading" type="button">Loading</button>
|
|
9
|
+
// `);
|
|
10
|
+
// await visualDiff(btn, "s-btn-is-loading");
|
|
11
|
+
// });
|
|
12
|
+
// });
|