fix: stop using useMediaQuery hook for Guidelines

to avoid problems with SSR and not resizing on initial load
kiwicom · May 26, 2021 · 182bafe · 182bafe
1 parent 38abe28
commit 182bafe
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/docs/src/components/Guidelines/GuidelineImages.tsx b/docs/src/components/Guidelines/GuidelineImages.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { Stack } from "@kiwicom/orbit-components";
-import useMediaQuery from "@kiwicom/orbit-components/lib/hooks/useMediaQuery";
 
 import { DoDontHeader, GuidelineType } from ".";
 
@@ -75,6 +74,9 @@ interface GuidelineImagesProps {
 }
 
 export default function GuidelineImages({ children }: GuidelineImagesProps) {
-  const { isDesktop } = useMediaQuery();
-  return <Stack direction={isDesktop ? "row" : "column"}>{children}</Stack>;
+  return (
+    <Stack direction="column" desktop={{ direction: "row" }}>
+      {children}
+    </Stack>
+  );
 }
diff --git a/docs/src/components/Guidelines/GuidelinesSideBySide.tsx b/docs/src/components/Guidelines/GuidelinesSideBySide.tsx
@@ -19,16 +19,12 @@ const Wrapper = styled.div<GuidelineType>`
   `}
 `;
 
-interface StyledContainerProps {
-  isTablet?: boolean | null;
-}
-
-const StyledContainer = styled.div<StyledContainerProps>`
-  ${({ isTablet, theme }) => css`
+const StyledContainer = styled.div`
+  ${({ theme }) => css`
     padding: 0 ${theme.orbit.spaceLarge};
     background-color: ${theme.orbit.paletteCloudLight};
     border-radius: 16px;
-    width: ${isTablet ? "50%" : "100%"};
+    width: 100%;
   `}
 `;
 
@@ -44,9 +40,8 @@ const GuidelineItem = ({ children, type }: GuidelineItemProps) => (
 );
 
 const GuidelineContainer = ({ children, type }) => {
-  const { isTablet } = useMediaQuery();
   return (
-    <StyledContainer isTablet={isTablet}>
+    <StyledContainer>
       <Wrapper type={type}>
         {React.Children.map(children.props?.children, child => (
           <GuidelineItem type={type}>{child.props.children}</GuidelineItem>
@@ -63,7 +58,9 @@ export const Dont = ({ children }) => (
 );
 
 export default function GuidelinesSideBySide({ children }) {
-  const { isTablet } = useMediaQuery();
-
-  return <Stack direction={isTablet ? "row" : "column"}>{children}</Stack>;
+  return (
+    <Stack direction="column" tablet={{ direction: "row" }}>
+      {children}
+    </Stack>
+  );
 }
diff --git a/docs/src/components/Guidelines/index.tsx b/docs/src/components/Guidelines/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { CheckCircle, CloseCircle } from "@kiwicom/orbit-components/icons";
 import { Stack, Text, Heading } from "@kiwicom/orbit-components";
-import useMediaQuery from "@kiwicom/orbit-components/lib/hooks/useMediaQuery";
 import { imageWrapperClass } from "gatsby-remark-images/constants";
 
 import HeadingWithLink from "../HeadingWithLink";
@@ -84,8 +83,6 @@ export const DoDontHeader = ({ type }: GuidelineType) => (
 );
 
 export default function Guideline({ type = "do", title, children }: GuidelineProps) {
-  const { isDesktop, isTablet } = useMediaQuery();
-
   const isImage = object => {
     if (object.props?.children?.props?.className === imageWrapperClass) return true;
     return false;
@@ -121,7 +118,7 @@ export default function Guideline({ type = "do", title, children }: GuidelinePro
           ) : (
             <CloseCircle color="critical" ariaLabel="Don't" />
           ))}
-        <Stack justify="between" shrink direction={isDesktop ? "row" : "column"}>
+        <Stack justify="between" shrink direction="column" desktop={{ direction: "row" }}>
           <ContentContainer>
             <HeadingWithLink noId>
               <Heading as="h3" type="title3">
@@ -134,8 +131,10 @@ export default function Guideline({ type = "do", title, children }: GuidelinePro
           {images.length > 1 && (
             <Stack
               basis="65%"
-              direction={isTablet ? "row" : "column"}
-              justify={isDesktop ? "end" : "start"}
+              direction="column"
+              justify="start"
+              desktop={{ justify: "end" }}
+              tablet={{ direction: "row" }}
             >
               <Stack shrink direction="column" spacing="XXXSmall">
                 <DoDontHeaderWrapper>