Implement WaveFooter SVG divider component

A SVG vector graphic divider component consisting of three overlapping
waves that is placed as last child within the last section/component of
a page to render the wave as divider for the footer (rendered through
the `Baselayout` component).

GH-106

src/components/atoms/core/vectors/divider/DividerSvg.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 styled from "styled-components";
+
+/**
+ * A styled SVG element with essential styles for divider vector graphic components.
+ *
+ * It applies two CSS styles to render problems and ensure SVG vector graphic components are handled as block-elements.
+ * Setting `dislay: block` is required to prevent gaps within the container caused by the SVG being treated as text
+ * element (`inline-block`) by default which gets affected by the `line-height` property. This can also be fixed by
+ * setting `line-height: 0` instead.
+ *
+ * Due to a bug or difference between Firefox and other browser rendering engines there is a `1px` gap between rendered
+ * SVGs elements and the following element.
+ * Applying `bottom: -1px` prevents these gaps, but unfortunately also requires following elements in the DOM to
+ * compensate for the resulting gap.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://developer.mozilla.org/de/docs/Web/SVG
+ * @since 0.5.0
+ */
+const DividerSvg = styled.svg`
+  display: block;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background-color: transparent;
+  pointer-events: none;
+  user-select: none;
+  vertical-align: middle;
+  overflow: hidden;
+`;
+
+export default DividerSvg;

src/components/atoms/core/vectors/divider/WaveFooter.jsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { css } from "styled-components";
+import { darken, lighten } from "polished";
+
+import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+import { themeModeFillColorStyles } from "../shared/styles";
+import DividerSvg from "./DividerSvg";
+
+const fillColorWave1 = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.025, colors.nord6),
+  [MODE_DARK_NIGHT_FROST]: darken(0.02, colors.nord1)
+});
+
+const fillColorWave2 = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.035, colors.nord6),
+  [MODE_DARK_NIGHT_FROST]: darken(0.01, colors.nord1)
+});
+
+const fillColorWave3 = 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]
+});
+
+/**
+ * A SVG vector graphic divider component consisting of three overlapping waves.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://developer.mozilla.org/de/docs/Web/SVG
+ * @since 0.5.0
+ */
+const WaveFooter = props => (
+  <DividerSvg {...props} viewBox="0 0 1920 250" xmlns="http://www.w3.org/2000/svg">
+    <path
+      css={css`
+        ${themeModeFillColorStyles};
+        fill: ${fillColorWave1};
+      `}
+      d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
+    />
+    <path
+      css={css`
+        ${themeModeFillColorStyles};
+        fill: ${fillColorWave2};
+      `}
+      d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
+    />
+    <path
+      css={css`
+        ${themeModeFillColorStyles};
+        fill: ${fillColorWave3};
+      `}
+      d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
+    />
+  </DividerSvg>
+);
+
+export default WaveFooter;

src/components/atoms/core/vectors/divider/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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 SVG vector graphic divider components.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://developer.mozilla.org/de/docs/Web/SVG
+ * @since 0.5.0
+ */
+
+import WaveFooter from "./WaveFooter";
+
+/* eslint-disable-next-line import/prefer-default-export */
+export { WaveFooter };

src/components/organisms/page/404/SectionLanding/SectionLanding.jsx

@@ -9,6 +9,7 @@
 
 import React from "react";
 
+import { WaveFooter } from "atoms/core/vectors/divider";
 import Section, { Content } from "containers/core/Section";
 import ErrorState404 from "molecules/core/ErrorState404";
 
@@ -30,6 +31,7 @@ const SectionLanding = () => (
         subline="…but that's not the place to find the page you were looking for."
       />
     </Content>
+    <WaveFooter />
   </Section>
 );
 

src/components/organisms/page/blog/SectionBlogPosts/SectionBlogPosts.jsx

@@ -9,6 +9,7 @@
 
 import React from "react";
 
+import { WaveFooter } from "atoms/core/vectors/divider";
 import Section, { Content } from "containers/core/Section";
 import EmptyState from "molecules/core/EmptyState";
 
@@ -30,6 +31,7 @@ const SectionBlogPosts = () => (
         subline="Please check back later, we're working hard on this page!"
       />
     </Content>
+    <WaveFooter />
   </Section>
 );
 

src/components/organisms/page/community/SectionLanding/SectionLanding.jsx

@@ -9,6 +9,7 @@
 
 import React from "react";
 
+import { WaveFooter } from "atoms/core/vectors/divider";
 import Section, { Content } from "containers/core/Section";
 import EmptyState from "molecules/core/EmptyState";
 
@@ -30,6 +31,7 @@ const SectionLanding = () => (
         subline="Please check back later, we're working hard on this page!"
       />
     </Content>
+    <WaveFooter />
   </Section>
 );
 

src/components/organisms/page/docs/SectionLanding/SectionLanding.jsx

@@ -9,6 +9,7 @@
 
 import React from "react";
 
+import { WaveFooter } from "atoms/core/vectors/divider";
 import Section, { Content } from "containers/core/Section";
 import EmptyState from "molecules/core/EmptyState";
 
@@ -30,6 +31,7 @@ const SectionLanding = () => (
         subline="Please check back later, we're working hard on this page!"
       />
     </Content>
+    <WaveFooter />
   </Section>
 );
 

src/components/organisms/page/landing/SectionHero/SectionHero.jsx

@@ -9,6 +9,7 @@
 
 import React from "react";
 
+import { WaveFooter } from "atoms/core/vectors/divider";
 import Section, { Content } from "containers/core/Section";
 import EmptyState from "molecules/core/EmptyState";
 
@@ -30,6 +31,7 @@ const SectionHero = () => (
         subline="Please check back later, we're working hard on this page!"
       />
     </Content>
+    <WaveFooter />
   </Section>
 );
 

src/components/organisms/page/ports/SectionLanding/SectionLanding.jsx

@@ -9,6 +9,7 @@
 
 import React from "react";
 
+import { WaveFooter } from "atoms/core/vectors/divider";
 import Section, { Content } from "containers/core/Section";
 import EmptyState from "molecules/core/EmptyState";
 
@@ -30,6 +31,7 @@ const SectionLanding = () => (
         subline="Please check back later, we're working hard on this page!"
       />
     </Content>
+    <WaveFooter />
   </Section>
 );