Implement MDX-specific components

This commit initially includes the `Image` (wraps `GatsbyImage`) and
`ShinkWidth` component placed in the new atom core package
`mdx-elements`.

GH-129

src/components/atoms/core/mdx-elements/Image.jsx

@@ -0,0 +1,83 @@
+/*
+ * 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 PropTypes from "prop-types";
+import GatsbyImage from "gatsby-image";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+
+import { Figure } from "atoms/core/html-elements";
+import { contentMdxImageFluidPropTypes } from "data/graphql/fragmentPropTypes";
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const boxShadow = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: css`0px 10px 20px 2px ${rgba(colors.shadow.decent[MODE_BRIGHT_SNOW_FLURRY], 0.35)}`,
+  [MODE_DARK_NIGHT_FROST]: css`0px 10px 20px 2px ${rgba(colors.shadow.decent[MODE_DARK_NIGHT_FROST], 0.2)}`
+});
+
+const figcaptionFontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.faded[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.font.faded[MODE_DARK_NIGHT_FROST]
+});
+
+const Img = styled(GatsbyImage)`
+  border-radius: ${({ rounded }) => rounded && "8px"};
+  max-width: ${({ fluid, fillSize }) => (fillSize < 100 ? `${fillSize}%` : `${fluid.presentationWidth}px`)};
+  margin: ${({ hasCaption }) => `0 auto ${hasCaption ? "2em" : "6em"} auto`};
+  box-shadow: ${({ dropShadow }) => dropShadow && boxShadow};
+  transition: box-shadow ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+`;
+
+const FigCaption = styled.figcaption`
+  color: ${figcaptionFontColor};
+  margin-bottom: 6em;
+  margin-left: 1em;
+  font-size: 0.875em;
+`;
+
+/**
+ * An Gatsby image wrapped in a `<figure>` element with an optional caption.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ * @see https://www.gatsbyjs.org/docs/working-with-images
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
+ */
+const Image = ({ children, dropShadow, rounded, fillSize, src, ...passProps }) => (
+  <Figure>
+    <Img
+      dropShadow={dropShadow}
+      fillSize={fillSize}
+      fluid={src.fluid && src.fluid}
+      hasCaption={!!children}
+      rounded={rounded}
+      {...passProps}
+    />
+    {children && <FigCaption>{children}</FigCaption>}
+  </Figure>
+);
+
+Image.propTypes = {
+  children: PropTypes.node,
+  dropShadow: PropTypes.bool,
+  fillSize: PropTypes.number,
+  rounded: PropTypes.bool,
+  ...contentMdxImageFluidPropTypes
+};
+
+Image.defaultProps = {
+  children: null,
+  dropShadow: false,
+  fillSize: 100,
+  rounded: false
+};
+
+export default Image;

src/components/atoms/core/mdx-elements/ShrinkedWidth.jsx

@@ -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
+ */
+
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+/**
+ * An container component that shrinks the maxiumum width for a better visual style and more readable text.
+ * The maximum width in percent can be customized using the `value` prop.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ */
+const ShrinkedWidth = styled.div`
+  max-width: ${({ value }) => `${value}%`};
+  margin: 0 auto;
+`;
+
+ShrinkedWidth.propTypes = {
+  value: PropTypes.number
+};
+
+ShrinkedWidth.defaultProps = {
+  value: 60
+};
+
+export default ShrinkedWidth;

src/components/atoms/core/mdx-elements/index.js

@@ -0,0 +1,13 @@
+/*
+ * 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 Image from "./Image";
+import ShrinkedWidth from "./ShrinkedWidth";
+
+export { Image, ShrinkedWidth };

src/styles/theme/motion/easings.js

@@ -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
+ */
+
+/**
+ * @file Provides motion easing values.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.10.0
+ * @see https://material.io/design/motion/speed.html#easing
+ * @see https://easings.net
+ */
+
+const easings = {
+  easeInQuad: [0.55, 0.085, 0.68, 0.53],
+  easeInOutQuad: [0.455, 0.03, 0.515, 0.955],
+  easeOutCubic: [0.215, 0.61, 0.355, 1],
+  easeOutQuart: [0.165, 0.84, 0.44, 1]
+};
+
+export default easings;

src/styles/theme/motion/index.js

@@ -11,13 +11,13 @@
  * @file Provides motion related values like animations inspired by Material Design Guidelines.
  * @author Arctic Ice Studio <[email protected]>
  * @author Sven Greb <[email protected]>
- * @see https://material.io/design/motion/speed.html
  * @since 0.2.0
  */
 
+import easings from "./easings";
 import speed, { duration } from "./speed";
 
-const motion = { speed };
+const motion = { easings, speed };
 
-export { speed, duration };
+export { easings, speed, duration };
 export default motion;

src/styles/theme/motion/speed.js

@@ -28,6 +28,7 @@ const duration = {
   transition: {
     base: { themeModeSwitch: 400 },
     area: {
+      fullscreen: 400,
       large: 300,
       medium: 250,
       small: 100