import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Button, { allowedThemes as buttonThemes } from '../Button';
import Icon from '../../icon/Icon';

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


# Button
<br />

## `Buttons` trigger custom actions.
<br />

### With styles
<Canvas>
    <Story name="With styles">
        <React.Fragment>
            {buttonThemes.map(type => {
                const states = ['', 'active', 'disabled'];
                return (
                    <div key={type} style={{ padding: '5px 10px' }}>
                        {states.map(state => {
                            const props = Object.assign({
                                type,
                                key: `${type}-${state}`
                            },
                            state === 'active' && {
                                active: true
                            },
                            state === 'disabled' && {
                                disabled: true
                            });
                            return (
                                <span key={state}>
                                    <Button {...props}>{`${type} ${state}`}</Button>
                                    &nbsp;&nbsp;
                                </span>
                            );
                        })}
                    </div>
                );
            })}
        </React.Fragment>
    </Story>
</Canvas>

### Wide
<Canvas>
    <Story name="Wide">
        <Button type="primary" wide>Wide Button</Button>
    </Story>
</Canvas>

### Small
<Canvas>
    <Story name="Small">
        <Button type="primary" size="small">Small button</Button>
    </Story>
</Canvas>

### Large
<Canvas>
    <Story name="Large">
        <Button type="card" size="large">Large button</Button>
    </Story>
</Canvas>

### Links
<Canvas>
    <Story name="Links">
        <div style={{ padding: '5px 10px' }}>
            <Button buttonType="link">Default Link</Button>
        </div>
        <div style={{ padding: '5px 10px' }}>
            <Button buttonType="link" type="primary">Primary Link</Button>
        </div>
    </Story>
</Canvas>

### With icons
<Canvas>
    <Story name="With icons">
        <React.Fragment>
            <div style={{ padding: '5px 10px' }}>
                <Button buttonType="link">
                    View More
                    <Icon type="caretDown" style={{ width: '16px', marginLeft: '12px' }} />
                </Button>
            </div>
            <div style={{ padding: '5px 10px' }}>
                <Button type="primary" buttonType="link">
                    View More
                    <Icon type="caretDown" style={{ width: '16px', marginLeft: '12px' }} />
                </Button>
            </div>
            <div style={{ padding: '5px 10px' }}>
                <Button buttonType="icon" aria-label="Close">
                    <Icon type="close" width="24px" />
                </Button>
            </div>
        </React.Fragment>
    </Story>
</Canvas>

## Usage Example

```jsx
import Button from '@appdirect/sfb-theme-components/src/atoms/button/Button';

<Button type="primary" wide>Wide Button</Button>

```
## Props

<ArgsTable of={Button} />
