feat(opacitycheckerboard): S2, small t-shirt size squares (#2610)

* feat(opacitycheckerboard): small t-shirt size squares
* docs(opacitycheckerboard): chromatic coverage for t-shirt size

Author: Melissa Thompson

components/opacitycheckerboard/index.css

@@ -15,11 +15,17 @@ permissions and limitations under the License. */
 		--spectrum-opacity-checkerboard-square-light
 	);
 	--spectrum-opacity-checkerboard-size: var(
-		--spectrum-opacity-checkerboard-square-size
+		--spectrum-opacity-checkerboard-square-size-medium
 	);
 	--spectrum-opacity-checkerboard-position: left top;
 }
 
+.spectrum-OpacityCheckerboard--sizeS {
+	--spectrum-opacity-checkerboard-size: var(
+		--spectrum-opacity-checkerboard-square-size-small
+	);
+}
+
 .spectrum-OpacityCheckerboard {
 	background: repeating-conic-gradient(
 			var(

components/opacitycheckerboard/stories/opacitycheckerboard.stories.js

@@ -19,6 +19,16 @@ export default {
 			control: "text",
 			description: "Value for <code>--mod-opacity-checkerboard-position</code>. Accepts any valid CSS background-position property value.",
 		},
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["s", "m"],
+			control: "select",
+		},
 	},
 	args: {
 		rootClass: "spectrum-OpacityCheckerboard",
@@ -37,21 +47,40 @@ export default {
 	],
 };
 
-export const Default = Template.bind({});
-Default.args = {
-	customStyles: {
-		"inline-size": "100%",
-		"block-size": "100%"
-	}
-};
+const CheckerboardDefault = (args) => html`
+	${window.isChromatic() ? html`
+			${Template({
+				...args,
+				customStyles: {
+					"inline-size": "100%",
+					"block-size": "100%"
+				}
+			})}
+			<br>
+			${Template({
+				...args,
+				customStyles: {
+					"inline-size": "100%",
+					"block-size": "100%"
+				},
+				size: "s",
+			})}
+	` : Template({
+			...args,
+			customStyles: {
+				"inline-size": "100%",
+				"block-size": "100%"
+			}
+		})}
+`;
+
+
+export const Default = CheckerboardDefault.bind({});
+Default.args = {};
 
-export const CheckerboardPosition = Template.bind({});
+export const CheckerboardPosition = CheckerboardDefault.bind({});
 CheckerboardPosition.args = {
 	backgroundPosition: "center center",
-	customStyles: {
-		"inline-size": "100%",
-		"block-size": "100%"
-	}
 };
 CheckerboardPosition.parameters = {
 	docs: {

components/opacitycheckerboard/stories/template.js

@@ -12,19 +12,23 @@ export const Template = ({
 	customStyles = {},
 	id,
 	content = [],
+	size,
 	role,
-}) => html`
-	<div
-		class=${classMap({
-			[rootClass]: true,
-			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-		})}
-		style=${ifDefined(styleMap({
-			"--mod-opacity-checkerboard-position": backgroundPosition,
-			...customStyles,
-		}))}
-		role=${ifDefined(role)}
-		id=${ifDefined(id)}
-	>
-		${content}
-	</div>`;
+}) => {
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			style=${ifDefined(styleMap({
+				"--mod-opacity-checkerboard-position": backgroundPosition,
+				...customStyles,
+			}))}
+			role=${ifDefined(role)}
+			id=${ifDefined(id)}
+		>
+			${content}
+		</div>`;
+};