import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks';
import MyButton from './Button.vue';
import InfoButton from './components/InfoButton.vue';

<Meta
  title="Addon/ControlsMDX"
  component={MyButton}
  argTypes={{
    color: { control: { type: 'color' } },
  }}
/>

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

# Addon-controls in MDX

Controls can also be defined and used in MDX stories.

## Rounded

<Canvas>
  <Story
    name="Rounded"
    args={{
      rounded: true,
      color: '#f00',
      label: 'A Button with rounded edges',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Rounded" />

## Square

<Canvas>
  <Story
    name="Square"
    args={{
      // rounded: false, test out default value handling
      color: '#00f',
      label: 'A Button with square edges',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Square" />

## Multiple components

<ArgsTable components={{ MyButton, InfoButton }} />