Added Tabs and Card components. Modified other components.

src/components/Card/Card.jsx

@@ -0,0 +1,94 @@
+/*!
+
+=========================================================
+* 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'
+
+import { Card as RSCard, CardImg, CardHeader, CardBody, CardFooter } from 'reactstrap'
+
+// Add your info to the docs if you edit this!
+
+/**
+ * ### Baseline card component!
+ * 
+ * @version 1.0.0
+ * @author Noah Templet ([w3aseL](https://github.com/w3aseL))
+ */
+class Card extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  static propTypes = {
+    /**
+     * The header of the card.
+     */
+    header: PropTypes.node,
+    /**
+     * The footer of the card.
+     */
+    footer: PropTypes.node,
+    /**
+     * The body of the card.
+     */
+    children: PropTypes.node.isRequired,
+    /**
+     * The source of the header image.
+     */
+    imgSrc: PropTypes.string,
+    /**
+     * The width of the card.
+     */
+    width: PropTypes.string,
+    /**
+     * Other style options of the card.
+     */
+    style: PropTypes.object,
+    /**
+     * The color of the card.
+     */
+    color: PropTypes.string
+  }
+
+  static defaultProps = {
+    style: {}
+  }
+
+  render() {
+    const { header, footer, children, imgSrc, width, style, color } = this.props
+
+    return (
+      <RSCard style={{ width: width && width, ...style  }} color={color} {...this.props}>
+        {imgSrc && <CardImg top width="100%" src={imgSrc} alt="..." />}
+        {header && 
+        <CardHeader>
+          {header}
+        </CardHeader>}
+        <CardBody>
+          {children}
+        </CardBody>
+        {footer &&
+        <CardFooter>
+          {footer}
+        </CardFooter>}
+      </RSCard>
+    )
+  }
+}
+
+export { Card }
+
+export default Card

src/components/Card/Card.md

@@ -0,0 +1,45 @@
+### Card Syntax
+
+Importing the card.
+```js static
+import Card from 'revibe-component-library/Card'
+
+import { Card } from 'revibe-component-library'
+```
+
+### Example Cards
+```js padded
+<Card>Simple Card</Card>
+<br />
+<Card
+  header={"Simple header"}
+  footer={"Simple footer"}
+>Simple Card</Card>
+```
+
+### Colored Cards
+```js padded
+<Card>None/Secondary</Card>
+<Card color="primary">Primary</Card>
+<Card color="info">Info</Card>
+<Card color="warning">Warning</Card>
+<Card color="success">Success</Card>
+<Card color="danger">Danger</Card>
+```
+
+### Complex Example Card
+```js
+import Text from '../Text';
+
+<Card
+  color="info"
+  header={
+    <Text tag="h1">Example Card</Text>
+  }
+  footer={
+    <Text muted lead className="ml-3">Sample Footer Text</Text>
+  }
+>
+  <Text lead>How cool is this? A card?</Text>
+</Card>
+```

src/components/Card/package.json

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

src/components/Slider/Slider.jsx

