// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './TEXT_BUTTON_WITH_ICON.mkd';
import { TextButtonWithIcon } from '.';

storiesOf('Core/Actions/TextButton/With Icon', module)
  .add(
    'Add Icon',
    withDocs(docs)(() => (
      <TextButtonWithIcon href="https://google.com" icon="add" position="left">
        Add Account
      </TextButtonWithIcon>
    )),
  )
  .add(
    'Small Arrow Right Icon',
    withDocs(docs)(() => (
      <TextButtonWithIcon
        href="https://google.com"
        icon="small-arrow-right"
        position="right"
      >
        Learn More
      </TextButtonWithIcon>
    )),
  )
  .add(
    'Small Arrow Right Icon (Opens new tab)',
    withDocs(docs)(() => (
      <TextButtonWithIcon
        href="https://google.com"
        target="_blank"
        icon="small-arrow-right"
        position="right"
      >
        Learn More
      </TextButtonWithIcon>
    )),
  )
  .add(
    'Unknown Icon',
    withDocs(docs)(() => (
      // $FlowFixMe - testing runtime behaviour with bogus icon value.
      <TextButtonWithIcon href="https://google.com" icon="foo" position="right">
        Just renders the link
      </TextButtonWithIcon>
    )),
  );
