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

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

  .add('normal', () => (
    <>
      <Span fontSize="f1">The quick red fox jumped over the lazy dogs.</Span>
      <Span>The quick red fox jumped over the lazy dogs.</Span>
      <Span fontSize="f3">The quick red fox jumped over the lazy dogs.</Span>
      <Span fontSize="f4">The quick red fox jumped over the lazy dogs.</Span>
      <Span fontSize="f5">The quick red fox jumped over the lazy dogs.</Span>
    </>
  ))
  .add('number', () => <Span>$1,234,567.89</Span>)
  .add('alert messages', () => (
    <>
      <Span colorName="success-fg">Success! Something good happened.</Span>
      <Span colorName="error-fg">Oops! Something went wrong!</Span>
      <Span colorName="info-fg">Something neutral happened.</Span>
    </>
  ))
  .add('bold', () => (
    <Span bold>The quick red fox jumped over the lazy dogs.</Span>
  ))
  .add('underlined', () => (
    <Span underlined>The quick red fox jumped over the lazy dogs.</Span>
  ))
  .add('italic', () => (
    <Span italic>The quick red fox jumped over the lazy dogs.</Span>
  ))
  .add('uppercase', () => (
    <Span casing="uppercase">The quick red fox jumped over the lazy dogs.</Span>
  ))
  .add('all the things', () => (
    <Span casing="uppercase" bold underlined italic>
      The quick red fox jumped over the lazy dogs.
    </Span>
  ));