@@ -33,12 +33,12 @@ class Slider extends React.Component {
   }
 
   componentDidMount() {
-    const { rangeMin, rangeMax, step } = this.props
+    const { rangeMin, rangeMax, step, start } = this.props
 
     var slider = this.refs.slider;
 
     NoUISlider.create(slider, {
-      start: [40],
+      start: [ start ],
       connect: [true, false],
       step: step,
       range: { min: rangeMin, max: rangeMax }
@@ -61,13 +61,18 @@ class Slider extends React.Component {
     /**
      * The step size of the slider.
      */
-    step: PropTypes.number
+    step: PropTypes.number,
+    /**
+     * The starting value or values for the slider.
+     */
+    start: PropTypes.number
   }
 
   static defaultProps = {
     rangeMin: 0,
     rangeMax: 100,
-    step: 1
+    step: 1,
+    start: 40
   }
 
   render() {

src/components/Tabs/Tabs.jsx

@@ -0,0 +1,143 @@
+/*!
+
+=========================================================
+* 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'
+
+import { Nav, NavItem, NavLink, TabContent, TabPane, Row, Col } from 'reactstrap'
+
+// Add your info to the docs if you edit this!
+
+/**
+ * ### Baseline tabs component!
+ * 
+ * @version 1.0.0
+ * @author Noah Templet ([w3aseL](https://github.com/w3aseL))
+ */
+class Tabs extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      activeTab: 0
+    }
+
+    this.toggle = this.toggle.bind(this)
+  }
+
+  toggle(tab) {
+    if(this.state.activeTab !== tab)
+      this.setState({ activeTab: tab })
+  }
+
+  static propTypes = {
+    /**
+     * The list of labels for the tabs. Nodes are allowed (for using icons).
+     */
+    labels: PropTypes.array.isRequired,
+    /**
+     * The list of content for the tabs. Nodes are encouraged (it is content anyways).
+     */
+    content: PropTypes.array.isRequired,
+    /**
+     * Sets if the tab buttons are pills.
+     */
+    pills: PropTypes.bool,
+    /**
+     * The color of the pills.
+     */
+    pillColor: PropTypes.string,
+    /**
+     * Sets the pills to a vertical orientation.
+     */
+    vertical: PropTypes.bool,
+    /**
+     * Sets the horizontal placement of the tabs. [center, end]
+     */
+    tabPlacement: PropTypes.string,
+    /**
+     * Sets the placement of text. [left, center, right]
+     */
+    textPlacement: PropTypes.string
+  }
+
+  static defaultProps = {
+    labels: [ "tab1", "tab2" ],
+    content: [ "This is content for tab 1.", "This is content for tab 2." ],
+    pillColor: "primary"
+  }
+
+  render() {
+    const { labels, content, pills, pillColor, vertical, tabPlacement, textPlacement } = this.props
+
+    const navBar = (
+      <>
+        {labels.map((label, index) => (
+          <NavItem className={`${index > 0 ? `m${vertical ? "t" : "l"}-1` : ""} ${index < labels.length - 1 ? `m${vertical ? "b" : "r"}-1` : ""}`}>
+            <NavLink
+              className={this.state.activeTab === index ? "active" : ""}
+              onClick={() => this.toggle(index)}
+            >
+              {label}
+            </NavLink>
+          </NavItem>
+        ))}
+      </>
+    )
+
+    const tabContent = (
+      <TabContent activeTab={this.state.activeTab}>
+        {content.map((val, index) => (
+          <TabPane tabId={index} className={`${textPlacement ? `text-${textPlacement}` : ""}`}>
+            {val}
+          </TabPane>
+        ))}
+      </TabContent>
+    )
+
+    if(vertical)
+      return (
+        <Row>
+          <Col md="4" xs="12">
+            <Nav tabs={!pills} pills={pills} className={`${pills ? `nav-pills-${pillColor} ` : ""}${vertical ? `flex-column ` : ""}`}>
+              {navBar}
+            </Nav>
+          </Col>
+          <Col md="8" xs="12">
+            {tabContent}
+          </Col>
+        </Row>
+      )
+
+    return (
+      <>
+        <div className="nav-tabs-navigation">
+          <div className="nav-tabs-wrapper">
+            <Nav tabs={!pills} pills={pills} className={`${pills ? `nav-pills-${pillColor} ` : ""}${tabPlacement ? `justify-content-${tabPlacement}` : ""}`}>
+              {navBar}
+            </Nav>
+          </div>
+        </div>
+        <br />
+        {tabContent}
+      </>
+    )
+  }
+}
+
+export { Tabs }
+
+export default Tabs

src/components/Tabs/Tabs.md

@@ -0,0 +1,51 @@
+### Tabs Syntax
+
+Importing the tabs.
+```js static
+import Tabs from 'revibe-component-library/Tabs'
+
+import { Tabs } from 'revibe-component-library'
+```
+
+### Tabs Example
+```js
+<Tabs />
+```
+
+### Tabs Pills Color Examples
+```js
+<Tabs pills />
+<br /><br />
+<Tabs pills pillColor="info" />
+```
+
+### Vertical Tabs Example
+```js
+<Tabs vertical />
+```
+
+### Horizontal Tabs & Text Placement Examples
+```js
+<Tabs />
+<br /><br />
+<Tabs tabPlacement="center" textPlacement="center"  />
+<br /><br />
+<Tabs tabPlacement="end" textPlacement="right" />
+```
+
+### Tabs Large Example
+```js
+import Text from '../Text';
+
+<Tabs
+  pills
+  tabPlacement="center"
+  textPlacement="center"
+  labels={[ "Hosting", "Analytics", "Relink" ]}
+  content={[
+    <Text muted lead>Upload unlimited tracks to be streamed on Revibe Music for free. Give credit to everyone who contributed and reach new fans through our proprietary tagging mechanism. Let your fans stream your free music and distributed tracks through one app, only on Revibe Music.</Text>,
+    <Text muted lead>View integrated analytics to get a wholistic view of your music career. Revibe is the only platform that can combine data from your streams, link clicks, merchandise and collaboration sales, and marketing efforts.</Text>,
+    <Text muted lead>Customize your own landing page with unlimited links. These links can be dispalyed on your Revibe Artist Profile, or at a custom URL you can share anywhere, like your Instagram bio!</Text>
+  ]}
+/>
+```

src/components/Tabs/package.json

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