Implement base styled sectioning component

This commit implements a base HTML component that represents a
`<section>` (1) with multiple base style variants.

References:
  (1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

Associated epic: GH-63
GH-78

src/components/containers/core/Page/Page.jsx

@@ -9,20 +9,20 @@
 
 import styled from "styled-components";
 
-import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+import { motion } from "styles/theme";
 
-const backgroundColor = themedMode({
-  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY],
-  [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
-});
+import { baseBackgroundColor } from "../shared/styles";
 
 /**
  * A basic wrapper component for page content.
  *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
  * @since 0.3.0
  */
 const Page = styled.main`
-  background-color: ${backgroundColor};
+  background-color: ${baseBackgroundColor};
   transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
 `;
 

src/components/containers/core/Section/Section.jsx

@@ -0,0 +1,46 @@
+/*
+ * 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 PropTypes from "prop-types";
+import styled from "styled-components";
+
+import { motion } from "styles/theme";
+
+import { baseBackgroundColor, primaryBackgroundColor, secondaryBackgroundColor } from "../shared/styles";
+
+const variants = {
+  base: baseBackgroundColor,
+  primary: primaryBackgroundColor,
+  secondary: secondaryBackgroundColor
+};
+
+/**
+ * A base HTML component that represents a `<section>` with multiple base style variants.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
+ * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines
+ * @since 0.3.0
+ */
+const Section = styled.section`
+  position: relative;
+  background-color: ${({ variant }) => variants[variant]};
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+`;
+
+Section.propTypes = {
+  variant: PropTypes.oneOf(Object.keys(variants))
+};
+
+Section.defaultProps = {
+  variant: "base"
+};
+
+export default Section;

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

src/components/containers/core/shared/styles.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 container component styles.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+
+import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const baseBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
+});
+
+const primaryBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.primary[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.primary[MODE_DARK_NIGHT_FROST]
+});
+
+const secondaryBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST]
+});
+
+export { baseBackgroundColor, primaryBackgroundColor, secondaryBackgroundColor };

src/styles/theme/colors/background.js

@@ -6,6 +6,7 @@
  * Repository: https://github.com/arcticicestudio/nord-docs
  * License:    MIT
  */
+import { darken, lighten } from "polished";
 
 import nord from "./nord";
 import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "../constants";
@@ -15,13 +16,29 @@ const base = {
   [MODE_DARK_NIGHT_FROST]: nord.nord0
 };
 
+const sectioningPrimary = {
+  [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.045, nord.nord6),
+  [MODE_DARK_NIGHT_FROST]: nord.nord1
+};
+
+const sectioningSecondary = {
+  [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.06, nord.nord5),
+  [MODE_DARK_NIGHT_FROST]: darken(0.025, nord.nord0)
+};
+
 /**
  * Provides theme background colors.
  *
  * @author Arctic Ice Studio <[email protected]>
  * @author Sven Greb <[email protected]>
  * @since 0.2.0
  */
-const background = { base };
+const background = {
+  base,
+  sectioning: {
+    primary: sectioningPrimary,
+    secondary: sectioningSecondary
+  }
+};
 
 export default background;

test/components/containers/core/Section/Section.test.jsx

@@ -0,0 +1,26 @@
+/*
+ * 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 Section from "containers/core/Section";
+import { renderWithTheme } from "nord-docs-test-utils";
+
+describe("theme styles", () => {
+  test("matches the snapshot", () => {
+    const { container } = renderWithTheme(
+      <Fragment>
+        <Section>Section Base Background</Section>
+        <Section variant="primary">Section Primary Background</Section>
+        <Section variant="secondary">Section Secondary Background</Section>
+      </Fragment>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`theme styles matches the snapshot 1`] = `
+.c0 {
+  position: relative;
+  background-color: #fff;
+  -webkit-transition: background-color 400ms ease-in-out;
+  transition: background-color 400ms ease-in-out;
+}
+
+.c1 {
+  position: relative;
+  background-color: #fbfbfc;
+  -webkit-transition: background-color 400ms ease-in-out;
+  transition: background-color 400ms ease-in-out;
+}
+
+.c2 {
+  position: relative;
+  background-color: #f8f9fb;
+  -webkit-transition: background-color 400ms ease-in-out;
+  transition: background-color 400ms ease-in-out;
+}
+
+<div>
+  <section
+    class="c0"
+  >
+    Section Base Background
+  </section>
+  <section
+    class="c1"
+  >
+    Section Primary Background
+  </section>
+  <section
+    class="c2"
+  >
+    Section Secondary Background
+  </section>
+</div>
+`;