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

import { Icon } from './Icon';

<Meta
  title="atoms/Icon"
  component={Icon}
  parameters={{ actions: { argTypesRegex: '^on.*' } }}
  argTypes={{
    width: {
      control: {
        type: 'range',
        min: 15,
        max: 100
      }
    }
  }}
/>

# Icon

## Alert

<Canvas>
  <Story name="Alert" args={{ width: 25, type: 'alert' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Arrow

<Canvas>
  <Story name="Arrow" args={{ width: 25, type: 'arrow' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Blog

<Canvas>
  <Story name="Blog" args={{ width: 25, type: 'blog' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Caret

<Canvas>
  <Story name="Caret" args={{ width: 25, type: 'caret' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Checkmark

<Canvas>
  <Story name="Checkmark" args={{ width: 25, type: 'checkmark' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Copy

<Canvas>
  <Story name="Copy" args={{ width: 25, type: 'copy' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Delete

<Canvas>
  <Story name="Delete" args={{ width: 25, type: 'delete' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## External

<Canvas>
  <Story name="External" args={{ width: 25, type: 'external' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Help

<Canvas>
  <Story name="Help" args={{ width: 25, type: 'help' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Home

<Canvas>
  <Story name="Home" args={{ width: 25, type: 'home' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Info

<Canvas>
  <Story name="Info" args={{ width: 25, type: 'info' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Link

<Canvas>
  <Story name="Link" args={{ width: 25, type: 'link' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Lock

<Canvas>
  <Story name="Lock" args={{ width: 25, type: 'lock' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Minus

<Canvas>
  <Story name="Minus" args={{ width: 25, type: 'minus' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Plus

<Canvas>
  <Story name="Plus" args={{ width: 25, type: 'plus' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Present

<Canvas>
  <Story name="Present" args={{ width: 25, type: 'present' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Press

<Canvas>
  <Story name="Press" args={{ width: 25, type: 'press' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Question

<Canvas>
  <Story name="Question" args={{ width: 25, type: 'question' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Search

<Canvas>
  <Story name="Search" args={{ width: 25, type: 'search' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Support

<Canvas>
  <Story name="Support" args={{ width: 25, type: 'support' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Team

<Canvas>
  <Story name="Team" args={{ width: 25, type: 'team' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Tool

<Canvas>
  <Story name="Tool" args={{ width: 25, type: 'tool' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Waiting

<Canvas>
  <Story name="Waiting" args={{ width: 25, type: 'waiting' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Warning

<Canvas>
  <Story name="Warning" args={{ width: 25, type: 'warning' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

# Social icons

## Apple

<Canvas>
  <Story name="Apple" args={{ width: 25, type: 'apple' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Facebook

<Canvas>
  <Story name="Facebook" args={{ width: 25, type: 'facebook' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## LinkedIn

<Canvas>
  <Story name="LinkedIn" args={{ width: 25, type: 'linkedin' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Linux

<Canvas>
  <Story name="Linux" args={{ width: 25, type: 'linux' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Twitter

<Canvas>
  <Story name="Twitter" args={{ width: 25, type: 'twitter' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Windows

<Canvas>
  <Story name="Windows" args={{ width: 25, type: 'windows' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>

## Fill

<Canvas>
  <Story name="Fill" args={{ width: 25, type: 'info', fill: 'error' }}>
    {(props) => <Icon {...props} />}
  </Story>
</Canvas>
