feat(tabs): add the pf tabs component

package.json

@@ -19,7 +19,7 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
     "classnames": "^2.2.5",
-    "patternfly": "^3.35.1",
+    "patternfly": "^3.37.2",
     "react-bootstrap": "^0.31.5",
     "react-bootstrap-switch": "^15.5.3",
     "react-c3js": "^0.1.20",

src/components/Dropdown/NavDropdown.js

@@ -0,0 +1 @@
+export { NavDropdown as default } from 'react-bootstrap';

src/components/Dropdown/index.js

@@ -1 +1,2 @@
 export { default as Dropdown } from './Dropdown';
+export { default as NavDropdown } from './NavDropdown';

src/components/Nav/Nav.js

@@ -0,0 +1 @@
+export { Nav as default } from 'react-bootstrap';

src/components/Nav/NavItem.js

@@ -0,0 +1 @@
+export { NavItem as default } from 'react-bootstrap';

src/components/Nav/index.js

@@ -0,0 +1,2 @@
+export { default as Nav } from './Nav';
+export { default as NavItem } from './NavItem';

src/components/Tabs/Tab.js

@@ -0,0 +1 @@
+export { Tab as default } from 'react-bootstrap';

src/components/Tabs/TabContainer.js

@@ -0,0 +1 @@
+export { TabContainer as default } from 'react-bootstrap';

src/components/Tabs/TabContent.js

@@ -0,0 +1 @@
+export { TabContent as default } from 'react-bootstrap';

src/components/Tabs/TabPane.js

@@ -0,0 +1 @@
+export { TabPane as default } from 'react-bootstrap';

src/components/Tabs/Tabs.js

@@ -0,0 +1 @@
+export { Tabs as default } from 'react-bootstrap';

src/components/Tabs/Tabs.stories.js

