import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';

import Typography from '../Typography';
import Icon from './Icon';

<Meta title="General|Icon" component={Icon} />

# Icon

Semantic vector graphics.

<Preview>
  <Story name="Index">
    <div>
      <Typography.Title level={4}>Main Navigation</Typography.Title>
      <div style={{ display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap', margin: '0 -8px 32px' }}>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="bars" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>bars</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="competitions" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>competitions</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="home" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>home</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="members" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>members</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="messages" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>messages</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="points" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>points</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="reports" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>reports</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="retailers" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>retailer</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="rewards" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>rewards</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="settings" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>settings</Typography.Text></div>
          </div>
        </div>
      </div>
      <Typography.Title level={4}>Actions</Typography.Title>
      <div style={{ display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap', margin: '0 -8px' }}>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="add" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>add</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="arrow-down" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>arrow-down</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="arrow-left" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>arrow-left</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="arrow-right" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>arrow-right</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="arrow-up" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>arrow-up</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="calendar" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>calendar</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="caret" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>caret</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="check" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>check</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="clock" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>clock</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="close" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>close</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="edit" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>edit</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="email" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>email</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="explore" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>explore</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="export" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>export</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="filter" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>filter</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="import" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>import</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="line-graph" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>line-graph</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="location" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>location</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="more" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>more</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="notification" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>notification</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="phone" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>phone</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="profile" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>profile</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="qr-download" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>qr-download</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="reload" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>reload</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="search" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>search</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="sort" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>sort</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="toggle" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>toggle</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="toggle-active" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>toggle-active</Typography.Text></div>
          </div>
        </div>
        <div style={{ textAlign: 'center', width: '20%', padding: 16 }}>
          <div style={{ backgroundColor: '#fff', boxShadow: '0 1px 10px 0 #f0eeea', borderRadius: 10, padding: '32px 16px' }}>
            <Icon name="watch" />
            <div style={{ marginTop: 4 }}><Typography.Text size={12}>watch</Typography.Text></div>
          </div>
        </div>
      </div>
    </div>
  </Story>
</Preview>

### Customize size, color
<Preview>
  <Story name="Custom">
    <Icon name="points" size={100} color="green" />
  </Story>
</Preview>

<Props of={Icon} />