From 1924af42a23221edaca462c59e104b039bf8f9cc Mon Sep 17 00:00:00 2001
From: Arctic Ice Studio <development@arcticicestudio.com>
Date: Wed, 5 Dec 2018 09:20:48 +0100
Subject: [PATCH] Implement `generateMediaQuery` media query generator function

To simplify the usage of media queries (1) with styled-components (2),
a utility function to generate media templates (3) will be implemented.
It'll use the `min-width` parameter to fulfill the used "mobile-first"
approach. The base size that'll be used has been implemented as theme
property in GH-54 (4).

References:
  (1) https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries
  (2) https://github.com/arcticicestudio/nord-docs/issues/52
  (3) https://www.styled-components.com/docs/advanced#media-templates
  (4) https://github.com/arcticicestudio/nord-docs/pull/55/files#diff-90a2aa45c339ce4720a7fbbd23c65e3eR49

Associated epic: #52
GH-61
---
 src/styles/theme/index.js                    |  3 +-
 src/styles/theme/utils/generateMediaQuery.js | 35 ++++++++++++++++++++
 src/styles/theme/utils/index.js              |  3 +-
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/theme/utils/generateMediaQuery.js

diff --git a/src/styles/theme/index.js b/src/styles/theme/index.js
index 478f9cad..4255cfa0 100644
--- a/src/styles/theme/index.js
+++ b/src/styles/theme/index.js
@@ -18,7 +18,7 @@ import colors, { nord, palettes } from "./colors";
 import globals from "./globals";
 import motion from "./motion";
 import normalize from "./normalize";
-import { themedMode, themedModeVariant } from "./utils";
+import { generateMediaQuery, themedMode, themedModeVariant } from "./utils";
 import typography from "./typography";
 import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST, THEME_KEY_MODE } from "./constants";
 
@@ -26,6 +26,7 @@ const theme = { colors, motion, typography };
 
 export {
   colors,
+  generateMediaQuery,
   globals,
   motion,
   nord,
diff --git a/src/styles/theme/utils/generateMediaQuery.js b/src/styles/theme/utils/generateMediaQuery.js
new file mode 100644
index 00000000..52e1ecc0
--- /dev/null
+++ b/src/styles/theme/utils/generateMediaQuery.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.3.0
+ */
+
+import { css } from "styled-components";
+
+/**
+ * Generates a tag function for the specified media query that can be used to automatically wrap the tagged template
+ * literal in its media query.
+ *
+ * @param {string} query The string or template literal containing the media query features
+ * @returns {function} The tag function for the specified media query
+ * @see https://www.styled-components.com/docs/advanced#media-templates
+ * @see https://www.styled-components.com/docs/api#css
+ * @since 0.3.0
+ */
+const generateMediaQuery = (...query) => (...rules) =>
+  css`
+    @media ${css(...query)} {
+      ${css(...rules)};
+    }
+  `;
+
+export default generateMediaQuery;
diff --git a/src/styles/theme/utils/index.js b/src/styles/theme/utils/index.js
index f299f497..d2b28143 100644
--- a/src/styles/theme/utils/index.js
+++ b/src/styles/theme/utils/index.js
@@ -14,7 +14,8 @@
  * @since 0.2.0
  */
 
+import generateMediaQuery from "./generateMediaQuery";
 import themedMode from "./themedMode";
 import themedModeVariant from "./themedModeVariant";
 
-export { themedMode, themedModeVariant };
+export { generateMediaQuery, themedMode, themedModeVariant };