Merge pull request #19977 from JohnAlbin/patch-1

Add first MDX example for storybook/html
storybookjs · Dec 9, 2022 · 4f511df · 4f511df
2 parents 59d0bcc + 1ec448e
commit 4f511df
Showing 1 changed file with 45 additions and 0 deletions.
diff --git a/docs/snippets/html/checkbox-story.mdx.mdx b/docs/snippets/html/checkbox-story.mdx.mdx
@@ -0,0 +1,45 @@
+```md
+<!-- Checkbox.stories.mdx -->
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+export const Checkbox = (args) => `<label>
+  ${args?.label}
+  <input
+    type="checkbox"
+    ${args?.checked ? 'checked' : ''}
+    ${args?.appearance ? `class="${args.appearance}"` : ''}
+  />
+</label>`;
+
+<Meta title="MDX/Checkbox" component={Checkbox} />
+
+# Checkbox
+
+With `MDX`, we can define a story for `Checkbox` right in the middle of our
+Markdown documentation.
+
+<Canvas>
+  <Story 
+    name="Unchecked"
+    args={{ 
+      label: 'Unchecked',
+    }}
+    render={Checkbox} />
+  <Story 
+    name="Checked"
+    args={{ 
+      label: 'Unchecked', 
+      checked: true,
+    }}
+    render={Checkbox} />
+  <Story 
+    name="Secondary" 
+    args={{
+      label: 'Secondary', 
+      checked: true, 
+      appearance: 'secondary',
+    }}
+    render={Checkbox} />
+</Canvas>
+```