// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { ClickableSpan } from '.';
import { Span } from '../span';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './CLICKABLE_SPAN.mkd';

const ShortName = () => (
  <ClickableSpan onClick={action('onClick')}>
    Something amazing I guess
  </ClickableSpan>
);

storiesOf('Core/Text/ClickableSpan', module)
  .addDecorator(withInfo(configDocs(docs, ClickableSpan)))

  .add('normal', () => (
    <ClickableSpan onClick={action('onClick')}>
      Something amazing I guess
    </ClickableSpan>
  ))
  .add('inline', () => (
    <Span>
      Whoa test: <ShortName /> Omg I think it worked:
    </Span>
  ))
  .add('with span props', () => (
    <ClickableSpan
      fontSize="f4"
      colorName="brand-primary-base"
      onClick={action('onClick')}
    >
      Something amazing I guess
    </ClickableSpan>
  ));
