// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { withDocs } from '../../../../.storybook/with-docs';
import { TertiaryButton } from '.';
import docs from './TERTIARY_BUTTON.mkd';

storiesOf('Core/Actions/Button/tertiary', module)
  .add(
    'normal',
    withDocs(docs)(() => (
      <div>
        <TertiaryButton onClick={action('clicked')} spacing="mr1">
          This is a really tertiary sentence
        </TertiaryButton>
        <TertiaryButton onClick={action('clicked')} disabled spacing="mr1">
          Disabled
        </TertiaryButton>
        <TertiaryButton onClick={action('clicked')} spacing="mr1">
          OK
        </TertiaryButton>
        <TertiaryButton onClick={action('clicked')} hideBorder>
          No Border
        </TertiaryButton>
      </div>
    )),
  )
  .add(
    'link button',
    withDocs(docs)(() => (
      <div>
        <TertiaryButton href="https://google.ca" spacing="mr1">
          This is a really tertiary sentence
        </TertiaryButton>
        <TertiaryButton href="https://google.ca" disabled spacing="mr1">
          Disabled
        </TertiaryButton>
        <TertiaryButton href="https://google.ca" spacing="mr1">
          OK
        </TertiaryButton>
        <TertiaryButton href="https://google.ca" hideBorder>
          No Border
        </TertiaryButton>
      </div>
    )),
  );
