docs(dial,dialog,divider,dropindicator): Migrate docs to storybook pt7

components/dial/stories/dial.stories.js

@@ -2,6 +2,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused } from "@spectrum-css/preview/types";
 import { version } from "../package.json";
 import { DialGroup } from "./dial.test.js";
+import { Template } from "./template.js";
 
 /**
  * A dial is an input control used for selecting a value within a range, similar to a slider. It's often used in audio and video mixing and editing applications, where horizontal space is limited.
@@ -28,7 +29,7 @@ export default {
 			},
 			control: "text",
 		},
-		isFocused,
+		isFocusVisible: isFocused,
 		isDragged: {
 			name: "Dragged",
 			type: { name: "boolean" },
@@ -51,7 +52,7 @@ export default {
 	args: {
 		rootClass: "spectrum-Dial",
 		size: "m",
-		isFocused: false,
+		isFocusVisible: false,
 		isDragged: false,
 		isDisabled: false,
 	},
@@ -63,6 +64,33 @@ export default {
 export const Default = DialGroup.bind();
 Default.args = {};
 
+export const Small = Template.bind();
+Small.args = {
+	size: "s",
+};
+Small.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Small.tags = ["!dev"];
+
+export const WithLabel = Template.bind();
+WithLabel.args = {
+	label: "Volume",
+};
+WithLabel.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+WithLabel.tags = ["!dev"];
+
+export const Disabled = Template.bind();
+Disabled.args = {
+	isDisabled: true,
+};
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Disabled.tags = ["!dev"];
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = DialGroup.bind({});
 WithForcedColors.args = Default.args;

components/dial/stories/dial.test.js

@@ -15,15 +15,15 @@ export const DialGroup = Variants({
 	],
 	stateData: [
 		{
-			heading: "Disabled",
+			testHeading: "Disabled",
 			isDisabled: true,
 		},
 		{
-			heading: "Focused",
-			isFocused: true,
+			testHeading: "Focused",
+			isFocusVisible: true,
 		},
 		{
-			heading: "Dragged",
+			testHeading: "Dragged",
 			isDragged: true,
 		},
 	],

components/dial/stories/template.js

@@ -10,7 +10,7 @@ export const Template = ({
 	rootClass = "spectrum-Dial",
 	size = "m",
 	label,
-	isFocused = false,
+	isFocusVisible = false,
 	isDragged = false,
 	isDisabled = false,
 	min = 0,
@@ -38,58 +38,58 @@ export const Template = ({
         if (isDisabled) return;
         if (!document.body.classList.contains("u-isGrabbing")) return;
 
-        const dial = e.target.closest(".spectrum-Dial");
-        const handle = dial.querySelector(".spectrum-Dial-handle");
-        const input = dial.querySelector("input");
-        const min = -45;
-        const max = 225;
-        const dialOffsetLeft = dial.offsetLeft + dial.offsetParent.offsetLeft;
-        var x = Math.max(Math.min(e.x - dialOffsetLeft, dial.offsetWidth), 0);
-        var percent = (x / dial.offsetWidth) * 100;
-        var deg = percent * 0.01 * (max - min) + min;
-        handle.style.transform = "rotate(" + deg + "deg" + ")";
-        input.value = Math.round(
-          percent * 0.01 * (input.max - input.min) + input.min
-        );
-      }}
-    >
-      ${when(
-        label,
-        () => html`<div class="${rootClass}-labelContainer">
-          <label id="dialLabel" class="${rootClass}-label" for="labeledDial"
-            >${label}</label
-          >
-          <div
-            class="${rootClass}-value"
-            role="textbox"
-            aria-readonly="true"
-            aria-labelledby="dialLabel"
-          >
-            ${min}
-          </div>
-        </div>`
-      )}
-      <div class="${rootClass}-controls">
-        <div
-          class="${rootClass}-handle ${isDragged ? "is-dragged" : ""} ${isFocused
-            ? "is-focused"
-            : ""}"
-          tabindex="0"
-        >
-          <input
-            type="range"
-            class="${rootClass}-input"
-            min="${min}"
-            max="${max}"
-            value="${min}"
-            @change=${(e) => {
-              const value = e.target.value;
-              const label = document.getElementById("dialLabel");
-              label.nextSibling.textContent = value;
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  `;
+				const dial = e.target.closest(".spectrum-Dial");
+				const handle = dial.querySelector(".spectrum-Dial-handle");
+				const input = dial.querySelector("input");
+				const min = -45;
+				const max = 225;
+				const dialOffsetLeft = dial.offsetLeft + dial.offsetParent.offsetLeft;
+				var x = Math.max(Math.min(e.x - dialOffsetLeft, dial.offsetWidth), 0);
+				var percent = (x / dial.offsetWidth) * 100;
+				var deg = percent * 0.01 * (max - min) + min;
+				handle.style.transform = "rotate(" + deg + "deg" + ")";
+				input.value = Math.round(
+					percent * 0.01 * (input.max - input.min) + input.min
+				);
+			}}
+		>
+			${when(
+				label,
+				() => html`<div class="${rootClass}-labelContainer">
+					<label id="dialLabel" class="${rootClass}-label" for="labeledDial"
+						>${label}</label
+					>
+					<div
+						class="${rootClass}-value"
+						role="textbox"
+						aria-readonly="true"
+						aria-labelledby="dialLabel"
+					>
+						${min}
+					</div>
+				</div>`
+			)}
+			<div class="${rootClass}-controls">
+				<div
+					class="${rootClass}-handle
+					${isDragged ? "is-dragged": ""}
+					${isFocusVisible ? "is-focus-visible": ""}"
+					tabindex="0"
+				>
+					<input
+						type="range"
+						class="${rootClass}-input"
+						min="${min}"
+						max="${max}"
+						value="${min}"
+						@change=${(e) => {
+							const value = e.target.value;
+							const label = document.getElementById("dialLabel");
+							label.nextSibling.textContent = value;
+						}}
+					/>
+				</div>
+			</div>
+		</div>
+	`;
 };