Merge pull request #68 from arcticicestudio/feature/gh-66-core-layout-component-baselayout

Core Layout Component: BaseLayout

Author: arcticicestudio

src/components/layouts/core/BaseLayout/BaseLayout.jsx

@@ -0,0 +1,33 @@
+/*
+ * 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, { Fragment } from "react";
+import PropTypes from "prop-types";
+
+import Page from "containers/core/Page";
+import Root from "containers/core/Root";
+
+/**
+ * The base page layout providing the main container that wraps the content.
+ *
+ * @since 0.3.0
+ */
+const BaseLayout = ({ children }) => (
+  <Root>
+    <Fragment>
+      <Page>{children}</Page>
+    </Fragment>
+  </Root>
+);
+
+BaseLayout.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default BaseLayout;

src/components/layouts/core/BaseLayout/index.js

@@ -0,0 +1 @@
+export { default } from "./BaseLayout";

src/pages/index.jsx

@@ -8,7 +8,7 @@
  */
 import React, { Fragment } from "react";
 
-import Root from "containers/core/Root";
+import BaseLayout from "layouts/core/BaseLayout";
 
 /**
  * The landing page component representing the root/index of the site.
@@ -18,9 +18,9 @@ import Root from "containers/core/Root";
  * @since 0.1.0
  */
 const Landing = () => (
-  <Root>
+  <BaseLayout>
     <Fragment />
-  </Root>
+  </BaseLayout>
 );
 
 export default Landing;

test/components/layouts/core/BaseLayout/BaseLayout.test.jsx

@@ -0,0 +1,22 @@
+/*
+ * 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, { Fragment } from "react";
+import { render } from "react-testing-library";
+
+import BaseLayout from "layouts/core/BaseLayout";
+
+test("snapshot", () => {
+  const { container } = render(
+    <BaseLayout>
+      <Fragment />
+    </BaseLayout>
+  );
+  expect(container).toMatchSnapshot();
+});

test/components/layouts/core/BaseLayout/__snapshots__/BaseLayout.test.jsx.snap

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

test/pages/__snapshots__/index.test.jsx.snap

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