import { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import LabelIntroduction from './content/LabelIntroduction.mdx';

import {
  iconColors,
  parametersDefault,
  argTypesDefault,
} from './config';

import MLabel from '../../Label';

<Meta title="Label" component={MLabel} />

export const Template = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MLabel },
  template: `
    <m-label
      :label="label"
      :labelFor="labelFor"
    />
  `
});

# Label

<LabelIntroduction />

<Anchor storyId="label--default-story"></Anchor>

## Default Label

<Canvas>
  <Story
    name="Default"
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault }}  
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />