refactor(errors): use withTheme HOC to get theme from context

BREAKING CHANGE: update React peerDep to 16.8.6
pluralsight · May 30, 2019 · d00d038 · d00d038
1 parent 6124d57
commit d00d038
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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": "*",