fix(opacitycheckboard): add to component stories (#2056)

* feat(opacitycheckerboard): modify stories for use in components

- Modify storybook template so that it can be imported and used by other
  components' stories. Allow passing in content, and excluding the
  storybook testing wrapper markup.
- Moves defaultValue to args, as that syntax has been deprecated in
  newer versions of Storybook:
  https://storybook.js.org/docs/react/api/arg-types#defaultvalue
- Adds a new story with a centered background position mod, and
  clarifies that the arg is changing the mod.

* chore(colorhandle): add checkerboard to story

* chore(swatch): add checkerboard to story

* chore(thumbnail): add opacity checkerboard to stories

* fix(opacitycheckerboard): capitalization

* fix: resolve some chromatic differences

Colorhandle had lost some of the classes being passed to it. They needed
to be passed down to the new OpacityCheckerboard story template.

---------

Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com>
Co-authored-by: Patrick Fulton <360251+pfulton@users.noreply.github.com>

Author: 3 people

components/colorhandle/stories/template.js

@@ -1,6 +1,5 @@
 import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
+import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
 
 import "../index.css";
 
@@ -12,18 +11,21 @@ export const Template = ({
 	colorHandleStyle = {
 		"--spectrum-picked-color": "rgba(255, 0, 0, 0.5)",
 	},
-	// ...globals
+	...globals
 }) => {
+	const checkerboardContent = html `<div class="${rootClass}-inner"></div>`
+
 	return html`
-  <div class=${classMap({
-		[rootClass]: true,
-		"is-disabled": isDisabled,
-		"is-focused": !isDisabled && isFocused,
-		...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-	})}
-  style=${styleMap(colorHandleStyle)}>
-      <div class="${rootClass}-inner"></div>
-    </div>
-  </div>
-  `;
-};
+		${OpacityCheckerboard({
+			...globals,
+			componentOnly: true,
+			customClasses: [
+				`${rootClass}`,
+				...!isDisabled && isFocused ? ["is-focused"] : [],
+				...isDisabled ? ["is-disabled"] : [],
+				...customClasses,
+			],
+			content: checkerboardContent,
+			checkerBoardStyles: colorHandleStyle,
+		})}`
+}

components/opacitycheckerboard/stories/opacitycheckerboard.stories.js

@@ -1,15 +1,14 @@
 import { Template } from "./template";
 
 export default {
-	title: "Components/Opacity Checkerboard",
+	title: "Components/Opacity checkerboard",
 	description:
 		"Opacity checkerboard is used with other components to highlight opacity.",
 	component: "OpacityCheckerboard",
 	argTypes: {
 		hasColorOverlay: {
 			name: "Has Color Overlay",
 			type: { name: "boolean" },
-			defaultValue: false,
 			table: {
 				category: "Component",
 			},
@@ -18,7 +17,6 @@ export default {
 		overlayColor: {
 			name: "Overlay Color",
 			type: { name: "string" },
-			defaultValue: "rgba(255, 0, 0, 0.5)",
 			table: {
 				category: "Component",
 			},
@@ -28,16 +26,27 @@ export default {
 		backgroundPosition: {
 			name: "Position",
 			type: { name: "string" },
-			defaultValue: "top left",
 			table: {
 				category: "Component",
 			},
 			control: "text",
-			description: "Accepts any valid CSS background-position property value",
+			description: "Value for <code>--mod-opacity-checkerboard-position</code>. Accepts any valid CSS background-position property value.",
+		},
+		componentOnly: {
+			name: "Use Component Markup Only",
+			type: { name: "boolean" },
+			table: {
+				disable: true,
+			},
 		},
 	},
 	args: {
 		rootClass: "spectrum-OpacityCheckerboard",
+		hasColorOverlay: false,
+		overlayColor: "rgba(255, 0, 0, 0.5)",
+		backgroundPosition: "top left",
+		componentOnly: false,
+		content: '',
 	},
 	parameters: {
 		actions: {
@@ -52,3 +61,16 @@ export default {
 };
 export const Default = Template.bind({});
 Default.args = {};
+
+export const CheckerboardPosition = Template.bind({});
+CheckerboardPosition.args = {
+	backgroundPosition: 'center center',
+};
+CheckerboardPosition.parameters = {
+	docs: {
+		description: {
+			story:
+				"An example of using the <code>--mod-opacity-checkerboard-position</code> custom property to adjust the position of the checkerboard pattern.",
+		},
+	},
+};

components/opacitycheckerboard/stories/template.js

@@ -2,6 +2,7 @@ import { html } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { when } from "lit-html/directives/when.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 
 import "../index.css";
 
@@ -25,8 +26,25 @@ export const Template = ({
 		position: "relative",
 		"inset-block": "-100%",
 	},
+	componentOnly,
+	content,
+	role,
 	...globals
 }) => {
+	// Just the component markup. For use by other component's stories.
+	if (componentOnly){
+		return html`
+			<div
+				class=${classMap({
+					[rootClass]: true,
+					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+				})}
+				style=${styleMap(checkerBoardStyles)}
+				role=${ifDefined(role)}
+			>${content}</div>`;
+	}
+
+	// Component with wrapper for Storybook display, and a testing overlay.
 	return html`
 		<div style=${styleMap(containerStyles)}>
 			<div
@@ -35,7 +53,8 @@ export const Template = ({
 					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 				})}
 				style=${styleMap(checkerBoardStyles)}
-			></div>
+				role=${ifDefined(role)}
+			>${content}</div>
 			${when(hasColorOverlay, () => {
 				return html` <div style=${styleMap(colorStyles)}></div>`;
 			})}

components/swatch/stories/swatch.stories.js

@@ -6,7 +6,19 @@ export default {
 	description:
 		"A swatch shows a small sample of a fill—such as a color, gradient, texture, or material—that is intended to be applied to an object.",
 	component: "Swatch",
-	argTypes: {},
+	argTypes: {
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["xs", "s", "m", "l",],
+			control: "select",
+		},
+		styles: { table: { disable: true } },
+	},
 	args: {
 		rootClass: "spectrum-Swatch",
 	},
@@ -24,3 +36,8 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {};
+
+export const Transparent = Template.bind({});
+Transparent.args = {
+	styles: {"--spectrum-picked-color": "rgba(174, 216, 230, 0.3)"},
+};

components/swatch/stories/template.js

@@ -1,13 +1,15 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-
+import { styleMap } from "lit/directives/style-map.js";
+import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
 import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-Swatch",
 	size = "m",
 	customClasses = [],
+	styles = {"--spectrum-picked-color": "rgb(174, 216, 230)"},
 	id,
 	...globals
 }) => {
@@ -29,10 +31,14 @@ export const Template = ({
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
-			style="--spectrum-picked-color: rgb(174, 216, 230)"
+			style=${styleMap(styles)}
 			tabindex="0"
 		>
-			<div class="${rootClass}-fill"></div>
+		${OpacityCheckerboard({
+			...globals,
+			componentOnly: true,
+			customClasses: [`${rootClass}-fill`],
+		})}
 		</div>
 	`;
 };