docs(opacitycheckerboard): chromatic coverage for t-shirt size

Author: Melissa Thompson

components/opacitycheckerboard/stories/opacitycheckerboard.stories.js

@@ -46,21 +46,41 @@ export default {
 		(Story, context) => html`<div style=${styleMap({ inlineSize: "100px", blockSize: "100px" })}>${Story(context)}</div>`
 	],
 };
-export const Default = Template.bind({});
-Default.args = {
-	customStyles: {
-		"inline-size": "100%",
-		"block-size": "100%"
-	}
-};
 
-export const CheckerboardPosition = Template.bind({});
+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 = CheckerboardDefault.bind({});
 CheckerboardPosition.args = {
 	backgroundPosition: "center center",
-	customStyles: {
-		"inline-size": "100%",
-		"block-size": "100%"
-	}
 };
 CheckerboardPosition.parameters = {
 	docs: {