Merge pull request #647 from creative-commoners/pulls/1/add-flag-to-h…

…ide-tabs-nav

NEW Add hideNav flag to allow hiding of navigation in Tabs

client/src/components/Tabs/Tabs.js

@@ -117,15 +117,18 @@ class Tabs extends Component {
   }
 
   render() {
+    const { hideNav, children } = this.props;
+    const { activeTab } = this.state;
+
     const containerProps = this.getContainerProps();
-    const nav = this.renderNav();
+    const nav = hideNav ? null : this.renderNav();
 
     return (
       <div {...containerProps}>
         <div className="wrapper">
           {nav}
-          <TabContent activeTab={this.state.activeTab}>
-            {this.props.children}
+          <TabContent activeTab={activeTab}>
+            {children}
           </TabContent>
         </div>
       </div>
@@ -137,11 +140,13 @@ Tabs.propTypes = {
   id: React.PropTypes.string.isRequired,
   defaultActiveKey: React.PropTypes.string,
   extraClass: React.PropTypes.string,
+  hideNav: React.PropTypes.bool,
 };
 
 Tabs.defaultProps = {
   className: '',
   extraClass: '',
+  hideNav: false
 };
 
 export default Tabs;

client/src/components/Tabs/tests/Tabs-test.js

@@ -0,0 +1,40 @@
+/* global jest, describe, it, expect */
+
+import React from 'react';
+import Tabs from '../Tabs';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15.4/build/index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Tab', () => {
+  describe('render()', () => {
+    it('Renders the navigation with hideNav: false', () => {
+      const wrapper = shallow(
+        <Tabs
+          id={'1'}
+          hideNav={false}
+        >
+          <div title="Child One" />
+          <div title="Child Two" />
+        </Tabs>
+    );
+
+      expect(wrapper.find('Nav')).toHaveLength(1);
+    });
+
+    it('Doesn\'t render the navigation with hideNav: true', () => {
+      const wrapper = shallow(
+        <Tabs
+          id={'2'}
+          hideNav
+        >
+          <div title="Child One" />
+          <div title="Child Two" />
+        </Tabs>
+    );
+
+      expect(wrapper.find('Nav')).toHaveLength(0);
+    });
+  });
+});