// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './TEXT_BUTTON_WITH_ICON.mkd';
import { TextButtonWithIcon } from '.';

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