docs(statuslight): docs to storybook migration

components/statuslight/CHANGELOG.md

@@ -1030,6 +1030,12 @@ Co-authored-by: Patrick Fulton <pfulton@adobe.com>
 
 - implement t-shirt sizing for Status Light, closes [#686](https://github.com/adobe/spectrum-css/issues/686) ([0a20b52](https://github.com/adobe/spectrum-css/commit/0a20b52))
 
+### Migration Guide
+
+#### T-shirt sizing
+
+Status Light now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-StatusLight--size*` class.
+
 <a name="3.0.0-beta.4"></a>
 
 ## 3.0.0-beta.4

components/statuslight/stories/statuslight.stories.js

@@ -1,8 +1,13 @@
 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";
+import { Template, SemanticGroup, NonsemanticGroup } from "./template.js";
 
+/**
+ * Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.
+ */
 export default {
 	title: "Status light",
 	component: "Statuslight",
@@ -17,8 +22,10 @@ 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.",
 			type: { name: "string", required: true },
 			table: {
 				type: { summary: "string" },
@@ -54,15 +61,71 @@ export default {
 		size: "m",
 		label: "Status",
 		variant: "info",
+		isDisabled: false,
 	},
 	parameters: {
 		packageJson: pkgJson,
 	},
 };
 
+/**
+ * Status lights should always include a label with text that clearly communicates the kind of status being shown. Color alone is not enough to communicate the status. Do not change the text color to match the dot.
+ * 
+ * When the text is too long for the horizontal space available, it wraps to form another line.
+ */
 export const Default = StatusLightGroup.bind({});
 Default.args = {};
 
+/**
+ * Status lights come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
+ */
+export const Sizing = (args, context) => Sizes({
+	Template,
+	withBorder: false,
+	withHeading: false,
+	...args,
+}, context);
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * When status lights have a semantic meaning, they use semantic colors. Use these variants for the following statuses:
+ * - Informative (active, in use, live, published)
+ * - Neutral (archived, deleted, paused, draft, not started, ended)
+ * - Positive (approved, complete, success, new, purchased, licensed)
+ * - Notice (needs approval, pending, scheduled, syncing, indexing, processing)
+ * - Negative (error, alert, rejected, failed)
+ * 
+ * Semantic status lights should never be used for color coding categories or labels, and vice versa.
+ */
+export const SemanticColors = SemanticGroup.bind({});
+SemanticColors.tags = ["!dev"];
+SemanticColors.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+SemanticColors.storyName = "Semantic colors";
+
+/**
+ * When status lights are used to color code categories and labels that are commonly found in data visualization, they use label colors. The ideal usage for these is when there are 8 or fewer categories or labels being color coded.
+ */
+export const NonSemanticColors = NonsemanticGroup.bind({});
+NonSemanticColors.tags = ["!dev"];
+NonSemanticColors.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+NonSemanticColors.storyName = "Non-semantic colors";
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	isDisabled: true,
+};
+Disabled.tags = ["!dev"];
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = StatusLightGroup.bind({});
 WithForcedColors.tags = ["!autodocs", "!dev"];

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,
+		}
+	]
 });

components/statuslight/stories/template.js

@@ -1,3 +1,4 @@
+import { Container } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -9,6 +10,7 @@ export const Template = ({
 	size = "m",
 	variant = "info",
 	label,
+	isDisabled,
 	customStyles = {},
 } = {}) => html`
 	<div
@@ -17,9 +19,45 @@ export const Template = ({
 			[`${rootClass}--size${size?.toUpperCase()}`]:
 				typeof size !== "undefined",
 			[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+			"is-disabled": isDisabled,
 		})}
 		style=${styleMap(customStyles)}
 	>
 		${label}
 	</div>
 `;
+
+// TODO: the accent variant will be removed in S2.
+export const SemanticGroup = (args, context) => Container({
+	withBorder: false,
+	direction: "column",
+	content: html`${[
+		"accent",
+		"neutral",
+		"info",
+		"negative",
+		"notice",
+		"positive"].map(variant => Template({...args, variant: variant, label: `${variant.charAt(0).toUpperCase() + variant.slice(1)} status` }, context))
+	}`
+});
+
+export const NonsemanticGroup = (args, context) => Container({
+	withBorder: false,
+	direction: "column",
+	content: html`${[
+		"gray",
+		"red",
+		"orange",
+		"yellow",
+		"chartreuse",
+		"celery",
+		"green",
+		"seafoam",
+		"cyan",
+		"blue",
+		"indigo",
+		"purple",
+		"fuchsia",
+		"magenta",].map(variant => Template({...args, variant: variant, label: `${variant.charAt(0).toUpperCase() + variant.slice(1)}`}, context))
+	}`
+});