Implement the EmptyState component

This commit implements the actual empty state component that consists of
the styled components and provides the rendered output and logic.

GH-78

Author: arcticicestudio

src/components/molecules/core/EmptyState/EmptyState.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 empty state through a vector illustration with a headline and subline.
+ * The illustration that'll be shown can be configured through the `illustrationVariant` prop and 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://material.io/design/communication/empty-states.html
+ * @since 0.3.0
+ */
+const EmptyState = ({ headline, illustrationStyles, illustrationVariant, subline, ...passProps }) => (
+  <Wrapper {...passProps}>
+    <Illustration illustrationStyles={illustrationStyles} illustrationVariant={illustrationVariant} />
+    <TextWrapper>
+      <Headline>{headline}</Headline>
+      <Subline>{subline}</Subline>
+    </TextWrapper>
+  </Wrapper>
+);
+
+EmptyState.propTypes = {
+  headline: PropTypes.string.isRequired,
+  subline: PropTypes.string.isRequired
+};
+
+export default EmptyState;

src/components/molecules/core/EmptyState/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 "./EmptyState";

test/components/molecules/core/EmptyState/EmptyState.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 EmptyState from "molecules/core/EmptyState";
+
+const emptyStateIllustrationStylesMock = [];
+
+describe("rendering", () => {
+  test("renders the headline and subline", async () => {
+    const { getByText } = renderWithTheme(
+      <EmptyState
+        headline="The arctic winter"
+        illustrationStyles={emptyStateIllustrationStylesMock}
+        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(
+      <EmptyState
+        headline="The arctic winter"
+        illustrationStyles={emptyStateIllustrationStylesMock}
+        subline="A beautiful sparkly phenomenon!"
+      />
+    );
+
+    await waitForElement(() => getByTestId("nd-molecules-core-emptystate-styled-svg-igloo-front"));
+  });
+});