From 31a5b50c3e51b363b47615bdb0e608a20e47d00c Mon Sep 17 00:00:00 2001
From: Joachim Schuler <jschuler@redhat.com>
Date: Fri, 28 Sep 2018 19:42:24 -0400
Subject: [PATCH 1/2] feat(pf4-nav): adds the nav component

affects: @patternfly/react-core, @patternfly/react-docs

ISSUES CLOSED: #547
---
 .babelrc                                      |    2 +-
 .eslintignore                                 |    6 -
 .public/index.html                            |   55 +
 .travis.yml                                   |    3 +
 .travis/deploy_pr.sh                          |   66 +
 CONTRIBUTING.md                               |   72 +-
 GETTING-STARTED.md                            |  328 +++
 README.md                                     |   68 +-
 package.json                                  |   81 +-
 packages/README.md                            |   21 +
 packages/patternfly-3/.babelrc.js             |   31 +
 packages/patternfly-3/.eslintignore           |    3 +
 .../patternfly-3/.eslintrc.js                 |   24 +-
 .../patternfly-3/.stylelintrc                 |    0
 packages/patternfly-3/README.md               |   14 +
 packages/patternfly-3/package.json            |   49 +
 .../patternfly-react-extensions/.babelrc      |    3 +
 .../less/catalog-item.less                    |   24 +
 .../less/catalog-tile.less                    |    6 +-
 .../less/patternfly-react-extensions.less     |    2 +
 .../less/properties-side-panel.less           |   25 +
 .../less/table-grid.less                      |   96 +-
 .../less/variables.less                       |    2 +-
 .../less/vertical-tabs.less                   |   20 +-
 .../patternfly-react-extensions/package.json  |    6 +-
 .../_catalog-item.scss                        |   24 +
 .../_catalog-tile.scss                        |   10 +-
 .../_patternfly-react-extensions.scss         |    2 +
 .../_properties-side-panel.scss               |   25 +
 .../_table-grid.scss                          |   96 +-
 .../_variables.scss                           |    2 +-
 .../_vertical-tabs.scss                       |   20 +-
 .../CatalogItemHeader/CatalogItemHeader.js    |   40 +
 .../CatalogItemHeader.stories.js              |   56 +
 .../CatalogItemHeader.test.js                 |   40 +
 .../CatalogItemHeader/__images__/nginx.png    |  Bin 0 -> 24038 bytes
 .../CatalogItemHeader.test.js.snap            |  112 +
 .../src/components/CatalogItemHeader/index.js |    3 +
 .../src/components/CatalogTile/CatalogTile.js |    9 +-
 .../CatalogTile/CatalogTile.stories.js        |    4 +-
 .../__snapshots__/CatalogTile.test.js.snap    |    4 +-
 .../CatalogTileViewCategory.js                |    4 +-
 .../CatalogTileView/__mocks__/mockItems.js    |   20 +-
 .../PropertiesSIdePanel.test.js               |   55 +
 .../PropertiesSidePanel.js                    |   30 +
 .../PropertiesSidePanel/PropertyItem.js       |   30 +
 .../PropertySidePanel.stories.js              |   69 +
 .../PropertiesSIdePanel.test.js.snap          |  165 ++
 .../components/PropertiesSidePanel/index.js   |    4 +
 .../src/components/TableGrid/TableGrid.js     |   22 +-
 .../components/TableGrid/TableGrid.stories.js |   28 +-
 .../components/TableGrid/TableGrid.test.js    |  276 +++
 .../src/components/TableGrid/TableGridCol.js  |   31 +
 .../src/components/TableGrid/TableGridHead.js |   95 +-
 .../src/components/TableGrid/TableGridRow.js  |   23 +-
 .../__snapshots__/TableGrid.test.js.snap      |  946 +++++++++
 .../TableGrid/_mocks_/mockTableGridExample.js |  196 +-
 .../src/components/TableGrid/index.js         |    3 +-
 .../VerticalTabs/VerticalTabs.stories.js      |   12 +-
 .../VerticalTabs/VerticalTabs.test.js         |   55 +-
 .../VerticalTabs/VerticalTabsTab.js           |   34 +-
 .../__snapshots__/VerticalTabs.test.js.snap   |  531 +++--
 .../_mocks_/mockVerticalTabsExample.js        |  418 +---
 .../patternfly-react-extensions/src/index.js  |    2 +
 .../patternfly-3/patternfly-react/.babelrc    |    3 +
 .../patternfly-react/CONTRIBUTING.md          |  116 ++
 .../patternfly-3/patternfly-react/README.md   |   56 +-
 .../less/modeless-overlay.less                |   20 +
 .../less/patternfly-react.less                |    1 +
 .../patternfly-react/package.json             |    6 +-
 .../patternfly-react/_modeless-overlay.scss   |   20 +
 .../patternfly-react/_patternfly-react.scss   |    1 +
 .../src/components/Alert/Alert.test.js        |    4 -
 .../Alert/__snapshots__/helpers.test.js.snap  |    6 +
 .../components/Cards/CardHeightMatching.js    |   29 +-
 .../Stories/BaseCardHeightMatchingStory.js    |    9 +-
 .../__snapshots__/BulletChart.test.js.snap    |  193 --
 .../HorizontalNav/HorizontalNav.test.js       |    3 +-
 .../__snapshots__/Masthead.test.js.snap       |    6 +
 .../src/components/Modal/Modal.stories.js     |   18 +-
 .../Modal/__mocks__/mockModalManager.js       |    7 +-
 .../ModelessOverlay/ModelessOverlay.js        |   68 +
 .../ModelessOverlay/ModelessOverlay.test.js   |   43 +
 .../ModelessOverlay/ModlessOverlay.stories.js |   43 +
 .../__mocks__/mockModelessManager.js          |  169 ++
 .../ModelessOverlay.test.js.snap              |  125 ++
 .../src/components/ModelessOverlay/index.js   |    3 +
 .../VerticalNav/VerticalNav.test.js           |    2 +-
 .../Wizard/__snapshots__/Wizard.test.js.snap  |   18 +
 .../patternfly-react/src/index.js             |    1 +
 packages/patternfly-3/react-console/.babelrc  |    3 +
 .../patternfly-3/react-console/package.json   |    4 +
 .../__snapshots__/SerialConsole.test.js.snap  |   18 +
 .../patternfly-4/.babelrc.js                  |    9 +-
 packages/patternfly-4/.eslintignore           |    3 +
 packages/patternfly-4/.eslintrc.js            |   46 +
 packages/patternfly-4/.stylelintrc            |    4 +
 packages/patternfly-4/README.md               |    3 +
 packages/patternfly-4/package.json            |   34 +
 packages/patternfly-4/react-core/.babelrc     |    6 +-
 .../patternfly-4/react-core/CONTRIBUTING.md   |  145 +-
 packages/patternfly-4/react-core/README.md    |   52 +-
 packages/patternfly-4/react-core/package.json |   13 +-
 .../patternfly-4/react-core/scripts/copyTS.js |   17 +
 .../Alert/__snapshots__/Alert.test.js.snap    |   80 +-
 .../src/components/Avatar/Avatar.js           |    5 +-
 .../Avatar/examples/SimpleAvatar.js           |    2 +-
 .../Avatar/examples}/img_avatar.png           |  Bin
 .../src/components/Avatar/index.d.ts          |    1 +
 .../components/Badge/examples/ReadBadge.js    |    6 +-
 .../components/Badge/examples/UnreadBadge.js  |    6 +-
 .../src/components/Brand/Brand.d.ts           |    9 +
 .../src/components/Brand/Brand.docs.js        |   10 +
 .../react-core/src/components/Brand/Brand.js  |   28 +
 .../src/components/Brand/Brand.test.js        |    8 +
 .../Brand/__snapshots__/Brand.test.js.snap    |    9 +
 .../components/Brand/examples/SimpleBrand.js  |   13 +
 .../src/components/Brand/examples/pf_logo.svg |   37 +
 .../src/components/Brand/index.d.ts           |    1 +
 .../react-core/src/components/Brand/index.js  |    1 +
 .../components/Button/examples/LinkButton.js  |    4 +-
 .../Card/__snapshots__/Card.test.js.snap      |    1 +
 .../src/components/Checkbox/index.d.ts        |    2 +-
 .../Dropdown/examples/DirectionUpDropdown.js  |    4 +-
 .../Dropdown/examples/KebabDropdown.js        |    4 +-
 .../examples/PositionRightDropdown.js         |    4 +-
 .../Dropdown/examples/SimpleDropdown.js       |    4 +-
 .../src/components/Dropdown/index.d.ts        |   11 +-
 .../react-core/src/components/List/List.d.ts  |   16 +
 .../src/components/List/List.docs.js          |   13 +
 .../react-core/src/components/List/List.js    |   35 +
 .../src/components/List/List.test.js          |   43 +
 .../src/components/List/ListItem.d.ts         |    9 +
 .../src/components/List/ListItem.js           |   18 +
 .../List/__snapshots__/List.test.js.snap      |  151 ++
 .../src/components/List/examples/GridList.js  |   21 +
 .../components/List/examples/InlineList.js    |   18 +
 .../components/List/examples/SimpleList.js    |   18 +
 .../react-core/src/components/List/index.d.ts |    2 +
 .../react-core/src/components/List/index.js   |    2 +
 .../react-core/src/components/Nav/Nav.d.ts    |   14 +
 .../react-core/src/components/Nav/Nav.docs.js |   33 +
 .../react-core/src/components/Nav/Nav.js      |   70 +
 .../react-core/src/components/Nav/Nav.test.js |  196 ++
 .../src/components/Nav/NavExpandable.d.ts     |   16 +
 .../src/components/Nav/NavExpandable.js       |  107 +
 .../src/components/Nav/NavGroup.d.ts          |   12 +
 .../react-core/src/components/Nav/NavGroup.js |   53 +
 .../src/components/Nav/NavItem.d.ts           |   14 +
 .../react-core/src/components/Nav/NavItem.js  |   68 +
 .../src/components/Nav/NavList.d.ts           |   20 +
 .../react-core/src/components/Nav/NavList.js  |   42 +
 .../src/components/Nav/NavToggle.js           |   41 +
 .../src/components/Nav/NavVariants.d.ts       |    6 +
 .../src/components/Nav/NavVariants.js         |    6 +
 .../Nav/__snapshots__/Nav.test.js.snap        | 1819 +++++++++++++++++
 .../components/Nav/examples/NavDefaultList.js |   40 +
 .../Nav/examples/NavExpandableList.js         |   57 +
 .../Nav/examples/NavExpandableTitlesList.js   |   52 +
 .../components/Nav/examples/NavGroupedList.js |   48 +
 .../Nav/examples/NavHorizontalList.js         |   39 +
 .../components/Nav/examples/NavMixedList.js   |   55 +
 .../components/Nav/examples/NavSimpleList.js  |   40 +
 .../Nav/examples/NavTertiaryList.js           |   40 +
 .../react-core/src/components/Nav/index.d.ts  |    6 +
 .../react-core/src/components/Nav/index.js    |    6 +
 .../src/components/Radio/index.d.ts           |    2 +-
 .../src/components/Select/index.d.ts          |    6 +-
 .../src/components/TextArea/TextArea.d.ts     |   15 +
 .../src/components/TextArea/index.d.ts        |    1 +
 .../src/components/TextInput/TextInput.d.ts   |   19 +
 .../src/components/TextInput/index.d.ts       |    1 +
 .../react-core/src/components/index.d.ts      |   12 +-
 .../react-core/src/components/index.js        |   14 +-
 .../patternfly-4/react-docs/.env.development  |    1 +
 .../patternfly-4/react-docs/.env.production   |    1 +
 packages/patternfly-4/react-docs/.eslintrc    |    4 +-
 packages/patternfly-4/react-docs/.gitignore   |    6 +
 packages/patternfly-4/react-docs/.npmignore   |    3 +-
 packages/patternfly-4/react-docs/README.md    |    2 +-
 .../patternfly-4/react-docs/build/copyDocs.js |   22 +
 .../patternfly-4/react-docs/gatsby-config.js  |    6 +-
 .../patternfly-4/react-docs/gatsby-node.js    |   35 +-
 .../patternfly-4/react-docs/gatsby-ssr.js     |    8 -
 packages/patternfly-4/react-docs/package.json |   14 +-
 .../components/componentDocs/componentDocs.js |   66 +-
 .../src/components/example/example.js         |   57 +-
 .../src/components/example/liveDemo.js        |   67 +
 .../react-docs/src/layouts/example.js         |   14 +-
 .../react-docs/src/layouts/index.js           |   27 +-
 packages/patternfly-4/react-styles/.babelrc   |    6 +-
 .../patternfly-4/react-styles/package.json    |    7 +-
 .../patternfly-4/react-tokens/package.json    |    2 +-
 packages/patternfly-4/verifyCoreVersions.js   |   33 +
 packages/react-icons/.babelrc                 |    3 +
 packages/react-icons/package.json             |   12 +-
 packages/react-icons/scripts/copyTS.js        |   17 +
 scripts/copyTS.js                             |   24 -
 scripts/getGlobPackages.js                    |   32 -
 storybook/webpack.config.js                   |   11 +-
 yarn.lock                                     | 1133 +++++-----
 201 files changed, 9156 insertions(+), 1853 deletions(-)
 delete mode 100644 .eslintignore
 create mode 100644 .public/index.html
 create mode 100644 .travis/deploy_pr.sh
 create mode 100644 GETTING-STARTED.md
 create mode 100644 packages/README.md
 create mode 100644 packages/patternfly-3/.babelrc.js
 create mode 100644 packages/patternfly-3/.eslintignore
 rename .eslintrc.js => packages/patternfly-3/.eslintrc.js (56%)
 rename .stylelintrc => packages/patternfly-3/.stylelintrc (100%)
 create mode 100644 packages/patternfly-3/README.md
 create mode 100644 packages/patternfly-3/package.json
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/.babelrc
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/less/catalog-item.less
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/less/properties-side-panel.less
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-item.scss
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_properties-side-panel.scss
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.stories.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.test.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/__images__/nginx.png
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.js.snap
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/index.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertiesSIdePanel.test.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertiesSidePanel.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertyItem.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertySidePanel.stories.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/__snapshots__/PropertiesSIdePanel.test.js.snap
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/index.js
 create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridCol.js
 create mode 100644 packages/patternfly-3/patternfly-react/.babelrc
 create mode 100644 packages/patternfly-3/patternfly-react/CONTRIBUTING.md
 create mode 100644 packages/patternfly-3/patternfly-react/less/modeless-overlay.less
 create mode 100644 packages/patternfly-3/patternfly-react/sass/patternfly-react/_modeless-overlay.scss
 create mode 100644 packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModelessOverlay.js
 create mode 100644 packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModelessOverlay.test.js
 create mode 100644 packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModlessOverlay.stories.js
 create mode 100644 packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__mocks__/mockModelessManager.js
 create mode 100644 packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__snapshots__/ModelessOverlay.test.js.snap
 create mode 100644 packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/index.js
 create mode 100644 packages/patternfly-3/react-console/.babelrc
 rename .babelrc.js => packages/patternfly-4/.babelrc.js (77%)
 create mode 100644 packages/patternfly-4/.eslintignore
 create mode 100644 packages/patternfly-4/.eslintrc.js
 create mode 100644 packages/patternfly-4/.stylelintrc
 create mode 100644 packages/patternfly-4/README.md
 create mode 100644 packages/patternfly-4/package.json
 create mode 100644 packages/patternfly-4/react-core/scripts/copyTS.js
 rename packages/patternfly-4/{react-docs/src/assets => react-core/src/components/Avatar/examples}/img_avatar.png (100%)
 create mode 100644 packages/patternfly-4/react-core/src/components/Avatar/index.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/Brand.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/Brand.docs.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/Brand.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/Brand.test.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/__snapshots__/Brand.test.js.snap
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/examples/pf_logo.svg
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/index.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Brand/index.js
 create mode 100644 packages/patternfly-4/react-core/src/components/List/List.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/List/List.docs.js
 create mode 100644 packages/patternfly-4/react-core/src/components/List/List.js
 create mode 100644 packages/patternfly-4/react-core/src/components/List/List.test.js
 create mode 100644 packages/patternfly-4/react-core/src/components/List/ListItem.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/List/ListItem.js
 create mode 100644 packages/patternfly-4/react-core/src/components/List/__snapshots__/List.test.js.snap
 create mode 100644 packages/patternfly-4/react-core/src/components/List/examples/GridList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/List/examples/InlineList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/List/examples/SimpleList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/List/index.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/List/index.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/Nav.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/Nav.docs.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/Nav.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/Nav.test.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavExpandable.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavExpandable.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavGroup.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavGroup.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavItem.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavItem.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavList.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavToggle.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavVariants.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/NavVariants.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.js.snap
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavDefaultList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableTitlesList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavGroupedList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavHorizontalList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavMixedList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavSimpleList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/examples/NavTertiaryList.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/index.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Nav/index.js
 create mode 100644 packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/TextArea/index.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/TextInput/TextInput.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/TextInput/index.d.ts
 create mode 100644 packages/patternfly-4/react-docs/.env.development
 create mode 100644 packages/patternfly-4/react-docs/.env.production
 create mode 100644 packages/patternfly-4/react-docs/.gitignore
 delete mode 100644 packages/patternfly-4/react-docs/gatsby-ssr.js
 create mode 100644 packages/patternfly-4/react-docs/src/components/example/liveDemo.js
 create mode 100644 packages/patternfly-4/verifyCoreVersions.js
 create mode 100644 packages/react-icons/.babelrc
 create mode 100644 packages/react-icons/scripts/copyTS.js
 delete mode 100644 scripts/copyTS.js
 delete mode 100644 scripts/getGlobPackages.js

diff --git a/.babelrc b/.babelrc
index c268c77e731..ec6da7006b9 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["./.babelrc.js"]
+  "presets": ["./packages/patternfly-3/.babelrc.js"]
 }
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 4ffca2fad32..00000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,6 +0,0 @@
-node_modules
-dist
-public
-scripts/generators/*/templates/*
-packages/react-icons/src/icons/
-packages/react-icons/src/index.js
\ No newline at end of file
diff --git a/.public/index.html b/.public/index.html
new file mode 100644
index 00000000000..b7ea89486ae
--- /dev/null
+++ b/.public/index.html
@@ -0,0 +1,55 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="https://pf-next.com/styles.css" type="text/css">
+    </head>
+    <body>
+        <div class="pf-c-background-image">
+        </div>
+        <div class="pf-l-page" id="page">
+            <header role="banner" class="pf-l-page__header">
+                <div class="pf-l-page__header-brand">
+                    <div class="pf-l-page__header-brand-toggle">
+                        <button class="pf-c-button pf-m-plain" id="nav-toggle" aria-label="Toggle primary navigation">
+                            <i class="fas fa-bars"></i>
+                        </button>
+                    </div>
+                    <a class="pf-l-page__header-brand-link" href="#">
+                        <img class="pf-c-brand pf-m-sm" src="http://www.pf-next.com/assets/images/l_pf-reverse-164x11.png" alt="Patternfly Logo">
+                    </a>
+                </div>
+                <div class="pf-l-page__header-tools">
+                    <div class="pf-l-toolbar">
+                    </div>
+                </div>
+            </header>
+            <main role="main" class="pf-l-page__main">
+                <section class="pf-l-page__main-section pf-m-light">
+                    <div class="pf-c-content ">
+                        <h1>Welcome to PatternFly React</h1>
+                        <p>
+                            Demo applications for pull request testing are available below.
+                        </p>
+                    </div>
+                </section>
+                <section class="pf-l-page__main-section">
+                    <div class="pf-l-gallery pf-m-gutter">
+                        <div class="pf-l-gallery__item">
+                            <div class="pf-c-card ">
+                                <div class="pf-c-card__body ">
+                                    <a href="patternfly-3/index.html">PatternFly-3 React</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="pf-l-gallery__item">
+                            <div class="pf-c-card ">
+                                <div class="pf-c-card__body ">
+                                    <a href="patternfly-4/index.html">PatternFly-4 React</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 82c26c438f3..d65d8f886d4 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,6 +11,7 @@ env:
 notifications:
   email: false
 before_install:
+- npm install --global surge
 - .travis/before_install.sh
 - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.7.0
 - export PATH=$HOME/.yarn/bin:$PATH
@@ -22,6 +23,8 @@ script:
 after_success:
 - .travis/after_success.sh
 - .travis/release.sh
+- chmod ugo+x ./.travis/deploy_pr.sh
+- .travis/deploy_pr.sh
 git:
   depth: 1
 branches:
diff --git a/.travis/deploy_pr.sh b/.travis/deploy_pr.sh
new file mode 100644
index 00000000000..f08c079e469
--- /dev/null
+++ b/.travis/deploy_pr.sh
@@ -0,0 +1,66 @@
+#!/bin/bash
+# Split on "/", ref: http://stackoverflow.com/a/5257398/689223
+REPO_SLUG_ARRAY=(${TRAVIS_REPO_SLUG//\// })
+echo 'Slug array: ' ${REPO_SLUG_ARRAY}
+REPO_OWNER=${REPO_SLUG_ARRAY[0]}
+REPO_NAME=${REPO_SLUG_ARRAY[1]}
+DEPLOY_PATH=./.public
+
+if [ "$TRAVIS_PULL_REQUEST" != "false" ]
+then
+  yarn storybook:build
+  yarn build:prdocs
+  cp -r .out/ .public/patternfly-3
+  cp -r packages/patternfly-4/react-docs/public .public/patternfly-4
+fi
+
+DEPLOY_SUBDOMAIN_UNFORMATTED_LIST=()
+if [ "$TRAVIS_PULL_REQUEST" != "false" ]
+then
+  DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(${TRAVIS_PULL_REQUEST}-pr)
+elif [ -n "${TRAVIS_TAG// }" ] #TAG is not empty
+then
+  #sorts the tags and picks the latest
+  #sort -V does not work on the travis machine
+  #sort -V              ref: http://stackoverflow.com/a/14273595/689223
+  #sort -t ...          ref: http://stackoverflow.com/a/4495368/689223
+  #reverse with sed     ref: http://stackoverflow.com/a/744093/689223
+  #git tags | ignore release candidates | sort versions | reverse | pick first line
+  LATEST_TAG=`git tag | grep -v rc | sort -t. -k 1,1n -k 2,2n -k 3,3n -k 4,4n | sed '1!G;h;$!d' | sed -n 1p`
+  echo $LATEST_TAG
+  if [ "$TRAVIS_TAG" == "$LATEST_TAG" ]
+  then
+    DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(latest)
+  fi
+  DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(${TRAVIS_TAG}-tag)
+else
+  DEPLOY_SUBDOMAIN_UNFORMATTED_LIST+=(${TRAVIS_BRANCH}-branch)
+fi
+
+
+for DEPLOY_SUBDOMAIN_UNFORMATTED in "${DEPLOY_SUBDOMAIN_UNFORMATTED_LIST[@]}"
+do
+  echo $DEPLOY_SUBDOMAIN_UNFORMATTED
+  # replaces "/" or "." with "-"
+  # sed -r is only supported in linux, ref http://stackoverflow.com/a/2871217/689223
+  # Domain names follow the RFC1123 spec [a-Z] [0-9] [-]
+  # The length is limited to 253 characters
+  # https://en.wikipedia.org/wiki/Domain_Name_System#Domain_name_syntax
+  DEPLOY_SUBDOMAIN=`echo "$DEPLOY_SUBDOMAIN_UNFORMATTED" | sed -r 's/[\/|\.]+/\-/g'`
+  DEPLOY_DOMAIN=https://${DEPLOY_SUBDOMAIN}-${REPO_NAME}-${REPO_OWNER}.surge.sh
+  echo 'Deploy domain variable: ' ${DEPLOY_DOMAIN}
+  export SURGE_TOKEN=`echo $SURGE_ENC | rev | base64 --decode`
+  ALREADY_DEPLOYED=`surge list | grep ${DEPLOY_SUBDOMAIN}-${REPO_NAME}-${REPO_OWNER}`
+  PR_TOKEN=`echo $GITHUB_PR_TOKEN | rev | base64 --decode`
+  GITHUB_PR_COMMENTS=https://api.github.com/repos/${TRAVIS_REPO_SLUG}/issues/${TRAVIS_PULL_REQUEST}/comments
+  surge --project ${DEPLOY_PATH} --domain $DEPLOY_DOMAIN;
+
+  if [ "$TRAVIS_PULL_REQUEST" != "false" ] && [ -z "${ALREADY_DEPLOYED// }" ]
+  then
+    echo 'Adding github PR comment'
+    # Using the Issues api instead of the PR api
+    # Done so because every PR is an issue, and the issues api allows to post general comments,
+    # while the PR api requires that comments are made to specific files and specific commits
+    curl -H "Authorization: token ${PR_TOKEN}" --request POST ${GITHUB_PR_COMMENTS} --data '{"body":"PatternFly documentation deployment: '${DEPLOY_DOMAIN}'"}'
+  fi
+done
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7be28deb1d5..9aa9f842ebf 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,8 @@
 # Contributing to PatternFly React
 
-> ## Looking for PatternFly 4 React Contribution Guide? [Go Here](./packages/react-core/CONTRIBUTING.md)
+> ### Looking for a quick guide to PatternFly 3 React Contribution? [Go Here](./packages/patternfly-3/patternfly-react/CONTRIBUTING.md)
+>
+> ### Looking for a quick guide to PatternFly 4 React Contribution? [Go Here](./packages/patternfly-4/react-core/CONTRIBUTING.md)
 
 ## Outline
 
@@ -120,7 +122,7 @@ Inside the package directory:
 
 ### Using Generators
 
-To make contributing components and packages easier a generator utilty has been provided.
+To make contributing components and packages easier a generator utility has been provided.
 
 To start the generator run:
 
@@ -145,9 +147,10 @@ Please ensure that all React UI components contributed meet the following guidel
 - This repository serves as a UI / presentational component library only. This means we should not be introducing container components which subscribe to state updates or handle data fetching (i.e. redux aware components). Prefer [stateless functional components](http://buildwithreact.com/article/stateless-functional-components)
   when possible and accept [props](https://facebook.github.io/react/docs/components-and-props.html) as UI display parameters.
 - Provide a [single default export](http://exploringjs.com/es6/ch_modules.html#_single-default-export) for exporting your React UI component as an ES6 Module in your component's jsx definition.
-- Provide an associated `.stories.js` [story](https://getstorybook.io/docs/react-storybook/basics/writing-stories) for your component. Stories should demonstrate as many different UI states for your component as possible. Use Storybook [knobs](https://github.com/storybooks/storybook-addon-knobs) to enable dynamic visualizations of your component's props.
+- For PatternFly 3 components, provide an associated `.stories.js` [story](https://getstorybook.io/docs/react-storybook/basics/writing-stories) for your component. Stories should demonstrate as many different UI states for your component as possible. Use Storybook [knobs](https://github.com/storybooks/storybook-addon-knobs) to enable dynamic visualizations of your component's props.
+  For PatternFly 4 components, provide associated examples for documentation in the examples directory for the component.
 - Provide a [jest snapshot test](https://facebook.github.io/jest/docs/snapshot-testing.html) to ensure your UI markup does not change unexpectedly.
-- Ensure the component's rendered design and Storybook stories meet [PatternFly design standard](https://github.com/patternfly/patternfly-design).
+- Ensure the component's rendered design and Storybook stories for PatternFly 3 or Documentation examples for PatternFly 4 meet [PatternFly design standard](https://github.com/patternfly/patternfly-design).
   **Note:** If your component does not yet have PatternFly design documentation, the PatternFly React design team will first confirm that the pattern passes the [PatternFly Decision Tree](https://github.com/patternfly/patternfly-design/blob/master/resources/decision-tree/PatternflyDecisionTree.pdf) and then start the process for generating design documentation.
 - Ensure the code is properly formatted and there are no linting errors. PatternFly React uses custom eslint configuration based on [Javascript Standard Style](https://standardjs.com/) and [Prettier](https://github.com/prettier/prettier) for code formatting. You can automatically format your code with `yarn prettier` and run the project's linter with `yarn lint`.
 
@@ -164,10 +167,14 @@ Please ensure that all React UI components contributed meet the following guidel
 - Always prefer **default imports** between components in the same folder
 - Components that are not getting exported (to consumers) from
   the `index.js` file should be in a subfolder named `InnerComponents`
-- Storybooks
+- Storybooks for PatternFly 3
   - Provide a storybook with your component named on the parent component with a `.stories.js` suffix (e.g., `ListGroup.stories.js`)
   - When your stories contain multiple files, put them in a subfolder named `Stories`
   - `src/**/*.stories.js` and `src/**/Stories/` are excluded from the package build output
+- Documentation for PatternFly 4
+  - Provide documentation for your component with examples in the component's example directory. examples (e.g `Listgroup/examples/SimpleListGroup.js`)
+  - All examples should be added to the component's documentation file (`ComponentName.docs.js`) exports.
+    See the getting started guide for more information on [Adding documentation](./GETTING-STARTED.md#adding-component-documentation)
 - When writing a component and you want to use the classnames package, be sure to import and name it `classNames`. For example - `import classNames from 'classnames'`
 - When destructuring or spreading expressions , use ...props as the variable name.
 - Exporting components from other libraries (without manipulating them)
@@ -185,6 +192,8 @@ Please ensure that all React UI components contributed meet the following guidel
   export * from './Badge';
   ```
 
+  **Please see the [Getting Started Readme](./GETTING-STARTED.md) for additional information in getting started with building PatterFly 4 react components.**
+
 ### Code Contribution Guidelines
 
 Adhering to the following process is the best way to get your work included in the project:
@@ -206,7 +215,33 @@ git remote add upstream https://github.com/patternfly/patternfly-react.git
 $ git checkout -b my-branch -t upstream/master
 ```
 
-3.  Develop your component. After development is complete, ensure tests and lint standards pass.
+3. Generate your Component
+
+```bash
+# Run the tool to Generate the component scaffolding
+ yarn generate
+```
+
+- When you select the option to generate a PatternFly 3 component, a structure resembling the following is generated
+  ```text
+  packages/patternfly-3/patternfly-react/src/components/[ComponentName]/
+    index.js - Barrel File exporting public exports
+    ComponentName.js - Component Implementation
+    ComponentName.test.js - Component Tests
+    ComponentName.stories.js - Component Stories
+  ```
+- When you select the option to generate a PatternFly 4 component, a structure resembling the following is generated
+  ```text
+  packages/patternfly-4/react-core/src/[type]/[ComponentName]/
+    index.js - Barrel File exporting public exports
+    ComponentName.js - Component Implementation
+    ComponentName.test.js - Component Tests
+    ComponentName.docs.js - Component Docs
+    examples/ - dir for all examples
+        SimpleComp
+  ```
+
+4.  Develop your component. After development is complete, ensure tests and lint standards pass.
 
 ```text
 $ yarn test
@@ -214,7 +249,7 @@ $ yarn test
 
 Ensure no lint errors are introduced in `yarn-error.log` after running this command.
 
-4.  Add a commit using `yarn commit`:
+5.  Add a commit using `yarn commit`:
 
 This project uses [`semantic-release`](https://npmjs.com/package/semantic-release) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow this convention for your commit messages.
 
@@ -229,7 +264,7 @@ $ yarn commit
 
 ... and follow the instruction of the interactive prompt.
 
-5.  Rebase
+6.  Rebase
 
 Use `git rebase` (not `git merge`) to sync your work from time to time. Ensure all commits related to a single issue have been [squashed](https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit).
 
@@ -238,29 +273,30 @@ $ git fetch upstream
 $ git rebase upstream/master
 ```
 
-6.  Push
+7.  Push
 
 ```text
 $ git push origin my-branch
 ```
 
-7.  Export Storybook
+8.  Create a Demo Storybook
 
-Lastly, you'll want to export Storybook in your fork and note the Storybook url generated.
+    - For PatternFly 4, you can build and deploy the demo documentation to any hosting site of your choice.
 
-```text
-$ yarn storybook:build
-$ yarn storybook:deploy
-```
+    - For PatternFly 3, you'll want to export Storybook in your fork and note the Storybook url generated.
+      ```text
+      $ yarn storybook:build
+      $ yarn storybook:deploy
+      ```
 
-8.  Create a Pull Request
+9.  Create a Pull Request
 
 [Open a pull request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `master` branch. Please be sure to include all of the following in your PR:
 
 - Any relevant issues associated with this pull request (`enhancement` issues, `bug` issues, etc.)
-- Storybook documentation
+- Storybook and Documentation
   - Include a link to the design documentation in the [PatternFly Pattern Library](http://www.patternfly.org/pattern-library/) if it exists. If a PatternFly design does not exist yet, then provide a description that explains when the component would be used and what goal or task it helps to accomplish.
-  - Include the generated Storybook url (from **Step 7**)
+  - for PatternFly 3, include the generated Storybook url. For for PatternFly 4, include the url for the deployed documentation. (from **Step 8**)
 
 Once your pull request has been reviewed, if all conditions above have been met your pull request will be approved and merged.
 
diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md
new file mode 100644
index 00000000000..48509a8d795
--- /dev/null
+++ b/GETTING-STARTED.md
@@ -0,0 +1,328 @@
+# PatternFly React Getting Started
+
+This README is intended to further detail some of the steps mentioned in the PatternFly React [Contributing Guide](./CONTRIBUTING.md#code-consistency) and help new contributors getting started with PatternFly React.
+
+## Learning React
+
+If you haven't already, we highly recommend taking a look at the [React Documentation site](https://reactjs.org/). This contains up to date information on React from the project's core maintainers at Facebook.
+
+We also have a few documents started on this subject with some helpful links and descriptions that might help you learn React. Feel free to add your own docs and helpful links here!
+
+- [Getting Started w/ React](https://gist.github.com/priley86/770aaf64ccca5bdfdb4beee208956f7b) by Patrick Riley
+
+## Storybook
+
+PatternFly 3 React uses React Storybook to demonstrate React UI components and patterns. You can read more about Storybook UI Development in the [Readme](https://github.com/patternfly/patternfly-react#storybook-ui-development).
+
+After you have written your new PatternFly component, tests, and Storybook stories, please publish your Storybook for others to review it.
+
+## PatternFly React Doc
+
+PatternFly 4 React uses Gatsby. Examples are created toe demonstrate of the use of the React components. Documents are generated from these examples.
+
+### Adding Component Documentation
+
+Component Documentation has two parts. a `[Component].docs.js` file, and files under `[Component]/examples/`. Each file must follow a few guidelines for them to be consumed properly by the docs website.
+
+The `docs.js` file has the following structure
+
+```js
+import SimpleExample from './examples/SimpleComponent';
+import { Component, ComponentSize } from '@patternfly/react-core'; // only @patternfly/react-* imports are allowed
+
+export default {
+  title: 'Component', // Title to display at the top of the docs page
+  description: 'description', // Opening description for the component
+  components: {
+    Component: Component // Key value pair for components to include prop documentation
+  },
+  enumValues: {
+    // Optional
+    ComponentSize: Object.values(ComponentSize) // key value pair for any enums that cannot be statically analyzed.
+  },
+  examples: [SimpleExample] // Array of examples to include on the page.  They must be stored under /examples/
+};
+```
+
+An example file has the following structure
+
+```jsx
+import React from 'react';
+import { Component } from '@patternfly/react-core'; // only @patternfly/react-* imports are allowed
+import something from './common/something'; // any directory under examples/ is ignored in page generation.
+import styles from './Example.styles.js'; // any .styles.js file under examples/ is ignored in page generation
+
+// note: this can be a function too with the title, etc, set similar to setting Component.propTypes
+class Example extends React.Component {
+  static title = 'Simple Example'; // Sets the examples title
+  static description = 'description'; // Optional: Extra description for the example
+  static getContainerProps = () => ({
+    // Optional: Adds any extra props to the container.  Useful for example specific styles
+    style: styles
+  });
+
+  render() {
+    return <Component />;
+  }
+}
+
+export default Example;
+```
+
+Some things to keep in mind when writing examples:
+
+1. Keep them simple. It is much easier for a person to understand what is going on.
+1. Do not do any iteration of variants, sizes, etc in the render. This is easier for the developer, but it makes it much harder to reason for the consumer.
+1. Keep anything you think is useful inside this file. The source view (coming soon) will only include the source of the example. If everything is broken out it will not be useful to the consumer. Remember, you are writing examples not a super optimized application.
+1. Try not to add extra external dependencies. These will only be approved on a case by case basis.
+
+## Testing
+
+PatternFly React currently uses [Jest](https://facebook.github.io/jest/) for running snapshot tests. In the future, we will also use Airbnb's [Enzyme](http://airbnb.io/enzyme/) library. More to come soon on this topic ;-)
+
+## Code Conventions
+
+This section is meant to further detail some of the conventions mentioned in the Code Consistency section of the [Contributing Guide](https://github.com/patternfly/patternfly-react/blob/master/CONTRIBUTING.md#code-consistency).
+
+PatternFly React currently uses the [Standard Javascript Style](https://standardjs.com/) and [Airbnb Style Guide](https://github.com/airbnb/javascript) rule conventions for Javascript. We've tailored many of these rules to help keep the code consistent and help ensure our continuous integration system can test rules when a pull request is opened. We've also ensured these rules work in conjunction with our auto formatter, [Prettier](https://prettier.io/).
+
+A good percentage of the javascript rules mentioned will be automatically fixed by Prettier, so it is important to use Prettier when contributing to PatternFly React.
+
+### Prettier
+
+You can run the Prettier auto formatter in a few ways:
+
+- Use your IDE and auto-format the code on save. This will likely be the most reliable option if you want immediate feedback on what the code will look like after it has been formatted as you develop. Prettier supports all of the most popular IDEs in use today. Find your IDE and install the plugin from the list of editors Prettier supports [here](https://prettier.io/docs/en/editors.html).
+  - Note: if you are using VSCode, we have the settings currently checked in to the project (so you will get those automatically). You can view all code formatting errors in the "Output" console of VSCode as you save and format files.
+- Run the command:
+  - You can simply run `npm run prettier` and all code will be formatted.
+
+The following is a breakdown of many of the Javascript rules implemented (beyond formatting rules fixed by Prettier) and how you can go about fixing them. You can find the most up to date settings on these rules in PatternFly React's [eslintrc](https://github.com/patternfly/patternfly-react/blob/master/.eslintrc).
+
+### Eslint Rules
+
+The following are a few of the most common lint rule issues you may encounter in PatternFly React. These notes are meant to help beginners. As always, consult the latest documentation when addressing these rules.
+
+#### React Rules
+
+**react/prefer-stateless-function**
+
+First and foremost, please try to ensure all React components are stateless when possible (i.e. a component should be stateless if it does not use `this.state` or the `this` keyword). Stateless components optimize the rendering path, ensure modular design, promote good test coverage, and ensure good separation of concerns ([read more](https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc) on why stateless components are preferred). When possible, you should always "[lift state](https://reactjs.org/docs/lifting-state-up.html)" to the closest common ancestor. This is a core tenant of React and ensures a reduced surface area for bugs.
+
+Example bad:
+
+```
+class ComponentA extends React.Component {
+  render(){
+    const {name} = this.props;
+	return (<p> Hello {name}, you are Stateful!</p>)
+  }
+}
+```
+
+Example good:
+
+```
+const ComponentA = ({name, ...props}) => (
+  <p {...props}> Hello {name}, you are Stateless!</p>
+)
+```
+
+See the following [eslint rule](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) for more details.
+
+**react/require-default-props**
+
+This lint rule indicates you have left out a default prop. All `propTypes` which are not marked `isRequired` should have a corresponding `defaultProp`.
+
+Example bad (missing defaults):
+
+```
+DropdownKebab.propTypes  = {
+/** additional kebab dropdown classes */
+className:  PropTypes.string,
+/** children nodes */
+children:  PropTypes.node,
+/** kebab dropdown id */
+id:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+/** menu right aligned */
+pullRight:  PropTypes.bool,
+/** dropdown component class */
+componentClass:  PropTypes.func,
+/** toggle style */
+toggleStyle:  PropTypes.string
+};
+```
+
+Example good (with defaults for all non-required props):
+
+```
+DropdownKebab.propTypes  = {
+/** additional kebab dropdown classes */
+className:  PropTypes.string,
+/** children nodes */
+children:  PropTypes.node,
+/** kebab dropdown id */
+id:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+/** menu right aligned */
+pullRight:  PropTypes.bool,
+/** dropdown component class */
+componentClass:  PropTypes.func,
+/** toggle style */
+toggleStyle:  PropTypes.string
+};
+
+DropdownKebab.defaultProps  = {
+className:  '',
+children:  null,
+pullRight:  false,
+componentClass:  ButtonGroup,
+toggleStyle:  'link'
+};
+```
+
+See the following [eslint rule](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md) for more details.
+
+#### Eslint Rules
+
+**one-var**
+
+All `let`, `const` variables should be declared on separate lines:
+
+Example bad:
+
+```
+let updatedSelectedRows, updatedRow;
+```
+
+Example good:
+
+```
+let updatedSelectedRows;
+let updatedRow;
+```
+
+See the following [eslint rule](https://eslint.org/docs/rules/one-var) for more details.
+
+**import/first**
+
+Absolute imports should come before relative imports.
+
+Example bad:
+
+```
+import { bindMethods } from  '../../../common/helpers';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+```
+
+Example good:
+
+```
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { bindMethods } from  '../../../common/helpers';
+```
+
+See the following [eslint rule](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md) for more details.
+
+**prefer-destructuring**
+
+ES6 gives us the ability to [destructure assignments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). Please prefer destructuring when possible.
+
+Example bad:
+
+```
+const checked = event.target.checked;
+```
+
+Example good:
+
+```
+const { checked } =  event.target;
+```
+
+See the following [eslint rule](https://eslint.org/docs/rules/prefer-destructuring) for more details.
+
+**class-methods-use-this**
+
+This rule fails when you have a class method that does not use `this` and should be marked static. All class methods should be bound to the class and use `this`.
+
+Example bad:
+
+```
+class MockServerApi extends React.Component {
+  toggleRow(row) {
+    return  Object.assign({}, row, { selected:  !row.selected });
+  }
+  selectRow({row}){
+    this.mockRows[index] = this.toggleRow(this.mockRows[index]);
+  }
+}
+```
+
+Example good:
+
+```
+class MockServerApi extends React.Component {
+  static toggleRow(row) {
+    return  Object.assign({}, row, { selected:  !row.selected });
+  }
+  selectRow({row}){
+    this.mockRows[index] = MockServerApi.toggleRow(this.mockRows[index]);
+  }
+}
+```
+
+See the following [eslint rule](https://eslint.org/docs/rules/class-methods-use-this) for more details.
+
+**consistent-return**
+
+All functions should consistently return a value (both JSX and non JSX functions).
+
+Example bad:
+
+```
+<Table.Body onRow={(row, { rowIndex }) => {
+	switch (rowIndex) {
+	  case 0:
+	    return { className: 'active' };
+	  case 2:
+	    return { className: 'success' };
+}} />
+```
+
+Example good:
+
+```
+<Table.Body onRow={(row, { rowIndex }) => {
+	switch (rowIndex) {
+	  case 0:
+	    return { className: 'active' };
+	  case 2:
+	    return { className: 'success' };
+	  default:
+	    return null;
+}} />
+```
+
+Note: You may also frequently see this rule fail when iterating with `map`. Ensure your `map` callback function returns a value.
+
+See the following [eslint rule](https://eslint.org/docs/rules/consistent-return) for more details.
+
+**no-restricted-globals**
+
+Example bad:
+
+```
+!isNaN(value)
+```
+
+Example good:
+
+```
+!Number.isNaN(value)
+```
+
+See the following [eslint rule](https://eslint.org/docs/rules/no-restricted-globals) for more details.
diff --git a/README.md b/README.md
index 9257b293ad8..fe2c7696225 100644
--- a/README.md
+++ b/README.md
@@ -10,73 +10,19 @@ This project will provide a set of React UI components for the [PatternFly proje
 
 ## Getting Started
 
-First, add `patternfly-react` dependency to your project. If you use Yarn:
+[Getting Started with PatternFly 3](./packages/patternfly-3/patternfly-react/README.md)
 
-```
-yarn add patternfly-react
-```
+[Getting Started with PatternFly 4](./packages/patternfly-4/react-core/README.md)
 
-Alternatively, if you use npm:
+## Contributing to PatternFly React
 
-```
-npm install --save patternfly-react
-```
+### Code of Conduct
 
-Then import PatternFly React UI modules as ES6 modules:
+This project is governed by the Contributor Covenant version 1.4. All contributors and participants agree to abide by its terms. To report violations, send an email to patternfly@redhat.com.
 
-```
-import { Alert } from 'patternfly-react'
-```
+### Contributing Guide
 
-## Using patterfly-react Sass files
-
-As an alernative to consuming the `patternfly-react.css` file (found in `dist/css`), you can build patternfly-react styles into your css by including the Sass partials from `dist/sass`. The partial `_patternfly-react.scss` will pull in all the partials required for the patternfly-react components. When using the patternfly-react Sass files, you **MUST** include bootstrap and patternfly variables and mixins. An example of the required imports can be found in [patternfly-react.scss](./packages/patternfly-3/patternfly-react/sass/patternfly-react.scss).
-
-## Node Environment
-
-This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
-
-For example, to develop with Node 8, use the following:
-
-```
-nvm install 8
-nvm use 8
-```
-
-This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).
-
-## Storybook UI Development
-
-This project uses [React Storybook](https://storybook.js.org/) to test and demo new React UI components. You can view our current storybook [here](https://rawgit.com/patternfly/patternfly-react/gh-pages/index.html).
-
-How to use Storybook locally:
-
-```
-yarn install
-yarn start
-```
-
-How to deploy storybook to github pages in your fork:
-
-```
-yarn storybook:build
-yarn storybook:deploy
-```
-
-To deploy Storybook to a remote other than `origin`, pass a `--remote` flag to `yarn storybook:deploy`.
-For example, to deploy to your `upstream` remote:
-
-```
-yarn storybook:deploy --remote=upstream
-```
-
-To deploy Storybook to a target branch and serve with rawgit instead of gh-pages, pass `--branch` flag to `yarn storybook:deploy`. This will create a new branch to serve your Storybook (and will be useful if you have multiple open pull requests).
-
-For example, say you have `feature-branch`, you can deploy the storybook to a rawgit branch with:
-
-```
-yarn storybook:deploy --branch=feature-branch-storybook
-```
+If you are interested in contributing to PatternFly React, please see the [Contributing Guide](https://github.com/patternfly/patternfly-react/blob/master/CONTRIBUTING.md).
 
 ## Meeting Notes
 
diff --git a/package.json b/package.json
index da6114faaff..35a23c21d36 100644
--- a/package.json
+++ b/package.json
@@ -23,64 +23,24 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "devDependencies": {
-    "@storybook/addon-actions": "^v3.4.0",
-    "@storybook/addon-info": "^v3.4.0",
-    "@storybook/addon-knobs": "^v3.4.0",
-    "@storybook/addon-links": "^v3.4.0",
-    "@storybook/addon-options": "^v3.4.0",
-    "@storybook/addon-storysource": "^v3.4.0",
-    "@storybook/addon-viewport": "^3.3.15",
-    "@storybook/react": "^v3.4.0",
-    "@storybook/storybook-deployer": "^2.1.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
     "change-case": "^3.0.2",
     "commitizen": "^2.9.6",
     "concurrently": "^3.5.1",
     "coveralls": "^3.0.0",
     "cross-env": "^5.1.4",
-    "css-loader": "^0.28.11",
     "cz-lerna-changelog": "^1.2.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.3",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-config-standard-jsx": "^4.0.2",
-    "eslint-config-standard-react": "^5.0.0",
-    "eslint-import-resolver-webpack": "^0.9.0",
-    "eslint-plugin-import": "^2.10.0",
-    "eslint-plugin-jest": "^21.15.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-node": "^5.2.1",
-    "eslint-plugin-patternfly-react": "*",
-    "eslint-plugin-prettier": "^2.4.0",
-    "eslint-plugin-promise": "^3.7.0",
-    "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-standard": "^3.0.1",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "husky": "^0.14.3",
     "istanbul-api": "1.3.1",
     "istanbul-reports": "1.3.0",
-    "jest": "^22.4.3",
-    "jest-cli": "^22.4.3",
+    "jest": "^23.6.0",
+    "jest-cli": "^23.6.0",
     "lerna": "^2.11.0",
     "lerna-semantic-release": "^9.1.0",
-    "lint-staged": "^7.0.4",
-    "lodash": "^4.17.0",
-    "mutation-observer": "^1.0.3",
-    "node-sass": "^4.8.3",
     "npmlog": "^4.1.2",
     "plop": "^2.0.0",
     "prettier": "^1.14.2",
@@ -90,11 +50,7 @@
     "react": "^16.3.0",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.3.0",
-    "sass-loader": "^6.0.6",
     "semantic-release": "^15.0.0",
-    "style-loader": "^0.20.3",
-    "stylelint": "^8.4.0",
-    "stylelint-config-standard": "^18.2.0",
     "travis-deploy-once": "^4.4.1"
   },
   "sassIncludes": {
@@ -104,14 +60,9 @@
   },
   "scripts": {
     "bootstrap": "lerna bootstrap",
-    "build": "yarn clean:build && lerna run prebuild && yarn build:babel && yarn build:ts && yarn build:tokens && lerna run postbuild",
-    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs lerna exec --stream --ignore \"$(node ./scripts/getGlobPackages.js babel)\" --  babel src --out-dir dist/js",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm lerna exec --stream --ignore \"$(node ./scripts/getGlobPackages.js babel)\" -- babel src --out-dir dist/esm",
-    "build:docs": "yarn build && lerna run build --scope=@patternfly/react-docs --stream",
-    "build:tokens": "lerna run build --scope=@patternfly/react-tokens --stream",
-    "build:icons": "lerna run prebuild --scope=@patternfly/react-icons --stream",
-    "build:ts": "node ./scripts/copyTS.js",
+    "build": "yarn clean:build && lerna run prebuild --parallel && lerna run build --parallel && lerna run postbuild",
+    "build:docs": "yarn build && lerna run docbuild --scope=@patternfly/react-docs --stream",
+    "build:prdocs": "lerna run pr-build --scope=@patternfly/react-docs --stream",
     "clean": "yarn clean:build",
     "clean:build": "rm -rf packages/*/dist && rm -rf packages/patternfly-?/*/dist",
     "commit": "git-cz",
@@ -119,21 +70,18 @@
     "generate": "yarn plop",
     "lerna-semantic-release": "lerna-semantic-release",
     "lerna": "lerna",
-    "lint": "yarn lint:js && yarn lint:styles",
-    "lint:fix": "yarn lint:js --fix && yarn lint:styles --fix",
-    "lint:js": "eslint --max-warnings 0 packages storybook scripts",
-    "lint:styles": "yarn stylelint",
-    "precommit": "lint-staged",
+    "lint": "lerna run lint --parallel",
+    "lint:fix": "lerna run lint:fix --parallel",
     "prettier": "prettier --write 'storybook/**/*.js' 'packages/**/*.js' 'scripts/**/*.js'",
     "semantic-release": "lerna-semantic-release pre && lerna-semantic-release post && lerna-semantic-release perform",
-    "start": "concurrently \"yarn storybook:run\" \"yarn storybook:openurl\"",
-    "start:docs": "yarn build && lerna run develop --scope=@patternfly/react-docs --stream",
+    "start": "yarn start:pf3",
+    "start:pf3": "concurrently \"yarn storybook:run\" \"yarn storybook:openurl\"",
+    "start:pf4": "lerna run develop --scope=@patternfly/react-docs --stream",
     "storybook:build": "build-storybook -c storybook -o .out",
     "storybook:deploy": "storybook-to-ghpages '--script=storybook:build'",
     "storybook:openurl": "node ./storybook/openBrowser.js",
     "storybook:run": "start-storybook -c storybook -p 6006",
     "storybook": "yarn storybook:run",
-    "stylelint": "stylelint --fix 'packages/**/sass/**/*.scss' !**/dist/**/*.scss",
     "test": "yarn lint && jest",
     "test:current": "jest --watch",
     "test:watch": "jest --watchAll",
@@ -194,16 +142,7 @@
       "@patternfly/react-docs/react*"
     ]
   },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "git add"
-    ]
-  },
   "resolutions": {
     "cssom": "0.3.4"
-  },
-  "dependencies": {
-    "babel-plugin-transform-imports": "^1.5.0"
   }
 }
diff --git a/packages/README.md b/packages/README.md
new file mode 100644
index 00000000000..a041c661870
--- /dev/null
+++ b/packages/README.md
@@ -0,0 +1,21 @@
+# Packages
+
+## patternfly-3
+
+This package provides Core PatternFly React components for PatternFly 3.
+
+## patternfly-4
+
+This package provides Core PatternFly components for PatternFly 4.  
+
+## eslint-plugin-patterngly-react
+
+This package provides PatternFly React all ESLint rules bundled together for use in PatternFly React and downstream applications.
+
+## react-codemods
+
+This package contains a collection of codemod scripts for use with JSCodeshift that help update Patternfly React projects.
+
+## react-icons
+
+PatternFly 4 Icons as React Components.
diff --git a/packages/patternfly-3/.babelrc.js b/packages/patternfly-3/.babelrc.js
new file mode 100644
index 00000000000..d407a3dde0d
--- /dev/null
+++ b/packages/patternfly-3/.babelrc.js
@@ -0,0 +1,31 @@
+const babelENV = process.env.BABEL_ENV || 'development';
+const modules = babelENV !== 'production:esm' ? 'commonjs' : false;
+
+module.exports = {
+  presets: [['env', { modules }], 'react'],
+  plugins: [
+    'transform-class-properties',
+    'transform-export-extensions',
+    'transform-object-rest-spread',
+    'transform-object-assign',
+    babelENV !== 'development' && [
+      'transform-imports',
+      {
+        'react-bootstrap': {
+          preventFullImport: true,
+          transform: importName => {
+            const moduleDir = !modules ? 'es' : 'lib';
+            return `react-bootstrap/${moduleDir}/${importName}`;
+          }
+        }
+      }
+    ]
+  ].filter(Boolean),
+  ignore: (() => {
+    const ignore = ['src/**/__snapshots__', 'src/**/*.stories.js', 'src/**/Stories'];
+    if (babelENV.includes('production')) {
+      ignore.push('test.js', '__mocks__');
+    }
+    return ignore;
+  })()
+};
diff --git a/packages/patternfly-3/.eslintignore b/packages/patternfly-3/.eslintignore
new file mode 100644
index 00000000000..78599ef32c9
--- /dev/null
+++ b/packages/patternfly-3/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+public
\ No newline at end of file
diff --git a/.eslintrc.js b/packages/patternfly-3/.eslintrc.js
similarity index 56%
rename from .eslintrc.js
rename to packages/patternfly-3/.eslintrc.js
index ed68a122701..f0165576354 100644
--- a/.eslintrc.js
+++ b/packages/patternfly-3/.eslintrc.js
@@ -14,13 +14,15 @@ module.exports = {
       }
     },
     {
-      files: ['**/*.docs.js', '**/examples/**'],
+      files: ['**/*.js'],
       rules: {
-        'import/no-extraneous-dependencies': [
+        'import/no-unresolved': [
           'error',
-          // docs and examples are copied to react-docs
-          { packageDir: './packages/patternfly-4/react-docs' }
-        ]
+          {
+            ignore: ['patternfly-react']
+          }
+        ],
+        'import/extensions': 'off'
       }
     }
   ],
@@ -31,14 +33,10 @@ module.exports = {
           resolve: {
             modules: [
               path.resolve(__dirname, './'),
-              path.resolve(__dirname, './node_modules')
-            ],
-            alias: {
-              '@patternfly/react-icons': path.resolve(
-                __dirname,
-                './packages/react-icons/src'
-              )
-            }
+              path.resolve(__dirname, './node_modules'),
+              path.resolve(__dirname, '../../'),
+              path.resolve(__dirname, '../../node_modules')
+            ]
           }
         }
       }
diff --git a/.stylelintrc b/packages/patternfly-3/.stylelintrc
similarity index 100%
rename from .stylelintrc
rename to packages/patternfly-3/.stylelintrc
diff --git a/packages/patternfly-3/README.md b/packages/patternfly-3/README.md
new file mode 100644
index 00000000000..8e1bbfc2010
--- /dev/null
+++ b/packages/patternfly-3/README.md
@@ -0,0 +1,14 @@
+# Packages
+
+## patternfly-react
+
+This package provides PatternFly React components for PatternFly 3.
+
+## patternfly-react-extensions
+
+This package provides components based on PatternFly 3 which do not The yet have associated patterns found on [PatternFly.org](https://www.patternfly.org/).
+.  
+
+## @patternfly/react-console
+
+This package provides VncConsole and SerialConsole React components for Patternfly 3.
diff --git a/packages/patternfly-3/package.json b/packages/patternfly-3/package.json
new file mode 100644
index 00000000000..b262d0ce8e1
--- /dev/null
+++ b/packages/patternfly-3/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "patternfly3-react-lerna-root",
+  "version": "3.0.0",
+  "private": true,
+  "config": {
+    "access": "private"
+  },
+  "devDependencies": {
+    "@storybook/addons": "^3.3.0",
+    "@storybook/addon-actions": "^v3.4.11",
+    "@storybook/addon-info": "^v3.4.11",
+    "@storybook/addon-knobs": "^v3.4.11",
+    "@storybook/addon-links": "^v3.4.11",
+    "@storybook/addon-options": "^v3.4.11",
+    "@storybook/addon-storysource": "^v3.4.11",
+    "@storybook/addon-viewport": "^3.4.11",
+    "@storybook/react": "^v3.4.11",
+    "@storybook/storybook-deployer": "^2.1.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-imports": "^1.5.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
+    "eslint-import-resolver-webpack": "^0.9.0",
+    "eslint-plugin-patternfly-react": "*",
+    "lodash": "^4.17.0",
+    "mutation-observer": "^1.0.3",
+    "node-sass": "^4.8.3",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.20.3",
+    "stylelint": "^8.4.0",
+    "stylelint-config-standard": "^18.2.0"
+  },
+  "scripts": {
+    "lint": "yarn lint:js && yarn lint:styles",
+    "lint:fix": "yarn lint:js --fix && yarn lint:styles --fix",
+    "lint:js": "eslint --max-warnings 0 **/*.js",
+    "lint:styles": "yarn stylelint",
+    "stylelint": "stylelint '**/sass/**/*.scss' !**/dist/**/*.scss"
+  }
+}
diff --git a/packages/patternfly-3/patternfly-react-extensions/.babelrc b/packages/patternfly-3/patternfly-react-extensions/.babelrc
new file mode 100644
index 00000000000..8ade66d8e14
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["../.babelrc.js"]
+}
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/catalog-item.less b/packages/patternfly-3/patternfly-react-extensions/less/catalog-item.less
new file mode 100644
index 00000000000..78f817ae26a
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/less/catalog-item.less
@@ -0,0 +1,24 @@
+.catalog-item-header-pf {
+  display: flex;
+  align-items: center;
+}
+
+.catalog-item-header-pf-icon {
+  font-size: 60px;
+  max-height: 60px;
+  width: 60px;
+}
+
+.catalog-item-header-pf-text {
+  margin-left: 20px;
+}
+
+.catalog-item-header-pf-title {
+  font-weight: 400;
+  margin-top: 0;
+}
+
+.catalog-item-header-pf-subtitle {
+  color: @color-pf-black-500;
+  margin-bottom: 0;
+}
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less
index 304f7cefb36..766b2fe1eff 100644
--- a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less
+++ b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   height: @catalog-tile-pf-height;
-  margin: 0 20px @catalog-tile-pf-margin-bottom 0;
+  margin: 0 15px @catalog-tile-pf-margin-bottom 0;
   padding: 15px;
   width: @catalog-tile-pf-width;
 
@@ -70,11 +70,11 @@
 }
 
 .catalog-tile-view-pf-category {
-  margin: 10px 0;
+  margin: 10px 0 15px;
 }
 
 .catalog-tile-view-pf-category-header {
-  padding-right: 20px;
+  padding-right: 15px;
 }
 
 .catalog-tile-view-pf-category-header-title {
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/patternfly-react-extensions.less b/packages/patternfly-3/patternfly-react-extensions/less/patternfly-react-extensions.less
index 90fb7e1da73..66fe0fb183e 100644
--- a/packages/patternfly-3/patternfly-react-extensions/less/patternfly-react-extensions.less
+++ b/packages/patternfly-3/patternfly-react-extensions/less/patternfly-react-extensions.less
@@ -1,5 +1,7 @@
 @import 'variables';
+@import 'catalog-item';
 @import 'catalog-tile';
 @import 'filter-side-panel';
+@import 'properties-side-panel';
 @import 'table-grid';
 @import 'vertical-tabs';
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/properties-side-panel.less b/packages/patternfly-3/patternfly-react-extensions/less/properties-side-panel.less
new file mode 100644
index 00000000000..86da9fa740d
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/less/properties-side-panel.less
@@ -0,0 +1,25 @@
+.properties-side-panel-pf {
+  width: 165px;
+}
+
+.properties-side-panel-pf-property {
+  margin-top: 20px;
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.properties-side-panel-pf-property-label {
+  color: @color-pf-black-600;
+  font-weight: 300;
+  font-size: 12px;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.properties-side-panel-pf-property-value {
+  font-size: 14px;
+  margin-top: 5px;
+  word-break: break-word;
+}
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/table-grid.less b/packages/patternfly-3/patternfly-react-extensions/less/table-grid.less
index 840217de9e8..16885d898b7 100644
--- a/packages/patternfly-3/patternfly-react-extensions/less/table-grid.less
+++ b/packages/patternfly-3/patternfly-react-extensions/less/table-grid.less
@@ -7,6 +7,14 @@
     white-space: nowrap;
   }
 
+  .table-grid-pf-checkbox {
+    border-right: 1px solid @list-view-divider;
+    display: none;
+    left: 20px;
+    padding-right: 10px;
+    position: absolute;
+  }
+
   .table-grid-pf-body {
     min-height: 50px;
     position: relative;
@@ -18,7 +26,9 @@
   }
 
   .table-grid-pf-head {
+    color: @color-pf-black-600;
     font-size: 12px;
+    font-weight: 300;
     padding: 10px 0;
   }
 
@@ -28,7 +38,9 @@
     text-transform: uppercase;
 
     .btn.btn-link {
-      color: initial;
+      color: @color-pf-black-600;
+      font-size: 12px;
+      font-weight: 300;
       overflow-x: hidden;
       padding: 0;
       text-overflow: ellipsis;
@@ -59,4 +71,86 @@
       border-bottom: solid 1px #eee;
     }
   }
+
+  &.cell-select {
+    .table-grid-pf-body {
+      .row {
+        padding: 0;
+      }
+
+      .table-grid-pf-col {
+        cursor: pointer;
+        display: inline-block;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        width: 100%;
+
+        &.active {
+          background-color: @list-view-active-bg;
+        }
+
+        &:hover {
+          background-color: @list-view-hover-bg;
+        }
+      }
+    }
+  }
+
+  &.row-select {
+    .table-grid-pf-body {
+      .row {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &.checkbox-select {
+    .table-grid-pf-checkbox {
+      display: initial;
+    }
+
+    .table-grid-pf-head {
+      position: relative;
+      padding-left: 35px;
+
+      .table-grid-pf-checkbox {
+        width: 23px;
+
+        .btn {
+          color: @color-pf-blue-400;
+          font-size: 15px;
+          left: -1px;
+          line-height: 1;
+          padding: 0;
+          position: relative;
+
+          .fa.fa-square-o {
+            color: @color-pf-black-400;
+          }
+        }
+      }
+    }
+
+    .table-grid-pf-body {
+      .row {
+        position: relative;
+        padding-left: 35px;
+      }
+    }
+  }
+
+  &.row-select,
+  &.checkbox-select {
+    .table-grid-pf-body {
+      .row {
+        &.active {
+          background-color: @list-view-active-bg;
+        }
+
+        &:hover {
+          background-color: @list-view-hover-bg;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/variables.less b/packages/patternfly-3/patternfly-react-extensions/less/variables.less
index ad0c8c87744..c7b53d7e419 100644
--- a/packages/patternfly-3/patternfly-react-extensions/less/variables.less
+++ b/packages/patternfly-3/patternfly-react-extensions/less/variables.less
@@ -1,6 +1,6 @@
 @catalog-tile-pf-height:                230px;
 @catalog-tile-pf-width:                 220px;
-@catalog-tile-pf-margin-bottom:         20px;
+@catalog-tile-pf-margin-bottom:         15px;
 @catalog-tile-pf-total-height:          ~"calc(@{catalog-tile-pf-height} + @{catalog-tile-pf-margin-bottom} - 2px)";
 @vertical-tab-pf-color:                 initial;
 @vertical-tab-pf-active-color:          @color-pf-blue-400;
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less b/packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less
index 9c153ea7b71..a43443fe1f8 100644
--- a/packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less
+++ b/packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less
@@ -7,21 +7,35 @@
   margin-top: 4px;
   position: relative;
 
-  .btn.btn-link {
+  > a {
     color: @vertical-tab-pf-color;
+    display: inline-block;
     font-size: 13px;
     padding-left: 15px;
+    vertical-align: top;
+    width: 100%;
+    word-break: break-word;
 
     &:hover,
     &:focus {
       color: @vertical-tab-pf-active-color;
-      outline: 0;
       text-decoration: none;
     }
+
+    &.no-wrap {
+      overflow-x: hidden;
+      white-space: nowrap;
+    }
+
+    &.truncate {
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   &.active {
-    > .btn.btn-link {
+    > a {
       color: @vertical-tab-pf-active-color;
 
       &::before {
diff --git a/packages/patternfly-3/patternfly-react-extensions/package.json b/packages/patternfly-3/patternfly-react-extensions/package.json
index 40197536810..4cf066ee469 100644
--- a/packages/patternfly-3/patternfly-react-extensions/package.json
+++ b/packages/patternfly-3/patternfly-react-extensions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "patternfly-react-extensions",
-  "version": "2.5.0",
+  "version": "2.8.0",
   "private": false,
   "description": "This library provides an extended set of React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
@@ -30,6 +30,10 @@
   },
   "scripts": {
     "prebuild": "yarn build:sass && yarn build:less",
+    "build": "yarn build:babel",
+    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm",
     "build:less": "mkdir -p dist/less && cp -r less/* dist/less",
     "build:sass": "mkdir -p dist/sass && cp -r sass/patternfly-react-extensions/* dist/sass && node-sass --output-style compressed --include-path sass --include-path $npm_package_sassIncludes_patternfly --include-path $npm_package_sassIncludes_bootstrap --include-path $npm_package_sassIncludes_fontAwesome -o dist/css sass/patternfly-react-extensions.scss"
   },
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-item.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-item.scss
new file mode 100644
index 00000000000..179be56abf8
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-item.scss
@@ -0,0 +1,24 @@
+.catalog-item-header-pf {
+  display: flex;
+  align-items: center;
+}
+
+.catalog-item-header-pf-icon {
+  font-size: 60px;
+  max-height: 60px;
+  width: 60px;
+}
+
+.catalog-item-header-pf-text {
+  margin-left: 20px;
+}
+
+.catalog-item-header-pf-title {
+  font-weight: 400;
+  margin-top: 0;
+}
+
+.catalog-item-header-pf-subtitle {
+  color: $color-pf-black-500;
+  margin-bottom: 0;
+}
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss
index 69a05bd9c03..91849ef2f16 100644
--- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss
+++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   height: $catalog-tile-pf-height;
-  margin: 0 20px $catalog-tile-pf-margin-bottom 0;
+  margin: 0 15px $catalog-tile-pf-margin-bottom 0;
   padding: 15px;
   width: $catalog-tile-pf-width;
 
@@ -41,8 +41,8 @@
     font-size: 16px;
     padding-left: 5px;
 
-    > .fa,
-    > .pficon {
+    >.fa,
+    >.pficon {
       vertical-align: top;
     }
   }
@@ -70,11 +70,11 @@
 }
 
 .catalog-tile-view-pf-category {
-  margin: 10px 0;
+  margin: 10px 0 15px;
 }
 
 .catalog-tile-view-pf-category-header {
-  padding-right: 20px;
+  padding-right: 15px;
 }
 
 .catalog-tile-view-pf-category-header-title {
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_patternfly-react-extensions.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_patternfly-react-extensions.scss
index b1ea5d12364..076273625fa 100644
--- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_patternfly-react-extensions.scss
+++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_patternfly-react-extensions.scss
@@ -2,7 +2,9 @@
   Patternfly React Extensions Partials
 */
 @import 'variables';
+@import 'catalog-item';
 @import 'catalog-tile';
 @import 'filter-side-panel';
+@import 'properties-side-panel';
 @import 'table-grid';
 @import 'vertical-tabs';
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_properties-side-panel.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_properties-side-panel.scss
new file mode 100644
index 00000000000..332424f205c
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_properties-side-panel.scss
@@ -0,0 +1,25 @@
+.properties-side-panel-pf {
+  width: 165px;
+}
+
+.properties-side-panel-pf-property {
+  margin-top: 20px;
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.properties-side-panel-pf-property-label {
+  color: $color-pf-black-600;
+  font-weight: 300;
+  font-size: 12px;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.properties-side-panel-pf-property-value {
+  font-size: 14px;
+  margin-top: 5px;
+  word-break: break-word;
+}
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_table-grid.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_table-grid.scss
index f96e233de5a..0f5cd3851e7 100644
--- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_table-grid.scss
+++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_table-grid.scss
@@ -7,6 +7,14 @@
     white-space: nowrap;
   }
 
+  .table-grid-pf-checkbox {
+    border-right: 1px solid $list-view-divider;
+    display: none;
+    left: 20px;
+    padding-right: 10px;
+    position: absolute;
+  }
+
   .table-grid-pf-body {
     min-height: 50px;
     position: relative;
@@ -18,7 +26,9 @@
   }
 
   .table-grid-pf-head {
+    color: $color-pf-black-600;
     font-size: 12px;
+    font-weight: 300;
     padding: 10px 0;
   }
 
@@ -28,7 +38,9 @@
     text-transform: uppercase;
 
     .btn.btn-link {
-      color: initial;
+      color: $color-pf-black-600;
+      font-size: 12px;
+      font-weight: 300;
       overflow-x: hidden;
       padding: 0;
       text-overflow: ellipsis;
@@ -59,4 +71,86 @@
       border-bottom: solid 1px #eee;
     }
   }
+
+  &.cell-select {
+    .table-grid-pf-body {
+      .row {
+        padding: 0;
+      }
+
+      .table-grid-pf-col {
+        cursor: pointer;
+        display: inline-block;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        width: 100%;
+
+        &.active {
+          background-color: $list-view-active-bg;
+        }
+
+        &:hover {
+          background-color: $list-view-hover-bg;
+        }
+      }
+    }
+  }
+
+  &.row-select {
+    .table-grid-pf-body {
+      .row {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &.checkbox-select {
+    .table-grid-pf-checkbox {
+      display: initial;
+    }
+
+    .table-grid-pf-head {
+      position: relative;
+      padding-left: 35px;
+
+      .table-grid-pf-checkbox {
+        width: 23px;
+
+        .btn {
+          color: $color-pf-blue-400;
+          font-size: 15px;
+          left: -1px;
+          line-height: 1;
+          padding: 0;
+          position: relative;
+
+          .fa.fa-square-o {
+            color: $color-pf-black-400;
+          }
+        }
+      }
+    }
+
+    .table-grid-pf-body {
+      .row {
+        position: relative;
+        padding-left: 35px;
+      }
+    }
+  }
+
+  &.row-select,
+  &.checkbox-select {
+    .table-grid-pf-body {
+      .row {
+        &.active {
+          background-color: $list-view-active-bg;
+        }
+
+        &:hover {
+          background-color: $list-view-hover-bg;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss
index 32dc0bfe279..327629ffd1b 100644
--- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss
+++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss
@@ -1,6 +1,6 @@
 $catalog-tile-pf-height:                230px;
 $catalog-tile-pf-width:                 220px;
-$catalog-tile-pf-margin-bottom:         20px;
+$catalog-tile-pf-margin-bottom:         15px;
 $catalog-tile-pf-total-height:          calc(#{$catalog-tile-pf-height} + #{$catalog-tile-pf-margin-bottom} - 2px);
 $vertical-tab-pf-color:                 initial;
 $vertical-tab-pf-active-color:          $color-pf-blue-400;
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss
index d84af0147fd..7b25ffc0241 100644
--- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss
+++ b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss
@@ -7,21 +7,35 @@
   margin-top: 4px;
   position: relative;
 
-  .btn.btn-link {
+  > a {
     color: $vertical-tab-pf-color;
+    display: inline-block;
     font-size: 13px;
     padding-left: 15px;
+    vertical-align: top;
+    width: 100%;
+    word-break: break-word;
 
     &:hover,
     &:focus {
       color: $vertical-tab-pf-active-color;
-      outline: 0;
       text-decoration: none;
     }
+
+    &.no-wrap {
+      overflow-x: hidden;
+      white-space: nowrap;
+    }
+
+    &.truncate {
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   &.active {
-    > .btn.btn-link {
+    > a {
       color: $vertical-tab-pf-active-color;
 
       &::before {
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.js
new file mode 100644
index 00000000000..9cdc34c7fea
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const CatalogItemHeader = ({ className, iconImg, iconClass, title, vendor, ...props }) => {
+  const classes = classNames('catalog-item-header-pf', className);
+
+  return (
+    <header className={classes} {...props}>
+      {iconImg && <img className="catalog-item-header-pf-icon" src={iconImg} alt="" />}
+      {!iconImg && iconClass && <span className={`catalog-item-header-pf-icon ${iconClass}`} />}
+      <div className="catalog-item-header-pf-text">
+        <h1 className="catalog-item-header-pf-title">{title}</h1>
+        <h5 className="catalog-item-header-pf-subtitle">{vendor}</h5>
+      </div>
+    </header>
+  );
+};
+
+CatalogItemHeader.propTypes = {
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** URL of an image for the item's icon */
+  iconImg: PropTypes.string,
+  /** Class for the image when an icon is to be used (exclusive from iconImg) */
+  iconClass: PropTypes.string,
+  /** Tile for the catalog item */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /** Vendor for the catalog item */
+  vendor: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+
+CatalogItemHeader.defaultProps = {
+  className: '',
+  iconImg: null,
+  iconClass: null,
+  vendor: null
+};
+
+export default CatalogItemHeader;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.stories.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.stories.js
new file mode 100644
index 00000000000..89a716baa4b
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.stories.js
@@ -0,0 +1,56 @@
+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 } from 'storybook/constants/siteConstants';
+import pfBrand from 'patternfly/dist/img/logo-alt.svg';
+import ngnix from './__images__/nginx.png';
+import { name } from '../../../package.json';
+
+import { CatalogItemHeader } from './index';
+
+const stories = storiesOf(`${storybookPackageName(name)}/Catalog Components/Catalog Item Header`, module);
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Catalog Item Header',
+    description: 'This is a header component used as the header for catalog item details.'
+  })
+);
+
+stories.add(
+  'Catalog Item Header',
+  withInfo()(() => (
+    <div>
+      <div style={{ marginBottom: '40px' }}>
+        <CatalogItemHeader
+          className="long-description-test"
+          iconImg={pfBrand}
+          title="Patternfly-React"
+          vendor={
+            <span>
+              provided by <a href="redhat.com">Red Hat</a>
+            </span>
+          }
+        />
+      </div>
+      <div style={{ marginBottom: '40px' }}>
+        <CatalogItemHeader
+          iconImg={pfBrand}
+          title="PatternFly"
+          vendor={
+            <span>
+              provided by <a href="redhat.com">Red Hat</a>
+            </span>
+          }
+        />
+      </div>
+      <div style={{ marginBottom: '40px' }}>
+        <CatalogItemHeader iconImg={ngnix} title="Nginx" vendor={<span>provided by Nginx</span>} />
+      </div>
+      <div style={{ marginBottom: '40px' }}>
+        <CatalogItemHeader iconClass="fa fa-codepen" title="CodePen" vendor="provided by CodePen" />
+      </div>
+    </div>
+  ))
+);
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.test.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.test.js
new file mode 100644
index 00000000000..c7b8476ac32
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/CatalogItemHeader.test.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { CatalogItemHeader } from './index';
+
+const pfBrand = '<PatternFly Brand Image here>';
+const ngnix = '<NGNIX Brand Image here>';
+
+test('CatalogItemHeader renders properly', () => {
+  const component = mount(
+    <div>
+      <CatalogItemHeader
+        className="test-catalog-item-header-class"
+        iconImg={pfBrand}
+        title="Patternfly-React"
+        vendor={
+          <span>
+            sponsored by <a href="redhat.com">Red Hat</a>
+          </span>
+        }
+      />
+      <CatalogItemHeader
+        iconImg={pfBrand}
+        title="PatternFly"
+        vendor={
+          <span>
+            sponsored by <a href="redhat.com">Red Hat</a>
+          </span>
+        }
+      />
+      <CatalogItemHeader iconImg={ngnix} title="Nginx" vendor={<span>provided by Nginx</span>} />
+      <CatalogItemHeader
+        className="test-catalog-item-header-icon-class"
+        iconClass="fa fa-codepen"
+        title="CodePen"
+        vendor="provided by CodePen"
+      />
+    </div>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/__images__/nginx.png b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/__images__/nginx.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7f228dfaf935e8e33a921381c667376c057caf9
GIT binary patch
literal 24038
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%0AnG1tMkq`z@k$b9BjM6fczlMJmJh0
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

literal 0
HcmV?d00001

diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.js.snap b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.js.snap
new file mode 100644
index 00000000000..bcd493a9e0b
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.js.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CatalogItemHeader renders properly 1`] = `
+<div>
+  <header
+    class="catalog-item-header-pf test-catalog-item-header-class"
+  >
+    <img
+      alt=""
+      class="catalog-item-header-pf-icon"
+      src="<PatternFly Brand Image here>"
+    />
+    <div
+      class="catalog-item-header-pf-text"
+    >
+      <h1
+        class="catalog-item-header-pf-title"
+      >
+        Patternfly-React
+      </h1>
+      <h5
+        class="catalog-item-header-pf-subtitle"
+      >
+        <span>
+          sponsored by 
+          <a
+            href="redhat.com"
+          >
+            Red Hat
+          </a>
+        </span>
+      </h5>
+    </div>
+  </header>
+  <header
+    class="catalog-item-header-pf"
+  >
+    <img
+      alt=""
+      class="catalog-item-header-pf-icon"
+      src="<PatternFly Brand Image here>"
+    />
+    <div
+      class="catalog-item-header-pf-text"
+    >
+      <h1
+        class="catalog-item-header-pf-title"
+      >
+        PatternFly
+      </h1>
+      <h5
+        class="catalog-item-header-pf-subtitle"
+      >
+        <span>
+          sponsored by 
+          <a
+            href="redhat.com"
+          >
+            Red Hat
+          </a>
+        </span>
+      </h5>
+    </div>
+  </header>
+  <header
+    class="catalog-item-header-pf"
+  >
+    <img
+      alt=""
+      class="catalog-item-header-pf-icon"
+      src="<NGNIX Brand Image here>"
+    />
+    <div
+      class="catalog-item-header-pf-text"
+    >
+      <h1
+        class="catalog-item-header-pf-title"
+      >
+        Nginx
+      </h1>
+      <h5
+        class="catalog-item-header-pf-subtitle"
+      >
+        <span>
+          provided by Nginx
+        </span>
+      </h5>
+    </div>
+  </header>
+  <header
+    class="catalog-item-header-pf test-catalog-item-header-icon-class"
+  >
+    <span
+      class="catalog-item-header-pf-icon fa fa-codepen"
+    />
+    <div
+      class="catalog-item-header-pf-text"
+    >
+      <h1
+        class="catalog-item-header-pf-title"
+      >
+        CodePen
+      </h1>
+      <h5
+        class="catalog-item-header-pf-subtitle"
+      >
+        provided by CodePen
+      </h5>
+    </div>
+  </header>
+</div>
+`;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/index.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/index.js
new file mode 100644
index 00000000000..315f2ac0801
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogItemHeader/index.js
@@ -0,0 +1,3 @@
+import CatalogItemHeader from './CatalogItemHeader';
+
+export { CatalogItemHeader };
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.js
index d86a7132245..861e5ae81a4 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { OverlayTrigger, Tooltip } from 'patternfly-react';
 
 import CatalogTileBadge from './CatalogTileBadge';
 
@@ -26,11 +25,11 @@ const CatalogTile = ({
       return text;
     }
 
-    const tooltip = <Tooltip id={`${id || Date.now()}_tooltip`}>{text}</Tooltip>;
     return (
-      <OverlayTrigger overlay={tooltip} placement="top">
-        <span>{`${text.substring(0, max - 3)}...`}</span>
-      </OverlayTrigger>
+      <React.Fragment>
+        {text.substring(0, max - 3)}
+        &hellip;
+      </React.Fragment>
     );
   };
 
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.stories.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.stories.js
index 6f8ec917a86..cee805b85ab 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.stories.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.stories.js
@@ -38,7 +38,7 @@ stories.add(
         title="Patternfly-React"
         vendor={
           <span>
-            OpenSource funded by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         }
         description={
@@ -82,7 +82,7 @@ stories.add(
         title="PatternFly"
         vendor={
           <span>
-            OpenSource funded by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         }
         description="A community of designers and developers collaborating to build a UI framework for enterprise web applications."
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/__snapshots__/CatalogTile.test.js.snap b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/__snapshots__/CatalogTile.test.js.snap
index 6f840e258f3..a21daa2f7e3 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/__snapshots__/CatalogTile.test.js.snap
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/__snapshots__/CatalogTile.test.js.snap
@@ -193,9 +193,7 @@ exports[`CatalogTile renders properly 1`] = `
       <div
         class="catalog-tile-pf-description"
       >
-        <span>
-          This is a very long description that should be truncated after 112 characters. 112 is the default but can be ...
-        </span>
+        This is a very long description that should be truncated after 112 characters. 112 is the default but can be …
       </div>
     </div>
   </div>
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js
index 5a3fc972c6e..cbf3efbb720 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js
@@ -36,8 +36,8 @@ class CatalogTileViewCategory extends React.Component {
         rows = 2;
       }
 
-      const numShown = Math.floor(this.categoryContainer.clientWidth / 240) * rows;
-      const rightSpacerWidth = this.categoryContainer.clientWidth % 240;
+      const numShown = Math.floor(this.categoryContainer.clientWidth / 235) * rows;
+      const rightSpacerWidth = this.categoryContainer.clientWidth % 235;
       this.setState({ numShown, rightSpacerWidth });
     }
   };
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js
index 28b422538ac..ef0be4ae755 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js
@@ -78,7 +78,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -112,7 +112,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -144,7 +144,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -176,7 +176,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -208,7 +208,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -246,7 +246,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -269,7 +269,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -292,7 +292,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -315,7 +315,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
@@ -338,7 +338,7 @@ export const mockItems = [
         image: pfBrand,
         vendor: (
           <span>
-            Provided by <a href="redhat.com">Red Hat</a>
+            provided by <a href="redhat.com">Red Hat</a>
           </span>
         ),
         description:
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertiesSIdePanel.test.js b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertiesSIdePanel.test.js
new file mode 100644
index 00000000000..c1c00c04c8b
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertiesSIdePanel.test.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Icon } from 'patternfly-react';
+import { PropertiesSidePanel, PropertyItem } from './index';
+
+test('PropertyItem renders properly', () => {
+  const component = mount(
+    <PropertyItem label="Operator Version" value="0.9.8 (latest)" className="test-property-item-class" />
+  );
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('PropertiesSidePanel renders properly', () => {
+  const component = mount(
+    <PropertiesSidePanel className="test-properties-side-panel-class">
+      <PropertyItem label="Operator Version" value="0.9.8 (latest)" className="test-property-item-class" />
+      <PropertyItem
+        label="Certified Level"
+        value={
+          <span>
+            <Icon type="pf" name="ok" /> Certified
+          </span>
+        }
+      />
+      <PropertyItem label="Provider" value="Red Hat, Inc" />
+      <PropertyItem label="Health Index" value="A" />
+      <PropertyItem
+        label="Repository"
+        value={
+          <a href="https://quay.io/repository/redhat/prometheus-operator">
+            https://quay.io/repository/redhat/prometheus-operator
+          </a>
+        }
+      />
+      <PropertyItem
+        label="Container Image"
+        value={
+          <a href="#">
+            0.22.2 <Icon type="fa" name="external-link" />
+          </a>
+        }
+      />
+      <PropertyItem
+        label="Created At"
+        value={
+          <span>
+            <Icon type="fa" name="globe" /> Aug 23, 1:58pm
+          </span>
+        }
+      />
+      <PropertyItem label="Support" value={<a href="#">Red Hat</a>} />
+    </PropertiesSidePanel>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertiesSidePanel.js b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertiesSidePanel.js
new file mode 100644
index 00000000000..29af3dd4b4c
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertiesSidePanel.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import PropertyItem from './PropertyItem';
+
+const PropertiesSidePanel = ({ children, className, ...otherProps }) => {
+  const classes = classNames('properties-side-panel-pf', className);
+
+  return (
+    <div className={classes} {...otherProps}>
+      {children}
+    </div>
+  );
+};
+
+PropertiesSidePanel.propTypes = {
+  /** Children, should be PropertyItem items plus any action buttons, etc */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+PropertiesSidePanel.defaultProps = {
+  children: null,
+  className: ''
+};
+
+PropertiesSidePanel.Property = PropertyItem;
+
+export default PropertiesSidePanel;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertyItem.js b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertyItem.js
new file mode 100644
index 00000000000..134986f31b6
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertyItem.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const PropertyItem = ({ className, label, value, ...otherProps }) => {
+  const classes = classNames('properties-side-panel-pf-property', className);
+
+  return (
+    <div className={classes} {...otherProps}>
+      <h5 className="properties-side-panel-pf-property-label">{label}</h5>
+      <div className="properties-side-panel-pf-property-value">{value}</div>
+    </div>
+  );
+};
+
+PropertyItem.propTypes = {
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** Label for the property */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /** Value of the property */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+
+PropertyItem.defaultProps = {
+  className: '',
+  value: null
+};
+
+export default PropertyItem;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertySidePanel.stories.js b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertySidePanel.stories.js
new file mode 100644
index 00000000000..d116d2280dc
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/PropertySidePanel.stories.js
@@ -0,0 +1,69 @@
+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 { name } from '../../../package.json';
+import { Icon } from 'patternfly-react';
+
+import { PropertiesSidePanel, PropertyItem } from './index';
+
+const stories = storiesOf(
+  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Properties Side Panel`,
+  module
+);
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Properties Side Panel',
+    description:
+      'This is a sidebar component used to show the properties of an item. ' +
+      'Note: the 15px padding and border styling are not part of the PropertiesSidePanel.'
+  })
+);
+
+stories.add(
+  'PropertiesSidePanel',
+  withInfo()(() => (
+    <div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>
+      <PropertiesSidePanel>
+        <PropertyItem label="Operator Version" value="0.9.8 (latest)" />
+        <PropertyItem
+          label="Certified Level"
+          value={
+            <span>
+              <Icon type="pf" name="ok" /> Certified
+            </span>
+          }
+        />
+        <PropertyItem label="Provider" value="Red Hat, Inc" />
+        <PropertyItem label="Health Index" value="A" />
+        <PropertyItem
+          label="Repository"
+          value={
+            <a href="https://quay.io/repository/redhat/prometheus-operator">
+              https://quay.io/repository/redhat/prometheus-operator
+            </a>
+          }
+        />
+        <PropertyItem
+          label="Container Image"
+          value={
+            <a href="#">
+              0.22.2 <Icon type="fa" name="external-link" />
+            </a>
+          }
+        />
+        <PropertyItem
+          label="Created At"
+          value={
+            <span>
+              <Icon type="fa" name="globe" /> Aug 23, 1:58pm
+            </span>
+          }
+        />
+        <PropertyItem label="Support" value={<a href="#">Red Hat</a>} />
+      </PropertiesSidePanel>
+    </div>
+  ))
+);
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/__snapshots__/PropertiesSIdePanel.test.js.snap b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/__snapshots__/PropertiesSIdePanel.test.js.snap
new file mode 100644
index 00000000000..43de0d4e06e
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/__snapshots__/PropertiesSIdePanel.test.js.snap
@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropertiesSidePanel renders properly 1`] = `
+<div
+  class="properties-side-panel-pf test-properties-side-panel-class"
+>
+  <div
+    class="properties-side-panel-pf-property test-property-item-class"
+  >
+    <h5
+      class="properties-side-panel-pf-property-label"
+    >
+      Operator Version
+    </h5>
+    <div
+      class="properties-side-panel-pf-property-value"
+    >
+      0.9.8 (latest)
+    </div>
+  </div>
+  <div
+    class="properties-side-panel-pf-property"
+  >
+    <h5
+      class="properties-side-panel-pf-property-label"
+    >
+      Certified Level
+    </h5>
+    <div
+      class="properties-side-panel-pf-property-value"
+    >
+      <span>
+        <span
+          aria-hidden="true"
+          class="pficon pficon-ok"
+        />
+         Certified
+      </span>
+    </div>
+  </div>
+  <div
+    class="properties-side-panel-pf-property"
+  >
+    <h5
+      class="properties-side-panel-pf-property-label"
+    >
+      Provider
+    </h5>
+    <div
+      class="properties-side-panel-pf-property-value"
+    >
+      Red Hat, Inc
+    </div>
+  </div>
+  <div
+    class="properties-side-panel-pf-property"
+  >
+    <h5
+      class="properties-side-panel-pf-property-label"
+    >
+      Health Index
+    </h5>
+    <div
+      class="properties-side-panel-pf-property-value"
+    >
+      A
+    </div>
+  </div>
+  <div
+    class="properties-side-panel-pf-property"
+  >
+    <h5
+      class="properties-side-panel-pf-property-label"
+    >
+      Repository
+    </h5>
+    <div
+      class="properties-side-panel-pf-property-value"
+    >
+      <a
+        href="https://quay.io/repository/redhat/prometheus-operator"
+      >
+        https://quay.io/repository/redhat/prometheus-operator
+      </a>
+    </div>
+  </div>
+  <div
+    class="properties-side-panel-pf-property"
+  >
+    <h5
+      class="properties-side-panel-pf-property-label"
+    >
+      Container Image
+    </h5>
+    <div
+      class="properties-side-panel-pf-property-value"
+    >
+      <a
+        href="#"
+      >
+        0.22.2 
+        <span
+          aria-hidden="true"
+          class="fa fa-external-link"
+        />
+      </a>
+    </div>
+  </div>
+  <div
+    class="properties-side-panel-pf-property"
+  >
+    <h5
+      class="properties-side-panel-pf-property-label"
+    >
+      Created At
+    </h5>
+    <div
+      class="properties-side-panel-pf-property-value"
+    >
+      <span>
+        <span
+          aria-hidden="true"
+          class="fa fa-globe"
+        />
+         Aug 23, 1:58pm
+      </span>
+    </div>
+  </div>
+  <div
+    class="properties-side-panel-pf-property"
+  >
+    <h5
+      class="properties-side-panel-pf-property-label"
+    >
+      Support
+    </h5>
+    <div
+      class="properties-side-panel-pf-property-value"
+    >
+      <a
+        href="#"
+      >
+        Red Hat
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PropertyItem renders properly 1`] = `
+<div
+  class="properties-side-panel-pf-property test-property-item-class"
+>
+  <h5
+    class="properties-side-panel-pf-property-label"
+  >
+    Operator Version
+  </h5>
+  <div
+    class="properties-side-panel-pf-property-value"
+  >
+    0.9.8 (latest)
+  </div>
+</div>
+`;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/index.js b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/index.js
new file mode 100644
index 00000000000..be0e4123925
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/PropertiesSidePanel/index.js
@@ -0,0 +1,4 @@
+import PropertiesSidePanel from './PropertiesSidePanel';
+import PropertyItem from './PropertyItem';
+
+export { PropertiesSidePanel, PropertyItem };
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.js
index a2eb8813f58..574e00cf5bc 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.js
@@ -5,13 +5,23 @@ import TableGridHead from './TableGridHead';
 import TableGridColumnHeader from './TableGridColumnHeader';
 import TableGridBody from './TableGridBody';
 import TableGridRow from './TableGridRow';
+import TableGridCol from './TableGridCol';
 
 /**
  * TableGrid Component for PatternFly
  */
 
-const TableGrid = ({ children, className, bordered, ...props }) => {
-  const classes = classNames('table-grid-pf', { bordered }, className);
+const TableGrid = ({ children, className, bordered, selectType, ...props }) => {
+  const classes = classNames(
+    {
+      'table-grid-pf': true,
+      bordered,
+      'row-select': selectType === 'row',
+      'cell-select': selectType === 'cell',
+      'checkbox-select': selectType === 'checkbox'
+    },
+    className
+  );
   return (
     <div className={classes} {...props}>
       {children}
@@ -25,17 +35,21 @@ TableGrid.propTypes = {
   /** Additional css classes */
   className: PropTypes.string,
   /** Flag to use a bordered grid */
-  bordered: PropTypes.bool
+  bordered: PropTypes.bool,
+  /** Type of selection for the grid */
+  selectType: PropTypes.oneOf(['row', 'cell', 'checkbox', 'none'])
 };
 TableGrid.defaultProps = {
   children: null,
   className: '',
-  bordered: true
+  bordered: true,
+  selectType: 'none'
 };
 
 TableGrid.Head = TableGridHead;
 TableGrid.ColumnHeader = TableGridColumnHeader;
 TableGrid.Body = TableGridBody;
 TableGrid.Row = TableGridRow;
+TableGrid.Col = TableGridCol;
 
 export default TableGrid;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.stories.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.stories.js
index f43d2127905..01f877bc7c7 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.stories.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.stories.js
@@ -5,19 +5,27 @@ import { defaultTemplate } from 'storybook/decorators/storyTemplates';
 import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
 import { MockTableGridExample, MockTableGridExampleSource } from './_mocks_/mockTableGridExample';
 
-import { TableGrid, TableGridHead, TableGridColumnHeader, TableGridBody, TableGridRow } from './index';
+import { TableGrid, TableGridHead, TableGridColumnHeader, TableGridBody, TableGridRow, TableGridCol } from './index';
 
 import { name } from '../../../package.json';
-import { boolean, withKnobs } from '@storybook/addon-knobs';
+import { boolean, select, withKnobs } from '@storybook/addon-knobs';
 
 const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.CONTENT_VIEWS}/TableGrid`, module);
 
 stories.addDecorator(
   defaultTemplate({
     title: 'Table Grid',
-    description:
-      'The TableGrid is based on the Bootstrap Grid Layout. The TableGridColumnHeaders should have the same ' +
-      'bootstrap col classes as the children of the TableGridRow component in order to maintain equal widths.'
+    description: (
+      <div>
+        The TableGrid is based on the Bootstrap Grid Layout. The <b>TableGrid.ColumnHeaders</b> should have the same
+        bootstrap column classes as the children of the <b>TableGrid.Row</b> component in order to maintain equal
+        widths.
+        <br />
+        <br />
+        When using <i>cell</i> selection, the <b>TableGrid.Col</b> component should be used in place of the
+        <b> Grid.Col</b> component for correct selection styling.
+      </div>
+    )
   })
 );
 
@@ -26,7 +34,7 @@ stories.add(
   'TableGrid',
   withInfo({
     source: false,
-    propTables: [TableGrid, TableGridHead, TableGridColumnHeader, TableGridBody, TableGridRow],
+    propTables: [TableGrid, TableGridHead, TableGridColumnHeader, TableGridBody, TableGridRow, TableGridCol],
     propTablesExclude: [MockTableGridExample],
     text: (
       <div>
@@ -36,6 +44,12 @@ stories.add(
     )
   })(() => {
     const bordered = boolean('Bordered', true);
-    return <MockTableGridExample bordered={bordered} />;
+    const selectType = select(
+      'Selection Type',
+      { none: 'None', row: 'Row', checkbox: 'Checkbox', cell: 'Cell' },
+      'none'
+    );
+
+    return <MockTableGridExample bordered={bordered} selectType={selectType} />;
   })
 );
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.test.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.test.js
index 5bedd6a9893..20089ee1f88 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.test.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.test.js
@@ -54,3 +54,279 @@ test('TableGrid renders properly', () => {
   );
   expect(component.render()).toMatchSnapshot();
 });
+
+test('Bordered TableGrid renders properly', () => {
+  const component = mount(
+    <TableGrid id="table-grid" bordered>
+      <TableGrid.Head>
+        <TableGrid.ColumnHeader id="title" sortable isSorted isAscending className="test-class">
+          Column 1
+        </TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+          <div>
+            <span>test 1</span>
+            <span>and two</span>
+          </div>
+        </TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Body id="test-grid-body" className="test-grid-body">
+        <TableGrid.Row id="test-grid-row" className="test-grid-row">
+          <Grid.Col id="test-col-1" className="test-col1">
+            item 1 column 1
+          </Grid.Col>
+          <Grid.Col id="test-col-2" className="test-col2">
+            item 1 column 2
+          </Grid.Col>
+          <Grid.Col id="test-col-3" className="test-col3">
+            item 1 column 3
+          </Grid.Col>
+          <Grid.Col id="test-col-4" className="test-col4">
+            item 1 column 4
+          </Grid.Col>
+        </TableGrid.Row>
+        <TableGrid.Row id="test-grid-row-2">
+          <Grid.Col id="test-row-2-col-1">item 2 column 1</Grid.Col>
+          <Grid.Col id="two-children" className="test-col2">
+            <span>item 1</span>
+            <span>column 2</span>
+          </Grid.Col>
+          <Grid.Col id="icon-name" className="test-col3">
+            <Icon type="pf" name="error-circle-o" />
+            Danger
+          </Grid.Col>
+          <Grid.Col id="test-col-4" className="test-col4">
+            item 2 column 4
+          </Grid.Col>
+        </TableGrid.Row>
+      </TableGrid.Body>
+    </TableGrid>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('TableGrid with Row select renders properly', () => {
+  const component = mount(
+    <TableGrid id="table-grid" selectType="row">
+      <TableGrid.Head>
+        <TableGrid.ColumnHeader id="title" sortable isSorted isAscending className="test-class">
+          Column 1
+        </TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+          <div>
+            <span>test 1</span>
+            <span>and two</span>
+          </div>
+        </TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Body id="test-grid-body" className="test-grid-body">
+        <TableGrid.Row id="test-grid-row" className="test-grid-row">
+          <Grid.Col id="test-col-1" className="test-col1">
+            item 1 column 1
+          </Grid.Col>
+          <Grid.Col id="test-col-2" className="test-col2">
+            item 1 column 2
+          </Grid.Col>
+          <Grid.Col id="test-col-3" className="test-col3">
+            item 1 column 3
+          </Grid.Col>
+          <Grid.Col id="test-col-4" className="test-col4">
+            item 1 column 4
+          </Grid.Col>
+        </TableGrid.Row>
+        <TableGrid.Row id="test-grid-row-2-selected" selected>
+          <Grid.Col id="test-row-2-col-1">item 2 column 1</Grid.Col>
+          <Grid.Col id="two-children" className="test-col2">
+            <span>item 1</span>
+            <span>column 2</span>
+          </Grid.Col>
+          <Grid.Col id="icon-name" className="test-col3">
+            <Icon type="pf" name="error-circle-o" />
+            Danger
+          </Grid.Col>
+          <Grid.Col id="test-col-4" className="test-col4">
+            item 2 column 4
+          </Grid.Col>
+        </TableGrid.Row>
+        <TableGrid.Row id="test-grid-row-3" selected={false}>
+          <Grid.Col id="test-row-3-col-1">item 3 column 1</Grid.Col>
+          <Grid.Col id="two-children" className="test-col3">
+            <span>item 3</span>
+            <span>column 2</span>
+          </Grid.Col>
+          <Grid.Col id="icon-name" className="test-col3">
+            <Icon type="pf" name="error-circle-o" />
+            Danger
+          </Grid.Col>
+          <Grid.Col id="test-col-4" className="test-col4">
+            item 3 column 4
+          </Grid.Col>
+        </TableGrid.Row>
+      </TableGrid.Body>
+    </TableGrid>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('TableGrid with Cell select renders properly', () => {
+  const component = mount(
+    <TableGrid id="table-grid" selectType="cell">
+      <TableGrid.Head>
+        <TableGrid.ColumnHeader id="title" sortable isSorted isAscending className="test-class">
+          Column 1
+        </TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+          <div>
+            <span>test 1</span>
+            <span>and two</span>
+          </div>
+        </TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Body id="test-grid-body" className="test-grid-body">
+        <TableGrid.Row id="test-grid-row" className="test-grid-row">
+          <TableGrid.Col id="test-col-1" className="test-col1">
+            item 1 column 1
+          </TableGrid.Col>
+          <TableGrid.Col id="test-col-2" className="test-col2" selected>
+            item 1 column 2
+          </TableGrid.Col>
+          <TableGrid.Col id="test-col-3" className="test-col3" selected={false}>
+            item 1 column 3
+          </TableGrid.Col>
+          <TableGrid.Col id="test-col-4" className="test-col4">
+            item 1 column 4
+          </TableGrid.Col>
+        </TableGrid.Row>
+        <TableGrid.Row id="test-grid-row-2-selected">
+          <TableGrid.Col id="test-row-2-col-1">item 2 column 1</TableGrid.Col>
+          <TableGrid.Col id="two-children" className="test-col2">
+            <span>item 1</span>
+            <span>column 2</span>
+          </TableGrid.Col>
+          <TableGrid.Col id="icon-name" className="test-col3">
+            <Icon type="pf" name="error-circle-o" />
+            Danger
+          </TableGrid.Col>
+          <TableGrid.Col id="test-col-4" className="test-col4">
+            item 2 column 4
+          </TableGrid.Col>
+        </TableGrid.Row>
+      </TableGrid.Body>
+    </TableGrid>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('TableGrid with Checkbox select renders properly', () => {
+  const component = mount(
+    <TableGrid id="table-grid" selectType="checkbox">
+      <TableGrid.Head showCheckbox allSelected>
+        <TableGrid.ColumnHeader id="title" sortable isSorted isAscending className="test-class">
+          Column 1
+        </TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+          <div>
+            <span>test 1</span>
+            <span>and two</span>
+          </div>
+        </TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Body id="test-grid-body" className="test-grid-body">
+        <TableGrid.Row id="test-grid-row" className="test-grid-row" checkboxAriaLabel="test arial label">
+          <TableGrid.Col id="test-col-1" className="test-col1">
+            item 1 column 1
+          </TableGrid.Col>
+          <TableGrid.Col id="test-col-2" className="test-col2" selected>
+            item 1 column 2
+          </TableGrid.Col>
+          <TableGrid.Col id="test-col-3" className="test-col3" selected={false}>
+            item 1 column 3
+          </TableGrid.Col>
+          <TableGrid.Col id="test-col-4" className="test-col4">
+            item 1 column 4
+          </TableGrid.Col>
+        </TableGrid.Row>
+        <TableGrid.Row id="test-grid-row-2-selected">
+          <TableGrid.Col id="test-row-2-col-1">item 2 column 1</TableGrid.Col>
+          <TableGrid.Col id="two-children" className="test-col2">
+            <span>item 1</span>
+            <span>column 2</span>
+          </TableGrid.Col>
+          <TableGrid.Col id="icon-name" className="test-col3">
+            <Icon type="pf" name="error-circle-o" />
+            Danger
+          </TableGrid.Col>
+          <TableGrid.Col id="test-col-4" className="test-col4">
+            item 2 column 4
+          </TableGrid.Col>
+        </TableGrid.Row>
+      </TableGrid.Body>
+    </TableGrid>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('TableGridHead renders options properly', () => {
+  const component = mount(
+    <TableGrid id="table-grid" selectType="checkbox">
+      <TableGrid.Head id="all-selected-no-checkbox" showCheckbox={false}>
+        <TableGrid.ColumnHeader>Col 1</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 3</TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Head id="none-selected" showCheckbox>
+        <TableGrid.ColumnHeader>Col 1</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 3</TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Head id="all-selected" showCheckbox allSelected>
+        <TableGrid.ColumnHeader>Col 1</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 3</TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Head id="partial-selected" showCheckbox partialSelected>
+        <TableGrid.ColumnHeader>Col 1</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 3</TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Head id="custom-tip" showCheckbox allSelected toggleTip="Test Custom Tip">
+        <TableGrid.ColumnHeader>Col 1</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 3</TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Head id="none-selected-custom-sr-text" showCheckbox noneSelectedAriaLabel="Test No Selected SR Text">
+        <TableGrid.ColumnHeader>Col 1</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 3</TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Head
+        id="all-selected-custom-sr-text"
+        showCheckbox
+        allSelected
+        allSelectedAriaLabel="Test All Selected SR Text"
+      >
+        <TableGrid.ColumnHeader>Col 1</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 3</TableGrid.ColumnHeader>
+      </TableGrid.Head>
+      <TableGrid.Head
+        id="partial-selected-custom-sr-text"
+        showCheckbox
+        partialSelected
+        partialSelectedAriaLabel="Test Partial Selected SR Text"
+      >
+        <TableGrid.ColumnHeader>Col 1</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 2</TableGrid.ColumnHeader>
+        <TableGrid.ColumnHeader>Col 3</TableGrid.ColumnHeader>
+      </TableGrid.Head>
+    </TableGrid>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridCol.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridCol.js
new file mode 100644
index 00000000000..36af61e80d0
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridCol.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Grid } from 'patternfly-react';
+
+/**
+ * TableGridCol Component for PatternFly
+ */
+
+const TableGridCol = ({ children, selected, ...props }) => {
+  const classes = classNames('table-grid-pf-col', { active: selected });
+  return (
+    <Grid.Col {...props}>
+      <span className={classes}>{children}</span>
+    </Grid.Col>
+  );
+};
+
+TableGridCol.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Flag if the cell is selected */
+  selected: PropTypes.bool
+};
+
+TableGridCol.defaultProps = {
+  children: null,
+  selected: false
+};
+
+export default TableGridCol;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridHead.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridHead.js
index ae9f34d50bd..cae2b19a30b 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridHead.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridHead.js
@@ -1,30 +1,115 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Grid } from 'patternfly-react';
+import { Button, Grid, Icon, OverlayTrigger, noop } from 'patternfly-react';
+import { Tooltip } from '../../../../patternfly-react/src/components/Tooltip';
 
 /**
  * TableGridHead Component for PatternFly
  */
 
-const TableGridHead = ({ children, className, ...props }) => {
+const TableGridHead = ({
+  id,
+  children,
+  className,
+  showCheckbox,
+  allSelected,
+  partialSelected,
+  onToggleSelection,
+  toggleTip,
+  allSelectedAriaLabel,
+  partialSelectedAriaLabel,
+  noneSelectedAriaLabel,
+  ...props
+}) => {
   const classes = classNames('table-grid-pf-head', className);
+
+  const getTipText = () => {
+    if (toggleTip) {
+      return toggleTip;
+    }
+    if (allSelected) {
+      return 'All Selected';
+    }
+    if (partialSelected) {
+      return 'Partially Selected';
+    }
+    return 'None Selected';
+  };
+
+  const getAriaLabel = () => {
+    if (allSelected) {
+      return allSelectedAriaLabel;
+    }
+    if (partialSelected) {
+      return partialSelectedAriaLabel;
+    }
+    return noneSelectedAriaLabel;
+  };
+
+  const checkboxTooltip = <Tooltip id={`${id || Date.now()}_tip`}>{getTipText()}</Tooltip>;
+
+  let iconName;
+  if (allSelected) {
+    iconName = 'check-square';
+  } else if (partialSelected) {
+    iconName = 'minus-square';
+  } else {
+    iconName = 'square-o';
+  }
+
   return (
-    <Grid.Row className={classes} {...props}>
+    <Grid.Row id={id} className={classes} {...props}>
+      {showCheckbox && (
+        <div className="table-grid-pf-checkbox">
+          <OverlayTrigger delay={500} overlay={checkboxTooltip}>
+            <Button bsStyle="link" onClick={onToggleSelection} aria-label={getAriaLabel()}>
+              <Icon type="fa" name={iconName} />
+            </Button>
+          </OverlayTrigger>
+        </div>
+      )}
       {children}
     </Grid.Row>
   );
 };
 
 TableGridHead.propTypes = {
+  /** Id */
+  id: PropTypes.any,
   /** Children nodes */
   children: PropTypes.node,
   /** Additional css classes */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /** Flag to show the Header Checkbox  */
+  showCheckbox: PropTypes.bool,
+  /** Flag if all items are selected (showCheckbox only) */
+  allSelected: PropTypes.bool,
+  /** Flag if some of the items are selected  (showCheckbox only) */
+  partialSelected: PropTypes.bool,
+  /** Callback function for checkbox toggle (showCheckbox only) */
+  onToggleSelection: PropTypes.func,
+  /** Text for the toggle tooltip (showCheckbox only) */
+  toggleTip: PropTypes.string,
+  /** Screen reader text for All Selected (showCheckbox only) */
+  allSelectedAriaLabel: PropTypes.string,
+  /** Screen reader text for Partial Selected (showCheckbox only) */
+  partialSelectedAriaLabel: PropTypes.string,
+  /** Screen reader text for None Selected (showCheckbox only) */
+  noneSelectedAriaLabel: PropTypes.string
 };
 TableGridHead.defaultProps = {
+  id: null,
   children: null,
-  className: ''
+  className: '',
+  showCheckbox: false,
+  allSelected: false,
+  partialSelected: false,
+  onToggleSelection: noop,
+  toggleTip: null,
+  allSelectedAriaLabel: 'Click to deselect all',
+  partialSelectedAriaLabel: 'Click to deselect all',
+  noneSelectedAriaLabel: 'Click to select all'
 };
 
 export default TableGridHead;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridRow.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridRow.js
index b41ec45af3c..fd5712cbbd4 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridRow.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridRow.js
@@ -1,16 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Grid } from 'patternfly-react';
+import { Grid, noop } from 'patternfly-react';
 
 /**
  * TableGridRow Component for PatternFly
  */
 
-const TableGridRow = ({ children, className, ...props }) => {
-  const classes = classNames('table-grid-pf-row', className);
+const TableGridRow = ({ children, className, selected, onToggleSelection, checkboxAriaLabel, ...props }) => {
+  const classes = classNames('table-grid-pf-row', { active: selected }, className);
   return (
     <Grid.Row className={classes} {...props}>
+      <div className="table-grid-pf-checkbox">
+        <input type="checkbox" checked={selected} onChange={onToggleSelection} aria-label={checkboxAriaLabel} />
+      </div>
       {children}
     </Grid.Row>
   );
@@ -20,11 +23,21 @@ TableGridRow.propTypes = {
   /** Children nodes */
   children: PropTypes.node,
   /** Additional css classes */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /** Flag if the row is selected */
+  selected: PropTypes.bool,
+  /** Callback function for checkbox toggle  (checkbox selection only) */
+  onToggleSelection: PropTypes.func,
+  /** Aria label for the checkbox (checkbox selection only) */
+  checkboxAriaLabel: PropTypes.string
 };
+
 TableGridRow.defaultProps = {
   children: null,
-  className: ''
+  className: '',
+  selected: false,
+  onToggleSelection: noop,
+  checkboxAriaLabel: 'Select'
 };
 
 export default TableGridRow;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/__snapshots__/TableGrid.test.js.snap b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/__snapshots__/TableGrid.test.js.snap
index 40ff241e0e8..952060ffe7e 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/__snapshots__/TableGrid.test.js.snap
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/__snapshots__/TableGrid.test.js.snap
@@ -1,5 +1,140 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Bordered TableGrid renders properly 1`] = `
+<div
+  class="table-grid-pf bordered"
+  id="table-grid"
+>
+  <div
+    class="table-grid-pf-head row"
+  >
+    <div
+      class="table-grid-pf-column-header text-nowrap active-sort test-class "
+      id="title"
+    >
+      <button
+        class="btn btn-link"
+        type="button"
+      >
+        Column 1
+        <span
+          aria-hidden="true"
+          class="pficon pficon-sort-common-asc table-grid-pf-header-sort-arrow"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Column 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap descending "
+    />
+    <div
+      class="table-grid-pf-column-header text-nowrap descending "
+    >
+      <div>
+        <span>
+          test 1
+        </span>
+        <span>
+          and two
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-body test-grid-body"
+    id="test-grid-body"
+  >
+    <div
+      class="table-grid-pf-row test-grid-row row"
+      id="test-grid-row"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="test-col1 "
+        id="test-col-1"
+      >
+        item 1 column 1
+      </div>
+      <div
+        class="test-col2 "
+        id="test-col-2"
+      >
+        item 1 column 2
+      </div>
+      <div
+        class="test-col3 "
+        id="test-col-3"
+      >
+        item 1 column 3
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        item 1 column 4
+      </div>
+    </div>
+    <div
+      class="table-grid-pf-row row"
+      id="test-grid-row-2"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class=""
+        id="test-row-2-col-1"
+      >
+        item 2 column 1
+      </div>
+      <div
+        class="test-col2 "
+        id="two-children"
+      >
+        <span>
+          item 1
+        </span>
+        <span>
+          column 2
+        </span>
+      </div>
+      <div
+        class="test-col3 "
+        id="icon-name"
+      >
+        <span
+          aria-hidden="true"
+          class="pficon pficon-error-circle-o"
+        />
+        Danger
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        item 2 column 4
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`TableGrid renders properly 1`] = `
 <div
   class="table-grid-pf bordered"
@@ -52,6 +187,14 @@ exports[`TableGrid renders properly 1`] = `
       class="table-grid-pf-row test-grid-row row"
       id="test-grid-row"
     >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
       <div
         class="test-col1 "
         id="test-col-1"
@@ -81,6 +224,14 @@ exports[`TableGrid renders properly 1`] = `
       class="table-grid-pf-row row"
       id="test-grid-row-2"
     >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
       <div
         class=""
         id="test-row-2-col-1"
@@ -118,3 +269,798 @@ exports[`TableGrid renders properly 1`] = `
   </div>
 </div>
 `;
+
+exports[`TableGrid with Cell select renders properly 1`] = `
+<div
+  class="table-grid-pf bordered cell-select"
+  id="table-grid"
+>
+  <div
+    class="table-grid-pf-head row"
+  >
+    <div
+      class="table-grid-pf-column-header text-nowrap active-sort test-class "
+      id="title"
+    >
+      <button
+        class="btn btn-link"
+        type="button"
+      >
+        Column 1
+        <span
+          aria-hidden="true"
+          class="pficon pficon-sort-common-asc table-grid-pf-header-sort-arrow"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Column 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap descending "
+    />
+    <div
+      class="table-grid-pf-column-header text-nowrap descending "
+    >
+      <div>
+        <span>
+          test 1
+        </span>
+        <span>
+          and two
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-body test-grid-body"
+    id="test-grid-body"
+  >
+    <div
+      class="table-grid-pf-row test-grid-row row"
+      id="test-grid-row"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="test-col1 "
+        id="test-col-1"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 1 column 1
+        </span>
+      </div>
+      <div
+        class="test-col2 "
+        id="test-col-2"
+      >
+        <span
+          class="table-grid-pf-col active"
+        >
+          item 1 column 2
+        </span>
+      </div>
+      <div
+        class="test-col3 "
+        id="test-col-3"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 1 column 3
+        </span>
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 1 column 4
+        </span>
+      </div>
+    </div>
+    <div
+      class="table-grid-pf-row row"
+      id="test-grid-row-2-selected"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class=""
+        id="test-row-2-col-1"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 2 column 1
+        </span>
+      </div>
+      <div
+        class="test-col2 "
+        id="two-children"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          <span>
+            item 1
+          </span>
+          <span>
+            column 2
+          </span>
+        </span>
+      </div>
+      <div
+        class="test-col3 "
+        id="icon-name"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          <span
+            aria-hidden="true"
+            class="pficon pficon-error-circle-o"
+          />
+          Danger
+        </span>
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 2 column 4
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TableGrid with Checkbox select renders properly 1`] = `
+<div
+  class="table-grid-pf bordered checkbox-select"
+  id="table-grid"
+>
+  <div
+    class="table-grid-pf-head row"
+  >
+    <div
+      class="table-grid-pf-checkbox"
+    >
+      <button
+        aria-label="Click to deselect all"
+        class="btn btn-link"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-check-square"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap active-sort test-class "
+      id="title"
+    >
+      <button
+        class="btn btn-link"
+        type="button"
+      >
+        Column 1
+        <span
+          aria-hidden="true"
+          class="pficon pficon-sort-common-asc table-grid-pf-header-sort-arrow"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Column 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap descending "
+    />
+    <div
+      class="table-grid-pf-column-header text-nowrap descending "
+    >
+      <div>
+        <span>
+          test 1
+        </span>
+        <span>
+          and two
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-body test-grid-body"
+    id="test-grid-body"
+  >
+    <div
+      class="table-grid-pf-row test-grid-row row"
+      id="test-grid-row"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="test arial label"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="test-col1 "
+        id="test-col-1"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 1 column 1
+        </span>
+      </div>
+      <div
+        class="test-col2 "
+        id="test-col-2"
+      >
+        <span
+          class="table-grid-pf-col active"
+        >
+          item 1 column 2
+        </span>
+      </div>
+      <div
+        class="test-col3 "
+        id="test-col-3"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 1 column 3
+        </span>
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 1 column 4
+        </span>
+      </div>
+    </div>
+    <div
+      class="table-grid-pf-row row"
+      id="test-grid-row-2-selected"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class=""
+        id="test-row-2-col-1"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 2 column 1
+        </span>
+      </div>
+      <div
+        class="test-col2 "
+        id="two-children"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          <span>
+            item 1
+          </span>
+          <span>
+            column 2
+          </span>
+        </span>
+      </div>
+      <div
+        class="test-col3 "
+        id="icon-name"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          <span
+            aria-hidden="true"
+            class="pficon pficon-error-circle-o"
+          />
+          Danger
+        </span>
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        <span
+          class="table-grid-pf-col"
+        >
+          item 2 column 4
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TableGrid with Row select renders properly 1`] = `
+<div
+  class="table-grid-pf bordered row-select"
+  id="table-grid"
+>
+  <div
+    class="table-grid-pf-head row"
+  >
+    <div
+      class="table-grid-pf-column-header text-nowrap active-sort test-class "
+      id="title"
+    >
+      <button
+        class="btn btn-link"
+        type="button"
+      >
+        Column 1
+        <span
+          aria-hidden="true"
+          class="pficon pficon-sort-common-asc table-grid-pf-header-sort-arrow"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Column 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap descending "
+    />
+    <div
+      class="table-grid-pf-column-header text-nowrap descending "
+    >
+      <div>
+        <span>
+          test 1
+        </span>
+        <span>
+          and two
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-body test-grid-body"
+    id="test-grid-body"
+  >
+    <div
+      class="table-grid-pf-row test-grid-row row"
+      id="test-grid-row"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="test-col1 "
+        id="test-col-1"
+      >
+        item 1 column 1
+      </div>
+      <div
+        class="test-col2 "
+        id="test-col-2"
+      >
+        item 1 column 2
+      </div>
+      <div
+        class="test-col3 "
+        id="test-col-3"
+      >
+        item 1 column 3
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        item 1 column 4
+      </div>
+    </div>
+    <div
+      class="table-grid-pf-row active row"
+      id="test-grid-row-2-selected"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class=""
+        id="test-row-2-col-1"
+      >
+        item 2 column 1
+      </div>
+      <div
+        class="test-col2 "
+        id="two-children"
+      >
+        <span>
+          item 1
+        </span>
+        <span>
+          column 2
+        </span>
+      </div>
+      <div
+        class="test-col3 "
+        id="icon-name"
+      >
+        <span
+          aria-hidden="true"
+          class="pficon pficon-error-circle-o"
+        />
+        Danger
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        item 2 column 4
+      </div>
+    </div>
+    <div
+      class="table-grid-pf-row row"
+      id="test-grid-row-3"
+    >
+      <div
+        class="table-grid-pf-checkbox"
+      >
+        <input
+          aria-label="Select"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class=""
+        id="test-row-3-col-1"
+      >
+        item 3 column 1
+      </div>
+      <div
+        class="test-col3 "
+        id="two-children"
+      >
+        <span>
+          item 3
+        </span>
+        <span>
+          column 2
+        </span>
+      </div>
+      <div
+        class="test-col3 "
+        id="icon-name"
+      >
+        <span
+          aria-hidden="true"
+          class="pficon pficon-error-circle-o"
+        />
+        Danger
+      </div>
+      <div
+        class="test-col4 "
+        id="test-col-4"
+      >
+        item 3 column 4
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TableGridHead renders options properly 1`] = `
+<div
+  class="table-grid-pf bordered checkbox-select"
+  id="table-grid"
+>
+  <div
+    class="table-grid-pf-head row"
+    id="all-selected-no-checkbox"
+  >
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 1
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 3
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-head row"
+    id="none-selected"
+  >
+    <div
+      class="table-grid-pf-checkbox"
+    >
+      <button
+        aria-label="Click to select all"
+        class="btn btn-link"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-square-o"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 1
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 3
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-head row"
+    id="all-selected"
+  >
+    <div
+      class="table-grid-pf-checkbox"
+    >
+      <button
+        aria-label="Click to deselect all"
+        class="btn btn-link"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-check-square"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 1
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 3
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-head row"
+    id="partial-selected"
+  >
+    <div
+      class="table-grid-pf-checkbox"
+    >
+      <button
+        aria-label="Click to deselect all"
+        class="btn btn-link"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-minus-square"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 1
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 3
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-head row"
+    id="custom-tip"
+  >
+    <div
+      class="table-grid-pf-checkbox"
+    >
+      <button
+        aria-label="Click to deselect all"
+        class="btn btn-link"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-check-square"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 1
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 3
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-head row"
+    id="none-selected-custom-sr-text"
+  >
+    <div
+      class="table-grid-pf-checkbox"
+    >
+      <button
+        aria-label="Test No Selected SR Text"
+        class="btn btn-link"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-square-o"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 1
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 3
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-head row"
+    id="all-selected-custom-sr-text"
+  >
+    <div
+      class="table-grid-pf-checkbox"
+    >
+      <button
+        aria-label="Test All Selected SR Text"
+        class="btn btn-link"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-check-square"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 1
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 3
+    </div>
+  </div>
+  <div
+    class="table-grid-pf-head row"
+    id="partial-selected-custom-sr-text"
+  >
+    <div
+      class="table-grid-pf-checkbox"
+    >
+      <button
+        aria-label="Test Partial Selected SR Text"
+        class="btn btn-link"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-minus-square"
+        />
+      </button>
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 1
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 2
+    </div>
+    <div
+      class="table-grid-pf-column-header text-nowrap "
+    >
+      Col 3
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/_mocks_/mockTableGridExample.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/_mocks_/mockTableGridExample.js
index 69fce979e8e..4ebe2ff94d0 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/_mocks_/mockTableGridExample.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/_mocks_/mockTableGridExample.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TableGrid from '../TableGrid';
-import { Grid, OverlayTrigger, Tooltip } from 'patternfly-react';
+import { OverlayTrigger, Tooltip } from 'patternfly-react';
 import { mockItems } from './mockItems';
 
 const titleColSizes = {
@@ -24,7 +24,10 @@ class MockTableGridExample extends React.Component {
   state = {
     sortField: 'title',
     isAscending: true,
-    items: mockItems
+    items: mockItems,
+    selectedItem: null,
+    selectedField: null,
+    selectedItems: []
   };
 
   onSortToggle = id => {
@@ -55,21 +58,82 @@ class MockTableGridExample extends React.Component {
     this.setState({ items, sortField: id, isAscending: updateAscending });
   };
 
-  renderItemRow = (item, index) => (
-    <TableGrid.Row key={index}>
-      <Grid.Col {...titleColSizes}>{item.title}</Grid.Col>
-      <Grid.Col {...descrColSizes}>{item.description}</Grid.Col>
-      <Grid.Col {...countColSizes}>{item.hosts}</Grid.Col>
-      <Grid.Col {...countColSizes}>{item.clusters}</Grid.Col>
-    </TableGrid.Row>
-  );
+  onSelect = (item, field) => {
+    this.setState({ selectedItem: item, selectedField: field });
+  };
+
+  toggleSelection = item => {
+    const { selectedItems } = this.state;
+    let newSelections;
+    const index = selectedItems.indexOf(item);
+
+    if (index >= 0) {
+      newSelections = [...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)];
+    } else {
+      newSelections = [...selectedItems, item];
+    }
+    this.setState({ selectedItems: newSelections });
+  };
+
+  toggleAllSelections = () => {
+    const { items, selectedItems } = this.state;
+    this.setState({ selectedItems: selectedItems.length > 0 ? [] : [...items] });
+  };
+
+  renderItemRow = (item, index) => {
+    const { selectType } = this.props;
+    const { selectedItem, selectedField, selectedItems } = this.state;
+    const selected = selectType === 'checkbox' ? selectedItems.indexOf(item) >= 0 : selectedItem === item;
+    return (
+      <TableGrid.Row
+        key={index}
+        onClick={() => selectType === 'row' && this.onSelect(item)}
+        selected={(selectType === 'row' || selectType === 'checkbox') && selected}
+        onToggleSelection={() => this.toggleSelection(item)}
+      >
+        <TableGrid.Col
+          {...titleColSizes}
+          onClick={() => selectType === 'cell' && this.onSelect(item, 'title')}
+          selected={selectType === 'cell' && selected && selectedField === 'title'}
+        >
+          {item.title}
+        </TableGrid.Col>
+        <TableGrid.Col
+          {...descrColSizes}
+          onClick={() => selectType === 'cell' && this.onSelect(item, 'description')}
+          selected={selectType === 'cell' && selected && selectedField === 'description'}
+        >
+          {item.description}
+        </TableGrid.Col>
+        <TableGrid.Col
+          {...countColSizes}
+          onClick={() => selectType === 'cell' && this.onSelect(item, 'hosts')}
+          selected={selectType === 'cell' && selected && selectedField === 'hosts'}
+        >
+          {item.hosts}
+        </TableGrid.Col>
+        <TableGrid.Col
+          {...countColSizes}
+          onClick={() => selectType === 'cell' && this.onSelect(item, 'clusters')}
+          selected={selectType === 'cell' && selected && selectedField === 'clusters'}
+        >
+          {item.clusters}
+        </TableGrid.Col>
+      </TableGrid.Row>
+    );
+  };
 
   render() {
-    const { items, sortField, isAscending } = this.state;
-    const { bordered } = this.props;
+    const { items, selectedItems, sortField, isAscending } = this.state;
+    const { bordered, selectType } = this.props;
     return (
-      <TableGrid id="table-grid" bordered={bordered}>
-        <TableGrid.Head>
+      <TableGrid id="table-grid" bordered={bordered} selectType={selectType}>
+        <TableGrid.Head
+          showCheckbox={selectType === 'checkbox'}
+          allSelected={selectType === 'checkbox' && selectedItems.length === items.length}
+          partialSelected={selectType === 'checkbox' && selectedItems.length > 0 && selectedItems.length < items.length}
+          onToggleSelection={this.toggleAllSelections}
+        >
           <TableGrid.ColumnHeader
             id="title"
             sortable
@@ -121,11 +185,13 @@ class MockTableGridExample extends React.Component {
 }
 
 MockTableGridExample.propTypes = {
-  bordered: PropTypes.bool
+  bordered: PropTypes.bool,
+  selectType: PropTypes.oneOf(['row', 'cell', 'checkbox', 'none'])
 };
 
 MockTableGridExample.defaultProps = {
-  bordered: false
+  bordered: false,
+  selectType: 'none'
 };
 
 export { MockTableGridExample };
@@ -134,7 +200,7 @@ export const MockTableGridExampleSource = `
 import React from 'react';
 import PropTypes from 'prop-types';
 import TableGrid from '../TableGrid';
-import { Grid, OverlayTrigger, Tooltip } from 'patternfly-react';
+import { OverlayTrigger, Tooltip } from 'patternfly-react';
 import { mockItems } from './mockItems';
 
 const titleColSizes = {
@@ -157,7 +223,10 @@ class MockTableGridExample extends React.Component {
   state = {
     sortField: 'title',
     isAscending: true,
-    items: mockItems
+    items: mockItems,
+    selectedItem: null,
+    selectedField: null,
+    selectedItems: []
   };
 
   onSortToggle = id => {
@@ -188,21 +257,82 @@ class MockTableGridExample extends React.Component {
     this.setState({ items, sortField: id, isAscending: updateAscending });
   };
 
-  renderItemRow = (item, index) => (
-    <TableGrid.Row key={index}>
-      <Grid.Col {...titleColSizes}>{item.title}</Grid.Col>
-      <Grid.Col {...descrColSizes}>{item.description}</Grid.Col>
-      <Grid.Col {...countColSizes}>{item.hosts}</Grid.Col>
-      <Grid.Col {...countColSizes}>{item.clusters}</Grid.Col>
-    </TableGrid.Row>
-  );
+  onSelect = (item, field) => {
+    this.setState({ selectedItem: item, selectedField: field });
+  };
+
+  toggleSelection = item => {
+    const { selectedItems } = this.state;
+    let newSelections;
+    const index = selectedItems.indexOf(item);
+
+    if (index >= 0) {
+      newSelections = [...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)];
+    } else {
+      newSelections = [...selectedItems, item];
+    }
+    this.setState({ selectedItems: newSelections });
+  };
+
+  toggleAllSelections = () => {
+    const { items, selectedItems } = this.state;
+    this.setState({ selectedItems: selectedItems.length > 0 ? [] : [...items] });
+  };
+
+  renderItemRow = (item, index) => {
+    const { selectType } = this.props;
+    const { selectedItem, selectedField, selectedItems } = this.state;
+    const selected = selectType === 'checkbox' ? selectedItems.indexOf(item) >= 0 : selectedItem === item;
+    return (
+      <TableGrid.Row
+        key={index}
+        onClick={() => selectType === 'row' && this.onSelect(item)}
+        selected={(selectType === 'row' || selectType === 'checkbox') && selected}
+        onToggleSelection={() => this.toggleSelection(item)}
+      >
+        <TableGrid.Col
+          {...titleColSizes}
+          onClick={() => selectType === 'cell' && this.onSelect(item, 'title')}
+          selected={selectType === 'cell' && selected && selectedField === 'title'}
+        >
+          {item.title}
+        </TableGrid.Col>
+        <TableGrid.Col
+          {...descrColSizes}
+          onClick={() => selectType === 'cell' && this.onSelect(item, 'description')}
+          selected={selectType === 'cell' && selected && selectedField === 'description'}
+        >
+          {item.description}
+        </TableGrid.Col>
+        <TableGrid.Col
+          {...countColSizes}
+          onClick={() => selectType === 'cell' && this.onSelect(item, 'hosts')}
+          selected={selectType === 'cell' && selected && selectedField === 'hosts'}
+        >
+          {item.hosts}
+        </TableGrid.Col>
+        <TableGrid.Col
+          {...countColSizes}
+          onClick={() => selectType === 'cell' && this.onSelect(item, 'clusters')}
+          selected={selectType === 'cell' && selected && selectedField === 'clusters'}
+        >
+          {item.clusters}
+        </TableGrid.Col>
+      </TableGrid.Row>
+    );
+  };
 
   render() {
-    const { items, sortField, isAscending } = this.state;
-    const { bordered } = this.props;
+    const { items, selectedItems, sortField, isAscending } = this.state;
+    const { bordered, selectType } = this.props;
     return (
-      <TableGrid id="table-grid" bordered={bordered}>
-        <TableGrid.Head>
+      <TableGrid id="table-grid" bordered={bordered} selectType={selectType}>
+        <TableGrid.Head
+          showCheckbox={selectType === 'checkbox'}
+          allSelected={selectType === 'checkbox' && selectedItems.length === items.length}
+          partialSelected={selectType === 'checkbox' && selectedItems.length > 0 && selectedItems.length < items.length}
+          onToggleSelection={this.toggleAllSelections}
+        >
           <TableGrid.ColumnHeader
             id="title"
             sortable
@@ -254,11 +384,13 @@ class MockTableGridExample extends React.Component {
 }
 
 MockTableGridExample.propTypes = {
-  bordered: PropTypes.bool
+  bordered: PropTypes.bool,
+  selectType: PropTypes.oneOf(['row', 'cell', 'checkbox', 'none'])
 };
 
 MockTableGridExample.defaultProps = {
-  bordered: false
+  bordered: false,
+  selectType: 'none'
 };
 
 export { MockTableGridExample };
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/index.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/index.js
index 9e8bdadf8f8..ca777388bef 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/index.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/index.js
@@ -3,5 +3,6 @@ import TableGridHead from './TableGridHead';
 import TableGridColumnHeader from './TableGridColumnHeader';
 import TableGridBody from './TableGridBody';
 import TableGridRow from './TableGridRow';
+import TableGridCol from './TableGridCol';
 
-export { TableGrid, TableGridHead, TableGridColumnHeader, TableGridBody, TableGridRow };
+export { TableGrid, TableGridHead, TableGridColumnHeader, TableGridBody, TableGridRow, TableGridCol };
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.stories.js b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.stories.js
index 56c3d3b1968..cf38c8ba050 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.stories.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.stories.js
@@ -7,7 +7,7 @@ import { VerticalTabs, VerticalTabsTab } from './index';
 import { MockVerticalTabsExample, MockVerticalTabsExampleSource } from './_mocks_/mockVerticalTabsExample';
 
 import { name } from '../../../package.json';
-import { boolean, withKnobs } from '@storybook/addon-knobs';
+import { boolean, select, withKnobs } from '@storybook/addon-knobs';
 
 const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Vertical Tabs`, module);
 
@@ -25,6 +25,9 @@ const description = (
     <i>VerticalTab</i> as well as the <b>active</b> (this tab is active) and <b>hasActiveDescendant</b> (a child of this
     tab is active) properties on the <i>VerticalTab.Tab</i>. Setting the <b>shown</b> property on a
     <i>VerticalTab.Tab</i> will always show the tab if its parent tab is shown.
+    <br />
+    <br />
+    Note: the width and border styling is not part of the VerticalTabs component.
   </div>
 );
 stories.addDecorator(withKnobs);
@@ -42,7 +45,12 @@ stories.add(
     )
   })(() => {
     const restrictTabs = boolean('Restrict Tabs', false);
-    const story = <MockVerticalTabsExample restrictTabs={restrictTabs} />;
+    const wrapStyle = select('Wrap Style', { wrap: 'Word - Default', truncate: 'Truncate', nowrap: 'No Wrap' }, 'wrap');
+    const story = (
+      <div style={{ width: '195px', border: '1px solid grey' }}>
+        <MockVerticalTabsExample restrictTabs={restrictTabs} wrapStyle={wrapStyle} />
+      </div>
+    );
     return inlineTemplate({
       title: 'Vertical Tabs',
       description,
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.test.js b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.test.js
index 9149b9d3dd0..a7bd66882f8 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.test.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabs.test.js
@@ -7,22 +7,30 @@ test('Vertical Tabs renders tabs properly', () => {
     <VerticalTabs id="vertical-tabs" className="test-vertical-tabs">
       <VerticalTabs.Tab id="all" className="test-vertical-tabs-tab" title="All" />
       <VerticalTabs.Tab id="one" title="Tab One">
-        <VerticalTabs.Tab key="one-one" id="one-one" title="Tab One-One">
-          <VerticalTabs.Tab key="one-one-one" id="one-one-one" title="Tab One-One-One" active />
-          <VerticalTabs.Tab key="one-one-two" id="one-one-two" title="Tab One-One-Two" active={false} />
-          <VerticalTabs.Tab key="one-one-three" id="one-one-three" title="Tab One-One-Three" />
-        </VerticalTabs.Tab>
-        <VerticalTabs.Tab key="one-two" id="one-two" title="Tab One-Two" />
-        <VerticalTabs.Tab key="one-three" id="one-three" title="Tab One-Three" />
+        <VerticalTabs>
+          <VerticalTabs.Tab key="one-one" id="one-one" title="Tab One-One">
+            <VerticalTabs activeTab>
+              <VerticalTabs.Tab key="one-one-one" id="one-one-one" title="Tab One-One-One" active />
+              <VerticalTabs.Tab key="one-one-two" id="one-one-two" title="Tab One-One-Two" active={false} />
+              <VerticalTabs.Tab key="one-one-three" id="one-one-three" title="Tab One-One-Three" />
+            </VerticalTabs>
+          </VerticalTabs.Tab>
+          <VerticalTabs.Tab key="one-two" id="one-two" title="Tab One-Two" />
+          <VerticalTabs.Tab key="one-three" id="one-three" title="Tab One-Three" />
+        </VerticalTabs>
       </VerticalTabs.Tab>
       <VerticalTabs.Tab id="two" title="Tab Two" className="test-tab-class">
-        <VerticalTabs.Tab key="one-one-one" id="two-one" title="Tab Two-One" />
-        <VerticalTabs.Tab key="one-one-two" id="two-two" title="Tab Two-Two" />
-        <VerticalTabs.Tab key="one-one-three" id="two-three" title="Tab Two-Three" />
+        <VerticalTabs>
+          <VerticalTabs.Tab key="one-one-one" id="two-one" title="Tab Two-One" />
+          <VerticalTabs.Tab key="one-one-two" id="two-two" title="Tab Two-Two" />
+          <VerticalTabs.Tab key="one-one-three" id="two-three" title="Tab Two-Three" />
+        </VerticalTabs>
       </VerticalTabs.Tab>
       <VerticalTabs.Tab id="three" title="Tab Three">
-        <VerticalTabs.Tab key="three-one" id="three-one" title="Tab Three-One" />
-        <VerticalTabs.Tab key="three-two" id="three-two" title="Tab Three-Two" />
+        <VerticalTabs>
+          <VerticalTabs.Tab key="three-one" id="three-one" title="Tab Three-One" />
+          <VerticalTabs.Tab key="three-two" id="three-two" title="Tab Three-Two" />
+        </VerticalTabs>
       </VerticalTabs.Tab>
       <VerticalTabs.Tab id="four" title="Tab Four" />
       <VerticalTabs.Tab id="five" title="Tab Five" />
@@ -71,3 +79,26 @@ test('Vertical Tabs renders restricted tabs properly', () => {
   );
   expect(component.render()).toMatchSnapshot();
 });
+
+test('Vertical Tabs Tab onActivate is called correctly', () => {
+  const onActivateMock = jest.fn();
+
+  const component = mount(<VerticalTabs.Tab id="text-click" title="Click Me" onActivate={onActivateMock} />);
+  component.find('#text-click > a').simulate('click');
+
+  expect(component.render()).toMatchSnapshot();
+  expect(onActivateMock).toBeCalled();
+});
+
+test('Vertical Tabs Tab wrap styling is set correctly', () => {
+  const component = mount(
+    <div>
+      <VerticalTabs.Tab id="default-wrap" title="Default Wrap" />
+      <VerticalTabs.Tab id="word-wrap" title="Word Wrap" wrapStyle="wrap" />
+      <VerticalTabs.Tab id="truncate" title="Truncate" wrapStyle="truncate" />
+      <VerticalTabs.Tab id="no-wrap" title="No Wrap" wrapStyle="nowrap" />
+    </div>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabsTab.js b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabsTab.js
index 9a03b858f1f..aefb989513f 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabsTab.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/VerticalTabsTab.js
@@ -1,20 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Button, noop } from 'patternfly-react';
 
-const VerticalTabsTab = ({ children, className, title, active, hasActiveDescendant, shown, onActivate, ...props }) => {
+const VerticalTabsTab = ({
+  children,
+  className,
+  title,
+  wrapStyle,
+  active,
+  hasActiveDescendant,
+  shown,
+  onActivate,
+  ...props
+}) => {
   const classes = classNames(
     'vertical-tabs-pf-tab',
     { active, 'active-descendant': hasActiveDescendant, shown },
     className
   );
 
+  const linkClasses = classNames({
+    'no-wrap': wrapStyle === 'nowrap',
+    truncate: wrapStyle === 'truncate'
+  });
+
+  const handleActivate = e => {
+    e.preventDefault();
+    if (onActivate) {
+      onActivate();
+    }
+  };
+
   return (
     <li className={classes} {...props}>
-      <Button bsStyle="link" onClick={onActivate}>
+      <a className={linkClasses} onClick={e => handleActivate(e)} href="#">
         {title}
-      </Button>
+      </a>
       {children}
     </li>
   );
@@ -27,6 +48,8 @@ VerticalTabsTab.propTypes = {
   className: PropTypes.string,
   /** Title for the tab */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Title wrap style */
+  wrapStyle: PropTypes.oneOf(['wrap', 'truncate', 'nowrap']),
   /** Flag if this is the active tab */
   active: PropTypes.bool,
   /** Flag if a descendant tab is active (used only in restrictTabs mode) */
@@ -41,10 +64,11 @@ VerticalTabsTab.defaultProps = {
   children: null,
   className: '',
   title: null,
+  wrapStyle: 'wrap',
   active: false,
   hasActiveDescendant: false,
   shown: false,
-  onActivate: noop
+  onActivate: null
 };
 
 export default VerticalTabsTab;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/__snapshots__/VerticalTabs.test.js.snap b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/__snapshots__/VerticalTabs.test.js.snap
index a2fc75bf994..3d9c0deb073 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/__snapshots__/VerticalTabs.test.js.snap
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/__snapshots__/VerticalTabs.test.js.snap
@@ -1,5 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Vertical Tabs Tab onActivate is called correctly 1`] = `
+<li
+  class="vertical-tabs-pf-tab"
+  id="text-click"
+>
+  <a
+    class=""
+    href="#"
+  >
+    Click Me
+  </a>
+</li>
+`;
+
+exports[`Vertical Tabs Tab wrap styling is set correctly 1`] = `
+<div>
+  <li
+    class="vertical-tabs-pf-tab"
+    id="default-wrap"
+  >
+    <a
+      class=""
+      href="#"
+    >
+      Default Wrap
+    </a>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab"
+    id="word-wrap"
+  >
+    <a
+      class=""
+      href="#"
+    >
+      Word Wrap
+    </a>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab"
+    id="truncate"
+  >
+    <a
+      class="truncate"
+      href="#"
+    >
+      Truncate
+    </a>
+  </li>
+  <li
+    class="vertical-tabs-pf-tab"
+    id="no-wrap"
+  >
+    <a
+      class="no-wrap"
+      href="#"
+    >
+      No Wrap
+    </a>
+  </li>
+</div>
+`;
+
 exports[`Vertical Tabs renders restricted tabs properly 1`] = `
 <ul
   class="vertical-tabs-pf restrict-tabs test-vertical-tabs"
@@ -9,23 +72,23 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
     class="vertical-tabs-pf-tab shown test-vertical-tabs-tab"
     id="all"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       All
-    </button>
+    </a>
   </li>
   <li
     class="vertical-tabs-pf-tab active-descendant"
     id="one"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab One
-    </button>
+    </a>
     <ul
       class="vertical-tabs-pf restrict-tabs"
     >
@@ -33,12 +96,12 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
         class="vertical-tabs-pf-tab"
         id="one-one"
       >
-        <button
-          class="btn btn-link"
-          type="button"
+        <a
+          class=""
+          href="#"
         >
           Tab One-One
-        </button>
+        </a>
         <ul
           class="vertical-tabs-pf restrict-tabs active-tab"
         >
@@ -46,34 +109,34 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
             class="vertical-tabs-pf-tab active"
             id="one-one-one"
           >
-            <button
-              class="btn btn-link"
-              type="button"
+            <a
+              class=""
+              href="#"
             >
               Tab One-One-One
-            </button>
+            </a>
           </li>
           <li
             class="vertical-tabs-pf-tab"
             id="one-one-two"
           >
-            <button
-              class="btn btn-link"
-              type="button"
+            <a
+              class=""
+              href="#"
             >
               Tab One-One-Two
-            </button>
+            </a>
           </li>
           <li
             class="vertical-tabs-pf-tab"
             id="one-one-three"
           >
-            <button
-              class="btn btn-link"
-              type="button"
+            <a
+              class=""
+              href="#"
             >
               Tab One-One-Three
-            </button>
+            </a>
           </li>
         </ul>
       </li>
@@ -81,23 +144,23 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
         class="vertical-tabs-pf-tab"
         id="one-two"
       >
-        <button
-          class="btn btn-link"
-          type="button"
+        <a
+          class=""
+          href="#"
         >
           Tab One-Two
-        </button>
+        </a>
       </li>
       <li
         class="vertical-tabs-pf-tab"
         id="one-three"
       >
-        <button
-          class="btn btn-link"
-          type="button"
+        <a
+          class=""
+          href="#"
         >
           Tab One-Three
-        </button>
+        </a>
       </li>
     </ul>
   </li>
@@ -105,12 +168,12 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
     class="vertical-tabs-pf-tab test-tab-class"
     id="two"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Two
-    </button>
+    </a>
     <ul
       class="vertical-tabs-pf restrict-tabs active-tab"
     >
@@ -118,34 +181,34 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
         class="vertical-tabs-pf-tab active"
         id="two-one"
       >
-        <button
-          class="btn btn-link"
-          type="button"
+        <a
+          class=""
+          href="#"
         >
           Tab Two-One
-        </button>
+        </a>
       </li>
       <li
         class="vertical-tabs-pf-tab"
         id="two-two"
       >
-        <button
-          class="btn btn-link"
-          type="button"
+        <a
+          class=""
+          href="#"
         >
           Tab Two-Two
-        </button>
+        </a>
       </li>
       <li
         class="vertical-tabs-pf-tab"
         id="two-three"
       >
-        <button
-          class="btn btn-link"
-          type="button"
+        <a
+          class=""
+          href="#"
         >
           Tab Two-Three
-        </button>
+        </a>
       </li>
     </ul>
   </li>
@@ -153,12 +216,12 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
     class="vertical-tabs-pf-tab"
     id="three"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Three
-    </button>
+    </a>
     <ul
       class="vertical-tabs-pf restrict-tabs"
     >
@@ -166,23 +229,23 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
         class="vertical-tabs-pf-tab"
         id="three-one"
       >
-        <button
-          class="btn btn-link"
-          type="button"
+        <a
+          class=""
+          href="#"
         >
           Tab Three-One
-        </button>
+        </a>
       </li>
       <li
         class="vertical-tabs-pf-tab"
         id="three-two"
       >
-        <button
-          class="btn btn-link"
-          type="button"
+        <a
+          class=""
+          href="#"
         >
           Tab Three-Two
-        </button>
+        </a>
       </li>
     </ul>
   </li>
@@ -190,45 +253,45 @@ exports[`Vertical Tabs renders restricted tabs properly 1`] = `
     class="vertical-tabs-pf-tab"
     id="four"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Four
-    </button>
+    </a>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="five"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Five
-    </button>
+    </a>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="six"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Six
-    </button>
+    </a>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="seven"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Seven
-    </button>
+    </a>
   </li>
 </ul>
 `;
@@ -242,210 +305,226 @@ exports[`Vertical Tabs renders tabs properly 1`] = `
     class="vertical-tabs-pf-tab test-vertical-tabs-tab"
     id="all"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       All
-    </button>
+    </a>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="one"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab One
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="one-one"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Tab One-One
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab active"
-    id="one-one-one"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Tab One-One-One
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="one-one-two"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Tab One-One-Two
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="one-one-three"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Tab One-One-Three
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="one-two"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Tab One-Two
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="one-three"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
+    </a>
+    <ul
+      class="vertical-tabs-pf"
     >
-      Tab One-Three
-    </button>
+      <li
+        class="vertical-tabs-pf-tab"
+        id="one-one"
+      >
+        <a
+          class=""
+          href="#"
+        >
+          Tab One-One
+        </a>
+        <ul
+          class="vertical-tabs-pf active-tab"
+        >
+          <li
+            class="vertical-tabs-pf-tab active"
+            id="one-one-one"
+          >
+            <a
+              class=""
+              href="#"
+            >
+              Tab One-One-One
+            </a>
+          </li>
+          <li
+            class="vertical-tabs-pf-tab"
+            id="one-one-two"
+          >
+            <a
+              class=""
+              href="#"
+            >
+              Tab One-One-Two
+            </a>
+          </li>
+          <li
+            class="vertical-tabs-pf-tab"
+            id="one-one-three"
+          >
+            <a
+              class=""
+              href="#"
+            >
+              Tab One-One-Three
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li
+        class="vertical-tabs-pf-tab"
+        id="one-two"
+      >
+        <a
+          class=""
+          href="#"
+        >
+          Tab One-Two
+        </a>
+      </li>
+      <li
+        class="vertical-tabs-pf-tab"
+        id="one-three"
+      >
+        <a
+          class=""
+          href="#"
+        >
+          Tab One-Three
+        </a>
+      </li>
+    </ul>
   </li>
   <li
     class="vertical-tabs-pf-tab test-tab-class"
     id="two"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Two
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="two-one"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Tab Two-One
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="two-two"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Tab Two-Two
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="two-three"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
+    </a>
+    <ul
+      class="vertical-tabs-pf"
     >
-      Tab Two-Three
-    </button>
+      <li
+        class="vertical-tabs-pf-tab"
+        id="two-one"
+      >
+        <a
+          class=""
+          href="#"
+        >
+          Tab Two-One
+        </a>
+      </li>
+      <li
+        class="vertical-tabs-pf-tab"
+        id="two-two"
+      >
+        <a
+          class=""
+          href="#"
+        >
+          Tab Two-Two
+        </a>
+      </li>
+      <li
+        class="vertical-tabs-pf-tab"
+        id="two-three"
+      >
+        <a
+          class=""
+          href="#"
+        >
+          Tab Two-Three
+        </a>
+      </li>
+    </ul>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="three"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Three
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="three-one"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Tab Three-One
-    </button>
-  </li>
-  <li
-    class="vertical-tabs-pf-tab"
-    id="three-two"
-  >
-    <button
-      class="btn btn-link"
-      type="button"
+    </a>
+    <ul
+      class="vertical-tabs-pf"
     >
-      Tab Three-Two
-    </button>
+      <li
+        class="vertical-tabs-pf-tab"
+        id="three-one"
+      >
+        <a
+          class=""
+          href="#"
+        >
+          Tab Three-One
+        </a>
+      </li>
+      <li
+        class="vertical-tabs-pf-tab"
+        id="three-two"
+      >
+        <a
+          class=""
+          href="#"
+        >
+          Tab Three-Two
+        </a>
+      </li>
+    </ul>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="four"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Four
-    </button>
+    </a>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="five"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Five
-    </button>
+    </a>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="six"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Six
-    </button>
+    </a>
   </li>
   <li
     class="vertical-tabs-pf-tab"
     id="seven"
   >
-    <button
-      class="btn btn-link"
-      type="button"
+    <a
+      class=""
+      href="#"
     >
       Tab Seven
-    </button>
+    </a>
   </li>
 </ul>
 `;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/_mocks_/mockVerticalTabsExample.js b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/_mocks_/mockVerticalTabsExample.js
index fef5c6a6581..83caaaec106 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/_mocks_/mockVerticalTabsExample.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/_mocks_/mockVerticalTabsExample.js
@@ -12,178 +12,73 @@ class MockVerticalTabsExample extends React.Component {
   };
 
   render() {
-    const { restrictTabs } = this.props;
+    const { restrictTabs, wrapStyle } = this.props;
     const { activeTabId } = this.state;
 
-    const showAll = activeTabId === 'all';
-    const isTopLevelActive =
-      showAll ||
-      activeTabId === 'one' ||
-      activeTabId === 'two' ||
-      activeTabId === 'three' ||
-      activeTabId === 'four' ||
-      activeTabId === 'five' ||
-      activeTabId === 'six' ||
-      activeTabId === 'seven';
+    const topLevelIds = ['all', 'one', 'two', 'three', 'four', 'five', 'six', 'seven'];
 
-    return (
-      <VerticalTabs id="vertical-tabs" restrictTabs={restrictTabs} activeTab={isTopLevelActive}>
-        <VerticalTabs.Tab id="all" title="All" onActivate={() => this.onActivateTab('all')} active={showAll} shown />
-        <VerticalTabs.Tab
-          id="one"
-          title="Tab One"
-          onActivate={() => this.onActivateTab('one')}
-          active={activeTabId === 'one'}
-          hasActiveDescendant={activeTabId.startsWith('one')}
-        >
-          <VerticalTabs
-            restrictTabs={restrictTabs}
-            activeTab={activeTabId === 'one-one' || activeTabId === 'one-two' || activeTabId === 'one-three'}
-          >
-            <VerticalTabs.Tab
-              id="one-one"
-              title="Tab One-One"
-              onActivate={() => this.onActivateTab('one-one')}
-              active={activeTabId === 'one-one'}
-              hasActiveDescendant={activeTabId.startsWith('one-one')}
-            >
-              <VerticalTabs
-                restrictTabs={restrictTabs}
-                activeTab={
-                  activeTabId === 'one-one-one' || activeTabId === 'one-one-two' || activeTabId === 'one-one-three'
-                }
-              >
-                <VerticalTabs.Tab
-                  id="one-one-one"
-                  title="Tab One-One-One"
-                  onActivate={() => this.onActivateTab('one-one-one')}
-                  active={activeTabId === 'one-one-one'}
-                />
-                <VerticalTabs.Tab
-                  id="one-one-two"
-                  title="Tab One-One-Two"
-                  onActivate={() => this.onActivateTab('one-one-two')}
-                  active={activeTabId === 'one-one-two'}
-                />
-                <VerticalTabs.Tab
-                  id="one-one-three"
-                  title="Tab One-One-Three"
-                  onActivate={() => this.onActivateTab('one-one-three')}
-                  active={activeTabId === 'one-one-three'}
-                />
-              </VerticalTabs>
-            </VerticalTabs.Tab>
-            <VerticalTabs.Tab
-              id="one-two"
-              title="Tab One-Two"
-              onActivate={() => this.onActivateTab('one-two')}
-              active={activeTabId === 'one-two'}
-              hasActiveDescendant={activeTabId.startsWith('one-two')}
-            >
-              <VerticalTabs
-                restrictTabs={restrictTabs}
-                activeTab={
-                  activeTabId === 'one-two-one' || activeTabId === 'one-two-two' || activeTabId === 'one-two-three'
-                }
-              >
-                <VerticalTabs.Tab
-                  id="one-two-one"
-                  title="Tab One-Two-One"
-                  onActivate={() => this.onActivateTab('one-two-one')}
-                  active={activeTabId === 'one-two-one'}
-                />
-                <VerticalTabs.Tab
-                  id="one-two-two"
-                  title="Tab One-Two-Two"
-                  onActivate={() => this.onActivateTab('one-two-two')}
-                  active={activeTabId === 'one-two-two'}
-                />
-                <VerticalTabs.Tab
-                  id="one-two-three"
-                  title="Tab One-Two-Three"
-                  onActivate={() => this.onActivateTab('one-two-three')}
-                  active={activeTabId === 'one-two-three'}
-                />
-              </VerticalTabs>
-            </VerticalTabs.Tab>
-            <VerticalTabs.Tab
-              id="one-three"
-              title="Tab One-Three"
-              onActivate={() => this.onActivateTab('one-three')}
-              active={activeTabId === 'one-three'}
-              hasActiveDescendant={activeTabId.startsWith('one-three')}
-            />
-          </VerticalTabs>
-        </VerticalTabs.Tab>
+    const renderTab = (id, title, children, props) => {
+      const childIds = React.Children.map(children, child => child.props.id);
+
+      return (
         <VerticalTabs.Tab
-          id="two"
-          title="Tab Two"
-          onActivate={() => this.onActivateTab('two')}
-          active={activeTabId === 'two'}
-          hasActiveDescendant={activeTabId.startsWith('two')}
+          id={id}
+          key={id}
+          title={title}
+          wrapStyle={wrapStyle}
+          onActivate={() => this.onActivateTab(id)}
+          active={activeTabId === id}
+          hasActiveDescendant={activeTabId.startsWith(id)}
+          {...props}
         >
-          <VerticalTabs restrictTabs={restrictTabs} activeTab={activeTabId.startsWith('two')}>
-            <VerticalTabs.Tab
-              id="two-one"
-              title="Tab Two-One"
-              onActivate={() => this.onActivateTab('two-one')}
-              active={activeTabId === 'two-one'}
-            />
-            <VerticalTabs.Tab
-              id="two-two"
-              title="Tab Two-Two"
-              onActivate={() => this.onActivateTab('two-two')}
-              active={activeTabId === 'two-two'}
-            />
-            <VerticalTabs.Tab
-              id="two-three"
-              title="Tab Two-Three"
-              onActivate={() => this.onActivateTab('two-three')}
-              active={activeTabId === 'two-three'}
-            />
-          </VerticalTabs>
+          {children && (
+            <VerticalTabs restrictTabs={restrictTabs} activeTab={childIds.includes(activeTabId)}>
+              {children}
+            </VerticalTabs>
+          )}
         </VerticalTabs.Tab>
-        <VerticalTabs.Tab
-          id="three"
-          title="Tab Three"
-          onActivate={() => this.onActivateTab('three')}
-          active={activeTabId === 'three'}
-        />
-        <VerticalTabs.Tab
-          id="four"
-          title="Tab Four"
-          onActivate={() => this.onActivateTab('four')}
-          active={activeTabId === 'four'}
-        />
-        <VerticalTabs.Tab
-          id="five"
-          title="Tab Five"
-          onActivate={() => this.onActivateTab('five')}
-          active={activeTabId === 'five'}
-        />
-        <VerticalTabs.Tab
-          id="six"
-          title="Tab Six"
-          onActivate={() => this.onActivateTab('six')}
-          active={activeTabId === 'six'}
-        />
-        <VerticalTabs.Tab
-          id="seven"
-          title="Tab Seven"
-          onActivate={() => this.onActivateTab('seven')}
-          active={activeTabId === 'seven'}
-        />
+      );
+    };
+
+    return (
+      <VerticalTabs id="vertical-tabs" restrictTabs={restrictTabs} activeTab={topLevelIds.includes(activeTabId)}>
+        {renderTab('all', 'All', null, { shown: true })}
+        {renderTab('one', 'Tab One', [
+          renderTab('one-one', 'Tab One-One', [
+            renderTab('one-one-one', 'Tab One-One-One'),
+            renderTab('one-one-two', 'Tab One-One-Two'),
+            renderTab('one-one-three', 'Tab One-One-Three')
+          ]),
+          renderTab('one-two', 'Tab One-Two', [
+            renderTab('one-two-one', 'Tab One-Two-One'),
+            renderTab('one-two-two', 'Tab One-Two-Two'),
+            renderTab('one-two-three', 'Tab One-Two-Three')
+          ]),
+          renderTab('one-three', 'Tab One-Thee')
+        ])}
+        {renderTab('two', 'Tab Two', [
+          renderTab('two-one', 'Tab Two-One'),
+          renderTab('two-two', 'Tab Two-Two'),
+          renderTab('two-three', 'Tab Two-Three')
+        ])}
+        {renderTab('three', 'Tab Three - Donec id elit non mi porta gravida at eget metus')}
+        {renderTab('four', 'Tab Four')}
+        {renderTab('five', 'Tab Five')}
+        {renderTab('six', 'Tab Six')}
+        {renderTab('seven', 'Tab Seven')}
       </VerticalTabs>
     );
   }
 }
 
 MockVerticalTabsExample.propTypes = {
-  restrictTabs: PropTypes.bool
+  restrictTabs: PropTypes.bool,
+  wrapStyle: PropTypes.oneOf(['wrap', 'truncate', 'nowrap'])
 };
 
 MockVerticalTabsExample.defaultProps = {
-  restrictTabs: false
+  restrictTabs: false,
+  wrapStyle: 'word'
 };
 
 export { MockVerticalTabsExample };
@@ -203,178 +98,73 @@ class MockVerticalTabsExample extends React.Component {
   };
 
   render() {
-    const { restrictTabs } = this.props;
+    const { restrictTabs, wrapStyle } = this.props;
     const { activeTabId } = this.state;
 
-    const showAll = activeTabId === 'all';
-    const isTopLevelActive =
-      showAll ||
-      activeTabId === 'one' ||
-      activeTabId === 'two' ||
-      activeTabId === 'three' ||
-      activeTabId === 'four' ||
-      activeTabId === 'five' ||
-      activeTabId === 'six' ||
-      activeTabId === 'seven';
+    const topLevelIds = ['all', 'one', 'two', 'three', 'four', 'five', 'six', 'seven'];
 
-    return (
-      <VerticalTabs id="vertical-tabs" restrictTabs={restrictTabs} activeTab={isTopLevelActive}>
-        <VerticalTabs.Tab id="all" title="All" onActivate={() => this.onActivateTab('all')} active={showAll} shown />
-        <VerticalTabs.Tab
-          id="one"
-          title="Tab One"
-          onActivate={() => this.onActivateTab('one')}
-          active={activeTabId === 'one'}
-          hasActiveDescendant={activeTabId.startsWith('one')}
-        >
-          <VerticalTabs
-            restrictTabs={restrictTabs}
-            activeTab={activeTabId === 'one-one' || activeTabId === 'one-two' || activeTabId === 'one-three'}
-          >
-            <VerticalTabs.Tab
-              id="one-one"
-              title="Tab One-One"
-              onActivate={() => this.onActivateTab('one-one')}
-              active={activeTabId === 'one-one'}
-              hasActiveDescendant={activeTabId.startsWith('one-one')}
-            >
-              <VerticalTabs
-                restrictTabs={restrictTabs}
-                activeTab={
-                  activeTabId === 'one-one-one' || activeTabId === 'one-one-two' || activeTabId === 'one-one-three'
-                }
-              >
-                <VerticalTabs.Tab
-                  id="one-one-one"
-                  title="Tab One-One-One"
-                  onActivate={() => this.onActivateTab('one-one-one')}
-                  active={activeTabId === 'one-one-one'}
-                />
-                <VerticalTabs.Tab
-                  id="one-one-two"
-                  title="Tab One-One-Two"
-                  onActivate={() => this.onActivateTab('one-one-two')}
-                  active={activeTabId === 'one-one-two'}
-                />
-                <VerticalTabs.Tab
-                  id="one-one-three"
-                  title="Tab One-One-Three"
-                  onActivate={() => this.onActivateTab('one-one-three')}
-                  active={activeTabId === 'one-one-three'}
-                />
-              </VerticalTabs>
-            </VerticalTabs.Tab>
-            <VerticalTabs.Tab
-              id="one-two"
-              title="Tab One-Two"
-              onActivate={() => this.onActivateTab('one-two')}
-              active={activeTabId === 'one-two'}
-              hasActiveDescendant={activeTabId.startsWith('one-two')}
-            >
-              <VerticalTabs
-                restrictTabs={restrictTabs}
-                activeTab={
-                  activeTabId === 'one-two-one' || activeTabId === 'one-two-two' || activeTabId === 'one-two-three'
-                }
-              >
-                <VerticalTabs.Tab
-                  id="one-two-one"
-                  title="Tab One-Two-One"
-                  onActivate={() => this.onActivateTab('one-two-one')}
-                  active={activeTabId === 'one-two-one'}
-                />
-                <VerticalTabs.Tab
-                  id="one-two-two"
-                  title="Tab One-Two-Two"
-                  onActivate={() => this.onActivateTab('one-two-two')}
-                  active={activeTabId === 'one-two-two'}
-                />
-                <VerticalTabs.Tab
-                  id="one-two-three"
-                  title="Tab One-Two-Three"
-                  onActivate={() => this.onActivateTab('one-two-three')}
-                  active={activeTabId === 'one-two-three'}
-                />
-              </VerticalTabs>
-            </VerticalTabs.Tab>
-            <VerticalTabs.Tab
-              id="one-three"
-              title="Tab One-Three"
-              onActivate={() => this.onActivateTab('one-three')}
-              active={activeTabId === 'one-three'}
-              hasActiveDescendant={activeTabId.startsWith('one-three')}
-            />
-          </VerticalTabs>
-        </VerticalTabs.Tab>
+    const renderTab = (id, title, children, props) => {
+      const childIds = React.Children.map(children, child => child.props.id);
+
+      return (
         <VerticalTabs.Tab
-          id="two"
-          title="Tab Two"
-          onActivate={() => this.onActivateTab('two')}
-          active={activeTabId === 'two'}
-          hasActiveDescendant={activeTabId.startsWith('two')}
+          id={id}
+          key={id}
+          title={title}
+          wrapStyle={wrapStyle}
+          onActivate={() => this.onActivateTab(id)}
+          active={activeTabId === id}
+          hasActiveDescendant={activeTabId.startsWith(id)}
+          {...props}
         >
-          <VerticalTabs restrictTabs={restrictTabs} activeTab={activeTabId.startsWith('two')}>
-            <VerticalTabs.Tab
-              id="two-one"
-              title="Tab Two-One"
-              onActivate={() => this.onActivateTab('two-one')}
-              active={activeTabId === 'two-one'}
-            />
-            <VerticalTabs.Tab
-              id="two-two"
-              title="Tab Two-Two"
-              onActivate={() => this.onActivateTab('two-two')}
-              active={activeTabId === 'two-two'}
-            />
-            <VerticalTabs.Tab
-              id="two-three"
-              title="Tab Two-Three"
-              onActivate={() => this.onActivateTab('two-three')}
-              active={activeTabId === 'two-three'}
-            />
-          </VerticalTabs>
+          {children && (
+            <VerticalTabs restrictTabs={restrictTabs} activeTab={childIds.includes(activeTabId)}>
+              {children}
+            </VerticalTabs>
+          )}
         </VerticalTabs.Tab>
-        <VerticalTabs.Tab
-          id="three"
-          title="Tab Three"
-          onActivate={() => this.onActivateTab('three')}
-          active={activeTabId === 'three'}
-        />
-        <VerticalTabs.Tab
-          id="four"
-          title="Tab Four"
-          onActivate={() => this.onActivateTab('four')}
-          active={activeTabId === 'four'}
-        />
-        <VerticalTabs.Tab
-          id="five"
-          title="Tab Five"
-          onActivate={() => this.onActivateTab('five')}
-          active={activeTabId === 'five'}
-        />
-        <VerticalTabs.Tab
-          id="six"
-          title="Tab Six"
-          onActivate={() => this.onActivateTab('six')}
-          active={activeTabId === 'six'}
-        />
-        <VerticalTabs.Tab
-          id="seven"
-          title="Tab Seven"
-          onActivate={() => this.onActivateTab('seven')}
-          active={activeTabId === 'seven'}
-        />
+      );
+    };
+
+    return (
+      <VerticalTabs id="vertical-tabs" restrictTabs={restrictTabs} activeTab={topLevelIds.includes(activeTabId)}>
+        {renderTab('all', 'All', null, { shown: true })}
+        {renderTab('one', 'Tab One', [
+          renderTab('one-one', 'Tab One-One', [
+            renderTab('one-one-one', 'Tab One-One-One'),
+            renderTab('one-one-two', 'Tab One-One-Two'),
+            renderTab('one-one-three', 'Tab One-One-Three')
+          ]),
+          renderTab('one-two', 'Tab One-Two', [
+            renderTab('one-two-one', 'Tab One-Two-One'),
+            renderTab('one-two-two', 'Tab One-Two-Two'),
+            renderTab('one-two-three', 'Tab One-Two-Three')
+          ]),
+          renderTab('one-three', 'Tab One-Thee')
+        ])}
+        {renderTab('two', 'Tab Two', [
+          renderTab('two-one', 'Tab Two-One'),
+          renderTab('two-two', 'Tab Two-Two'),
+          renderTab('two-three', 'Tab Two-Three')
+        ])}
+        {renderTab('three', 'Tab Three - Donec id elit non mi porta gravida at eget metus')}
+        {renderTab('four', 'Tab Four')}
+        {renderTab('five', 'Tab Five')}
+        {renderTab('six', 'Tab Six')}
+        {renderTab('seven', 'Tab Seven')}
       </VerticalTabs>
     );
   }
 }
 
 MockVerticalTabsExample.propTypes = {
-  restrictTabs: PropTypes.bool
+  restrictTabs: PropTypes.bool,
+  wrapStyle: PropTypes.oneOf(['wrap', 'truncate', 'nowrap'])
 };
 
 MockVerticalTabsExample.defaultProps = {
-  restrictTabs: false
+  restrictTabs: false,
+  wrapStyle: 'word'
 };
 
 export { MockVerticalTabsExample };
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/index.js b/packages/patternfly-3/patternfly-react-extensions/src/index.js
index e84e3603003..f49bc294805 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/index.js
+++ b/packages/patternfly-3/patternfly-react-extensions/src/index.js
@@ -1,5 +1,7 @@
+export * from './components/CatalogItemHeader';
 export * from './components/CatalogTile';
 export * from './components/CatalogTileView';
 export * from './components/FilterSidePanel';
+export * from './components/PropertiesSidePanel';
 export * from './components/TableGrid';
 export * from './components/VerticalTabs';
diff --git a/packages/patternfly-3/patternfly-react/.babelrc b/packages/patternfly-3/patternfly-react/.babelrc
new file mode 100644
index 00000000000..8ade66d8e14
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["../.babelrc.js"]
+}
diff --git a/packages/patternfly-3/patternfly-react/CONTRIBUTING.md b/packages/patternfly-3/patternfly-react/CONTRIBUTING.md
new file mode 100644
index 00000000000..121e614994a
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/CONTRIBUTING.md
@@ -0,0 +1,116 @@
+# Contributing to @patternfly/patternfly-react
+
+## Adding a new component
+
+1. Check for open issues that are not assigned to anyone, and assign yourself. If you do not see an issue for the component you want to contribute open an issue and assign yourself. Assigning yourself will ensure that others do not begin working on the component you currently have in progress.
+2. Generate the component scaffolding by running `yarn generate`. This will generate a structure that resembles the following
+   ```text
+   packages/patternfly-3/patternfly-react/src/components/[ComponentName]/
+    index.js - Barrel File exporting public exports
+    ComponentName.js - Component Implementation
+    ComponentName.test.js - Component Tests
+    ComponentName.stories.js - Component Stories
+   ```
+3. Write the component implementation in `[ComponentName].js`.
+4. Add tests to `[ComponentName].test.js`. All new components must be tested.
+5. Update the generated storybook `[ComponentName].stories.js`. When your stories contain multiple files, put them in a subfolder named `Stories`. Stories should demonstrate as many different UI states for your component as possible. Use Storybook knobs to enable dynamic visualizations of your component's props. For PatternFly 4 components, provide associated examples for documentation in the examples directory for the component.
+
+## Code Contribution Guidelines
+
+Adhering to the following process is the best way to get your work included in the project:
+
+1.  [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes:
+
+```bash
+# Clone your fork of the repo into the current directory
+git clone https://github.com/<your-username>/patternfly-react.git
+# Navigate to the newly cloned directory
+cd patternfly-react
+# Assign the original repo to a remote called "upstream"
+git remote add upstream https://github.com/patternfly/patternfly-react.git
+```
+
+2.  Create a branch:
+
+```text
+$ git checkout -b my-branch -t upstream/master
+```
+
+3. Generate your Component
+
+```bash
+# Run the tool to Generate the component scaffolding
+ yarn generate
+```
+
+- When you select the option to generate a PatternFly 3 component, a structure resembling the following is generated
+  ```text
+  packages/patternfly-3/patternfly-react/src/components/[ComponentName]/
+    index.js - Barrel File exporting public exports
+    ComponentName.js - Component Implementation
+    ComponentName.test.js - Component Tests
+    ComponentName.stories.js - Component Stories
+  ```
+
+4.  Develop your component. After development is complete, ensure tests and lint standards pass.
+
+```text
+$ yarn test
+```
+
+Ensure no lint errors are introduced in `yarn-error.log` after running this command.
+
+5.  Add a commit using `yarn commit`:
+
+This project uses [`semantic-release`](https://npmjs.com/package/semantic-release) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow this convention for your commit messages.
+
+You can use `commitizen` to help you to follow [the convention][3].
+
+Once you are ready to commit the changes, please use the below commands:
+
+```text
+$ git add <files to be committed>
+$ yarn commit
+```
+
+... and follow the instruction of the interactive prompt.
+
+6.  Rebase
+
+Use `git rebase` (not `git merge`) to sync your work from time to time. Ensure all commits related to a single issue have been [squashed](https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit).
+
+```text
+$ git fetch upstream
+$ git rebase upstream/master
+```
+
+7.  Push
+
+```text
+$ git push origin my-branch
+```
+
+8.  Create a Demo Storybook
+
+    - For PatternFly 3, you'll want to export Storybook in your fork and note the Storybook url generated.
+      ```text
+      $ yarn storybook:build
+      $ yarn storybook:deploy
+      ```
+
+9.  Create a Pull Request
+
+[Open a pull request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `master` branch. Please be sure to include all of the following in your PR:
+
+- Any relevant issues associated with this pull request (`enhancement` issues, `bug` issues, etc.)
+- Storybook and Documentation
+  - Include a link to the design documentation in the [PatternFly Pattern Library](http://www.patternfly.org/pattern-library/) if it exists. If a PatternFly design does not exist yet, then provide a description that explains when the component would be used and what goal or task it helps to accomplish.
+  - for PatternFly 3, include the generated Storybook url. (from **Step 8**)
+
+Once your pull request has been reviewed, if all conditions above have been met your pull request will be approved and merged.
+
+Please help in ensuring all relevant issues are closed and that any subsequent issues needed have been noted with this pull request.
+
+## Additional Information
+
+See the PatternFly React Guide for full details on [Code Contribution Guidelines](https://github.com/patternfly/patternfly-react/blob/master/CONTRIBUTING.md#code-contribution-guidelines)
diff --git a/packages/patternfly-3/patternfly-react/README.md b/packages/patternfly-3/patternfly-react/README.md
index 0ccaeb8216d..4049651bdd0 100644
--- a/packages/patternfly-3/patternfly-react/README.md
+++ b/packages/patternfly-3/patternfly-react/README.md
@@ -2,6 +2,21 @@
 
 This package provides Core PatternFly React components for PatternFly 3.
 
+### Prerequisite
+
+#### Node Environment
+
+This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
+
+For example, to develop with Node 8, use the following:
+
+```
+nvm install 8
+nvm use 8
+```
+
+This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).
+
 ### Installing
 
 ```
@@ -20,7 +35,7 @@ npm install patternfly-react --save
 import { Alert } from 'patternfly-react';
 ```
 
-#### Styling:
+#### Styling with LESS:
 
 Example with LESS:
 
@@ -30,6 +45,10 @@ Example with LESS:
 @import "~patternfly-react/dist/less/patternfly-react.less";
 ```
 
+#### Using patterfly-react Sass files
+
+As an alernative to consuming the `patternfly-react.css` file (found in `dist/css`), you can build patternfly-react styles into your css by including the Sass partials from `dist/sass`. The partial `_patternfly-react.scss` will pull in all the partials required for the patternfly-react components. When using the patternfly-react Sass files, you **MUST** include bootstrap and patternfly variables and mixins. An example of the required imports can be found in [patternfly-react.scss](./packages/patternfly-3/patternfly-react/sass/patternfly-react.scss).
+
 ### Building
 
 ```
@@ -43,7 +62,7 @@ Note the build scripts for this are located in the root package.json under `yarn
 Testing is done at the root of this repo. To only run the patternfly-react tests:
 
 ```
-yarn test packages/core
+yarn test packages/patternfly-3/patternfly-react
 ```
 
 ### Publishing
@@ -51,3 +70,36 @@ yarn test packages/core
 ```
 yarn publish
 ```
+
+### Storybook UI Development
+
+This project uses [React Storybook](https://storybook.js.org/) to test and demo new PaternFly 3React UI components. You can view our current storybook [here](https://rawgit.com/patternfly/patternfly-react/gh-pages/index.html).
+
+How to use Storybook locally:
+
+```
+yarn install
+yarn start
+```
+
+How to deploy storybook to github pages in your fork:
+
+```
+yarn storybook:build
+yarn storybook:deploy
+```
+
+To deploy Storybook to a remote other than `origin`, pass a `--remote` flag to `yarn storybook:deploy`.
+For example, to deploy to your `upstream` remote:
+
+```
+yarn storybook:deploy --remote=upstream
+```
+
+To deploy Storybook to a target branch and serve with rawgit instead of gh-pages, pass `--branch` flag to `yarn storybook:deploy`. This will create a new branch to serve your Storybook (and will be useful if you have multiple open pull requests).
+
+For example, say you have `feature-branch`, you can deploy the storybook to a rawgit branch with:
+
+```
+yarn storybook:deploy --branch=feature-branch-storybook
+```
diff --git a/packages/patternfly-3/patternfly-react/less/modeless-overlay.less b/packages/patternfly-3/patternfly-react/less/modeless-overlay.less
new file mode 100644
index 00000000000..817b06a7d95
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/less/modeless-overlay.less
@@ -0,0 +1,20 @@
+.modal.right-side-modal-pf {
+  left: initial;
+
+  .modal-dialog {
+    margin: @navbar-pf-height 0 0 10px;
+
+    .modal-content {
+      height: ~'calc(100vh - @{navbar-pf-height})';
+    }
+  }
+
+  &.fade:not(.in) .modal-dialog {
+    -webkit-transform: translate3d(-75%, 0, 0);
+    transform: translate3d(75%, 0, 0);
+  }
+}
+
+.modal.modeless-pf.shown {
+  display: block;
+}
diff --git a/packages/patternfly-3/patternfly-react/less/patternfly-react.less b/packages/patternfly-3/patternfly-react/less/patternfly-react.less
index 396359eaecc..6f6b14552b7 100644
--- a/packages/patternfly-3/patternfly-react/less/patternfly-react.less
+++ b/packages/patternfly-3/patternfly-react/less/patternfly-react.less
@@ -5,6 +5,7 @@
 @import 'utilization-bar';
 @import 'breadcrumb';
 @import 'label-remove';
+@import 'modeless-overlay';
 @import 'notificationdrawer';
 @import 'inline-edit';
 @import 'field-level-help';
diff --git a/packages/patternfly-3/patternfly-react/package.json b/packages/patternfly-3/patternfly-react/package.json
index 38f43246ac0..914127f0dfe 100644
--- a/packages/patternfly-3/patternfly-react/package.json
+++ b/packages/patternfly-3/patternfly-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "patternfly-react",
-  "version": "2.17.3",
+  "version": "2.19.1",
   "private": false,
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
@@ -56,6 +56,10 @@
   },
   "scripts": {
     "prebuild": "yarn build:sass && yarn build:less",
+    "build": "yarn build:babel",
+    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm",
     "build:less": "mkdir -p dist/less && cp -r less/* dist/less",
     "build:sass": "mkdir -p dist/sass && cp -r sass/patternfly-react/* dist/sass && node-sass --output-style compressed --include-path sass --include-path $npm_package_sassIncludes_patternfly --include-path $npm_package_sassIncludes_bootstrap --include-path $npm_package_sassIncludes_fontAwesome -o dist/css sass/patternfly-react.scss"
   }
diff --git a/packages/patternfly-3/patternfly-react/sass/patternfly-react/_modeless-overlay.scss b/packages/patternfly-3/patternfly-react/sass/patternfly-react/_modeless-overlay.scss
new file mode 100644
index 00000000000..1addb490aff
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/sass/patternfly-react/_modeless-overlay.scss
@@ -0,0 +1,20 @@
+.modal.right-side-modal-pf {
+  left: initial;
+
+  .modal-dialog {
+    margin: $navbar-pf-height 0 0 10px;
+
+    .modal-content {
+      height: calc(100vh - #{$navbar-pf-height});
+    }
+  }
+
+  &.fade:not(.in) .modal-dialog {
+    -webkit-transform: translate3d(-75%, 0, 0);
+    transform: translate3d(75%, 0, 0);
+  }
+}
+
+.modal.modeless-pf.shown {
+  display: block;
+}
diff --git a/packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss b/packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss
index 6a6ae38e292..8cd0d50f980 100644
--- a/packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss
+++ b/packages/patternfly-3/patternfly-react/sass/patternfly-react/_patternfly-react.scss
@@ -5,6 +5,7 @@
 @import 'utilization-bar';
 @import 'breadcrumb';
 @import 'label-remove';
+@import 'modeless-overlay';
 @import 'notificationdrawer';
 @import 'inline-edit';
 @import 'field-level-help';
diff --git a/packages/patternfly-3/patternfly-react/src/components/Alert/Alert.test.js b/packages/patternfly-3/patternfly-react/src/components/Alert/Alert.test.js
index eef9a743db3..ba2e8a10ce1 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Alert/Alert.test.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Alert/Alert.test.js
@@ -17,10 +17,6 @@ const testAlertSnapshot = (type, onDismiss) => {
 
 ALL_ALERT_TYPES.forEach(type => {
   beforeAll(() => jest.spyOn(console, 'warn').mockImplementation(() => {}));
-  afterAll(() => {
-    // eslint-disable-next-line no-console
-    console.warn.mockRestore();
-  });
 
   test(`Alert ${type} renders properly`, () => {
     testAlertSnapshot(type);
diff --git a/packages/patternfly-3/patternfly-react/src/components/Alert/__snapshots__/helpers.test.js.snap b/packages/patternfly-3/patternfly-react/src/components/Alert/__snapshots__/helpers.test.js.snap
index ac407f2434c..787ba1e1506 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Alert/__snapshots__/helpers.test.js.snap
+++ b/packages/patternfly-3/patternfly-react/src/components/Alert/__snapshots__/helpers.test.js.snap
@@ -30,5 +30,11 @@ exports[`Alert helpers should warn about deprecated types 1`] = `
     ",
     ],
   ],
+  "results": Array [
+    Object {
+      "isThrow": false,
+      "value": undefined,
+    },
+  ],
 }
 `;
diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/CardHeightMatching.js b/packages/patternfly-3/patternfly-react/src/components/Cards/CardHeightMatching.js
index 34c4739beed..dae7ffbe97a 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Cards/CardHeightMatching.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Cards/CardHeightMatching.js
@@ -12,16 +12,8 @@ class CardHeightMatching extends React.Component {
   }
 
   componentDidMount() {
-    // setup the event listening on '_container' for our height matching selectors
-    this._selectors.forEach(selector => {
-      const elements = this._container.querySelectorAll(selector);
-      this._resizeSensors.push(new ResizeSensor(elements, debounce(() => this._matchHeights([selector]), 200)));
-    });
-
     // schedule the initial height matching
-    setTimeout(() => {
-      this._matchHeights();
-    }, 0);
+    this._matchHeights();
   }
 
   componentDidUpdate() {
@@ -32,9 +24,22 @@ class CardHeightMatching extends React.Component {
   }
 
   componentWillUnmount() {
+    this._removeSensors();
+  }
+
+  _addSensors() {
+    // setup the event listening on '_container' for our height matching selectors
+    this._selectors.forEach(selector => {
+      const elements = this._container.querySelectorAll(selector);
+      this._resizeSensors.push(new ResizeSensor(elements, debounce(() => this._matchHeights([selector]), 200)));
+    });
+  }
+
+  _removeSensors() {
     this._resizeSensors.forEach(sensor => {
       sensor.detach();
     });
+    this._resizeSensors = [];
   }
 
   _matchHeights(selectors = this._selectors) {
@@ -42,6 +47,9 @@ class CardHeightMatching extends React.Component {
       return;
     }
 
+    // Remove any existing sensors so they do not detect changes made here
+    this._removeSensors();
+
     const arrayMap = elements =>
       Array.prototype.map.call(elements, el => el.scrollHeight).reduce((pre, cur) => Math.max(pre, cur), -Infinity);
     selectors.forEach(selector => {
@@ -54,6 +62,9 @@ class CardHeightMatching extends React.Component {
         el.style.height = `${maxHeight}px`;
       });
     });
+
+    // Add resize sensors to watch for resizes
+    this._addSensors();
   }
 
   render() {
diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js b/packages/patternfly-3/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js
index 5f11092cab0..67ad105b6d6 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Cards/Stories/BaseCardHeightMatchingStory.js
@@ -14,9 +14,16 @@ const handleClick = e => {
   action('some on click')();
 };
 
+const fakeContent =
+  'This is card content that is used to fill up the card. There is lots of content so it should cause ' +
+  'the card to grow in height so that we can test the match height attribute and what happens when card ' +
+  'contents change and cause the card to grow. The other cards should grow as well and it should only cause ' +
+  'the resize sensor to be called one time.';
+
 const baseCardHeightMatchingStory = stories => {
   stories.addWithInfo('Base Card w/HeightMatching', '', () => {
     const matchHeightBool = boolean('Match Height', true);
+    const content = boolean('Content', false);
     const story = (
       <body className="cards-pf">
         <CardGrid matchHeight={matchHeightBool}>
@@ -35,7 +42,7 @@ const baseCardHeightMatchingStory = stories => {
                     <Icon name="shield" /> Card Title
                   </CardTitle>
                 </CardHeading>
-                <CardBody>[card contents]</CardBody>
+                <CardBody>{content ? <span>{fakeContent}</span> : '[card contents]'}</CardBody>
                 <CardFooter>
                   <CardLink onClick={handleClick} href="#" icon={<Icon type="pf" name="add-circle-o" />}>
                     Add New Cluster
diff --git a/packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/__snapshots__/BulletChart.test.js.snap b/packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/__snapshots__/BulletChart.test.js.snap
index 34d78337f56..a413f0637b3 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/__snapshots__/BulletChart.test.js.snap
+++ b/packages/patternfly-3/patternfly-react/src/components/Chart/BulletChart/__snapshots__/BulletChart.test.js.snap
@@ -109,7 +109,6 @@ exports[`BulletChart renders custom Axis properly 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -118,34 +117,27 @@ exports[`BulletChart renders custom Axis properly 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -236,31 +228,26 @@ exports[`BulletChart renders custom legend properly 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -391,31 +378,26 @@ exports[`BulletChart renders default colors properly 1`] = `
         >
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={0}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={25}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={50}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={75}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={100}
             vertical={true}
           />
@@ -609,31 +591,26 @@ exports[`BulletChart renders extended colors properly 1`] = `
         >
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={0}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={25}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={50}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={75}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={100}
             vertical={true}
           />
@@ -731,31 +708,26 @@ exports[`BulletChart renders properly handling invalid data 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -852,31 +824,26 @@ exports[`BulletChart renders properly with a single range 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -959,31 +926,26 @@ exports[`BulletChart renders properly with a single value 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -1080,31 +1042,26 @@ exports[`BulletChart renders properly with all fields 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -1123,7 +1080,6 @@ exports[`BulletChart renders properly with all fields 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -1132,34 +1088,27 @@ exports[`BulletChart renders properly with all fields 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -1232,31 +1181,26 @@ exports[`BulletChart renders properly with defaults 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -1353,31 +1297,26 @@ exports[`BulletChart renders properly with no thresholds 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -1474,31 +1413,26 @@ exports[`BulletChart renders properly with only error threshold 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -1581,31 +1515,26 @@ exports[`BulletChart renders properly with only value in the legend 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -1624,34 +1553,27 @@ exports[`BulletChart renders properly with only value in the legend 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title=""
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title=""
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title=""
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -1742,31 +1664,26 @@ exports[`BulletChart renders properly with only warning threshold 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -1863,31 +1780,26 @@ exports[`BulletChart renders properly with two ranges 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -1984,31 +1896,26 @@ exports[`BulletChart renders properly with unsorted ranges 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -2114,7 +2021,6 @@ exports[`BulletChart renders properly without axis 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -2123,34 +2029,27 @@ exports[`BulletChart renders properly without axis 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -2241,31 +2140,26 @@ exports[`BulletChart renders stacked chart properly 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -2284,7 +2178,6 @@ exports[`BulletChart renders stacked chart properly 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -2293,34 +2186,27 @@ exports[`BulletChart renders stacked chart properly 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -2411,31 +2297,26 @@ exports[`BulletChart renders stacked dots chart properly 1`] = `
       >
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={0}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={25}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={50}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={75}
           vertical={false}
         />
         <BulletChartAxisTic
           className=""
-          text={undefined}
           value={100}
           vertical={false}
         />
@@ -2454,7 +2335,6 @@ exports[`BulletChart renders stacked dots chart properly 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -2463,34 +2343,27 @@ exports[`BulletChart renders stacked dots chart properly 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -2584,31 +2457,26 @@ exports[`BulletChart renders vertical chart properly 1`] = `
         >
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={0}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={25}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={50}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={75}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={100}
             vertical={true}
           />
@@ -2628,7 +2496,6 @@ exports[`BulletChart renders vertical chart properly 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -2637,34 +2504,27 @@ exports[`BulletChart renders vertical chart properly 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -2758,31 +2618,26 @@ exports[`BulletChart renders vertical dots chart properly 1`] = `
         >
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={0}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={25}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={50}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={75}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={100}
             vertical={true}
           />
@@ -2802,7 +2657,6 @@ exports[`BulletChart renders vertical dots chart properly 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -2811,34 +2665,27 @@ exports[`BulletChart renders vertical dots chart properly 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -2932,31 +2779,26 @@ exports[`BulletChart renders vertical stacked chart properly 1`] = `
         >
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={0}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={25}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={50}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={75}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={100}
             vertical={true}
           />
@@ -2976,7 +2818,6 @@ exports[`BulletChart renders vertical stacked chart properly 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -2985,34 +2826,27 @@ exports[`BulletChart renders vertical stacked chart properly 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -3106,31 +2940,26 @@ exports[`BulletChart renders vertical stacked dots chart properly 1`] = `
         >
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={0}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={25}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={50}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={75}
             vertical={true}
           />
           <BulletChartAxisTic
             className=""
-            text={undefined}
             value={100}
             vertical={true}
           />
@@ -3150,7 +2979,6 @@ exports[`BulletChart renders vertical stacked dots chart properly 1`] = `
       color="#39a5dc"
       title="data1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={10}
     />
     <BulletChartLegendItem
@@ -3159,34 +2987,27 @@ exports[`BulletChart renders vertical stacked dots chart properly 1`] = `
       color="#0088ce"
       title="data2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={20}
     />
     <BulletChartLegendItem
       boxClassName="range-0"
       className=""
-      color={undefined}
       title="Range 1"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={50}
     />
     <BulletChartLegendItem
       boxClassName="range-1"
       className=""
-      color={undefined}
       title="Range 2"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={70}
     />
     <BulletChartLegendItem
       boxClassName="range-2"
       className=""
-      color={undefined}
       title="Range 3"
       tooltipFunction={[Function]}
-      tooltipId={undefined}
       value={100}
     />
   </BulletChartLegend>
@@ -3199,31 +3020,26 @@ exports[`BulletChartAxis renders properly 1`] = `
 >
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={0}
     vertical={false}
   />
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={25}
     vertical={false}
   />
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={50}
     vertical={false}
   />
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={75}
     vertical={false}
   />
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={100}
     vertical={false}
   />
@@ -3273,31 +3089,26 @@ exports[`BulletChartAxis renders vertical properly 1`] = `
 >
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={0}
     vertical={true}
   />
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={25}
     vertical={true}
   />
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={50}
     vertical={true}
   />
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={75}
     vertical={true}
   />
   <BulletChartAxisTic
     className=""
-    text={undefined}
     value={1000}
     vertical={true}
   />
@@ -3353,8 +3164,6 @@ exports[`BulletChartLegend renders properly 1`] = `
     className=""
     color="#39a5dc"
     title="data1"
-    tooltipFunction={undefined}
-    tooltipId={undefined}
     value={10}
   />
   <BulletChartLegendItem
@@ -3362,8 +3171,6 @@ exports[`BulletChartLegend renders properly 1`] = `
     className=""
     color="#0088ce"
     title="data2"
-    tooltipFunction={undefined}
-    tooltipId={undefined}
     value={20}
   />
 </div>
diff --git a/packages/patternfly-3/patternfly-react/src/components/HorizontalNav/HorizontalNav.test.js b/packages/patternfly-3/patternfly-react/src/components/HorizontalNav/HorizontalNav.test.js
index 487db81a4fb..cf74e529eb7 100644
--- a/packages/patternfly-3/patternfly-react/src/components/HorizontalNav/HorizontalNav.test.js
+++ b/packages/patternfly-3/patternfly-react/src/components/HorizontalNav/HorizontalNav.test.js
@@ -8,8 +8,7 @@ import { singleLevel } from './__mocks__/singleLevel';
 import { twoLevel } from './__mocks__/twoLevel';
 import { dropdownLevel } from './__mocks__/dropdownLevel';
 
-console.warn = jest.genMockFunction(); // eslint-disable-line no-console
-
+console.warn = jest.fn(() => {}); // eslint-disable-line no-console
 test('HorizontalNav renders properly with singleLevel', () => {
   const component = mount(
     <HorizontalNav>
diff --git a/packages/patternfly-3/patternfly-react/src/components/Masthead/__snapshots__/Masthead.test.js.snap b/packages/patternfly-3/patternfly-react/src/components/Masthead/__snapshots__/Masthead.test.js.snap
index 2a5efa84936..82e0d06656b 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Masthead/__snapshots__/Masthead.test.js.snap
+++ b/packages/patternfly-3/patternfly-react/src/components/Masthead/__snapshots__/Masthead.test.js.snap
@@ -22,6 +22,12 @@ exports[`Masthead renders properly: Masthead snapshot 1`] = `
           "calls": Array [
             Array [],
           ],
+          "results": Array [
+            Object {
+              "isThrow": false,
+              "value": undefined,
+            },
+          ],
         }
       }
     >
diff --git a/packages/patternfly-3/patternfly-react/src/components/Modal/Modal.stories.js b/packages/patternfly-3/patternfly-react/src/components/Modal/Modal.stories.js
index e63cab6a391..796b9649e6e 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Modal/Modal.stories.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Modal/Modal.stories.js
@@ -7,8 +7,20 @@ import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'sto
 import { MockModalManager, basicExampleSource } from './__mocks__/mockModalManager';
 import { Modal } from '../../index';
 import { name } from '../../../package.json';
+import { boolean, withKnobs } from '@storybook/addon-knobs';
 
-const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Modal Overlay`, module);
+const stories = storiesOf(
+  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Modal Overlay`,
+  module
+);
+
+stories.addDecorator(withKnobs);
+
+const description = (
+  <div>
+    Adding the class <b>right-side-modal-pf</b> will show the modal on the right side of the window.
+  </div>
+);
 
 stories.add(
   'Modal',
@@ -23,11 +35,13 @@ stories.add(
       </div>
     )
   })(() => {
-    const story = <MockModalManager />;
+    const rightSide = boolean('Right Side', false);
+    const story = <MockModalManager rightSide={rightSide} />;
     return inlineTemplate({
       title: 'Modal Example',
       documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}modal-overlay/`,
       reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}modal/`,
+      description,
       story
     });
   })
diff --git a/packages/patternfly-3/patternfly-react/src/components/Modal/__mocks__/mockModalManager.js b/packages/patternfly-3/patternfly-react/src/components/Modal/__mocks__/mockModalManager.js
index ea051df962f..caac0b3e01d 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Modal/__mocks__/mockModalManager.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Modal/__mocks__/mockModalManager.js
@@ -5,7 +5,8 @@ import { Modal } from '../index';
 
 export class MockModalManager extends React.Component {
   propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
+    rightSide: PropTypes.bool
   };
 
   constructor() {
@@ -21,7 +22,7 @@ export class MockModalManager extends React.Component {
     this.setState({ showModal: true });
   }
   render() {
-    const { children } = this.props;
+    const { children, rightSide } = this.props;
     const defaultBody = (
       <form className="form-horizontal">
         <div className="form-group">
@@ -57,7 +58,7 @@ export class MockModalManager extends React.Component {
           Launch Modal
         </Button>
 
-        <Modal show={this.state.showModal} onHide={this.close}>
+        <Modal show={this.state.showModal} onHide={this.close} className={rightSide ? 'right-side-modal-pf' : ''}>
           <Modal.Header>
             <Modal.CloseButton onClick={this.close} />
             <Modal.Title>Modal Overlay Title</Modal.Title>
diff --git a/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModelessOverlay.js b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModelessOverlay.js
new file mode 100644
index 00000000000..e5d2bc34654
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModelessOverlay.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Timer from '../../common/Timer';
+import { excludeKeys } from '../../common/helpers';
+
+class ModelessOverlay extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isIn: false };
+    this.inTimer = new Timer(null, 150);
+  }
+
+  componentWillUnmount() {
+    this.inTimer.clearTimer();
+  }
+
+  updateForTransitions = () => {
+    this.setState({ isIn: this.props.show });
+  };
+
+  render() {
+    const { children, className, bsSize, show, ...otherProps } = this.props;
+    const { isIn } = this.state;
+
+    const classes = classNames(
+      'modal modeless-pf fade right-side-modal-pf',
+      { shown: show || isIn, in: show && isIn },
+      className
+    );
+
+    if (isIn !== show) {
+      this.inTimer.startTimer(() => this.updateForTransitions(), show ? 0 : 150);
+    }
+
+    const dialogClasses = classNames('modal-dialog', {
+      'modal-sm': bsSize === 'sm' || bsSize === 'small',
+      'modal-lg': bsSize === 'lg' || bsSize === 'large'
+    });
+    return (
+      <div role="dialog" tabIndex={-1} className={classes} {...excludeKeys(otherProps, ['show'])}>
+        <div className={dialogClasses}>
+          <div className="modal-content">{children}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ModelessOverlay.propTypes = {
+  /** Children */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** When true, the dialog is shown */
+  show: PropTypes.bool,
+  /** Component size variations (effects dialog width). */
+  bsSize: PropTypes.oneOf(['lg', 'large', 'sm', 'small', 'default'])
+};
+
+ModelessOverlay.defaultProps = {
+  children: null,
+  className: '',
+  show: false,
+  bsSize: 'default'
+};
+
+export default ModelessOverlay;
diff --git a/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModelessOverlay.test.js b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModelessOverlay.test.js
new file mode 100644
index 00000000000..662b3fe833b
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModelessOverlay.test.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Button } from '../Button';
+import { Modal } from '../Modal';
+import { ModelessOverlay } from './index';
+
+test('ModelessOverlay renders properly', () => {
+  const component = mount(
+    <ModelessOverlay id="test-modeless-overlay-id" className="test-modeless-overlay-class">
+      <Modal.Header>
+        <Modal.CloseButton />
+        <Modal.Title>Modal Overlay Title</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>test body text</Modal.Body>
+      <Modal.Footer>
+        <Button bsStyle="default" className="btn-cancel">
+          Cancel
+        </Button>
+        <Button bsStyle="primary">Save</Button>
+      </Modal.Footer>
+    </ModelessOverlay>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('ModelessOverlay renders properly when setting size', () => {
+  const component = mount(
+    <ModelessOverlay id="test-modeless-overlay-id" className="test-modeless-overlay-class" bsSize="sm">
+      <Modal.Header>
+        <Modal.CloseButton />
+        <Modal.Title>Modal Overlay Title</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>test body text</Modal.Body>
+      <Modal.Footer>
+        <Button bsStyle="default" className="btn-cancel">
+          Cancel
+        </Button>
+        <Button bsStyle="primary">Save</Button>
+      </Modal.Footer>
+    </ModelessOverlay>
+  );
+  expect(component.render()).toMatchSnapshot();
+});
diff --git a/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModlessOverlay.stories.js b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModlessOverlay.stories.js
new file mode 100644
index 00000000000..ef6a7be3c8d
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/ModlessOverlay.stories.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { inlineTemplate } from 'storybook/decorators/storyTemplates';
+import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
+import { select, withKnobs } from '@storybook/addon-knobs';
+
+import { MockModelessManager, basicExampleSource } from './__mocks__/mockModelessManager';
+import { name } from '../../../package.json';
+
+import ModelessOverlay from './ModelessOverlay';
+
+const stories = storiesOf(
+  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Modeless Overlay`,
+  module
+);
+
+stories.addDecorator(withKnobs);
+
+stories.add(
+  'Modeless Overlay',
+  withInfo({
+    source: false,
+    propTables: [ModelessOverlay],
+    propTablesExclude: [MockModelessManager],
+    text: (
+      <div>
+        <h1>Story Source</h1>
+        <pre>{basicExampleSource}</pre>
+      </div>
+    )
+  })(() => {
+    const size = select('Size', { default: 'Default', sm: 'Small', lg: 'Large' }, 'default');
+    const story = <MockModelessManager size={size} />;
+    return inlineTemplate({
+      title: 'Modeless Overlay',
+      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}modeless-overlay/`,
+      description:
+        'Built off the Bootstrap Modal classes, the modeless overlay is a non-modal version of the Bootstrap Modal',
+      story
+    });
+  })
+);
diff --git a/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__mocks__/mockModelessManager.js b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__mocks__/mockModelessManager.js
new file mode 100644
index 00000000000..e69d792086d
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__mocks__/mockModelessManager.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '../../Button';
+import { Modal } from '../../Modal';
+import { ModelessOverlay } from '../index';
+
+export class MockModelessManager extends React.Component {
+  constructor() {
+    super();
+    this.state = { showOverlay: false };
+  }
+  close = () => {
+    this.setState({ showOverlay: false });
+  };
+  toggleOpen = () => {
+    this.setState({ showOverlay: !this.state.showOverlay });
+  };
+  render() {
+    const { children, size } = this.props;
+    const defaultBody = (
+      <form className="form-horizontal">
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput">
+            Field One
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput" className="form-control" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput2">
+            Field Two
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput2" className="form-control" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput3">
+            Field Three
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput3" className="form-control" />
+          </div>
+        </div>
+      </form>
+    );
+
+    return (
+      <div>
+        <Button bsStyle="primary" bsSize="large" onClick={this.toggleOpen}>
+          {this.state.showOverlay ? 'Close Modeless Overlay' : 'Open Modeless Overlay'}
+        </Button>
+
+        <ModelessOverlay show={this.state.showOverlay} bsSize={size !== 'default' ? size : null}>
+          <Modal.Header>
+            <Modal.CloseButton onClick={this.close} />
+            <Modal.Title>Modal Overlay Title</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>{children || defaultBody}</Modal.Body>
+          <Modal.Footer>
+            <Button bsStyle="default" className="btn-cancel" onClick={this.close}>
+              Cancel
+            </Button>
+            <Button bsStyle="primary" onClick={this.close}>
+              Save
+            </Button>
+          </Modal.Footer>
+        </ModelessOverlay>
+      </div>
+    );
+  }
+}
+
+MockModelessManager.propTypes = {
+  children: PropTypes.node,
+  size: PropTypes.string
+};
+
+MockModelessManager.defaultProps = {
+  children: null,
+  size: 'default'
+};
+
+export const basicExampleSource = `
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '../../Button';
+import { Modal } from '../../Modal';
+import { ModelessOverlay } from '../index';
+
+export class MockModelessManager extends React.Component {
+  constructor() {
+    super();
+    this.state = { showOverlay: false };
+  }
+  close = () => {
+    this.setState({ showOverlay: false });
+  };
+  toggleOpen = () => {
+    this.setState({ showOverlay: !this.state.showOverlay });
+  };
+  render() {
+    const { children, size } = this.props;
+    const defaultBody = (
+      <form className="form-horizontal">
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput">
+            Field One
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput" className="form-control" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput2">
+            Field Two
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput2" className="form-control" />
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="col-sm-3 control-label" htmlFor="textInput3">
+            Field Three
+          </label>
+          <div className="col-sm-9">
+            <input type="text" id="textInput3" className="form-control" />
+          </div>
+        </div>
+      </form>
+    );
+
+    return (
+      <div>
+        <Button bsStyle="primary" bsSize="large" onClick={this.toggleOpen}>
+          {this.state.showOverlay ? 'Close Modeless Overlay' : 'Open Modeless Overlay'}
+        </Button>
+
+        <ModelessOverlay show={this.state.showOverlay} bsSize={size !== 'default' ? size : null}>
+          <Modal.Header>
+            <Modal.CloseButton onClick={this.close} />
+            <Modal.Title>Modal Overlay Title</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>{children || defaultBody}</Modal.Body>
+          <Modal.Footer>
+            <Button bsStyle="default" className="btn-cancel" onClick={this.close}>
+              Cancel
+            </Button>
+            <Button bsStyle="primary" onClick={this.close}>
+              Save
+            </Button>
+          </Modal.Footer>
+        </ModelessOverlay>
+      </div>
+    );
+  }
+}
+
+MockModelessManager.propTypes = {
+  children: PropTypes.node,
+  size: PropTypes.string
+};
+
+MockModelessManager.defaultProps = {
+  children: null,
+  size: 'default'
+};
+`;
diff --git a/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__snapshots__/ModelessOverlay.test.js.snap b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__snapshots__/ModelessOverlay.test.js.snap
new file mode 100644
index 00000000000..4ad85a8746c
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/__snapshots__/ModelessOverlay.test.js.snap
@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModelessOverlay renders properly 1`] = `
+<div
+  class="modal modeless-pf fade right-side-modal-pf test-modeless-overlay-class"
+  id="test-modeless-overlay-id"
+  role="dialog"
+  tabindex="-1"
+>
+  <div
+    class="modal-dialog"
+  >
+    <div
+      class="modal-content"
+    >
+      <div
+        class="modal-header"
+      >
+        <button
+          class="close"
+        >
+          <span
+            aria-hidden="true"
+            class="pficon pficon-close"
+            title="Close"
+          />
+          <span
+            class="sr-only"
+          >
+            Close
+          </span>
+        </button>
+        <h4
+          class="modal-title"
+        >
+          Modal Overlay Title
+        </h4>
+      </div>
+      <div
+        class="modal-body"
+      >
+        test body text
+      </div>
+      <div
+        class="modal-footer"
+      >
+        <button
+          class="btn-cancel btn btn-default"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="btn btn-primary"
+          type="button"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ModelessOverlay renders properly when setting size 1`] = `
+<div
+  class="modal modeless-pf fade right-side-modal-pf test-modeless-overlay-class"
+  id="test-modeless-overlay-id"
+  role="dialog"
+  tabindex="-1"
+>
+  <div
+    class="modal-dialog modal-sm"
+  >
+    <div
+      class="modal-content"
+    >
+      <div
+        class="modal-header"
+      >
+        <button
+          class="close"
+        >
+          <span
+            aria-hidden="true"
+            class="pficon pficon-close"
+            title="Close"
+          />
+          <span
+            class="sr-only"
+          >
+            Close
+          </span>
+        </button>
+        <h4
+          class="modal-title"
+        >
+          Modal Overlay Title
+        </h4>
+      </div>
+      <div
+        class="modal-body"
+      >
+        test body text
+      </div>
+      <div
+        class="modal-footer"
+      >
+        <button
+          class="btn-cancel btn btn-default"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="btn btn-primary"
+          type="button"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/index.js b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/index.js
new file mode 100644
index 00000000000..3be73673ee9
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/src/components/ModelessOverlay/index.js
@@ -0,0 +1,3 @@
+import ModelessOverlay from './ModelessOverlay';
+
+export { ModelessOverlay };
diff --git a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.test.js b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.test.js
index 5799bd614e8..d5135e30248 100644
--- a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.test.js
+++ b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.test.js
@@ -10,7 +10,7 @@ import { basicExample } from './__mocks__/basicExample';
 
 const { Masthead, Brand, IconBar } = VerticalNav;
 
-console.warn = jest.genMockFunction(); // eslint-disable-line no-console
+console.warn = jest.fn(() => {}); // eslint-disable-line no-console
 
 test('VerticalNav renders properly with item children', () => {
   const component = mount(basicExample());
diff --git a/packages/patternfly-3/patternfly-react/src/components/Wizard/__snapshots__/Wizard.test.js.snap b/packages/patternfly-3/patternfly-react/src/components/Wizard/__snapshots__/Wizard.test.js.snap
index b45bd936156..1860777e6bd 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Wizard/__snapshots__/Wizard.test.js.snap
+++ b/packages/patternfly-3/patternfly-react/src/components/Wizard/__snapshots__/Wizard.test.js.snap
@@ -183,6 +183,12 @@ exports[`Wizard header renders properly: Wizard header snapshot 1`] = `
         "calls": Array [
           Array [],
         ],
+        "results": Array [
+          Object {
+            "isThrow": false,
+            "value": undefined,
+          },
+        ],
       }
     }
   >
@@ -335,6 +341,12 @@ exports[`Wizard review step renders properly: Wizard review step snapshot 1`] =
         "calls": Array [
           Array [],
         ],
+        "results": Array [
+          Object {
+            "isThrow": false,
+            "value": undefined,
+          },
+        ],
       }
     }
   >
@@ -370,6 +382,12 @@ exports[`Wizard review sub step renders properly: Wizard review sub step snapsho
         "calls": Array [
           Array [],
         ],
+        "results": Array [
+          Object {
+            "isThrow": false,
+            "value": undefined,
+          },
+        ],
       }
     }
   >
diff --git a/packages/patternfly-3/patternfly-react/src/index.js b/packages/patternfly-3/patternfly-react/src/index.js
index 3b18ae34220..fbf3d0b9a22 100644
--- a/packages/patternfly-3/patternfly-react/src/index.js
+++ b/packages/patternfly-3/patternfly-react/src/index.js
@@ -26,6 +26,7 @@ export * from './components/Masthead';
 export * from './components/MenuItem';
 export * from './components/MessageDialog';
 export * from './components/Modal';
+export * from './components/ModelessOverlay';
 export * from './components/Nav';
 export * from './components/Navbar';
 export * from './components/Notification';
diff --git a/packages/patternfly-3/react-console/.babelrc b/packages/patternfly-3/react-console/.babelrc
new file mode 100644
index 00000000000..8ade66d8e14
--- /dev/null
+++ b/packages/patternfly-3/react-console/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["../.babelrc.js"]
+}
diff --git a/packages/patternfly-3/react-console/package.json b/packages/patternfly-3/react-console/package.json
index d7755d62331..584a7603f5a 100644
--- a/packages/patternfly-3/react-console/package.json
+++ b/packages/patternfly-3/react-console/package.json
@@ -30,6 +30,10 @@
   },
   "scripts": {
     "prebuild": "yarn build:sass && yarn build:less",
+    "build": "yarn build:babel",
+    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm",
     "build:less": "mkdir -p dist/less && cp -r less/* dist/less",
     "build:sass": "mkdir -p dist/sass && cp -r sass/* dist/sass && node-sass --output-style compressed --include-path sass --include-path $npm_package_sassIncludes_patternfly --include-path $npm_package_sassIncludes_bootstrap --include-path $npm_package_sassIncludes_fontAwesome -o dist/css sass/console.scss"
   },
diff --git a/packages/patternfly-3/react-console/src/SerialConsole/__snapshots__/SerialConsole.test.js.snap b/packages/patternfly-3/react-console/src/SerialConsole/__snapshots__/SerialConsole.test.js.snap
index 5139ade6b66..ff307db5f27 100644
--- a/packages/patternfly-3/react-console/src/SerialConsole/__snapshots__/SerialConsole.test.js.snap
+++ b/packages/patternfly-3/react-console/src/SerialConsole/__snapshots__/SerialConsole.test.js.snap
@@ -25,6 +25,12 @@ exports[`Enable autoFit for SerialConsole 1`] = `
           "calls": Array [
             Array [],
           ],
+          "results": Array [
+            Object {
+              "isThrow": false,
+              "value": undefined,
+            },
+          ],
         }
       }
       onData={[Function]}
@@ -116,6 +122,12 @@ exports[`SerialConsole in the CONNECTED state 1`] = `
           "calls": Array [
             Array [],
           ],
+          "results": Array [
+            Object {
+              "isThrow": false,
+              "value": undefined,
+            },
+          ],
         }
       }
       onData={[Function]}
@@ -173,6 +185,12 @@ exports[`SerialConsole in the DISCONNECTED state 1`] = `
               "calls": Array [
                 Array [],
               ],
+              "results": Array [
+                Object {
+                  "isThrow": false,
+                  "value": undefined,
+                },
+              ],
             }
           }
         >
diff --git a/.babelrc.js b/packages/patternfly-4/.babelrc.js
similarity index 77%
rename from .babelrc.js
rename to packages/patternfly-4/.babelrc.js
index 374e1645e32..0804442c329 100644
--- a/.babelrc.js
+++ b/packages/patternfly-4/.babelrc.js
@@ -24,19 +24,12 @@ module.exports = {
             }
             return `@patternfly/react-icons/dist/js/${importPath}`;
           }
-        },
-        'react-bootstrap': {
-          preventFullImport: true,
-          transform: importName => {
-            const moduleDir = !modules ? 'es' : 'lib';
-            return `react-bootstrap/${moduleDir}/${importName}`;
-          }
         }
       }
     ]
   ].filter(Boolean),
   ignore: (() => {
-    const ignore = ['src/**/__snapshots__', 'src/**/*.stories.js', 'src/**/Stories'];
+    const ignore = ['src/**/__snapshots__'];
     if (babelENV.includes('production')) {
       ignore.push('test.js', '__mocks__');
     }
diff --git a/packages/patternfly-4/.eslintignore b/packages/patternfly-4/.eslintignore
new file mode 100644
index 00000000000..78599ef32c9
--- /dev/null
+++ b/packages/patternfly-4/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+public
\ No newline at end of file
diff --git a/packages/patternfly-4/.eslintrc.js b/packages/patternfly-4/.eslintrc.js
new file mode 100644
index 00000000000..67361702ed9
--- /dev/null
+++ b/packages/patternfly-4/.eslintrc.js
@@ -0,0 +1,46 @@
+const path = require('path');
+
+module.exports = {
+  root: true,
+  extends: ['plugin:patternfly-react/recommended'],
+  rules: {
+    'import/first': 'off'
+  },
+  overrides: [
+    {
+      files: ['**/*.js'],
+      rules: {
+        'import/no-unresolved': [
+          'error',
+          {
+            ignore: [
+              './dist/js/build/babel',
+              './dist/js/build/jest/transform',
+              './dist/js/build/jest/snapshot-serializer'
+            ]
+          }
+        ],
+        'import/extensions': 'off'
+      }
+    }
+  ],
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: {
+          resolve: {
+            modules: [
+              path.resolve(__dirname, './'),
+              path.resolve(__dirname, './node_modules'),
+              path.resolve(__dirname, '../../'),
+              path.resolve(__dirname, '../../node_modules')
+            ],
+            alias: {
+              '@patternfly/react-icons': path.resolve(__dirname, '../react-icons/src')
+            }
+          }
+        }
+      }
+    }
+  }
+};
diff --git a/packages/patternfly-4/.stylelintrc b/packages/patternfly-4/.stylelintrc
new file mode 100644
index 00000000000..f5d14f0a682
--- /dev/null
+++ b/packages/patternfly-4/.stylelintrc
@@ -0,0 +1,4 @@
+{
+  "defaultSeverity": "warning",
+  "extends": ["stylelint-config-standard"]
+}
diff --git a/packages/patternfly-4/README.md b/packages/patternfly-4/README.md
new file mode 100644
index 00000000000..b1859b0360f
--- /dev/null
+++ b/packages/patternfly-4/README.md
@@ -0,0 +1,3 @@
+# Packages
+
+Placeholder for description of PatternFly 4 packages
diff --git a/packages/patternfly-4/package.json b/packages/patternfly-4/package.json
new file mode 100644
index 00000000000..fcb15cf19d3
--- /dev/null
+++ b/packages/patternfly-4/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "patternfly4-react-lerna-root",
+  "version": "1.0.0",
+  "private": true,
+  "config": {
+    "access": "private"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-imports": "^1.5.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "eslint": "^4.19.1",
+    "eslint-import-resolver-webpack": "^0.9.0",
+    "eslint-plugin-patternfly-react": "*",
+    "stylelint": "^8.4.0",
+    "stylelint-config-standard": "^18.2.0"
+  },
+  "scripts": {
+    "lint": "yarn lint:versions && yarn lint:js && yarn lint:styles",
+    "lint:fix": "yarn lint:js --fix && yarn lint:styles --fix",
+    "lint:js": "eslint --max-warnings 0 **/*.js",
+    "lint:versions": "node ./verifyCoreVersions.js",
+    "lint:styles": "yarn stylelint",
+    "stylelint": "stylelint '**/sass/**/*.scss' !**/dist/**/*.scss"
+  }
+}
diff --git a/packages/patternfly-4/react-core/.babelrc b/packages/patternfly-4/react-core/.babelrc
index 2842b6a45c3..9779cbaf914 100644
--- a/packages/patternfly-4/react-core/.babelrc
+++ b/packages/patternfly-4/react-core/.babelrc
@@ -1,7 +1,5 @@
 {
-  "presets": [
-    "../../../.babelrc.js"
-  ],
+  "presets": ["../.babelrc.js"],
   "env": {
     "production:esm": {
       "plugins": [
@@ -28,4 +26,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/patternfly-4/react-core/CONTRIBUTING.md b/packages/patternfly-4/react-core/CONTRIBUTING.md
index 992d5640f42..4acdcce7838 100644
--- a/packages/patternfly-4/react-core/CONTRIBUTING.md
+++ b/packages/patternfly-4/react-core/CONTRIBUTING.md
@@ -1,26 +1,26 @@
 # Contributing to @patternfly/react-core
 
 ## Adding a new component
-1. Check for open issues that are not assigned to anyone, and assign yourself. If you do not see an issue for the component you want to contribute open an issue and assign yourself. Assigning yourself will ensure that others do not begin working on the component you currently have in progress.
-1. Generate the component scaffolding by running `yarn generate`. This will generate a structure that resembles the following
-    ```text
-    packages/react-core/src/[type]/[ComponentName]/
-      index.js - Barrel File exporting public exports
-      ComponentName.js - Component Implementation
-      ComponentName.test.js - Component Tests
-      ComponentName.docs.js - Component Docs
-      examples/ - dir for all examples
-          SimpleComponentName.js - Simple Example
-    ```
-1. Write the component implementation in `[Component].js`.
-1. Add tests to `[Component].test.js`.  All new components must be tested.
-1. Add any additional public exports to `index.js`
-1. Update the generated example and add any others. Any examples created must be imported into `[ComponentName].docs.js` [See Below](#adding-component-documentation)
 
+1. Check for open issues that are not assigned to anyone, and assign yourself. If you do not see an issue for the component you want to contribute open an issue and assign yourself. Assigning yourself will ensure that others do not begin working on the component you currently have in progress.
+2. Generate the component scaffolding by running `yarn generate`. This will generate a structure that resembles the following
+   ```text
+   packages/react-core/src/[type]/[ComponentName]/
+     index.js - Barrel File exporting public exports
+     ComponentName.js - Component Implementation
+     ComponentName.test.js - Component Tests
+     ComponentName.docs.js - Component Docs
+     examples/ - dir for all examples
+         SimpleComponentName.js - Simple Example
+   ```
+3. Write the component implementation in `[Component].js`.
+4. Add tests to `[Component].test.js`. All new components must be tested.
+5. Add any additional public exports to `index.js`
+6. Update the generated example and add any others. Any examples created must be imported into `[ComponentName].docs.js` [See Below](#adding-component-documentation)
 
 ## Adding Component Documentation
 
-Component Documentation has two parts.  a `[Component].docs.js` file, and files under `[Component]/examples/`.  Each file must follow a few guidelines for them to be consumed properly by the docs website.
+Component Documentation has two parts. a `[Component].docs.js` file, and files under `[Component]/examples/`. Each file must follow a few guidelines for them to be consumed properly by the docs website.
 
 The `docs.js` file has the following structure
 
@@ -34,17 +34,19 @@ export default {
   components: {
     Component: Component // Key value pair for components to include prop documentaion
   },
-  enumValues: { // Optional
+  enumValues: {
+    // Optional
     ComponentSize: Object.values(ComponentSize) // key value pair for any enums that cannot be statically analyzed.
   },
   examples: [SimpleExample] // Array of examples to include on the page.  They must be stored under /examples/
-}
+};
 ```
 
 An example file has the following structure
+
 ```jsx
 import React from 'react';
-import { Component } from '@patternfly/react-core'; // only @patternfly/react-* imports are
+import { Component } from '@patternfly/react-core'; // only @patternfly/react-* imports are allowed
 import something from './common/something'; // any directory under examples/ is ignored in page generation.
 import styles from './Example.styles.js'; // any .styles.js file under examples/ is ignored in page generation
 
@@ -52,14 +54,13 @@ import styles from './Example.styles.js'; // any .styles.js file under examples/
 class Example extends React.Component {
   static title = 'Simple Example'; // Sets the examples title
   static description = 'description'; // Optional: Extra descrption for the example
-  static getContainerProps = () => ({ // Optional: Adds any extra props to the container.  Useful for example specific styles
-    style: styles,
+  static getContainerProps = () => ({
+    // Optional: Adds any extra props to the container.  Useful for example specific styles
+    style: styles
   });
 
   render() {
-    return (
-      <Component />
-    );
+    return <Component />;
   }
 }
 
@@ -67,7 +68,95 @@ export default Example;
 ```
 
 Some things to keep in mind when writing examples:
-1. Keep them simple.  It is much easier for a person to understand what is going on.
-1. Do not do any iteration of variants, sizes, etc in the render.  This is easier for the developer, but it makes it much harder to reason for the consumer.
-1. Keep anything you think is useful inside this file. The source view (coming soon) will only include the source of the example.  If everything is broken out it will not be useful to the consumer. Remember, you are writing examples not a super optimized application.
-1. Try not to add extra external dependencies. These will only be approved on a case by case basis.
\ No newline at end of file
+
+1. Keep them simple. It is much easier for a person to understand what is going on.
+2. Do not do any iteration of variants, sizes, etc in the render. This is easier for the developer, but it makes it much harder to reason for the consumer.
+3. Keep anything you think is useful inside this file. The source view (coming soon) will only include the source of the example. If everything is broken out it will not be useful to the consumer. Remember, you are writing examples not a super optimized application.
+4. Try not to add extra external dependencies. These will only be approved on a case by case basis.
+
+## Code Contribution Guidelines
+
+Adhering to the following process is the best way to get your work included in the project:
+
+1.  [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes:
+
+```bash
+# Clone your fork of the repo into the current directory
+git clone https://github.com/<your-username>/patternfly-react.git
+# Navigate to the newly cloned directory
+cd patternfly-react
+# Assign the original repo to a remote called "upstream"
+git remote add upstream https://github.com/patternfly/patternfly-react.git
+```
+
+2.  Create a branch:
+
+```text
+$ git checkout -b my-branch -t upstream/master
+```
+
+3. Generate your Component
+
+```bash
+# Run the tool to Generate the component scaffolding
+ yarn generate
+```
+
+- When you select the option to generate a PatternFly 4 component, a structure resembling the following is generated
+  ```text
+  packages/patternfly-4/react-core/src/[type]/[ComponentName]/
+    index.js - Barrel File exporting public exports
+    ComponentName.js - Component Implementation
+    ComponentName.test.js - Component Tests
+    ComponentName.docs.js - Component Docs
+    examples/ - dir for all examples
+        SimpleComp
+  ```
+
+4.  Develop your component. After development is complete, ensure tests and lint standards pass.
+
+```text
+$ yarn test
+```
+
+Ensure no lint errors are introduced in `yarn-error.log` after running this command.
+
+5.  Add a commit using `yarn commit`:
+
+This project uses [`semantic-release`](https://npmjs.com/package/semantic-release) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow this convention for your commit messages.
+
+You can use `commitizen` to help you to follow [the convention][3].
+
+Once you are ready to commit the changes, please use the below commands:
+
+```text
+$ git add <files to be committed>
+$ yarn commit
+```
+
+... and follow the instruction of the interactive prompt.
+
+6.  Rebase
+
+Use `git rebase` (not `git merge`) to sync your work from time to time. Ensure all commits related to a single issue have been [squashed](https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit).
+
+```text
+$ git fetch upstream
+$ git rebase upstream/master
+```
+
+7.  Push
+
+```text
+$ git push origin my-branch
+```
+
+8.  Create a Demo
+
+    - For PatternFly 4, you can build and deploy the demo documentation to any hosting site of your choice.
+
+9.  Create a Pull Request
+
+## Additional Information
+
+See the PatternFly React Guide for full details on [Code Contribution Guidelines](https://github.com/patternfly/patternfly-react/blob/master/CONTRIBUTING.md#code-contribution-guidelines)
diff --git a/packages/patternfly-4/react-core/README.md b/packages/patternfly-4/react-core/README.md
index 456e939365c..94c80e9ef42 100644
--- a/packages/patternfly-4/react-core/README.md
+++ b/packages/patternfly-4/react-core/README.md
@@ -2,6 +2,21 @@
 
 This package provides Core PatternFly components for the [PatternFly 4][patternfly-4].
 
+### Prerequisite
+
+#### Node Environment
+
+This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
+
+For example, to develop with Node 8, use the following:
+
+```
+nvm install 8
+nvm use 8
+```
+
+This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).
+
 ### Installing
 
 ```
@@ -14,7 +29,6 @@ or
 npm install @patternfly/react-core --save
 ```
 
-
 # Usage
 
 #### Pre-requisites
@@ -22,7 +36,7 @@ npm install @patternfly/react-core --save
 It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
 
 ```javascript
-import '@patternfly/react-core/dist/styles/base.css'
+import '@patternfly/react-core/dist/styles/base.css';
 ```
 
 #### Example Component Usage
@@ -31,21 +45,47 @@ import '@patternfly/react-core/dist/styles/base.css'
 import React from 'react';
 import { Button } from '@patternfly/react-core';
 
-export default (
-  <Button variant="primary">Button</Button>
-);
+export default <Button variant="primary">Button</Button>;
 ```
 
 All css related to each component is provided alongside it. There is no component level CSS to import.
 
 # Documentation
 
+This project uses Gatsby. For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).
+
 A comprehensive list of components and detailed usage of each can be found on the [PatternFly React Docs][docs] website
 You can also find how each component is meant to be used from a design perspective on the [PatternFly 4 Core][patternfly-4] website.
 
+Note: All commands below assume you are on the root directory in this repository.
+
+### Install
+
+Run to install all the dependencies
+
+```sh
+yarn bootstrap
+```
+
+### Running
+
+To start the site locally.
+
+```sh
+yarn start:docs
+```
+
+### Building
+
+To build the site.
+
+```sh
+yarn build:docs
+```
 
 # Contributing Components
-This library makes use of the babel plugin from [@patternfly/react-styles](../react-styles/README.md) to enable providing the CSS alongside the components.  This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference [Button.js](./src/components/Button/Button.js). For any CSS not provided by core please use the `StyleSheet.create` utility from [@patternfly/react-styles](../react-styles/README.md). This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.
+
+This library makes use of the babel plugin from [@patternfly/react-styles](../react-styles/README.md) to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference [Button.js](./src/components/Button/Button.js). For any CSS not provided by core please use the `StyleSheet.create` utility from [@patternfly/react-styles](../react-styles/README.md). This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.
 
 ### Building
 
diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json
index 8133c6cc847..0a90ed6c635 100644
--- a/packages/patternfly-4/react-core/package.json
+++ b/packages/patternfly-4/react-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -35,14 +35,21 @@
     "react-dom": "^15.6.2 || ^16.4.0"
   },
   "scripts": {
+    "build": "yarn build:babel; yarn build:ts",
+    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm",
+    "build:ts": "node ./scripts/copyTS.js",
     "postbuild": "node ./build/copyStyles.js"
   },
   "optionalDependencies": {
     "@patternfly/react-tokens": "^1.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly-next": "1.0.43",
+    "@patternfly/patternfly-next": "1.0.44",
     "css": "^2.2.3",
-    "fs-extra": "^6.0.1"
+    "fs-extra": "^6.0.1",
+    "glob": "^7.1.2",
+    "npmlog": "^4.1.2"
   }
 }
diff --git a/packages/patternfly-4/react-core/scripts/copyTS.js b/packages/patternfly-4/react-core/scripts/copyTS.js
new file mode 100644
index 00000000000..7f55c3a234a
--- /dev/null
+++ b/packages/patternfly-4/react-core/scripts/copyTS.js
@@ -0,0 +1,17 @@
+const path = require('path');
+const glob = require('glob');
+const fse = require('fs-extra');
+const log = require('npmlog');
+
+const srcDir = path.join('./src');
+const distDir = path.join('./dist/js');
+
+const files = glob.sync('**/*.d.ts', {
+  cwd: srcDir
+});
+files.forEach(file => {
+  const from = path.join(srcDir, file);
+  const to = path.join(distDir, file);
+  log.info('copyTS', `${from} --> ${to}`);
+  fse.copySync(from, to);
+});
diff --git a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap
index a17089b8e1f..1fc7d088591 100644
--- a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap
@@ -75,7 +75,7 @@ exports[`Alert - danger Action 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -83,7 +83,7 @@ exports[`Alert - danger Action 1`] = `
             : 
           </span>
           
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -190,7 +190,7 @@ exports[`Alert - danger Action and Title 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -198,7 +198,7 @@ exports[`Alert - danger Action and Title 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -302,7 +302,7 @@ exports[`Alert - danger Body 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -310,7 +310,7 @@ exports[`Alert - danger Body 1`] = `
             : 
           </span>
           
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -409,7 +409,7 @@ exports[`Alert - danger Custom aria label 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -417,7 +417,7 @@ exports[`Alert - danger Custom aria label 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -521,7 +521,7 @@ exports[`Alert - danger Title 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -529,7 +529,7 @@ exports[`Alert - danger Title 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -628,7 +628,7 @@ exports[`Alert - info Action 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -636,7 +636,7 @@ exports[`Alert - info Action 1`] = `
             : 
           </span>
           
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -743,7 +743,7 @@ exports[`Alert - info Action and Title 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -751,7 +751,7 @@ exports[`Alert - info Action and Title 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -855,7 +855,7 @@ exports[`Alert - info Body 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -863,7 +863,7 @@ exports[`Alert - info Body 1`] = `
             : 
           </span>
           
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -962,7 +962,7 @@ exports[`Alert - info Custom aria label 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -970,7 +970,7 @@ exports[`Alert - info Custom aria label 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1074,7 +1074,7 @@ exports[`Alert - info Title 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1082,7 +1082,7 @@ exports[`Alert - info Title 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1181,7 +1181,7 @@ exports[`Alert - success Action 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1189,7 +1189,7 @@ exports[`Alert - success Action 1`] = `
             : 
           </span>
           
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1296,7 +1296,7 @@ exports[`Alert - success Action and Title 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1304,7 +1304,7 @@ exports[`Alert - success Action and Title 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1408,7 +1408,7 @@ exports[`Alert - success Body 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1416,7 +1416,7 @@ exports[`Alert - success Body 1`] = `
             : 
           </span>
           
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1515,7 +1515,7 @@ exports[`Alert - success Custom aria label 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1523,7 +1523,7 @@ exports[`Alert - success Custom aria label 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1627,7 +1627,7 @@ exports[`Alert - success Title 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1635,7 +1635,7 @@ exports[`Alert - success Title 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1734,7 +1734,7 @@ exports[`Alert - warning Action 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1742,7 +1742,7 @@ exports[`Alert - warning Action 1`] = `
             : 
           </span>
           
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1849,7 +1849,7 @@ exports[`Alert - warning Action and Title 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1857,7 +1857,7 @@ exports[`Alert - warning Action and Title 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -1961,7 +1961,7 @@ exports[`Alert - warning Body 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -1969,7 +1969,7 @@ exports[`Alert - warning Body 1`] = `
             : 
           </span>
           
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -2068,7 +2068,7 @@ exports[`Alert - warning Custom aria label 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -2076,7 +2076,7 @@ exports[`Alert - warning Custom aria label 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
@@ -2180,7 +2180,7 @@ exports[`Alert - warning Title 1`] = `
     <AlertBody
       className=""
       title={
-        <UNDEFINED>
+        <React.Fragment>
           <span
             className="pf-u-sr-only"
           >
@@ -2188,7 +2188,7 @@ exports[`Alert - warning Title 1`] = `
             : 
           </span>
           Some title
-        </UNDEFINED>
+        </React.Fragment>
       }
     >
       <div
diff --git a/packages/patternfly-4/react-core/src/components/Avatar/Avatar.js b/packages/patternfly-4/react-core/src/components/Avatar/Avatar.js
index cb119b3eabd..b5ff6d9f2fa 100644
--- a/packages/patternfly-4/react-core/src/components/Avatar/Avatar.js
+++ b/packages/patternfly-4/react-core/src/components/Avatar/Avatar.js
@@ -4,15 +4,16 @@ import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 
 const propTypes = {
+  /** Additional classes added to the Avatar. */
   className: PropTypes.string,
+  /** Attribute that specifies the URL of the image for the Avatar. */
   src: PropTypes.string,
+  /** Attribute that specifies the alt text of the image for the Avatar. */
   alt: PropTypes.string.isRequired
 };
 
 const defaultProps = {
-  /** Additional classes added to the Avatar. */
   className: '',
-  /** Attribute that specifies the URL of the image for the Avatar. */
   src: ''
 };
 
diff --git a/packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js b/packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js
index b00e8b63b37..49a7d1baa02 100644
--- a/packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js
+++ b/packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../../../../react-docs/src/assets/img_avatar.png';
+import avatarImg from './img_avatar.png';
 
 class SimpleAvatar extends React.Component {
   static title = 'Simple Avatar';
diff --git a/packages/patternfly-4/react-docs/src/assets/img_avatar.png b/packages/patternfly-4/react-core/src/components/Avatar/examples/img_avatar.png
similarity index 100%
rename from packages/patternfly-4/react-docs/src/assets/img_avatar.png
rename to packages/patternfly-4/react-core/src/components/Avatar/examples/img_avatar.png
diff --git a/packages/patternfly-4/react-core/src/components/Avatar/index.d.ts b/packages/patternfly-4/react-core/src/components/Avatar/index.d.ts
new file mode 100644
index 00000000000..cd8e00c3fc1
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Avatar/index.d.ts
@@ -0,0 +1 @@
+export { default as Avatar, AvatarProps } from './Avatar';
diff --git a/packages/patternfly-4/react-core/src/components/Badge/examples/ReadBadge.js b/packages/patternfly-4/react-core/src/components/Badge/examples/ReadBadge.js
index 956aa199f7e..9b5fec3dff2 100644
--- a/packages/patternfly-4/react-core/src/components/Badge/examples/ReadBadge.js
+++ b/packages/patternfly-4/react-core/src/components/Badge/examples/ReadBadge.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { Badge } from '@patternfly/react-core';
 import getContainerProps from './common/getContainerProps';
 
-class UnreadBadge extends React.Component {
-  static title = 'Unread Badge';
+class ReadBadge extends React.Component {
+  static title = 'Read Badge';
   static getContainerProps = getContainerProps;
 
   render() {
@@ -18,4 +18,4 @@ class UnreadBadge extends React.Component {
   }
 }
 
-export default UnreadBadge;
+export default ReadBadge;
diff --git a/packages/patternfly-4/react-core/src/components/Badge/examples/UnreadBadge.js b/packages/patternfly-4/react-core/src/components/Badge/examples/UnreadBadge.js
index f2bd2fa11cc..6f79c0ff4b8 100644
--- a/packages/patternfly-4/react-core/src/components/Badge/examples/UnreadBadge.js
+++ b/packages/patternfly-4/react-core/src/components/Badge/examples/UnreadBadge.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { Badge } from '@patternfly/react-core';
 import getContainerProps from './common/getContainerProps';
 
-class ReadBadge extends React.Component {
-  static title = 'Read Badge';
+class UnreadBadge extends React.Component {
+  static title = 'Unread Badge';
   static getContainerProps = getContainerProps;
 
   render() {
@@ -18,4 +18,4 @@ class ReadBadge extends React.Component {
   }
 }
 
-export default ReadBadge;
+export default UnreadBadge;
diff --git a/packages/patternfly-4/react-core/src/components/Brand/Brand.d.ts b/packages/patternfly-4/react-core/src/components/Brand/Brand.d.ts
new file mode 100644
index 00000000000..bb1c13285e5
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/Brand.d.ts
@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface BrandProps extends HTMLProps<HTMLImageElement> {
+  src?: string;
+  alt: string;
+}
+declare const Brand: SFC<BrandProps>;
+export default Brand;
diff --git a/packages/patternfly-4/react-core/src/components/Brand/Brand.docs.js b/packages/patternfly-4/react-core/src/components/Brand/Brand.docs.js
new file mode 100644
index 00000000000..8c0e8d1e739
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/Brand.docs.js
@@ -0,0 +1,10 @@
+import { Brand } from '@patternfly/react-core';
+import Simple from './examples/SimpleBrand';
+
+export default {
+  title: 'Brand',
+  components: {
+    Brand
+  },
+  examples: [Simple]
+};
diff --git a/packages/patternfly-4/react-core/src/components/Brand/Brand.js b/packages/patternfly-4/react-core/src/components/Brand/Brand.js
new file mode 100644
index 00000000000..534fcd0c964
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/Brand.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Additional classes added to the Brand. */
+  className: PropTypes.string,
+  /** Attribute that specifies the URL of the image for the Brand. */
+  src: PropTypes.string,
+  /** Attribute that specifies the alt text of the image for the Brand. */
+  alt: PropTypes.string.isRequired
+};
+
+const defaultProps = {
+  className: '',
+  src: ''
+};
+
+const Brand = ({ className, src, alt, ...props }) => (
+  /** the brand component currently contains no styling
+   the 'pf-c-brand' string will be used for the className */
+  <img {...props} className={css('pf-c-brand', className)} src={src} alt={alt} />
+);
+
+Brand.propTypes = propTypes;
+Brand.defaultProps = defaultProps;
+
+export default Brand;
diff --git a/packages/patternfly-4/react-core/src/components/Brand/Brand.test.js b/packages/patternfly-4/react-core/src/components/Brand/Brand.test.js
new file mode 100644
index 00000000000..53d3337a919
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/Brand.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Brand from './Brand';
+
+test('simple brand', () => {
+  const view = shallow(<Brand alt="brand" />);
+  expect(view).toMatchSnapshot();
+});
diff --git a/packages/patternfly-4/react-core/src/components/Brand/__snapshots__/Brand.test.js.snap b/packages/patternfly-4/react-core/src/components/Brand/__snapshots__/Brand.test.js.snap
new file mode 100644
index 00000000000..58accdffb9d
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/__snapshots__/Brand.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`simple brand 1`] = `
+<img
+  alt="brand"
+  className="pf-c-brand"
+  src=""
+/>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js b/packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js
new file mode 100644
index 00000000000..70636eed9c1
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Brand } from '@patternfly/react-core';
+import brandImg from './pf_logo.svg';
+
+class SimpleBrand extends React.Component {
+  static title = 'Simple Brand';
+
+  render() {
+    return <Brand src={brandImg} alt="Brand Image" />;
+  }
+}
+
+export default SimpleBrand;
diff --git a/packages/patternfly-4/react-core/src/components/Brand/examples/pf_logo.svg b/packages/patternfly-4/react-core/src/components/Brand/examples/pf_logo.svg
new file mode 100644
index 00000000000..efca381b551
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/examples/pf_logo.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 706.3 132.5" enable-background="new 0 0 706.3 132.5" xml:space="preserve">
+<g>
+	<path fill="#030303" d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+		c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
+		c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
+		c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
+		c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"/>
+	<path fill="#030303" d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+		c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
+		/>
+	<path fill="#030303" d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z"/>
+	<path fill="#030303" d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z"/>
+	<path fill="#030303" d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"/>
+	<path fill="#030303" d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+		c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
+		l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
+		c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
+		H478.9z"/>
+	<path fill="#030303" d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+		c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
+		c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"/>
+	<path fill="#030303" d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"/>
+	<path fill="#030303" d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z"/>
+	<path fill="#030303" d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"/>
+</g>
+<g>
+	<path fill="#030303" d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+		l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
+		l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
+		L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
+		l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
+		L101.1,70z"/>
+</g>
+</svg>
diff --git a/packages/patternfly-4/react-core/src/components/Brand/index.d.ts b/packages/patternfly-4/react-core/src/components/Brand/index.d.ts
new file mode 100644
index 00000000000..56188f3a069
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/index.d.ts
@@ -0,0 +1 @@
+export { default as Brand, BrandProps } from './Brand';
diff --git a/packages/patternfly-4/react-core/src/components/Brand/index.js b/packages/patternfly-4/react-core/src/components/Brand/index.js
new file mode 100644
index 00000000000..04beaf3e84c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Brand/index.js
@@ -0,0 +1 @@
+export { default as Brand } from './Brand';
diff --git a/packages/patternfly-4/react-core/src/components/Button/examples/LinkButton.js b/packages/patternfly-4/react-core/src/components/Button/examples/LinkButton.js
index 76ed1c0e559..3139d2b7f1b 100644
--- a/packages/patternfly-4/react-core/src/components/Button/examples/LinkButton.js
+++ b/packages/patternfly-4/react-core/src/components/Button/examples/LinkButton.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from '@patternfly/react-core';
 import getContainerProps from './common/getContainerProps';
 
-class LinkButtons extends React.Component {
+class LinkButton extends React.Component {
   static title = 'Links';
   static description = `Links with button styling. Semantic buttons and links are important for usability as well as accessibility. Using an "a" instead of a "button" element to perform user initiated actions should be avoided, unless absolutely necessary.`;
   static getContainerProps = getContainerProps;
@@ -21,4 +21,4 @@ class LinkButtons extends React.Component {
   }
 }
 
-export default LinkButtons;
+export default LinkButton;
diff --git a/packages/patternfly-4/react-core/src/components/Card/__snapshots__/Card.test.js.snap b/packages/patternfly-4/react-core/src/components/Card/__snapshots__/Card.test.js.snap
index 4931e6deacc..28f032d6dc4 100644
--- a/packages/patternfly-4/react-core/src/components/Card/__snapshots__/Card.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Card/__snapshots__/Card.test.js.snap
@@ -6,6 +6,7 @@ exports[`renders with PatternFly Core styles 1`] = `
 .pf-c-card {
   display: flex;
   flex-direction: column;
+  background-color: #ffffff;
   box-shadow: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.2);
 }
 
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/index.d.ts b/packages/patternfly-4/react-core/src/components/Checkbox/index.d.ts
index 8edbc502f99..4ecd9ef1694 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/index.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Checkbox/index.d.ts
@@ -1 +1 @@
-export { default as Checkbox } from './Checkbox';
+export { default as Checkbox, CheckboxProps } from './Checkbox';
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/DirectionUpDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/DirectionUpDropdown.js
index 17b8e0fa9ae..c733b6f67f3 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/DirectionUpDropdown.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/examples/DirectionUpDropdown.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownDirection } from '@patternfly/react-core';
 
-export default class ExampleDropdown extends Component {
+export default class DirectionUpDropdown extends Component {
   static title = 'Dropdown - direction up';
 
   constructor(props) {
@@ -13,14 +13,12 @@ export default class ExampleDropdown extends Component {
 
   onToggle = isOpen => {
     this.setState({
-      ...this.state,
       isOpen
     });
   };
 
   onSelect = event => {
     this.setState({
-      ...this.state,
       isOpen: !this.state.isOpen
     });
   };
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/KebabDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/KebabDropdown.js
index d370e93def2..cd426eb235d 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/KebabDropdown.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/examples/KebabDropdown.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Dropdown, KebabToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
 
-export default class ExampleDropdown extends Component {
+export default class KebabDropdown extends Component {
   static title = 'Kebab';
 
   constructor(props) {
@@ -13,14 +13,12 @@ export default class ExampleDropdown extends Component {
 
   onToggle = isOpen => {
     this.setState({
-      ...this.state,
       isOpen
     });
   };
 
   onSelect = event => {
     this.setState({
-      ...this.state,
       isOpen: !this.state.isOpen
     });
   };
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/PositionRightDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/PositionRightDropdown.js
index ed3c251d204..6c17c68269b 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/PositionRightDropdown.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/examples/PositionRightDropdown.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition } from '@patternfly/react-core';
 
-export default class ExampleDropdown extends Component {
+export default class PositionRightDropdown extends Component {
   static title = 'Dropdown - position right';
 
   constructor(props) {
@@ -13,14 +13,12 @@ export default class ExampleDropdown extends Component {
 
   onToggle = isOpen => {
     this.setState({
-      ...this.state,
       isOpen
     });
   };
 
   onSelect = event => {
     this.setState({
-      ...this.state,
       isOpen: !this.state.isOpen
     });
   };
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/examples/SimpleDropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/examples/SimpleDropdown.js
index 58e2cc0613a..883c4ce504a 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/examples/SimpleDropdown.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/examples/SimpleDropdown.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
 
-export default class ExampleDropdown extends Component {
+export default class SimpleDropdown extends Component {
   static title = 'Simple dropdown';
 
   constructor(props) {
@@ -13,14 +13,12 @@ export default class ExampleDropdown extends Component {
 
   onToggle = isOpen => {
     this.setState({
-      ...this.state,
       isOpen
     });
   };
 
   onSelect = event => {
     this.setState({
-      ...this.state,
       isOpen: !this.state.isOpen
     });
   };
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/index.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/index.d.ts
index 5180427eb2b..aead68ccd40 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/index.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/index.d.ts
@@ -1,9 +1,10 @@
 export {
   default as Dropdown,
   DropdownPosition,
-  DropdownDirection
+  DropdownDirection,
+  DropdownProps
 } from './Dropdown';
-export { default as DropdownItem } from './Item';
-export { default as DropdownSeparator } from './Separator';
-export { default as KebabToggle } from './KebabToggle';
-export { default as DropdownToggle } from './DropdownToggle';
+export { default as DropdownItem, ItemProps } from './Item';
+export { default as DropdownSeparator, SeparatorProps } from './Separator';
+export { default as KebabToggle, KebabProps } from './KebabToggle';
+export { default as DropdownToggle, DropdownToggleProps } from './DropdownToggle';
diff --git a/packages/patternfly-4/react-core/src/components/List/List.d.ts b/packages/patternfly-4/react-core/src/components/List/List.d.ts
new file mode 100644
index 00000000000..3b0a1874bab
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/List.d.ts
@@ -0,0 +1,16 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { OneOf } from '../../typeUtils';
+
+export const ListVariant: {
+  grid: 'grid';
+  inline: 'inline';
+};
+
+export interface ListProps extends HTMLProps<HTMLUListElement> {
+  children?: ReactNode;
+  variant?: OneOf<typeof ListVariant, keyof typeof ListVariant>;
+}
+
+declare const List: SFC<ListProps>;
+
+export default List;
diff --git a/packages/patternfly-4/react-core/src/components/List/List.docs.js b/packages/patternfly-4/react-core/src/components/List/List.docs.js
new file mode 100644
index 00000000000..027b22c3591
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/List.docs.js
@@ -0,0 +1,13 @@
+import { List, ListItem } from '@patternfly/react-core';
+import Simple from './examples/SimpleList';
+import Inline from './examples/InlineList';
+import Grid from './examples/GridList';
+
+export default {
+  title: 'List',
+  components: {
+    List,
+    ListItem
+  },
+  examples: [Simple, Inline, Grid]
+};
diff --git a/packages/patternfly-4/react-core/src/components/List/List.js b/packages/patternfly-4/react-core/src/components/List/List.js
new file mode 100644
index 00000000000..7dddc9b9bdc
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/List.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/List/styles.css';
+import { css, getModifier } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+export const ListVariant = {
+  grid: 'grid',
+  inline: 'inline'
+};
+
+const propTypes = {
+  /** Anything that can be rendered inside of the list */
+  children: PropTypes.node,
+  /** Additional classes added to the list. */
+  className: PropTypes.string,
+  /** Adds list variant styles */
+  variant: PropTypes.oneOf(Object.values(ListVariant))
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  variant: null
+};
+
+const List = ({ className, children, variant, ...props }) => (
+  <ul {...props} className={css(styles.list, getModifier(styles.modifiers, variant), className)}>
+    {children}
+  </ul>
+);
+
+List.propTypes = propTypes;
+List.defaultProps = defaultProps;
+
+export default List;
diff --git a/packages/patternfly-4/react-core/src/components/List/List.test.js b/packages/patternfly-4/react-core/src/components/List/List.test.js
new file mode 100644
index 00000000000..4562b604f20
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/List.test.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import List from './List';
+import ListItem from './ListItem';
+
+const ListItems = () => (
+  <React.Fragment>
+    <List>
+      <ListItem>First</ListItem>
+      <ListItem>Second</ListItem>
+      <ListItem>Third</ListItem>
+    </List>
+  </React.Fragment>
+);
+
+describe('list', () => {
+  test('simple list', () => {
+    const view = mount(
+      <List>
+        <ListItems />
+      </List>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('inline list', () => {
+    const view = mount(
+      <List variant="inline">
+        <ListItems />
+      </List>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('grid list', () => {
+    const view = mount(
+      <List variant="grid">
+        <ListItems />
+      </List>
+    );
+    expect(view).toMatchSnapshot();
+  });
+});
diff --git a/packages/patternfly-4/react-core/src/components/List/ListItem.d.ts b/packages/patternfly-4/react-core/src/components/List/ListItem.d.ts
new file mode 100644
index 00000000000..b8292c97562
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/ListItem.d.ts
@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface ListItemProps extends HTMLProps<HTMLLIElement> {
+  children?: ReactNode;
+}
+
+declare const ListItem: SFC<ListItemProps>;
+
+export default ListItem;
diff --git a/packages/patternfly-4/react-core/src/components/List/ListItem.js b/packages/patternfly-4/react-core/src/components/List/ListItem.js
new file mode 100644
index 00000000000..f8312eef65e
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/ListItem.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Anything that can be rendered inside of list item */
+  children: PropTypes.node
+};
+
+const defaultProps = {
+  children: null
+};
+
+const ListItem = ({ children, ...props }) => <li {...props}>{children}</li>;
+
+ListItem.propTypes = propTypes;
+ListItem.defaultProps = defaultProps;
+
+export default ListItem;
diff --git a/packages/patternfly-4/react-core/src/components/List/__snapshots__/List.test.js.snap b/packages/patternfly-4/react-core/src/components/List/__snapshots__/List.test.js.snap
new file mode 100644
index 00000000000..7740fefcc3b
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/__snapshots__/List.test.js.snap
@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`list grid list 1`] = `
+.pf-c-list {
+  display: block;
+  padding-left: 1.5rem;
+  margin: 1rem 0px 1rem 1.5rem;
+  list-style: undefined;
+}
+.pf-c-list.pf-m-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
+  grid-gap: 1rem;
+}
+
+<List
+  className=""
+  variant="grid"
+>
+  <ul
+    className="pf-c-list pf-m-grid"
+  >
+    <ListItems>
+      <List
+        className=""
+        variant={null}
+      >
+        <ul
+          className="pf-c-list"
+        >
+          <ListItem>
+            <li>
+              First
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Second
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Third
+            </li>
+          </ListItem>
+        </ul>
+      </List>
+    </ListItems>
+  </ul>
+</List>
+`;
+
+exports[`list inline list 1`] = `
+.pf-c-list {
+  display: block;
+  padding-left: 1.5rem;
+  margin: 1rem 0px 1rem 1.5rem;
+  list-style: undefined;
+}
+.pf-c-list.pf-m-inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+<List
+  className=""
+  variant="inline"
+>
+  <ul
+    className="pf-c-list pf-m-inline"
+  >
+    <ListItems>
+      <List
+        className=""
+        variant={null}
+      >
+        <ul
+          className="pf-c-list"
+        >
+          <ListItem>
+            <li>
+              First
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Second
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Third
+            </li>
+          </ListItem>
+        </ul>
+      </List>
+    </ListItems>
+  </ul>
+</List>
+`;
+
+exports[`list simple list 1`] = `
+.pf-c-list {
+  display: block;
+  padding-left: 1.5rem;
+  margin: 1rem 0px 1rem 1.5rem;
+  list-style: undefined;
+}
+.pf-c-list {
+  display: block;
+  padding-left: 1.5rem;
+  margin: 1rem 0px 1rem 1.5rem;
+  list-style: undefined;
+}
+
+<List
+  className=""
+  variant={null}
+>
+  <ul
+    className="pf-c-list"
+  >
+    <ListItems>
+      <List
+        className=""
+        variant={null}
+      >
+        <ul
+          className="pf-c-list"
+        >
+          <ListItem>
+            <li>
+              First
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Second
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Third
+            </li>
+          </ListItem>
+        </ul>
+      </List>
+    </ListItems>
+  </ul>
+</List>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/List/examples/GridList.js b/packages/patternfly-4/react-core/src/components/List/examples/GridList.js
new file mode 100644
index 00000000000..4de254a47b3
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/examples/GridList.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+class GridList extends React.Component {
+  static title = 'Grid List';
+
+  render() {
+    return (
+      <List variant="grid">
+        <ListItem>First</ListItem>
+        <ListItem>Second</ListItem>
+        <ListItem>Third</ListItem>
+        <ListItem>Fourth</ListItem>
+        <ListItem>Fifth</ListItem>
+        <ListItem>Sixth</ListItem>
+      </List>
+    );
+  }
+}
+
+export default GridList;
diff --git a/packages/patternfly-4/react-core/src/components/List/examples/InlineList.js b/packages/patternfly-4/react-core/src/components/List/examples/InlineList.js
new file mode 100644
index 00000000000..cba9fbff394
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/examples/InlineList.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+class InlineList extends React.Component {
+  static title = 'Inline List';
+
+  render() {
+    return (
+      <List variant="inline">
+        <ListItem>First</ListItem>
+        <ListItem>Second</ListItem>
+        <ListItem>Third</ListItem>
+      </List>
+    );
+  }
+}
+
+export default InlineList;
diff --git a/packages/patternfly-4/react-core/src/components/List/examples/SimpleList.js b/packages/patternfly-4/react-core/src/components/List/examples/SimpleList.js
new file mode 100644
index 00000000000..c4d3cb3f8e7
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/examples/SimpleList.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+class SimpleList extends React.Component {
+  static title = 'Simple List';
+
+  render() {
+    return (
+      <List>
+        <ListItem>First</ListItem>
+        <ListItem>Second</ListItem>
+        <ListItem>Third</ListItem>
+      </List>
+    );
+  }
+}
+
+export default SimpleList;
diff --git a/packages/patternfly-4/react-core/src/components/List/index.d.ts b/packages/patternfly-4/react-core/src/components/List/index.d.ts
new file mode 100644
index 00000000000..0dfabf223e8
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/index.d.ts
@@ -0,0 +1,2 @@
+export { default as List, ListProps } from './List';
+export { default as ListItem, ListItemProps } from './ListItem';
diff --git a/packages/patternfly-4/react-core/src/components/List/index.js b/packages/patternfly-4/react-core/src/components/List/index.js
new file mode 100644
index 00000000000..a8064b341ae
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/List/index.js
@@ -0,0 +1,2 @@
+export { default as List } from './List';
+export { default as ListItem } from './ListItem';
diff --git a/packages/patternfly-4/react-core/src/components/Nav/Nav.d.ts b/packages/patternfly-4/react-core/src/components/Nav/Nav.d.ts
new file mode 100644
index 00000000000..2a2eb327845
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/Nav.d.ts
@@ -0,0 +1,14 @@
+import { SFC, HTMLProps, ReactNode, FormEvent } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface NavProps extends Omit<HTMLProps<HTMLDivElement>, 'onSelect'> {
+  children?: ReactNode;
+  className?: string;
+  onSelect(groupId: number, itemId: number, event: FormEvent<HTMLInputElement>): void;
+  onToggle(groupId: number, expanded: boolean, event: FormEvent<HTMLInputElement>): void;
+  'aria-label': string;
+}
+
+declare const Nav: SFC<NavProps>;
+
+export default Nav;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/Nav.docs.js b/packages/patternfly-4/react-core/src/components/Nav/Nav.docs.js
new file mode 100644
index 00000000000..94a708bf38c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/Nav.docs.js
@@ -0,0 +1,33 @@
+import { Nav, NavGroup, NavList, NavItem, NavExpandable, NavVariants } from '@patternfly/react-core';
+import SimpleList from './examples/NavSimpleList';
+import GroupedList from './examples/NavGroupedList';
+import ExpandableList from './examples/NavExpandableList';
+import ExpandableTitlesList from './examples/NavExpandableTitlesList';
+import MixedList from './examples/NavMixedList';
+import DefaultList from './examples/NavDefaultList';
+import HorizontalList from './examples/NavHorizontalList';
+import TertiaryList from './examples/NavTertiaryList';
+
+export default {
+  title: 'Nav',
+  components: {
+    Nav,
+    NavGroup,
+    NavList,
+    NavExpandable,
+    NavItem
+  },
+  enumValues: {
+    'Object.values(NavVariants)': Object.values(NavVariants)
+  },
+  examples: [
+    SimpleList,
+    GroupedList,
+    DefaultList,
+    ExpandableList,
+    ExpandableTitlesList,
+    MixedList,
+    HorizontalList,
+    TertiaryList
+  ]
+};
diff --git a/packages/patternfly-4/react-core/src/components/Nav/Nav.js b/packages/patternfly-4/react-core/src/components/Nav/Nav.js
new file mode 100644
index 00000000000..fef96509798
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/Nav.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/Nav/styles.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Anything that can be rendered inside of the nav */
+  children: PropTypes.node,
+  /** Additional classes added to the container */
+  className: PropTypes.string,
+  /** Callback for updating when item selection changes */
+  onSelect: PropTypes.func,
+  /** Callback for when a list is expanded or collapsed */
+  onToggle: PropTypes.func,
+  /** Accessibility label */
+  'aria-label': PropTypes.string.isRequired
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  onSelect: () => undefined,
+  onToggle: () => undefined
+};
+
+export const NavContext = React.createContext();
+
+class Nav extends React.Component {
+  // Callback from NavItem
+  onSelect(event, groupId, itemId) {
+    event.stopPropagation();
+    this.props.onSelect({
+      event,
+      itemId,
+      groupId
+    });
+  }
+
+  // Callback from NavExpandable
+  onToggle(event, groupId, isExpanded) {
+    event.stopPropagation();
+    this.props.onToggle({
+      event,
+      groupId,
+      isExpanded
+    });
+  }
+
+  render() {
+    const { children, className, ...props } = this.props;
+
+    return (
+      <NavContext.Provider
+        value={{
+          onSelect: (event, groupId, itemId) => this.onSelect(event, groupId, itemId),
+          onToggle: (event, groupId, expanded) => this.onToggle(event, groupId, expanded)
+        }}
+      >
+        <nav className={css(styles.nav, className)} {...props}>
+          {children}
+        </nav>
+      </NavContext.Provider>
+    );
+  }
+}
+
+Nav.propTypes = propTypes;
+Nav.defaultProps = defaultProps;
+
+export default Nav;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/Nav.test.js b/packages/patternfly-4/react-core/src/components/Nav/Nav.test.js
new file mode 100644
index 00000000000..b4a6cc0d536
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/Nav.test.js
@@ -0,0 +1,196 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Nav from './Nav';
+import NavList from './NavList';
+import NavGroup from './NavGroup';
+import NavItem from './NavItem';
+import NavExpandable from './NavExpandable';
+
+const props = {
+  items: [
+    { to: '#link1', label: 'Link 1' },
+    { to: '#link2', label: 'Link 2' },
+    { to: '#link3', label: 'Link 3' },
+    { to: '#link4', label: 'Link 4' }
+  ]
+};
+
+beforeEach(() => {
+  window.location.hash = '#link1';
+});
+
+test('Default Nav List', () => {
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList>
+        {props.items.map(item => (
+          <NavItem to={item.to} key={item.to}>
+            {item.label}
+          </NavItem>
+        ))}
+      </NavList>
+    </Nav>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Default Nav List - Trigger item active update', () => {
+  window.location.hash = '#link2';
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList>
+        {props.items.map(item => (
+          <NavItem to={item.to} key={item.to}>
+            {item.label}
+          </NavItem>
+        ))}
+      </NavList>
+    </Nav>
+  );
+  view
+    .find({ href: '#link2' })
+    .first()
+    .simulate('click');
+  expect(view).toMatchSnapshot();
+});
+
+test('Simple Nav List', () => {
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList variant="simple">
+        {props.items.map(item => (
+          <NavItem to={item.to} key={item.to}>
+            {item.label}
+          </NavItem>
+        ))}
+      </NavList>
+    </Nav>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Expandable Nav List', () => {
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList>
+        <NavExpandable id="grp-1" title="Section 1">
+          {props.items.map(item => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Expandable Nav List - Trigger toggle', () => {
+  window.location.hash = '#link2';
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList>
+        <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
+          {props.items.map(item => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+  view
+    .find('li.expandable-group')
+    .first()
+    .simulate('click');
+  expect(view).toMatchSnapshot();
+});
+
+test('Expandable Nav List with aria label', () => {
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList>
+        <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
+          {props.items.map(item => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Nav Grouped List', () => {
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavGroup id="grp-1" title="Section 1">
+        <NavList>
+          {props.items.map(item => (
+            <NavItem to={item.to} key={`section1_${item.to}`}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </NavGroup>
+      <NavGroup id="grp-2" title="Section 2">
+        <NavList>
+          {props.items.map(item => (
+            <NavItem to={item.to} key={`section2_${item.to}`}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </NavGroup>
+    </Nav>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Horizontal Nav List', () => {
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList variant="horizontal">
+        {props.items.map(item => (
+          <NavItem to={item.to} key={item.to}>
+            {item.label}
+          </NavItem>
+        ))}
+      </NavList>
+    </Nav>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Tertiary Nav List', () => {
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList variant="tertiary">
+        {props.items.map(item => (
+          <NavItem to={item.to} key={item.to}>
+            {item.label}
+          </NavItem>
+        ))}
+      </NavList>
+    </Nav>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Nav List with custom item nodes', () => {
+  const CustomNode = () => <div>My custom node</div>;
+  const view = mount(
+    <Nav aria-label="Test">
+      <NavList variant="tertiary">
+        <NavItem to="/components/nav#link1">
+          <CustomNode />
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+  expect(view).toMatchSnapshot();
+});
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavExpandable.d.ts b/packages/patternfly-4/react-core/src/components/Nav/NavExpandable.d.ts
new file mode 100644
index 00000000000..e0b048d62e5
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavExpandable.d.ts
@@ -0,0 +1,16 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface NavExpandableProps extends HTMLProps<HTMLDivElement> {
+  title: string;
+  srText?: string;
+  isExpanded?: boolean;
+  children?: ReactNode;
+  className?: string;
+  groupId?: string | number;
+  isActive?: boolean;
+  id?: string;
+}
+
+declare const NavExpandable: SFC<NavExpandableProps>;
+
+export default NavExpandable;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavExpandable.js b/packages/patternfly-4/react-core/src/components/Nav/NavExpandable.js
new file mode 100644
index 00000000000..90ca45c3a4a
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavExpandable.js
@@ -0,0 +1,107 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/Nav/styles.css';
+import a11yStyles from '@patternfly/patternfly-next/utilities/Accessibility/styles.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import NavToggle from './NavToggle';
+import { AngleRightIcon } from '@patternfly/react-icons';
+import { NavContext } from './Nav';
+
+const propTypes = {
+  /** Title shown for the expandable list */
+  title: PropTypes.string.isRequired,
+  /** If defined, screen readers will read this text instead of the list title */
+  srText: PropTypes.string,
+  /** If true will default the list to be expanded */
+  isExpanded: PropTypes.bool,
+  /** Anything that can be rendered inside of the expandable list */
+  children: PropTypes.node,
+  /** Additional classes added to the container */
+  className: PropTypes.string,
+  /** Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component */
+  groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** If true makes the expandable list title active */
+  isActive: PropTypes.bool,
+  /** Identifier to use for the section aria label */
+  id: PropTypes.string
+};
+
+const defaultProps = {
+  srText: '',
+  isExpanded: false,
+  children: null,
+  className: '',
+  groupId: null,
+  isActive: false,
+  id: ''
+};
+
+class NavExpandable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.uniqueId =
+      props.id ||
+      new Date().getTime() +
+      Math.random()
+        .toString(36)
+        .slice(2);
+  }
+
+  render() {
+    const { title, srText, isExpanded: defaultExpanded, children, className, groupId, isActive, ...props } = this.props;
+
+    return (
+      <NavContext.Consumer>
+        {context => (
+          <NavToggle defaultValue={defaultExpanded} groupId={groupId} onToggle={context.onToggle}>
+            {({ value: isExpanded, toggle }) => (
+              <li
+                className={css(
+                  styles.navItem,
+                  isExpanded && styles.modifiers.expanded,
+                  isActive && styles.modifiers.current,
+                  className
+                )}
+                onClick={toggle}
+                {...props}
+              >
+                <a
+                  className={css(styles.navLink)}
+                  id={srText ? null : this.uniqueId}
+                  href="#"
+                  onClick={e => e.preventDefault()}
+                  onMouseDown={e => e.preventDefault()}
+                  aria-expanded={isExpanded}
+                >
+                  {title}
+                  <span className={css(styles.navToggle)}>
+                    <AngleRightIcon aria-hidden="true" />
+                  </span>
+                </a>
+                <section
+                  className={css(styles.navSubnav)}
+                  aria-labelledby={this.uniqueId}
+                  hidden={isExpanded ? null : true}
+                >
+                  {srText && (
+                    <h2 className={css(a11yStyles.srOnly)} id={this.uniqueId}>
+                      {srText}
+                    </h2>
+                  )}
+                  <ul className={css(styles.navSimpleList)}>{children}</ul>
+                </section>
+              </li>
+            )}
+          </NavToggle>
+        )}
+      </NavContext.Consumer>
+    );
+  }
+}
+
+NavExpandable.propTypes = propTypes;
+NavExpandable.defaultProps = defaultProps;
+NavExpandable.componentType = 'NavExpandable';
+
+export default NavExpandable;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavGroup.d.ts b/packages/patternfly-4/react-core/src/components/Nav/NavGroup.d.ts
new file mode 100644
index 00000000000..fe744bc38ab
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavGroup.d.ts
@@ -0,0 +1,12 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface NavGroupProps extends HTMLProps<HTMLDivElement> {
+  title: string;
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+}
+
+declare const NavGroup: SFC<NavGroupProps>;
+
+export default NavGroup;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavGroup.js b/packages/patternfly-4/react-core/src/components/Nav/NavGroup.js
new file mode 100644
index 00000000000..5de2c7b2370
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavGroup.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/Nav/styles.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Title shown for the group */
+  title: PropTypes.string.isRequired,
+  /** Anything that can be rendered inside of the group */
+  children: PropTypes.node,
+  /** Additional classes added to the container */
+  className: PropTypes.string,
+  /** Identifier to use for the section aria label */
+  id: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  id: ''
+};
+
+class NavGroup extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.uniqueId =
+      props.id ||
+      new Date().getTime() +
+      Math.random()
+        .toString(36)
+        .slice(2);
+  }
+
+  render() {
+    const { title, children, className, ...props } = this.props;
+
+    return (
+      <section className={css(styles.navSection, className)} aria-labelledby={this.uniqueId} {...props}>
+        <h2 className={css(styles.navSectionTitle)} id={this.uniqueId}>
+          {title}
+        </h2>
+        <ul className={css(styles.navSimpleList)}>{children}</ul>
+      </section>
+    );
+  }
+}
+
+NavGroup.propTypes = propTypes;
+NavGroup.defaultProps = defaultProps;
+NavGroup.componentType = 'NavGroup';
+
+export default NavGroup;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavItem.d.ts b/packages/patternfly-4/react-core/src/components/Nav/NavItem.d.ts
new file mode 100644
index 00000000000..24d1a2d96b4
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavItem.d.ts
@@ -0,0 +1,14 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface NavItemProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode | string;
+  className?: string;
+  to?: string;
+  isActive?: boolean;
+  groupId?: string | number;
+  itemId?: string | number;
+}
+
+declare const NavItem: SFC<NavItemProps>;
+
+export default NavItem;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavItem.js b/packages/patternfly-4/react-core/src/components/Nav/NavItem.js
new file mode 100644
index 00000000000..cde40d9c2b3
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavItem.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/Nav/styles.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import { NavContext } from './Nav';
+
+const propTypes = {
+  /** Content rendered inside the nav item */
+  children: PropTypes.node,
+  /** Additional classes added to the nav item */
+  className: PropTypes.string,
+  /** Target navigation link */
+  to: PropTypes.string,
+  /** Flag indicating whether the item is active */
+  isActive: PropTypes.bool,
+  /** Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component */
+  groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Item identifier, will be returned with the onToggle and onSelect callback passed to the Nav component */
+  itemId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  to: '#',
+  isActive: false,
+  groupId: null,
+  itemId: null
+};
+
+const NavItem = ({ className, children, to, isActive, groupId, itemId, ...props }) => {
+  const defaultLink = (
+    <NavContext.Consumer>
+      {context => (
+        <a
+          href={to}
+          onClick={e => context.onSelect(e, groupId, itemId)}
+          className={css(styles.navLink, isActive && styles.modifiers.current, className)}
+          aria-current={isActive ? 'page' : null}
+        >
+          {children}
+        </a>
+      )}
+    </NavContext.Consumer>
+  );
+  const reactElement = React.isValidElement(children);
+  const clonedChild = (
+    <NavContext.Consumer>
+      {context =>
+        React.cloneElement(children, {
+          onClick: e => context.onSelect(e, groupId, itemId),
+          className: css(styles.navLink, isActive && styles.modifiers.current, className)
+        })
+      }
+    </NavContext.Consumer>
+  );
+  return (
+    <li className={css(styles.navItem, className)} {...props}>
+      {reactElement ? clonedChild : defaultLink}
+    </li>
+  );
+};
+
+NavItem.propTypes = propTypes;
+NavItem.defaultProps = defaultProps;
+NavItem.componentType = 'NavItem';
+
+export default NavItem;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavList.d.ts b/packages/patternfly-4/react-core/src/components/Nav/NavList.d.ts
new file mode 100644
index 00000000000..c5cbab9c74c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavList.d.ts
@@ -0,0 +1,20 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { OneOf } from '../../typeUtils';
+import { NavVariants } from './NavVariants';
+
+export interface NavListProps extends HTMLProps<HTMLDivElement> {
+  variant?: OneOf<typeof NavVariants, keyof typeof NavVariants>;
+  id?: string;
+  srText?: string;
+  children?: ReactNode;
+  className?: string;
+  innerClassName?: string;
+  title?: string;
+  isExpandable?: boolean;
+  isExpanded?: boolean;
+  isActive?: boolean;
+}
+
+declare const NavList: SFC<NavListProps>;
+
+export default NavList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavList.js b/packages/patternfly-4/react-core/src/components/Nav/NavList.js
new file mode 100644
index 00000000000..e004f8e858c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavList.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavVariants } from './NavVariants';
+import styles from '@patternfly/patternfly-next/components/Nav/styles.css';
+import { css } from '@patternfly/react-styles';
+
+const propTypes = {
+  /** Indicates the list type. */
+  variant: PropTypes.oneOf(Object.values(NavVariants)),
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional classes added to the list */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  variant: 'default',
+  children: null,
+  className: ''
+};
+
+const NavList = ({ variant, children, className, ...props }) => {
+
+  const variantStyle = {
+    [NavVariants.default]: styles.navList,
+    [NavVariants.simple]: styles.navSimpleList,
+    [NavVariants.horizontal]: styles.navHorizontalList,
+    [NavVariants.tertiary]: styles.navTertiaryList
+  };
+
+  return (
+    <ul className={css(variantStyle[variant], className)} {...props}>
+      {children}
+    </ul>
+  );
+}
+
+NavList.propTypes = propTypes;
+NavList.defaultProps = defaultProps;
+NavList.componentType = 'NavList';
+
+export default NavList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavToggle.js b/packages/patternfly-4/react-core/src/components/Nav/NavToggle.js
new file mode 100644
index 00000000000..ed2c2c33748
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavToggle.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  children: PropTypes.func.isRequired,
+  defaultValue: PropTypes.bool,
+  groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onToggle: PropTypes.func
+};
+
+const defaultProps = {
+  defaultValue: true,
+  groupId: 0,
+  onToggle: () => undefined
+};
+
+class NavToggle extends React.Component {
+  static propTypes = propTypes;
+  static defaultProps = defaultProps;
+  state = {
+    value: this.props.defaultValue
+  };
+
+  handleToggle = e => {
+    const { value } = this.state;
+    const { groupId, onToggle } = this.props;
+    this.setState({
+      value: !value
+    });
+    onToggle(e, groupId, !value);
+  };
+
+  render() {
+    return this.props.children({
+      value: this.state.value,
+      toggle: this.handleToggle
+    });
+  }
+}
+
+export default NavToggle;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavVariants.d.ts b/packages/patternfly-4/react-core/src/components/Nav/NavVariants.d.ts
new file mode 100644
index 00000000000..19d2a1b8dc6
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavVariants.d.ts
@@ -0,0 +1,6 @@
+export const NavVariants: {
+  default: 'default';
+  simple: 'simple';
+  horizontal: 'horizontal';
+  tertiary: 'tertiary';
+};
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavVariants.js b/packages/patternfly-4/react-core/src/components/Nav/NavVariants.js
new file mode 100644
index 00000000000..ba16db27f70
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavVariants.js
@@ -0,0 +1,6 @@
+export const NavVariants = {
+  default: 'default',
+  simple: 'simple',
+  horizontal: 'horizontal',
+  tertiary: 'tertiary'
+};
diff --git a/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.js.snap b/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.js.snap
new file mode 100644
index 00000000000..10ff96dd9ba
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.js.snap
@@ -0,0 +1,1819 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default Nav List - Trigger item active update 1`] = `
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__list {
+  display: block;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="default"
+    >
+      <ul
+        className="pf-c-nav__list"
+      >
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link1"
+          to="#link1"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link1"
+              onClick={[Function]}
+            >
+              Link 1
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link2"
+          to="#link2"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link2"
+              onClick={[Function]}
+            >
+              Link 2
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link3"
+          to="#link3"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link3"
+              onClick={[Function]}
+            >
+              Link 3
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link4"
+          to="#link4"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link4"
+              onClick={[Function]}
+            >
+              Link 4
+            </a>
+          </li>
+        </NavItem>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
+
+exports[`Default Nav List 1`] = `
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__list {
+  display: block;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="default"
+    >
+      <ul
+        className="pf-c-nav__list"
+      >
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link1"
+          to="#link1"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link1"
+              onClick={[Function]}
+            >
+              Link 1
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link2"
+          to="#link2"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link2"
+              onClick={[Function]}
+            >
+              Link 2
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link3"
+          to="#link3"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link3"
+              onClick={[Function]}
+            >
+              Link 3
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link4"
+          to="#link4"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link4"
+              onClick={[Function]}
+            >
+              Link 4
+            </a>
+          </li>
+        </NavItem>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
+
+exports[`Expandable Nav List - Trigger toggle 1`] = `
+.pf-c-nav__toggle {
+  display: block;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  margin-left: auto;
+  font-size: 1.25rem;
+  line-height: 1;
+  pointer-events: none;
+  border: 0px;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__simple-list {
+  display: block;
+}
+.pf-c-nav__subnav {
+  display: block;
+  max-height: 0;
+  margin-top: 0px;
+  overflow: hidden;
+  opacity: 0;
+}
+.pf-c-nav__item.expandable-group {
+  display: block;
+}
+.pf-c-nav__list {
+  display: block;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="default"
+    >
+      <ul
+        className="pf-c-nav__list"
+      >
+        <NavExpandable
+          className="expandable-group"
+          groupId={null}
+          id="grp-1"
+          isActive={false}
+          isExpanded={true}
+          srText=""
+          title="Section 1"
+        >
+          <NavToggle
+            defaultValue={true}
+            groupId={null}
+            onToggle={[Function]}
+          >
+            <li
+              className="pf-c-nav__item expandable-group"
+              id="grp-1"
+              onClick={[Function]}
+            >
+              <a
+                aria-expanded={false}
+                className="pf-c-nav__link"
+                href="#"
+                id="grp-1"
+                onClick={[Function]}
+                onMouseDown={[Function]}
+              >
+                Section 1
+                <span
+                  className="pf-c-nav__toggle"
+                >
+                  <AngleRightIcon
+                    aria-hidden="true"
+                    color="currentColor"
+                    size="sm"
+                    title={null}
+                  >
+                    <svg
+                      aria-hidden="true"
+                      aria-labelledby={null}
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                      />
+                    </svg>
+                  </AngleRightIcon>
+                </span>
+              </a>
+              <section
+                aria-labelledby="grp-1"
+                className="pf-c-nav__subnav"
+                hidden={true}
+              >
+                <ul
+                  className="pf-c-nav__simple-list"
+                >
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link1"
+                    to="#link1"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link1"
+                        onClick={[Function]}
+                      >
+                        Link 1
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link2"
+                    to="#link2"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link2"
+                        onClick={[Function]}
+                      >
+                        Link 2
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link3"
+                    to="#link3"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link3"
+                        onClick={[Function]}
+                      >
+                        Link 3
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link4"
+                    to="#link4"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link4"
+                        onClick={[Function]}
+                      >
+                        Link 4
+                      </a>
+                    </li>
+                  </NavItem>
+                </ul>
+              </section>
+            </li>
+          </NavToggle>
+        </NavExpandable>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
+
+exports[`Expandable Nav List 1`] = `
+.pf-c-nav__toggle {
+  display: block;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  margin-left: auto;
+  font-size: 1.25rem;
+  line-height: 1;
+  pointer-events: none;
+  border: 0px;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__simple-list {
+  display: block;
+}
+.pf-c-nav__subnav {
+  display: block;
+  max-height: 0;
+  margin-top: 0px;
+  overflow: hidden;
+  opacity: 0;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__list {
+  display: block;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="default"
+    >
+      <ul
+        className="pf-c-nav__list"
+      >
+        <NavExpandable
+          className=""
+          groupId={null}
+          id="grp-1"
+          isActive={false}
+          isExpanded={false}
+          srText=""
+          title="Section 1"
+        >
+          <NavToggle
+            defaultValue={false}
+            groupId={null}
+            onToggle={[Function]}
+          >
+            <li
+              className="pf-c-nav__item"
+              id="grp-1"
+              onClick={[Function]}
+            >
+              <a
+                aria-expanded={false}
+                className="pf-c-nav__link"
+                href="#"
+                id="grp-1"
+                onClick={[Function]}
+                onMouseDown={[Function]}
+              >
+                Section 1
+                <span
+                  className="pf-c-nav__toggle"
+                >
+                  <AngleRightIcon
+                    aria-hidden="true"
+                    color="currentColor"
+                    size="sm"
+                    title={null}
+                  >
+                    <svg
+                      aria-hidden="true"
+                      aria-labelledby={null}
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                      />
+                    </svg>
+                  </AngleRightIcon>
+                </span>
+              </a>
+              <section
+                aria-labelledby="grp-1"
+                className="pf-c-nav__subnav"
+                hidden={true}
+              >
+                <ul
+                  className="pf-c-nav__simple-list"
+                >
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link1"
+                    to="#link1"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link1"
+                        onClick={[Function]}
+                      >
+                        Link 1
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link2"
+                    to="#link2"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link2"
+                        onClick={[Function]}
+                      >
+                        Link 2
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link3"
+                    to="#link3"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link3"
+                        onClick={[Function]}
+                      >
+                        Link 3
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link4"
+                    to="#link4"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link4"
+                        onClick={[Function]}
+                      >
+                        Link 4
+                      </a>
+                    </li>
+                  </NavItem>
+                </ul>
+              </section>
+            </li>
+          </NavToggle>
+        </NavExpandable>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
+
+exports[`Expandable Nav List with aria label 1`] = `
+.pf-c-nav__toggle {
+  display: block;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  margin-left: auto;
+  font-size: 1.25rem;
+  line-height: 1;
+  pointer-events: none;
+  border: 0px;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-u-sr-only {
+  display: block;
+  position: fixed;
+  overflow: hidden;
+  clip: rect(0px, 0px, 0px, 0px);
+  white-space: nowrap;
+  border: 0px;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__simple-list {
+  display: block;
+}
+.pf-c-nav__subnav {
+  display: block;
+  max-height: 0;
+  margin-top: 0px;
+  overflow: hidden;
+  opacity: 0;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__list {
+  display: block;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="default"
+    >
+      <ul
+        className="pf-c-nav__list"
+      >
+        <NavExpandable
+          className=""
+          groupId={null}
+          id="grp-1"
+          isActive={false}
+          isExpanded={false}
+          srText="Section 1 - Example sub-navigation"
+          title="Section 1"
+        >
+          <NavToggle
+            defaultValue={false}
+            groupId={null}
+            onToggle={[Function]}
+          >
+            <li
+              className="pf-c-nav__item"
+              id="grp-1"
+              onClick={[Function]}
+            >
+              <a
+                aria-expanded={false}
+                className="pf-c-nav__link"
+                href="#"
+                id={null}
+                onClick={[Function]}
+                onMouseDown={[Function]}
+              >
+                Section 1
+                <span
+                  className="pf-c-nav__toggle"
+                >
+                  <AngleRightIcon
+                    aria-hidden="true"
+                    color="currentColor"
+                    size="sm"
+                    title={null}
+                  >
+                    <svg
+                      aria-hidden="true"
+                      aria-labelledby={null}
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                      />
+                    </svg>
+                  </AngleRightIcon>
+                </span>
+              </a>
+              <section
+                aria-labelledby="grp-1"
+                className="pf-c-nav__subnav"
+                hidden={true}
+              >
+                <h2
+                  className="pf-u-sr-only"
+                  id="grp-1"
+                >
+                  Section 1 - Example sub-navigation
+                </h2>
+                <ul
+                  className="pf-c-nav__simple-list"
+                >
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link1"
+                    to="#link1"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link1"
+                        onClick={[Function]}
+                      >
+                        Link 1
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link2"
+                    to="#link2"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link2"
+                        onClick={[Function]}
+                      >
+                        Link 2
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link3"
+                    to="#link3"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link3"
+                        onClick={[Function]}
+                      >
+                        Link 3
+                      </a>
+                    </li>
+                  </NavItem>
+                  <NavItem
+                    className=""
+                    groupId={null}
+                    isActive={false}
+                    itemId={null}
+                    key="#link4"
+                    to="#link4"
+                  >
+                    <li
+                      className="pf-c-nav__item"
+                    >
+                      <a
+                        aria-current={null}
+                        className="pf-c-nav__link"
+                        href="#link4"
+                        onClick={[Function]}
+                      >
+                        Link 4
+                      </a>
+                    </li>
+                  </NavItem>
+                </ul>
+              </section>
+            </li>
+          </NavToggle>
+        </NavExpandable>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
+
+exports[`Horizontal Nav List 1`] = `
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__horizontal-list {
+  display: inline-flex;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="horizontal"
+    >
+      <ul
+        className="pf-c-nav__horizontal-list"
+      >
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link1"
+          to="#link1"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link1"
+              onClick={[Function]}
+            >
+              Link 1
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link2"
+          to="#link2"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link2"
+              onClick={[Function]}
+            >
+              Link 2
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link3"
+          to="#link3"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link3"
+              onClick={[Function]}
+            >
+              Link 3
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link4"
+          to="#link4"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link4"
+              onClick={[Function]}
+            >
+              Link 4
+            </a>
+          </li>
+        </NavItem>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
+
+exports[`Nav Grouped List 1`] = `
+.pf-c-nav__section-title {
+  display: block;
+  padding: 0.5rem 2rem 0.5rem 2rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #72767b;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__list {
+  display: block;
+}
+.pf-c-nav__simple-list {
+  display: block;
+}
+.pf-c-nav__section {
+  display: block;
+}
+.pf-c-nav__section-title {
+  display: block;
+  padding: 0.5rem 2rem 0.5rem 2rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #72767b;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__list {
+  display: block;
+}
+.pf-c-nav__simple-list {
+  display: block;
+}
+.pf-c-nav__section {
+  display: block;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavGroup
+      className=""
+      id="grp-1"
+      title="Section 1"
+    >
+      <section
+        aria-labelledby="grp-1"
+        className="pf-c-nav__section"
+        id="grp-1"
+      >
+        <h2
+          className="pf-c-nav__section-title"
+          id="grp-1"
+        >
+          Section 1
+        </h2>
+        <ul
+          className="pf-c-nav__simple-list"
+        >
+          <NavList
+            className=""
+            variant="default"
+          >
+            <ul
+              className="pf-c-nav__list"
+            >
+              <NavItem
+                className=""
+                groupId={null}
+                isActive={false}
+                itemId={null}
+                key="section1_#link1"
+                to="#link1"
+              >
+                <li
+                  className="pf-c-nav__item"
+                >
+                  <a
+                    aria-current={null}
+                    className="pf-c-nav__link"
+                    href="#link1"
+                    onClick={[Function]}
+                  >
+                    Link 1
+                  </a>
+                </li>
+              </NavItem>
+              <NavItem
+                className=""
+                groupId={null}
+                isActive={false}
+                itemId={null}
+                key="section1_#link2"
+                to="#link2"
+              >
+                <li
+                  className="pf-c-nav__item"
+                >
+                  <a
+                    aria-current={null}
+                    className="pf-c-nav__link"
+                    href="#link2"
+                    onClick={[Function]}
+                  >
+                    Link 2
+                  </a>
+                </li>
+              </NavItem>
+              <NavItem
+                className=""
+                groupId={null}
+                isActive={false}
+                itemId={null}
+                key="section1_#link3"
+                to="#link3"
+              >
+                <li
+                  className="pf-c-nav__item"
+                >
+                  <a
+                    aria-current={null}
+                    className="pf-c-nav__link"
+                    href="#link3"
+                    onClick={[Function]}
+                  >
+                    Link 3
+                  </a>
+                </li>
+              </NavItem>
+              <NavItem
+                className=""
+                groupId={null}
+                isActive={false}
+                itemId={null}
+                key="section1_#link4"
+                to="#link4"
+              >
+                <li
+                  className="pf-c-nav__item"
+                >
+                  <a
+                    aria-current={null}
+                    className="pf-c-nav__link"
+                    href="#link4"
+                    onClick={[Function]}
+                  >
+                    Link 4
+                  </a>
+                </li>
+              </NavItem>
+            </ul>
+          </NavList>
+        </ul>
+      </section>
+    </NavGroup>
+    <NavGroup
+      className=""
+      id="grp-2"
+      title="Section 2"
+    >
+      <section
+        aria-labelledby="grp-2"
+        className="pf-c-nav__section"
+        id="grp-2"
+      >
+        <h2
+          className="pf-c-nav__section-title"
+          id="grp-2"
+        >
+          Section 2
+        </h2>
+        <ul
+          className="pf-c-nav__simple-list"
+        >
+          <NavList
+            className=""
+            variant="default"
+          >
+            <ul
+              className="pf-c-nav__list"
+            >
+              <NavItem
+                className=""
+                groupId={null}
+                isActive={false}
+                itemId={null}
+                key="section2_#link1"
+                to="#link1"
+              >
+                <li
+                  className="pf-c-nav__item"
+                >
+                  <a
+                    aria-current={null}
+                    className="pf-c-nav__link"
+                    href="#link1"
+                    onClick={[Function]}
+                  >
+                    Link 1
+                  </a>
+                </li>
+              </NavItem>
+              <NavItem
+                className=""
+                groupId={null}
+                isActive={false}
+                itemId={null}
+                key="section2_#link2"
+                to="#link2"
+              >
+                <li
+                  className="pf-c-nav__item"
+                >
+                  <a
+                    aria-current={null}
+                    className="pf-c-nav__link"
+                    href="#link2"
+                    onClick={[Function]}
+                  >
+                    Link 2
+                  </a>
+                </li>
+              </NavItem>
+              <NavItem
+                className=""
+                groupId={null}
+                isActive={false}
+                itemId={null}
+                key="section2_#link3"
+                to="#link3"
+              >
+                <li
+                  className="pf-c-nav__item"
+                >
+                  <a
+                    aria-current={null}
+                    className="pf-c-nav__link"
+                    href="#link3"
+                    onClick={[Function]}
+                  >
+                    Link 3
+                  </a>
+                </li>
+              </NavItem>
+              <NavItem
+                className=""
+                groupId={null}
+                isActive={false}
+                itemId={null}
+                key="section2_#link4"
+                to="#link4"
+              >
+                <li
+                  className="pf-c-nav__item"
+                >
+                  <a
+                    aria-current={null}
+                    className="pf-c-nav__link"
+                    href="#link4"
+                    onClick={[Function]}
+                  >
+                    Link 4
+                  </a>
+                </li>
+              </NavItem>
+            </ul>
+          </NavList>
+        </ul>
+      </section>
+    </NavGroup>
+  </nav>
+</Nav>
+`;
+
+exports[`Nav List with custom item nodes 1`] = `
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__tertiary-list {
+  display: inline-flex;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="tertiary"
+    >
+      <ul
+        className="pf-c-nav__tertiary-list"
+      >
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          to="/components/nav#link1"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <CustomNode
+              className="pf-c-nav__link"
+              onClick={[Function]}
+            >
+              <div>
+                My custom node
+              </div>
+            </CustomNode>
+          </li>
+        </NavItem>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
+
+exports[`Simple Nav List 1`] = `
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__simple-list {
+  display: block;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="simple"
+    >
+      <ul
+        className="pf-c-nav__simple-list"
+      >
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link1"
+          to="#link1"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link1"
+              onClick={[Function]}
+            >
+              Link 1
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link2"
+          to="#link2"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link2"
+              onClick={[Function]}
+            >
+              Link 2
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link3"
+          to="#link3"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link3"
+              onClick={[Function]}
+            >
+              Link 3
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link4"
+          to="#link4"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link4"
+              onClick={[Function]}
+            >
+              Link 4
+            </a>
+          </li>
+        </NavItem>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
+
+exports[`Tertiary Nav List 1`] = `
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__link {
+  display: block;
+}
+.pf-c-nav__item {
+  display: block;
+}
+.pf-c-nav__tertiary-list {
+  display: inline-flex;
+}
+.pf-c-nav {
+  display: block;
+  overflow-x: auto;
+}
+
+<Nav
+  aria-label="Test"
+  className=""
+  onSelect={[Function]}
+  onToggle={[Function]}
+>
+  <nav
+    aria-label="Test"
+    className="pf-c-nav"
+    onSelect={[Function]}
+    onToggle={[Function]}
+  >
+    <NavList
+      className=""
+      variant="tertiary"
+    >
+      <ul
+        className="pf-c-nav__tertiary-list"
+      >
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link1"
+          to="#link1"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link1"
+              onClick={[Function]}
+            >
+              Link 1
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link2"
+          to="#link2"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link2"
+              onClick={[Function]}
+            >
+              Link 2
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link3"
+          to="#link3"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link3"
+              onClick={[Function]}
+            >
+              Link 3
+            </a>
+          </li>
+        </NavItem>
+        <NavItem
+          className=""
+          groupId={null}
+          isActive={false}
+          itemId={null}
+          key="#link4"
+          to="#link4"
+        >
+          <li
+            className="pf-c-nav__item"
+          >
+            <a
+              aria-current={null}
+              className="pf-c-nav__link"
+              href="#link4"
+              onClick={[Function]}
+            >
+              Link 4
+            </a>
+          </li>
+        </NavItem>
+      </ul>
+    </NavList>
+  </nav>
+</Nav>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/examples/NavDefaultList.js b/packages/patternfly-4/react-core/src/components/Nav/examples/NavDefaultList.js
new file mode 100644
index 00000000000..a3fcf6dc51c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/examples/NavDefaultList.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Nav, NavList, NavItem } from '@patternfly/react-core';
+
+class NavDefaultList extends React.Component {
+  static title = 'Default Nav';
+
+  state = {
+    activeItem: 0
+  };
+
+  onSelect = result => {
+    this.setState({
+      activeItem: result.itemId
+    });
+  };
+
+  render() {
+    const { activeItem } = this.state;
+    return (
+      <Nav onSelect={this.onSelect} aria-label="Primary Nav Default Example">
+        <NavList>
+          <NavItem to="#default-link1" itemId={0} isActive={activeItem === 0}>
+            Link 1
+          </NavItem>
+          <NavItem to="#default-link2" itemId={1} isActive={activeItem === 1}>
+            Link 2
+          </NavItem>
+          <NavItem to="#default-link3" itemId={2} isActive={activeItem === 2}>
+            Link 3
+          </NavItem>
+          <NavItem to="#default-link4" itemId={3} isActive={activeItem === 3}>
+            Link 4
+          </NavItem>
+        </NavList>
+      </Nav>
+    );
+  }
+}
+
+export default NavDefaultList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableList.js b/packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableList.js
new file mode 100644
index 00000000000..ea8773c42a1
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableList.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Nav, NavList, NavExpandable, NavItem } from '@patternfly/react-core';
+
+class NavExpandableList extends React.Component {
+  static title = 'Expandable Nav';
+
+  state = {
+    activeGroup: 'grp-1',
+    activeItem: 'grp-1_itm-1'
+  };
+
+  onSelect = result => {
+    this.setState({
+      activeGroup: result.groupId,
+      activeItem: result.itemId
+    });
+  };
+
+  onToggle = result => {
+    // eslint-disable-next-line no-console
+    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
+  };
+
+  render() {
+    const { activeGroup, activeItem } = this.state;
+    return (
+      <Nav onSelect={this.onSelect} onToggle={this.onToggle} aria-label="Primary Nav Expandable Example">
+        <NavList>
+          <NavExpandable title="Link 1" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
+            <NavItem to="#expandable-1" groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
+              Subnav Link 1
+            </NavItem>
+            <NavItem to="#expandable-2" groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
+              Subnav Link 2
+            </NavItem>
+            <NavItem to="#expandable-3" groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
+              Subnav Link 3
+            </NavItem>
+          </NavExpandable>
+          <NavExpandable title="Link 2" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
+            <NavItem to="#expandable-4" groupId="grp-2" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'}>
+              Subnav Link 1
+            </NavItem>
+            <NavItem to="#expandable-5" groupId="grp-2" itemId="grp-2_itm-2" isActive={activeItem === 'grp-2_itm-2'}>
+              Subnav Link 2
+            </NavItem>
+            <NavItem to="#expandable-6" groupId="grp-2" itemId="grp-2_itm-3" isActive={activeItem === 'grp-2_itm-3'}>
+              Subnav Link 3
+            </NavItem>
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+  }
+}
+
+export default NavExpandableList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableTitlesList.js b/packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableTitlesList.js
new file mode 100644
index 00000000000..966b55bcd5c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/examples/NavExpandableTitlesList.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Nav, NavList, NavExpandable, NavItem } from '@patternfly/react-core';
+
+class NavExpandableTitlesList extends React.Component {
+  static title = 'Expandable Nav (w/subnav titles)';
+
+  state = {
+    activeGroup: 'grp-1',
+    activeItem: 'grp-1_itm-1'
+  };
+
+  onSelect = result => {
+    this.setState({
+      activeGroup: result.groupId,
+      activeItem: result.itemId
+    });
+  };
+
+  render() {
+    const { activeGroup, activeItem } = this.state;
+    return (
+      <Nav onSelect={this.onSelect} onToggle={this.onToggle} aria-label="Nav Expandable with screen reader headings">
+        <NavList>
+          <NavExpandable title="Link 1" srText="SR Link" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
+            <NavItem to="#sr-expandable-1" groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
+              Subnav Link 1
+            </NavItem>
+            <NavItem to="#sr-expandable-2" groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
+              Subnav Link 2
+            </NavItem>
+            <NavItem to="#sr-expandable-3" groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
+              Subnav Link 3
+            </NavItem>
+          </NavExpandable>
+          <NavExpandable title="Link 2" srText="SR Link 2" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
+            <NavItem to="#sr-expandable-4" groupId="grp-2" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'}>
+              Subnav Link 1
+            </NavItem>
+            <NavItem to="#sr-expandable-5" groupId="grp-2" itemId="grp-2_itm-2" isActive={activeItem === 'grp-2_itm-2'}>
+              Subnav Link 2
+            </NavItem>
+            <NavItem to="#sr-expandable-6" groupId="grp-2" itemId="grp-2_itm-3" isActive={activeItem === 'grp-2_itm-3'}>
+              Subnav Link 3
+            </NavItem>
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+  }
+}
+
+export default NavExpandableTitlesList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/examples/NavGroupedList.js b/packages/patternfly-4/react-core/src/components/Nav/examples/NavGroupedList.js
new file mode 100644
index 00000000000..282b487dd28
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/examples/NavGroupedList.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Nav, NavList, NavGroup, NavItem } from '@patternfly/react-core';
+
+class NavGroupedList extends React.Component {
+  static title = 'Grouped Nav';
+
+  state = {
+    activeItem: 'grp-1_itm-1'
+  };
+
+  onSelect = result => {
+    this.setState({
+      activeItem: result.itemId
+    });
+  };
+
+  render() {
+    const { activeItem } = this.state;
+    return (
+      <Nav onSelect={this.onSelect} aria-label="Primary Nav Grouped Example">
+        <NavGroup title="Section title 1">
+          <NavItem to="#grouped-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
+            Link 1
+          </NavItem>
+          <NavItem to="#grouped-2" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
+            Link 2
+          </NavItem>
+          <NavItem to="#grouped-3" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
+            Link 3
+          </NavItem>
+        </NavGroup>
+        <NavGroup title="Section title 2">
+          <NavItem to="#grouped-4" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'}>
+            Link 1
+          </NavItem>
+          <NavItem to="#grouped-5" itemId="grp-2_itm-2" isActive={activeItem === 'grp-2_itm-2'}>
+            Link 2
+          </NavItem>
+          <NavItem to="#grouped-6" itemId="grp-2_itm-3" isActive={activeItem === 'grp-2_itm-3'}>
+            Link 3
+          </NavItem>
+        </NavGroup>
+      </Nav>
+    );
+  }
+}
+
+export default NavGroupedList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/examples/NavHorizontalList.js b/packages/patternfly-4/react-core/src/components/Nav/examples/NavHorizontalList.js
new file mode 100644
index 00000000000..90a5803325f
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/examples/NavHorizontalList.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Nav, NavList, NavItem, NavVariants } from '@patternfly/react-core';
+
+class NavHorizontalList extends React.Component {
+  static title = 'Horizontal List';
+
+  state = {
+    activeItem: 0
+  };
+
+  onSelect = result => {
+    this.setState({
+      activeItem: result.itemId
+    });
+  };
+
+  render() {
+    const { activeItem } = this.state;
+    return (
+      <div style={{ backgroundColor: '#292e34', padding: '1rem' }}>
+        <Nav onSelect={this.onSelect} aria-label="Primary Nav Horizontal Example">
+          <NavList variant={NavVariants.horizontal}>
+            <NavItem to="#horizontal-link1" itemId={0} isActive={activeItem === 0}>
+              Item 1
+            </NavItem>
+            <NavItem to="#horizontal-link2" itemId={1} isActive={activeItem === 1}>
+              Item 2
+            </NavItem>
+            <NavItem to="#horizontal-link3" itemId={2} isActive={activeItem === 2}>
+              Item 3
+            </NavItem>
+          </NavList>
+        </Nav>
+      </div>
+    );
+  }
+}
+
+export default NavHorizontalList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/examples/NavMixedList.js b/packages/patternfly-4/react-core/src/components/Nav/examples/NavMixedList.js
new file mode 100644
index 00000000000..40cc27a12c0
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/examples/NavMixedList.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Nav, NavList, NavExpandable, NavItem } from '@patternfly/react-core';
+
+class NavMixedList extends React.Component {
+  static title = 'Nav Mixed';
+
+  state = {
+    activeGroup: '',
+    activeItem: 'itm-1'
+  };
+
+  onSelect = result => {
+    this.setState({
+      activeGroup: result.groupId,
+      activeItem: result.itemId
+    });
+  };
+
+  render() {
+    const { activeGroup, activeItem } = this.state;
+    return (
+      <Nav onSelect={this.onSelect} aria-label="Primary Nav Mixed Example">
+        <NavList>
+          <NavItem to="#mixed-1" itemId="itm-1" isActive={activeItem === 'itm-1'}>
+            Link 1 (not expandable)
+          </NavItem>
+          <NavExpandable title="Link 2 - expandable" groupId="grp-1" isActive={activeGroup === 'grp-1'}>
+            <NavItem to="#mixed-2" groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
+              Link 1
+            </NavItem>
+            <NavItem to="#mixed-3" groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
+              Link 2
+            </NavItem>
+            <NavItem to="#mixed-4" groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
+              Link 3
+            </NavItem>
+          </NavExpandable>
+          <NavExpandable title="Link 3 - expandable" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
+            <NavItem to="#mixed-5" groupId="grp-2" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'}>
+              Link 1
+            </NavItem>
+            <NavItem to="#mixed-6" groupId="grp-2" itemId="grp-2_itm-2" isActive={activeItem === 'grp-2_itm-2'}>
+              Link 2
+            </NavItem>
+            <NavItem to="#mixed-7" groupId="grp-2" itemId="grp-2_itm-3" isActive={activeItem === 'grp-2_itm-3'}>
+              Link 3
+            </NavItem>
+          </NavExpandable>
+        </NavList>
+      </Nav>
+    );
+  }
+}
+
+export default NavMixedList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/examples/NavSimpleList.js b/packages/patternfly-4/react-core/src/components/Nav/examples/NavSimpleList.js
new file mode 100644
index 00000000000..1730f528cdf
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/examples/NavSimpleList.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Nav, NavList, NavItem, NavVariants } from '@patternfly/react-core';
+
+class NavSimpleList extends React.Component {
+  static title = 'Simple Nav';
+
+  state = {
+    activeItem: 0
+  };
+
+  onSelect = result => {
+    this.setState({
+      activeItem: result.itemId
+    });
+  };
+
+  render() {
+    const { activeItem } = this.state;
+    return (
+      <Nav onSelect={this.onSelect} id="nav-primary-simple" aria-label="Primary Nav, Simple List Example">
+        <NavList variant={NavVariants.simple}>
+          <NavItem to="#simple-link1" itemId={0} isActive={activeItem === 0}>
+            Link 1
+          </NavItem>
+          <NavItem to="#simple-link2" itemId={1} isActive={activeItem === 1}>
+            Link 2
+          </NavItem>
+          <NavItem to="#simple-link3" itemId={2} isActive={activeItem === 2}>
+            Link 3
+          </NavItem>
+          <NavItem to="#simple-link4" itemId={3} isActive={activeItem === 3}>
+            Link 4
+          </NavItem>
+        </NavList>
+      </Nav>
+    );
+  }
+}
+
+export default NavSimpleList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/examples/NavTertiaryList.js b/packages/patternfly-4/react-core/src/components/Nav/examples/NavTertiaryList.js
new file mode 100644
index 00000000000..982f6d72bd6
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/examples/NavTertiaryList.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Nav, NavList, NavItem, NavVariants } from '@patternfly/react-core';
+
+class NavTertiaryList extends React.Component {
+  static title = 'Tertiary List';
+
+  state = {
+    activeItem: 0
+  };
+
+  onSelect = result => {
+    this.setState({
+      activeItem: result.itemId
+    });
+  };
+
+  render() {
+    const { activeItem } = this.state;
+    return (
+      <Nav onSelect={this.onSelect} aria-label="Tertiary Example">
+        <NavList variant={NavVariants.tertiary}>
+          <NavItem to="#tertiary-link1" itemId={0} isActive={activeItem === 0}>
+            Link 1
+          </NavItem>
+          <NavItem to="#tertiary-link2" itemId={1} isActive={activeItem === 1}>
+            Link 2
+          </NavItem>
+          <NavItem to="#tertiary-link3" itemId={2} isActive={activeItem === 2}>
+            Link 3
+          </NavItem>
+          <NavItem to="#tertiary-link4" itemId={3} isActive={activeItem === 3}>
+            Link 4
+          </NavItem>
+        </NavList>
+      </Nav>
+    );
+  }
+}
+
+export default NavTertiaryList;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/index.d.ts b/packages/patternfly-4/react-core/src/components/Nav/index.d.ts
new file mode 100644
index 00000000000..754271cc5a2
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/index.d.ts
@@ -0,0 +1,6 @@
+export { default as Nav, NavProps } from './Nav';
+export { default as NavList, NavListProps } from './NavList';
+export { default as NavGroup, NavGroupProps } from './NavGroup';
+export { default as NavItem, NavItemProps } from './NavItem';
+export { default as NavExpandable, NavExpandableProps } from './NavExpandable';
+export { NavVariants } from './NavVariants';
diff --git a/packages/patternfly-4/react-core/src/components/Nav/index.js b/packages/patternfly-4/react-core/src/components/Nav/index.js
new file mode 100644
index 00000000000..fc33590613f
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Nav/index.js
@@ -0,0 +1,6 @@
+export { default as Nav } from './Nav';
+export { default as NavList } from './NavList';
+export { default as NavGroup } from './NavGroup';
+export { default as NavItem } from './NavItem';
+export { default as NavExpandable } from './NavExpandable';
+export { NavVariants } from './NavVariants';
diff --git a/packages/patternfly-4/react-core/src/components/Radio/index.d.ts b/packages/patternfly-4/react-core/src/components/Radio/index.d.ts
index fe25e2ea8a8..e21cd41b995 100644
--- a/packages/patternfly-4/react-core/src/components/Radio/index.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Radio/index.d.ts
@@ -1 +1 @@
-export { default as Radio } from './Radio';
+export { default as Radio, RadioProps } from './Radio';
diff --git a/packages/patternfly-4/react-core/src/components/Select/index.d.ts b/packages/patternfly-4/react-core/src/components/Select/index.d.ts
index 19f56730d0e..2cde27c9461 100644
--- a/packages/patternfly-4/react-core/src/components/Select/index.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Select/index.d.ts
@@ -1,3 +1,3 @@
-export { default as Select } from './Select';
-export { default as SelectOption } from './SelectOption';
-export { default as SelectOptionGroup } from './SelectOptionGroup';
+export { default as Select, SelectProps } from './Select';
+export { default as SelectOption, SelectOptionProps } from './SelectOption';
+export { default as SelectOptionGroup, SelectOptionGroupProps } from './SelectOptionGroup';
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts
new file mode 100644
index 00000000000..447112e4196
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts
@@ -0,0 +1,15 @@
+import { SFC, HTMLProps, FormEvent } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface TextAreaProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange'> {
+  className?: string;
+  isRequired?: boolean;
+  isValid?: boolean;
+  value?: string | number;
+  onChange(checked: boolean, event: FormEvent<HTMLInputElement>): void;
+  'aria-label'?: string;
+}
+
+declare const TextArea: SFC<TextAreaProps>;
+
+export default TextArea;
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/index.d.ts b/packages/patternfly-4/react-core/src/components/TextArea/index.d.ts
new file mode 100644
index 00000000000..a295bac41ca
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/TextArea/index.d.ts
@@ -0,0 +1 @@
+export { default as TextArea, TextAreaProps } from './TextArea';
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.d.ts b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.d.ts
new file mode 100644
index 00000000000..d5660b8d528
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.d.ts
@@ -0,0 +1,19 @@
+import { SFC, HTMLProps, FormEvent } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface TextInputProps extends Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled'> {
+  className?: string;
+  isRequired?: boolean;
+  type?: string;
+  value?: string | number;
+  isValid?: boolean;
+  isDisabled?: boolean;
+  isAlt?: boolean;
+  onChange(checked: boolean, event: FormEvent<HTMLInputElement>): void;
+  isReadOnly?: boolean;
+  'aria-label'?: string;
+}
+
+declare const TextInput: SFC<TextInputProps>;
+
+export default TextInput;
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/index.d.ts b/packages/patternfly-4/react-core/src/components/TextInput/index.d.ts
new file mode 100644
index 00000000000..8aa666afeea
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/TextInput/index.d.ts
@@ -0,0 +1 @@
+export { default as TextInput, TextInputProps } from './TextInput';
diff --git a/packages/patternfly-4/react-core/src/components/index.d.ts b/packages/patternfly-4/react-core/src/components/index.d.ts
index c8e0cca217c..055d69c6ad2 100644
--- a/packages/patternfly-4/react-core/src/components/index.d.ts
+++ b/packages/patternfly-4/react-core/src/components/index.d.ts
@@ -1,11 +1,17 @@
+/** Keep alphabetically sorted */
 export * from './Alert';
+export * from './Avatar';
 export * from './Badge';
+export * from './Brand';
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './Dropdown';
+export * from './List';
 export * from './Modal';
+export * from './Nav';
 export * from './Radio';
-export * from './Title';
-export * from './Alert';
-export * from './Dropdown';
 export * from './Select';
+export * from './TextArea';
+export * from './TextInput';
+export * from './Title';
diff --git a/packages/patternfly-4/react-core/src/components/index.js b/packages/patternfly-4/react-core/src/components/index.js
index 98238797cd6..055d69c6ad2 100644
--- a/packages/patternfly-4/react-core/src/components/index.js
+++ b/packages/patternfly-4/react-core/src/components/index.js
@@ -1,13 +1,17 @@
+/** Keep alphabetically sorted */
 export * from './Alert';
+export * from './Avatar';
 export * from './Badge';
+export * from './Brand';
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './Dropdown';
+export * from './List';
 export * from './Modal';
+export * from './Nav';
 export * from './Radio';
-export * from './Title';
-export * from './TextInput';
-export * from './TextArea';
-export * from './Dropdown';
 export * from './Select';
-export * from './Avatar';
+export * from './TextArea';
+export * from './TextInput';
+export * from './Title';
diff --git a/packages/patternfly-4/react-docs/.env.development b/packages/patternfly-4/react-docs/.env.development
new file mode 100644
index 00000000000..4c70de32003
--- /dev/null
+++ b/packages/patternfly-4/react-docs/.env.development
@@ -0,0 +1 @@
+LIVE_EXAMPLES=true
diff --git a/packages/patternfly-4/react-docs/.env.production b/packages/patternfly-4/react-docs/.env.production
new file mode 100644
index 00000000000..4c70de32003
--- /dev/null
+++ b/packages/patternfly-4/react-docs/.env.production
@@ -0,0 +1 @@
+LIVE_EXAMPLES=true
diff --git a/packages/patternfly-4/react-docs/.eslintrc b/packages/patternfly-4/react-docs/.eslintrc
index da0650bb14c..a6880261126 100644
--- a/packages/patternfly-4/react-docs/.eslintrc
+++ b/packages/patternfly-4/react-docs/.eslintrc
@@ -1,6 +1,6 @@
 {
-  "extends": "../../../.eslintrc.js",
+  "extends": "../.eslintrc.js",
   "globals": {
     "graphql": true
   }
-}
\ No newline at end of file
+}
diff --git a/packages/patternfly-4/react-docs/.gitignore b/packages/patternfly-4/react-docs/.gitignore
new file mode 100644
index 00000000000..21b0d4ea424
--- /dev/null
+++ b/packages/patternfly-4/react-docs/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+dist
+public/
+.cache
+.tmp
+static/
diff --git a/packages/patternfly-4/react-docs/.npmignore b/packages/patternfly-4/react-docs/.npmignore
index 5190ff44bb8..779fcff3bf4 100644
--- a/packages/patternfly-4/react-docs/.npmignore
+++ b/packages/patternfly-4/react-docs/.npmignore
@@ -4,4 +4,5 @@
 .eslintrc
 
 public
-src
\ No newline at end of file
+src
+static
diff --git a/packages/patternfly-4/react-docs/README.md b/packages/patternfly-4/react-docs/README.md
index ff5f20c2a45..7f022432a5f 100644
--- a/packages/patternfly-4/react-docs/README.md
+++ b/packages/patternfly-4/react-docs/README.md
@@ -22,4 +22,4 @@ yarn start:site
 To build the site.
 ```sh
 yarn build:site
-```
\ No newline at end of file
+```
diff --git a/packages/patternfly-4/react-docs/build/copyDocs.js b/packages/patternfly-4/react-docs/build/copyDocs.js
index 0877675eb62..3b4b61eaf3c 100644
--- a/packages/patternfly-4/react-docs/build/copyDocs.js
+++ b/packages/patternfly-4/react-docs/build/copyDocs.js
@@ -12,6 +12,28 @@ moduleTypes.forEach(moduleType => {
   packageDirs.forEach(packageDir => copyPackageDocs(packageDir, moduleType));
 });
 
+copyStyles();
+copyAssets();
+
+function copyStyles() {
+  const packageDir = 'react-core';
+  const moduleType = 'styles';
+  const packageBase = path.resolve(__dirname, '../../', packageDir);
+  const packageDist = path.join(packageBase, 'dist', moduleType);
+  const { name } = require(path.join(packageBase, 'package.json'));
+
+  const formattedName = name.replace('@patternfly/', '');
+  const from = path.join(packageDist);
+  const to = path.join(dest, moduleType, formattedName);
+  fs.copySync(from, to);
+}
+
+function copyAssets() {
+  const from = path.resolve(__dirname, '../dist/styles/react-core/assets');
+  const to = path.resolve(__dirname, '../static/assets');
+  fs.copySync(from, to);
+}
+
 function copyPackageDocs(packageDir, moduleType) {
   const packageBase = path.resolve(__dirname, '../../', packageDir);
   const packageDist = path.join(packageBase, 'dist', moduleType);
diff --git a/packages/patternfly-4/react-docs/gatsby-config.js b/packages/patternfly-4/react-docs/gatsby-config.js
index 34244b50548..cfb68def12a 100644
--- a/packages/patternfly-4/react-docs/gatsby-config.js
+++ b/packages/patternfly-4/react-docs/gatsby-config.js
@@ -13,6 +13,8 @@ module.exports = {
         path: resolve(__dirname, '../react-core/src')
       }
     },
-    'gatsby-transformer-react-docgen'
-  ]
+    'gatsby-transformer-react-docgen',
+    'gatsby-plugin-emotion'
+  ],
+  pathPrefix: 'patternfly-4'
 };
diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js
index 5efca0108c5..61347c8f0b6 100644
--- a/packages/patternfly-4/react-docs/gatsby-node.js
+++ b/packages/patternfly-4/react-docs/gatsby-node.js
@@ -54,10 +54,11 @@ exports.onCreateNode = ({ node, boundActionCreators }) => {
 
 exports.createPages = async ({ boundActionCreators, graphql }) => {
   const {
-    data: { docs, examples }
+    data: { docs, examples, exampleImages }
   } = await graphql(`
     fragment DocFile on File {
       relativePath
+      relativeDirectory
       absolutePath
       base
       name
@@ -78,17 +79,47 @@ exports.createPages = async ({ boundActionCreators, graphql }) => {
           }
         }
       }
+      exampleImages: allFile(filter: { extension: { regex: "/(png|svg)/" } }) {
+        edges {
+          node {
+            ...DocFile
+          }
+        }
+      }
     }
   `);
   const docsComponentPath = path.resolve(__dirname, './src/components/componentDocs');
   docs.edges.forEach(({ node: doc }) => {
     const filePath = path.resolve(__dirname, '.tmp', doc.base);
+
+    const rawExamples = [];
+    examples.edges.forEach(({ node: example }) => {
+      if (
+        example.relativeDirectory
+          .split('/')
+          .slice(0, 2)
+          .join('/') === doc.relativeDirectory
+      ) {
+        // e.g. components/Alert/examples/DangerAlert.js
+        const examplePath = `../../react-core/src/${example.relativePath}`;
+        rawExamples.push(`{name: '${example.name}', path: '${examplePath}', file: require('!!raw!${examplePath}')}`);
+      }
+    });
+    const allImages = [];
+    exampleImages.edges.forEach(({ node: image }) => {
+      const imagePath = `../../react-core/src/${image.relativePath}`;
+      allImages.push(`{name: '${image.base}', file: require('${imagePath}')}`);
+    });
+
     const content = `
     import React from 'react';
     import docs from '${doc.absolutePath}';
     import ComponentDocs from '${docsComponentPath}';
+    
+    const rawExamples = [${rawExamples}];
+    const images = [${allImages}];
 
-    export default () => <ComponentDocs {...docs} />
+    export default () => <ComponentDocs rawExamples={rawExamples} images={images} {...docs} />
     `;
     fs.outputFileSync(filePath, content);
     boundActionCreators.createPage({
diff --git a/packages/patternfly-4/react-docs/gatsby-ssr.js b/packages/patternfly-4/react-docs/gatsby-ssr.js
deleted file mode 100644
index a31b78bacfc..00000000000
--- a/packages/patternfly-4/react-docs/gatsby-ssr.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { renderToString } from 'react-dom/server';
-import { renderStatic } from '@patternfly/react-styles/server';
-
-exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) => {
-  const { html } = renderStatic(() => renderToString(bodyComponent));
-
-  replaceBodyHTMLString(html);
-};
diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json
index 1e6c6084ea6..57ebffed958 100644
--- a/packages/patternfly-4/react-docs/package.json
+++ b/packages/patternfly-4/react-docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-docs",
   "description": "PatternFly React Docs",
-  "version": "3.11.0",
+  "version": "3.13.0",
   "author": "Red Hat",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -12,9 +12,12 @@
     "@patternfly/react-icons": "*",
     "@patternfly/react-styles": "^2.0.0",
     "@patternfly/react-tokens": "^1.0.0",
-    "babel-plugin-react-docgen": "^v1.9.0",
+    "babel-standalone": "^6.26.0",
+    "emotion": "^9.2.9",
+    "emotion-server": "^9.2.9",
     "gatsby": "^1.9.247",
     "gatsby-link": "^1.6.40",
+    "gatsby-plugin-emotion": "^2.0.5",
     "gatsby-plugin-react-helmet": "^2.0.10",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-source-filesystem": "^1.5.36",
@@ -24,14 +27,15 @@
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "react-helmet": "^5.2.0"
+    "react-helmet": "^5.2.0",
+    "react-live": "^1.11.0"
   },
   "keywords": [
     "gatsby"
   ],
   "scripts": {
-    "build": "gatsby build",
-    "postbuild": "node build/copyDocs.js",
+    "docbuild": "node build/copyDocs.js && gatsby build",
+    "pr-build": "node build/copyDocs.js && gatsby build --prefix-paths",
     "develop": "gatsby develop"
   },
   "browserslist": [
diff --git a/packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js b/packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js
index 2471a5f1b19..997bbed11b1 100644
--- a/packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js
+++ b/packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js
@@ -13,37 +13,57 @@ const propTypes = {
   description: PropTypes.string,
   examples: PropTypes.arrayOf(PropTypes.func),
   components: PropTypes.objectOf(PropTypes.func),
-  enumValues: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.any))
+  enumValues: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.any)),
+  rawExamples: PropTypes.array,
+  images: PropTypes.array,
+  fullPageOnly: PropTypes.bool
 };
 
 const defaultProps = {
   description: '',
   examples: [],
   components: {},
-  enumValues: {}
+  enumValues: {},
+  rawExamples: [],
+  images: [],
+  fullPageOnly: false
 };
 
-const ComponentDocs = ({ title, description, examples, components, enumValues }) => (
-  <Content>
-    <Title size="3xl">{title}</Title>
-    {Boolean(description) && <p className={css(styles.description)}>{description}</p>}
-    <Section title="Examples">
-      {examples.map((ComponentExample, i) => (
-        <Example
-          key={i}
-          title={ComponentExample.title}
-          description={ComponentExample.description}
-          {...(ComponentExample.getContainerProps ? ComponentExample.getContainerProps() : {})}
-        >
-          <ComponentExample />
-        </Example>
-      ))}
-    </Section>
-    {Object.entries(components).map(([componentName, { __docgenInfo: componentDocs }]) => (
-      <PropsTable key={componentName} name={componentName} props={componentDocs.props} enumValues={enumValues} />
-    ))}
-  </Content>
-);
+class ComponentDocs extends React.PureComponent {
+
+  render() {
+    const { title, description, examples, components, enumValues, fullPageOnly, rawExamples, images } = this.props;
+    return (
+      <Content>
+        <Title size="3xl">{title}</Title>
+        {Boolean(description) && <p className={css(styles.description)}>{description}</p>}
+        <Section title="Examples">
+          {examples.map((ComponentExample, i) => {
+            const { __docgenInfo: componentDocs } = ComponentExample;
+            const rawExample = rawExamples.find(example => example.name === componentDocs.displayName);
+            return (
+              <Example
+                key={i}
+                title={ComponentExample.title}
+                description={ComponentExample.description}
+                raw={rawExample && rawExample.file}
+                images={images}
+                fullPageOnly={fullPageOnly}
+                name={ComponentExample.name}
+                {...(ComponentExample.getContainerProps ? ComponentExample.getContainerProps() : {})}
+              >
+                <ComponentExample />
+              </Example>
+            );
+          })}
+        </Section>
+        {Object.entries(components).map(([componentName, { __docgenInfo: componentDocs }]) => (
+          <PropsTable key={componentName} name={componentName} props={componentDocs.props} enumValues={enumValues} />
+        ))}
+      </Content>
+    );
+  }
+}
 
 ComponentDocs.propTypes = propTypes;
 ComponentDocs.defaultProps = defaultProps;
diff --git a/packages/patternfly-4/react-docs/src/components/example/example.js b/packages/patternfly-4/react-docs/src/components/example/example.js
index 57e0bfb8873..07f7487467d 100644
--- a/packages/patternfly-4/react-docs/src/components/example/example.js
+++ b/packages/patternfly-4/react-docs/src/components/example/example.js
@@ -3,28 +3,63 @@ import { css } from '@patternfly/react-styles';
 import styles from './example.styles';
 import PropTypes from 'prop-types';
 import { Title } from '@patternfly/react-core';
+import LiveDemo from './liveDemo';
+import Link from 'gatsby-link';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   description: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  fullPageOnly: PropTypes.bool,
+  name: PropTypes.string,
+  raw: PropTypes.string,
+  images: PropTypes.array
 };
 
 const defaultProps = {
   className: '',
-  description: ''
+  description: '',
+  fullPageOnly: false,
+  title: '',
+  name: '',
+  raw: '',
+  images: []
 };
 
-const Example = ({ children, title, className, description, ...props }) => (
-  <div>
-    <Title size="md">{title}</Title>
-    {Boolean(description) && <p className={css(styles.description)}>{description}</p>}
-    <div className={css(className, styles.example)} {...props}>
-      {children}
+const LIVE_EXAMPLES = /true/i.test(process.env.LIVE_EXAMPLES);
+
+const Example = ({ children, title, className, description, name, fullPageOnly, raw, images, ...props }) => {
+  // Display full page link
+  if (fullPageOnly) {
+    const pathName = typeof window !== 'undefined' ? `${window.location.pathname}` : '';
+    const exampleName = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    const separator = pathName.endsWith('/') ? '' : '/';
+    const path = `${pathName}${separator}examples/${exampleName}`;
+    return (
+      <div className={css(className, styles.example)} {...props}>
+        This layout can only be accessed in&nbsp;
+        <Link target="_blank" to={path}>
+          full page mode
+        </Link>
+        .
+      </div>
+    );
+  }
+  return (
+    <div>
+      <Title size="lg">{title}</Title>
+      {Boolean(description) && <p className={css(styles.description)}>{description}</p>}
+      {LIVE_EXAMPLES ? (
+        <LiveDemo raw={raw.trim()} images={images} className={className} />
+      ) : (
+        <div className={css(className, styles.example)} {...props}>
+          {children}
+        </div>
+      )}
     </div>
-  </div>
-);
+  );
+};
 
 Example.propTypes = propTypes;
 Example.defaultProps = defaultProps;
diff --git a/packages/patternfly-4/react-docs/src/components/example/liveDemo.js b/packages/patternfly-4/react-docs/src/components/example/liveDemo.js
new file mode 100644
index 00000000000..d9affdd27bd
--- /dev/null
+++ b/packages/patternfly-4/react-docs/src/components/example/liveDemo.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from './example.styles';
+import PropTypes from 'prop-types';
+import * as CoreComponents from '@patternfly/react-core';
+import * as CoreIcons from '@patternfly/react-icons';
+import { LiveProvider, LiveEditor, LiveError, LivePreview, withLive } from 'react-live';
+import { transform } from 'babel-standalone';
+
+const propTypes = {
+  className: PropTypes.string,
+  raw: PropTypes.string.isRequired,
+  images: PropTypes.array
+};
+
+const defaultProps = {
+  className: '',
+  images: []
+};
+
+const scopePlayground = { React, ...CoreComponents, ...CoreIcons };
+
+const transformCode = code => {
+  try {
+    // LiveEditor doesn't work properly with these so need to remove
+    code = code.replace(/^\s*import.*$/gm, '');
+    code = code.replace(/^\s*export default class/gm, 'class');
+    code = code.replace(/extends Component/gm, 'extends React.Component');
+    code = code.replace(/^\s*export.*$/gm, '');
+    code = code.replace(/^\s*static.*$/gm, '');
+    const transformedCode = transform(code, {
+      presets: ['react', 'stage-2']
+    }).code;
+    return transformedCode;
+  } catch (e) {
+    console.log(e);
+    // todo: handle error
+    return code;
+  }
+};
+
+const LiveDemo = ({ className, raw, images, ...props }) => {
+  const scope = {
+    ...scopePlayground
+  };
+  for (const image of images) {
+    const searchIndex = raw.search(image.name);
+    if (searchIndex > -1) {
+      const startIndex = raw.lastIndexOf('import', searchIndex);
+      const importName = raw.substring(startIndex, searchIndex).split(' ')[1];
+      scope[importName] = image.file;
+    }
+  }
+
+  return (
+    <LiveProvider code={raw} scope={scope} transformCode={transformCode}>
+      <LivePreview className={css(className, styles.example)} />
+      <LiveEditor style={{ marginBottom: '30px' }} />
+      <LiveError />
+    </LiveProvider>
+  );
+};
+
+LiveDemo.propTypes = propTypes;
+LiveDemo.defaultProps = defaultProps;
+
+export default withLive(LiveDemo);
diff --git a/packages/patternfly-4/react-docs/src/layouts/example.js b/packages/patternfly-4/react-docs/src/layouts/example.js
index 61e4364c536..f2cfd7bec03 100644
--- a/packages/patternfly-4/react-docs/src/layouts/example.js
+++ b/packages/patternfly-4/react-docs/src/layouts/example.js
@@ -1,8 +1,14 @@
-// This is a gatsby limitation will be fixed in newer version
-// eslint-disable-next-line
-import '@patternfly/react-core/../dist/styles/base.css';
-import './index.css';
 import PropTypes from 'prop-types';
+import { withPrefix } from 'gatsby-link';
+
+// This is a gatsby limitation will be fixed in newer version
+let globalStyles = require(`!raw-loader!@patternfly/react-core/../dist/styles/base.css`);
+globalStyles = globalStyles.replace(/\.\/assets\//g, withPrefix('/assets/'));
+const localStyles = require(`!raw-loader!./index.css`);
+import { injectGlobal } from 'emotion';
+
+injectGlobal(globalStyles);
+injectGlobal(localStyles);
 
 const propTypes = {
   children: PropTypes.func.isRequired
diff --git a/packages/patternfly-4/react-docs/src/layouts/index.js b/packages/patternfly-4/react-docs/src/layouts/index.js
index f8c4b4f922f..8acb0d4d1c5 100644
--- a/packages/patternfly-4/react-docs/src/layouts/index.js
+++ b/packages/patternfly-4/react-docs/src/layouts/index.js
@@ -1,12 +1,18 @@
-// This is a gatsby limitation will be fixed in newer version
-// eslint-disable-next-line
-import '@patternfly/react-core/../dist/styles/base.css';
-import './index.css';
 import React from 'react';
 import Helmet from 'react-helmet';
 import Page from '../components/page';
 import Navigation from '../components/navigation';
 import PropTypes from 'prop-types';
+import { withPrefix } from 'gatsby-link';
+
+// This is a gatsby limitation will be fixed in newer version
+let globalStyles = require(`!raw-loader!@patternfly/react-core/../dist/styles/base.css`);
+globalStyles = globalStyles.replace(/\.\/assets\//g, withPrefix('/assets/'));
+const localStyles = require(`!raw-loader!./index.css`);
+import { injectGlobal } from 'emotion';
+
+injectGlobal(globalStyles);
+injectGlobal(localStyles);
 
 const propTypes = {
   children: PropTypes.func.isRequired,
@@ -26,12 +32,13 @@ const Layout = ({ children, data }) => {
 
   return (
     <React.Fragment>
-      <Helmet
-        meta={[
-          { name: 'description', content: 'PatternFly React Documentation' },
-          { name: 'keywords', content: 'React, PatternFly, Red Hat' }
-        ]}
-      />
+      <Helmet>
+        <meta charSet="utf-8" />
+        <meta name="description" content="PatternFly React Documentation" />
+        <meta name="keywords" content="React, PatternFly, Red Hat" />
+        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css" />
+        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/monokai.min.css" />
+      </Helmet>
       <Page
         title="Patternfly React"
         navigation={<Navigation componentRoutes={componentRoutes} layoutRoutes={layoutRoutes} />}
diff --git a/packages/patternfly-4/react-styles/.babelrc b/packages/patternfly-4/react-styles/.babelrc
index 85a37c33083..8ade66d8e14 100644
--- a/packages/patternfly-4/react-styles/.babelrc
+++ b/packages/patternfly-4/react-styles/.babelrc
@@ -1,5 +1,3 @@
 {
-  "presets": [
-    "../../../.babelrc.js"
-  ]
-}
\ No newline at end of file
+  "presets": ["../.babelrc.js"]
+}
diff --git a/packages/patternfly-4/react-styles/package.json b/packages/patternfly-4/react-styles/package.json
index 7b6b095fdbb..f494f7b514c 100644
--- a/packages/patternfly-4/react-styles/package.json
+++ b/packages/patternfly-4/react-styles/package.json
@@ -25,5 +25,10 @@
     "resolve-from": "^4.0.0"
   },
   "license": "Apache-2.0",
-  "scripts": {}
+  "scripts": {
+    "prebuild": "yarn build:babel",
+    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm"
+  }
 }
diff --git a/packages/patternfly-4/react-tokens/package.json b/packages/patternfly-4/react-tokens/package.json
index 3ccbf9e147c..4bb27b4f325 100644
--- a/packages/patternfly-4/react-tokens/package.json
+++ b/packages/patternfly-4/react-tokens/package.json
@@ -27,7 +27,7 @@
     "build": "node build/generateTokens.js"
   },
   "devDependencies": {
-    "@patternfly/patternfly-next": "1.0.43",
+    "@patternfly/patternfly-next": "1.0.44",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2"
diff --git a/packages/patternfly-4/verifyCoreVersions.js b/packages/patternfly-4/verifyCoreVersions.js
new file mode 100644
index 00000000000..48ae015ee94
--- /dev/null
+++ b/packages/patternfly-4/verifyCoreVersions.js
@@ -0,0 +1,33 @@
+/* eslint-disable no-console, import/no-extraneous-dependencies */
+const Repository = require('lerna/lib/Repository');
+const PackageUtilities = require('lerna/lib/PackageUtilities');
+
+const packages = PackageUtilities.getPackages(new Repository());
+
+const versions = new Map();
+const corePackageName = '@patternfly/patternfly-next';
+
+packages
+  .filter(({ location }) => location.match(/patternfly-4/))
+  .forEach(({ name, dependencies = {}, devDependencies = {}, optionalDependencies = {}, peerDependencies = {} }) => {
+    [
+      ...Object.entries(dependencies),
+      ...Object.entries(devDependencies),
+      ...Object.entries(optionalDependencies),
+      ...Object.entries(peerDependencies)
+    ]
+      .filter(dep => dep[0] === corePackageName)
+      .forEach(([, version]) => {
+        versions.set(version, [...(versions.get(version) || []), name]);
+      });
+  });
+
+if (versions.size > 1) {
+  console.error(`error: @patternfly/patternfly-next versions must match for all packages`);
+  console.error('-'.repeat(10));
+  versions.forEach((packagesNames, version) => {
+    console.error(`v${version}: ${packagesNames.join(', ')}`);
+  });
+  console.error('-'.repeat(10));
+  process.exit(1);
+}
diff --git a/packages/react-icons/.babelrc b/packages/react-icons/.babelrc
new file mode 100644
index 00000000000..d0be3075281
--- /dev/null
+++ b/packages/react-icons/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["../patternfly-4/.babelrc.js"]
+}
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 9f9440af6ac..9cb81f6900f 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -24,11 +24,19 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
-    "prebuild": "node ./build/generateIcons.js"
+    "prebuild": "node ./build/generateIcons.js",
+    "build": "yarn build:babel; yarn build:ts",
+    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm",
+    "build:ts": "node ./scripts/copyTS.js"
   },
   "devDependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.1.0",
-    "node-plop": "^0.15.0"
+    "node-plop": "^0.15.0",
+    "fs-extra": "^6.0.1",
+    "glob": "^7.1.2",
+    "npmlog": "^4.1.2"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
diff --git a/packages/react-icons/scripts/copyTS.js b/packages/react-icons/scripts/copyTS.js
new file mode 100644
index 00000000000..7f55c3a234a
--- /dev/null
+++ b/packages/react-icons/scripts/copyTS.js
@@ -0,0 +1,17 @@
+const path = require('path');
+const glob = require('glob');
+const fse = require('fs-extra');
+const log = require('npmlog');
+
+const srcDir = path.join('./src');
+const distDir = path.join('./dist/js');
+
+const files = glob.sync('**/*.d.ts', {
+  cwd: srcDir
+});
+files.forEach(file => {
+  const from = path.join(srcDir, file);
+  const to = path.join(distDir, file);
+  log.info('copyTS', `${from} --> ${to}`);
+  fse.copySync(from, to);
+});
diff --git a/scripts/copyTS.js b/scripts/copyTS.js
deleted file mode 100644
index 99dbe8e2353..00000000000
--- a/scripts/copyTS.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const path = require('path');
-const glob = require('glob');
-const fse = require('fs-extra');
-const Repository = require('lerna/lib/Repository');
-const PackageUtilities = require('lerna/lib/PackageUtilities');
-const log = require('npmlog');
-
-const packages = PackageUtilities.getPackages(new Repository());
-
-packages.forEach(pkg => {
-  const pkgRoot = pkg.location;
-  const srcDir = path.resolve(pkgRoot, './src');
-  const distDir = path.resolve(pkgRoot, './dist/js');
-
-  const files = glob.sync('**/*.d.ts', {
-    cwd: srcDir
-  });
-  files.forEach(file => {
-    const from = path.join(srcDir, file);
-    const to = path.join(distDir, file);
-    log.info('copyTS', `${from} --> ${to}`);
-    fse.copySync(from, to);
-  });
-});
diff --git a/scripts/getGlobPackages.js b/scripts/getGlobPackages.js
deleted file mode 100644
index 17d75984e1a..00000000000
--- a/scripts/getGlobPackages.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable no-console */
-
-const tool = process.argv[2];
-
-function outputGlobForPackages(packages) {
-  const ignoreglob = packages.length === 1 ? packages[0] : `{${packages.join(',')}}`;
-  console.log(ignoreglob);
-}
-
-function getBabelGlobPackages() {
-  const babelENV = process.env.BABEL_ENV || 'production:cjs';
-  const allIgnore = [
-    'eslint-plugin-patternfly-react',
-    '@patternfly/react-codemods',
-    '@patternfly/react-docs',
-    '@patternfly/react-tokens'
-  ];
-  const ignoreMap = {
-    esm: [...allIgnore],
-    cjs: [...allIgnore]
-  };
-  const moduleType = babelENV.split(':')[1];
-  outputGlobForPackages(ignoreMap[moduleType]);
-}
-
-switch (tool) {
-  case 'babel':
-    getBabelGlobPackages();
-    break;
-  default:
-    console.log('');
-}
diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
index 2aee8f5b4ff..a60fdf0362d 100644
--- a/storybook/webpack.config.js
+++ b/storybook/webpack.config.js
@@ -14,7 +14,16 @@ module.exports = (baseConfig, env, defaultConfig) => {
     // Storysource Addon
     {
       test: /\.stories\.jsx?$/,
-      loaders: [require.resolve('@storybook/addon-storysource/loader')],
+      loaders: [
+        {
+          loader: require.resolve('@storybook/addon-storysource/loader'),
+          options: {
+            prettierConfig: {
+              parser: 'babylon' //The default prettier parser
+            }
+          }
+        }
+      ],
       enforce: 'pre'
     },
     // Css
diff --git a/yarn.lock b/yarn.lock
index 4a768c32ee4..6c4117600dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -45,6 +45,12 @@
     "@babel/types" "7.0.0-beta.51"
     lodash "^4.17.5"
 
+"@babel/helper-module-imports@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+  dependencies:
+    "@babel/types" "^7.0.0"
+
 "@babel/helper-plugin-utils@^7.0.0-beta.48":
   version "7.0.0-beta.48"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.48.tgz#bf310f89e91d146ac0f1369562164be45edba587"
@@ -71,6 +77,12 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/runtime@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -111,6 +123,14 @@
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0.tgz#6e191793d3c854d19c6749989e3bc55f0e962118"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
 "@emotion/babel-utils@^0.6.4":
   version "0.6.9"
   resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.6.9.tgz#bb074fadad65c443a575d3379488415fd194fc75"
@@ -143,6 +163,10 @@
   version "0.6.12"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.12.tgz#3fb58220e0fc9e380bcabbb3edde396ddc1dfe6e"
 
+"@emotion/stylis@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.0.tgz#4c30e6fccc9555e42fa6fef98b3bd0788b954684"
+
 "@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.6":
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.6.tgz#988957ecd0a9be00ee9de27172f8c56d41595a93"
@@ -189,15 +213,9 @@
     node-fetch "^2.1.1"
     url-template "^2.0.8"
 
-"@patternfly/patternfly-next@1.0.43":
-  version "1.0.43"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly-next/-/patternfly-next-1.0.43.tgz#64498a29c690b1713fef7e07d0eac701ef064c9a"
-
-"@samverschueren/stream-to-observable@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
-  dependencies:
-    any-observable "^0.3.0"
+"@patternfly/patternfly-next@1.0.44":
+  version "1.0.44"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly-next/-/patternfly-next-1.0.44.tgz#556a48dcfbb24a01f65363656c725a35a731bb0c"
 
 "@semantic-release/commit-analyzer@^2.0.0", "@semantic-release/commit-analyzer@~2.0.0":
   version "2.0.0"
@@ -306,11 +324,11 @@
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
 
-"@storybook/addon-actions@3.4.6", "@storybook/addon-actions@^v3.4.0":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.4.6.tgz#70ca84a4754ea2969640428890d9a3c9369261f6"
+"@storybook/addon-actions@3.4.11", "@storybook/addon-actions@^v3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.4.11.tgz#a51418c5b684fd3df2788c19ef266845d6068baf"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.11"
     babel-runtime "^6.26.0"
     deep-equal "^1.0.1"
     glamor "^2.20.40"
@@ -321,12 +339,12 @@
     react-inspector "^2.2.2"
     uuid "^3.2.1"
 
-"@storybook/addon-info@^v3.4.0":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-info/-/addon-info-3.4.6.tgz#212c47d7d9e80b4dfda3c2251d035f929e29a538"
+"@storybook/addon-info@^v3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-info/-/addon-info-3.4.11.tgz#eb4eafb2ec5a580acdaeacab0065ee8463eddefd"
   dependencies:
-    "@storybook/client-logger" "3.4.6"
-    "@storybook/components" "3.4.6"
+    "@storybook/client-logger" "3.4.11"
+    "@storybook/components" "3.4.11"
     babel-runtime "^6.26.0"
     glamor "^2.20.40"
     glamorous "^4.12.1"
@@ -337,11 +355,11 @@
     react-addons-create-fragment "^15.5.3"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-knobs@^v3.4.0":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-3.4.6.tgz#900586a218e12540256884af7a0ba1f684f1f436"
+"@storybook/addon-knobs@^v3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-3.4.11.tgz#13ca0c73f19c0a3fda1a1d1ff07ef00fa3a914b3"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.11"
     babel-runtime "^6.26.0"
     deep-equal "^1.0.1"
     global "^4.3.2"
@@ -354,26 +372,26 @@
     react-textarea-autosize "^5.2.1"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-links@3.4.6", "@storybook/addon-links@^v3.4.0":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.4.6.tgz#0e167c03932ddfcbeba02215af1a420c0d3f0843"
+"@storybook/addon-links@3.4.11", "@storybook/addon-links@^v3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.4.11.tgz#097b4fcf4b3af3903762ac0d7e65c5d37d14af88"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.11"
     babel-runtime "^6.26.0"
     global "^4.3.2"
     prop-types "^15.6.1"
 
-"@storybook/addon-options@^v3.4.0":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-options/-/addon-options-3.4.6.tgz#8f27400c4a2a852657e939d9b733086bb6c3349c"
+"@storybook/addon-options@^v3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-options/-/addon-options-3.4.11.tgz#6f27f223cad466dc1079045f5af01c99f94f65d0"
   dependencies:
     babel-runtime "^6.26.0"
 
-"@storybook/addon-storysource@^v3.4.0":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-3.4.6.tgz#a993e48080e2f4f4372807d6310c1fee434fc4b0"
+"@storybook/addon-storysource@^v3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-3.4.11.tgz#75096f89249a4b7a5794ab846e4c29fe08bd46ae"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.11"
     acorn "^5.5.3"
     acorn-es7 "^0.1.0"
     acorn-jsx "^4.1.1"
@@ -385,52 +403,52 @@
     prop-types "^15.6.1"
     react-syntax-highlighter "^7.0.2"
 
-"@storybook/addon-viewport@^3.3.15":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-3.4.6.tgz#42a3fd095c7ef4f2c35c18ce3e946faf4ab70507"
+"@storybook/addon-viewport@^3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-3.4.11.tgz#55f10b258b8010baeeb9dfccefc0a9cfcb4e97b0"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.11"
     babel-runtime "^6.26.0"
     global "^4.3.2"
     prop-types "^15.6.1"
 
-"@storybook/addons@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.4.6.tgz#8275e46b8dfe7c751f2f18a431bc3339c999a2ae"
+"@storybook/addons@3.4.11", "@storybook/addons@^3.3.0":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.4.11.tgz#f3e27c46d80ad1f171888c4aad0a19a8a032d072"
 
-"@storybook/channel-postmessage@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.4.6.tgz#acb7d6096bd060a3d224d7e753e33c22f21fabdb"
+"@storybook/channel-postmessage@3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.4.11.tgz#69782fa3b9f879ae02a6d9b85b5d0902e75dabc2"
   dependencies:
-    "@storybook/channels" "3.4.6"
+    "@storybook/channels" "3.4.11"
     global "^4.3.2"
     json-stringify-safe "^5.0.1"
 
-"@storybook/channels@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.4.6.tgz#4147b4e171763f168cd523a3f83e7e125c9523c2"
+"@storybook/channels@3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.4.11.tgz#853ec40fdfa6c3ae8cff23f0cd86b77a719823f5"
 
-"@storybook/client-logger@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.4.6.tgz#2f2b271d6825c7325f999f6b17d7ef69984faa18"
+"@storybook/client-logger@3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.4.11.tgz#b592ea227f9f330f50925f7c1c266cc658cbc704"
 
-"@storybook/components@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.4.6.tgz#34bddcfa21bddc59ef57a052d157285fab7ba003"
+"@storybook/components@3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.4.11.tgz#dbaa1ee19036cd8617993fb6bf4a07780d111f7e"
   dependencies:
     glamor "^2.20.40"
     glamorous "^4.12.1"
     prop-types "^15.6.1"
 
-"@storybook/core@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-3.4.6.tgz#3261dc89bff2c716579270da3f5cf83a374eca5c"
+"@storybook/core@3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-3.4.11.tgz#fda9b0fbca73e3d2a8b1578296f113836fc2d473"
   dependencies:
-    "@storybook/addons" "3.4.6"
-    "@storybook/channel-postmessage" "3.4.6"
-    "@storybook/client-logger" "3.4.6"
-    "@storybook/node-logger" "3.4.6"
-    "@storybook/ui" "3.4.6"
+    "@storybook/addons" "3.4.11"
+    "@storybook/channel-postmessage" "3.4.11"
+    "@storybook/client-logger" "3.4.11"
+    "@storybook/node-logger" "3.4.11"
+    "@storybook/ui" "3.4.11"
     autoprefixer "^7.2.6"
     babel-runtime "^6.26.0"
     chalk "^2.3.2"
@@ -462,9 +480,9 @@
     "@storybook/react-simple-di" "^1.2.1"
     babel-runtime "6.x.x"
 
-"@storybook/node-logger@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.4.6.tgz#aed4f5bd102e033391584ef82bd3fec055659448"
+"@storybook/node-logger@3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.4.11.tgz#a6684a4c21f74dae937cd9f202deec0932d3f3b5"
   dependencies:
     npmlog "^4.1.2"
 
@@ -500,19 +518,19 @@
   dependencies:
     babel-runtime "^6.5.0"
 
-"@storybook/react@^v3.4.0":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.4.6.tgz#8bc0c1e10305d7539decb8f8c781b5970ff951ff"
-  dependencies:
-    "@storybook/addon-actions" "3.4.6"
-    "@storybook/addon-links" "3.4.6"
-    "@storybook/addons" "3.4.6"
-    "@storybook/channel-postmessage" "3.4.6"
-    "@storybook/client-logger" "3.4.6"
-    "@storybook/core" "3.4.6"
-    "@storybook/node-logger" "3.4.6"
-    "@storybook/ui" "3.4.6"
-    airbnb-js-shims "^1.4.1"
+"@storybook/react@^v3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.4.11.tgz#0496132d78ca2f66ace79d9c4f7e951402c962db"
+  dependencies:
+    "@storybook/addon-actions" "3.4.11"
+    "@storybook/addon-links" "3.4.11"
+    "@storybook/addons" "3.4.11"
+    "@storybook/channel-postmessage" "3.4.11"
+    "@storybook/client-logger" "3.4.11"
+    "@storybook/core" "3.4.11"
+    "@storybook/node-logger" "3.4.11"
+    "@storybook/ui" "3.4.11"
+    airbnb-js-shims "^1 || ^2"
     babel-loader "^7.1.4"
     babel-plugin-macros "^2.2.0"
     babel-plugin-react-docgen "^1.9.0"
@@ -553,11 +571,11 @@
     shelljs "^0.8.1"
     yargs "^11.0.0"
 
-"@storybook/ui@3.4.6":
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.4.6.tgz#c25c93d0843c4250b77b2a3614533a7d5790893d"
+"@storybook/ui@3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.4.11.tgz#d7b1bf92f0b27dbce86d8e22d0296095e692d2d0"
   dependencies:
-    "@storybook/components" "3.4.6"
+    "@storybook/components" "3.4.11"
     "@storybook/mantra-core" "^1.7.2"
     "@storybook/podda" "^1.2.3"
     "@storybook/react-komposer" "^2.0.3"
@@ -1000,21 +1018,22 @@ aggregate-error@^1.0.0:
     clean-stack "^1.0.0"
     indent-string "^3.0.0"
 
-airbnb-js-shims@^1.4.1:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/airbnb-js-shims/-/airbnb-js-shims-1.5.2.tgz#25132bc99784ec702ac1e2467f043c82ca0bd170"
+"airbnb-js-shims@^1 || ^2":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/airbnb-js-shims/-/airbnb-js-shims-2.1.1.tgz#a509611480db7e6d9db62fe2acfaeb473b6842ac"
   dependencies:
     array-includes "^3.0.3"
     array.prototype.flat "^1.2.1"
     array.prototype.flatmap "^1.2.1"
-    array.prototype.flatten "^1.2.1"
     es5-shim "^4.5.10"
     es6-shim "^0.35.3"
     function.prototype.name "^1.1.0"
     object.entries "^1.0.4"
+    object.fromentries "^1.0.0"
     object.getownpropertydescriptors "^2.0.3"
     object.values "^1.0.4"
     promise.prototype.finally "^3.1.0"
+    string.prototype.matchall "^3.0.0"
     string.prototype.padend "^3.0.0"
     string.prototype.padstart "^3.0.0"
     symbol.prototype.description "^1.0.0"
@@ -1079,7 +1098,7 @@ ansi-cyan@^0.1.1:
   dependencies:
     ansi-wrap "0.1.0"
 
-ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
+ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
@@ -1145,10 +1164,6 @@ ansicolors@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
 
-any-observable@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
-
 any-promise@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
@@ -1167,10 +1182,6 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-app-root-path@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46"
-
 append-transform@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
@@ -1347,14 +1358,6 @@ array.prototype.flatmap@^1.2.1:
     es-abstract "^1.10.0"
     function-bind "^1.1.1"
 
-array.prototype.flatten@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatten/-/array.prototype.flatten-1.2.1.tgz#a77ae1b64524ce373b137fade324d12040d3c680"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.10.0"
-    function-bind "^1.1.1"
-
 arraybuffer.slice@~0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
@@ -1740,13 +1743,20 @@ babel-helpers@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-jest@^22.4.3, babel-jest@^22.4.4:
+babel-jest@^22.4.3:
   version "22.4.4"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-22.4.4.tgz#977259240420e227444ebe49e226a61e49ea659d"
   dependencies:
     babel-plugin-istanbul "^4.1.5"
     babel-preset-jest "^22.4.4"
 
+babel-jest@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-23.6.0.tgz#a644232366557a2240a0c083da6b25786185a2f1"
+  dependencies:
+    babel-plugin-istanbul "^4.1.6"
+    babel-preset-jest "^23.2.0"
+
 babel-loader@^6.0.0:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.4.1.tgz#0b34112d5b0748a8dcdbf51acf6f9bd42d50b8ca"
@@ -1780,6 +1790,24 @@ babel-plugin-check-es2015-constants@^6.22.0, babel-plugin-check-es2015-constants
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-emotion@^9.2.10:
+  version "9.2.10"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.10.tgz#983c288106cece7ce761df0513683ef0d241c466"
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/babel-utils" "^0.6.4"
+    "@emotion/hash" "^0.6.2"
+    "@emotion/memoize" "^0.6.1"
+    "@emotion/stylis" "^0.7.0"
+    babel-core "^6.26.3"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    find-root "^1.1.0"
+    mkdirp "^0.5.1"
+    source-map "^0.5.7"
+    touch "^2.0.1"
+
 babel-plugin-emotion@^9.2.6:
   version "9.2.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.6.tgz#992d48f316c20610c28a95ae90e6bd193014eec5"
@@ -1798,9 +1826,9 @@ babel-plugin-emotion@^9.2.6:
     source-map "^0.5.7"
     touch "^1.0.0"
 
-babel-plugin-istanbul@^4.1.5:
+babel-plugin-istanbul@^4.1.5, babel-plugin-istanbul@^4.1.6:
   version "4.1.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
+  resolved "http://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
   dependencies:
     babel-plugin-syntax-object-rest-spread "^6.13.0"
     find-up "^2.1.0"
@@ -1811,6 +1839,10 @@ babel-plugin-jest-hoist@^22.4.4:
   version "22.4.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.4.tgz#b9851906eab34c7bf6f8c895a2b08bea1a844c0b"
 
+babel-plugin-jest-hoist@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167"
+
 babel-plugin-macros@^2.0.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.4.0.tgz#6c5f9836e1f6c0a9743b3bab4af29f73e437e544"
@@ -1888,7 +1920,7 @@ babel-plugin-minify-type-constructors@^0.3.0:
   dependencies:
     babel-helper-is-void-0 "^0.3.0"
 
-babel-plugin-react-docgen@^1.9.0, babel-plugin-react-docgen@^v1.9.0:
+babel-plugin-react-docgen@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-1.9.0.tgz#2e79aeed2f93b53a172398f93324fdcf9f02e01f"
   dependencies:
@@ -2478,6 +2510,13 @@ babel-preset-jest@^22.4.4:
     babel-plugin-jest-hoist "^22.4.4"
     babel-plugin-syntax-object-rest-spread "^6.13.0"
 
+babel-preset-jest@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz#8ec7a03a138f001a1a8fb1e8113652bf1a55da46"
+  dependencies:
+    babel-plugin-jest-hoist "^23.2.0"
+    babel-plugin-syntax-object-rest-spread "^6.13.0"
+
 babel-preset-minify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/babel-preset-minify/-/babel-preset-minify-0.3.0.tgz#7db64afa75f16f6e06c0aa5f25195f6f36784d77"
@@ -2585,7 +2624,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0, babel-te
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+babel-traverse@^6.0.0, babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   dependencies:
@@ -2599,7 +2638,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0, babel-types@^6.6.0:
+babel-types@^6.0.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0, babel-types@^6.6.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -2907,9 +2946,9 @@ browser-process-hrtime@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"
 
-browser-resolve@^1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+browser-resolve@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
   dependencies:
     resolve "1.1.7"
 
@@ -3012,6 +3051,19 @@ btoa-lite@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
 
+buble@^0.19.3:
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.3.tgz#01e9412062cff1da6f20342b6ecd72e7bf699d02"
+  dependencies:
+    acorn "^5.4.1"
+    acorn-dynamic-import "^3.0.0"
+    acorn-jsx "^4.1.1"
+    chalk "^2.3.1"
+    magic-string "^0.22.4"
+    minimist "^1.2.0"
+    os-homedir "^1.0.1"
+    vlq "^1.0.0"
+
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
@@ -3485,7 +3537,7 @@ cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
 
-cli-cursor@^1.0.1, cli-cursor@^1.0.2:
+cli-cursor@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
   dependencies:
@@ -3497,27 +3549,24 @@ cli-cursor@^2.1.0:
   dependencies:
     restore-cursor "^2.0.0"
 
-cli-spinners@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-0.1.2.tgz#bb764d88e185fb9e1e6a2a1f19772318f605e31c"
-
 cli-table@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
   dependencies:
     colors "1.0.3"
 
-cli-truncate@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
-  dependencies:
-    slice-ansi "0.0.4"
-    string-width "^1.0.1"
-
 cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+clipboard@^1.5.5:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clipboard@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a"
@@ -3713,7 +3762,7 @@ commander@2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
-commander@2.15.x, commander@^2.11.0, commander@^2.14.1, commander@^2.15.0, commander@^2.9.0, commander@~2.15.0:
+commander@2.15.x, commander@^2.11.0, commander@^2.15.0, commander@^2.9.0, commander@~2.15.0:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
@@ -3793,6 +3842,14 @@ component-inherit@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
 
+component-props@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944"
+
+component-xor@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/component-xor/-/component-xor-0.0.4.tgz#c55d83ccc1b94cd5089a4e93fa7891c7263e59aa"
+
 compressible@~2.0.13:
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.13.tgz#0d1020ab924b2fdb4d6279875c7d6daba6baa7a9"
@@ -4181,7 +4238,7 @@ cosmiconfig@^4.0.0:
     parse-json "^4.0.0"
     require-from-string "^2.0.1"
 
-cosmiconfig@^5.0.1, cosmiconfig@^5.0.2:
+cosmiconfig@^5.0.1:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.5.tgz#a809e3c2306891ce17ab70359dc8bdf661fe2cd0"
   dependencies:
@@ -4214,6 +4271,14 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
+create-emotion-server@^9.2.10:
+  version "9.2.10"
+  resolved "https://registry.yarnpkg.com/create-emotion-server/-/create-emotion-server-9.2.10.tgz#543d36691b1153940c79c12f44cdbbe31da01ba7"
+  dependencies:
+    html-tokenize "^2.0.0"
+    multipipe "^1.0.2"
+    through "^2.3.8"
+
 create-emotion-server@^9.2.6:
   version "9.2.6"
   resolved "https://registry.yarnpkg.com/create-emotion-server/-/create-emotion-server-9.2.6.tgz#42cf8558b1c03f208503efec19cc913947bfae45"
@@ -4626,7 +4691,7 @@ datatables.net@1.10.16, datatables.net@^1.10.15:
   dependencies:
     jquery ">=1.7"
 
-date-fns@^1.23.0, date-fns@^1.27.2:
+date-fns@^1.23.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
 
@@ -4945,6 +5010,13 @@ dom-helpers@^3.2.0, dom-helpers@^3.2.1, dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
 
+dom-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad"
+  dependencies:
+    component-props "1.1.1"
+    component-xor "0.0.4"
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -5089,10 +5161,6 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@
   version "1.3.48"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.48.tgz#d3b0d8593814044e092ece2108fc3ac9aea4b900"
 
-elegant-spinner@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
-
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -5119,6 +5187,12 @@ emotion-server@^9.2.6:
   dependencies:
     create-emotion-server "^9.2.6"
 
+emotion-server@^9.2.9:
+  version "9.2.10"
+  resolved "https://registry.yarnpkg.com/emotion-server/-/emotion-server-9.2.10.tgz#c34090b280706a9839ffd18e3dd8b3e600ba15ee"
+  dependencies:
+    create-emotion-server "^9.2.10"
+
 emotion@^9.2.6:
   version "9.2.6"
   resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.6.tgz#48517515e769bca6d8f7ff18425a7f133b010f22"
@@ -5126,6 +5200,13 @@ emotion@^9.2.6:
     babel-plugin-emotion "^9.2.6"
     create-emotion "^9.2.6"
 
+emotion@^9.2.9:
+  version "9.2.10"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.10.tgz#9ba8e33d3dff1352af03f92d761ac6889cb0c545"
+  dependencies:
+    babel-plugin-emotion "^9.2.10"
+    create-emotion "^9.2.6"
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -5305,6 +5386,16 @@ es-abstract@^1.10.0, es-abstract@^1.4.3, es-abstract@^1.5.1, es-abstract@^1.6.1,
     is-callable "^1.1.3"
     is-regex "^1.0.4"
 
+es-abstract@^1.11.0, es-abstract@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
 es-to-primitive@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
@@ -5444,30 +5535,16 @@ eslint-config-prettier@^2.9.0:
   dependencies:
     get-stdin "^5.0.1"
 
-eslint-config-standard-jsx@^4.0.0, eslint-config-standard-jsx@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard-jsx/-/eslint-config-standard-jsx-4.0.2.tgz#009e53c4ddb1e9ee70b4650ffe63a7f39f8836e1"
-
 eslint-config-standard-jsx@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/eslint-config-standard-jsx/-/eslint-config-standard-jsx-5.0.0.tgz#4abfac554f38668e0078c664569e7b2384e5d2aa"
 
-eslint-config-standard-react@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard-react/-/eslint-config-standard-react-5.0.0.tgz#64c7b8140172852be810a53d48ee87649ff178e3"
-  dependencies:
-    eslint-config-standard-jsx "^4.0.0"
-
 eslint-config-standard-react@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/eslint-config-standard-react/-/eslint-config-standard-react-6.0.0.tgz#d366d6c3c092426fd3ae794a4ca0b3cb131f2964"
   dependencies:
     eslint-config-standard-jsx "^5.0.0"
 
-eslint-config-standard@^10.2.1:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-10.2.1.tgz#c061e4d066f379dc17cd562c64e819b4dd454591"
-
 eslint-config-standard@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-11.0.0.tgz#87ee0d3c9d95382dc761958cbb23da9eea31e0ba"
@@ -5502,21 +5579,6 @@ eslint-module-utils@^2.2.0:
     debug "^2.6.8"
     pkg-dir "^1.0.0"
 
-eslint-plugin-import@^2.10.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.12.0.tgz#dad31781292d6664b25317fd049d2e2b2f02205d"
-  dependencies:
-    contains-path "^0.1.0"
-    debug "^2.6.8"
-    doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.1"
-    eslint-module-utils "^2.2.0"
-    has "^1.0.1"
-    lodash "^4.17.4"
-    minimatch "^3.0.3"
-    read-pkg-up "^2.0.0"
-    resolve "^1.6.0"
-
 eslint-plugin-import@^2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.13.0.tgz#df24f241175e312d91662dc91ca84064caec14ed"
@@ -5548,15 +5610,6 @@ eslint-plugin-jsx-a11y@^6.0.3:
     emoji-regex "^6.1.0"
     jsx-ast-utils "^2.0.0"
 
-eslint-plugin-node@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-5.2.1.tgz#80df3253c4d7901045ec87fa660a284e32bdca29"
-  dependencies:
-    ignore "^3.3.6"
-    minimatch "^3.0.4"
-    resolve "^1.3.3"
-    semver "5.3.0"
-
 eslint-plugin-node@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-6.0.1.tgz#bf19642298064379315d7a4b2a75937376fa05e4"
@@ -5566,7 +5619,7 @@ eslint-plugin-node@^6.0.1:
     resolve "^1.3.3"
     semver "^5.4.1"
 
-eslint-plugin-prettier@^2.4.0, eslint-plugin-prettier@^2.6.0:
+eslint-plugin-prettier@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.6.0.tgz#33e4e228bdb06142d03c560ce04ec23f6c767dd7"
   dependencies:
@@ -5798,18 +5851,6 @@ execa@^0.8.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.9.0.tgz#adb7ce62cf985071f60580deb4a88b9e34712d01"
-  dependencies:
-    cross-spawn "^5.0.1"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execall@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/execall/-/execall-1.0.0.tgz#73d0904e395b3cab0658b08d09ec25307f29bb73"
@@ -5864,16 +5905,16 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-expect@^22.4.0:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-22.4.3.tgz#d5a29d0a0e1fb2153557caef2674d4547e914674"
+expect@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-23.6.0.tgz#1e0c8d3ba9a581c87bd71fb9bc8862d443425f98"
   dependencies:
     ansi-styles "^3.2.0"
-    jest-diff "^22.4.3"
-    jest-get-type "^22.4.3"
-    jest-matcher-utils "^22.4.3"
-    jest-message-util "^22.4.3"
-    jest-regex-util "^22.4.3"
+    jest-diff "^23.6.0"
+    jest-get-type "^22.1.0"
+    jest-matcher-utils "^23.6.0"
+    jest-message-util "^23.4.0"
+    jest-regex-util "^23.3.0"
 
 express-graphql@^0.6.6:
   version "0.6.12"
@@ -6104,7 +6145,7 @@ fbjs@^0.8.1, fbjs@^0.8.12, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-figures@^1.3.5, figures@^1.7.0:
+figures@^1.3.5:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
   dependencies:
@@ -6216,10 +6257,6 @@ find-node-modules@1.0.4, find-node-modules@^1.0.1:
     findup-sync "0.4.2"
     merge "^1.2.0"
 
-find-parent-dir@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
-
 find-root@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.0.0.tgz#962ff211aab25c6520feeeb8d6287f8f6e95807a"
@@ -6597,6 +6634,12 @@ gatsby-module-loader@^1.0.11:
     babel-runtime "^6.26.0"
     loader-utils "^0.2.16"
 
+gatsby-plugin-emotion@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-emotion/-/gatsby-plugin-emotion-2.0.5.tgz#e44d0ee58fc07bb49889a28ca51e0cb4690aeeb4"
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
 gatsby-plugin-react-helmet@^2.0.10:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-2.0.11.tgz#a2db81755f5b41d54e0e535ca1d9a008d3ccff0a"
@@ -6808,10 +6851,6 @@ get-func-name@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
 
-get-own-enumerable-property-symbols@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-2.0.1.tgz#5c4ad87f2834c4b9b4e84549dc1e0650fb38c24b"
-
 get-params@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/get-params/-/get-params-0.1.2.tgz#bae0dfaba588a0c60d7834c0d8dc2ff60eeef2fe"
@@ -7938,7 +7977,7 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
 
-invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
+invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -8210,7 +8249,7 @@ is-number@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
 
-is-obj@^1.0.0, is-obj@^1.0.1:
+is-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
@@ -8218,12 +8257,6 @@ is-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
 
-is-observable@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-1.1.0.tgz#b3e986c8f44de950867cab5403f5a3465005975e"
-  dependencies:
-    symbol-observable "^1.1.0"
-
 is-odd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-2.0.0.tgz#7646624671fd7ea558ccd9a2795182f2958f1b24"
@@ -8470,7 +8503,7 @@ issue-parser@^2.2.0:
     lodash.isplainobject "^4.0.6"
     lodash.isstring "^4.0.1"
 
-istanbul-api@1.3.1, istanbul-api@^1.1.14:
+istanbul-api@1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.1.tgz#4c3b05d18c0016d1022e079b98dc82c40f488954"
   dependencies:
@@ -8487,17 +8520,43 @@ istanbul-api@1.3.1, istanbul-api@^1.1.14:
     mkdirp "^0.5.1"
     once "^1.4.0"
 
-istanbul-lib-coverage@^1.1.1, istanbul-lib-coverage@^1.1.2, istanbul-lib-coverage@^1.2.0:
+istanbul-api@^1.3.1:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.7.tgz#a86c770d2b03e11e3f778cd7aedd82d2722092aa"
+  dependencies:
+    async "^2.1.4"
+    fileset "^2.0.2"
+    istanbul-lib-coverage "^1.2.1"
+    istanbul-lib-hook "^1.2.2"
+    istanbul-lib-instrument "^1.10.2"
+    istanbul-lib-report "^1.1.5"
+    istanbul-lib-source-maps "^1.2.6"
+    istanbul-reports "^1.5.1"
+    js-yaml "^3.7.0"
+    mkdirp "^0.5.1"
+    once "^1.4.0"
+
+istanbul-lib-coverage@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.0.tgz#f7d8f2e42b97e37fe796114cb0f9d68b5e3a4341"
 
+istanbul-lib-coverage@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
+
 istanbul-lib-hook@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.0.tgz#ae556fd5a41a6e8efa0b1002b1e416dfeaf9816c"
   dependencies:
     append-transform "^0.4.0"
 
-istanbul-lib-instrument@^1.10.1, istanbul-lib-instrument@^1.8.0:
+istanbul-lib-hook@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.2.tgz#bc6bf07f12a641fbf1c85391d0daa8f0aea6bf86"
+  dependencies:
+    append-transform "^0.4.0"
+
+istanbul-lib-instrument@^1.10.1:
   version "1.10.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.1.tgz#724b4b6caceba8692d3f1f9d0727e279c401af7b"
   dependencies:
@@ -8509,6 +8568,18 @@ istanbul-lib-instrument@^1.10.1, istanbul-lib-instrument@^1.8.0:
     istanbul-lib-coverage "^1.2.0"
     semver "^5.3.0"
 
+istanbul-lib-instrument@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.2.1"
+    semver "^5.3.0"
+
 istanbul-lib-report@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.4.tgz#e886cdf505c4ebbd8e099e4396a90d0a28e2acb5"
@@ -8518,15 +8589,14 @@ istanbul-lib-report@^1.1.4:
     path-parse "^1.0.5"
     supports-color "^3.1.2"
 
-istanbul-lib-source-maps@^1.2.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.3.tgz#20fb54b14e14b3fb6edb6aca3571fd2143db44e6"
+istanbul-lib-report@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.5.tgz#f2a657fc6282f96170aaf281eb30a458f7f4170c"
   dependencies:
-    debug "^3.1.0"
-    istanbul-lib-coverage "^1.1.2"
+    istanbul-lib-coverage "^1.2.1"
     mkdirp "^0.5.1"
-    rimraf "^2.6.1"
-    source-map "^0.5.3"
+    path-parse "^1.0.5"
+    supports-color "^3.1.2"
 
 istanbul-lib-source-maps@^1.2.4:
   version "1.2.4"
@@ -8538,12 +8608,28 @@ istanbul-lib-source-maps@^1.2.4:
     rimraf "^2.6.1"
     source-map "^0.5.3"
 
+istanbul-lib-source-maps@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.6.tgz#37b9ff661580f8fca11232752ee42e08c6675d8f"
+  dependencies:
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.2.1"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.1"
+    source-map "^0.5.3"
+
 istanbul-reports@1.3.0, istanbul-reports@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.3.0.tgz#2f322e81e1d9520767597dca3c20a0cce89a3554"
   dependencies:
     handlebars "^4.0.3"
 
+istanbul-reports@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.5.1.tgz#97e4dbf3b515e8c484caea15d6524eebd3ff4e1a"
+  dependencies:
+    handlebars "^4.0.3"
+
 isurl@^1.0.0-alpha5:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
@@ -8563,15 +8649,15 @@ java-properties@^0.2.9:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-0.2.10.tgz#2551560c25fa1ad94d998218178f233ad9b18f60"
 
-jest-changed-files@^22.2.0:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.4.3.tgz#8882181e022c38bd46a2e4d18d44d19d90a90fb2"
+jest-changed-files@^23.4.2:
+  version "23.4.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-23.4.2.tgz#1eed688370cd5eebafe4ae93d34bb3b64968fe83"
   dependencies:
     throat "^4.0.0"
 
-jest-cli@^22.4.3, jest-cli@^22.4.4:
-  version "22.4.4"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-22.4.4.tgz#68cd2a2aae983adb1e6638248ca21082fd6d9e90"
+jest-cli@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-23.6.0.tgz#61ab917744338f443ef2baa282ddffdd658a5da4"
   dependencies:
     ansi-escapes "^3.0.0"
     chalk "^2.0.1"
@@ -8580,133 +8666,147 @@ jest-cli@^22.4.3, jest-cli@^22.4.4:
     graceful-fs "^4.1.11"
     import-local "^1.0.0"
     is-ci "^1.0.10"
-    istanbul-api "^1.1.14"
-    istanbul-lib-coverage "^1.1.1"
-    istanbul-lib-instrument "^1.8.0"
-    istanbul-lib-source-maps "^1.2.1"
-    jest-changed-files "^22.2.0"
-    jest-config "^22.4.4"
-    jest-environment-jsdom "^22.4.1"
+    istanbul-api "^1.3.1"
+    istanbul-lib-coverage "^1.2.0"
+    istanbul-lib-instrument "^1.10.1"
+    istanbul-lib-source-maps "^1.2.4"
+    jest-changed-files "^23.4.2"
+    jest-config "^23.6.0"
+    jest-environment-jsdom "^23.4.0"
     jest-get-type "^22.1.0"
-    jest-haste-map "^22.4.2"
-    jest-message-util "^22.4.0"
-    jest-regex-util "^22.1.0"
-    jest-resolve-dependencies "^22.1.0"
-    jest-runner "^22.4.4"
-    jest-runtime "^22.4.4"
-    jest-snapshot "^22.4.0"
-    jest-util "^22.4.1"
-    jest-validate "^22.4.4"
-    jest-worker "^22.2.2"
+    jest-haste-map "^23.6.0"
+    jest-message-util "^23.4.0"
+    jest-regex-util "^23.3.0"
+    jest-resolve-dependencies "^23.6.0"
+    jest-runner "^23.6.0"
+    jest-runtime "^23.6.0"
+    jest-snapshot "^23.6.0"
+    jest-util "^23.4.0"
+    jest-validate "^23.6.0"
+    jest-watcher "^23.4.0"
+    jest-worker "^23.2.0"
     micromatch "^2.3.11"
     node-notifier "^5.2.1"
+    prompts "^0.1.9"
     realpath-native "^1.0.0"
     rimraf "^2.5.4"
     slash "^1.0.0"
     string-length "^2.0.0"
     strip-ansi "^4.0.0"
     which "^1.2.12"
-    yargs "^10.0.3"
+    yargs "^11.0.0"
 
-jest-config@^22.4.4:
-  version "22.4.4"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-22.4.4.tgz#72a521188720597169cd8b4ff86934ef5752d86a"
+jest-config@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-23.6.0.tgz#f82546a90ade2d8c7026fbf6ac5207fc22f8eb1d"
   dependencies:
+    babel-core "^6.0.0"
+    babel-jest "^23.6.0"
     chalk "^2.0.1"
     glob "^7.1.1"
-    jest-environment-jsdom "^22.4.1"
-    jest-environment-node "^22.4.1"
+    jest-environment-jsdom "^23.4.0"
+    jest-environment-node "^23.4.0"
     jest-get-type "^22.1.0"
-    jest-jasmine2 "^22.4.4"
-    jest-regex-util "^22.1.0"
-    jest-resolve "^22.4.2"
-    jest-util "^22.4.1"
-    jest-validate "^22.4.4"
-    pretty-format "^22.4.0"
-
-jest-diff@^22.4.0, jest-diff@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-22.4.3.tgz#e18cc3feff0aeef159d02310f2686d4065378030"
+    jest-jasmine2 "^23.6.0"
+    jest-regex-util "^23.3.0"
+    jest-resolve "^23.6.0"
+    jest-util "^23.4.0"
+    jest-validate "^23.6.0"
+    micromatch "^2.3.11"
+    pretty-format "^23.6.0"
+
+jest-diff@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"
   dependencies:
     chalk "^2.0.1"
     diff "^3.2.0"
-    jest-get-type "^22.4.3"
-    pretty-format "^22.4.3"
+    jest-get-type "^22.1.0"
+    pretty-format "^23.6.0"
 
 jest-docblock@^21.0.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
 
-jest-docblock@^22.4.0, jest-docblock@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-22.4.3.tgz#50886f132b42b280c903c592373bb6e93bb68b19"
+jest-docblock@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-23.2.0.tgz#f085e1f18548d99fdd69b20207e6fd55d91383a7"
   dependencies:
     detect-newline "^2.1.0"
 
-jest-environment-jsdom@^22.4.1:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-22.4.3.tgz#d67daa4155e33516aecdd35afd82d4abf0fa8a1e"
+jest-each@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-23.6.0.tgz#ba0c3a82a8054387016139c733a05242d3d71575"
+  dependencies:
+    chalk "^2.0.1"
+    pretty-format "^23.6.0"
+
+jest-environment-jsdom@^23.4.0:
+  version "23.4.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz#056a7952b3fea513ac62a140a2c368c79d9e6023"
   dependencies:
-    jest-mock "^22.4.3"
-    jest-util "^22.4.3"
+    jest-mock "^23.2.0"
+    jest-util "^23.4.0"
     jsdom "^11.5.1"
 
-jest-environment-node@^22.4.1:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-22.4.3.tgz#54c4eaa374c83dd52a9da8759be14ebe1d0b9129"
+jest-environment-node@^23.4.0:
+  version "23.4.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-23.4.0.tgz#57e80ed0841dea303167cce8cd79521debafde10"
   dependencies:
-    jest-mock "^22.4.3"
-    jest-util "^22.4.3"
+    jest-mock "^23.2.0"
+    jest-util "^23.4.0"
 
-jest-get-type@^22.1.0, jest-get-type@^22.4.3:
+jest-get-type@^22.1.0:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
 
-jest-haste-map@^22.4.2:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-22.4.3.tgz#25842fa2ba350200767ac27f658d58b9d5c2e20b"
+jest-haste-map@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-23.6.0.tgz#2e3eb997814ca696d62afdb3f2529f5bbc935e16"
   dependencies:
     fb-watchman "^2.0.0"
     graceful-fs "^4.1.11"
-    jest-docblock "^22.4.3"
-    jest-serializer "^22.4.3"
-    jest-worker "^22.4.3"
+    invariant "^2.2.4"
+    jest-docblock "^23.2.0"
+    jest-serializer "^23.0.1"
+    jest-worker "^23.2.0"
     micromatch "^2.3.11"
     sane "^2.0.0"
 
-jest-jasmine2@^22.4.4:
-  version "22.4.4"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-22.4.4.tgz#c55f92c961a141f693f869f5f081a79a10d24e23"
+jest-jasmine2@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-23.6.0.tgz#840e937f848a6c8638df24360ab869cc718592e0"
   dependencies:
+    babel-traverse "^6.0.0"
     chalk "^2.0.1"
     co "^4.6.0"
-    expect "^22.4.0"
-    graceful-fs "^4.1.11"
+    expect "^23.6.0"
     is-generator-fn "^1.0.0"
-    jest-diff "^22.4.0"
-    jest-matcher-utils "^22.4.0"
-    jest-message-util "^22.4.0"
-    jest-snapshot "^22.4.0"
-    jest-util "^22.4.1"
-    source-map-support "^0.5.0"
-
-jest-leak-detector@^22.4.0:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-22.4.3.tgz#2b7b263103afae8c52b6b91241a2de40117e5b35"
+    jest-diff "^23.6.0"
+    jest-each "^23.6.0"
+    jest-matcher-utils "^23.6.0"
+    jest-message-util "^23.4.0"
+    jest-snapshot "^23.6.0"
+    jest-util "^23.4.0"
+    pretty-format "^23.6.0"
+
+jest-leak-detector@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-23.6.0.tgz#e4230fd42cf381a1a1971237ad56897de7e171de"
   dependencies:
-    pretty-format "^22.4.3"
+    pretty-format "^23.6.0"
 
-jest-matcher-utils@^22.4.0, jest-matcher-utils@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-22.4.3.tgz#4632fe428ebc73ebc194d3c7b65d37b161f710ff"
+jest-matcher-utils@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-23.6.0.tgz#726bcea0c5294261a7417afb6da3186b4b8cac80"
   dependencies:
     chalk "^2.0.1"
-    jest-get-type "^22.4.3"
-    pretty-format "^22.4.3"
+    jest-get-type "^22.1.0"
+    pretty-format "^23.6.0"
 
-jest-message-util@^22.4.0, jest-message-util@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-22.4.3.tgz#cf3d38aafe4befddbfc455e57d65d5239e399eb7"
+jest-message-util@^23.4.0:
+  version "23.4.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.4.0.tgz#17610c50942349508d01a3d1e0bda2c079086a9f"
   dependencies:
     "@babel/code-frame" "^7.0.0-beta.35"
     chalk "^2.0.1"
@@ -8714,117 +8814,134 @@ jest-message-util@^22.4.0, jest-message-util@^22.4.3:
     slash "^1.0.0"
     stack-utils "^1.0.1"
 
-jest-mock@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-22.4.3.tgz#f63ba2f07a1511772cdc7979733397df770aabc7"
+jest-mock@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-23.2.0.tgz#ad1c60f29e8719d47c26e1138098b6d18b261134"
 
-jest-regex-util@^22.1.0, jest-regex-util@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-22.4.3.tgz#a826eb191cdf22502198c5401a1fc04de9cef5af"
+jest-regex-util@^23.3.0:
+  version "23.3.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-23.3.0.tgz#5f86729547c2785c4002ceaa8f849fe8ca471bc5"
 
-jest-resolve-dependencies@^22.1.0:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-22.4.3.tgz#e2256a5a846732dc3969cb72f3c9ad7725a8195e"
+jest-resolve-dependencies@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-23.6.0.tgz#b4526af24c8540d9a3fab102c15081cf509b723d"
   dependencies:
-    jest-regex-util "^22.4.3"
+    jest-regex-util "^23.3.0"
+    jest-snapshot "^23.6.0"
 
-jest-resolve@^22.4.2:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-22.4.3.tgz#0ce9d438c8438229aa9b916968ec6b05c1abb4ea"
+jest-resolve@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-23.6.0.tgz#cf1d1a24ce7ee7b23d661c33ba2150f3aebfa0ae"
   dependencies:
-    browser-resolve "^1.11.2"
+    browser-resolve "^1.11.3"
     chalk "^2.0.1"
+    realpath-native "^1.0.0"
 
-jest-runner@^22.4.4:
-  version "22.4.4"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-22.4.4.tgz#dfca7b7553e0fa617e7b1291aeb7ce83e540a907"
+jest-runner@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-23.6.0.tgz#3894bd219ffc3f3cb94dc48a4170a2e6f23a5a38"
   dependencies:
     exit "^0.1.2"
-    jest-config "^22.4.4"
-    jest-docblock "^22.4.0"
-    jest-haste-map "^22.4.2"
-    jest-jasmine2 "^22.4.4"
-    jest-leak-detector "^22.4.0"
-    jest-message-util "^22.4.0"
-    jest-runtime "^22.4.4"
-    jest-util "^22.4.1"
-    jest-worker "^22.2.2"
+    graceful-fs "^4.1.11"
+    jest-config "^23.6.0"
+    jest-docblock "^23.2.0"
+    jest-haste-map "^23.6.0"
+    jest-jasmine2 "^23.6.0"
+    jest-leak-detector "^23.6.0"
+    jest-message-util "^23.4.0"
+    jest-runtime "^23.6.0"
+    jest-util "^23.4.0"
+    jest-worker "^23.2.0"
+    source-map-support "^0.5.6"
     throat "^4.0.0"
 
-jest-runtime@^22.4.4:
-  version "22.4.4"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-22.4.4.tgz#9ba7792fc75582a5be0f79af6f8fe8adea314048"
+jest-runtime@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-23.6.0.tgz#059e58c8ab445917cd0e0d84ac2ba68de8f23082"
   dependencies:
     babel-core "^6.0.0"
-    babel-jest "^22.4.4"
-    babel-plugin-istanbul "^4.1.5"
+    babel-plugin-istanbul "^4.1.6"
     chalk "^2.0.1"
     convert-source-map "^1.4.0"
     exit "^0.1.2"
+    fast-json-stable-stringify "^2.0.0"
     graceful-fs "^4.1.11"
-    jest-config "^22.4.4"
-    jest-haste-map "^22.4.2"
-    jest-regex-util "^22.1.0"
-    jest-resolve "^22.4.2"
-    jest-util "^22.4.1"
-    jest-validate "^22.4.4"
-    json-stable-stringify "^1.0.1"
+    jest-config "^23.6.0"
+    jest-haste-map "^23.6.0"
+    jest-message-util "^23.4.0"
+    jest-regex-util "^23.3.0"
+    jest-resolve "^23.6.0"
+    jest-snapshot "^23.6.0"
+    jest-util "^23.4.0"
+    jest-validate "^23.6.0"
     micromatch "^2.3.11"
     realpath-native "^1.0.0"
     slash "^1.0.0"
     strip-bom "3.0.0"
     write-file-atomic "^2.1.0"
-    yargs "^10.0.3"
+    yargs "^11.0.0"
 
-jest-serializer@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-22.4.3.tgz#a679b81a7f111e4766235f4f0c46d230ee0f7436"
+jest-serializer@^23.0.1:
+  version "23.0.1"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-23.0.1.tgz#a3776aeb311e90fe83fab9e533e85102bd164165"
 
-jest-snapshot@^22.4.0:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-22.4.3.tgz#b5c9b42846ffb9faccb76b841315ba67887362d2"
+jest-snapshot@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.6.0.tgz#f9c2625d1b18acda01ec2d2b826c0ce58a5aa17a"
   dependencies:
+    babel-types "^6.0.0"
     chalk "^2.0.1"
-    jest-diff "^22.4.3"
-    jest-matcher-utils "^22.4.3"
+    jest-diff "^23.6.0"
+    jest-matcher-utils "^23.6.0"
+    jest-message-util "^23.4.0"
+    jest-resolve "^23.6.0"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    pretty-format "^22.4.3"
+    pretty-format "^23.6.0"
+    semver "^5.5.0"
 
-jest-util@^22.4.1, jest-util@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-22.4.3.tgz#c70fec8eec487c37b10b0809dc064a7ecf6aafac"
+jest-util@^23.4.0:
+  version "23.4.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-23.4.0.tgz#4d063cb927baf0a23831ff61bec2cbbf49793561"
   dependencies:
     callsites "^2.0.0"
     chalk "^2.0.1"
     graceful-fs "^4.1.11"
     is-ci "^1.0.10"
-    jest-message-util "^22.4.3"
+    jest-message-util "^23.4.0"
     mkdirp "^0.5.1"
+    slash "^1.0.0"
     source-map "^0.6.0"
 
-jest-validate@^22.4.0, jest-validate@^22.4.4:
-  version "22.4.4"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-22.4.4.tgz#1dd0b616ef46c995de61810d85f57119dbbcec4d"
+jest-validate@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-23.6.0.tgz#36761f99d1ed33fcd425b4e4c5595d62b6597474"
   dependencies:
     chalk "^2.0.1"
-    jest-config "^22.4.4"
     jest-get-type "^22.1.0"
     leven "^2.1.0"
-    pretty-format "^22.4.0"
+    pretty-format "^23.6.0"
 
-jest-worker@^22.2.2, jest-worker@^22.4.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.4.3.tgz#5c421417cba1c0abf64bf56bd5fb7968d79dd40b"
+jest-watcher@^23.4.0:
+  version "23.4.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-23.4.0.tgz#d2e28ce74f8dad6c6afc922b92cabef6ed05c91c"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    string-length "^2.0.0"
+
+jest-worker@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-23.2.0.tgz#faf706a8da36fae60eb26957257fa7b5d8ea02b9"
   dependencies:
     merge-stream "^1.0.1"
 
-jest@^22.4.3:
-  version "22.4.4"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-22.4.4.tgz#ffb36c9654b339a13e10b3d4b338eb3e9d49f6eb"
+jest@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-23.6.0.tgz#ad5835e923ebf6e19e7a1d7529a432edfee7813d"
   dependencies:
     import-local "^1.0.0"
-    jest-cli "^22.4.4"
+    jest-cli "^23.6.0"
 
 joi@12.x.x:
   version "12.0.0"
@@ -8973,12 +9090,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
 
-json-stable-stringify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
-  dependencies:
-    jsonify "~0.0.0"
-
 json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
@@ -9135,6 +9246,10 @@ klaw@^1.0.0:
   optionalDependencies:
     graceful-fs "^4.1.9"
 
+kleur@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-2.0.2.tgz#b704f4944d95e255d038f0cb05fb8a602c55a300"
+
 known-css-properties@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.5.0.tgz#6ff66943ed4a5b55657ee095779a91f4536f8084"
@@ -9328,81 +9443,6 @@ linked-list@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/linked-list/-/linked-list-0.1.0.tgz#798b0ff97d1b92a4fd08480f55aea4e9d49d37bf"
 
-lint-staged@^7.0.4:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-7.1.2.tgz#140b13519a0f9c1f227f4a8b7e1321852aeea860"
-  dependencies:
-    app-root-path "^2.0.1"
-    chalk "^2.3.1"
-    commander "^2.14.1"
-    cosmiconfig "^5.0.2"
-    debug "^3.1.0"
-    dedent "^0.7.0"
-    execa "^0.9.0"
-    find-parent-dir "^0.3.0"
-    is-glob "^4.0.0"
-    is-windows "^1.0.2"
-    jest-validate "^22.4.0"
-    listr "^0.14.1"
-    lodash "^4.17.5"
-    log-symbols "^2.2.0"
-    micromatch "^3.1.8"
-    npm-which "^3.0.1"
-    p-map "^1.1.1"
-    path-is-inside "^1.0.2"
-    pify "^3.0.0"
-    please-upgrade-node "^3.0.2"
-    staged-git-files "1.1.1"
-    string-argv "^0.0.2"
-    stringify-object "^3.2.2"
-
-listr-silent-renderer@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
-
-listr-update-renderer@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.4.0.tgz#344d980da2ca2e8b145ba305908f32ae3f4cc8a7"
-  dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    elegant-spinner "^1.0.1"
-    figures "^1.7.0"
-    indent-string "^3.0.0"
-    log-symbols "^1.0.2"
-    log-update "^1.0.2"
-    strip-ansi "^3.0.1"
-
-listr-verbose-renderer@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#8206f4cf6d52ddc5827e5fd14989e0e965933a35"
-  dependencies:
-    chalk "^1.1.3"
-    cli-cursor "^1.0.2"
-    date-fns "^1.27.2"
-    figures "^1.7.0"
-
-listr@^0.14.1:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.1.tgz#8a7afa4a7135cee4c921d128e0b7dfc6e522d43d"
-  dependencies:
-    "@samverschueren/stream-to-observable" "^0.3.0"
-    cli-truncate "^0.2.1"
-    figures "^1.7.0"
-    indent-string "^2.1.0"
-    is-observable "^1.1.0"
-    is-promise "^2.1.0"
-    is-stream "^1.1.0"
-    listr-silent-renderer "^1.1.1"
-    listr-update-renderer "^0.4.0"
-    listr-verbose-renderer "^0.4.0"
-    log-symbols "^1.0.2"
-    log-update "^1.0.2"
-    ora "^0.2.3"
-    p-map "^1.1.1"
-    rxjs "^6.1.0"
-    strip-ansi "^3.0.1"
-
 load-json-file@^1.0.0, load-json-file@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -9724,19 +9764,12 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
-log-symbols@^2.0.0, log-symbols@^2.2.0:
+log-symbols@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
   dependencies:
     chalk "^2.0.1"
 
-log-update@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
-  dependencies:
-    ansi-escapes "^1.0.0"
-    cli-cursor "^1.0.2"
-
 loglevel-colored-level-prefix@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz#6a40218fdc7ae15fc76c3d0f3e676c465388603e"
@@ -9818,6 +9851,12 @@ ltcdr@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ltcdr/-/ltcdr-2.2.1.tgz#5ab87ad1d4c1dab8e8c08bbf037ee0c1902287cf"
 
+magic-string@^0.22.4:
+  version "0.22.5"
+  resolved "http://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
+  dependencies:
+    vlq "^0.2.2"
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -10703,12 +10742,6 @@ npm-packlist@^1.1.6:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
 
-npm-path@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.4.tgz#c641347a5ff9d6a09e4d9bce5580c4f505278e64"
-  dependencies:
-    which "^1.2.10"
-
 npm-registry-client@^7.0.1:
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/npm-registry-client/-/npm-registry-client-7.5.0.tgz#0f6dd6e5d11424cfa99fce5b930feaf09b4f7f04"
@@ -10731,14 +10764,6 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-which@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/npm-which/-/npm-which-3.0.1.tgz#9225f26ec3a285c209cae67c3b11a6b4ab7140aa"
-  dependencies:
-    commander "^2.9.0"
-    npm-path "^2.0.2"
-    which "^1.2.10"
-
 npmconf@^2.1.2, npmconf@~2.1.0:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/npmconf/-/npmconf-2.1.3.tgz#1cbe5dd02e899d365fed7260b54055473f90a15c"
@@ -10878,6 +10903,15 @@ object.entries@^1.0.4:
     function-bind "^1.1.0"
     has "^1.0.1"
 
+object.fromentries@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-1.0.0.tgz#e90ec27445ec6e37f48be9af9077d9aa8bef0d40"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.11.0"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -11012,15 +11046,6 @@ optionator@^0.8.1, optionator@^0.8.2:
     type-check "~0.3.2"
     wordwrap "~1.0.0"
 
-ora@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4"
-  dependencies:
-    chalk "^1.1.1"
-    cli-cursor "^1.0.2"
-    cli-spinners "^0.1.2"
-    object-assign "^4.0.1"
-
 original@>=0.0.5:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.1.tgz#b0a53ff42ba997a8c9cd1fb5daaeb42b9d693190"
@@ -11545,12 +11570,6 @@ pkginfo@0.3.x:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.3.1.tgz#5b29f6a81f70717142e09e765bbeab97b4f81e21"
 
-please-upgrade-node@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.0.2.tgz#7b9eaeca35aa4a43d6ebdfd10616c042f9a83acc"
-  dependencies:
-    semver-compare "^1.0.0"
-
 pleeease-filters@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/pleeease-filters/-/pleeease-filters-3.0.1.tgz#4dfe0e8f1046613517c64b728bc80608a7ebf22f"
@@ -12246,13 +12265,26 @@ pretty-error@^2.0.2, pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^22.0.3, pretty-format@^22.4.0, pretty-format@^22.4.3:
+pretty-format@^22.0.3:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.4.3.tgz#f873d780839a9c02e9664c8a082e9ee79eaac16f"
   dependencies:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
+  dependencies:
+    ansi-regex "^3.0.0"
+    ansi-styles "^3.2.0"
+
+prismjs@1.6:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365"
+  optionalDependencies:
+    clipboard "^1.5.5"
+
 prismjs@^1.8.4, prismjs@~1.14.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0"
@@ -12307,6 +12339,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prompts@^0.1.9:
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2"
+  dependencies:
+    kleur "^2.0.1"
+    sisteransi "^0.1.1"
+
 prop-types-extra@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.0.tgz#32609910ea2dcf190366bacd3490d5a6412a605f"
@@ -12790,6 +12829,17 @@ react-lifecycles-compat@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
+react-live@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-live/-/react-live-1.11.0.tgz#257b54abb64df250bc40b0572c21acd600ecdd5c"
+  dependencies:
+    buble "^0.19.3"
+    core-js "^2.4.1"
+    dom-iterator "^1.0.0"
+    prismjs "1.6"
+    prop-types "^15.5.8"
+    unescape "^0.2.0"
+
 react-modal@^3.3.2:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.4.4.tgz#e9dde25e9e85a59c76831f2a2b468712a546aded"
@@ -13229,6 +13279,10 @@ regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
+regenerator-runtime@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -13250,6 +13304,12 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
+  dependencies:
+    define-properties "^1.1.2"
+
 regexpp@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
@@ -13779,12 +13839,6 @@ rxjs@^5.5.2:
   dependencies:
     symbol-observable "1.0.1"
 
-rxjs@^6.1.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.2.0.tgz#e024d0e180b72756a83c2aaea8f25423751ba978"
-  dependencies:
-    tslib "^1.9.0"
-
 safe-buffer@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -13970,10 +14024,6 @@ semantic-release@^6.3.1, semantic-release@^6.3.6:
     run-series "^1.1.3"
     semver "^5.2.0"
 
-semver-compare@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
-
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -13996,10 +14046,6 @@ semver@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.1.1.tgz#a3292a373e6f3e0798da0b20641b9a9c5bc47e19"
 
-semver@5.3.0, semver@~5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
-
 semver@5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
@@ -14008,6 +14054,10 @@ semver@~5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
 
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
 send@0.16.2:
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
@@ -14254,14 +14304,14 @@ sinon@~1.17.0:
     samsam "1.1.2"
     util ">=0.10.3 <1"
 
+sisteransi@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-0.1.1.tgz#5431447d5f7d1675aac667ccd0b865a4994cb3ce"
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
 
-slice-ansi@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
-
 slice-ansi@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
@@ -14440,9 +14490,9 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.0:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.6.tgz#4435cee46b1aab62b8e8610ce60f788091c51c13"
+source-map-support@^0.5.6:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.9.tgz#41bc953b2534267ea2d605bccfa7bfa3111ced5f"
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -14614,10 +14664,6 @@ stackframe@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"
 
-staged-git-files@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-1.1.1.tgz#37c2218ef0d6d26178b1310719309a16a59f8f7b"
-
 state-toggle@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.1.tgz#c3cb0974f40a6a0f8e905b96789eb41afa1cde3a"
@@ -14716,10 +14762,6 @@ strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
-string-argv@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.0.2.tgz#dac30408690c21f3c3630a3ff3a05877bdcbd736"
-
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -14748,6 +14790,16 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string.prototype.matchall@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-3.0.0.tgz#66f4d8dd5c6c6cea4dffb55ec5f3184a8dd0dd59"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    regexp.prototype.flags "^1.2.0"
+
 string.prototype.padend@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.0.0.tgz#f3aaef7c1719f170c5eab1c32bf780d96e21f2f0"
@@ -14783,14 +14835,6 @@ stringify-entities@^1.0.1:
     is-alphanumerical "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-stringify-object@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.2.2.tgz#9853052e5a88fb605a44cd27445aa257ad7ffbcd"
-  dependencies:
-    get-own-enumerable-property-symbols "^2.0.1"
-    is-obj "^1.0.1"
-    is-regexp "^1.0.0"
-
 stringstream@~0.0.4:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
@@ -15003,7 +15047,7 @@ symbol-observable@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
 
-symbol-observable@^1.0.2, symbol-observable@^1.0.3, symbol-observable@^1.0.4, symbol-observable@^1.1.0:
+symbol-observable@^1.0.2, symbol-observable@^1.0.3, symbol-observable@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
 
@@ -15316,6 +15360,12 @@ touch@^1.0.0:
   dependencies:
     nopt "~1.0.10"
 
+touch@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164"
+  dependencies:
+    nopt "~1.0.10"
+
 tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
@@ -15415,7 +15465,7 @@ trough@^1.0.0:
   dependencies:
     glob "^6.0.4"
 
-tslib@^1.6.0, tslib@^1.9.0:
+tslib@^1.6.0:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.2.tgz#8be0cc9a1f6dc7727c38deb16c2ebd1a2892988e"
 
@@ -15564,6 +15614,10 @@ underscore@~1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
 
+unescape@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/unescape/-/unescape-0.2.0.tgz#b78b9b60c86f1629df181bf53eee3bc8d6367ddf"
+
 unherit@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.1.tgz#132748da3e88eab767e08fabfbb89c5e9d28628c"
@@ -15891,6 +15945,14 @@ viewport-dimensions@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/viewport-dimensions/-/viewport-dimensions-0.2.0.tgz#de740747db5387fd1725f5175e91bac76afdf36c"
 
+vlq@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+
+vlq@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.0.tgz#8101be90843422954c2b13eb27f2f3122bdcc806"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@@ -16157,7 +16219,7 @@ which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which@1, which@^1.0.9, which@^1.1.1, which@^1.2.10, which@^1.2.12, which@^1.2.14, which@^1.2.9, which@^1.3.0:
+which@1, which@^1.0.9, which@^1.1.1, which@^1.2.12, which@^1.2.14, which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   dependencies:
@@ -16386,12 +16448,6 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs-parser@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.1.0.tgz#f1376a33b6629a5d063782944da732631e966950"
-  dependencies:
-    camelcase "^4.1.0"
-
 yargs-parser@^9.0.2:
   version "9.0.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
@@ -16416,23 +16472,6 @@ yargs@4.7.1:
     y18n "^3.2.1"
     yargs-parser "^2.4.0"
 
-yargs@^10.0.3:
-  version "10.1.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.2.tgz#454d074c2b16a51a43e2fb7807e4f9de69ccb5c5"
-  dependencies:
-    cliui "^4.0.0"
-    decamelize "^1.1.1"
-    find-up "^2.1.0"
-    get-caller-file "^1.0.1"
-    os-locale "^2.0.0"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^2.0.0"
-    which-module "^2.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^8.1.0"
-
 yargs@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b"

From 9b17fb3283f68c29c5cb50ea4c44fa9c1f38b772 Mon Sep 17 00:00:00 2001
From: Joachim Schuler <jschuler@redhat.com>
Date: Fri, 28 Sep 2018 20:44:39 -0400
Subject: [PATCH 2/2] add enzyme patch for context

---
 package.json                                  |  1 +
 .../react-core/src/components/Nav/Nav.test.js | 35 +++++++++++++------
 yarn.lock                                     |  4 +++
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 35a23c21d36..cc0ada4b68b 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "cz-lerna-changelog": "^1.2.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-context-patch": "^0.0.9",
     "enzyme-to-json": "^3.3.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
diff --git a/packages/patternfly-4/react-core/src/components/Nav/Nav.test.js b/packages/patternfly-4/react-core/src/components/Nav/Nav.test.js
index b4a6cc0d536..618214efd7a 100644
--- a/packages/patternfly-4/react-core/src/components/Nav/Nav.test.js
+++ b/packages/patternfly-4/react-core/src/components/Nav/Nav.test.js
@@ -19,6 +19,11 @@ beforeEach(() => {
   window.location.hash = '#link1';
 });
 
+const context = {
+  onSelect: () => undefined,
+  onToggle: () => undefined
+};
+
 test('Default Nav List', () => {
   const view = mount(
     <Nav aria-label="Test">
@@ -29,7 +34,8 @@ test('Default Nav List', () => {
           </NavItem>
         ))}
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   expect(view).toMatchSnapshot();
 });
@@ -45,7 +51,8 @@ test('Default Nav List - Trigger item active update', () => {
           </NavItem>
         ))}
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   view
     .find({ href: '#link2' })
@@ -64,7 +71,8 @@ test('Simple Nav List', () => {
           </NavItem>
         ))}
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   expect(view).toMatchSnapshot();
 });
@@ -81,7 +89,8 @@ test('Expandable Nav List', () => {
           ))}
         </NavExpandable>
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   expect(view).toMatchSnapshot();
 });
@@ -99,7 +108,8 @@ test('Expandable Nav List - Trigger toggle', () => {
           ))}
         </NavExpandable>
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   view
     .find('li.expandable-group')
@@ -120,7 +130,8 @@ test('Expandable Nav List with aria label', () => {
           ))}
         </NavExpandable>
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   expect(view).toMatchSnapshot();
 });
@@ -146,7 +157,8 @@ test('Nav Grouped List', () => {
           ))}
         </NavList>
       </NavGroup>
-    </Nav>
+    </Nav>,
+    { context }
   );
   expect(view).toMatchSnapshot();
 });
@@ -161,7 +173,8 @@ test('Horizontal Nav List', () => {
           </NavItem>
         ))}
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   expect(view).toMatchSnapshot();
 });
@@ -176,7 +189,8 @@ test('Tertiary Nav List', () => {
           </NavItem>
         ))}
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   expect(view).toMatchSnapshot();
 });
@@ -190,7 +204,8 @@ test('Nav List with custom item nodes', () => {
           <CustomNode />
         </NavItem>
       </NavList>
-    </Nav>
+    </Nav>,
+    { context }
   );
   expect(view).toMatchSnapshot();
 });
diff --git a/yarn.lock b/yarn.lock
index 6c4117600dd..b937608add3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5308,6 +5308,10 @@ enzyme-adapter-utils@^1.3.0:
     object.assign "^4.0.4"
     prop-types "^15.6.0"
 
+enzyme-context-patch@^0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/enzyme-context-patch/-/enzyme-context-patch-0.0.9.tgz#0661659148bdf0af420631930f9e488ce2ba224f"
+
 enzyme-to-json@^3.3.3:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz#67c6040e931182f183418af2eb9f4323258aa77f"