From d00d038f0d9507800f871c1fcc15341d57366930 Mon Sep 17 00:00:00 2001
From: Dane Thurber <dane.thurber@gmail.com>
Date: Fri, 24 May 2019 13:49:55 -0600
Subject: [PATCH] refactor(errors): use withTheme HOC to get theme from context

BREAKING CHANGE: update React peerDep to 16.8.6
---
 examples/create-react-app/package.json        |  4 ++--
 packages/errors/package.json                  |  4 ++--
 packages/errors/src/react/error-page.js       | 19 ++++++++++---------
 .../errors/src/react/forbidden-error-page.js  |  2 +-
 packages/errors/src/react/heading.js          | 11 +++--------
 .../src/react/internal-server-error-page.js   |  2 +-
 .../errors/src/react/not-found-error-page.js  |  2 +-
 .../react/service-unavailable-error-page.js   |  3 +--
 .../package-template/package.json             |  2 +-
 9 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
index 278f25f358..824b3897aa 100644
--- a/examples/create-react-app/package.json
+++ b/examples/create-react-app/package.json
@@ -9,8 +9,8 @@
     "@pluralsight/ps-design-system-normalize": "^3.0.47",
     "@pluralsight/ps-design-system-text": "^10.7.16",
     "glamor": "^2.20.40",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1",
+    "react": "^16.8.6",
+    "react-dom": "16.8.6",
     "react-scripts": "2.1.1"
   },
   "scripts": {
diff --git a/packages/errors/package.json b/packages/errors/package.json
index 65699d39af..90ce4c9ae0 100644
--- a/packages/errors/package.json
+++ b/packages/errors/package.json
@@ -26,12 +26,12 @@
     "@pluralsight/ps-design-system-icon": "^12.0.1",
     "@pluralsight/ps-design-system-text": "^11.0.3",
     "@pluralsight/ps-design-system-theme": "^2.0.2",
-    "prop-types": "^15.7.0"
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "@pluralsight/ps-design-system-normalize": "^3.0.24",
     "glamor": "^2.20.0",
-    "react": ">=16.3.0 < 17.0.0"
+    "react": ">=16.8.6 < 17.0.0"
   },
   "devDependencies": {
     "@pluralsight/ps-design-system-build": "^1.9.2",
diff --git a/packages/errors/src/react/error-page.js b/packages/errors/src/react/error-page.js
index 272806f744..7173ffe8c0 100644
--- a/packages/errors/src/react/error-page.js
+++ b/packages/errors/src/react/error-page.js
@@ -4,11 +4,11 @@ import React from 'react'
 
 import Button from '@pluralsight/ps-design-system-button/react'
 import * as textVars from '@pluralsight/ps-design-system-text/vars'
-import { defaultName as themeDefaultName } from '@pluralsight/ps-design-system-theme/react'
+import { useTheme } from '@pluralsight/ps-design-system-theme/react'
 
-import css from '../css'
-import Heading from './heading'
-import icons from './icons'
+import css from '../css/index.js'
+import Heading from './heading.js'
+import icons from './icons.js'
 
 const styles = {
   page: ({ themeName }) =>
@@ -56,11 +56,15 @@ const SearchForm = props => (
     />
   </form>
 )
+SearchForm.propTypes = {
+  action: PropTypes.string
+}
 
-const ErrorPage = (props, context) => {
+const ErrorPage = props => {
+  const themeName = useTheme()
   const allProps = {
     ...props,
-    themeName: context.themeName || themeDefaultName
+    themeName
   }
   return (
     <div {...styles.page(allProps)}>
@@ -89,8 +93,5 @@ ErrorPage.propTypes = {
   iconId: PropTypes.oneOf(Object.keys(icons)),
   text: PropTypes.string
 }
-ErrorPage.contextTypes = {
-  themeName: PropTypes.string
-}
 
 export default ErrorPage
diff --git a/packages/errors/src/react/forbidden-error-page.js b/packages/errors/src/react/forbidden-error-page.js
index 7be891a977..1626b99e22 100644
--- a/packages/errors/src/react/forbidden-error-page.js
+++ b/packages/errors/src/react/forbidden-error-page.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import ErrorPage from './error-page'
+import ErrorPage from './error-page.js'
 
 const ForbiddenErrorPage = props => (
   <ErrorPage
diff --git a/packages/errors/src/react/heading.js b/packages/errors/src/react/heading.js
index bdead11355..7aa17d80ba 100644
--- a/packages/errors/src/react/heading.js
+++ b/packages/errors/src/react/heading.js
@@ -1,6 +1,5 @@
 import textCss from '@pluralsight/ps-design-system-text/css'
-import * as textVars from '@pluralsight/ps-design-system-text/vars'
-import { defaultName as themeDefaultName } from '@pluralsight/ps-design-system-theme/vars'
+import { useTheme } from '@pluralsight/ps-design-system-theme/react'
 import * as glamor from 'glamor'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -17,8 +16,8 @@ const styles = {
     )
 }
 
-const Heading = (props, context) => {
-  const themeName = context.themeName || themeDefaultName
+const Heading = props => {
+  const themeName = useTheme()
 
   return React.cloneElement(React.Children.only(props.children), {
     ...rmChildren(props),
@@ -30,8 +29,4 @@ Heading.propTypes = {
   themeName: PropTypes.string
 }
 
-Heading.contextTypes = {
-  themeName: PropTypes.string
-}
-
 export default Heading
diff --git a/packages/errors/src/react/internal-server-error-page.js b/packages/errors/src/react/internal-server-error-page.js
index c0ccf2966a..e16b3cbd75 100644
--- a/packages/errors/src/react/internal-server-error-page.js
+++ b/packages/errors/src/react/internal-server-error-page.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import ErrorPage from './error-page'
+import ErrorPage from './error-page.js'
 
 const InternalServerErrorPage = props => (
   <ErrorPage
diff --git a/packages/errors/src/react/not-found-error-page.js b/packages/errors/src/react/not-found-error-page.js
index efff3bfd55..09052f6e52 100644
--- a/packages/errors/src/react/not-found-error-page.js
+++ b/packages/errors/src/react/not-found-error-page.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import ErrorPage from './error-page'
+import ErrorPage from './error-page.js'
 
 const NotFoundErrorPage = props => (
   <ErrorPage
diff --git a/packages/errors/src/react/service-unavailable-error-page.js b/packages/errors/src/react/service-unavailable-error-page.js
index 346684702d..e1f181e0df 100644
--- a/packages/errors/src/react/service-unavailable-error-page.js
+++ b/packages/errors/src/react/service-unavailable-error-page.js
@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 
-import ErrorPage from './error-page'
+import ErrorPage from './error-page.js'
 
 const ServiceUnavailableErrorPage = props => (
   <ErrorPage
diff --git a/scripts/create-component/package-template/package.json b/scripts/create-component/package-template/package.json
index eb50a6e3ec..f59b7978d4 100644
--- a/scripts/create-component/package-template/package.json
+++ b/scripts/create-component/package-template/package.json
@@ -24,7 +24,7 @@
   "peerDependencies": {
     "@pluralsight/ps-design-system-normalize": "*",
     "glamor": "^2.x.x",
-    "react": ">=16.3.0 < 17.0.0"
+    "react": ">=16.8.6 < 17.0.0"
   },
   "devDependencies": {
     "@pluralsight/ps-design-system-build": "*",