chore: storybook description format; lit syntax alignment

adobe · Apr 19, 2024 · 8aab4f9 · 8aab4f9
1 parent 4bd8dd6
commit 8aab4f9
Show file tree

Hide file tree

Showing 148 changed files with 2,289 additions and 2,539 deletions.
diff --git a/.storybook/decorators/contextsWrapper.js b/.storybook/decorators/contextsWrapper.js
@@ -8,7 +8,7 @@ export const withContextWrapper = makeDecorator({
 	name: "withContextWrapper",
 	parameterName: "context",
 	wrapper: (StoryFn, context) => {
-		const { args, argTypes, viewMode } = context;
+		const { args, argTypes, viewMode, id } = context;
 
 		const getDefaultValue = (type) => {
 			if (!type) return null;
@@ -31,25 +31,36 @@ export const withContextWrapper = makeDecorator({
 		const scales = ["medium", "large"];
 
 		useEffect(() => {
-			const container = viewMode === "docs" && !window.isChromatic() ? document.querySelector('#root-inner') ?? document.body : document.body;
-			container.classList.toggle("spectrum", true);
+			let containers = [document.body];
 
-			container.classList.toggle("spectrum--express", isExpress);
-
-			for (const c of colors) {
-				container.classList.toggle(`spectrum--${c}`, c === color);
+			const roots = [...document.querySelectorAll(`#story--${id}`)];
+			if (viewMode === "docs" && roots.length > 0) {
+				containers = roots.map(root => root.closest(".docs-story") ?? root);
 			}
 
-			for (const s of scales) {
-				container.classList.toggle(`spectrum--${s}`, s === scale);
-			}
+			for (const container of containers) {
+				container.classList.toggle("spectrum", true);
+
+				container.classList.toggle("spectrum--express", isExpress);
+
+				for (const c of colors) {
+					container.classList.toggle(`spectrum--${c}`, c === color);
+				}
+
+				for (const s of scales) {
+					container.classList.toggle(`spectrum--${s}`, s === scale);
+				}
+
 
-			if (args.staticColor === "black") {
-				container.style.backgroundColor = "rgb(181, 209, 211)";
-			} else if (args.staticColor === "white") {
-				 container.style.backgroundColor = "rgb(15, 121, 125)";
-			} else {
-				container.style.removeProperty("background-color");
+				container.style.removeProperty("background");
+				const hasStaticElement = container.querySelector(`.${args.rootClass}--staticWhite, .${args.rootClass}--staticBlack, .${args.rootClass}--overBackground`);
+				if (hasStaticElement) {
+					if (container.querySelector(`.${args.rootClass}--staticBlack`)) {
+						container.style.background = "rgb(181, 209, 211)";
+					} else if (container.querySelector(`.${args.rootClass}--staticWhite, .${args.rootClass}--overBackground`)) {
+						container.style.background = "rgb(15, 121, 125)";
+					}
+				}
 			}
 		}, [color, scale, isExpress, args.staticColor]);
 

diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js
@@ -150,9 +150,9 @@ export default {
 const AccordionGroup = (args) => html`
 	${window.isChromatic() ? html`
 		<div style=${styleMap({
-			display: "flex",
-			flexWrap: "wrap",
-			gap: "2em"
+			"display": "flex",
+			"flex-wrap": "wrap",
+			"gap": "28px"
 		})}>
 			${Template(args)}
 			${Template({

diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js
@@ -23,55 +23,53 @@ export const AccordionItem = ({
 	customClasses = [],
 	onclick,
 	...globals
-}) => {
-	return html`
+}) => html`
+	<div
+		class=${classMap({
+			[rootClass]: true,
+			"is-open": isOpen && !isDisabled,
+			"is-disabled": isDisabled,
+			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+		})}
+		id=${ifDefined(id)}
+		style=${ifDefined(styleMap(customStyles))}
+		role="presentation"
+		@click=${onclick}
+	>
+		<!-- WAI-ARIA 1.1: Item header is a <button> wrapped within a <h3> element, rather than a <div> element with role="tab" -->
+		<h3 class="${rootClass}Heading">
+			<!-- WAI-ARIA 1.1: Item header <button> uses aria-expanded attribute to indicate expanded state. -->
+			<button
+				class="${rootClass}Header"
+				type="button"
+				?disabled=${isDisabled}
+				id="spectrum-accordion-item-${idx}-header"
+				aria-controls="spectrum-accordion-item-${idx}-content"
+				aria-expanded="${open ? "true" : "false"}"
+			>
+				${heading}
+			</button>
+			<span class="${rootClass}IconContainer">
+				${Icon({
+					iconName: !isOpen ? "ChevronRight" : "ChevronDown",
+					setName: "ui",
+					size: iconSize,
+					customClasses: [`${rootClass}Indicator`],
+					...globals,
+				})}
+			</span>
+		</h3>
+		<!-- WAI-ARIA 1.1: Item content role changed from "tabpanel" to "region" -->
 		<div
-			class=${classMap({
-				[rootClass]: true,
-				"is-open": isOpen && !isDisabled,
-				"is-disabled": isDisabled,
-				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-			})}
-			id=${ifDefined(id)}
-			style=${ifDefined(styleMap(customStyles))}
-			role="presentation"
-			@click=${onclick}
+			class="${rootClass}Content"
+			role="region"
+			id="spectrum-accordion-item-${idx}-content"
+			aria-labelledby="spectrum-accordion-item-${idx}-header"
 		>
-			<!-- WAI-ARIA 1.1: Item header is a <button> wrapped within a <h3> element, rather than a <div> element with role="tab" -->
-			<h3 class="${rootClass}Heading">
-				<!-- WAI-ARIA 1.1: Item header <button> uses aria-expanded attribute to indicate expanded state. -->
-				<button
-					class="${rootClass}Header"
-					type="button"
-					?disabled=${isDisabled}
-					id="spectrum-accordion-item-${idx}-header"
-					aria-controls="spectrum-accordion-item-${idx}-content"
-					aria-expanded="${open ? "true" : "false"}"
-				>
-					${heading}
-				</button>
-				<span class="${rootClass}IconContainer">
-					${Icon({
-						iconName: !isOpen ? "ChevronRight" : "ChevronDown",
-						setName: "ui",
-						size: iconSize,
-						customClasses: [`${rootClass}Indicator`],
-						...globals,
-					})}
-				</span>
-			</h3>
-			<!-- WAI-ARIA 1.1: Item content role changed from "tabpanel" to "region" -->
-			<div
-				class="${rootClass}Content"
-				role="region"
-				id="spectrum-accordion-item-${idx}-content"
-				aria-labelledby="spectrum-accordion-item-${idx}-header"
-			>
-				${content}
-			</div>
+			${content}
 		</div>
-	`;
-};
+	</div>
+`;
 
 export const Template = ({
 	rootClass = "spectrum-Accordion",

diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js
@@ -1,14 +1,15 @@
-// Import the component markup template
 import { Template } from "./template";
 
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { default as CloseButton } from "@spectrum-css/closebutton/stories/closebutton.stories.js";
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
 
+/**
+ * The action bar component is a floating full width bar that appears upon selection.
+ */
 export default {
 	title: "Components/Action bar",
-	description: "The Action bar component is a floating full width bar that appears upon selection",
-	component: "Actionbar",
+	component: "ActionBar",
 	argTypes: {
 		isOpen: {
 			name: "Open",

diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
@@ -51,7 +51,7 @@ export const Template = ({
 					...globals,
 					size: "m",
 					areQuiet: true,
-					staticColors: isEmphasized ? "white" : undefined,
+					staticColor: isEmphasized ? "white" : undefined,
 					content: [
 						{
 							iconName: "Edit",

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
@@ -120,7 +120,7 @@ export default {
 			control: "boolean",
 		},
 		staticColor: {
-			name: "StaticColor",
+			name: "Static color",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
@@ -161,18 +161,18 @@ export default {
 				.spectrum-Typography > div {
 					border: 1px solid var(--spectrum-gray-200);
 					border-radius: 4px;
-					padding: 0 1em 1em;
+					padding: 0 14px 14px;
 					/* 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",
+					"display": "flex",
+					"flex-direction": "column",
+					"align-items": "flex-start",
+					"gap": "16px",
+					"--mod-detail-margin-end": "4.8px",
 				})}
 			>
 				${Story(context)}
@@ -183,8 +183,8 @@ export default {
 
 const ActionButtons = (args) => html` <div
 	style=${styleMap({
-		display: "flex",
-		gap: "1rem",
+		"display": "flex",
+		"gap": "16px",
 	})}
 	id="render-root"
 >
@@ -332,9 +332,9 @@ const Variants = (args) =>
 					})}
 					<div
 						style=${styleMap({
-							display: "flex",
-							flexDirection: "column",
-							gap: ".3rem",
+							"display": "flex",
+							"flex-direction": "column",
+							"gap": "4.8px",
 						})}
 					>
 						${States(args)}
@@ -348,9 +348,9 @@ const Variants = (args) =>
 					})}
 					<div
 						style=${styleMap({
-							display: "flex",
-							flexDirection: "column",
-							gap: ".3rem",
+							"display": "flex",
+							"flex-direction": "column",
+							"gap": "4.8px",
 						})}
 					>
 						${States({
@@ -367,9 +367,9 @@ const Variants = (args) =>
 					})}
 					<div
 						style=${styleMap({
-							display: "flex",
-							flexDirection: "column",
-							gap: ".3rem",
+							"display": "flex",
+							"flex-direction": "column",
+							"gap": "4.8px",
 						})}
 					>
 						${States({
@@ -386,9 +386,9 @@ const Variants = (args) =>
 					})}
 					<div
 						style=${styleMap({
-							display: "flex",
-							flexDirection: "column",
-							gap: ".3rem",
+							"display": "flex",
+							"flex-direction": "column",
+							"gap": "4.8px",
 						})}
 					>
 						${Sizes(args)}

diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
@@ -38,15 +38,6 @@ export const Template = ({
 	role,
 	...globals
 }) => {
-	const { express } = globals;
-
-	try {
-		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	}
-	catch (e) {
-		console.warn(e);
-	}
 
 	return html`
 		<button

diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js
@@ -1,16 +1,17 @@
-// Import the component markup template
 import { Template } from "./template";
 
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 
+/**
+ * The action group component is a collection of action buttons.
+ */
 export default {
 	title: "Components/Action group",
-	description: "The Action group component is a collection of action buttons.",
 	component: "ActionGroup",
 	argTypes: {
 		areQuiet: ActionButton.argTypes.isQuiet,
 		areEmphasized: ActionButton.argTypes.isEmphasized,
-		staticColors: ActionButton.argTypes.staticColor,
+		staticColor: ActionButton.argTypes.staticColor,
 		content: { table: { disable: true } },
 		size: {
 			name: "Size",
@@ -55,7 +56,7 @@ export default {
 		size: "m",
 		areQuiet: ActionButton.args.isQuiet,
 		areEmphasized: ActionButton.args.isEmphasized,
-		staticColors: ActionButton.args.staticColor,
+		staticColor: ActionButton.args.staticColor,
 		vertical: false,
 		compact: false,
 		justified: false,

diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js
@@ -13,20 +13,11 @@ export const Template = ({
 	vertical = false,
 	compact = false,
 	justified = false,
-	staticColors,
+	staticColor,
 	content = [],
 	customClasses = [],
 	...globals
 }) => {
-	const { express } = globals;
-
-	try {
-		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	}
-	catch (e) {
-		console.warn(e);
-	}
 
 	return html`
 		<div
@@ -50,7 +41,7 @@ export const Template = ({
 							iconName: item.iconName,
 							isQuiet: areQuiet || item.isQuiet,
 							isEmphasized: areEmphasized || item.isEmphasized,
-							staticColor: staticColors ?? item.staticColor,
+							staticColor: staticColor ?? item.staticColor,
 							customClasses: [`${rootClass}-item`],
 						});
 					case "function":