feat(vertical tabs): add vertical-tabs component (patternfly#592)

affects: patternfly-react-extensions

packages/patternfly-3/patternfly-react-extensions/less/patternfly-react-extensions.less

@@ -1,2 +1,3 @@
-
+@import 'variables';
 @import 'filter-side-panel';
+@import 'vertical-tabs';

packages/patternfly-3/patternfly-react-extensions/less/variables.less

@@ -0,0 +1,2 @@
+@vertical-tab-pf-color:                                              initial;
+@vertical-tab-pf-active-color:                                       @color-pf-blue-400;

packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less

@@ -0,0 +1,44 @@
+.vertical-tabs-pf {
+  background: transparent;
+  padding: 0;
+  list-style: none;
+}
+
+.vertical-tabs-pf-tab {
+  color: @vertical-tab-pf-color;
+  margin-top: 4px;
+  position: relative;
+
+  .btn.btn-link {
+    color: initial;
+    font-size: 13px;
+    padding-left: 15px;
+
+    &:hover,
+    &:focus {
+      color: @vertical-tab-pf-active-color;
+      outline: 0;
+      text-decoration: none;
+    }
+  }
+
+  &.active {
+    .btn.btn-link {
+      color: @vertical-tab-pf-active-color;
+
+      &::before {
+        background: @vertical-tab-pf-active-color;
+        content: " ";
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 3px;
+      }
+    }
+  }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}

packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_patternfly-react-extensions.scss

@@ -1,4 +1,6 @@
 /**
   Patternfly React Extensions Partials
 */
+@import 'variables';
 @import 'filter-side-panel';
+@import 'vertical-tabs';

packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss

@@ -0,0 +1,2 @@
+$vertical-tab-pf-color:                                              initial;
+$vertical-tab-pf-active-color:                                       $color-pf-blue-400;

packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss

@@ -0,0 +1,44 @@
+.vertical-tabs-pf {
+  background: transparent;
+  padding: 0;
+  list-style: none;
+}
+
+.vertical-tabs-pf-tab {
+  color: inherit;
+  margin-top: 4px;
+  position: relative;
+
+  .btn.btn-link {
+    color: $vertical-tab-pf-color;
+    font-size: 13px;
+    padding-left: 15px;
+
+    &:hover,
+    &:focus {
+      color: $vertical-tab-pf-active-color;
+      outline: 0;
+      text-decoration: none;
+    }
+  }
+
+  &.active {
+    .btn.btn-link {
+      color: $vertical-tab-pf-active-color;
+
+      &::before {
+        background: $vertical-tab-pf-active-color;
+        content: " ";
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 3px;
+      }
+    }
+  }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}

packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import VerticalTabsTab from './VerticalTabsTab';
+
+/**
+ * VerticalTabs Component for PatternFly
+ */
+const VerticalTabs = ({ children, className, ...props }) => {
+  const classes = classNames('vertical-tabs-pf', className);
+  return (
+    <ul className={classes} {...props}>
+      {children}
+    </ul>
+  );
+};
+
+VerticalTabs.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+VerticalTabs.defaultProps = {
+  children: null,
+  className: ''
+};
+
+VerticalTabs.Tab = VerticalTabsTab;
+
+export default VerticalTabs;

packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info/dist/index';
+import { defaultTemplate } from 'storybook/decorators/storyTemplates';
+import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
+import { VerticalTabs, VerticalTabsTab } from './index';
+import { MockVerticalTabsExample, MockVerticalTabsExampleSource } from './_mocks_/mockVerticalTabsExample';
+
+import { name } from '../../../package.json';
+
+const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Vertical Tabs`, module);
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Vertical Tabs'
+  })
+);
+
+stories.add(
+  'Vertical Tabs',
+  withInfo({
+    source: false,
+    propTables: [VerticalTabs, VerticalTabsTab],
+    propTablesExclude: [MockVerticalTabsExample],
+    text: (
+      <div>
+        <h1>Story Source</h1>
+        <pre>{MockVerticalTabsExampleSource}</pre>
+      </div>
+    )
+  })(() => <MockVerticalTabsExample />)
+);

packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import VerticalTabs from './VerticalTabs';
+
+test('Vertical Tabs renders properly', () => {
+  const component = mount(
+    <VerticalTabs id="vertical-tabs" className="test-class">
+      <VerticalTabs.Tab id="one" title="Tab One" active />
+      <VerticalTabs.Tab id="two" title="Tab Two" className="test-tab-class" />
+      <VerticalTabs.Tab id="three" title="Tab Three" />
+      <VerticalTabs.Tab id="four" title="Tab Four" />
+      <VerticalTabs.Tab id="five" title="Tab Five" />
+      <VerticalTabs.Tab id="six" title="Tab Six" />
+      <VerticalTabs.Tab id="seven" title="Tab Seven" />
+    </VerticalTabs>
+  );
+  expect(component.render()).toMatchSnapshot();
+});

packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabsTab.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Button, noop } from 'patternfly-react';
+
+const VerticalTabsTab = ({ className, title, active, onActivate, ...props }) => {
+  const classes = classNames('vertical-tabs-pf-tab', { active }, className);
+
+  return (
+    <li className={classes}>
+      <Button bsStyle="link" {...props} onClick={onActivate}>
+        {title}
+      </Button>
+    </li>
+  );
+};
+
+VerticalTabsTab.propTypes = {
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** Title for the tab */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Flag if this is the active tab */
+  active: PropTypes.bool,
+  /** Callback function when the tab is activated */
+  onActivate: PropTypes.func
+};
+
+VerticalTabsTab.defaultProps = {
+  className: '',
+  title: null,
+  active: false,
+  onActivate: noop
+};
+
+export default VerticalTabsTab;

packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/__snapshots__/VerticalTabs.test.js.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Vertical Tabs renders properly 1`] = `
+<ul
+  class="vertical-tabs-pf test-class"
+  id="vertical-tabs"
+>
+  <li
+    class="vertical-tabs-pf-tab active"
+  >
+    <button
+      class="btn btn-link"
+      id="one"
+      type="button"
+    >
+      Tab One
+    </button>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab test-tab-class"
+  >
+    <button
+      class="btn btn-link"
+      id="two"
+      type="button"
+    >
+      Tab Two
+    </button>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab"
+  >
+    <button
+      class="btn btn-link"
+      id="three"
+      type="button"
+    >
+      Tab Three
+    </button>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab"
+  >
+    <button
+      class="btn btn-link"
+      id="four"
+      type="button"
+    >
+      Tab Four
+    </button>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab"
+  >
+    <button
+      class="btn btn-link"
+      id="five"
+      type="button"
+    >
+      Tab Five
+    </button>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab"
+  >
+    <button
+      class="btn btn-link"
+      id="six"
+      type="button"
+    >
+      Tab Six
+    </button>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab"
+  >
+    <button
+      class="btn btn-link"
+      id="seven"
+      type="button"
+    >
+      Tab Seven
+    </button>
+  </li>
+</ul>
+`;