docs(alertbanner): adjust storybook template spacing and decorator

Improves spacing in Storybook template, especially the Chromatic only template. Decorator and wrapper styles are modeled after those used in Action button, so they look more similar. Previously the layout was a little cramped and the "detail" elements were missing their margins because they were display inline.
adobe · Apr 12, 2024 · 2e91714 · 2e91714
1 parent 8657dfb
commit 2e91714
Showing 1 changed file with 80 additions and 61 deletions.
diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js
@@ -69,70 +69,89 @@ 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: 1em;
+				}
+			</style>
+			<div
+				style=${styleMap({
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "flex-start",
+					gap: "1.0rem",
+					"--mod-detail-margin-end": ".3rem",
+				})}
+			>
+				${Story(context)}
+			</div>
+		`,
+	],
 };
 
 const AlertBannerGroup = (args) => {
-	return html`
-		<div style="display: flex; flex-direction: column; gap: 1rem">
-			${!window.isChromatic() ? Template(args) : html`
-				<div class="spectrum-Typography">
-					${Typography({
-						semantics: "detail",
-						size: "l",
-						content: ["All variants with button, including wrapping"],
-					})}
-					<div
-						style=${styleMap({
-							display: "flex",
-							flexDirection: "column",
-							gap: ".3rem",
-						})}
-					>
-						${Template(args)}
-						${Template({
-							...args,
-							variant: "info",
-							text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purchased the software.",
-						})}
-						${Template({
-							...args,
-							variant: "negative",
-							text: "Connection interupted. Check your network to continue.",
-						})}
-					</div>
-				</div>
-				<div class="spectrum-Typography">
-					${Typography({
-						semantics: "detail",
-						size: "l",
-						content: ["All variants without button"],
-					})}
-					<div
-						style=${styleMap({
-							display: "flex",
-							flexDirection: "column",
-							gap: ".3rem",
-						})}
-					>
-						${Template({
-							...args,
-							actionButtonText: "",
-						})}
-						${Template({
-							...args,
-							variant: "info",
-							text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purchased the software.",
-							actionButtonText: "",
-						})}
-						${Template({
-							...args,
-							variant: "negative",
-							text: "Connection interupted. Check your network to continue.",
-							actionButtonText: "",
-						})}
-					</div>
-				</div>
-			`}
+	return !window.isChromatic() ? Template(args) : html`
+		<div class="spectrum-Typography">
+			${Typography({
+				semantics: "detail",
+				size: "l",
+				content: ["All variants with button, including wrapping"],
+			})}
+			<div
+				style=${styleMap({
+					display: "flex",
+					flexDirection: "column",
+					gap: "0.75rem",
+				})}
+			>
+				${Template(args)}
+				${Template({
+					...args,
+					variant: "info",
+					text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purchased the software.",
+				})}
+				${Template({
+					...args,
+					variant: "negative",
+					text: "Connection interupted. Check your network to continue.",
+				})}
+			</div>
+		</div>
+		<div class="spectrum-Typography">
+			${Typography({
+				semantics: "detail",
+				size: "l",
+				content: ["All variants without button"],
+			})}
+			<div
+				style=${styleMap({
+					display: "flex",
+					flexDirection: "column",
+					gap: "0.75rem",
+				})}
+			>
+				${Template({
+					...args,
+					actionButtonText: "",
+				})}
+				${Template({
+					...args,
+					variant: "info",
+					text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purchased the software.",
+					actionButtonText: "",
+				})}
+				${Template({
+					...args,
+					variant: "negative",
+					text: "Connection interupted. Check your network to continue.",
+					actionButtonText: "",
+				})}
+			</div>
 		</div>
 	`;
 };