feat(react-tabs): Replace Tab component with react-bootstrap

* Gives us more out of the box
* Still wrapped in our own API

[Finishes #85440704]

Signed-off-by: Geoff Pleiss <gpleiss@pivotal.io>

src/pivotal-ui/components/tabs.scss

@@ -521,13 +521,13 @@ parent: react_tabs
 
 ```jsx_example
 React.render(
-  <UI.Tabs>
-    <UI.Tab heading="Tab 1">Wow!</UI.Tab>
-    <UI.Tab heading="Tab 2" active="true">
+  <UI.SimpleTabs defaultActiveKey={1}>
+    <UI.Tab eventKey={1} tab="Tab 1">Wow!</UI.Tab>
+    <UI.Tab eventKey={2} tab="Tab 2">
       <h2>Neat!</h2>
       <span>So much content.</span>
     </UI.Tab>
-  </UI.Tabs>,
+  </UI.SimpleTabs>,
   document.getElementById('simple-tabs-example')
 );
 ```
@@ -547,17 +547,13 @@ parent: react_tabs
 
 ```jsx_example
 React.render(
-  <UI.AltTabs>
-    <UI.Tab heading="Tab 1">Wow!</UI.Tab>
-    <UI.Tab heading="Tab 2" active="true">
+  <UI.SimpleAltTabs defaultActiveKey={1}>
+    <UI.Tab eventKey={1} tab="Tab 1">Wow!</UI.Tab>
+    <UI.Tab eventKey={2} tab="Tab 2">
       <h2>Neat!</h2>
       <span>So much content.</span>
     </UI.Tab>
-    <UI.Tab heading="Tab, the third" active="true">
-      <h2>Ok</h2>
-      <span>great job!</span>
-    </UI.Tab>
-  </UI.AltTabs>,
+  </UI.SimpleAltTabs>,
   document.getElementById('simple-alt-tabs-example')
 );
 ```

src/pivotal-ui/javascripts/components.js

@@ -61,7 +61,7 @@ module.exports = {
 
   Image: require('./images.jsx').Image,
 
-  Tabs: require('./tabs.jsx').Tabs,
-  AltTabs: require('./tabs.jsx').AltTabs,
-  Tab: require('./tabs.jsx').Tab
+  Tab: require('./tabs.jsx').Tab,
+  SimpleTabs: require('./tabs.jsx').SimpleTabs,
+  SimpleAltTabs: require('./tabs.jsx').SimpleAltTabs
 };

src/pivotal-ui/javascripts/tabs.jsx

@@ -1,110 +1,33 @@
 'use strict';
 
-var React = require('react/addons');
-var _ = require('lodash');
+var React = require('react');
+var TabbedArea = require('react-bootstrap/TabbedArea');
+var TabPane = require('react-bootstrap/TabPane');
 
-var classSet = React.addons.classSet;
+var Tab = TabPane;
 
-var TabMenu = React.createClass({
+var SimpleAltTabs = React.createClass({
   render: function () {
-    var tabs = _.map(this.props.tabs, function(tab, index) {
-      var classes = classSet({
-        'active': index === this.props.activeIndex
-      });
-      var key = "tab-control-" + index;
-      return (
-        <li key={key} className={classes}>
-          <a onClick={_.partial(this.props.updateTabs, index)}>{tab}</a>
-        </li>
-      );
-    }, this);
-
-    return (
-      <ul className="nav nav-tabs">
-        {tabs}
-      </ul>
-    );
-  }
-});
-
-var TabContents = React.createClass({
-  render: function () {
-    var panels = _.map(this.props.children, function(panel, index) {
-      var classes = classSet({
-        'tab-pane': true,
-        'fade': true,
-        'active in': this.props.activeIndex === index
-      });
-
-      var key = "tab-panel-" + index;
-
-      return (
-        <div key={key} className={classes}>
-          {panel.props.children}
-        </div>
-      );
-    }, this);
-
     return (
-      <div className="tab-content">
-        {panels}
+      <div className="tab-simple-alt">
+        <TabbedArea {...this.props} />
       </div>
     );
   }
 });
 
-var Tabs = React.createClass({
-  getInitialState: function () {
-    return {
-      activeIndex: 0
-    };
-  },
-  componentWillMount: function () {
-    if (this.props.activeTab) {
-      this.setState({ activeIndex: this.props.activeTab });
-    }
-  },
-  updateTabs: function (tabIndex) {
-    this.setState({ activeIndex: tabIndex });
-  },
+var SimpleTabs = React.createClass({
   render: function () {
-    var tabLinks = _.pluck(_.pluck(this.props.children, 'props'), 'heading');
-    var classes = classSet({
-      'tab-simple': !this.props.alt,
-      'tab-simple-alt': this.props.alt
-    });
-
     return (
-      <div className={classes}>
-        <TabMenu tabs={tabLinks} activeIndex={this.state.activeIndex} updateTabs={this.updateTabs}/>
-        <TabContents activeIndex={this.state.activeIndex}>{this.props.children}</TabContents>
+      <div className="tab-simple">
+        <TabbedArea {...this.props} />
       </div>
     );
   }
 });
 
-var Tab = React.createClass({
-  render: function () {
-    return (
-      <div>
-        {this.props.children}
-      </div>
-      );
-  }
-});
-
-var AltTabs = React.createClass({
-  render: function () {
-    return (
-      <Tabs alt="true">
-        {this.props.children}
-      </Tabs>
-    );
-  }
-});
-
 module.exports = {
-  Tabs: Tabs,
-  AltTabs: AltTabs,
+  SimpleAltTabs: SimpleAltTabs,
+  SimpleTabs: SimpleTabs,
   Tab: Tab
 };