Dependency Update January 2018

This is the regular batch update for outdated dependencies.

It includes the long awaited React version 16.8.0 (1) that finally
brings the stable Hooks API (2) as well as great performance
improvements and bug fixes!

Updated Jest's configuration since version `>=24.0.0` deprecated
`setupTestFrameworkScriptFile` in favor of the new
`setupFilesAfterEnv` (3) option.

The ESLint plugin `eslint-plugin-react` includes a lot of improvements
and bug fixes regarding the parsing of code structures for better prop
validation and display name detection. This resulted in the requirement
to implement currently missing prop types in various SFC and class
components in the project as well globally (temporally) disabling the
`react/display-name` rule to prevent warning message noise.

Gatsby and all plugins have been updated to the latest versions to
include the latest improvements and bug fixes. `gatsby-plugin manifest`
now sets the `legacy` option to `true` by default (4) to include Apple
touch icons since the assumption was wrong that iOS supports the icons
from the web manifest.

As of version 3.3 the "Inter UI" font typeface has been renamed and is
now "Inter" (5), without the "UI" part. This change has been ported to
the used inter-ui (6) package. The import has been adjusted to match the
renamed `inter.css` main file and all references to the "Inter UI" name
have been adjusted by removing "UI".

Prettier version 1.16.0 (7) comes with support for React Hooks and
features for TypeScript and HTML as well as many other improvements and
bug fixes.

React Pose includes an important fix that also animates all other
children when items are moving (8) when using the `PoseGroup` component.

>>>>>> Production Dependencies

- gatsby `2.0.75` -> `2.0.117`
- gatsby-plugin-canonical-urls `2.0.8` -> `2.0.10`
- gatsby-plugin-catch-links `2.0.9` -> `2.0.10`
- gatsby-plugin-google-gtag `1.0.8` -> `1.0.13`
- gatsby-plugin-manifest `2.0.12` -> `2.0.17`
- gatsby-plugin-netlify `2.0.6` -> `2.0.9`
- gatsby-plugin-no-sourcemaps `2.0.1` -> `2.0.2`
- gatsby-plugin-offline `2.0.20` -> `2.0.23`
- gatsby-plugin-react-helmet `3.0.5` -> `3.0.6`
- gatsby-plugin-remove-trailing-slashes `2.0.6` -> `2.0.7`
- gatsby-plugin-robots-txt `1.3.0` -> `1.4.0`
- gatsby-plugin-sitemap `2.0.3` -> `2.0.5`
- gatsby-plugin-styled-components `3.0.4` -> `3.0.5`
- gatsby-source-filesystem `2.0.12` -> `2.0.20`
- gatsby-transformer-yaml `2.1.6` -> `2.1.8`
- inter-ui `3.1.0` -> `3.3.2`
- polished `2.3.1` -> `2.3.3`
- react `16.7.0` -> `16.8.1`
- react-dom `16.7.0` -> `16.8.1`
- react-pose `4.0.4` -> `4.0.6`
- typeface-source-code-pro `0.0.54` -> `0.0.71`

>>>>>> Development Dependencies

- @babel/plugin-proposal-class-properties `7.2.3` -> `7.3.0`
- babel-jest `23.6.0` -> `24.1.0`
- babel-plugin-transform-react-remove-prop-types `0.4.21` -> `0.4.24`
- babel-preset-gatsby `0.1.6` -> `0.1.7`
- eslint `5.11.0` -> `5.13.0`
- eslint-plugin-import `2.14.0` -> `2.16.0`
- eslint-plugin-jsx-a11y `6.1.2` -> `6.2.1`
- eslint-plugin-prettier `3.0.0` -> `3.0.1`
- eslint-plugin-react `7.11.1` -> `7.12.4`
- husky `1.2.1` -> `1.3.1`
- jest `23.6.0` -> `24.1.0`
- jest-dom `3.0.0` -> `3.0.2`
- jest-junit `5.2.0` -> `6.2.1`
- lint-staged `8.1.0` -> `8.1.3`
- prettier `1.15.3` -> `1.16.4`
- react-testing-library `5.4.2` -> `5.5.3`

References:
  (1) https://reactjs.org/blog/2019/02/06/react-v16.8.0.html
  (2) https://reactjs.org/docs/hooks-intro.html
  (3) jestjs/jest#7119
  (4) gatsbyjs/gatsby#11203
  (5) https://github.com/rsms/inter/releases/tag/v3.3
  (6) https://www.npmjs.com/package/inter-ui
  (7) https://prettier.io/blog/2019/01/20/1.16.0.html
  (8) Popmotion/popmotion#682

Resolves GH-120

.eslintrc.js

