Styled Component Media queries mixin (#87)

* Moved files inside design system 🚀

* Media query for min width 🚀

* Min width media query 🚀

* Refactoring media query 🚀

* Media query max width 🚀

* Media query dark theme 🚀

* Added test for media query 🚀

* Turn off transition on touche devices 🚀

Author: chicio

.storybook/preview.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { action } from "@storybook/addon-actions"
 import { ThemeProvider } from 'styled-components';
-import { theme } from "../src/components/theme";
-import { GlobalStyle } from "../src/components/global-style";
+import { theme } from "../src/components/design-system/theme";
+import { GlobalStyle } from "../src/components/design-system/global-style";
 
 /** https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/ **/
 global.___loader = {

__stories__/colors.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta } from "@storybook/react";
 import styled from "styled-components";
 import { ContainerFluid } from "../src/components/design-system/atoms/container-fluid";
-import { dark, light } from "../src/components/theme";
+import { dark, light } from "../src/components/design-system/theme";
 
 const ColorsContainer = styled.div`
   display: flex;

__tests__/media-query.test.ts

@@ -0,0 +1,27 @@
+import { mediaQuery } from "../src/components/design-system/utils-css/media-query";
+
+describe("media-query", () => {
+  it("min-width", () => {
+    expect(mediaQuery.minWidth.xs).toEqual("@media (min-width: 576px)");
+    expect(mediaQuery.minWidth.sm).toEqual("@media (min-width: 768px)");
+    expect(mediaQuery.minWidth.md).toEqual("@media (min-width: 992px)");
+    expect(mediaQuery.minWidth.lg).toEqual("@media (min-width: 1200px)");
+  });
+
+  it("max-width", () => {
+    expect(mediaQuery.maxWidth.xs).toEqual("@media (max-width: 576px)");
+    expect(mediaQuery.maxWidth.sm).toEqual("@media (max-width: 768px)");
+    expect(mediaQuery.maxWidth.md).toEqual("@media (max-width: 992px)");
+    expect(mediaQuery.maxWidth.lg).toEqual("@media (max-width: 1200px)");
+  });
+
+  it("dark", () => {
+    expect(mediaQuery.dark).toEqual("@media (prefers-color-scheme: dark)");
+  });
+
+  it("device", () => {
+    expect(mediaQuery.inputDevice.mouse).toEqual(
+      "@media (hover: hover) and (pointer: fine)"
+    );
+  });
+});

graphql-types.ts

@@ -258,8 +258,6 @@ export type DirectoryCtimeArgs = {
 export type Site = Node & {
   buildTime?: Maybe<Scalars['Date']>;
   siteMetadata?: Maybe<SiteSiteMetadata>;
-  port?: Maybe<Scalars['Int']>;
-  host?: Maybe<Scalars['String']>;
   polyfill?: Maybe<Scalars['Boolean']>;
   pathPrefix?: Maybe<Scalars['String']>;
   id: Scalars['ID'];
@@ -1050,8 +1048,6 @@ export type QueryAllDirectoryArgs = {
 export type QuerySiteArgs = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
-  port?: Maybe<IntQueryOperatorInput>;
-  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;
@@ -2367,8 +2363,6 @@ export type SiteFieldsEnum =
   | 'siteMetadata___contacts___links___medium'
   | 'siteMetadata___contacts___links___devto'
   | 'siteMetadata___contacts___links___instagram'
-  | 'port'
-  | 'host'
   | 'polyfill'
   | 'pathPrefix'
   | 'id'
@@ -2502,8 +2496,6 @@ export type SiteGroupConnectionGroupArgs = {
 export type SiteFilterInput = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
-  port?: Maybe<IntQueryOperatorInput>;
-  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;

src/components/design-system/atoms/call-to-action-style.ts

@@ -1,4 +1,5 @@
 import { css } from "styled-components";
+import { mediaQuery } from "../utils-css/media-query";
 
 export const callToActionStyle = css`
   font-size: ${(props) => props.theme.fontSizes[3]};
@@ -11,7 +12,7 @@ export const callToActionStyle = css`
   line-height: 1;
   text-align: center;
 
-  @media (prefers-color-scheme: dark) {
+  ${mediaQuery.dark} {
     background-color: ${(props) => props.theme.dark.accentColor};
     color: ${(props) => props.theme.dark.textAbovePrimaryColor};
   }

src/components/design-system/atoms/container-fullscreen.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { mediaQuery } from "../utils-css/media-query";
 
 export const ContainerFullscreen = styled.div`
   display: flex;
@@ -10,7 +11,7 @@ export const ContainerFullscreen = styled.div`
   width: 100%;
   background-color: ${(props) => props.theme.light.primaryColor};
 
-  @media (prefers-color-scheme: dark) {
+  ${mediaQuery.dark} {
     background-color: ${(props) => props.theme.dark.primaryColor};
   }
 `;

src/components/design-system/atoms/container.tsx

@@ -1,16 +1,17 @@
 import styled from "styled-components";
 import { ContainerFluid } from "./container-fluid";
+import { mediaQuery } from "../utils-css/media-query";
 
 export const Container = styled(ContainerFluid)`
-  @media (min-width: 576px) {
+  ${mediaQuery.minWidth.xs} {
     max-width: 540px;
   }
 
-  @media (min-width: 768px) {
+  ${mediaQuery.minWidth.sm} {
     max-width: 720px;
   }
 
-  @media (min-width: 992px) {
+  ${mediaQuery.minWidth.md} {
     max-width: 960px;
   }
 `;

src/components/design-system/atoms/icon.tsx

@@ -1,11 +1,12 @@
 import styled from "styled-components";
 import { StyledIconBase } from "@styled-icons/styled-icon";
+import { mediaQuery } from "../utils-css/media-query";
 
 export const Icon = styled.div`
   ${StyledIconBase} {
     color: ${(props) => props.theme.light.textAbovePrimaryColor};
 
-    @media (prefers-color-scheme: dark) {
+    ${mediaQuery.dark} {
       color: ${(props) => props.theme.dark.textAbovePrimaryColor};
     }
 `;

src/components/design-system/atoms/list.tsx

@@ -1,11 +1,12 @@
 import styled from "styled-components";
+import { mediaQuery } from "../utils-css/media-query";
 
 export const List = styled.ul`
   font-size: ${(props) => props.theme.fontSizes[2]};
   color: ${(props) => props.theme.light.primaryTextColor};
   line-height: ${(props) => props.theme.lineHeight};
 
-  @media (prefers-color-scheme: dark) {
+  ${mediaQuery.dark} {
     color: ${(props) => props.theme.dark.primaryTextColor};
   }
 `;

src/components/design-system/atoms/overlay.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { opacity } from "../../opacity-keyframes";
+import { opacity } from "../utils-css/opacity-keyframes";
 import React, { useLayoutEffect } from "react";
 
 const useLockBodyScroll = () => {