WIP: React Tabs

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 npm-debug.log
 lib
-.out
+.out
+.vscode

package.json

@@ -49,7 +49,9 @@
     "eslint-plugin-react": "^6.4.1",
     "eslint-plugin-standard": "^3.0.1",
     "jest": "^19.0.2",
+    "patternfly": "~3.3",
     "prettier": "^1.3.1",
+    "prop-types": "^15.5.10",
     "react": "^15.4.2",
     "react-dom": "^15.5.0",
     "react-test-renderer": "^15.5.0",
@@ -68,8 +70,8 @@
     "prepublish": "npm run build",
     "test": "npm run lint && jest",
     "test:watch": "jest --watchAll",
-    "storybook": "start-storybook -c storybook -p 6006",
-    "build-storybook": "build-storybook -c storybook -o .out",
+    "storybook": "start-storybook -c storybook -s ./public -p 6006",
+    "build-storybook": "build-storybook -c storybook -s ./public -o .out",
     "storybook:deploy": "storybook-to-ghpages",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
   },

public/css/patternfly-react.css

@@ -0,0 +1,17 @@
+/** 
+  Important: The CSS defined here should be temporary until it is 
+  entirely contributed upstream to Patternfly / Patternfly CSS.
+
+  https://github.com/patternfly/patternfly
+  https://github.com/patternfly/patternfly-css 
+*/
+.pf-tabrow {
+  display: flex;
+  flex-wrap: wrap-reverse;
+}
+.pf-tabrow > li {
+  float: none;
+}
+.pf-tabrow > .pf-tabrow-contents {
+  margin-left: auto;
+}

src/Alert/Alert.js

@@ -1,6 +1,7 @@
 import ClassNames from 'classnames'
 import React from 'react'
 import PropTypes from 'prop-types'
+import { ALERT_TYPES } from '../common/constants'
 
 /**
  * Alert Component for Patternfly React
@@ -42,8 +43,7 @@ Alert.propTypes = {
   /** callback when alert is dismissed  */
   onDismiss: PropTypes.func,
   /** the type of alert  */
-  type: PropTypes.oneOf(['danger', 'error', 'warning', 'success', 'info'])
-    .isRequired,
+  type: PropTypes.oneOf(ALERT_TYPES).isRequired,
   /** children nodes  */
   children: PropTypes.node
 }

src/Alert/Alert.stories.js

