chore(storybook): align typography elements for VRTs (#3343)

Author: castastrophe

.storybook/decorators/utilities.js

@@ -1,4 +1,3 @@
-import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html, nothing } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
@@ -11,26 +10,58 @@ import { capitalize } from "lodash-es";
  * @param {string} props.content - The content to render in the heading or code block.
  * @param {string} props.size - The size of the heading to render.
  * @param {string} props.weight - The weight of the heading to render.
- * @param {string[]} props.customClasses - Additional classes to apply to the heading or code block.
  */
 const Heading = ({
 	semantics = "heading",
 	content,
 	size = "l",
 	weight,
-	customClasses = [],
-} = {}) => {
-	return Typography({
-		semantics,
-		size,
-		weight,
-		content,
-		skipLineBreak: true,
-		customClasses: ["chromatic-ignore", ...customClasses],
-		customStyles: {
-			"color": semantics === "detail" ? "var(--spectrum-heading-color)" : undefined,
+} = {}, context = {}) => {
+	if (!content) return nothing;
+
+	const headingStyles = {
+		"display": "block",
+		"color": "black",
+		"font-family": 'adobe-clean, "adobe clean", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif',
+		"font-size": "11px",
+		"line-height": "1.3",
+		"font-weight": "700",
+	};
+
+	if ((size === "xxs" && semantics === "heading") || size === "l") {
+		headingStyles["font-size"] = "14px";
+	}
+
+	if (semantics === "detail") {
+		headingStyles["letter-spacing"] = ".06em";
+		headingStyles["text-transform"] = "uppercase";
+	}
+
+	if (weight === "light") {
+		if (semantics === "heading") {
+			headingStyles["font-weight"] = "300";
+		}
+		else {
+			headingStyles["font-weight"] = "400";
 		}
-	});
+	}
+
+	if (context.globals?.color.startsWith("dark")) {
+		headingStyles["color"] = context?.args?.staticColor ?? "white";
+	}
+	else if (typeof context?.args?.staticColor !== "undefined") {
+		headingStyles["color"] = context?.args?.staticColor;
+	}
+
+
+	return html`
+		<span
+			class="chromatic-ignore"
+			style=${styleMap(headingStyles)}
+		>
+			${content}
+		</span>
+	`;
 };
 
 /**
@@ -54,7 +85,8 @@ export const Container = ({
 	withBorder = true,
 	containerStyles = {},
 	wrapperStyles = {},
-} = {}) => {
+} = {}, context = {}) => {
+	const isDocs = context?.viewMode === "docs";
 	const headingConfig = { size: "l", semantics: type };
 	let gap = 40;
 
@@ -100,6 +132,13 @@ export const Container = ({
 			${when(heading, () => Heading({
 				...headingConfig,
 				content: heading
+			}, {
+				...context,
+				globals: {
+					...context.globals ?? {},
+					// If the level is 1 and we are not in docs view, use the light color theme for the heading
+					color: level === 1 && !isDocs ? "light" : context.globals?.color,
+				}
 			}))}
 			<div
 				data-inner-container
@@ -117,7 +156,7 @@ export const Container = ({
 					...wrapperStyles,
 				})}
 			>
-				${renderContent(content)}
+				${renderContent(content, { context })}
 			</div>
 		</div>
 	`;
@@ -173,6 +212,15 @@ export const States = ({
 				return nothing
 			}
 
+			context = {
+				...context,
+				args: {
+					...context.args,
+					...args,
+					...item,
+				}
+			};
+
 			return Container({
 				heading: stateData.some(({ testHeading }) => testHeading) ? testHeading : "",
 				level: 3,
@@ -182,9 +230,9 @@ export const States = ({
 					...stateWrapperStyles,
 				},
 				content: Template({ ...args, ...item }, context),
-			});
+			}, context);
 		})
-	});
+	}, context);
 };
 
 /**
@@ -264,8 +312,8 @@ export const ArgGrid = ({
 				...(typeof args?.name !== "undefined" ? {name: `${args.name}-${argKey}-${index}`} : {}),
 				...(typeof args?.id !== "undefined" ? {id: `${args.id}-${argKey}-${index}`} : {}),
 			}, context)
-		})),
-	});
+		}, context)),
+	}, context);
 };
 
 /**
@@ -450,7 +498,7 @@ export const Variants = ({
 									() => AltTemplate(data, context)
 								)}
 							`,
-						});
+						}, context);
 					}
 				)}
 

components/actionbutton/stories/template.js

@@ -158,7 +158,7 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({
 			hasPopup: "true",
 		}, context)}
 	`
-});
+}, context);
 
 export const IconOnlyOption = (args, context) => Container({
 	withBorder: false,
@@ -179,7 +179,7 @@ export const IconOnlyOption = (args, context) => Container({
 			hasPopup: "true",
 		}, context)}
 	`
-});
+}, context);
 
 export const TreatmentTemplate = (args, context) => Container({
 	withBorder: false,
@@ -200,5 +200,5 @@ export const TreatmentTemplate = (args, context) => Container({
 			isSelected,
 			isDisabled,
 		})
-	}, context ))}`,
-});
+	}, context))}`,
+}, context);

components/actiongroup/stories/template.js

@@ -97,7 +97,7 @@ export const OverflowOption = (context) => Container({
 					},
 				]
 			}, context)
-		})}
+		}, context)}
 		${Container({
 			withBorder: false,
 			heading: "Collapse",
@@ -126,9 +126,9 @@ export const OverflowOption = (context) => Container({
 					},
 				]
 			}, context)
-		})}
+		}, context)}
 	`
-});
+}, context);
 
 export const TreatmentTemplate = (args, context) => Container({
 	withBorder: false,
@@ -140,14 +140,13 @@ export const TreatmentTemplate = (args, context) => Container({
 		{ heading: "Default", },
 		{ iconOnly: true, heading: "Icon-only", },
 		{ iconOnly: true, areQuiet: true, heading: "Quiet, icon-only", },
-		].map(({ heading, areQuiet, iconOnly }) => Container({
-			withBorder: false,
-			heading: heading,
-			content: Template({
-				...args,
-				areQuiet, 
-				iconOnly,
-			}, context)}
-		))}`
-});
-
+	].map(({ heading, areQuiet, iconOnly }) => Container({
+		withBorder: false,
+		heading: heading,
+		content: Template({
+			...args,
+			areQuiet,
+			iconOnly,
+		}, context)
+	}, context))}`
+}, context);

components/alertbanner/stories/template.js

@@ -130,7 +130,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({
 					text: "Your trial has expired",
 					actionButtonText: "Buy now",
 			}, context),
-		})}
+		}, context)}
 		${Container({
 			withBorder: false,
 			direction: "column",
@@ -144,7 +144,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({
 					actionButtonText: "Buy now",
 					showCloseButton: false,
 			}, context),
-		})}
+		}, context)}
 		${Container({
 			withBorder: false,
 			direction: "column",
@@ -157,7 +157,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({
 				text: "Your trial has expired",
 				actionButtonText: "",
 			}),
-		})}
+		}, context)}
 		${Container({
 			withBorder: false,
 			direction: "column",
@@ -171,6 +171,6 @@ export const ActionableOptionsTemplate = (args, context) => Container({
 					actionButtonText: "",
 					showCloseButton: false,
 			}, context),
-		})}
+		}, context)}
 	`,
-});
+}, context);

components/button/stories/template.js

@@ -82,7 +82,7 @@ export const Template = ({
 		${when(iconName && !iconAfterLabel, () =>
 			Icon({ iconName, setName: iconSet, size }, context)
 		)}
-		${when(label && !hideLabel, () => 
+		${when(label && !hideLabel, () =>
 			html`<span class=${`${rootClass}-label`}>${label}</span>`
 		)}
 		${when(iconName && iconAfterLabel, () =>
@@ -131,7 +131,7 @@ export const ButtonsWithIconOptions = ({
 			iconName: iconName ?? "Edit",
 		}, context)}
 	`,
-});
+}, context);
 
 /**
  * Display the buttons with icon options for each treatment option.
@@ -155,23 +155,23 @@ export const TextOverflowTemplate = (args, context = {}) => Container({
 		rowGap: "12px",
 	},
 	content: html`
-	${Template({
-		...args,
-		customStyles: {
-			"max-inline-size": "480px",
-		},
-		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.",
-	}, context)}
-	${Template({
-		...args,
-		customStyles: {
-			"max-inline-size": "480px",
-		},
-		iconName: "Edit",
-		iconSet: "workflow",
-		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.",
-	}, context)}
-  `,
+		${Template({
+			...args,
+			customStyles: {
+				"max-inline-size": "480px",
+			},
+			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.",
+		}, context)}
+		${Template({
+			...args,
+			customStyles: {
+				"max-inline-size": "480px",
+			},
+			iconName: "Edit",
+			iconSet: "workflow",
+			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.",
+		}, context)}
+	`,
 }, context);
 
 export const TextWrapTemplate = (args, context = {}) => Container({
@@ -206,4 +206,4 @@ export const TextWrapTemplate = (args, context = {}) => Container({
 			noWrap: true,
 		}, context)}
 	`,
-}, context);
+}, context);

components/checkbox/stories/template.js

@@ -1,5 +1,5 @@
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { getRandomId, Container } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -126,7 +126,7 @@ export const DocsCheckboxGroup = (args, context) => Container({
 			customStyles: { "max-inline-size": "200px" },
 		})}
 	`
-});
+}, context);
 
 /* This template group showcases multiple CheckboxGroups in various states of disabled, read-only, invalid, etc. */
 export const AllVariantsCheckboxGroup = (args, context) => Container({
@@ -137,25 +137,24 @@ export const AllVariantsCheckboxGroup = (args, context) => Container({
 			direction: "column",
 			heading: "Default",
 			content: DocsCheckboxGroup(args, context)
-		})}
+		}, context)}
 		${Container({
 			withBorder: false,
 			direction: "column",
 			heading: "Invalid",
 			content: DocsCheckboxGroup({...args, isInvalid: true }, context)
-		})}
+		}, context)}
 		${Container({
 			withBorder: false,
 			direction: "column",
 			heading: "Disabled",
 			content: DocsCheckboxGroup({...args, isDisabled: true }, context)
-		})}
+		}, context)}
 		${Container({
 			withBorder: false,
 			direction: "column",
 			heading: "Read-only",
 			content: DocsCheckboxGroup({...args, isReadOnly: true }, context)
-
-		})}
+		}, context)}
 	`
-});
+}, context);