import { Meta, Story, Preview, Source } from '@storybook/addon-docs/blocks';
import { Button } from '@tedconf/monterey';
import { boolean, select } from '@storybook/addon-knobs';

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

# Button

With `MDX` we can define a story for `Checkbox` right in the middle of our
markdown documentation.

## Import the button components

<Source
  code={`
import { Button } from '@tedconf/monterey';
`}
/>

## Use the buttons

Pick the appropriate button for your situation.

<Story name="kitchen sink">
  <Button
    label="Kitchen Sink"
    variant={select('variant', ['default', 'primary', 'alt', 'ghost', 'link'], 'default')}
    size={select('size', ['sm', 'md'], 'md')}
    disabled={boolean('disabled', false)}
  >
    <svg style={{ transform: 'translateY(1px)', marginRight: '8px' }} width="20" height="21" viewBox="0 0 20 21" fill="none">
      <path
      d="M15 6.80237C15 5.47629 14.4732 4.20452 13.5355 3.26683C12.5979 2.32915 11.3261 1.80237 10 1.80237C8.67392 1.80237 7.40215 2.32915 6.46447 3.26683C5.52678 4.20452 5 5.47629 5 6.80237C5 12.6357 2.5 14.3024 2.5 14.3024H17.5C17.5 14.3024 15 12.6357 15 6.80237Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
      />
      <path
        d="M11.4417 17.6357C11.2952 17.8883 11.0849 18.098 10.8319 18.2437C10.5789 18.3894 10.292 18.4661 10 18.4661C9.70803 18.4661 9.42117 18.3894 9.16816 18.2437C8.91515 18.098 8.70486 17.8883 8.55835 17.6357" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
      />
    </svg>
    Button
  </Button>
</Story>

### Variants

<Preview>
  <Story name="default">
    <Button>Button: default</Button>
  </Story>
</Preview>

<Preview>
  <Story name="primary">
    <Button variant="primary">Button: primary</Button>
  </Story>
</Preview>

<Preview>
  <Story name="alt">
    <Button variant="alt">Button: alt</Button>
  </Story>
</Preview>

<Preview>
  <Story name="ghost">
    <Button variant="ghost" state="recorded">Button: ghost</Button>
  </Story>
</Preview>