npm package: @incurso/wepo-18-infinity-modules
Description: This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
Author: Einar Sigurðsson
Latest version: 0.1.7

This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).

Below you will find some information on how to perform common tasks.<br>

## Table of Contents

- [Modal](#modal)
- [ProgressBar](#progressbar)
- [NameCard](#namecard)
- [Carousel](#carousel)
- [Row](#row)
- [Col](#Col)
- [TimePicker](#timepicker)
- [DatePicker](#datepicker)
- [Tabs](#tabs)
- [CartoonNetworkSpinner](#cartoonnetworkspinner)

## Modal
Takes the following props:
- isOpen - default false
- onClose : func
- <Modal.Title>My Modal Title</Modal.Title>
- <Modal.Body>My Modal Body</Modal.Body>
- <Modal.Footer>My Modal Footer</Modal.Footer> (optional)

```js
  import { Modal } from '@incurso/wepo-18-infinity-modules'

  <button onClick={() => this.setState({ isModalOpen: true })}>Open modal!</button>
  <Modal
      isOpen={isModalOpen}
      onClose={() => this.setState({ isModalOpen: false })}>
      <Modal.Title>My modal title</Modal.Title>
      <Modal.Body>My modal body</Modal.Body>
      <Modal.Footer>My modal footer</Modal.Footer>
  </Modal>
```

## ProgressBar
Takes the following props:
- progress (0 - 100)
- striped (true/false) - default false
- animated (true/false) - default false
- state (info/success/warning/danger)

```js
  import { ProgressBar } from '@incurso/wepo-18-infinity-modules'

  <ProgressBar
      progress={25}
      striped={false}
      animated={false}
      state={'info'} />
  <ProgressBar
      progress={50}
      striped={true}
      animated={false}
      state={'success'} />
  <ProgressBar
      progress={75}
      striped={false}
      animated={true}
      state={'warning'} />
  <ProgressBar
      progress={100}
      striped={true}
      animated={true}
      state={'danger'} />
```

## NameCard
Takes the following props:
- name
- email
- telephone
- imageUrl

```js
  import { NameCard } from '@incurso/wepo-18-infinity-modules'

  <NameCard>
      <NameCard.ImageURL>http://myschool.ru.is/myschool2/public/default.aspx?Page=img&ID=arnarl
      </NameCard.ImageURL>
      <NameCard.Name>My name</NameCard.Name>
      <NameCard.Email>name@wepo.is</NameCard.Email>
      <NameCard.Telephone>847 2387</NameCard.Telephone>
  </NameCard>
```

## Carousel
Takes the following props:
- images (array)
- size (small, medium, large) - default medium

```js
  import { Carousel } from '@incurso/wepo-18-infinity-modules'

  <Carousel
      images={[
          'https://static.giantbomb.com/uploads/original/0/1176/230441-thehoff.jpeg',
          'https://i2.wp.com/mag.shock2.info/wp-content/uploads/2018/02/knight-rider-david-hasselhoff.jpg?resize=780%2C405',
          'https://fortheloveofsci-fi.com/file/ms_website/w87/file/2017/09/18/david_hasselhoff_07_1.jpg'
      ]}
      size="large" />
```
## Row
Takes the following props:
- children (node)

```js
  import { Row, Col } from '@incurso/wepo-18-infinity-modules'

  <Row>
      <Col size={6}>&nbsp;</Col>
      <Col size={6}>&nbsp;</Col>
  </Row>
```

## Col
Takes the following props:
- size - default 1

## TimePicker
Not yet implemented
Takes the following props:

```js
  import { TimePicker } from '@incurso/wepo-18-infinity-modules'

  <TimePicker
      onTimePick={time => this.setState({ time })}
      format={24} />
```

## DatePicker
Not yet implemented
Takes the following props:

```js
  import { DatePicker } from '@incurso/wepo-18-infinity-modules'

  <DatePicker
      onDatePick={date => this.setState( {date })}
      locale="en-EN" />
```

## Tabs
Takes the following props:
- theme (dark/light) - default light
- layout (horizontal/vertical) default horizontal
- onSelect : func
- currentSelectedTab : number

```js
  import { Tabs, Tab } from '@incurso/wepo-18-infinity-modules'

  <Tabs
      theme="dark"
      layout="horizontal"
      onSelect={newTab => this.setState({ tab: newTab })}
      currentSelectedTab={this.state.tab}>
      <Tab selectionKey={1} title="Tab 1">
          Content 1
      </Tab>
      <Tab selectionKey={2} title="Tab 2">
          Content 2
      </Tab>
      <Tab selectionKey={3} title="Tab 3">
          Content 3
      </Tab>
  </Tabs>
```

## Tab
Takes the following props:
- selectionKey : number (corresponds to currentSelected tab in [Tabs](#tabs))
- title

## CartoonNetworkSpinner
Takes the following props:
- interval : number (seconds) - default 3

```js
  import { CartoonNetworkSpinner } from '@incurso/wepo-18-infinity-modules'

  <CartoonNetworkSpinner
      interval={4} />
```