@stackoverflow/stacks 1.10.2 → 1.10.4
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/dist/css/stacks.css +4 -0
- package/dist/css/stacks.min.css +1 -1
- package/dist/js/stacks.js +265 -110
- package/dist/js/stacks.min.js +1 -1
- package/lib/atomic/typography.less +4 -0
- package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +7 -5
- package/lib/components/anchor/anchor.a11y.test.ts +10 -3
- package/lib/components/badge/badge.a11y.test.ts +45 -6
- package/lib/components/badge/badge.visual.test.ts +27 -5
- package/lib/components/banner/banner.a11y.test.ts +14 -0
- package/lib/components/block-link/block-link.a11y.test.ts +9 -2
- package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +2 -0
- package/lib/components/button/button.a11y.test.ts +132 -1
- package/lib/components/card/card.a11y.test.ts +6 -0
- package/lib/components/check-control/check-control.a11y.test.ts +9 -1
- package/lib/components/description/description.a11y.test.ts +5 -1
- package/lib/components/expandable/expandable.a11y.test.ts +27 -0
- package/lib/components/expandable/expandable.visual.test.ts +27 -0
- package/lib/components/link/link.a11y.test.ts +19 -6
- package/lib/components/link-preview/link-preview.a11y.test.ts +55 -0
- package/lib/components/link-preview/link-preview.visual.test.ts +52 -0
- package/lib/components/toggle-switch/toggle-switch.a11y.test.ts +5 -2
- package/lib/components/toggle-switch/toggle-switch.less +1 -0
- package/lib/components/toggle-switch/toggle-switch.visual.test.ts +12 -11
- package/lib/test/axe-apca/README.md +34 -0
- package/lib/test/axe-apca/index.ts +3 -0
- package/lib/test/axe-apca/package.wip.json +30 -0
- package/lib/test/axe-apca/src/apca-w3.d.ts +3 -0
- package/lib/test/axe-apca/src/axe-apca.test.ts +155 -0
- package/lib/test/axe-apca/src/axe-apca.ts +212 -0
- package/lib/test/test-utils.ts +18 -1
- package/lib/tsconfig.json +1 -0
- package/package.json +13 -12
|
@@ -25,6 +25,15 @@ describe("badge", () => {
|
|
|
25
25
|
</span>`,
|
|
26
26
|
},
|
|
27
27
|
tag: "span",
|
|
28
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
29
|
+
skippedTestids: [
|
|
30
|
+
"s-badge-dark",
|
|
31
|
+
"s-badge-dark-gold",
|
|
32
|
+
"s-badge-dark",
|
|
33
|
+
"s-badge-dark-silver",
|
|
34
|
+
"s-badge-dark",
|
|
35
|
+
"s-badge-dark-bronze",
|
|
36
|
+
],
|
|
28
37
|
});
|
|
29
38
|
});
|
|
30
39
|
|
|
@@ -41,12 +50,18 @@ describe("badge", () => {
|
|
|
41
50
|
includeNullModifier: false,
|
|
42
51
|
},
|
|
43
52
|
tag: "span",
|
|
53
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
44
54
|
skippedTestids: [
|
|
45
|
-
"s-badge-dark-answered",
|
|
46
|
-
"s-badge-dark-important",
|
|
47
|
-
"s-badge-dark-rep-down",
|
|
48
|
-
"s-badge-light-answered",
|
|
49
|
-
"s-badge-light-rep",
|
|
55
|
+
"s-badge-dark-answered",
|
|
56
|
+
"s-badge-dark-important",
|
|
57
|
+
"s-badge-dark-rep-down",
|
|
58
|
+
"s-badge-light-answered",
|
|
59
|
+
"s-badge-light-rep",
|
|
60
|
+
"s-badge-dark",
|
|
61
|
+
"s-badge-dark-bounty",
|
|
62
|
+
"s-badge-dark-rep",
|
|
63
|
+
"s-badge-dark-votes",
|
|
64
|
+
"s-badge-light-rep-down",
|
|
50
65
|
],
|
|
51
66
|
});
|
|
52
67
|
|
|
@@ -67,6 +82,13 @@ describe("badge", () => {
|
|
|
67
82
|
includeNullModifier: false,
|
|
68
83
|
},
|
|
69
84
|
tag: "span",
|
|
85
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
86
|
+
skippedTestids: [
|
|
87
|
+
"s-badge-dark-danger-icon",
|
|
88
|
+
"s-badge-dark-icon",
|
|
89
|
+
"s-badge-light-danger-icon",
|
|
90
|
+
"s-badge-light-warning-icon",
|
|
91
|
+
],
|
|
70
92
|
});
|
|
71
93
|
|
|
72
94
|
// Filled badges
|
|
@@ -87,6 +109,11 @@ describe("badge", () => {
|
|
|
87
109
|
includeNullVariant: false,
|
|
88
110
|
},
|
|
89
111
|
tag: "span",
|
|
112
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
113
|
+
skippedTestids: [
|
|
114
|
+
"s-badge-dark-danger-icon",
|
|
115
|
+
"s-badge-light-danger-icon",
|
|
116
|
+
],
|
|
90
117
|
});
|
|
91
118
|
|
|
92
119
|
// User badges
|
|
@@ -101,8 +128,18 @@ describe("badge", () => {
|
|
|
101
128
|
default: "user",
|
|
102
129
|
},
|
|
103
130
|
tag: "span",
|
|
131
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
104
132
|
skippedTestids: [
|
|
105
|
-
/^s-badge-dark-admin.*/,
|
|
133
|
+
/^s-badge-dark-admin.*/,
|
|
134
|
+
"s-badge-dark",
|
|
135
|
+
"s-badge-dark-sm",
|
|
136
|
+
"s-badge-dark-xs",
|
|
137
|
+
"s-badge-light-admin",
|
|
138
|
+
"s-badge-light-admin-sm",
|
|
139
|
+
"s-badge-light-admin-xs",
|
|
140
|
+
"s-badge-light-staff",
|
|
141
|
+
"s-badge-light-staff-sm",
|
|
142
|
+
"s-badge-light-staff-xs",
|
|
106
143
|
],
|
|
107
144
|
});
|
|
108
145
|
|
|
@@ -117,5 +154,7 @@ describe("badge", () => {
|
|
|
117
154
|
default: "size badge",
|
|
118
155
|
},
|
|
119
156
|
tag: "span",
|
|
157
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
158
|
+
skippedTestids: ["s-badge-dark", "s-badge-dark-sm", "s-badge-dark-xs"],
|
|
120
159
|
});
|
|
121
160
|
});
|
|
@@ -24,7 +24,18 @@ const template = ({ component, testid }: any) => html`
|
|
|
24
24
|
`;
|
|
25
25
|
|
|
26
26
|
describe("badge", () => {
|
|
27
|
-
//
|
|
27
|
+
// Base badge
|
|
28
|
+
runComponentTests({
|
|
29
|
+
type: "visual",
|
|
30
|
+
baseClass: "s-badge",
|
|
31
|
+
children: {
|
|
32
|
+
default: `base badge`,
|
|
33
|
+
},
|
|
34
|
+
tag: "span",
|
|
35
|
+
template,
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
// Award badges
|
|
28
39
|
variants.blings.map((bling) => {
|
|
29
40
|
runComponentTests({
|
|
30
41
|
type: "visual",
|
|
@@ -32,9 +43,14 @@ describe("badge", () => {
|
|
|
32
43
|
variants: [bling],
|
|
33
44
|
children: {
|
|
34
45
|
default: `<span class="s-award-bling s-award-bling__${bling}">
|
|
35
|
-
|
|
46
|
+
with bling
|
|
36
47
|
</span>`,
|
|
37
48
|
},
|
|
49
|
+
options: {
|
|
50
|
+
...defaultOptions,
|
|
51
|
+
includeNullVariant: false,
|
|
52
|
+
includeNullModifier: false,
|
|
53
|
+
},
|
|
38
54
|
tag: "span",
|
|
39
55
|
template,
|
|
40
56
|
});
|
|
@@ -50,6 +66,7 @@ describe("badge", () => {
|
|
|
50
66
|
},
|
|
51
67
|
options: {
|
|
52
68
|
...defaultOptions,
|
|
69
|
+
includeNullVariant: false,
|
|
53
70
|
includeNullModifier: false,
|
|
54
71
|
},
|
|
55
72
|
tag: "span",
|
|
@@ -81,9 +98,6 @@ describe("badge", () => {
|
|
|
81
98
|
type: "visual",
|
|
82
99
|
baseClass: "s-badge",
|
|
83
100
|
variants: variants.states.filled,
|
|
84
|
-
modifiers: {
|
|
85
|
-
primary: ["icon"],
|
|
86
|
-
},
|
|
87
101
|
children: {
|
|
88
102
|
default: "filled",
|
|
89
103
|
// icon: Icons.IconEyeOffSm, // TODO fix the icon imports
|
|
@@ -108,6 +122,10 @@ describe("badge", () => {
|
|
|
108
122
|
children: {
|
|
109
123
|
default: "user badge",
|
|
110
124
|
},
|
|
125
|
+
options: {
|
|
126
|
+
...defaultOptions,
|
|
127
|
+
includeNullVariant: false,
|
|
128
|
+
},
|
|
111
129
|
tag: "span",
|
|
112
130
|
template,
|
|
113
131
|
});
|
|
@@ -122,6 +140,10 @@ describe("badge", () => {
|
|
|
122
140
|
children: {
|
|
123
141
|
default: "size badge",
|
|
124
142
|
},
|
|
143
|
+
options: {
|
|
144
|
+
...defaultOptions,
|
|
145
|
+
includeNullModifier: false,
|
|
146
|
+
},
|
|
125
147
|
tag: "span",
|
|
126
148
|
template,
|
|
127
149
|
});
|
|
@@ -33,5 +33,19 @@ describe("banner", () => {
|
|
|
33
33
|
children: {
|
|
34
34
|
default: bannerChild,
|
|
35
35
|
},
|
|
36
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
37
|
+
skippedTestids: [
|
|
38
|
+
"s-banner-dark",
|
|
39
|
+
"s-banner-dark-danger",
|
|
40
|
+
"s-banner-dark-danger-important",
|
|
41
|
+
"s-banner-dark-important",
|
|
42
|
+
"s-banner-dark-info",
|
|
43
|
+
"s-banner-dark-success",
|
|
44
|
+
"s-banner-dark-success-important",
|
|
45
|
+
"s-banner-dark-warning",
|
|
46
|
+
"s-banner-dark-warning-important",
|
|
47
|
+
"s-banner-light-success-important",
|
|
48
|
+
"s-banner-light-warning-important",
|
|
49
|
+
],
|
|
36
50
|
});
|
|
37
51
|
});
|
|
@@ -23,6 +23,8 @@ describe("block-link", () => {
|
|
|
23
23
|
default: `block link`,
|
|
24
24
|
},
|
|
25
25
|
template: blockLinkTemplate,
|
|
26
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
27
|
+
skippedTestids: ["s-block-link-dark"],
|
|
26
28
|
});
|
|
27
29
|
|
|
28
30
|
// Base + danger
|
|
@@ -39,8 +41,12 @@ describe("block-link", () => {
|
|
|
39
41
|
...defaultOptions,
|
|
40
42
|
includeNullModifier: false,
|
|
41
43
|
},
|
|
42
|
-
skippedTestids: ["s-block-link-dark-danger"],
|
|
43
44
|
template: blockLinkTemplate,
|
|
45
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
46
|
+
skippedTestids: [
|
|
47
|
+
"s-block-link-dark-danger",
|
|
48
|
+
"s-block-link-light-danger",
|
|
49
|
+
],
|
|
44
50
|
});
|
|
45
51
|
|
|
46
52
|
// All left and rignt variants
|
|
@@ -58,12 +64,13 @@ describe("block-link", () => {
|
|
|
58
64
|
...defaultOptions,
|
|
59
65
|
includeNullVariant: false,
|
|
60
66
|
},
|
|
67
|
+
template: blockLinkTemplate,
|
|
68
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
61
69
|
skippedTestids: [
|
|
62
70
|
"s-block-link-dark-left-is-selected-danger",
|
|
63
71
|
"s-block-link-dark-right-is-selected-danger",
|
|
64
72
|
"s-block-link-light-left-is-selected-danger",
|
|
65
73
|
"s-block-link-light-right-is-selected-danger",
|
|
66
74
|
],
|
|
67
|
-
template: blockLinkTemplate,
|
|
68
75
|
});
|
|
69
76
|
});
|
|
@@ -25,8 +25,139 @@ describe("button", () => {
|
|
|
25
25
|
excludedTestids: [
|
|
26
26
|
/primary-outlined/, // This combination is not supported
|
|
27
27
|
],
|
|
28
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
28
29
|
skippedTestids: [
|
|
29
|
-
|
|
30
|
+
"s-btn-light",
|
|
31
|
+
"s-btn-light-dropdown",
|
|
32
|
+
"s-btn-light-dropdown-is-loading",
|
|
33
|
+
"s-btn-light-icon",
|
|
34
|
+
"s-btn-light-icon-is-loading",
|
|
35
|
+
"s-btn-light-is-loading",
|
|
36
|
+
"s-btn-light-link",
|
|
37
|
+
"s-btn-light-muted-filled",
|
|
38
|
+
"s-btn-light-muted-filled-dropdown",
|
|
39
|
+
"s-btn-light-muted-filled-dropdown-is-loading",
|
|
40
|
+
"s-btn-light-muted-filled-icon",
|
|
41
|
+
"s-btn-light-muted-filled-icon-is-loading",
|
|
42
|
+
"s-btn-light-muted-filled-is-loading",
|
|
43
|
+
"s-btn-light-muted-filled-sm",
|
|
44
|
+
"s-btn-light-muted-filled-sm-is-loading",
|
|
45
|
+
"s-btn-light-muted-filled-xs",
|
|
46
|
+
"s-btn-light-muted-filled-xs-is-loading",
|
|
47
|
+
"s-btn-light-outlined",
|
|
48
|
+
"s-btn-light-outlined-dropdown",
|
|
49
|
+
"s-btn-light-outlined-dropdown-is-loading",
|
|
50
|
+
"s-btn-light-outlined-icon",
|
|
51
|
+
"s-btn-light-outlined-icon-is-loading",
|
|
52
|
+
"s-btn-light-outlined-is-loading",
|
|
53
|
+
"s-btn-light-outlined-sm",
|
|
54
|
+
"s-btn-light-outlined-sm-is-loading",
|
|
55
|
+
"s-btn-light-outlined-xs",
|
|
56
|
+
"s-btn-light-outlined-xs-is-loading",
|
|
57
|
+
"s-btn-light-sm",
|
|
58
|
+
"s-btn-light-sm-is-loading",
|
|
59
|
+
"s-btn-light-xs",
|
|
60
|
+
"s-btn-light-xs-is-loading",
|
|
61
|
+
"s-btn-dark",
|
|
62
|
+
"s-btn-dark-danger",
|
|
63
|
+
"s-btn-dark-danger-dropdown",
|
|
64
|
+
"s-btn-dark-danger-dropdown-is-loading",
|
|
65
|
+
"s-btn-dark-danger-icon",
|
|
66
|
+
"s-btn-dark-danger-icon-is-loading",
|
|
67
|
+
"s-btn-dark-danger-is-loading",
|
|
68
|
+
"s-btn-dark-danger-md",
|
|
69
|
+
"s-btn-dark-danger-md-is-loading",
|
|
70
|
+
"s-btn-dark-danger-outlined",
|
|
71
|
+
"s-btn-dark-danger-outlined-dropdown",
|
|
72
|
+
"s-btn-dark-danger-outlined-dropdown-is-loading",
|
|
73
|
+
"s-btn-dark-danger-outlined-icon",
|
|
74
|
+
"s-btn-dark-danger-outlined-icon-is-loading",
|
|
75
|
+
"s-btn-dark-danger-outlined-is-loading",
|
|
76
|
+
"s-btn-dark-danger-outlined-md",
|
|
77
|
+
"s-btn-dark-danger-outlined-md-is-loading",
|
|
78
|
+
"s-btn-dark-danger-outlined-sm",
|
|
79
|
+
"s-btn-dark-danger-outlined-sm-is-loading",
|
|
80
|
+
"s-btn-dark-danger-outlined-xs",
|
|
81
|
+
"s-btn-dark-danger-outlined-xs-is-loading",
|
|
82
|
+
"s-btn-dark-danger-sm",
|
|
83
|
+
"s-btn-dark-danger-sm-is-loading",
|
|
84
|
+
"s-btn-dark-danger-xs",
|
|
85
|
+
"s-btn-dark-danger-xs-is-loading",
|
|
86
|
+
"s-btn-dark-dropdown",
|
|
87
|
+
"s-btn-dark-dropdown-is-loading",
|
|
88
|
+
"s-btn-dark-filled",
|
|
89
|
+
"s-btn-dark-filled-dropdown",
|
|
90
|
+
"s-btn-dark-filled-dropdown-is-loading",
|
|
91
|
+
"s-btn-dark-filled-icon",
|
|
92
|
+
"s-btn-dark-filled-icon-is-loading",
|
|
93
|
+
"s-btn-dark-filled-is-loading",
|
|
94
|
+
"s-btn-dark-filled-sm",
|
|
95
|
+
"s-btn-dark-filled-sm-is-loading",
|
|
96
|
+
"s-btn-dark-filled-xs",
|
|
97
|
+
"s-btn-dark-filled-xs-is-loading",
|
|
98
|
+
"s-btn-dark-google",
|
|
99
|
+
"s-btn-dark-icon",
|
|
100
|
+
"s-btn-dark-icon-is-loading",
|
|
101
|
+
"s-btn-dark-is-loading",
|
|
102
|
+
"s-btn-dark-link",
|
|
103
|
+
"s-btn-dark-md",
|
|
104
|
+
"s-btn-dark-md-is-loading",
|
|
105
|
+
"s-btn-dark-muted",
|
|
106
|
+
"s-btn-dark-muted-dropdown",
|
|
107
|
+
"s-btn-dark-muted-dropdown-is-loading",
|
|
108
|
+
"s-btn-dark-muted-filled",
|
|
109
|
+
"s-btn-dark-muted-filled-dropdown",
|
|
110
|
+
"s-btn-dark-muted-filled-dropdown-is-loading",
|
|
111
|
+
"s-btn-dark-muted-filled-icon",
|
|
112
|
+
"s-btn-dark-muted-filled-icon-is-loading",
|
|
113
|
+
"s-btn-dark-muted-filled-is-loading",
|
|
114
|
+
"s-btn-dark-muted-filled-sm",
|
|
115
|
+
"s-btn-dark-muted-filled-sm-is-loading",
|
|
116
|
+
"s-btn-dark-muted-filled-xs",
|
|
117
|
+
"s-btn-dark-muted-filled-xs-is-loading",
|
|
118
|
+
"s-btn-dark-muted-icon",
|
|
119
|
+
"s-btn-dark-muted-icon-is-loading",
|
|
120
|
+
"s-btn-dark-muted-is-loading",
|
|
121
|
+
"s-btn-dark-muted-outlined",
|
|
122
|
+
"s-btn-dark-muted-outlined-dropdown",
|
|
123
|
+
"s-btn-dark-muted-outlined-dropdown-is-loading",
|
|
124
|
+
"s-btn-dark-muted-outlined-icon",
|
|
125
|
+
"s-btn-dark-muted-outlined-icon-is-loading",
|
|
126
|
+
"s-btn-dark-muted-outlined-is-loading",
|
|
127
|
+
"s-btn-dark-muted-outlined-sm",
|
|
128
|
+
"s-btn-dark-muted-outlined-sm-is-loading",
|
|
129
|
+
"s-btn-dark-muted-outlined-xs",
|
|
130
|
+
"s-btn-dark-muted-outlined-xs-is-loading",
|
|
131
|
+
"s-btn-dark-muted-sm",
|
|
132
|
+
"s-btn-dark-muted-sm-is-loading",
|
|
133
|
+
"s-btn-dark-muted-xs",
|
|
134
|
+
"s-btn-dark-muted-xs-is-loading",
|
|
135
|
+
"s-btn-dark-outlined",
|
|
136
|
+
"s-btn-dark-outlined-dropdown",
|
|
137
|
+
"s-btn-dark-outlined-dropdown-is-loading",
|
|
138
|
+
"s-btn-dark-outlined-icon",
|
|
139
|
+
"s-btn-dark-outlined-icon-is-loading",
|
|
140
|
+
"s-btn-dark-outlined-is-loading",
|
|
141
|
+
"s-btn-dark-outlined-md",
|
|
142
|
+
"s-btn-dark-outlined-md-is-loading",
|
|
143
|
+
"s-btn-dark-outlined-sm",
|
|
144
|
+
"s-btn-dark-outlined-sm-is-loading",
|
|
145
|
+
"s-btn-dark-outlined-xs",
|
|
146
|
+
"s-btn-dark-outlined-xs-is-loading",
|
|
147
|
+
"s-btn-dark-primary-filled",
|
|
148
|
+
"s-btn-dark-primary-filled-dropdown",
|
|
149
|
+
"s-btn-dark-primary-filled-dropdown-is-loading",
|
|
150
|
+
"s-btn-dark-primary-filled-icon",
|
|
151
|
+
"s-btn-dark-primary-filled-icon-is-loading",
|
|
152
|
+
"s-btn-dark-primary-filled-is-loading",
|
|
153
|
+
"s-btn-dark-primary-filled-sm",
|
|
154
|
+
"s-btn-dark-primary-filled-sm-is-loading",
|
|
155
|
+
"s-btn-dark-primary-filled-xs",
|
|
156
|
+
"s-btn-dark-primary-filled-xs-is-loading",
|
|
157
|
+
"s-btn-dark-sm",
|
|
158
|
+
"s-btn-dark-sm-is-loading",
|
|
159
|
+
"s-btn-dark-xs",
|
|
160
|
+
"s-btn-dark-xs-is-loading",
|
|
30
161
|
],
|
|
31
162
|
});
|
|
32
163
|
});
|
|
@@ -9,5 +9,11 @@ describe("card", () => {
|
|
|
9
9
|
children: {
|
|
10
10
|
default: `<p>This is a description of the card’s content.</p>`,
|
|
11
11
|
},
|
|
12
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
13
|
+
skippedTestids: [
|
|
14
|
+
"s-card-dark-muted",
|
|
15
|
+
"s-card-light-muted",
|
|
16
|
+
"s-card-highcontrast-light-muted",
|
|
17
|
+
],
|
|
12
18
|
});
|
|
13
19
|
});
|
|
@@ -29,10 +29,18 @@ import "../../index";
|
|
|
29
29
|
...defaultOptions,
|
|
30
30
|
testidSuffix: `${state}-${type}`,
|
|
31
31
|
},
|
|
32
|
-
// TODO
|
|
32
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
33
33
|
skippedTestids: [
|
|
34
34
|
/^s-check-control-dark-has-error-(checked|unchecked)-(checkbox|radio)$/,
|
|
35
35
|
/^s-check-control-light-has-(success|warning)-(checked|unchecked)-(checkbox|radio)$/,
|
|
36
|
+
"s-check-control-dark-has-success-checked-checkbox",
|
|
37
|
+
"s-check-control-light-has-error-checked-checkbox",
|
|
38
|
+
"s-check-control-dark-has-success-unchecked-checkbox",
|
|
39
|
+
"s-check-control-light-has-error-unchecked-checkbox",
|
|
40
|
+
"s-check-control-dark-has-success-checked-radio",
|
|
41
|
+
"s-check-control-light-has-error-checked-radio",
|
|
42
|
+
"s-check-control-dark-has-success-unchecked-radio",
|
|
43
|
+
"s-check-control-light-has-error-unchecked-radio",
|
|
36
44
|
],
|
|
37
45
|
});
|
|
38
46
|
});
|
|
@@ -24,7 +24,11 @@ import "../../index";
|
|
|
24
24
|
${component}
|
|
25
25
|
</div>
|
|
26
26
|
`,
|
|
27
|
-
|
|
27
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
28
|
+
skippedTestids: [
|
|
29
|
+
/^.*-is-disabled$/, // TODO: should these the disabled tests be excluded all together instead of skipped?
|
|
30
|
+
"s-description-dark",
|
|
31
|
+
],
|
|
28
32
|
});
|
|
29
33
|
});
|
|
30
34
|
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
describe("expandable", () => {
|
|
6
|
+
runComponentTests({
|
|
7
|
+
type: "a11y",
|
|
8
|
+
baseClass: "s-expandable",
|
|
9
|
+
modifiers: {
|
|
10
|
+
global: ["is-expanded"],
|
|
11
|
+
},
|
|
12
|
+
children: {
|
|
13
|
+
default: `
|
|
14
|
+
<div class="s-expandable--content">
|
|
15
|
+
<p class="mb8">Expandable: Lorem ipsum dolor sit amet, ex iudicabit necessitatibus usu, cetero laboramus concludaturque mel no, facilisis posidonium cu cum. Pro ex senserit dissentiunt, imperdiet intellegam at sed, ex pri dicit eruditi convenire. Est harum movet gubergren ei, errem dictas evertitur ea sit, at mei oratio eligendi. Ad vis legere possit, vis ne ipsum democritum appellantur. Nullam ancillae iudicabit his ad.</p>
|
|
16
|
+
</div>
|
|
17
|
+
`,
|
|
18
|
+
},
|
|
19
|
+
template: ({ component, testid }) => html`
|
|
20
|
+
<div class="ws2 p8" data-testid="${testid}">
|
|
21
|
+
<div><p>Before expandable content</p></div>
|
|
22
|
+
${component}
|
|
23
|
+
<div><p>After expandable content</p></div>
|
|
24
|
+
</div>
|
|
25
|
+
`,
|
|
26
|
+
});
|
|
27
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
describe("expandable", () => {
|
|
6
|
+
runComponentTests({
|
|
7
|
+
type: "visual",
|
|
8
|
+
baseClass: "s-expandable",
|
|
9
|
+
modifiers: {
|
|
10
|
+
global: ["is-expanded"],
|
|
11
|
+
},
|
|
12
|
+
children: {
|
|
13
|
+
default: `
|
|
14
|
+
<div class="s-expandable--content">
|
|
15
|
+
<p class="mb8">Expandable: Lorem ipsum dolor sit amet, ex iudicabit necessitatibus usu, cetero laboramus concludaturque mel no, facilisis posidonium cu cum. Pro ex senserit dissentiunt, imperdiet intellegam at sed, ex pri dicit eruditi convenire. Est harum movet gubergren ei, errem dictas evertitur ea sit, at mei oratio eligendi. Ad vis legere possit, vis ne ipsum democritum appellantur. Nullam ancillae iudicabit his ad.</p>
|
|
16
|
+
</div>
|
|
17
|
+
`,
|
|
18
|
+
},
|
|
19
|
+
template: ({ component, testid }) => html`
|
|
20
|
+
<div class="ws2 p8" data-testid="${testid}">
|
|
21
|
+
<div><p>Before expandable content</p></div>
|
|
22
|
+
${component}
|
|
23
|
+
<div><p>After expandable content</p></div>
|
|
24
|
+
</div>
|
|
25
|
+
`,
|
|
26
|
+
});
|
|
27
|
+
});
|
|
@@ -24,13 +24,26 @@ describe("link", () => {
|
|
|
24
24
|
attributes: {
|
|
25
25
|
href: "#",
|
|
26
26
|
},
|
|
27
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
27
28
|
skippedTestids: [
|
|
28
|
-
"s-link-dark",
|
|
29
|
-
"s-link-dark-dropdown",
|
|
30
|
-
"s-link-dark-danger",
|
|
31
|
-
"s-link-dark-danger-dropdown",
|
|
32
|
-
"s-link-dark-underlined",
|
|
33
|
-
"s-link-dark-underlined-dropdown",
|
|
29
|
+
"s-link-dark",
|
|
30
|
+
"s-link-dark-dropdown",
|
|
31
|
+
"s-link-dark-danger",
|
|
32
|
+
"s-link-dark-danger-dropdown",
|
|
33
|
+
"s-link-dark-underlined",
|
|
34
|
+
"s-link-dark-underlined-dropdown",
|
|
35
|
+
"s-link-dark-muted",
|
|
36
|
+
"s-link-dark-muted-dropdown",
|
|
37
|
+
"s-link-dark-visited",
|
|
38
|
+
"s-link-dark-visited-dropdown",
|
|
39
|
+
"s-link-light",
|
|
40
|
+
"s-link-light-danger",
|
|
41
|
+
"s-link-light-danger-dropdown",
|
|
42
|
+
"s-link-light-dropdown",
|
|
43
|
+
"s-link-light-muted",
|
|
44
|
+
"s-link-light-muted-dropdown",
|
|
45
|
+
"s-link-light-underlined",
|
|
46
|
+
"s-link-light-underlined-dropdown",
|
|
34
47
|
],
|
|
35
48
|
});
|
|
36
49
|
});
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
2
|
+
import "../../index";
|
|
3
|
+
|
|
4
|
+
const getChild = (child?: string): string => {
|
|
5
|
+
return `
|
|
6
|
+
<div class="s-link-preview--header">
|
|
7
|
+
<div class="s-link-preview--icon">👋</div>
|
|
8
|
+
<div>
|
|
9
|
+
<a href="#" class="s-link-preview--title">
|
|
10
|
+
Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?
|
|
11
|
+
</a>
|
|
12
|
+
<div class="s-link-preview--details">
|
|
13
|
+
Issue submitted by Ricky Otero on <relative-time datetime="2019-08-12T04:05:22Z" title="Aug 12, 2019, 12:05 AM EDT">Aug 12, 2019</relative-time> • <strong>RESOLVED</strong>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
${
|
|
18
|
+
child
|
|
19
|
+
? child
|
|
20
|
+
: `
|
|
21
|
+
<div class="s-link-preview--body">
|
|
22
|
+
<p>I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.</p>
|
|
23
|
+
<p>The result of this call (an array of user data), needs to be exported as a function and called in another file.</p>
|
|
24
|
+
<p>If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!</p>
|
|
25
|
+
<p>Thanks!</p>
|
|
26
|
+
</div>
|
|
27
|
+
`
|
|
28
|
+
}
|
|
29
|
+
<div class="s-link-preview--footer">
|
|
30
|
+
<a href="#" class="s-link-preview--url">https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1</a>
|
|
31
|
+
<a href="#" class="s-link-preview--misc">Privacy notice</a>
|
|
32
|
+
</div>
|
|
33
|
+
`;
|
|
34
|
+
};
|
|
35
|
+
describe("link preview", () => {
|
|
36
|
+
runComponentTests({
|
|
37
|
+
type: "a11y",
|
|
38
|
+
baseClass: "s-link-preview",
|
|
39
|
+
children: {
|
|
40
|
+
default: getChild(),
|
|
41
|
+
code: getChild(`
|
|
42
|
+
<div class="s-link-preview--code">
|
|
43
|
+
<pre class="language-js s-code-block" tabindex="0"><code class="language-js s-code-block"><span class="hljs-meta">'use strict'</span>;</code></pre>
|
|
44
|
+
</div>
|
|
45
|
+
`),
|
|
46
|
+
},
|
|
47
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
48
|
+
skippedTestids: [
|
|
49
|
+
"s-link-preview-dark",
|
|
50
|
+
"s-link-preview-dark-code",
|
|
51
|
+
"s-link-preview-light",
|
|
52
|
+
"s-link-preview-light-code",
|
|
53
|
+
],
|
|
54
|
+
});
|
|
55
|
+
});
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
const getChild = (child?: string): string => {
|
|
6
|
+
return `
|
|
7
|
+
<div class="s-link-preview--header">
|
|
8
|
+
<div class="s-link-preview--icon">👋</div>
|
|
9
|
+
<div>
|
|
10
|
+
<a href="#" class="s-link-preview--title">
|
|
11
|
+
Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?
|
|
12
|
+
</a>
|
|
13
|
+
<div class="s-link-preview--details">
|
|
14
|
+
Issue submitted by Ricky Otero on <relative-time datetime="2019-08-12T04:05:22Z" title="Aug 12, 2019, 12:05 AM EDT">Aug 12, 2019</relative-time> • <strong>RESOLVED</strong>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
${
|
|
19
|
+
child
|
|
20
|
+
? child
|
|
21
|
+
: `
|
|
22
|
+
<div class="s-link-preview--body">
|
|
23
|
+
<p>I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.</p>
|
|
24
|
+
<p>The result of this call (an array of user data), needs to be exported as a function and called in another file.</p>
|
|
25
|
+
<p>If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!</p>
|
|
26
|
+
<p>Thanks!</p>
|
|
27
|
+
</div>
|
|
28
|
+
`
|
|
29
|
+
}
|
|
30
|
+
<div class="s-link-preview--footer">
|
|
31
|
+
<a href="#" class="s-link-preview--url">https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1</a>
|
|
32
|
+
<a href="#" class="s-link-preview--misc">Privacy notice</a>
|
|
33
|
+
</div>
|
|
34
|
+
`;
|
|
35
|
+
};
|
|
36
|
+
describe("link preview", () => {
|
|
37
|
+
runComponentTests({
|
|
38
|
+
type: "visual",
|
|
39
|
+
baseClass: "s-link-preview",
|
|
40
|
+
children: {
|
|
41
|
+
default: getChild(),
|
|
42
|
+
code: getChild(`
|
|
43
|
+
<div class="s-link-preview--code">
|
|
44
|
+
<pre class="language-js s-code-block" tabindex="0"><code class="language-js s-code-block"><span class="hljs-meta">'use strict'</span>;</code></pre>
|
|
45
|
+
</div>
|
|
46
|
+
`),
|
|
47
|
+
},
|
|
48
|
+
template: ({ component, testid }) => html`
|
|
49
|
+
<div class="ws8 p8" data-testid="${testid}">${component}</div>
|
|
50
|
+
`,
|
|
51
|
+
});
|
|
52
|
+
});
|
|
@@ -64,9 +64,12 @@ describe("toggle-switch", () => {
|
|
|
64
64
|
template: ({ component, testid }) => html`
|
|
65
65
|
<div data-testid="${testid}">${component}</div>
|
|
66
66
|
`,
|
|
67
|
+
// TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
|
|
67
68
|
skippedTestids: [
|
|
68
|
-
"s-toggle-switch-dark-multiple",
|
|
69
|
-
"s-toggle-switch-light-multiple",
|
|
69
|
+
"s-toggle-switch-dark-multiple",
|
|
70
|
+
"s-toggle-switch-light-multiple",
|
|
71
|
+
"s-toggle-switch-dark-multiple-off",
|
|
72
|
+
"s-toggle-switch-light-multiple-off",
|
|
70
73
|
],
|
|
71
74
|
});
|
|
72
75
|
});
|