Add mostly-empty stub components

src/VerticalNavigation/VerticalNavigation.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+//
+// HEY MIKE, LOOK RIGHT HERE!
+// YEAH YOU! QUIT BEING LAZY, HERE ARE YOUR TASKS!
+//
+// TODO markup from https://github.com/patternfly/patternfly-ng/blob/master/src/app/navigation/vertical-navigation.component.html
+// TODO write stories for it so you can view it
+// TODO look at different view states and the props necessary
+// TODO look into other behaviors
+// TODO behaviors from https://github.com/patternfly/patternfly-ng/blob/master/src/app/navigation/vertical-navigation.component.ts
+// TODO write tests
+// TODO compare with http://www.patternfly.org/pattern-library/navigation/vertical-navigation/
+//
+
+/**
+ * VerticalNavigation - TODO describe me here
+ */
+export default class VerticalNavigation extends React.Component {
+  constructor() {
+    super()
+    this.state = {}
+  }
+
+  render() {
+    const { children } = this.props
+
+    if (children) {
+      return <div>{children}</div>
+    } else {
+      return <div>Nothing to see here?</div> // TODO fix me?
+    }
+  }
+}
+VerticalNavigation.propTypes = {
+  /** Child node rendered as expanded content of the TODO??? */
+  children: PropTypes.node
+}
+VerticalNavigation.defaultProps = {
+  stacked: false
+}

src/VerticalNavigation/VerticalNavigation.stories.js

@@ -0,0 +1,37 @@
+// TODO ADD STORIES
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs'
+import { defaultTemplate } from '../../storybook/decorators/storyTemplates'
+
+import { VerticalNavigation, VerticalNavigationItem } from '../index'
+import { mockNavItems } from './__mocks__/mockNavItems'
+
+const stories = storiesOf('VerticalNavigation', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator(
+  defaultTemplate({
+    title: 'VerticalNavigation',
+    documentationLink:
+      'http://www.patternfly.org/pattern-library/navigation/vertical-navigation/'
+  })
+)
+
+stories.addWithInfo(
+  'Vertical Navigation containing a list of links',
+  `VerticalNavigation usage example.`,
+  () => {
+    return (
+      <VerticalNavigation>
+        {mockNavItems.map((item, index) => (
+          <VerticalNavigationItem>
+            <span>Hey, stuff goes here!</span>
+          </VerticalNavigationItem>
+        ))}
+      </VerticalNavigation>
+    )
+  }
+)
+
+// TODO add more stories!

src/VerticalNavigation/VerticalNavigation.test.js

@@ -0,0 +1,40 @@
+// TODO ADD TESTS!
+
+/*
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Row, Col } from 'react-bootstrap'
+
+import { ListView, ListViewItem, ListViewIcon } from '../index'
+import {
+  mockListItems,
+  renderActions,
+  renderAdditionalInfoItems
+} from './__mocks__/mockListItems'
+
+test('ListView renders properly', () => {
+  const component = renderer.create(
+    <ListView>
+      {mockListItems.map((item, index) => (
+        <ListViewItem
+          key={index}
+          actions={renderActions(item.actions)}
+          checkboxInput={<input type="checkbox" />}
+          leftContent={<ListViewIcon icon="fa fa-plane" />}
+          additionalInfo={renderAdditionalInfoItems(item.properties)}
+          heading={item.title}
+          description={item.description}
+          stacked
+        >
+          <Row>
+            <Col sm={11}>{item.expandedContentText}</Col>
+          </Row>
+        </ListViewItem>
+      ))}
+    </ListView>
+  )
+
+  const tree = component.toJSON()
+  expect(tree).toMatchSnapshot()
+})
+*/

src/VerticalNavigation/VerticalNavigationItem.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * VerticalNavigation - TODO describe me here
+ */
+export default class VerticalNavigationItem extends React.Component {
+  constructor() {
+    super()
+    this.state = {}
+  }
+
+  render() {
+    const { children } = this.props
+
+    if (children) {
+      return <div>{children}</div>
+    } else {
+      return <div />
+    }
+  }
+}
+VerticalNavigationItem.propTypes = {
+  /** Child node rendered as expanded content of the TODO??? */
+  children: PropTypes.node
+}
+VerticalNavigationItem.defaultProps = {
+  stacked: false
+}

src/VerticalNavigation/__mocks__/mockNavItems.js

@@ -0,0 +1,71 @@
+import cx from 'classnames'
+import React from 'react'
+
+import { Button, ListViewInfoItem } from '../../index'
+
+// TODO make this make more sense for VerticalNavigation
+
+export const mockNavItems = [
+  {
+    title: 'Item 1',
+    description: 'This is Item 1 description',
+    properties: { hosts: 3, clusters: 1, nodes: 7, images: 4 },
+    expandedContentText:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry'
+  },
+  {
+    title: 'Item 2',
+    description: 'This is Item 2 description',
+    properties: { hosts: 2, clusters: 1, nodes: 11, images: 8 },
+    expandedContentText:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry'
+  },
+  {
+    title: 'Item 3',
+    description: 'This is Item 3 description',
+    properties: { hosts: 4, clusters: 2, nodes: 9, images: 8 },
+    expandedContentText:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry'
+  },
+  {
+    description: 'This is Item without heading',
+    expandedContentText:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry'
+  },
+  {
+    properties: { hosts: 4, clusters: 2, nodes: 9, images: 8 },
+    expandedContentText:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry'
+  },
+  {
+    title: 'Item without description',
+    expandedContentText:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry'
+  }
+]
+
+export const renderActions = () => (
+  <div>
+    <Button>Details</Button>
+  </div>
+)
+
+export const renderAdditionalInfoItems = itemProperties => {
+  return (
+    itemProperties &&
+    Object.keys(itemProperties).map(prop => {
+      const classNames = cx('pficon', {
+        'pficon-flavor': prop === 'hosts',
+        'pficon-cluster': prop === 'clusters',
+        'pficon-container-node': prop === 'nodes',
+        'pficon-image': prop === 'images'
+      })
+      return (
+        <ListViewInfoItem key={prop}>
+          <span className={classNames} />
+          <strong>{itemProperties[prop]}</strong> {prop}
+        </ListViewInfoItem>
+      )
+    })
+  )
+}

src/index.js

@@ -18,3 +18,9 @@ export {
 export {
   default as ToastNotificationList
 } from './ToastNotification/ToastNotificationList'
+export {
+  default as VerticalNavigation
+} from './VerticalNavigation/VerticalNavigation'
+export {
+  default as VerticalNavigationItem
+} from './VerticalNavigation/VerticalNavigationItem'