import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ButtonIcon from '../ButtonIcon';
import { allowedThemes as buttonThemes, allowedSizes as buttonSizes } from '../../button/Button';

<Meta title="Atoms/Button Icon" component={ButtonIcon} />

# ButtonIcon
<br />

## `ButtonIcons` are used to display buttons with an icon.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ButtonIcon theme="primary" icon="plus">Add</ButtonIcon>
    </Story>
</Canvas>

### Icon right
<Canvas>
    <Story name="Icon right">
        <ButtonIcon theme="primary" icon="plus" iconPosition="right">Add</ButtonIcon>
    </Story>
</Canvas>

### Disabled
<Canvas>
    <Story name="Disabled">
        <ButtonIcon theme="primary" icon="plus" disabled>Add</ButtonIcon>
    </Story>
</Canvas>

### Selected
<Canvas>
    <Story name="Selected">
        <ButtonIcon theme="primary" icon="plus" selected>Add</ButtonIcon>
    </Story>
</Canvas>

### Only text
<Canvas>
    <Story name="Only text">
        <ButtonIcon theme="primary">Add</ButtonIcon>
    </Story>
</Canvas>

### Only icon
<Canvas>
    <Story name="Only icon">
        <ButtonIcon theme="primary" icon="plus" />
    </Story>
</Canvas>

### Sizes
<Canvas>
    <Story name="Sizes">
        {
            buttonSizes.map(size => (
                <div key={size} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 10px' }}>
                    <ButtonIcon theme="primary" size={size}>{size}</ButtonIcon>
                    <ButtonIcon theme="primary" size={size} icon="plus">{size}</ButtonIcon>
                </div>
            ))
        }
    </Story>
</Canvas>

### Custom icon
<Canvas>
    <Story name="Custom icon">
        <ButtonIcon theme="primary" iconSrc="https://via.placeholder.com/20">Custom Icon</ButtonIcon>
    </Story>
</Canvas>

### Long text
<Canvas>
    <Story name="Long text">
        <div style={{ width: 300 }}>
            <ButtonIcon theme="primary" icon="plus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dui id nunc iaculis vulputate sed ut nibh.</ButtonIcon>
        </div>
    </Story>
</Canvas>

### Theme buttons
<Canvas>
    <Story name="Theme buttons">
        {
            buttonThemes.map(theme => (
                <div key={theme} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 10px' }}>
                    <ButtonIcon theme={theme}>{theme}</ButtonIcon>
                    <ButtonIcon theme={theme} icon="plus">{theme}</ButtonIcon>
                </div>
            ))
        }
    </Story>
</Canvas>

### Theme links
<Canvas>
    <Story name="Theme links">
        {
            buttonThemes.filter(
                theme => (theme !== 'card' || theme !== 'emphasis-outline')
            ).map(theme => (
                <div key={theme} style={{ width: 300, padding: '5px 10px', background: theme === 'white' || theme === 'secondary' ? '#000' : 'transparent' }}>
                    <ButtonIcon theme={theme} type="link" icon="plus">{theme}</ButtonIcon>
                </div>
            ))
        }
    </Story>
</Canvas>

## Usage Example
```jsx
import ButtonIcon from '@appdirect/sfb-theme-components/src/atoms/button-icon/ButtonIcon';

<ButtonIcon theme="primary" icon="plus">Add</ButtonIcon>

```
## Props

<ArgsTable of={ButtonIcon} />
