Added Text component and modified Select and Switch components.

src/components/Select/Select.jsx

@@ -30,6 +30,12 @@ import ReactSelect from 'react-select'
 class Select extends React.Component {
   constructor(props) {
     super(props)
+
+    this.state = {
+      selected: null,
+    }
+
+    this.handleChange = this.handleChange.bind(this)
   }
 
   static propTypes = {
@@ -40,22 +46,62 @@ class Select extends React.Component {
     /**
      * The color of the select dropdown.
      */
-    color: PropTypes.string
+    color: PropTypes.string,
+    /**
+     * Sets if it multiple options are selectable
+     */
+    isMulti: PropTypes.bool,
+    /**
+     * Options to choose from for the select.
+     */
+    options: PropTypes.array.isRequired,
+    /**
+     * The function that processes changes to the selector.
+     */
+    onChange: function(props, propName, componentName) {
+      var fn = props[propName];
+      if(!fn.prototype ||
+         (typeof fn.prototype.constructor !== 'function' &&
+          fn.prototype.constructor.length !== 1)) {
+          return new Error(propName + 'must be a function with an argument!');
+      }
+    }
   }
 
   static defaultProps = {
     placeholder: "Pick an Option!",
-    color: "primary"
+    color: "primary",
+    options: [ "Option A", "Option B" ]
+  }
+
+  componentWillMount() {
+    const { options } = this.props
+
+    this.optionList = []
+
+    options.map((label, i) => this.optionList.push({ value: i, label: label }))
+  }
+
+  handleChange(value) {
+    const { onChange } = this.props
+
+    this.setState({ selected: value })
+
+    if(onChange) onChange(value)
   }
 
   render() {
-    const { placeholder, color } = this.props
+    const { placeholder, color, isMulti } = this.props
 
     return (
       <ReactSelect
         className={`react-select react-select-${color}`}
         classNamePrefix="react-select"
         placeholder={placeholder}
+        value={this.state.selected}
+        isMulti={isMulti}
+        onChange={this.handleChange}
+        options={this.optionList}
       />
     )
   }

src/components/Select/Select.md

@@ -12,4 +12,9 @@ import { Select } from 'revibe-component-library'
 <Select />
 <br/>
 <Select placeholder="This is a placeholder!" />
+```
+
+### Select Multiple Examples
+```js padded
+<Select placeholder="Select multiple objects!" isMulti />
 ```

src/components/Switch/Switch.jsx

@@ -30,6 +30,8 @@ import ToggleSwitch from 'react-bootstrap-switch'
 class Switch extends React.Component {
   constructor(props) {
     super(props)
+
+    this.handleChange = this.handleChange.bind(this)
   }
 
   static propTypes = {
@@ -52,7 +54,18 @@ class Switch extends React.Component {
     /**
      * The text when the switch is off.
      */
-    offText: PropTypes.node
+    offText: PropTypes.node,
+    /**
+     * Handles when the state of the switch changes.
+     */
+    onChange: function(props, propName, componentName) {
+      var fn = props[propName];
+      if(!fn.prototype ||
+         (typeof fn.prototype.constructor !== 'function' &&
+          fn.prototype.constructor.length !== 1)) {
+          return new Error(propName + 'must be a function with an argument!');
+      }
+    }
   }
 
   static defaultProps = {
@@ -63,6 +76,12 @@ class Switch extends React.Component {
     offText: ""
   }
 
+  handleChange(elem, state) {
+    const { onChange } = this.props
+
+    if(onChange) onChange(state)
+  }
+
   render() {
     const { onColor, offColor, defaultValue, onText, offText } = this.props
 
@@ -73,6 +92,7 @@ class Switch extends React.Component {
         offColor={offColor}
         onText={onText}
         offText={offText}
+        onChange={this.handleChange}
       />
     )
   }

src/components/Text/Text.jsx

@@ -0,0 +1,83 @@
+/*!
+
+=========================================================
+* BLK Design System PRO React - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/blk-design-system-pro-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+
+// Add your info to the docs if you edit this!
+
+/**
+ * ### Baseline text component!
+ * 
+ * @version 0.0.1
+ * @author Noah Templet ([w3aseL](https://github.com/w3aseL))
+ */
+class Text extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  static propTypes = {
+    /**
+     * The children. Likely text or links or other stuff.
+     */
+    children: PropTypes.node.isRequired,
+    /**
+     * The header class to use. [h1, h2, h3, h4, h5, h6]
+     */
+    header: PropTypes.string,
+    /**
+     * The display header to use. [1-4]
+     */
+    display: PropTypes.number,
+    /**
+     * Mutes the text.
+     */
+    muted: PropTypes.bool,
+    /**
+     * Adds lead styling to the text.
+     */
+    lead: PropTypes.bool,
+    /**
+     * Adds color to the text.
+     */
+    color: PropTypes.color,
+    /**
+     * Keeps the text from expanding the width of the line.
+     */
+    inline: PropTypes.bool
+  }
+
+  static defaultProps = {
+    children: "Bruh where the text at."
+  }
+
+  render() {
+    const { children, header, display, muted, lead, color, inline } = this.props
+
+    return (
+      <p
+        className={`${header ? `${header} ` : ""}${display ? `display-${display} ` : ""}${muted ? "text-muted " : ""}${lead ? "lead " : ""}${color ? `text-${color} ` : ""}${inline ? "w-auto d-inline-block " : ""}`}
+      >
+        {children}
+      </p>
+    )
+  }
+}
+
+export { Text }
+
+export default Text

src/components/Text/Text.md

@@ -0,0 +1,69 @@
+### Text Syntax
+
+Importing the text component.
+```js static
+import Text from 'revibe-component-library/Text'
+
+import { Text } from 'revibe-component-library'
+```
+
+### Using the Component
+```js padded
+<Text />
+<br />
+<Text>Here's some text!</Text>
+```
+
+### Headers
+```js padded
+<Text header="h1">h1 Header</Text>
+<br/>
+<Text header="h2">h2 Header</Text>
+<br/>
+<Text header="h3">h3 Header</Text>
+<br/>
+<Text header="h4">h4 Header</Text>
+<br/>
+<Text header="h5">h5 Header</Text>
+<br/>
+<Text header="h6">h6 Header</Text>
+```
+
+### Display Headers
+```js padded
+<Text header="h1" display={1}>Display 1</Text>
+<br/>
+<Text header="h1" display={2}>Display 2</Text>
+<br/>
+<Text header="h1" display={3}>Display 3</Text>
+<br/>
+<Text header="h1" display={4}>Display 4</Text>
+```
+
+### Mute and Lead
+```js padded
+<Text>Here's some regular text!</Text>
+<br />
+<Text muted>Here's some muted text!</Text>
+<br />
+<Text lead>Here's text that uses lead!</Text>
+<br />
+<Text muted lead>Here's text that is muted and uses lead!</Text>
+```
+
+### Inline
+```js padded
+<Text inline>Inline Text 1</Text>
+<Text inline>Inline Text 2</Text>
+```
+
+### Colors
+```js padded
+<Text inline header="h4" color="primary">Primary</Text>
+<Text inline header="h4" color="secondary">Secondary</Text>
+<Text inline header="h4" color="info">Info</Text>
+<Text inline header="h4" color="neutral">Neutral</Text>
+<Text inline header="h4" color="success">Success</Text>
+<Text inline header="h4" color="warning">Warning</Text>
+<Text inline header="h4" color="danger">Danger</Text>
+```

src/components/Text/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "Text.jsx"
+}

src/components/index.js

@@ -6,4 +6,5 @@ export * from './Switch'
 export * from './Select'
 export * from './Slider'
 export * from './Tags'
-export * from './InfoArea'
+export * from './InfoArea'
+export * from './Text'