Implement Content core container component

It sets the basic maximum width for the wrapped content when the width
is similar to a desktop screen or larger. It also ensures that the
content spreads to the available width and allows to dynamically align
the content in the center.

GH-64

src/components/containers/core/Content/Content.jsx

@@ -0,0 +1,30 @@
+/*
+ * 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 styled from "styled-components";
+import { em } from "polished";
+
+/**
+ * A container that manages the responsive content width.
+ * The boolean `centered` prop can be used to use a centered margin.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const Content = styled.div`
+  width: 100%;
+  margin: ${({ centered }) => centered && "0 auto"};
+
+  ${({ theme }) => theme.media.desktop`
+    max-width: ${em(theme.media.breakpoints.desktopLowerBoundary)}
+  `};
+`;
+
+export default Content;

src/components/containers/core/Content/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 "./Content";

test/components/containers/core/Content/Content.test.jsx

@@ -0,0 +1,18 @@
+/*
+ * 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 { renderWithTheme } from "nord-docs-test-utils";
+import Content from "containers/core/Content";
+
+test("snapshot", () => {
+  const { container } = renderWithTheme(<Content />);
+  expect(container).toMatchSnapshot();
+});

test/components/containers/core/Content/__snapshots__/Content.test.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<div>
+  <div
+    class="sc-bdVaJa fnJgZO"
+  />
+</div>
+`;