@@ -46,6 +46,7 @@ module.exports = {
   rules: {
     "prettier/prettier": "error",
     "no-confusing-arrow": "off",
+    "react/display-name": "off",
     /* Also suppress errors when importing development dependencies in project specific scripts. */
     "import/no-extraneous-dependencies": [
       "error",

jest.config.js

@@ -90,15 +90,15 @@ module.exports = {
   /*
    * The paths to modules that run some code to configure or set up the testing environment before each test.
    * The `___loader` shim is a global function used by internal Gatsby APIs.
-   * Note that this is executed BEFORE the `setupTestFrameworkScriptFile` option!
+   * Note that this is executed BEFORE the `setupFilesAfterEnv` option!
    */
   setupFiles: ["<rootDir>/test/__shims__/___loader.js"],
 
   /*
    * The path to the module that runs to configure or set up the testing framework before each test.
    * Note that this is executed AFTER the `setupFiles` option!
    */
-  setupTestFrameworkScriptFile: require.resolve("./test/setup.js"),
+  setupFilesAfterEnv: [require.resolve("./test/setup.js")],
 
   /*
    * An array of regexp pattern strings that are matched against all test paths before executing the test. If the test

package.json

@@ -47,37 +47,37 @@
   },
   "devDependencies": {
     "@babel/core": "7.2.2",
-    "@babel/plugin-proposal-class-properties": "7.2.3",
+    "@babel/plugin-proposal-class-properties": "7.3.0",
     "@babel/plugin-proposal-export-default-from": "7.2.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.2.0",
     "@babel/plugin-proposal-optional-chaining": "7.2.0",
     "@svgr/webpack": "4.1.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
+    "babel-jest": "24.1.0",
     "babel-plugin-react-remove-properties": "0.2.5",
     "babel-plugin-styled-components": "1.10.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.21",
-    "babel-preset-gatsby": "0.1.6",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
+    "babel-preset-gatsby": "0.1.7",
     "del-cli": "1.1.0",
-    "eslint": "5.11.0",
+    "eslint": "5.13.0",
     "eslint-config-arcticicestudio": ">=0.4.0 <1.0.0",
     "eslint-import-resolver-jest": "2.1.1",
     "eslint-plugin-babel": "5.3.0",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-prettier": "3.0.0",
-    "eslint-plugin-react": "7.11.1",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.12.4",
     "git-revision-webpack-plugin": "3.0.3",
-    "husky": "1.2.1",
+    "husky": "1.3.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "23.6.0",
-    "jest-dom": "3.0.0",
-    "jest-junit": "5.2.0",
+    "jest": "24.1.0",
+    "jest-dom": "3.0.2",
+    "jest-junit": "6.2.1",
     "jest-styled-components": "6.3.1",
-    "lint-staged": "8.1.0",
+    "lint-staged": "8.1.3",
     "npm-run-all": "4.1.5",
-    "prettier": "1.15.3",
-    "react-testing-library": "5.4.2",
+    "prettier": "1.16.4",
+    "react-testing-library": "5.5.3",
     "remark-cli": "6.0.1",
     "remark-preset-lint-arcticicestudio": ">=0.2.0 <1.0.0",
     "webpack-bundle-analyzer": "3.0.3"
@@ -88,38 +88,38 @@
     "axios": "0.18.0",
     "body-scroll-lock": "2.6.1",
     "date-fns": "2.0.0-alpha.27",
-    "gatsby": "2.0.75",
-    "gatsby-plugin-canonical-urls": "2.0.8",
-    "gatsby-plugin-catch-links": "2.0.9",
-    "gatsby-plugin-google-gtag": "1.0.8",
-    "gatsby-plugin-manifest": "2.0.12",
-    "gatsby-plugin-netlify": "2.0.6",
-    "gatsby-plugin-no-sourcemaps": "2.0.1",
-    "gatsby-plugin-offline": "2.0.20",
-    "gatsby-plugin-react-helmet": "3.0.5",
-    "gatsby-plugin-remove-trailing-slashes": "2.0.6",
-    "gatsby-plugin-robots-txt": "1.3.0",
-    "gatsby-plugin-sitemap": "2.0.3",
-    "gatsby-plugin-styled-components": "3.0.4",
+    "gatsby": "2.0.117",
+    "gatsby-plugin-canonical-urls": "2.0.10",
+    "gatsby-plugin-catch-links": "2.0.10",
+    "gatsby-plugin-google-gtag": "1.0.13",
+    "gatsby-plugin-manifest": "2.0.17",
+    "gatsby-plugin-netlify": "2.0.9",
+    "gatsby-plugin-no-sourcemaps": "2.0.2",
+    "gatsby-plugin-offline": "2.0.23",
+    "gatsby-plugin-react-helmet": "3.0.6",
+    "gatsby-plugin-remove-trailing-slashes": "2.0.7",
+    "gatsby-plugin-robots-txt": "1.4.0",
+    "gatsby-plugin-sitemap": "2.0.5",
+    "gatsby-plugin-styled-components": "3.0.5",
     "gatsby-plugin-svgr": "2.0.1",
     "gatsby-plugin-webpack-size": "0.0.3",
-    "gatsby-source-filesystem": "2.0.12",
-    "gatsby-transformer-yaml": "2.1.6",
-    "inter-ui": "3.1.0",
+    "gatsby-source-filesystem": "2.0.20",
+    "gatsby-transformer-yaml": "2.1.8",
+    "inter-ui": "3.3.2",
     "nord": ">=0.2.1 <1.0.0",
-    "polished": "2.3.1",
+    "polished": "2.3.3",
     "prop-types": "15.6.2",
-    "react": "16.7.0",
-    "react-dom": "16.7.0",
+    "react": "16.8.1",
+    "react-dom": "16.8.1",
     "react-helmet": "5.2.0",
-    "react-pose": "4.0.4",
+    "react-pose": "4.0.6",
     "react-waypoint": "8.1.0",
     "semver": "5.6.0",
     "styled-components": "4.1.3",
     "styled-modern-normalize": ">=0.2.0 <1.0.0",
     "styled-theming": "2.2.0",
     "subscribe-ui-event": "2.0.5",
     "typeface-rubik": "0.0.54",
-    "typeface-source-code-pro": "0.0.54"
+    "typeface-source-code-pro": "0.0.71"
   }
 }

src/components/atoms/core/HTMLElements/inline-text-semantics/A.jsx

@@ -82,11 +82,18 @@ const A = ({ children, href, to, linkRef, ...passProps }) =>
 
 A.propTypes = {
   children: PropTypes.node.isRequired,
+  href: PropTypes.node,
+  linkRef: PropTypes.element,
   to: PropTypes.string
 };
 
-A.defaultProps = { to: "" };
+A.defaultProps = {
+  href: null,
+  linkRef: null,
+  to: ""
+};
 
+/* eslint-disable-next-line react/prop-types */
 export default React.forwardRef(({ children, ...passProps }, ref) => (
   <A linkRef={ref} {...passProps}>
     {children}

src/components/containers/core/Root/Root.jsx

@@ -22,7 +22,7 @@ import theme, {
 import { SESSIONSTORAGE_KEY_THEME_MODE } from "config/stores/caches/constants";
 import { readSessionCache, writeSessionCache } from "utils";
 
-import "inter-ui/inter-ui.css";
+import "inter-ui/inter.css";
 import "typeface-rubik/index.css";
 import "typeface-source-code-pro/index.css";
 

src/components/molecules/core/EmptyState/EmptyState.jsx

@@ -11,6 +11,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import { Headline, Illustration, Subline, TextWrapper, Wrapper } from "./styled";
+import { illustrationPropTypes } from "./shared/propTypes";
 
 /**
  * A component that represents an empty state through a vector illustration with a headline and subline.
@@ -33,6 +34,7 @@ const EmptyState = ({ headline, illustrationStyles, illustrationVariant, subline
 );
 
 EmptyState.propTypes = {
+  ...illustrationPropTypes,
   headline: PropTypes.string.isRequired,
   subline: PropTypes.string.isRequired
 };

src/components/molecules/core/EmptyState/shared/constants.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides shared constants.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.9.0
+ */
+
+const illustrationVariants = {
+  IGLOO_FRONT: "iglooFront",
+  IGLOO_HEMISPHERE: "iglooHemisphere",
+  IGLOO_SIDE: "iglooSide"
+};
+
+/* eslint-disable-next-line import/prefer-default-export */
+export { illustrationVariants };

src/components/molecules/core/EmptyState/shared/propTypes.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides shared prop types.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.9.0
+ */
+
+import PropTypes from "prop-types";
+
+import { illustrationVariants } from "./constants";
+
+const illustrationPropTypes = {
+  illustrationStyles: PropTypes.arrayOf(PropTypes.string).isRequired,
+  illustrationVariant: PropTypes.oneOf([
+    illustrationVariants.IGLOO_FRONT,
+    illustrationVariants.IGLOO_HEMISPHERE,
+    illustrationVariants.IGLOO_SIDE
+  ])
+};
+
+const illustrationDefaultProps = {
+  illustrationVariant: illustrationVariants.IGLOO_FRONT
+};
+
+export { illustrationDefaultProps, illustrationPropTypes };

src/components/molecules/core/EmptyState/styled/Illustration.jsx

@@ -8,18 +8,12 @@
  */
 
 import React from "react";
-import PropTypes from "prop-types";
 import styled from "styled-components";
 
 import IglooFront from "./svg/IglooFront";
 import IglooHemisphere from "./svg/IglooHemisphere";
 import IglooSide from "./svg/IglooSide";
-
-const illustrationVariants = {
-  IGLOO_FRONT: "iglooFront",
-  IGLOO_HEMISPHERE: "iglooHemisphere",
-  IGLOO_SIDE: "iglooSide"
-};
+import { illustrationDefaultProps, illustrationPropTypes } from "../shared/propTypes";
 
 const illustrationVariantMapping = {
   iglooFront: IglooFront,
@@ -41,18 +35,8 @@ const Illustration = ({ illustrationVariant, illustrationStyles }) => {
   return <StyledIllustration />;
 };
 
-Illustration.propTypes = {
-  illustrationStyles: PropTypes.arrayOf(PropTypes.string).isRequired,
-  illustrationVariant: PropTypes.oneOf([
-    illustrationVariants.IGLOO_FRONT,
-    illustrationVariants.IGLOO_HEMISPHERE,
-    illustrationVariants.IGLOO_SIDE
-  ])
-};
+Illustration.propTypes = illustrationPropTypes;
 
-Illustration.defaultProps = {
-  illustrationVariant: illustrationVariants.IGLOO_FRONT
-};
+Illustration.defaultProps = illustrationDefaultProps;
 
-export { illustrationVariants };
 export default Illustration;

src/components/molecules/core/EmptyState/styled/index.js

@@ -7,10 +7,10 @@
  * License:    MIT
  */
 
-import Illustration, { illustrationVariants } from "./Illustration";
+import Illustration from "./Illustration";
 import Headline from "./Headline";
 import Subline from "./Subline";
 import Wrapper from "./Wrapper";
 import TextWrapper from "./TextWrapper";
 
-export { Headline, Illustration, Subline, TextWrapper, Wrapper, illustrationVariants };
+export { Headline, Illustration, Subline, TextWrapper, Wrapper };

src/components/molecules/core/ErrorState404/ErrorState404.jsx

@@ -11,6 +11,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import { Headline, Illustration, Subline, TextWrapper, Wrapper } from "./styled";
+import { illustrationPropTypes } from "./shared/propTypes";
 
 /**
  * A component that represents an 404 HTTP error state through a vector illustration with a headline and subline.
@@ -33,6 +34,7 @@ const ErrorState404 = ({ headline, illustrationStyles, subline, ...passProps })
 );
 
 ErrorState404.propTypes = {
+  ...illustrationPropTypes,
   headline: PropTypes.string.isRequired,
   subline: PropTypes.string.isRequired
 };

src/components/molecules/core/ErrorState404/shared/propTypes.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides shared prop types.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.9.0
+ */
+
+import PropTypes from "prop-types";
+
+const illustrationPropTypes = {
+  illustrationStyles: PropTypes.arrayOf(PropTypes.string).isRequired,
+  viewBox: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.string])
+};
+
+const svgPropTypes = {
+  svgRef: PropTypes.node
+};
+
+export { illustrationPropTypes, svgPropTypes };

src/components/molecules/core/ErrorState404/styled/Illustration.jsx

@@ -8,14 +8,12 @@
  */
 
 import React from "react";
-import PropTypes from "prop-types";
 import styled, { keyframes } from "styled-components";
 
 import CloudBottom from "./svg/CloudBottom";
 import CloudTop from "./svg/CloudTop";
 import NightSkyCanvas from "./svg/NightSkyCanvas";
-
-const VIEW_BOX = [0, 0, 512.5, 372.642];
+import { illustrationPropTypes } from "../shared/propTypes";
 
 const animFloating = keyframes`
   from { transform: translate3d(0, 0, 0); }
@@ -41,11 +39,11 @@ const Svg = styled.svg`
  * @author Sven Greb <[email protected]>
  * @since 0.3.0
  */
-const Illustration = ({ illustrationStyles, viewBox }) => (
+const Illustration = ({ illustrationStyles }) => (
   <Svg
     data-testid="nd-molecules-core-errorstate404-svg-illustration"
     illustrationStyles={illustrationStyles}
-    viewBox={viewBox}
+    viewBox="0 0 512.5 372.642"
     xmlns="http://www.w3.org/2000/svg"
   >
     <NightSkyCanvas data-testid="nd-molecules-core-errorstate404-svg-illustration-fragment-nightsky" />
@@ -55,13 +53,7 @@ const Illustration = ({ illustrationStyles, viewBox }) => (
 );
 
 Illustration.propTypes = {
-  illustrationStyles: PropTypes.arrayOf(PropTypes.string).isRequired,
-  viewBox: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.string])
-};
-
-Illustration.defaultProps = {
-  viewBox: VIEW_BOX.join(" ")
+  ...illustrationPropTypes
 };
 
-export { VIEW_BOX };
 export default Illustration;