import React from 'react';
import { Icon } from '../UI';
import { storiesOf } from '@kadira/storybook';

const style = {
  width: 600,
  margin: 20,
  fontSize: 30
};

storiesOf('Icon', module)
  .add('Default View', () => (
    <div style={style}>
      <Icon type="note"/>
      <Icon type="note-beamed"/>
      <Icon type="music"/>
      <Icon type="search"/>
      <Icon type="flashlight"/>
      <Icon type="mail"/>
      <Icon type="heart"/>
      <Icon type="heart-empty"/>
      <Icon type="star"/>
      <Icon type="star-empty"/>
      <Icon type="user"/>
      <Icon type="users"/>
      <Icon type="user-add"/>
      <Icon type="video"/>
      <Icon type="picture"/>
      <Icon type="camera"/>
      <Icon type="layout"/>
      <Icon type="menu"/>
      <Icon type="check"/>
      <Icon type="cancel"/>
      <Icon type="cancel-circled"/>
      <Icon type="cancel-squared"/>
      <Icon type="plus"/>
      <Icon type="plus-circled"/>
      <Icon type="plus-squared"/>
      <Icon type="minus"/>
      <Icon type="minus-circled"/>
      <Icon type="minus-squared"/>
      <Icon type="help"/>
      <Icon type="help-circled"/>
      <Icon type="info"/>
      <Icon type="info-circled"/>
      <Icon type="back"/>
      <Icon type="home"/>
      <Icon type="link"/>
      <Icon type="attach"/>
      <Icon type="lock"/>
      <Icon type="lock-open"/>
      <Icon type="eye"/>
      <Icon type="tag"/>
      <Icon type="bookmark"/>
      <Icon type="bookmarks"/>
      <Icon type="flag"/>
      <Icon type="thumbs-up"/>
      <Icon type="thumbs-down"/>
      <Icon type="download"/>
      <Icon type="upload"/>
      <Icon type="upload-cloud"/>
      <Icon type="reply"/>
      <Icon type="reply-all"/>
      <Icon type="forward"/>
      <Icon type="quote"/>
      <Icon type="code"/>
      <Icon type="export"/>
      <Icon type="pencil"/>
      <Icon type="feather"/>
      <Icon type="print"/>
      <Icon type="retweet"/>
      <Icon type="keyboard"/>
      <Icon type="comment"/>
      <Icon type="chat"/>
      <Icon type="bell"/>
      <Icon type="attention"/>
      <Icon type="alert"/>
      <Icon type="vcard"/>
      <Icon type="address"/>
      <Icon type="location"/>
      <Icon type="map"/>
      <Icon type="direction"/>
      <Icon type="compass"/>
      <Icon type="cup"/>
      <Icon type="trash"/>
      <Icon type="doc"/>
      <Icon type="docs"/>
      <Icon type="doc-landscape"/>
      <Icon type="doc-text"/>
      <Icon type="doc-text-inv"/>
      <Icon type="newspaper"/>
      <Icon type="book-open"/>
      <Icon type="book"/>
      <Icon type="folder"/>
      <Icon type="archive"/>
      <Icon type="box"/>
      <Icon type="rss"/>
      <Icon type="phone"/>
      <Icon type="cog"/>
      <Icon type="tools"/>
      <Icon type="share"/>
      <Icon type="shareable"/>
      <Icon type="basket"/>
      <Icon type="bag"/>
      <Icon type="calendar"/>
      <Icon type="login"/>
      <Icon type="logout"/>
      <Icon type="mic"/>
      <Icon type="mute"/>
      <Icon type="sound"/>
      <Icon type="volume"/>
      <Icon type="clock"/>
      <Icon type="hourglass"/>
      <Icon type="lamp"/>
      <Icon type="light-down"/>
      <Icon type="light-up"/>
      <Icon type="adjust"/>
      <Icon type="block"/>
      <Icon type="resize-full"/>
      <Icon type="resize-small"/>
      <Icon type="popup"/>
      <Icon type="publish"/>
      <Icon type="window"/>
      <Icon type="arrow-combo"/>
      <Icon type="down-circled"/>
      <Icon type="left-circled"/>
      <Icon type="right-circled"/>
      <Icon type="up-circled"/>
      <Icon type="down-open"/>
      <Icon type="left-open"/>
      <Icon type="right-open"/>
      <Icon type="up-open"/>
      <Icon type="down-open-mini"/>
      <Icon type="left-open-mini"/>
      <Icon type="right-open-mini"/>
      <Icon type="up-open-mini"/>
      <Icon type="down-open-big"/>
      <Icon type="left-open-big"/>
      <Icon type="right-open-big"/>
      <Icon type="up-open-big"/>
      <Icon type="down"/>
      <Icon type="left"/>
      <Icon type="right"/>
      <Icon type="up"/>
      <Icon type="down-dir"/>
      <Icon type="left-dir"/>
      <Icon type="right-dir"/>
      <Icon type="up-dir"/>
      <Icon type="down-bold"/>
      <Icon type="left-bold"/>
      <Icon type="right-bold"/>
      <Icon type="up-bold"/>
      <Icon type="down-thin"/>
      <Icon type="left-thin"/>
      <Icon type="right-thin"/>
      <Icon type="up-thin"/>
      <Icon type="ccw"/>
      <Icon type="cw"/>
      <Icon type="arrows-ccw"/>
      <Icon type="level-down"/>
      <Icon type="level-up"/>
      <Icon type="shuffle"/>
      <Icon type="loop"/>
      <Icon type="switch"/>
      <Icon type="play"/>
      <Icon type="stop"/>
      <Icon type="pause"/>
      <Icon type="record"/>
      <Icon type="to-end"/>
      <Icon type="to-start"/>
      <Icon type="fast-forward"/>
      <Icon type="fast-backward"/>
      <Icon type="progress-0"/>
      <Icon type="progress-1"/>
      <Icon type="progress-2"/>
      <Icon type="progress-3"/>
      <Icon type="target"/>
      <Icon type="palette"/>
      <Icon type="list"/>
      <Icon type="list-add"/>
      <Icon type="signal"/>
      <Icon type="trophy"/>
      <Icon type="battery"/>
      <Icon type="back-in-time"/>
      <Icon type="monitor"/>
      <Icon type="mobile"/>
      <Icon type="network"/>
      <Icon type="cd"/>
      <Icon type="inbox"/>
      <Icon type="install"/>
      <Icon type="globe"/>
      <Icon type="cloud"/>
      <Icon type="cloud-thunder"/>
      <Icon type="flash"/>
      <Icon type="moon"/>
      <Icon type="flight"/>
      <Icon type="paper-plane"/>
      <Icon type="leaf"/>
      <Icon type="lifebuoy"/>
      <Icon type="mouse"/>
      <Icon type="briefcase"/>
      <Icon type="suitcase"/>
      <Icon type="dot"/>
      <Icon type="dot-2"/>
      <Icon type="dot-3"/>
      <Icon type="brush"/>
      <Icon type="magnet"/>
      <Icon type="infinity"/>
      <Icon type="erase"/>
      <Icon type="chart-pie"/>
      <Icon type="chart-line"/>
      <Icon type="chart-bar"/>
      <Icon type="chart-area"/>
      <Icon type="tape"/>
      <Icon type="graduation-cap"/>
      <Icon type="language"/>
      <Icon type="ticket"/>
      <Icon type="water"/>
      <Icon type="droplet"/>
      <Icon type="air"/>
      <Icon type="credit-card"/>
      <Icon type="floppy"/>
      <Icon type="clipboard"/>
      <Icon type="megaphone"/>
      <Icon type="database"/>
      <Icon type="drive"/>
      <Icon type="bucket"/>
      <Icon type="thermometer"/>
      <Icon type="key"/>
      <Icon type="flow-cascade"/>
      <Icon type="flow-branch"/>
      <Icon type="flow-tree"/>
      <Icon type="flow-line"/>
      <Icon type="flow-parallel"/>
      <Icon type="rocket"/>
      <Icon type="gauge"/>
      <Icon type="traffic-cone"/>
      <Icon type="cc"/>
      <Icon type="cc-by"/>
      <Icon type="cc-nc"/>
      <Icon type="cc-nc-eu"/>
      <Icon type="cc-nc-jp"/>
      <Icon type="cc-sa"/>
      <Icon type="cc-nd"/>
      <Icon type="cc-pd"/>
      <Icon type="cc-zero"/>
      <Icon type="cc-share"/>
      <Icon type="cc-remix"/>
      <Icon type="github"/>
      <Icon type="github-circled"/>
      <Icon type="flickr"/>
      <Icon type="flickr-circled"/>
      <Icon type="vimeo"/>
      <Icon type="vimeo-circled"/>
      <Icon type="twitter"/>
      <Icon type="twitter-circled"/>
      <Icon type="facebook"/>
      <Icon type="facebook-circled"/>
      <Icon type="facebook-squared"/>
      <Icon type="gplus"/>
      <Icon type="gplus-circled"/>
      <Icon type="pinterest"/>
      <Icon type="pinterest-circled"/>
      <Icon type="tumblr"/>
      <Icon type="tumblr-circled"/>
      <Icon type="linkedin"/>
      <Icon type="linkedin-circled"/>
      <Icon type="dribbble"/>
      <Icon type="dribbble-circled"/>
      <Icon type="stumbleupon"/>
      <Icon type="stumbleupon-circled"/>
      <Icon type="lastfm"/>
      <Icon type="lastfm-circled"/>
      <Icon type="rdio"/>
      <Icon type="rdio-circled"/>
      <Icon type="spotify"/>
      <Icon type="spotify-circled"/>
      <Icon type="qq"/>
      <Icon type="instagrem"/>
      <Icon type="dropbox"/>
      <Icon type="evernote"/>
      <Icon type="flattr"/>
      <Icon type="skype"/>
      <Icon type="skype-circled"/>
      <Icon type="renren"/>
      <Icon type="sina-weibo"/>
      <Icon type="paypal"/>
      <Icon type="picasa"/>
      <Icon type="soundcloud"/>
      <Icon type="mixi"/>
      <Icon type="behance"/>
      <Icon type="google-circles"/>
      <Icon type="vkontakte"/>
      <Icon type="smashing"/>
      <Icon type="sweden"/>
      <Icon type="db-shape"/>
      <Icon type="logo-db"/>
    </div>
  ));