From 0309811a2b713dcde8c9d5968f128ae74039122a Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sun, 27 Jun 2021 19:26:03 +0800
Subject: [PATCH] Merge pull request #15383 from
 storybookjs/docs/vue3-mdx-example

Vue3: Add MDX example
---
 .../vue-3-cli/src/stories/Button.stories.mdx  | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 examples/vue-3-cli/src/stories/Button.stories.mdx

diff --git a/examples/vue-3-cli/src/stories/Button.stories.mdx b/examples/vue-3-cli/src/stories/Button.stories.mdx
new file mode 100644
index 000000000000..57f6a735a7f1
--- /dev/null
+++ b/examples/vue-3-cli/src/stories/Button.stories.mdx
@@ -0,0 +1,56 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import MyButton from './Button.vue';
+
+<Meta
+  title="Example/ButtonMdx"
+  component={MyButton}
+  argTypes={{
+    backgroundColor: { control: 'color' },
+    size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
+    onClick: {},
+  }}
+/>
+
+export const Template = (args) => ({
+  components: { MyButton },
+  setup() {
+    return { args };
+  },
+  template: '<my-button v-bind="args" />',
+});
+
+# Button
+
+Simple button component
+
+## Primary
+
+<Canvas withToolbar>
+  <Story name="Primary" args={{ primary: true, label: 'Button' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Secondary
+
+<Canvas>
+  <Story name="Secondary" args={{ label: 'Button' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Large
+
+<Canvas>
+  <Story name="Large" args={{ size: 'large', label: 'Button' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Small
+
+<Canvas>
+  <Story name="Small" args={{ size: 'large', label: 'Button' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>