@stackoverflow/stacks 1.10.4 → 1.10.5
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/lib/components/notice/notice.a11y.test.ts +22 -0
- package/lib/components/notice/notice.visual.test.ts +26 -0
- package/lib/components/pagination/pagination.a11y.test.ts +22 -0
- package/lib/components/pagination/pagination.visual.test.ts +26 -0
- package/lib/components/spinner/spinner.a11y.test.ts +15 -0
- package/lib/components/spinner/spinner.visual.test.ts +43 -0
- package/lib/components/toast/toast.a11y.test.ts +35 -0
- package/lib/components/toast/toast.visual.test.ts +10 -6
- package/package.json +6 -6
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
2
|
+
import "../../index";
|
|
3
|
+
|
|
4
|
+
describe("notice", () => {
|
|
5
|
+
runComponentTests({
|
|
6
|
+
type: "a11y",
|
|
7
|
+
baseClass: "s-notice",
|
|
8
|
+
variants: ["info", "success", "warning", "danger"],
|
|
9
|
+
modifiers: {
|
|
10
|
+
primary: ["important"],
|
|
11
|
+
},
|
|
12
|
+
children: {
|
|
13
|
+
default: `Test notice`,
|
|
14
|
+
},
|
|
15
|
+
tag: "aside",
|
|
16
|
+
skippedTestids: [
|
|
17
|
+
/s-notice-dark/,
|
|
18
|
+
"s-notice-light-success-important",
|
|
19
|
+
"s-notice-light-warning-important",
|
|
20
|
+
],
|
|
21
|
+
});
|
|
22
|
+
});
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
2
|
+
import { html } from "@open-wc/testing";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
describe("notice", () => {
|
|
6
|
+
runComponentTests({
|
|
7
|
+
type: "visual",
|
|
8
|
+
baseClass: "s-notice",
|
|
9
|
+
variants: ["info", "success", "warning", "danger"],
|
|
10
|
+
modifiers: {
|
|
11
|
+
primary: ["important"],
|
|
12
|
+
},
|
|
13
|
+
attributes: {
|
|
14
|
+
ariaHidden: "false",
|
|
15
|
+
},
|
|
16
|
+
children: {
|
|
17
|
+
default: `Test notice`,
|
|
18
|
+
},
|
|
19
|
+
tag: "aside",
|
|
20
|
+
template: ({ component, testid }) => html`
|
|
21
|
+
<div class="d-inline-block p8" data-testid="${testid}">
|
|
22
|
+
${component}
|
|
23
|
+
</div>
|
|
24
|
+
`,
|
|
25
|
+
});
|
|
26
|
+
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
2
|
+
import "../../index";
|
|
3
|
+
|
|
4
|
+
describe("pagination", () => {
|
|
5
|
+
runComponentTests({
|
|
6
|
+
type: "a11y",
|
|
7
|
+
baseClass: "s-pagination",
|
|
8
|
+
children: {
|
|
9
|
+
default: `
|
|
10
|
+
<a class="s-pagination--item" href="#">Prev</a>
|
|
11
|
+
<a class="s-pagination--item" href="#">1</a>
|
|
12
|
+
<span class="s-pagination--item is-selected" aria-current="page">2</span>
|
|
13
|
+
<a class="s-pagination--item" href="#">3</a>
|
|
14
|
+
<span class="s-pagination--item s-pagination--item__clear">…</span>
|
|
15
|
+
<a class="s-pagination--item" href="#">100</a>
|
|
16
|
+
<a class="s-pagination--item" href="#">Next</a>
|
|
17
|
+
`,
|
|
18
|
+
},
|
|
19
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
20
|
+
skippedTestids: ["s-pagination-dark", "s-pagination-light"],
|
|
21
|
+
});
|
|
22
|
+
});
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
describe("pagination", () => {
|
|
6
|
+
runComponentTests({
|
|
7
|
+
type: "visual",
|
|
8
|
+
baseClass: "s-pagination",
|
|
9
|
+
children: {
|
|
10
|
+
default: `
|
|
11
|
+
<a class="s-pagination--item" href="#">Prev</a>
|
|
12
|
+
<a class="s-pagination--item" href="#">1</a>
|
|
13
|
+
<span class="s-pagination--item is-selected" aria-current="page">2</span>
|
|
14
|
+
<a class="s-pagination--item" href="#">3</a>
|
|
15
|
+
<span class="s-pagination--item s-pagination--item__clear">…</span>
|
|
16
|
+
<a class="s-pagination--item" href="#">100</a>
|
|
17
|
+
<a class="s-pagination--item" href="#">Next</a>
|
|
18
|
+
`,
|
|
19
|
+
},
|
|
20
|
+
template: ({ component, testid }) => html`
|
|
21
|
+
<div class="d-inline-block p8" data-testid="${testid}">
|
|
22
|
+
${component}
|
|
23
|
+
</div>
|
|
24
|
+
`,
|
|
25
|
+
});
|
|
26
|
+
});
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
2
|
+
import "../../index";
|
|
3
|
+
|
|
4
|
+
describe("spinner", () => {
|
|
5
|
+
runComponentTests({
|
|
6
|
+
type: "a11y",
|
|
7
|
+
baseClass: "s-spinner",
|
|
8
|
+
modifiers: {
|
|
9
|
+
primary: ["xs", "sm", "md", "lg"],
|
|
10
|
+
},
|
|
11
|
+
children: {
|
|
12
|
+
default: `<div class="v-visible-sr">Loading…</div>`,
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
});
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
6
|
+
const template = ({ component, testid }: any) => html`
|
|
7
|
+
<div class="d-inline-block p8" data-testid="${testid}">${component}</div>
|
|
8
|
+
`;
|
|
9
|
+
describe("spinner", () => {
|
|
10
|
+
// default, sizes
|
|
11
|
+
runComponentTests({
|
|
12
|
+
type: "visual",
|
|
13
|
+
baseClass: "s-spinner",
|
|
14
|
+
modifiers: {
|
|
15
|
+
primary: ["xs", "sm", "md", "lg"],
|
|
16
|
+
},
|
|
17
|
+
children: {
|
|
18
|
+
default: `<div class="v-visible-sr">Loading…</div>`,
|
|
19
|
+
},
|
|
20
|
+
template,
|
|
21
|
+
});
|
|
22
|
+
// applied font color
|
|
23
|
+
runComponentTests({
|
|
24
|
+
type: "visual",
|
|
25
|
+
baseClass: "s-spinner",
|
|
26
|
+
modifiers: {
|
|
27
|
+
global: ["fc-theme-primary"],
|
|
28
|
+
},
|
|
29
|
+
children: {
|
|
30
|
+
default: `<div class="v-visible-sr">Loading…</div>`,
|
|
31
|
+
},
|
|
32
|
+
template,
|
|
33
|
+
});
|
|
34
|
+
// .is-loading
|
|
35
|
+
runComponentTests({
|
|
36
|
+
type: "visual",
|
|
37
|
+
baseClass: "is-loading",
|
|
38
|
+
children: {
|
|
39
|
+
default: `Loading…`,
|
|
40
|
+
},
|
|
41
|
+
template,
|
|
42
|
+
});
|
|
43
|
+
});
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
2
|
+
import { html } from "@open-wc/testing";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
describe("toast > notice", () => {
|
|
6
|
+
// This is a test of notice component wrapped in a toast component
|
|
7
|
+
runComponentTests({
|
|
8
|
+
type: "a11y",
|
|
9
|
+
baseClass: "s-notice", // s-toast is a wrapper around s-notice
|
|
10
|
+
variants: ["info", "success", "warning", "danger"],
|
|
11
|
+
modifiers: {
|
|
12
|
+
primary: ["important"],
|
|
13
|
+
},
|
|
14
|
+
children: {
|
|
15
|
+
toast: `<span id="message">Test toast</span>`,
|
|
16
|
+
},
|
|
17
|
+
tag: "aside",
|
|
18
|
+
template: ({ component, testid }) => html`
|
|
19
|
+
<div
|
|
20
|
+
class="s-toast ps-static t0 l0"
|
|
21
|
+
role="alertdialog"
|
|
22
|
+
aria-hidden="false"
|
|
23
|
+
aria-labelledby="message"
|
|
24
|
+
data-testid="${testid}"
|
|
25
|
+
>
|
|
26
|
+
${component}
|
|
27
|
+
</div>
|
|
28
|
+
`,
|
|
29
|
+
skippedTestids: [
|
|
30
|
+
/s-notice-dark.*-toast/,
|
|
31
|
+
"s-notice-light-success-important-toast",
|
|
32
|
+
"s-notice-light-warning-important-toast",
|
|
33
|
+
],
|
|
34
|
+
});
|
|
35
|
+
});
|
|
@@ -11,16 +11,20 @@ describe("toast > notice", () => {
|
|
|
11
11
|
modifiers: {
|
|
12
12
|
primary: ["important"],
|
|
13
13
|
},
|
|
14
|
-
attributes: {
|
|
15
|
-
ariaHidden: "false",
|
|
16
|
-
},
|
|
17
14
|
children: {
|
|
18
|
-
toast: "Test toast
|
|
15
|
+
toast: `<span id="message">Test toast</span>`,
|
|
19
16
|
},
|
|
20
17
|
tag: "aside",
|
|
21
18
|
template: ({ component, testid }) => html`
|
|
22
|
-
<div data-testid="${testid}"
|
|
23
|
-
|
|
19
|
+
<div class="d-inline-block p8" data-testid="${testid}">
|
|
20
|
+
<div
|
|
21
|
+
class="s-toast ps-static t0 l0"
|
|
22
|
+
role="alertdialog"
|
|
23
|
+
aria-hidden="false"
|
|
24
|
+
aria-labelledby="message"
|
|
25
|
+
>
|
|
26
|
+
${component}
|
|
27
|
+
</div>
|
|
24
28
|
</div>
|
|
25
29
|
`,
|
|
26
30
|
});
|
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.10.
|
|
8
|
+
"version": "1.10.5",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
"@stackoverflow/stacks-icons": "^5.5.0",
|
|
51
51
|
"@testing-library/dom": "^9.3.1",
|
|
52
52
|
"@testing-library/user-event": "^14.4.3",
|
|
53
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
|
54
|
-
"@typescript-eslint/parser": "^6.
|
|
53
|
+
"@typescript-eslint/eslint-plugin": "^6.5.0",
|
|
54
|
+
"@typescript-eslint/parser": "^6.6.0",
|
|
55
55
|
"@web/dev-server-esbuild": "^0.4.1",
|
|
56
56
|
"@web/dev-server-rollup": "^0.5.2",
|
|
57
|
-
"@web/test-runner": "^0.17.
|
|
57
|
+
"@web/test-runner": "^0.17.1",
|
|
58
58
|
"@web/test-runner-playwright": "^0.10.1",
|
|
59
59
|
"@web/test-runner-visual-regression": "^0.8.2",
|
|
60
60
|
"apca-w3": "^0.1.9",
|
|
@@ -67,14 +67,14 @@
|
|
|
67
67
|
"eslint": "^8.48.0",
|
|
68
68
|
"eslint-config-prettier": "^9.0.0",
|
|
69
69
|
"eslint-plugin-no-unsanitized": "^4.0.2",
|
|
70
|
-
"jquery": "^3.7.
|
|
70
|
+
"jquery": "^3.7.1",
|
|
71
71
|
"less-loader": "^11.1.3",
|
|
72
72
|
"list.js": "^2.3.1",
|
|
73
73
|
"markdown-it": "^13.0.1",
|
|
74
74
|
"mini-css-extract-plugin": "^2.7.6",
|
|
75
75
|
"postcss-less": "^6.0.0",
|
|
76
76
|
"postcss-loader": "^7.3.3",
|
|
77
|
-
"prettier": "^3.0.
|
|
77
|
+
"prettier": "^3.0.3",
|
|
78
78
|
"rollup-plugin-postcss": "^4.0.2",
|
|
79
79
|
"stylelint": "^15.10.3",
|
|
80
80
|
"stylelint-config-recommended": "^13.0.0",
|