// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { Text } from './index';
import { Box } from '../../../primitives/box';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './TEXT.mkd';

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