docs(switch): docs site to storybook

components/switch/stories/switch.stories.js

@@ -1,11 +1,12 @@
+import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isChecked, isDisabled, isEmphasized, size } from "@spectrum-css/preview/types";
 import pkgJson from "../package.json";
 import { SwitchGroup } from "./switch.test.js";
-import { Template } from "./template.js";
+import { DocsSwitchGroup, Template } from "./template.js";
 
 /**
- * A switch is used to turn an option on or off. Switches allow users to select the state of a single option at a time.
+ * A switch is used to turn an option on or off. Switches allow users to select the state of a single option at a time and are best used for communicating activation.
  */
 export default {
 	title: "Switch",
@@ -37,6 +38,7 @@ export default {
 };
 
 export const Default = SwitchGroup.bind({});
+Default.tags = ["!autodocs"];
 Default.args = {};
 
 // ********* VRT ONLY ********* //
@@ -50,31 +52,78 @@ WithForcedColors.parameters = {
 };
 
 // ********* DOCS ONLY ********* //
-export const Emphasized = Template.bind({});
+/**
+ * Switches can either be selected or not selected. They cannot be in an indeterminate state (unlike
+ * [checkboxes](?path=/docs/components-checkbox--docs)). When a switch represents multiple values that are not
+ * identical (mixed values), the switch should appear as not selected.
+ */
+export const DocsDefault = DocsSwitchGroup.bind({});
+DocsDefault.storyName = "Default";
+DocsDefault.tags = ["!dev"];
+DocsDefault.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * A switch in a disabled state shows that a selection exists, but is not available in that circumstance. This can be
+ * used to maintain layout continuity and communicate that an action may become available later.
+ */
+export const Disabled = DocsSwitchGroup.bind({});
+Disabled.tags = ["!dev"];
+Disabled.args = {
+	isDisabled: true
+};
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true }
+};
+
+/**
+ * Emphasized switches are optimal for forms, settings, and other scenarios where the switches need to be noticed. Not
+ * emphasized (gray) switches are optimal for application panels where all the visual components are monochrome in
+ * order to direct focus to the canvas.
+ */
+export const Emphasized = DocsSwitchGroup.bind({});
 Emphasized.tags = ["!dev"];
 Emphasized.args = {
 	isEmphasized: true,
-	label: "Switch label that is so long it wraps to the next line",
-	customStyles: {"max-width": "250px"}
 };
 Emphasized.parameters = {
 	chromatic: { disableSnapshot: true }
 };
 
-export const Checked = Template.bind({});
-Checked.tags = ["!dev"];
-Checked.args = {
-	isChecked: true
+/**
+ * When the label is too long for the horizontal space available, it wraps to form another line.
+ */
+export const WithLongerLabel = DocsSwitchGroup.bind({});
+WithLongerLabel.storyName = "Longer label";
+WithLongerLabel.tags = ["!dev"];
+WithLongerLabel.args = {
+	label: "Switch label that is so long it wraps to the next line",
+	customStyles: {"max-width": "250px"}
 };
-Checked.parameters = {
+WithLongerLabel.parameters = {
 	chromatic: { disableSnapshot: true }
 };
 
-export const Disabled = Template.bind({});
-Disabled.tags = ["!dev"];
-Disabled.args = {
-	isDisabled: true
+export const Sizing = (args, context) => Sizes({
+	Template,
+	...args,
+}, context);
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
 };
-Disabled.parameters = {
+
+/**
+ * Standalone switches should be used in situations where the context is clear without an associated text label. For
+ * example, a switch located at the top of a panel next to the panel's title makes it clear that the switch will
+ * enable/disable the panel options.
+ */
+export const Standalone = DocsSwitchGroup.bind({});
+Standalone.tags = ["!dev"];
+Standalone.args = {
+	label: "",
+};
+Standalone.parameters = {
 	chromatic: { disableSnapshot: true }
 };

components/switch/stories/template.js

@@ -1,4 +1,4 @@
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -50,3 +50,28 @@ export const Template = ({
 		</div>
 	`;
 };
+
+export const DocsSwitchGroup = (args, context) => Container({
+	withBorder: false,
+	content: html`
+	${Container({
+		heading: "Not selected",
+		content: html`
+			${Template({
+				...args,
+				context,
+				isChecked: false,
+			})}
+		`
+	})}
+	${Container({
+		heading: "Selected",
+		content: html`
+			${Template({
+				...args,
+				context,
+				isChecked: true,
+			})}
+		`
+	})}`
+});