feat(all): upgrade to react@v16.8 and styled-components@v4 (#342)

BREAKING CHANGE

All packages now require the following peer dependencies:

```
react@^16.8
react-dom@^16.8
styled-components@^4.2
```

Author: Austin Green

README.md

@@ -34,7 +34,6 @@ to install.
 | [`@zendeskgarden/react-tabs`](packages/tabs)                   | [![npm version][tabs npm version]][tabs npm link]                   | [![Dependency Status][tabs dependency status]][tabs dependency link]                   |
 | [`@zendeskgarden/react-tables`](packages/tables)               | [![npm version][tables npm version]][tables npm link]               | [![Dependency Status][tables dependency status]][tables dependency link]               |
 | [`@zendeskgarden/react-tags`](packages/tags)                   | [![npm version][tags npm version]][tags npm link]                   | [![Dependency Status][tags dependency status]][tags dependency link]                   |
-| [`@zendeskgarden/react-testing`](packages/testing)             | [![npm version][testing npm version]][testing npm link]             | [![Dependency Status][testing dependency status]][testing dependency link]             |
 | [`@zendeskgarden/react-theming`](packages/theming)             | [![npm version][theming npm version]][theming npm link]             | [![Dependency Status][theming dependency status]][theming dependency link]             |
 | [`@zendeskgarden/react-tooltips`](packages/tooltips)           | [![npm version][tooltips npm version]][tooltips npm link]           | [![Dependency Status][tooltips dependency status]][tooltips dependency link]           |
 | [`@zendeskgarden/react-typography`](packages/typography)       | [![npm version][typography npm version]][typography npm link]       | [![Dependency Status][typography dependency status]][typography dependency link]       |
@@ -108,10 +107,6 @@ to install.
 [tags npm link]: https://www.npmjs.com/package/@zendeskgarden/react-tags
 [tags dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/tags&style=flat-square
 [tags dependency link]: https://david-dm.org/zendeskgarden/react-components?path=packages/tags
-[testing npm version]: https://img.shields.io/npm/v/@zendeskgarden/react-testing.svg?style=flat-square
-[testing npm link]: https://www.npmjs.com/package/@zendeskgarden/react-testing
-[testing dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/testing&style=flat-square
-[testing dependency link]: https://david-dm.org/zendeskgarden/react-components?path=packages/testing
 [theming npm version]: https://img.shields.io/npm/v/@zendeskgarden/react-theming.svg?style=flat-square
 [theming npm link]: https://www.npmjs.com/package/@zendeskgarden/react-theming
 [theming dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/theming&style=flat-square
@@ -145,7 +140,7 @@ package.
 npm install @zendeskgarden/react-buttons
 
 # Install peer dependencies
-npm install styled-components @zendeskgarden/react-theming
+npm install styled-components @zendeskgarden/react-theming prop-types
 ```
 
 ### Include global styling and `ThemeProvider`

demo/index.html

@@ -112,11 +112,11 @@ <h1 class="c-main__title">React Components</h1>
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="grid">Grid</a>
             </div>
+          </div>
+          <div class="col-xl-4 col-sm-6">
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="loaders">Loaders</a>
             </div>
-          </div>
-          <div class="col-xl-4 col-sm-6">
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="menus">Menus</a>
             </div>
@@ -141,20 +141,17 @@ <h1 class="c-main__title">React Components</h1>
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="selection">Selection</a>
             </div>
+          </div>
+          <div class="col-xl-4 col-sm-6">
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="tables">Tables</a>
             </div>
-          </div>
-          <div class="col-xl-4 col-sm-6">
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="tabs">Tabs</a>
             </div>
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="tags">Tags</a>
             </div>
-            <div class="u-mb-sm">
-              <a class="u-fg-inherit" href="testing">Testing</a>
-            </div>
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="textfields">Textfields</a>
             </div>

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
+  "private": true,
   "name": "garden-nextjs-demo",
   "version": "0.0.1",
-  "private": true,
   "scripts": {
-    "dev": "next",
     "build": "next build",
+    "dev": "next",
     "start": "next start"
   },
   "dependencies": {
     "@zeit/next-css": "^0.2.0",
-    "@zendeskgarden/css-bedrock": "^7.0.2",
+    "@zendeskgarden/css-bedrock": "^7.0.24",
     "@zendeskgarden/css-variables": "^5.0.0",
     "@zendeskgarden/react-buttons": "../../packages/buttons",
     "@zendeskgarden/react-chrome": "../../packages/chrome",
@@ -18,11 +18,11 @@
     "@zendeskgarden/react-theming": "../../packages/theming",
     "@zendeskgarden/svg-icons": "^4.4.0",
     "babel-plugin-inline-react-svg": "^0.5.3",
-    "babel-plugin-styled-components": "^1.5.1",
+    "babel-plugin-styled-components": "^1.10.0",
     "next": "^6.1.1",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "styled-components": "^3.3.3"
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "styled-components": "^4.2.0"
   }
 }