Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 7f33016

Browse files
authored
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 🚀
1 parent 81b8948 commit 7f33016

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+237
-99
lines changed

.storybook/preview.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import { action } from "@storybook/addon-actions"
33
import { ThemeProvider } from 'styled-components';
4-
import { theme } from "../src/components/theme";
5-
import { GlobalStyle } from "../src/components/global-style";
4+
import { theme } from "../src/components/design-system/theme";
5+
import { GlobalStyle } from "../src/components/design-system/global-style";
66

77
/** https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/ **/
88
global.___loader = {

__stories__/colors.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import { Meta } from "@storybook/react";
33
import styled from "styled-components";
44
import { ContainerFluid } from "../src/components/design-system/atoms/container-fluid";
5-
import { dark, light } from "../src/components/theme";
5+
import { dark, light } from "../src/components/design-system/theme";
66

77
const ColorsContainer = styled.div`
88
display: flex;

__tests__/media-query.test.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { mediaQuery } from "../src/components/design-system/utils-css/media-query";
2+
3+
describe("media-query", () => {
4+
it("min-width", () => {
5+
expect(mediaQuery.minWidth.xs).toEqual("@media (min-width: 576px)");
6+
expect(mediaQuery.minWidth.sm).toEqual("@media (min-width: 768px)");
7+
expect(mediaQuery.minWidth.md).toEqual("@media (min-width: 992px)");
8+
expect(mediaQuery.minWidth.lg).toEqual("@media (min-width: 1200px)");
9+
});
10+
11+
it("max-width", () => {
12+
expect(mediaQuery.maxWidth.xs).toEqual("@media (max-width: 576px)");
13+
expect(mediaQuery.maxWidth.sm).toEqual("@media (max-width: 768px)");
14+
expect(mediaQuery.maxWidth.md).toEqual("@media (max-width: 992px)");
15+
expect(mediaQuery.maxWidth.lg).toEqual("@media (max-width: 1200px)");
16+
});
17+
18+
it("dark", () => {
19+
expect(mediaQuery.dark).toEqual("@media (prefers-color-scheme: dark)");
20+
});
21+
22+
it("device", () => {
23+
expect(mediaQuery.inputDevice.mouse).toEqual(
24+
"@media (hover: hover) and (pointer: fine)"
25+
);
26+
});
27+
});

graphql-types.ts

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -258,8 +258,6 @@ export type DirectoryCtimeArgs = {
258258
export type Site = Node & {
259259
buildTime?: Maybe<Scalars['Date']>;
260260
siteMetadata?: Maybe<SiteSiteMetadata>;
261-
port?: Maybe<Scalars['Int']>;
262-
host?: Maybe<Scalars['String']>;
263261
polyfill?: Maybe<Scalars['Boolean']>;
264262
pathPrefix?: Maybe<Scalars['String']>;
265263
id: Scalars['ID'];
@@ -1050,8 +1048,6 @@ export type QueryAllDirectoryArgs = {
10501048
export type QuerySiteArgs = {
10511049
buildTime?: Maybe<DateQueryOperatorInput>;
10521050
siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
1053-
port?: Maybe<IntQueryOperatorInput>;
1054-
host?: Maybe<StringQueryOperatorInput>;
10551051
polyfill?: Maybe<BooleanQueryOperatorInput>;
10561052
pathPrefix?: Maybe<StringQueryOperatorInput>;
10571053
id?: Maybe<StringQueryOperatorInput>;
@@ -2367,8 +2363,6 @@ export type SiteFieldsEnum =
23672363
| 'siteMetadata___contacts___links___medium'
23682364
| 'siteMetadata___contacts___links___devto'
23692365
| 'siteMetadata___contacts___links___instagram'
2370-
| 'port'
2371-
| 'host'
23722366
| 'polyfill'
23732367
| 'pathPrefix'
23742368
| 'id'
@@ -2502,8 +2496,6 @@ export type SiteGroupConnectionGroupArgs = {
25022496
export type SiteFilterInput = {
25032497
buildTime?: Maybe<DateQueryOperatorInput>;
25042498
siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
2505-
port?: Maybe<IntQueryOperatorInput>;
2506-
host?: Maybe<StringQueryOperatorInput>;
25072499
polyfill?: Maybe<BooleanQueryOperatorInput>;
25082500
pathPrefix?: Maybe<StringQueryOperatorInput>;
25092501
id?: Maybe<StringQueryOperatorInput>;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { css } from "styled-components";
2+
import { mediaQuery } from "../utils-css/media-query";
23

34
export const callToActionStyle = css`
45
font-size: ${(props) => props.theme.fontSizes[3]};
@@ -11,7 +12,7 @@ export const callToActionStyle = css`
1112
line-height: 1;
1213
text-align: center;
1314
14-
@media (prefers-color-scheme: dark) {
15+
${mediaQuery.dark} {
1516
background-color: ${(props) => props.theme.dark.accentColor};
1617
color: ${(props) => props.theme.dark.textAbovePrimaryColor};
1718
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import styled from "styled-components";
2+
import { mediaQuery } from "../utils-css/media-query";
23

34
export const ContainerFullscreen = styled.div`
45
display: flex;
@@ -10,7 +11,7 @@ export const ContainerFullscreen = styled.div`
1011
width: 100%;
1112
background-color: ${(props) => props.theme.light.primaryColor};
1213
13-
@media (prefers-color-scheme: dark) {
14+
${mediaQuery.dark} {
1415
background-color: ${(props) => props.theme.dark.primaryColor};
1516
}
1617
`;
Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import styled from "styled-components";
22
import { ContainerFluid } from "./container-fluid";
3+
import { mediaQuery } from "../utils-css/media-query";
34

45
export const Container = styled(ContainerFluid)`
5-
@media (min-width: 576px) {
6+
${mediaQuery.minWidth.xs} {
67
max-width: 540px;
78
}
89
9-
@media (min-width: 768px) {
10+
${mediaQuery.minWidth.sm} {
1011
max-width: 720px;
1112
}
1213
13-
@media (min-width: 992px) {
14+
${mediaQuery.minWidth.md} {
1415
max-width: 960px;
1516
}
1617
`;
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import styled from "styled-components";
22
import { StyledIconBase } from "@styled-icons/styled-icon";
3+
import { mediaQuery } from "../utils-css/media-query";
34

45
export const Icon = styled.div`
56
${StyledIconBase} {
67
color: ${(props) => props.theme.light.textAbovePrimaryColor};
78
8-
@media (prefers-color-scheme: dark) {
9+
${mediaQuery.dark} {
910
color: ${(props) => props.theme.dark.textAbovePrimaryColor};
1011
}
1112
`;
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import styled from "styled-components";
2+
import { mediaQuery } from "../utils-css/media-query";
23

34
export const List = styled.ul`
45
font-size: ${(props) => props.theme.fontSizes[2]};
56
color: ${(props) => props.theme.light.primaryTextColor};
67
line-height: ${(props) => props.theme.lineHeight};
78
8-
@media (prefers-color-scheme: dark) {
9+
${mediaQuery.dark} {
910
color: ${(props) => props.theme.dark.primaryTextColor};
1011
}
1112
`;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from "styled-components";
2-
import { opacity } from "../../opacity-keyframes";
2+
import { opacity } from "../utils-css/opacity-keyframes";
33
import React, { useLayoutEffect } from "react";
44

55
const useLockBodyScroll = () => {

0 commit comments

Comments
 (0)