adding tabs component

Author: Parth Shah

components/Tabs/Tab.jsx

@@ -0,0 +1,22 @@
+import React, {PropTypes} from 'react'
+
+const Tab = ({children}) => <div>{children}</div>
+
+Tab.propTypes = {
+  /**
+   * The unique key of the tab. Used by parent component.
+   */
+  eventKey: PropTypes.any.isRequired,
+
+  /**
+   * The tab title. Used by parent component.
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   * The tab content
+   */
+  children: PropTypes.any.isRequired
+}
+
+export default Tab

components/Tabs/Tabs.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import uncontrollable from 'uncontrollable'
+import cn from 'classnames'
+require('./Tabs.scss')
+
+
+const Tabs = ({activeKey, children, onSelect}) => (
+  <div>
+  <div className="tabs">
+    <ul>
+      {children.map(({props: {title, eventKey}}) =>
+        <li key={eventKey} onClick={(e) => onSelect(eventKey, e)} className={cn({active: activeKey === eventKey})}>
+          <a >{title}</a>
+        </li>
+      )}
+    </ul>
+  </div>
+    <div className="tab-content">
+      {children.filter(({props: {eventKey}}) => eventKey === activeKey)[0]}
+    </div>
+  </div>
+)
+
+Tabs.propTypes = {
+  /**
+   * Mark the Tab with a matching `eventKey` as active.
+   */
+  activeKey: React.PropTypes.any,
+
+  /**
+   * Callback fired when a Tab is selected.
+   *
+   * ```js
+   * function (
+   * 	Any eventKey,
+   * 	SyntheticEvent event?
+   * )
+   *
+   */
+  onSelect: React.PropTypes.func
+}
+
+
+export default uncontrollable(Tabs, { activeKey: 'onSelect' })

components/Tabs/Tabs.scss

@@ -0,0 +1,51 @@
+/* can't use 'tabs', because of conflicts */
+
+@import "~tc-ui/src/styles/variables";
+@import "~tc-ui/src/styles/typography";
+
+.tabs {
+    width: 240px;
+    list-style-type: none;
+    margin: 0 auto 50px auto;
+    ul{
+        text-align: center;
+        display: -webkit-flex;
+        display: flex;
+        width:240px;
+    }
+    li {
+        // -webkit-flex: initial;
+        flex: initial;
+        width: 50%;
+        padding: 10px 0;
+        text-align: center;
+        background-color: $tc-gray-neutral-light;
+        @include roboto-medium;
+        font-size: 15px;
+        line-height:20px;
+        background: $tc-white;
+        border: 1px solid $tc-gray-30;
+        a{
+            color: $tc-gray-80;
+        }
+        &:hover {
+        }
+        &.active {
+            background-color: $tc-dark-blue-90;
+            border: 1px solid $tc-dark-blue-90;
+            a{
+                color: $tc-white;
+            }
+        }
+        &:first-child{
+            border-radius: 2px 0 0 2px;
+            border-right:none;
+        }
+        &:last-child{
+            border-radius: 0 2px 2px 0 ;
+            border-left:none;
+        }
+
+
+    }
+}

exports.coffee

@@ -33,6 +33,8 @@ RightArrowIcon      = require './components/Icons/RightArrowIcon'
 HamburgerIcon       = require './components/Icons/HamburgerIcon'
 PlaceholderIcon     = require './components/Icons/PlaceholderIcon'
 XMarkIcon           = require './components/Icons/XMarkIcon'
+Tabs                = require './components/Tabs/Tabs'
+Tab                 = require './components/Tabs/Tab'
 
 # Redux Forms
 InputFormField      = require './components/ReduxForms/Input'
@@ -81,6 +83,9 @@ module.exports =
   ConnectLogo       : ConnectLogo.default,
   XMarkIcon         : XMarkIcon.default,
   SwitchButton      : SwitchButton.default
+  Tabs              : Tabs.default
+  Tab               : Tab.default
+  
 # Redux Forms
   InputFormField    : InputFormField.default
   TextareaFormField : TextareaFormField.default

package.json

@@ -44,6 +44,7 @@
     "react-select": "^0.9.1",
     "react-switch-button": "^1.1.2",
     "redux-thunk": "^2.1.0",
-    "tc-ui": "https://github.com/appirio-tech/tc-ui.git#feature/connectv2"
+    "tc-ui": "https://github.com/appirio-tech/tc-ui.git#feature/connectv2",
+    "uncontrollable": "^4.0.1"
   }
 }