import globalThis from 'global';
import { Meta, Story, Canvas } from '@storybook/addon-docs';

<Meta title="renderers/vue/vue-mdx" component={globalThis.Components.Button} />

# Vue-specific MDX Stories

export const Button = globalThis.Components.Button;

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyButton: Button },
  template: '<my-button v-bind="$props" />',
});

## Primary

<Canvas>
  <Story name="Primary">
    {{
      components: { MyButton: Button },
      template: '<my-button :primary="true" label="Primary button" />',
    }}
  </Story>
</Canvas>

## Secondary

<Canvas>
  <Story name="Secondary">
    {{
      components: { MyButton: Button },
      template: '<my-button :primary="false" label="Secondary button" />',
    }}
  </Story>
</Canvas>

## From template

<Canvas>
  <Story name="From Template" args={{ label: 'From template' }}>
    {Template.bind({})}
  </Story>
</Canvas>