Skip to content

Commit 3e6d3ae

Browse files
castastrophecastastrophe
authored
chore(storybook): align typography elements for VRTs (#3343)
1 parent ffc6895 commit 3e6d3ae

File tree

29 files changed

+417
-391
lines changed

29 files changed

+417
-391
lines changed

‎.storybook/decorators/utilities.js

Lines changed: 69 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
21
import { html, nothing } from "lit";
32
import { styleMap } from "lit/directives/style-map.js";
43
import { when } from "lit/directives/when.js";
@@ -11,26 +10,58 @@ import { capitalize } from "lodash-es";
1110
* @param {string} props.content - The content to render in the heading or code block.
1211
* @param {string} props.size - The size of the heading to render.
1312
* @param {string} props.weight - The weight of the heading to render.
14-
* @param {string[]} props.customClasses - Additional classes to apply to the heading or code block.
1513
*/
1614
const Heading = ({
1715
semantics = "heading",
1816
content,
1917
size = "l",
2018
weight,
21-
customClasses = [],
22-
} = {}) => {
23-
return Typography({
24-
semantics,
25-
size,
26-
weight,
27-
content,
28-
skipLineBreak: true,
29-
customClasses: ["chromatic-ignore", ...customClasses],
30-
customStyles: {
31-
"color": semantics === "detail" ? "var(--spectrum-heading-color)" : undefined,
19+
} = {}, context = {}) => {
20+
if (!content) return nothing;
21+
22+
const headingStyles = {
23+
"display": "block",
24+
"color": "black",
25+
"font-family": 'adobe-clean, "adobe clean", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif',
26+
"font-size": "11px",
27+
"line-height": "1.3",
28+
"font-weight": "700",
29+
};
30+
31+
if ((size === "xxs" && semantics === "heading") || size === "l") {
32+
headingStyles["font-size"] = "14px";
33+
}
34+
35+
if (semantics === "detail") {
36+
headingStyles["letter-spacing"] = ".06em";
37+
headingStyles["text-transform"] = "uppercase";
38+
}
39+
40+
if (weight === "light") {
41+
if (semantics === "heading") {
42+
headingStyles["font-weight"] = "300";
43+
}
44+
else {
45+
headingStyles["font-weight"] = "400";
3246
}
33-
});
47+
}
48+
49+
if (context.globals?.color.startsWith("dark")) {
50+
headingStyles["color"] = context?.args?.staticColor ?? "white";
51+
}
52+
else if (typeof context?.args?.staticColor !== "undefined") {
53+
headingStyles["color"] = context?.args?.staticColor;
54+
}
55+
56+
57+
return html`
58+
<span
59+
class="chromatic-ignore"
60+
style=${styleMap(headingStyles)}
61+
>
62+
${content}
63+
</span>
64+
`;
3465
};
3566

3667
/**
@@ -54,7 +85,8 @@ export const Container = ({
5485
withBorder = true,
5586
containerStyles = {},
5687
wrapperStyles = {},
57-
} = {}) => {
88+
} = {}, context = {}) => {
89+
const isDocs = context?.viewMode === "docs";
5890
const headingConfig = { size: "l", semantics: type };
5991
let gap = 40;
6092

@@ -100,6 +132,13 @@ export const Container = ({
100132
${when(heading, () => Heading({
101133
...headingConfig,
102134
content: heading
135+
}, {
136+
...context,
137+
globals: {
138+
...context.globals ?? {},
139+
// If the level is 1 and we are not in docs view, use the light color theme for the heading
140+
color: level === 1 && !isDocs ? "light" : context.globals?.color,
141+
}
103142
}))}
104143
<div
105144
data-inner-container
@@ -117,7 +156,7 @@ export const Container = ({
117156
...wrapperStyles,
118157
})}
119158
>
120-
${renderContent(content)}
159+
${renderContent(content, { context })}
121160
</div>
122161
</div>
123162
`;
@@ -173,6 +212,15 @@ export const States = ({
173212
return nothing
174213
}
175214

215+
context = {
216+
...context,
217+
args: {
218+
...context.args,
219+
...args,
220+
...item,
221+
}
222+
};
223+
176224
return Container({
177225
heading: stateData.some(({ testHeading }) => testHeading) ? testHeading : "",
178226
level: 3,
@@ -182,9 +230,9 @@ export const States = ({
182230
...stateWrapperStyles,
183231
},
184232
content: Template({ ...args, ...item }, context),
185-
});
233+
}, context);
186234
})
187-
});
235+
}, context);
188236
};
189237

190238
/**
@@ -264,8 +312,8 @@ export const ArgGrid = ({
264312
...(typeof args?.name !== "undefined" ? {name: `${args.name}-${argKey}-${index}`} : {}),
265313
...(typeof args?.id !== "undefined" ? {id: `${args.id}-${argKey}-${index}`} : {}),
266314
}, context)
267-
})),
268-
});
315+
}, context)),
316+
}, context);
269317
};
270318

271319
/**
@@ -450,7 +498,7 @@ export const Variants = ({
450498
() => AltTemplate(data, context)
451499
)}
452500
`,
453-
});
501+
}, context);
454502
}
455503
)}
456504

‎components/actionbutton/stories/template.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({
158158
hasPopup: "true",
159159
}, context)}
160160
`
161-
});
161+
}, context);
162162

163163
export const IconOnlyOption = (args, context) => Container({
164164
withBorder: false,
@@ -179,7 +179,7 @@ export const IconOnlyOption = (args, context) => Container({
179179
hasPopup: "true",
180180
}, context)}
181181
`
182-
});
182+
}, context);
183183

184184
export const TreatmentTemplate = (args, context) => Container({
185185
withBorder: false,
@@ -200,5 +200,5 @@ export const TreatmentTemplate = (args, context) => Container({
200200
isSelected,
201201
isDisabled,
202202
})
203-
}, context ))}`,
204-
});
203+
}, context))}`,
204+
}, context);

‎components/actiongroup/stories/template.js

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const OverflowOption = (context) => Container({
9797
},
9898
]
9999
}, context)
100-
})}
100+
}, context)}
101101
${Container({
102102
withBorder: false,
103103
heading: "Collapse",
@@ -126,9 +126,9 @@ export const OverflowOption = (context) => Container({
126126
},
127127
]
128128
}, context)
129-
})}
129+
}, context)}
130130
`
131-
});
131+
}, context);
132132

133133
export const TreatmentTemplate = (args, context) => Container({
134134
withBorder: false,
@@ -140,14 +140,13 @@ export const TreatmentTemplate = (args, context) => Container({
140140
{ heading: "Default", },
141141
{ iconOnly: true, heading: "Icon-only", },
142142
{ iconOnly: true, areQuiet: true, heading: "Quiet, icon-only", },
143-
].map(({ heading, areQuiet, iconOnly }) => Container({
144-
withBorder: false,
145-
heading: heading,
146-
content: Template({
147-
...args,
148-
areQuiet,
149-
iconOnly,
150-
}, context)}
151-
))}`
152-
});
153-
143+
].map(({ heading, areQuiet, iconOnly }) => Container({
144+
withBorder: false,
145+
heading: heading,
146+
content: Template({
147+
...args,
148+
areQuiet,
149+
iconOnly,
150+
}, context)
151+
}, context))}`
152+
}, context);

‎components/alertbanner/stories/template.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({
130130
text: "Your trial has expired",
131131
actionButtonText: "Buy now",
132132
}, context),
133-
})}
133+
}, context)}
134134
${Container({
135135
withBorder: false,
136136
direction: "column",
@@ -144,7 +144,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({
144144
actionButtonText: "Buy now",
145145
showCloseButton: false,
146146
}, context),
147-
})}
147+
}, context)}
148148
${Container({
149149
withBorder: false,
150150
direction: "column",
@@ -157,7 +157,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({
157157
text: "Your trial has expired",
158158
actionButtonText: "",
159159
}),
160-
})}
160+
}, context)}
161161
${Container({
162162
withBorder: false,
163163
direction: "column",
@@ -171,6 +171,6 @@ export const ActionableOptionsTemplate = (args, context) => Container({
171171
actionButtonText: "",
172172
showCloseButton: false,
173173
}, context),
174-
})}
174+
}, context)}
175175
`,
176-
});
176+
}, context);

‎components/button/stories/template.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const Template = ({
8282
${when(iconName && !iconAfterLabel, () =>
8383
Icon({ iconName, setName: iconSet, size }, context)
8484
)}
85-
${when(label && !hideLabel, () =>
85+
${when(label && !hideLabel, () =>
8686
html`<span class=${`${rootClass}-label`}>${label}</span>`
8787
)}
8888
${when(iconName && iconAfterLabel, () =>
@@ -131,7 +131,7 @@ export const ButtonsWithIconOptions = ({
131131
iconName: iconName ?? "Edit",
132132
}, context)}
133133
`,
134-
});
134+
}, context);
135135

136136
/**
137137
* Display the buttons with icon options for each treatment option.
@@ -155,23 +155,23 @@ export const TextOverflowTemplate = (args, context = {}) => Container({
155155
rowGap: "12px",
156156
},
157157
content: html`
158-
${Template({
159-
...args,
160-
customStyles: {
161-
"max-inline-size": "480px",
162-
},
163-
label: "An example of text overflow behavior when there is no icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
164-
}, context)}
165-
${Template({
166-
...args,
167-
customStyles: {
168-
"max-inline-size": "480px",
169-
},
170-
iconName: "Edit",
171-
iconSet: "workflow",
172-
label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
173-
}, context)}
174-
`,
158+
${Template({
159+
...args,
160+
customStyles: {
161+
"max-inline-size": "480px",
162+
},
163+
label: "An example of text overflow behavior when there is no icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
164+
}, context)}
165+
${Template({
166+
...args,
167+
customStyles: {
168+
"max-inline-size": "480px",
169+
},
170+
iconName: "Edit",
171+
iconSet: "workflow",
172+
label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
173+
}, context)}
174+
`,
175175
}, context);
176176

177177
export const TextWrapTemplate = (args, context = {}) => Container({
@@ -206,4 +206,4 @@ export const TextWrapTemplate = (args, context = {}) => Container({
206206
noWrap: true,
207207
}, context)}
208208
`,
209-
}, context);
209+
}, context);

‎components/checkbox/stories/template.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
2-
import { getRandomId, Container } from "@spectrum-css/preview/decorators";
2+
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
33
import { html } from "lit";
44
import { classMap } from "lit/directives/class-map.js";
55
import { ifDefined } from "lit/directives/if-defined.js";
@@ -126,7 +126,7 @@ export const DocsCheckboxGroup = (args, context) => Container({
126126
customStyles: { "max-inline-size": "200px" },
127127
})}
128128
`
129-
});
129+
}, context);
130130

131131
/* This template group showcases multiple CheckboxGroups in various states of disabled, read-only, invalid, etc. */
132132
export const AllVariantsCheckboxGroup = (args, context) => Container({
@@ -137,25 +137,24 @@ export const AllVariantsCheckboxGroup = (args, context) => Container({
137137
direction: "column",
138138
heading: "Default",
139139
content: DocsCheckboxGroup(args, context)
140-
})}
140+
}, context)}
141141
${Container({
142142
withBorder: false,
143143
direction: "column",
144144
heading: "Invalid",
145145
content: DocsCheckboxGroup({...args, isInvalid: true }, context)
146-
})}
146+
}, context)}
147147
${Container({
148148
withBorder: false,
149149
direction: "column",
150150
heading: "Disabled",
151151
content: DocsCheckboxGroup({...args, isDisabled: true }, context)
152-
})}
152+
}, context)}
153153
${Container({
154154
withBorder: false,
155155
direction: "column",
156156
heading: "Read-only",
157157
content: DocsCheckboxGroup({...args, isReadOnly: true }, context)
158-
159-
})}
158+
}, context)}
160159
`
161-
});
160+
}, context);

0 commit comments

Comments
 (0)