Implement the ErrorState404 component

This commit implements the main 404 (1) page component to handle
requested but non-existing routes and resources. Iz aligns with
Nord Docs brand and can use a humorous illustration and tagline that
conveys the purpose of the screen, without appearing actionable.

See the great Gatsby documentation about 404 pages (2) for more details.

> Structure

The component consists of three parts: an vector illustration, the
headline and the corresponding subline.

> Vector Illustration

The illustration is the main element of the page component. It presents
the exception/error case with a friendly visualization.

> Text Content

The headline and subline inform the user about the purpose of the
illustration and the reason why it is currently shown and can include
helpful instructions on how to continue.

References:
  (1) https://en.wikipedia.org/wiki/HTTP_404
  (2) https://www.gatsbyjs.org/docs/add-404-page

Associated epics: GH-63
GH-84

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

@@ -0,0 +1,40 @@
+/*
+ * 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
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Headline, Illustration, Subline, TextWrapper, Wrapper } from "./styled";
+
+/**
+ * A component that represents an 404 HTTP error state through a vector illustration with a headline and subline.
+ * The illustration can be styled with styled-component's `css` API passed to the `illustrationStyles` prop.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://en.wikipedia.org/wiki/HTTP_404
+ * @see https://www.gatsbyjs.org/docs/add-404-page
+ * @since 0.3.0
+ */
+const ErrorState404 = ({ headline, illustrationStyles, subline, ...passProps }) => (
+  <Wrapper {...passProps}>
+    <Illustration illustrationStyles={illustrationStyles} />
+    <TextWrapper>
+      <Headline>{headline}</Headline>
+      <Subline>{subline}</Subline>
+    </TextWrapper>
+  </Wrapper>
+);
+
+ErrorState404.propTypes = {
+  headline: PropTypes.string.isRequired,
+  subline: PropTypes.string.isRequired
+};
+
+export default ErrorState404;

src/components/molecules/core/ErrorState404/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+export { default } from "./ErrorState404";

test/components/molecules/core/ErrorState404/ErrorState404.test.jsx

@@ -0,0 +1,43 @@
+/*
+ * 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
+ */
+
+import React from "react";
+import { waitForElement } from "react-testing-library";
+
+import { renderWithTheme } from "nord-docs-test-utils";
+import ErrorState404 from "molecules/core/ErrorState404";
+
+const errorState404IllustrationStylesMock = [];
+
+describe("rendering", () => {
+  test("renders the headline and subline", async () => {
+    const { getByText } = renderWithTheme(
+      <ErrorState404
+        headline="The arctic winter"
+        illustrationStyles={errorState404IllustrationStylesMock}
+        subline="A beautiful sparkly phenomenon!"
+      />
+    );
+
+    await waitForElement(() => getByText(/The arctic winter/i));
+    await waitForElement(() => getByText(/A beautiful sparkly phenomenon!/i));
+  });
+
+  test("renders the illustration", async () => {
+    const { getByTestId } = renderWithTheme(
+      <ErrorState404
+        headline="The arctic winter"
+        illustrationStyles={errorState404IllustrationStylesMock}
+        subline="A beautiful sparkly phenomenon!"
+      />
+    );
+
+    await waitForElement(() => getByTestId("nd-molecules-core-errorstate404-svg-illustration"));
+  });
+});

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

@@ -0,0 +1,27 @@
+/*
+ * 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
+ */
+
+import React from "react";
+import { waitForElement } from "react-testing-library";
+
+import { renderWithTheme } from "nord-docs-test-utils";
+import Illustration from "molecules/core/ErrorState404/styled/Illustration";
+
+const errorState404IllustrationStylesMock = [];
+
+describe("rendering", () => {
+  test("renders the SVG vector illustration with all fragments", async () => {
+    const { getByTestId } = renderWithTheme(<Illustration illustrationStyles={errorState404IllustrationStylesMock} />);
+
+    await waitForElement(() => getByTestId("nd-molecules-core-errorstate404-svg-illustration"));
+    await waitForElement(() => getByTestId("nd-molecules-core-errorstate404-svg-illustration-fragment-nightsky"));
+    await waitForElement(() => getByTestId("nd-molecules-core-errorstate404-svg-illustration-fragment-cloudtop"));
+    await waitForElement(() => getByTestId("nd-molecules-core-errorstate404-svg-illustration-fragment-cloudbottom"));
+  });
+});