chore(button,link): add more static color tests (#3374)

.storybook/decorators/utilities.js

@@ -16,6 +16,7 @@ const Heading = ({
 	content,
 	size = "l",
 	weight,
+	withMargin = false,
 } = {}, context = {}) => {
 	if (!content) return nothing;
 
@@ -26,6 +27,7 @@ const Heading = ({
 		"font-size": "11px",
 		"line-height": "1.3",
 		"font-weight": "700",
+		"margin-block-end": withMargin ? "8px" : "0",
 	};
 
 	if ((size === "xxs" && semantics === "heading") || size === "l") {
@@ -46,7 +48,7 @@ const Heading = ({
 		}
 	}
 
-	if (context.globals?.color.startsWith("dark")) {
+	if (context.globals?.color?.startsWith("dark")) {
 		headingStyles["color"] = context?.args?.staticColor ?? "white";
 	}
 	else if (typeof context?.args?.staticColor !== "undefined") {
@@ -110,7 +112,7 @@ export const Container = ({
 	if (withBorder) {
 		borderStyles["padding-inline"] = "24px";
 		borderStyles["padding-block"] = "24px";
-		borderStyles["border"] = "1px solid var(--spectrum-gray-200)";
+		borderStyles["border"] = "1px solid rgba(var(--spectrum-gray-600-rgb), 20%)";
 		borderStyles["border-radius"] = "4px";
 		gap = 80;
 	}
@@ -528,9 +530,13 @@ export const Variants = ({
 export const renderContent = (content = [], {
 	context = {},
 	args = {},
-	callback = (args, context) => {
-		console.log(JSON.stringify(args, null, 2), JSON.stringify(context, null, 2));
-		return nothing;
+	callback = ({ testHeading, content, ...args }, context) => {
+		return html`
+			<div>
+				${testHeading ? Heading({ content: testHeading, withMargin: true }, context) : nothing}
+				${content ? renderContent(content, { args, context }) : nothing}
+			</div>
+		`;
 	}
 } = {}) => {
 	// If the content is not an array, make it an array for easier processing
@@ -542,6 +548,8 @@ export const renderContent = (content = [], {
 
 	return html`
 		${content.map((c) => {
+			if (typeof c === "undefined") return nothing;
+
 			/* If the content is an object (but not a lit object), we need to merge the object with the template */
 			if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
 				return callback({ ...args, ...c }, context);

components/actionbutton/stories/actionbutton.test.js

@@ -59,22 +59,42 @@ export const ActionButtonGroup = Variants({
 			isQuiet: true,
 		},
 		{
-			Template: Truncation,
-			testHeading: "Truncation",
-			label: "Truncate this long content",
-			customStyles: {
-				maxInlineSize: "100px"
-			},
-			withStates: false,
+			testHeading: "Static black",
+			staticColor: "black",
 		},
 		{
-			testHeading: "Static black",
+			testHeading: "Static black - emphasized",
+			staticColor: "black",
+			isEmphasized: true,
+		},
+		{
+			testHeading: "Static black - quiet",
 			staticColor: "black",
+			isQuiet: true,
 		},
 		{
 			testHeading: "Static white",
 			staticColor: "white",
 		},
+		{
+			testHeading: "Static white - emphasized",
+			staticColor: "white",
+			isEmphasized: true,
+		},
+		{
+			testHeading: "Static white - quiet",
+			staticColor: "white",
+			isQuiet: true,
+		},
+		{
+			Template: Truncation,
+			testHeading: "Truncation",
+			label: "Truncate this long content",
+			customStyles: {
+				maxInlineSize: "100px"
+			},
+			withStates: false,
+		},
 		{
 			testHeading: "Internationalization (Thai)",
 			label: "ล้างทั้งหมด",

components/button/stories/button.test.js

@@ -1,109 +1,130 @@
-import { Variants } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
-import { capitalize } from "lodash-es";
+import { ArgGrid, Container, Variants } from "@spectrum-css/preview/decorators";
 import { Template } from "./template.js";
 
 /**
  * Multiple button variations displayed in one story template.
  * Used as the base template for the stories.
  */
-const CustomButton = ({ iconName, iconSet, ...args }, context) => html`
-	<div style="display: flex; column-gap: 13px; row-gap: 24px;">
-		${Template({
+const ButtonContentGroup = ({ iconName, iconSet, ...args }, context) => Container({
+	level: 3,
+	withBorder: false,
+	content: [
+		Template({
 			...args,
 			iconName: undefined,
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
 			iconName: iconName ?? "Edit",
 			iconSet: iconSet ?? "workflow",
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
 			hideLabel: true,
 			iconName: iconName ?? "Edit",
 			iconSet: iconSet ?? "workflow",
-		}, context)}
-	</div>
-`;
+		}, context),
+	],
+});
+
+const ButtonIconGroup = (args, context) => Container({
+	level: 3,
+	withBorder: false,
+	content:[
+		{
+			testHeading: "Workflow icon",
+			content: Template({
+				...args,
+				iconName: "Edit",
+				iconSet: "workflow",
+			}, context),
+		},
+		{
+			testHeading: "Workflow icon",
+			content: Template({
+				...args,
+				iconName: "Link",
+				iconSet: "workflow",
+			}, context),
+		},
+		{
+			testHeading: "UI icon",
+			content: Template({
+				...args,
+				// Uses a UI icon that is smaller than workflow sizing, to test alignment:
+				iconName: "Cross100",
+				iconSet: "ui",
+			}, context),
+		},
+		{
+			testHeading: "UI icon (larger)",
+			content: Template({
+				...args,
+				// UI icon that is larger than workflow sizing:
+				iconName: "ArrowDown600",
+				iconSet: "ui",
+			}, context),
+		},
+	],
+});
+
+const ButtonTreatmentGroup = (args, context) => ArgGrid({
+	Template: ButtonContentGroup,
+	withBorder: false,
+	withWrapperBorder: false,
+	argKey: "treatment",
+	labels: {
+		fill: "",
+		outline: "",
+	},
+	...args,
+}, context);
+
+const ButtonVariantGroup = (args, context) => ArgGrid({
+	Template: ButtonTreatmentGroup,
+	withBorder: false,
+	argKey: "variant",
+	...args,
+}, context);
 
 export const ButtonGroups = Variants({
-	Template: CustomButton,
+	Template: ButtonContentGroup,
 	testData: [
-		...["accent", "negative", "primary", "secondary"].map((variant) => ({
-			testHeading: capitalize(variant),
-			variant,
-		})),
-		// Note: In Spectrum 2, outline buttons are no longer available in accent and negative options.
-		...["accent", "negative", "primary", "secondary"].map((variant) => ({
-			testHeading: capitalize(variant) + " - outline",
-			variant,
-			treatment: "outline",
-		})),
 		{
-			testHeading: "Static black",
-			staticColor: "black",
+			Template: ButtonVariantGroup,
 		},
 		{
+			Template: ButtonVariantGroup,
 			testHeading: "Static white",
 			staticColor: "white",
 		},
 		{
-			testHeading: "Text wrapping with workflow icon",
-			customStyles: {
-				"max-inline-size": "480px",
-			},
-			iconName: "Edit",
-			iconSet: "workflow",
-			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.",
-			withStates: false,
-			Template,
+			Template: ButtonVariantGroup,
+			testHeading: "Static black",
+			staticColor: "black",
 		},
 		{
-			testHeading: "Text wrapping with UI icon",
+			Template: ButtonIconGroup,
+			testHeading: "Line wrap",
 			customStyles: {
 				"max-inline-size": "480px",
 			},
-			// Uses a UI icon that is smaller than workflow sizing, to test alignment:
-			iconName: "Cross100",
-			iconSet: "ui",
+			iconName: "Edit",
+			iconSet: "workflow",
 			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.",
 			withStates: false,
-			Template,
-		},
-		{
-			testHeading: "Disable label wrapping",
-			customStyles: {
-				"max-inline-size": "120px",
-			},
-			label: "Be a premium member",
-			noWrap: true,
-			withStates: false,
-			Template,
 		},
 		{
-			testHeading: "Disable label wrapping with workflow icon",
+			Template: ButtonIconGroup,
+			testHeading: "Truncation",
 			customStyles: {
 				"max-inline-size": "120px",
 			},
-			iconName: "Star",
+			iconName: "Edit",
 			iconSet: "workflow",
 			label: "Be a premium member",
-			withStates: false,
 			noWrap: true,
-			Template,
-		},
-		{
-			testHeading: "Text wrapping with larger UI icon",
-			customStyles: {
-				"max-inline-size": "480px",
-			},
-			// UI icon that is larger than workflow sizing:
-			iconName: "ArrowDown600",
-			iconSet: "ui",
-			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.",
 			withStates: false,
-			Template,
 		},
 	],
 	stateData: [
@@ -126,7 +147,7 @@ export const ButtonGroups = Variants({
 		{
 			testHeading: "Pending",
 			isPending: true,
-			ignore: ["Static black"],
+			ignore: ["Static black", "Static white"],
 		},
 	],
 	sizeDirection: "row",

components/clearbutton/stories/clearbutton.test.js

@@ -17,6 +17,11 @@ export const ClearButtonGroup = Variants({
 			testHeading: "Static white",
 			staticColor: "white",
 		},
+		{
+			testHeading: "Static white - quiet",
+			staticColor: "white",
+			isQuiet: true,
+		},
 	],
 	stateData: [
 		{

components/link/stories/link.test.js

@@ -16,7 +16,7 @@ export const LinkGroup = Variants({
 			isQuiet: true,
 		},
 		{
-			testHeading: "Quiet, Secondary",
+			testHeading: "Quiet - secondary",
 			isQuiet: true,
 			variant: "secondary",
 		},
@@ -25,7 +25,12 @@ export const LinkGroup = Variants({
 			staticColor: "black",
 		},
 		{
-			testHeading: "Static black (quiet)",
+			testHeading: "Static black - secondary",
+			staticColor: "black",
+			variant: "secondary",
+		},
+		{
+			testHeading: "Static black - quiet",
 			staticColor: "black",
 			isQuiet: true,
 		},
@@ -34,7 +39,12 @@ export const LinkGroup = Variants({
 			staticColor: "white",
 		},
 		{
-			testHeading: "Static white (quiet)",
+			testHeading: "Static white - secondary",
+			staticColor: "white",
+			variant: "secondary",
+		},
+		{
+			testHeading: "Static white - quiet",
 			staticColor: "white",
 			isQuiet: true,
 		},