From f1c575c03fd12861b3f06a600d719de113b681df Mon Sep 17 00:00:00 2001
From: Paul Meskers <pmeskers@pivotal.io>
Date: Wed, 7 Jan 2015 12:15:12 -0500
Subject: [PATCH] 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      |  20 ++---
 src/pivotal-ui/javascripts/components.js |   6 +-
 src/pivotal-ui/javascripts/tabs.jsx      | 101 +++--------------------
 test/spec/javascripts/tabs_spec.js       | 101 -----------------------
 4 files changed, 23 insertions(+), 205 deletions(-)
 delete mode 100644 test/spec/javascripts/tabs_spec.js

diff --git a/src/pivotal-ui/components/tabs.scss b/src/pivotal-ui/components/tabs.scss
index d53eb810f..0753538b2 100644
--- a/src/pivotal-ui/components/tabs.scss
+++ b/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')
 );
 ```
diff --git a/src/pivotal-ui/javascripts/components.js b/src/pivotal-ui/javascripts/components.js
index 0c576e80a..38786c418 100644
--- a/src/pivotal-ui/javascripts/components.js
+++ b/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
 };
diff --git a/src/pivotal-ui/javascripts/tabs.jsx b/src/pivotal-ui/javascripts/tabs.jsx
index d3e78eaf3..f59ca0537 100644
--- a/src/pivotal-ui/javascripts/tabs.jsx
+++ b/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
 };
diff --git a/test/spec/javascripts/tabs_spec.js b/test/spec/javascripts/tabs_spec.js
deleted file mode 100644
index b41dd2875..000000000
--- a/test/spec/javascripts/tabs_spec.js
+++ /dev/null
@@ -1,101 +0,0 @@
-'use strict';
-
-var $ = require('jquery');
-var React = require('react/addons');
-var TestUtils = React.addons.TestUtils;
-
-var Tabs = require('../../../src/pivotal-ui/javascripts/tabs.jsx').Tabs;
-var Tab = require('../../../src/pivotal-ui/javascripts/tabs.jsx').Tab;
-
-describe("Tabs", function() {
-  beforeEach(function() {
-    this.node = $('<div id="container"></div>').appendTo('body').get(0);
-  });
-
-  afterEach(function() {
-    React.unmountComponentAtNode(this.node);
-    document.body.removeChild(this.node);
-  });
-
-  describe("when the alt property is true", function() {
-    beforeEach(function() {
-      React.render(
-        <Tabs alt="true">
-          <Tab heading="My first tab" >Content for first tab</Tab>
-          <Tab heading="My second tab" >Content for second tab</Tab>
-        </Tabs>,
-        this.node
-      );
-    });
-
-    it("renders the simple-alt tabs", function() {
-      expect($('#container .tab-simple-alt ul.nav.nav-tabs li.active a')).toHaveText("My first tab");
-      expect($('#container .tab-simple-alt ul.nav.nav-tabs li:not(.active) a')).toHaveText("My second tab");
-
-      expect($('#container .tab-simple-alt .tab-content .tab-pane.in.active')).toHaveText("Content for first tab");
-      expect($('#container .tab-simple-alt .tab-content .tab-pane:not(.in.active)')).toHaveText("Content for second tab");
-    });
-  });
-
-  describe("when the active tab is not set", function() {
-    beforeEach(function() {
-      React.render(
-        <Tabs>
-          <Tab heading="My first tab" >Content for first tab</Tab>
-          <Tab heading="My second tab" >Content for second tab</Tab>
-        </Tabs>,
-        this.node
-      );
-    });
-
-    it("renders the tabs and content with first tab active", function() {
-      expect($('#container .tab-simple ul.nav.nav-tabs li.active a')).toHaveText("My first tab");
-      expect($('#container .tab-simple ul.nav.nav-tabs li:not(.active) a')).toHaveText("My second tab");
-
-      expect($('#container .tab-simple .tab-content .tab-pane.in.active')).toHaveText("Content for first tab");
-      expect($('#container .tab-simple .tab-content .tab-pane:not(.in.active)')).toHaveText("Content for second tab");
-    });
-  });
-
-  describe("when the active tab is set", function() {
-    beforeEach(function() {
-      React.render(
-        <Tabs activeTab={1}>
-          <Tab heading="My first tab" >Content for first tab</Tab>
-          <Tab heading="My second tab" >Content for second tab</Tab>
-        </Tabs>,
-        this.node
-      );
-    });
-
-    it("renders the tabs and content with specified tab active", function() {
-      expect($('#container .tab-simple ul.nav.nav-tabs li.active a')).toHaveText("My second tab");
-      expect($('#container .tab-simple ul.nav.nav-tabs li:not(.active) a')).toHaveText("My first tab");
-
-      expect($('#container .tab-simple .tab-content .tab-pane.in.active')).toHaveText("Content for second tab");
-      expect($('#container .tab-simple .tab-content .tab-pane:not(.in.active)')).toHaveText("Content for first tab");
-    });
-  });
-
-  describe("clicking a non-active tab", function() {
-    beforeEach(function() {
-      React.render(
-        <Tabs>
-          <Tab heading="My first tab" >Content for first tab</Tab>
-          <Tab heading="My second tab" >Content for second tab</Tab>
-        </Tabs>,
-        this.node
-      );
-
-      TestUtils.Simulate.click($('li:not(.active) a').get(0));
-    });
-
-    it("updates the active tab and content", function() {
-      expect($('#container .tab-simple ul.nav.nav-tabs li.active a')).toHaveText("My second tab");
-      expect($('#container .tab-simple ul.nav.nav-tabs li:not(.active) a')).toHaveText("My first tab");
-
-      expect($('#container .tab-simple .tab-content .tab-pane.in.active')).toHaveText("Content for second tab");
-      expect($('#container .tab-simple .tab-content .tab-pane:not(.in.active)')).toHaveText("Content for first tab");
-    });
-  });
-});