Merge pull request #108 from arcticicestudio/feature/gh-106-core-orga…

…nism-component-footer Core Organism Component: Footer
nordtheme · Dec 29, 2018 · 9a6c049 · 9a6c049
2 parents cf1f118 + 5845a4f
commit 9a6c049
Show file tree

Hide file tree

Showing 91 changed files with 2,548 additions and 150 deletions.
diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
     "react-dom": "16.7.0",
     "react-helmet": "5.2.0",
     "react-pose": "4.0.4",
+    "semver": "5.6.0",
     "styled-components": "4.1.3",
     "styled-modern-normalize": ">=0.2.0 <1.0.0",
     "styled-theming": "2.2.0",

diff --git a/src/assets/images/icons/eva-icons/heart-fill.svg b/src/assets/images/icons/eva-icons/heart-fill.svg
diff --git a/src/assets/images/icons/eva-icons/heart-outline.svg b/src/assets/images/icons/eva-icons/heart-outline.svg
diff --git a/src/assets/images/icons/simple-icons/discord.svg b/src/assets/images/icons/simple-icons/discord.svg
diff --git a/src/assets/images/icons/simple-icons/github.svg b/src/assets/images/icons/simple-icons/github.svg
diff --git a/src/assets/images/icons/simple-icons/keybase.svg b/src/assets/images/icons/simple-icons/keybase.svg
diff --git a/src/assets/images/icons/simple-icons/reddit.svg b/src/assets/images/icons/simple-icons/reddit.svg
diff --git a/src/assets/images/icons/simple-icons/slack.svg b/src/assets/images/icons/simple-icons/slack.svg
diff --git a/src/assets/images/icons/simple-icons/stackoverflow.svg b/src/assets/images/icons/simple-icons/stackoverflow.svg
diff --git a/src/assets/images/icons/simple-icons/twitter.svg b/src/assets/images/icons/simple-icons/twitter.svg
diff --git a/src/assets/images/icons/spectrum.svg b/src/assets/images/icons/spectrum.svg
diff --git a/src/assets/images/logos/arcticicestudio.svg b/src/assets/images/logos/arcticicestudio.svg
diff --git a/src/components/atoms/core/Link/styles.js b/src/components/atoms/core/Link/styles.js
@@ -17,7 +17,7 @@
 import { css } from "styled-components";
 import { lighten, rgba } from "polished";
 
-import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
 
 const backgroundColorHover = themedMode({
   [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.45),
@@ -46,7 +46,8 @@ const fontColorHoverMinimal = themedMode({
 const calmly = css`
   border-radius: 0.25em;
   color: ${fontColor};
-  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+  transition: color ${motion.speed.duration.transition.text.fade}ms ease-in-out,
+    background-color ${motion.speed.duration.transition.text.fade}ms ease-in-out;
 
   &:hover,
   &:active,
@@ -59,7 +60,7 @@ const calmly = css`
 const decent = css`
   border-bottom: 1px solid ${fontColor};
   color: ${fontColorDecent};
-  transition: color 0.2s ease-in-out;
+  transition: color ${motion.speed.duration.transition.text.fade}ms ease-in-out;
 
   &:hover,
   &:active,
@@ -70,7 +71,7 @@ const decent = css`
 
 const minimal = css`
   border-bottom: 1px solid ${fontColor};
-  transition: border-bottom-color 0.2s ease-in-out;
+  transition: border-bottom-color ${motion.speed.duration.transition.text.fade}ms ease-in-out;
 
   &:hover,
   &:active,

diff --git a/src/components/atoms/core/SiteMetadata/SiteMetadata.jsx b/src/components/atoms/core/SiteMetadata/SiteMetadata.jsx
@@ -26,7 +26,9 @@ const PureSiteMetadata = ({
           description,
           keywords: keywordsNord,
           links: {
-            social: { twitter }
+            organization: {
+              social: { twitter }
+            }
           },
           title
         },
@@ -38,7 +40,7 @@ const PureSiteMetadata = ({
 }) => (
   <Fragment>
     <Helmet defaultTitle={title} titleTemplate={`${title} | %s`}>
-      <html lang="en" prefix="og: http://ogp.me/ns#" />
+      <html lang="en" />
       <meta content={description} name="description" />
       <meta content={author.name} name="author" />
       <meta content={Array.from(new Set([...keywordsNord, ...keywordsNordDocs]))} name="keywords" />
@@ -110,9 +112,11 @@ const SiteMetadata = ({ pathName, ...passProp }) => (
               description
               keywords
               links {
-                social {
-                  twitter {
-                    id
+                organization {
+                  social {
+                    twitter {
+                      id
+                    }
                   }
                 }
               }

diff --git a/src/components/atoms/core/vectors/divider/DividerSvg.jsx b/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;
diff --git a/src/components/atoms/core/vectors/divider/WaveFooter.jsx b/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;
diff --git a/src/components/atoms/core/vectors/divider/index.js b/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 };
diff --git a/src/components/atoms/core/vectors/icons/Discord.jsx b/src/components/atoms/core/vectors/icons/Discord.jsx
@@ -0,0 +1,36 @@
+/*
+ * 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 styled from "styled-components";
+
+import { ReactComponent as DiscordSVG } from "assets/images/icons/simple-icons/discord.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const DiscordIcon = styled(DiscordSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "Discord" logo icon from the "Simple Icons" project as styled SVG vector graphic component.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://simpleicons.org
+ * @since 0.5.0
+ */
+const Discord = ({ className, svgRef }) => <DiscordIcon className={className} svgRef={svgRef} />;
+
+Discord.propTypes = iconPropTypes;
+
+Discord.defaultProps = iconDefaultProps;
+
+export default Discord;
diff --git a/src/components/atoms/core/vectors/icons/GitHub.jsx b/src/components/atoms/core/vectors/icons/GitHub.jsx
@@ -0,0 +1,36 @@
+/*
+ * 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 styled from "styled-components";
+
+import { ReactComponent as GitHubSVG } from "assets/images/icons/simple-icons/github.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const GitHubIcon = styled(GitHubSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "GitHub" logo icon from the "Simple Icons" project as styled SVG vector graphic component.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://simpleicons.org
+ * @since 0.5.0
+ */
+const GitHub = ({ className, svgRef }) => <GitHubIcon className={className} svgRef={svgRef} />;
+
+GitHub.propTypes = iconPropTypes;
+
+GitHub.defaultProps = iconDefaultProps;
+
+export default GitHub;