import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number, text, select } from '@storybook/addon-knobs'
import IconButton, { SIZES } from './IconButton'
import { THEMES } from '../Button/Button.utils'
import AvatarSpec from '../../utilities/specs/avatar.specs'

<Meta
  title="Components/Buttons/IconButton"
  component={IconButton}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A7601',
    },
  }}
/>

# IconButton

Actionable `Button` with an `Icon`.

<Canvas>
  <Story name="default">
    <IconButton
      icon={text('icon', 'search')}
      disabled={boolean('disabled', false)}
      filled={boolean('filled', false)}
      seamless={boolean('seamless', false)}
      status={boolean('status', false)}
      theme={select('theme', THEMES, THEMES[0])}
      size={select('size', SIZES, SIZES[0])}
    >
      {text('text', '')}
    </IconButton>
  </Story>
</Canvas>

#### Reference

- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={IconButton} />

### Stories

#### with avatar

<Canvas>
  <Story name="with-avatar">
    <IconButton
      icon={text('icon', 'search')}
      disabled={boolean('disabled', false)}
      filled={boolean('filled', false)}
      seamless={boolean('seamless', false)}
      theme={select('theme', THEMES, THEMES[0])}
      size={select('size', SIZES, SIZES[0])}
      avatarProps={{
        image: AvatarSpec.generate().image,
        initials: 'PB',
      }}
    >
      {text('text', '')}
    </IconButton>
  </Story>
</Canvas>

#### with avatar & initials

<Canvas>
  <Story name="with-avatar-initials">
    <IconButton
      icon={text('icon', 'search')}
      disabled={boolean('disabled', false)}
      filled={boolean('filled', false)}
      seamless={boolean('seamless', false)}
      theme={select('theme', THEMES, THEMES[0])}
      size={select('size', SIZES, SIZES[0])}
      avatarProps={{
        image: null,
        initials: 'PB',
      }}
    >
      {text('text', '')}
    </IconButton>
  </Story>
</Canvas>
