Skip to content

Commit 38b0b76

Browse files
castastrophecastastrophe
authored
chore(button,link): add more static color tests (#3374)
1 parent a0486b3 commit 38b0b76

File tree

5 files changed

+146
-82
lines changed

5 files changed

+146
-82
lines changed

‎.storybook/decorators/utilities.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const Heading = ({
1616
content,
1717
size = "l",
1818
weight,
19+
withMargin = false,
1920
} = {}, context = {}) => {
2021
if (!content) return nothing;
2122

@@ -26,6 +27,7 @@ const Heading = ({
2627
"font-size": "11px",
2728
"line-height": "1.3",
2829
"font-weight": "700",
30+
"margin-block-end": withMargin ? "8px" : "0",
2931
};
3032

3133
if ((size === "xxs" && semantics === "heading") || size === "l") {
@@ -46,7 +48,7 @@ const Heading = ({
4648
}
4749
}
4850

49-
if (context.globals?.color.startsWith("dark")) {
51+
if (context.globals?.color?.startsWith("dark")) {
5052
headingStyles["color"] = context?.args?.staticColor ?? "white";
5153
}
5254
else if (typeof context?.args?.staticColor !== "undefined") {
@@ -110,7 +112,7 @@ export const Container = ({
110112
if (withBorder) {
111113
borderStyles["padding-inline"] = "24px";
112114
borderStyles["padding-block"] = "24px";
113-
borderStyles["border"] = "1px solid var(--spectrum-gray-200)";
115+
borderStyles["border"] = "1px solid rgba(var(--spectrum-gray-600-rgb), 20%)";
114116
borderStyles["border-radius"] = "4px";
115117
gap = 80;
116118
}
@@ -528,9 +530,13 @@ export const Variants = ({
528530
export const renderContent = (content = [], {
529531
context = {},
530532
args = {},
531-
callback = (args, context) => {
532-
console.log(JSON.stringify(args, null, 2), JSON.stringify(context, null, 2));
533-
return nothing;
533+
callback = ({ testHeading, content, ...args }, context) => {
534+
return html`
535+
<div>
536+
${testHeading ? Heading({ content: testHeading, withMargin: true }, context) : nothing}
537+
${content ? renderContent(content, { args, context }) : nothing}
538+
</div>
539+
`;
534540
}
535541
} = {}) => {
536542
// If the content is not an array, make it an array for easier processing
@@ -542,6 +548,8 @@ export const renderContent = (content = [], {
542548

543549
return html`
544550
${content.map((c) => {
551+
if (typeof c === "undefined") return nothing;
552+
545553
/* If the content is an object (but not a lit object), we need to merge the object with the template */
546554
if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
547555
return callback({ ...args, ...c }, context);

‎components/actionbutton/stories/actionbutton.test.js

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,22 +59,42 @@ export const ActionButtonGroup = Variants({
5959
isQuiet: true,
6060
},
6161
{
62-
Template: Truncation,
63-
testHeading: "Truncation",
64-
label: "Truncate this long content",
65-
customStyles: {
66-
maxInlineSize: "100px"
67-
},
68-
withStates: false,
62+
testHeading: "Static black",
63+
staticColor: "black",
6964
},
7065
{
71-
testHeading: "Static black",
66+
testHeading: "Static black - emphasized",
67+
staticColor: "black",
68+
isEmphasized: true,
69+
},
70+
{
71+
testHeading: "Static black - quiet",
7272
staticColor: "black",
73+
isQuiet: true,
7374
},
7475
{
7576
testHeading: "Static white",
7677
staticColor: "white",
7778
},
79+
{
80+
testHeading: "Static white - emphasized",
81+
staticColor: "white",
82+
isEmphasized: true,
83+
},
84+
{
85+
testHeading: "Static white - quiet",
86+
staticColor: "white",
87+
isQuiet: true,
88+
},
89+
{
90+
Template: Truncation,
91+
testHeading: "Truncation",
92+
label: "Truncate this long content",
93+
customStyles: {
94+
maxInlineSize: "100px"
95+
},
96+
withStates: false,
97+
},
7898
{
7999
testHeading: "Internationalization (Thai)",
80100
label: "ล้างทั้งหมด",

‎components/button/stories/button.test.js

Lines changed: 87 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,130 @@
1-
import { Variants } from "@spectrum-css/preview/decorators";
2-
import { html } from "lit";
3-
import { capitalize } from "lodash-es";
1+
import { ArgGrid, Container, Variants } from "@spectrum-css/preview/decorators";
42
import { Template } from "./template.js";
53

64
/**
75
* Multiple button variations displayed in one story template.
86
* Used as the base template for the stories.
97
*/
10-
const CustomButton = ({ iconName, iconSet, ...args }, context) => html`
11-
<div style="display: flex; column-gap: 13px; row-gap: 24px;">
12-
${Template({
8+
const ButtonContentGroup = ({ iconName, iconSet, ...args }, context) => Container({
9+
level: 3,
10+
withBorder: false,
11+
content: [
12+
Template({
1313
...args,
1414
iconName: undefined,
15-
}, context)}
16-
${Template({
15+
}, context),
16+
Template({
1717
...args,
1818
iconName: iconName ?? "Edit",
1919
iconSet: iconSet ?? "workflow",
20-
}, context)}
21-
${Template({
20+
}, context),
21+
Template({
2222
...args,
2323
hideLabel: true,
2424
iconName: iconName ?? "Edit",
2525
iconSet: iconSet ?? "workflow",
26-
}, context)}
27-
</div>
28-
`;
26+
}, context),
27+
],
28+
});
29+
30+
const ButtonIconGroup = (args, context) => Container({
31+
level: 3,
32+
withBorder: false,
33+
content:[
34+
{
35+
testHeading: "Workflow icon",
36+
content: Template({
37+
...args,
38+
iconName: "Edit",
39+
iconSet: "workflow",
40+
}, context),
41+
},
42+
{
43+
testHeading: "Workflow icon",
44+
content: Template({
45+
...args,
46+
iconName: "Link",
47+
iconSet: "workflow",
48+
}, context),
49+
},
50+
{
51+
testHeading: "UI icon",
52+
content: Template({
53+
...args,
54+
// Uses a UI icon that is smaller than workflow sizing, to test alignment:
55+
iconName: "Cross100",
56+
iconSet: "ui",
57+
}, context),
58+
},
59+
{
60+
testHeading: "UI icon (larger)",
61+
content: Template({
62+
...args,
63+
// UI icon that is larger than workflow sizing:
64+
iconName: "ArrowDown600",
65+
iconSet: "ui",
66+
}, context),
67+
},
68+
],
69+
});
70+
71+
const ButtonTreatmentGroup = (args, context) => ArgGrid({
72+
Template: ButtonContentGroup,
73+
withBorder: false,
74+
withWrapperBorder: false,
75+
argKey: "treatment",
76+
labels: {
77+
fill: "",
78+
outline: "",
79+
},
80+
...args,
81+
}, context);
82+
83+
const ButtonVariantGroup = (args, context) => ArgGrid({
84+
Template: ButtonTreatmentGroup,
85+
withBorder: false,
86+
argKey: "variant",
87+
...args,
88+
}, context);
2989

3090
export const ButtonGroups = Variants({
31-
Template: CustomButton,
91+
Template: ButtonContentGroup,
3292
testData: [
33-
...["accent", "negative", "primary", "secondary"].map((variant) => ({
34-
testHeading: capitalize(variant),
35-
variant,
36-
})),
37-
// Note: In Spectrum 2, outline buttons are no longer available in accent and negative options.
38-
...["accent", "negative", "primary", "secondary"].map((variant) => ({
39-
testHeading: capitalize(variant) + " - outline",
40-
variant,
41-
treatment: "outline",
42-
})),
4393
{
44-
testHeading: "Static black",
45-
staticColor: "black",
94+
Template: ButtonVariantGroup,
4695
},
4796
{
97+
Template: ButtonVariantGroup,
4898
testHeading: "Static white",
4999
staticColor: "white",
50100
},
51101
{
52-
testHeading: "Text wrapping with workflow icon",
53-
customStyles: {
54-
"max-inline-size": "480px",
55-
},
56-
iconName: "Edit",
57-
iconSet: "workflow",
58-
label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.",
59-
withStates: false,
60-
Template,
102+
Template: ButtonVariantGroup,
103+
testHeading: "Static black",
104+
staticColor: "black",
61105
},
62106
{
63-
testHeading: "Text wrapping with UI icon",
107+
Template: ButtonIconGroup,
108+
testHeading: "Line wrap",
64109
customStyles: {
65110
"max-inline-size": "480px",
66111
},
67-
// Uses a UI icon that is smaller than workflow sizing, to test alignment:
68-
iconName: "Cross100",
69-
iconSet: "ui",
112+
iconName: "Edit",
113+
iconSet: "workflow",
70114
label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.",
71115
withStates: false,
72-
Template,
73-
},
74-
{
75-
testHeading: "Disable label wrapping",
76-
customStyles: {
77-
"max-inline-size": "120px",
78-
},
79-
label: "Be a premium member",
80-
noWrap: true,
81-
withStates: false,
82-
Template,
83116
},
84117
{
85-
testHeading: "Disable label wrapping with workflow icon",
118+
Template: ButtonIconGroup,
119+
testHeading: "Truncation",
86120
customStyles: {
87121
"max-inline-size": "120px",
88122
},
89-
iconName: "Star",
123+
iconName: "Edit",
90124
iconSet: "workflow",
91125
label: "Be a premium member",
92-
withStates: false,
93126
noWrap: true,
94-
Template,
95-
},
96-
{
97-
testHeading: "Text wrapping with larger UI icon",
98-
customStyles: {
99-
"max-inline-size": "480px",
100-
},
101-
// UI icon that is larger than workflow sizing:
102-
iconName: "ArrowDown600",
103-
iconSet: "ui",
104-
label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.",
105127
withStates: false,
106-
Template,
107128
},
108129
],
109130
stateData: [
@@ -126,7 +147,7 @@ export const ButtonGroups = Variants({
126147
{
127148
testHeading: "Pending",
128149
isPending: true,
129-
ignore: ["Static black"],
150+
ignore: ["Static black", "Static white"],
130151
},
131152
],
132153
sizeDirection: "row",

‎components/clearbutton/stories/clearbutton.test.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ export const ClearButtonGroup = Variants({
1717
testHeading: "Static white",
1818
staticColor: "white",
1919
},
20+
{
21+
testHeading: "Static white - quiet",
22+
staticColor: "white",
23+
isQuiet: true,
24+
},
2025
],
2126
stateData: [
2227
{

‎components/link/stories/link.test.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const LinkGroup = Variants({
1616
isQuiet: true,
1717
},
1818
{
19-
testHeading: "Quiet, Secondary",
19+
testHeading: "Quiet - secondary",
2020
isQuiet: true,
2121
variant: "secondary",
2222
},
@@ -25,7 +25,12 @@ export const LinkGroup = Variants({
2525
staticColor: "black",
2626
},
2727
{
28-
testHeading: "Static black (quiet)",
28+
testHeading: "Static black - secondary",
29+
staticColor: "black",
30+
variant: "secondary",
31+
},
32+
{
33+
testHeading: "Static black - quiet",
2934
staticColor: "black",
3035
isQuiet: true,
3136
},
@@ -34,7 +39,12 @@ export const LinkGroup = Variants({
3439
staticColor: "white",
3540
},
3641
{
37-
testHeading: "Static white (quiet)",
42+
testHeading: "Static white - secondary",
43+
staticColor: "white",
44+
variant: "secondary",
45+
},
46+
{
47+
testHeading: "Static white - quiet",
3848
staticColor: "white",
3949
isQuiet: true,
4050
},

0 commit comments

Comments
 (0)