feat(tag): add Chromatic visual regression tests

components/tag/stories/tag.stories.js

@@ -1,6 +1,11 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
+
 import { Template } from "./template";
 
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 
 export default {
 	title: "Components/Tag",
@@ -124,12 +129,234 @@ export default {
 			type: "migrated",
 		},
 	},
+	decorators: [
+		(Story, context) => html`
+			<style>
+				.spectrum-Detail { display: inline-block; }
+				.spectrum-Typography > div {
+					border: 1px solid var(--spectrum-gray-200);
+					border-radius: 4px;
+					padding: 0 1em 1em;
+					/* Why seafoam? Because it separates it from the component styles. */
+					--mod-detail-font-color: var(--spectrum-seafoam-900);
+				}
+			</style>
+			<div
+				style=${styleMap({
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "flex-start",
+					gap: "1rem",
+					"--mod-detail-margin-end": ".3rem",
+				})}
+			>
+				${Story(context)}
+			</div>
+		`,
+	],
 };
 
-export const Default = Template.bind({});
+// each tag in the row
+const Tags = (args) => html` <div
+	style=${styleMap({
+		display: "flex",
+		gap: "1rem",
+	})}
+>
+	${Template({...args})}
+	${when(window.isChromatic(), () =>
+		Template({
+			...args,
+			label: "Tag with longer content that truncates",
+		})
+	)}
+	${when(window.isChromatic(), () =>
+		Template({
+			...args,
+			visual: "Icon",
+		})
+	)}
+	${when(window.isChromatic(), () =>
+		Template({
+			...args,
+			visual: "Avatar",
+		})
+	)}
+	${when(window.isChromatic(), () =>
+		Template({
+			...args,
+			visual: "Thumbnail",
+		})
+	)}
+</div>`;
+
+const States = (args) =>
+	html` <div>
+			${Typography({
+				semantics: "detail",
+				size: "m",
+				content: ["Default"],
+			})}
+			${Tags(args)}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "m",
+				content: ["Selected"],
+			})}
+			${Tags({
+				...args,
+				isSelected: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "m",
+				content: ["Disabled"],
+			})}
+			${Tags({
+				...args,
+				isDisabled: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "m",
+				content: ["Disabled & Selected"],
+			})}
+			${Tags({
+				...args,
+				isDisabled: true,
+				isSelected: true,
+			})}
+		</div>`;
+
+const Sizes = (args) =>
+	html` ${["s", "m", "l"].map((size) => {
+		return html` <div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: [
+					{
+						xxs: "Extra-extra-small",
+						xs: "Extra-small",
+						s: "Small",
+						m: "Medium",
+						l: "Large",
+						xl: "Extra-large",
+						xxl: "Extra-extra-large",
+					}[size],
+				]
+			})}
+			${Tags({
+				...args,
+				size,
+			})}
+		</div>`;
+	})}`;
+
+const Variants = (args) =>
+	html` ${window.isChromatic()
+		? html`<div class="spectrum-Typography">
+				${Typography({
+					semantics: "detail",
+					size: "l",
+					content: ["Standard"],
+				})}
+				<div
+					style=${styleMap({
+						display: "flex",
+						flexDirection: "column",
+						gap: ".3rem",
+					})}
+				>
+				${States(args)}
+				</div>
+			</div>
+			<div class="spectrum-Typography">
+				${Typography({
+					semantics: "detail",
+					size: "l",
+					content: ["Emphasized"],
+				})}
+				<div
+					style=${styleMap({
+						display: "flex",
+						flexDirection: "column",
+						gap: ".3rem",
+					})}
+				>
+					${States({
+						...args,
+						isEmphasized: true,
+					})}
+				</div>
+			</div>
+			<div class="spectrum-Typography">
+				${Typography({
+					semantics: "detail",
+					size: "l",
+					content: ["Invalid"],
+				})}
+				<div
+					style=${styleMap({
+						display: "flex",
+						flexDirection: "column",
+						gap: ".3rem",
+					})}
+				>
+					${States({
+						...args,
+						isInvalid: true,
+					})}
+				</div>
+			</div>
+			<div class="spectrum-Typography">
+				${Typography({
+					semantics: "detail",
+					size: "l",
+					content: ["With clear button"],
+				})}
+				<div
+					style=${styleMap({
+						display: "flex",
+						flexDirection: "column",
+						gap: ".3rem",
+					})}
+				>
+					${States({
+						...args,
+						hasClearButton: true,
+					})}
+				</div>
+			</div>
+			<div class="spectrum-Typography">
+				${Typography({
+					semantics: "detail",
+					size: "l",
+					content: ["Sizing"],
+				})}
+				<div
+					style=${styleMap({
+						display: "flex",
+						flexDirection: "column",
+						gap: ".3rem",
+					})}
+				>
+					${Sizes(args)}
+				</div>
+			</div>`
+		: Tags(args)
+	}`;
+
+export const Default = Variants.bind({});
 Default.args = {};
 
-export const Removable = Template.bind({});
+export const Removable = Variants.bind({});
 Removable.args = {
 	hasClearButton: true,
 };