@@ -17,7 +17,9 @@ stories.addDecorator(
 
 stories.addWithInfo('with danger', `This is the Alert with danger type.`, () =>
   <Alert type="danger" onDismiss={action('onDismiss')}>
-    <span>{text('Label', 'Danger Will Robinson!')}</span>
+    <span>
+      {text('Label', 'Danger Will Robinson!')}
+    </span>
   </Alert>
 )
 

src/Button/Button.stories.js

@@ -7,12 +7,10 @@ const stories = storiesOf('Button', module)
 
 const description = (
   <p>
-    This component is based on React Bootstrap Button component. See
-    {' '}
+    This component is based on React Bootstrap Button component. See{' '}
     <a href="https://react-bootstrap.github.io/components.html#buttons">
       React Bootstrap Docs
-    </a>
-    {' '}
+    </a>{' '}
     for complete Button component documentation.
   </p>
 )
@@ -29,21 +27,15 @@ stories.addDecorator(
 stories.addWithInfo('Button', '', () =>
   <div>
     <p>
-      <Button>Default Button</Button>
-      {' '}
-      <Button bsStyle="primary">Primary Button</Button>
-      {' '}
-      <Button bsStyle="danger">Danger Button</Button>
-      {' '}
+      <Button>Default Button</Button>{' '}
+      <Button bsStyle="primary">Primary Button</Button>{' '}
+      <Button bsStyle="danger">Danger Button</Button>{' '}
       <Button bsStyle="link">Link Button</Button>
     </p>
     <p>
-      <Button bsSize="large">Large Button</Button>
-      {' '}
-      <Button>Default Button</Button>
-      {' '}
-      <Button bsSize="small">Small Button</Button>
-      {' '}
+      <Button bsSize="large">Large Button</Button>{' '}
+      <Button>Default Button</Button>{' '}
+      <Button bsSize="small">Small Button</Button>{' '}
       <Button bsSize="xsmall">Extra Small Button</Button>
     </p>
   </div>

src/DropdownKebab/DropdownKebab.js

@@ -1,10 +1,20 @@
 import { Dropdown } from 'react-bootstrap'
+import ClassNames from 'classnames'
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const DropdownKebab = ({ children, id, pullRight }) => {
+/**
+ * DropdownKebab Component for Patternfly React
+ */
+const DropdownKebab = ({ className, children, id, pullRight }) => {
+  const kebabClass = ClassNames(
+    {
+      'dropdown-kebab-pf': true
+    },
+    className
+  )
   return (
-    <Dropdown className="dropdown-kebab-pf" id={id} pullRight={pullRight}>
+    <Dropdown className={kebabClass} id={id} pullRight={pullRight}>
       <Dropdown.Toggle bsStyle="link" noCaret>
         <span className="fa fa-ellipsis-v" />
       </Dropdown.Toggle>
@@ -15,8 +25,13 @@ const DropdownKebab = ({ children, id, pullRight }) => {
   )
 }
 DropdownKebab.propTypes = {
+  /** additional kebab dropdown classes */
+  className: PropTypes.string,
+  /** children nodes  */
   children: PropTypes.node,
+  /** kebab dropdown id */
   id: PropTypes.string.isRequired,
+  /** menu right aligned */
   pullRight: PropTypes.bool
 }
 export default DropdownKebab

src/DropdownKebab/DropdownKebab.stories.js

@@ -20,8 +20,7 @@ stories.addWithInfo(
   `pullRight prop is used to align the dropdown to the right.`,
   () =>
     <div>
-      <Button bsStyle="primary">Some Button</Button>
-      {' '}
+      <Button bsStyle="primary">Some Button</Button>{' '}
       <Button>Another Button</Button>
       <DropdownKebab id="myKebab" pullRight={boolean('Right aligned', false)}>
         <MenuItem>Action</MenuItem>

src/MenuItem/MenuItem.stories.js

@@ -8,13 +8,11 @@ const stories = storiesOf('MenuItem', module)
 
 const description = (
   <p>
-    This component is based on React Bootstrap MenuItem component.
-    This component represents a menu item in a dropdown. See
-    {' '}
+    This component is based on React Bootstrap MenuItem component. This
+    component represents a menu item in a dropdown. See{' '}
     <a href="https://react-bootstrap.github.io/components.html#menu-items">
       React Bootstrap Docs
-    </a>
-    {' '}
+    </a>{' '}
     for complete MenuItem component documentation.
   </p>
 )
@@ -35,9 +33,7 @@ stories.addWithInfo('MenuItem', '', () =>
       <MenuItem header>Header</MenuItem>
       <MenuItem>link</MenuItem>
       <MenuItem disabled>disabled</MenuItem>
-      <MenuItem title="See? I have a title.">
-        link with title
-      </MenuItem>
+      <MenuItem title="See? I have a title.">link with title</MenuItem>
       <MenuItem
         eventKey={1}
         href="#someHref"

src/Navbar/Nav.js

@@ -0,0 +1,9 @@
+import { Nav as BsNav } from 'react-bootstrap'
+import React from 'react'
+
+/**
+ * Nav Component for Patternfly React
+ */
+const Nav = props => <BsNav {...props} />
+
+export default Nav

src/Navbar/NavDropdown.js

@@ -0,0 +1,9 @@
+import { NavDropdown as BsNavDropdown } from 'react-bootstrap'
+import React from 'react'
+
+/**
+ * NavDropdown Component for Patternfly React
+ */
+const NavDropdown = props => <BsNavDropdown {...props} />
+
+export default NavDropdown

src/Navbar/NavItem.js

@@ -0,0 +1,9 @@
+import { NavItem as BsNavItem } from 'react-bootstrap'
+import React from 'react'
+
+/**
+ * NavItem Component for Patternfly React
+ */
+const NavItem = props => <BsNavItem {...props} />
+
+export default NavItem

src/Navbar/Navbar.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * Navbar Component for Patternfly React
+ */
+export const Navbar = props => {
+  return (
+    <nav {...props} role="navigation">
+      {props.children}
+    </nav>
+  )
+}
+Navbar.propTypes = {
+  /** children nodes  */
+  children: PropTypes.node
+}
+
+/**
+ * NavbarHeader Component for Patternfly React
+ */
+export const NavbarHeader = props => {
+  return (
+    <div className="navbar-header">
+      {props.children}
+    </div>
+  )
+}
+NavbarHeader.propTypes = {
+  /** children nodes  */
+  children: PropTypes.node
+}
+
+/**
+ * NavbarBrand Component for Patternfly React
+ */
+export const NavbarBrand = props => {
+  return (
+    <a href="/" className="navbar-brand">
+      {props.children}
+    </a>
+  )
+}
+NavbarBrand.propTypes = {
+  /** children nodes  */
+  children: PropTypes.node
+}
+
+/**
+ * NavbarToggle Component for Patternfly React
+ */
+export const NavbarToggle = () => {
+  return (
+    <button className="navbar-toggle">
+      <span className="sr-only">Toggle navigation</span>
+      <span className="icon-bar" />
+      <span className="icon-bar" />
+      <span className="icon-bar" />
+    </button>
+  )
+}
+
+/**
+ * NavbarCollapse Component for Patternfly React
+ */
+export const NavbarCollapse = props => {
+  return (
+    <div className="collapse navbar-collapse">
+      {props.children}
+    </div>
+  )
+}
+NavbarCollapse.propTypes = {
+  /** children nodes  */
+  children: PropTypes.node
+}