@@ -0,0 +1,289 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import {
+  TabContainer,
+  Nav,
+  NavItem,
+  NavDropdown,
+  MenuItem,
+  TabPane,
+  TabContent
+} from '../../index';
+
+const stories = storiesOf('Tabs', module);
+const description = (
+  <p>
+    This component is based on React Bootstrap Tabs component. See{' '}
+    <a href="https://react-bootstrap.github.io/components.html#tabs">
+      React Bootstrap Docs
+    </a>{' '}
+    for complete Tabs component documentation.
+  </p>
+);
+stories.addDecorator(withKnobs);
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Tabs',
+    documentationLink:
+      'http://www.patternfly.org/pattern-library/widgets/#tabs',
+    description: description
+  })
+);
+
+stories.addWithInfo('Basic Tabs', () => {
+  const bsClass = ClassNames('nav nav-tabs', {
+    'nav-justified': boolean('Justified', false)
+  });
+  const t1Disabled = boolean('Tab 1 Disabled', false);
+  const t1Title = (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: text('Tab 1 Tittle', 'Tab 1')
+      }}
+    />
+  );
+  const t2Disabled = boolean('Tab 2 Disabled', false);
+  const t2Title = (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: text('Tab 2 Tittle', 'Tab 2')
+      }}
+    />
+  );
+  const t3Disabled = boolean('Tab 3 Disabled', false);
+  const t3Title = (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: text('Tab 3 Tittle', 'Tab 3')
+      }}
+    />
+  );
+
+  return (
+    <TabContainer id="basic-tabs" defaultActiveKey={1}>
+      <div>
+        <Nav bsClass={bsClass} onSelect={action('selected')}>
+          <NavItem eventKey={1} disabled={t1Disabled}>
+            {t1Title}
+          </NavItem>
+          <NavItem eventKey={2} disabled={t2Disabled}>
+            {t2Title}
+          </NavItem>
+          <NavItem eventKey={3} disabled={t3Disabled}>
+            {t3Title}
+          </NavItem>
+        </Nav>
+        <TabContent animation>
+          <TabPane eventKey={1}>Tab 1 content</TabPane>
+          <TabPane eventKey={2}>Tab 2 content</TabPane>
+          <TabPane eventKey={3}>Tab 3 content</TabPane>
+        </TabContent>
+      </div>
+    </TabContainer>
+  );
+});
+
+stories.addWithInfo('Basic Tabs - PF style', () => {
+  const bsClass = ClassNames('nav nav-tabs nav-tabs-pf', {
+    'nav-justified': boolean('Justified', false)
+  });
+  const t1Disabled = boolean('Tab 1 Disabled', false);
+  const t1Title = (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: text('Tab 1 Tittle', 'Tab 1')
+      }}
+    />
+  );
+  const t2Disabled = boolean('Tab 2 Disabled', false);
+  const t2Title = (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: text('Tab 2 Tittle', 'Tab 2')
+      }}
+    />
+  );
+  const t3Disabled = boolean('Tab 3 Disabled', false);
+  const t3Title = (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: text('Tab 3 Tittle', 'Tab 3')
+      }}
+    />
+  );
+
+  return (
+    <TabContainer id="basic-tabs-pf" defaultActiveKey={1}>
+      <div>
+        <Nav bsClass={bsClass} onSelect={action('selected')}>
+          <NavItem eventKey={1} disabled={t1Disabled}>
+            {t1Title}
+          </NavItem>
+          <NavItem eventKey={2} disabled={t2Disabled}>
+            {t2Title}
+          </NavItem>
+          <NavItem eventKey={3} disabled={t3Disabled}>
+            {t3Title}
+          </NavItem>
+        </Nav>
+        <TabContent animation>
+          <TabPane eventKey={1}>Tab 1 content</TabPane>
+          <TabPane eventKey={2}>Tab 2 content</TabPane>
+          <TabPane eventKey={3}>Tab 3 content</TabPane>
+        </TabContent>
+      </div>
+    </TabContainer>
+  );
+});
+
+stories.addWithInfo('Tabs with Dropdown', () => {
+  const bsClass = ClassNames('nav nav-tabs', {
+    'nav-justified': boolean('Justified', false)
+  });
+
+  return [
+    <p>
+      <b>Note:</b>
+      This variation is not keyboard accessible and is not recommended for use
+      where accessibility is a priority.
+    </p>,
+    <TabContainer id="tabs-with-dropdown" defaultActiveKey="first">
+      <div>
+        <Nav bsClass={bsClass} onSelect={action('selected')}>
+          <NavItem eventKey="first">Tab 1</NavItem>
+          <NavItem eventKey="second">Tab 2</NavItem>
+          <NavDropdown eventKey="3" title="Tab 3">
+            <MenuItem eventKey="3.1">Action</MenuItem>
+            <MenuItem eventKey="3.2">Another action</MenuItem>
+            <MenuItem eventKey="3.3">Something else here</MenuItem>
+            <MenuItem divider />
+            <MenuItem eventKey="3.4">Separated link</MenuItem>
+          </NavDropdown>
+        </Nav>
+        <TabContent animation>
+          <TabPane eventKey="first">Tab 1 content</TabPane>
+          <TabPane eventKey="second">Tab 2 content</TabPane>
+          <TabPane eventKey="3.1">Tab 3.1 content</TabPane>
+          <TabPane eventKey="3.2">Tab 3.2 content</TabPane>
+          <TabPane eventKey="3.3">Tab 3.3 content</TabPane>
+          <TabPane eventKey="3.4">Tab 3.4 content</TabPane>
+        </TabContent>
+      </div>
+    </TabContainer>
+  ];
+});
+
+stories.addWithInfo('Tabs with Dropdown - PF style', () => {
+  const bsClass = ClassNames('nav nav-tabs nav-tabs-pf', {
+    'nav-justified': boolean('Justified', false)
+  });
+
+  return [
+    <p>
+      <b>Note:</b>
+      This variation is not keyboard accessible and is not recommended for use
+      where accessibility is a priority.
+    </p>,
+    <TabContainer id="tabs-with-dropdown-pf" defaultActiveKey="first">
+      <div>
+        <Nav bsClass={bsClass} onSelect={action('selected')}>
+          <NavItem eventKey="first">Tab 1</NavItem>
+          <NavItem eventKey="second">Tab 2</NavItem>
+          <NavDropdown eventKey="3" title="Tab 3">
+            <MenuItem eventKey="3.1">Action</MenuItem>
+            <MenuItem eventKey="3.2">Another action</MenuItem>
+            <MenuItem eventKey="3.3">Something else here</MenuItem>
+            <MenuItem divider />
+            <MenuItem eventKey="3.4">Separated link</MenuItem>
+          </NavDropdown>
+        </Nav>
+        <TabContent animation>
+          <TabPane eventKey="first">Tab 1 content</TabPane>
+          <TabPane eventKey="second">Tab 2 content</TabPane>
+          <TabPane eventKey="3.1">Tab 3.1 content</TabPane>
+          <TabPane eventKey="3.2">Tab 3.2 content</TabPane>
+          <TabPane eventKey="3.3">Tab 3.3 content</TabPane>
+          <TabPane eventKey="3.4">Tab 3.4 content</TabPane>
+        </TabContent>
+      </div>
+    </TabContainer>
+  ];
+});
+
+stories.addWithInfo('Secondary Tabs', () => {
+  const bsClass = ClassNames('nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary', {
+    'nav-justified': boolean('Secondary Tabs Justified', false)
+  });
+
+  return (
+    <TabContainer id="secondary-tabs" defaultActiveKey={1}>
+      <div>
+        <Nav bsStyle="tabs" onSelect={action('selected')}>
+          <NavItem eventKey={1} title="Tab 1">
+            Tab 1
+          </NavItem>
+          <NavItem eventKey={2} title="Tab 2">
+            Tab 2
+          </NavItem>
+          <NavItem eventKey={3} title="Tab 3">
+            Tab 3
+          </NavItem>
+        </Nav>
+        <TabContent animation>
+          <TabPane eventKey={1}>
+            <TabContainer id="secondary-tabs-1" defaultActiveKey={1.1}>
+              <div>
+                <Nav bsClass={bsClass} onSelect={action('selected')}>
+                  <NavItem eventKey={1.1}>Tab A</NavItem>
+                  <NavItem eventKey={1.2}>Tab B</NavItem>
+                  <NavItem eventKey={1.3}>Tab C</NavItem>
+                </Nav>
+                <TabContent animation>
+                  <TabPane eventKey={1.1}>Tab A content</TabPane>
+                  <TabPane eventKey={1.2}>Tab B content</TabPane>
+                  <TabPane eventKey={1.3}>Tab C content</TabPane>
+                </TabContent>
+              </div>
+            </TabContainer>
+          </TabPane>
+          <TabPane eventKey={2}>
+            <TabContainer id="secondary-tabs-2" defaultActiveKey={2.1}>
+              <div>
+                <Nav bsClass={bsClass} onSelect={action('selected')}>
+                  <NavItem eventKey={2.1}>Tab D</NavItem>
+                  <NavItem eventKey={2.2}>Tab E</NavItem>
+                  <NavItem eventKey={2.3}>Tab F</NavItem>
+                </Nav>
+                <TabContent animation>
+                  <TabPane eventKey={2.1}>Tab D content</TabPane>
+                  <TabPane eventKey={2.2}>Tab E content</TabPane>
+                  <TabPane eventKey={2.3}>Tab F content</TabPane>
+                </TabContent>
+              </div>
+            </TabContainer>
+          </TabPane>
+          <TabPane eventKey={3}>
+            <TabContainer id="secondary-tabs-3" defaultActiveKey={3.1}>
+              <div>
+                <Nav bsClass={bsClass} onSelect={action('selected')}>
+                  <NavItem eventKey={3.1}>Tab G</NavItem>
+                  <NavItem eventKey={3.2}>Tab H</NavItem>
+                  <NavItem eventKey={3.3}>Tab I</NavItem>
+                </Nav>
+                <TabContent animation>
+                  <TabPane eventKey={3.1}>Tab G content</TabPane>
+                  <TabPane eventKey={3.2}>Tab H content</TabPane>
+                  <TabPane eventKey={3.3}>Tab I content</TabPane>
+                </TabContent>
+              </div>
+            </TabContainer>
+          </TabPane>
+        </TabContent>
+      </div>
+    </TabContainer>
+  );
+});

src/components/Tabs/index.js

@@ -0,0 +1,5 @@
+export { default as TabContainer } from './TabContainer';
+export { default as TabContent } from './TabContent';
+export { default as TabPane } from './TabPane';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

src/index.js

@@ -16,11 +16,13 @@ export * from './components/ListGroup';
 export * from './components/ListView';
 export * from './components/MenuItem';
 export * from './components/Modal';
+export * from './components/Nav';
 export * from './components/OverlayTrigger';
 export * from './components/Popover';
 export * from './components/Sort';
 export * from './components/Spinner';
 export * from './components/Switch';
+export * from './components/Tabs';
 export * from './components/ToastNotification';
 export * from './components/Toolbar';
 export * from './components/Tooltip';