chore: storybook context application

.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,39 @@ 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}`),
+				...document.querySelectorAll(`#story--${id}--primary`)
+			];
+			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]);
 

components/button/stories/template.js

@@ -85,14 +85,12 @@ export const Template = ({
       )}
       ${when(iconName && iconAfterLabel, () => Icon({ ...globals, iconName, size }))}
       ${when(isPending, () => {
-        const isOverBackground = staticColor === "white";
         return ProgressCircle({
           ...globals,
           size: "s",
           testId: "progress-circle",
-          overBackground: isOverBackground,
+          staticColor,
           isIndeterminate: true,
-          addStaticBackground: false
         });
       })}
     </button>

components/progresscircle/stories/progresscircle.stories.js

@@ -1,12 +1,13 @@
-import isChromatic from "chromatic/isChromatic";
 import { html } from "lit";
+
 import { Template } from "./template";
 
+/**
+ * Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.
+ */
 export default {
 	title: "Components/Progress circle",
-	description:
-		"Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.",
-	component: "Progresscircle",
+	component: "ProgressCircle",
 	argTypes: {
 		size: {
 			name: "Size",
@@ -27,21 +28,23 @@ export default {
 			},
 			control: "boolean",
 		},
-		overBackground: {
-			name: "Over Background",
-			type: { name: "boolean" },
+		staticColor: {
+			name: "Static color",
+			type: { name: "string" },
 			table: {
-				type: { summary: "boolean" },
+				disable: true,
+				type: { summary: "string" },
 				category: "Advanced",
 			},
-			control: "boolean",
+			options: ["white"],
+			control: "select",
 		},
 	},
 	args: {
 		rootClass: "spectrum-ProgressCircle",
 		size: "m",
 		isIndeterminate: false,
-		overBackground: false,
+		staticColor: undefined,
 	},
 	parameters: {
 		actions: {
@@ -53,22 +56,20 @@ export default {
 	},
 };
 
-const chromaticKitchenSink = (args) => html`
-	${Template(args)}
-	${Template({
-		...args,
-		isIndeterminate: true,
-	})}
-	${Template({
-		...args,
-		overBackground: true,
-	})}
-	${Template({
-		...args,
-		isIndeterminate: true,
-		overBackground: true,
-	})}
+const ProgressCircleGroup = (args) => html`
+	${window.isChromatic() ? html`
+		${Template(args)}
+		${Template({
+			...args,
+			isIndeterminate: true,
+		})}
+	` : Template(args)}
 `;
 
-export const Default = (args) => isChromatic() ? chromaticKitchenSink(args) : Template(args);
+export const Default = ProgressCircleGroup.bind({});
 Default.args = {};
+
+export const StaticWhite = ProgressCircleGroup.bind({});
+StaticWhite.args = {
+	staticColor: "white",
+};

components/progresscircle/stories/template.js

@@ -12,9 +12,8 @@ export const Template = ({
 	rootClass = "spectrum-ProgressCircle",
 	customClasses = [],
 	size = "m",
-	overBackground = false,
+	staticColor,
 	isIndeterminate = false,
-	addStaticBackground = overBackground,
 }) => {
 	let sizeClassName = "medium";
 	switch (size) {
@@ -28,13 +27,13 @@ export const Template = ({
 			sizeClassName = "medium";
 	}
 
-	const componentMarkup = html`
+	return html`
 		<div
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--${sizeClassName}`]: typeof size !== "undefined",
 				[`${rootClass}--indeterminate`]: isIndeterminate,
-				[`${rootClass}--staticWhite`]: overBackground,
+				[`${rootClass}--staticWhite`]: staticColor === "white",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
@@ -56,10 +55,4 @@ export const Template = ({
 			</div>
 		</div>
 	`;
-
-	const decoratedMarkup = html`
-		<div style="background-color: #0F797D;">${componentMarkup}</div>
-	`;
-
-	return overBackground && addStaticBackground ? decoratedMarkup : componentMarkup;
 };