Merge pull request storybookjs#12155 from mattdarveniza/mdx-argstable…

…-stories Add example codesnippet for using ArgsTable with stories
abue9 · Jul 13, 2021 · e7a0016 · e7a0016
2 parents 9ab0618 + 8ad7c83
commit e7a0016
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/...mponent-story-mdx-argstable-block.mdx.mdx → ...mdx-argstable-block-for-component.mdx.mdx b/...mponent-story-mdx-argstable-block.mdx.mdx → ...mdx-argstable-block-for-component.mdx.mdx
diff --git a/docs/snippets/common/component-story-mdx-argstable-block-for-story.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-block-for-story.mdx.mdx
@@ -0,0 +1,15 @@
+```md
+<!--- MyComponent.stories.mdx -->
+
+import { ArgsTable } from '@storybook/addon-docs';
+import { MyComponent } from './MyComponent';
+
+# My Component!
+
+<Story name="My Story">
+  <!-- my story for MyComponent -->
+  {(args) => <MyComponent {...args} />}
+</Story>
+
+<ArgsTable story="My Story" />
+```
diff --git a/docs/writing-docs/doc-blocks.md b/docs/writing-docs/doc-blocks.md
@@ -60,11 +60,25 @@ To use the `ArgsTable` in [DocsPage](./docs-page.md#component-parameter), export
 
 To use the `ArgsTable` block in MDX, add the following:
 
+#### For components
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/component-story-mdx-argstable-block-for-component.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+#### For Stories
+
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/component-story-mdx-argstable-block.mdx.mdx',
+    'common/component-story-mdx-argstable-block-for-story.mdx.mdx',
   ]}
 />