docs(statuslight): adds isDisabled controls, test case and story

adobe · Sep 23, 2024 · bafef35 · bafef35
1 parent 5e557bd
commit bafef35
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js
@@ -1,5 +1,5 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { size } from "@spectrum-css/preview/types";
+import { isDisabled, size } from "@spectrum-css/preview/types";
 import { Sizes } from "@spectrum-css/preview/decorators";
 import pkgJson from "../package.json";
 import { StatusLightGroup } from "./statuslight.test.js";
@@ -22,6 +22,7 @@ export default {
 			},
 			control: { type: "text" },
 		},
+		isDisabled,
 		variant: {
 			name: "Variant",
 			description: "Changes the color of the status dot. The variant list includes both semantic and non-semantic options.",
@@ -60,6 +61,7 @@ export default {
 		size: "m",
 		label: "Status",
 		variant: "info",
+		isDisabled: false,
 	},
 	parameters: {
 		packageJson: pkgJson,
@@ -115,6 +117,15 @@ NonSemanticColors.parameters = {
 };
 NonSemanticColors.storyName = "Non-semantic colors";
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+	isDisabled: true,
+};
+Disabled.tags = ["!dev"];
+Disabled.parameters = {
+	chromatic: { disabledSnapshot: true },
+};
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = StatusLightGroup.bind({});
 WithForcedColors.tags = ["!autodocs", "!dev"];

diff --git a/components/statuslight/stories/statuslight.test.js b/components/statuslight/stories/statuslight.test.js
@@ -16,7 +16,13 @@ export const StatusLightGroup = Variants({
 		{
 			testHeading: "Truncation",
 			label: "Status light label that is long and wraps to the next line",
-			customStyles: {"max-width": "150px"}
+			customStyles: {"max-width": "150px"},
 		}
 	],
+	stateData: [
+		{
+			testHeading: "Disabled",
+			isDisabled: true,
+		}
+	]
 });
diff --git a/components/statuslight/stories/template.js b/components/statuslight/stories/template.js
@@ -10,6 +10,7 @@ export const Template = ({
 	size = "m",
 	variant = "info",
 	label,
+	isDisabled,
 	customStyles = {},
 } = {}) => html`
 	<div
@@ -18,6 +19,7 @@ export const Template = ({
 			[`${rootClass}--size${size?.toUpperCase()}`]:
 				typeof size !== "undefined",
 			[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+			"is-disabled": isDisabled,
 		})}
 		style=${styleMap(customStyles)}
 	>