chore: storybook description format; lit syntax alignment

adobe · Apr 19, 2024 · 7e6ecf8 · 7e6ecf8
1 parent d628941
commit 7e6ecf8
Show file tree

Hide file tree

Showing 127 changed files with 2,121 additions and 2,133 deletions.
diff --git a/.storybook/decorators/contextsWrapper.js b/.storybook/decorators/contextsWrapper.js
@@ -8,7 +8,9 @@ export const withContextWrapper = makeDecorator({
 	name: "withContextWrapper",
 	parameterName: "context",
 	wrapper: (StoryFn, context) => {
-		const { args, argTypes, viewMode } = context;
+		const { args, argTypes, viewMode, id } = context;
+
+		console.log(context);
 
 		const getDefaultValue = (type) => {
 			if (!type) return null;
@@ -31,25 +33,37 @@ 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);
-
-			container.classList.toggle("spectrum--express", isExpress);
+			let containers = [document.body];
 
-			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);
+				}
+
+
+				container.style.removeProperty("background");
 
-			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");
+				if (container.querySelector(":has([class*='--static'")) {
+					console.log(container);
+					if (args.staticColor === "black") {
+						container.style.background = "rgb(181, 209, 211)";
+					} else if (args.staticColor === "white") {
+						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" },
@@ -168,11 +168,11 @@ export default {
 			</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/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,7 +13,7 @@ export const Template = ({
 	vertical = false,
 	compact = false,
 	justified = false,
-	staticColors,
+	staticColor,
 	content = [],
 	customClasses = [],
 	...globals
@@ -50,7 +50,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":

diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js
@@ -1,18 +1,19 @@
 import { userEvent, within } from "@storybook/testing-library";
 import { html } from "lit";
 
-// Import the component markup template
 import { Template } from "./template";
 
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
 
+/**
+ * The action menu component is an action button with a popover.
+ */
 export default {
 	title: "Components/Action menu",
-	description: "The Action menu component is an action button with a Popover.",
-	component: "Action menu",
+	component: "ActionMenu",
 	argTypes: {
 		items: { table: { disable: true } },
 		isOpen: {
@@ -65,7 +66,9 @@ Default.play = async ({ canvasElement }) => {
 	await userEvent.click(canvas.getByRole("button", { id: "trigger" }));
 };
 // provide padding so that Chromatic can capture the full focus indicator
-Default.decorators = [(Story) => html`<div style="padding: 1em;">${Story().outerHTML || Story()}</div>`];
+Default.decorators = [
+	(Story) => html`<div style="padding: 1em;">${Story().outerHTML || Story()}</div>`
+];
 Default.args = {
 	isOpen: false,
 	label: "More Actions",