@incurso/wepo-18-infinity-modules v0.1.7

This project was bootstrapped with Create React App.

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

Table of Contents

• Modal
• ProgressBar
• NameCard
• Carousel
• Row
• Col
• TimePicker
• DatePicker
• Tabs
• 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)

  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)

  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

  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

  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)

  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:

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

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

DatePicker

Not yet implemented Takes the following props:

  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

  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)
• title

CartoonNetworkSpinner

Takes the following props:

• interval : number (seconds) - default 3

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

  <CartoonNetworkSpinner
      interval={4} />