// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Span } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './SPAN.mkd';

storiesOf('Core/Text/Span', module)
  .add(
    'normal',
    withDocs(docs)(() => (
      <>
        <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', withDocs(docs)(() => <Span>$1,234,567.89</Span>))
  .add(
    'alert messages',
    withDocs(docs)(() => (
      <>
        <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',
    withDocs(docs)(() => (
      <Span bold>The quick red fox jumped over the lazy dogs.</Span>
    )),
  )
  .add(
    'underlined',
    withDocs(docs)(() => (
      <Span underlined>The quick red fox jumped over the lazy dogs.</Span>
    )),
  )
  .add(
    'italic',
    withDocs(docs)(() => (
      <Span italic>The quick red fox jumped over the lazy dogs.</Span>
    )),
  )
  .add(
    'uppercase',
    withDocs(docs)(() => (
      <Span casing="uppercase">
        The quick red fox jumped over the lazy dogs.
      </Span>
    )),
  )
  .add(
    'all the things',
    withDocs(docs)(() => (
      <Span casing="uppercase" bold underlined italic>
        The quick red fox jumped over the lazy dogs.
      </Span>
    )),
  );
