import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, select, text } from '@storybook/addon-knobs'
import Button from './Button'
import { SIZES, THEMES } from './Button.utils'
import { getColor, makeBrandColors } from '../../styles/utilities/color'
import { ControlGroup } from '../index'
import { ThemeProvider } from 'styled-components'

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

# Button

Actionable HTML buttons with different styles and support for React Router.

<Canvas>
  <Story name="default">
    <Button
      children={text('children', 'Button')}
      disabled={boolean('disabled', false)}
      loading={boolean('loading', false)}
      rounded={boolean('rounded', false)}
      linked={boolean('linked', false)}
      inlined={boolean('inlined', false)}
      outlined={boolean('outlined', false)}
      theme={select('theme', THEMES, THEMES[0])}
      size={select('size', SIZES, SIZES[0])}
      prefixIcon={text('prefixIcon', '')}
      suffixIcon={text('suffixIcon', '')}
    />
  </Story>
</Canvas>

#### Reference

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

<br />
<br />

### Props

<ArgsTable of={Button} />

### Stories

#### Button Group

<Canvas>
  <Story name="Button Group">
    <ControlGroup>
      <ControlGroup.Item>
        <Button theme="grey" outlined>
          Button
        </Button>
      </ControlGroup.Item>
      <ControlGroup.Item>
        <Button theme="grey" outlined>
          Button
        </Button>
      </ControlGroup.Item>
      <ControlGroup.Item>
        <Button theme="gray" outlined>
          Button
        </Button>
      </ControlGroup.Item>
    </ControlGroup>
  </Story>
</Canvas>

#### Button Brand

In some rare cases, we want to overwrite all colors for a button with a given theme/brand. For example, it is something use on beacon to use the company color within the beacon render.

`theme.brandColor` needs to received an object generated by `makeBrandColors`.

<Canvas>
  <Story name="Button Brand">
    <ThemeProvider
      theme={{
        brandColor: makeBrandColors(
          getColor(
            select(
              'brandColor',
              [
                'purple.500',
                'red.200',
                'yellow.700',
                'pink.300',
                'lavender.400',
              ],
              'purple.500'
            )
          )
        ),
      }}
    >
      <Button
        children={text('children', 'Button')}
        disabled={boolean('disabled', false)}
        loading={boolean('loading', false)}
        rounded={boolean('rounded', false)}
        linked={boolean('linked', false)}
        outlined={boolean('outlined', false)}
        theme={select('theme', THEMES, THEMES[0])}
        size={select('size', SIZES, SIZES[0])}
      />
    </ThemeProvider>
  </Story>
</Canvas>
