text: import React from 'react'
  import { storiesOf } from '@storybook/react'
  
  storiesOf('Typography utilities', module)
  .add('h1-h6', () => (
    <div>
      <h1 className='h1'>h1</h1>
      <h1 className='h2'>h2</h1>
      <h1 className='h3'>h3</h1>
      <h1 className='h4'>h4</h1>
      <h1 className='h5'>h5</h1>
      <h1 className='h6'>h6</h1>
    </div>
  ))
  .add('f1-f6', () => (
    <div>
      <h1 className='f1'>f1</h1>
      <h1 className='f2'>f2</h1>
      <h1 className='f3'>f3</h1>
      <h1 className='f4'>f4</h1>
      <h1 className='f5'>f5</h1>
      <h1 className='f6'>f6</h1>
    </div>
  ))
  .add('f light', () => (
    <div>
      <h1 className='f00-light'>f00-light</h1>
      <h1 className='f0-light'>f0-light</h1>
      <h1 className='f1-light'>f1-light</h1>
      <h1 className='f2-light'>f2-light</h1>
      <h1 className='f3-light'>f3-light</h1>
    </div>
  ))
  .add('line-height', () =>(
    <div>
      <p className='lh-default'>
        lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default
  
      </p>
      <p className='lh-condensed'>
        lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed
      </p>
      <p className='lh-condensed-ultra'>
        lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra
      </p>
    </div>
  ))
  .add('typographic styles', () => (
    <div>
      <h3 className='text-normal'>text-normal</h3>
      <p className='text-bold'>text-bold</p>
      <p className='text-uppercase'>text-uppercase</p>
      <p className='no-wrap'>no-wrap</p>
      <p className='ws-normal'>ws-normal</p>
      <p className='wb-break-all'>wb-break-all</p>
      <p className='text-underline'>text-underline</p>
      <p className='no-underline'>no-underline</p>
      <p className='text-emphasized'>text-emphasized</p>
      <p className='text-small'>text-small</p>
      <p className='lead'>lead</p>
      <p className='text-mono'>text-mono</p>
      <p className='user-select-none'>user-select-none</p>
    </div>
  ))
  .add('text alignment', () => (
    <div>
      <p className='text-left'>text-left</p>
      <p className='text-center'>text-center</p>
      <p className='text-right'>text-right</p>
    </div>
  ))
  .add('responsive text alignment', () => (
    <div>
      <p className='text-left text-sm-center text-lg-right'>Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
    </div>
  ))
  .add('list-style-none', () => (
    <div>
      <ul className='list-style-none'>
        <li>list-style-none</li>
        <li>list-style-none</li>
        <li>list-style-none</li>
      </ul>
    </div>
  ))
  .add('text shadows', () => (
    <div>
    <div className='bg-purple p-5'>
      <h3 className='text-white text-shadow-dark'>.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
    </div>
    <div className='bg-yellow p-5'>
      <h3 className='text-shadow-light'>.text-shadow-light creates an embossed effect for dark text</h3>
    </div>
    </div>
  ))
  