import {
  ArgsTable,
  Canvas,
  Meta,
  Source,
  Story
} from '@storybook/addon-docs/blocks';
import Button from 'components/Button';
import AddIcon from 'images/white_plus.svg';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';

<Meta title="Components API/Button" component={Button} />

# Button

Allows the user to perform an action on a page.

<Canvas>
  <Story name="Button">
    <Button>Click me!</Button>
  </Story>
</Canvas>

<Source code="import { Button } from 'cwb-react';" />

## Usage

Buttons come in a few different variants.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <Button>Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="tertiary">Tertiary</Button>
    <Button disabled>Primary Disabled</Button>
    <Button disabled variant="secondary">
      Secondary Disabled
    </Button>
    <Button disabled variant="tertiary">
      Tertiary Disabled
    </Button>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Button>Primary</Button>\n' +
        '<Button variant="secondary">Secondary</Button>\n' +
        '<Button variant="tertiary">Tertiary</Button>\n' +
        '<Button disabled>Primary Disabled</Button>\n' +
        '<Button disabled variant="secondary">Secondary Disabled</Button>\n' +
        '<Button disabled variant="tertiary">Tertiary Disabled</Button>'
      }
    />
  </div>
</ThemeProvider>

Destructive versions exist for the `primary` and `tertiary` variants.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <Button destructive>Destructive Primary</Button>
    <Button destructive variant="tertiary">
      Destructive Tertiary
    </Button>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Button destructive>Destructive Primary</Button>\n' +
        '<Button destructive variant="tertiary">Destructive Tertiary</Button>'
      }
    />
  </div>
</ThemeProvider>

Icons can be rendered at the start of the button content by passing a node to the `startIcon` prop.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <Button startIcon={<img src={AddIcon} />}>With Icon</Button>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        `import AddIcon from 'images/white_plus.svg';\n` +
        '\n' +
        '<Button startIcon={<img src={AddIcon} />}>\n' +
        '  With Icon\n' +
        '</Button>'
      }
    />
  </div>
</ThemeProvider>

Small button can be rendered by passing the `size="small"` prop. Small buttons are mostly used in tables and are `28px` high, whereas normal buttons are `35px` high.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <Button size="small">Primary</Button>
    <Button size="small" variant="secondary">
      Secondary
    </Button>
    <Button size="small" variant="tertiary">
      Tertiary
    </Button>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Button size="small">Primary</Button>\n' +
        '<Button size="small" variant="secondary">Secondary</Button>\n' +
        '<Button size="small" variant="tertiary">Tertiary</Button>'
      }
    />
  </div>
</ThemeProvider>

## Props

<ArgsTable />