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

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

import MIcon from '../../Icon';

<Meta title="Icon" component={MIcon} />

export const Template = (args) => ({
  props: [
    'size',
    'color',
    'variant'
  ],
  components: { MIcon },
  template: `
    <m-icon
      :color="$props.color"
      :size="$props.size"
      :variant="$props.variant"
    >
    </m-icon>
  `
});

# Icon

<IconIntroduction />

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

## Default Icon

<Canvas>
  <Story
    name="Default"
    args={{ 
      size: 'regular',
      variant: 'activity'
    }}
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault }}  
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

### Guideline

---

<DefaultIconGuideline />

<Anchor storyId="icon--blankslate"></Anchor>

## Blankslate Icon

<Canvas>
  <Story
    name="Blankslate"
    args={{ 
      size: 'blankslate',
      variant: 'blankslate-talenta-calendar'
    }}
    argTypes={{ ...argTypesBlankslate }}
    parameters={{ ...parametersBlankslate }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Blankslate" />

### Guideline

---

<BlankslateIconGuideline />