From 8042564e613871cf7510a6bd58a1293db1ccc4f9 Mon Sep 17 00:00:00 2001
From: Matt Darveniza <matt.darveniza@biarri.com>
Date: Thu, 20 Aug 2020 16:43:33 +1000
Subject: [PATCH] Add example codesnippet for using ArgsTable with stories

---
 ...ry-mdx-argstable-block-for-component.mdx.mdx} |  0
 ...t-story-mdx-argstable-block-for-story.mdx.mdx | 15 +++++++++++++++
 docs/writing-docs/doc-blocks.md                  | 16 +++++++++++++++-
 3 files changed, 30 insertions(+), 1 deletion(-)
 rename docs/snippets/common/{component-story-mdx-argstable-block.mdx.mdx => component-story-mdx-argstable-block-for-component.mdx.mdx} (100%)
 create mode 100644 docs/snippets/common/component-story-mdx-argstable-block-for-story.mdx.mdx

diff --git a/docs/snippets/common/component-story-mdx-argstable-block.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-block-for-component.mdx.mdx
similarity index 100%
rename from docs/snippets/common/component-story-mdx-argstable-block.mdx.mdx
rename to docs/snippets/common/component-story-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
new file mode 100644
index 000000000000..f04104f04d90
--- /dev/null
+++ 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/blocks';
+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
index 43d73010ce06..6b9a455b1821 100644
--- a/docs/writing-docs/doc-blocks.md
+++ b/docs/writing-docs/doc-blocks.md
@@ -51,11 +51,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',
   ]}
 />