Merge pull request #2963 from kiwicom/docs/image-widths

fix(docs): set image widths and allow side by side guidelines
kiwicom · May 27, 2021 · 8d2f03f · 8d2f03f
2 parents 61eca94 + f493c89
commit 8d2f03f
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 57 deletions.
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -41,8 +41,10 @@ module.exports = {
             resolve: "gatsby-remark-images",
             options: {
               linkImagesToOriginal: false,
-              // The base for generating different image widths.
-              maxWidth: 590,
+              // The base for generating different image widths
+              // Content max width is 80rem (about 809px with no zoom)
+              // Minus paddings on each side
+              maxWidth: 745,
               showCaptions: ["title"],
             },
           },

diff --git a/docs/src/components/DocLayout/index.tsx b/docs/src/components/DocLayout/index.tsx
@@ -107,7 +107,10 @@ export default function DocLayout({
                 }
               />
               <StyledMiddle>
-                <Hide block on={["smallMobile", "mediumMobile", "largeMobile", "tablet"]}>
+                <Hide
+                  block
+                  on={["smallMobile", "mediumMobile", "largeMobile", "tablet", "desktop"]}
+                >
                   <StyledDocNavigationWidth>
                     <StyledDocNavigationWrapper>
                       <DocNavigation currentUrl={path} />

diff --git a/docs/src/components/DocLayout/primitives/StyledMiddle.tsx b/docs/src/components/DocLayout/primitives/StyledMiddle.tsx
@@ -12,7 +12,7 @@ const StyledMiddle = styled.div`
     max-width: ${MAX_CONTENT_WIDTH};
     margin: 0 auto;
     box-sizing: content-box;
-    ${mediaQueries.desktop(css`
+    ${mediaQueries.largeDesktop(css`
       flex-direction: row;
       > * + * {
         margin-left: ${theme.orbit.spaceLarge};

diff --git a/docs/src/components/Guidelines/GuidelineImages.tsx b/docs/src/components/Guidelines/GuidelineImages.tsx
@@ -1,30 +1,27 @@
 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 ".";
 
 const GuidelineContainer = styled.div`
   ${({ theme }) => css`
     padding: ${theme.orbit.spaceXLarge};
+    width: 100%;
     padding-top: 0;
     background-color: ${theme.orbit.paletteCloudLight};
     border-radius: ${theme.orbit.spaceMedium};
   `}
 `;
 
-interface isMediumMobileProps {
-  isMediumMobile?: boolean | null;
-}
-
-interface ImageContainerProps extends isMediumMobileProps {
+interface ImageContainerProps {
   leftPadding?: boolean;
 }
 
 const ImageContainer = styled.div<ImageContainerProps>`
-  ${({ isMediumMobile, theme }) => css`
-    width: ${isMediumMobile ? "424px" : "100%"};
+  ${({ theme }) => css`
+    width: 100%;
+    max-width: 360px;
     background-color: ${theme.orbit.paletteWhite};
     border-radius: ${theme.orbit.spaceMedium};
     padding: ${theme.orbit.spaceXLarge};
@@ -43,14 +40,13 @@ const Border = styled.div<GuidelineType>`
 interface GuidelineWithImageProps extends GuidelineType, ImageProps {}
 
 const GuidelineWithImage = ({ children, type }: GuidelineWithImageProps) => {
-  const { isMediumMobile } = useMediaQuery();
   const image = children[0];
   const content = children.slice(1, children.length);
   return (
     <GuidelineContainer>
       <Border type={type}>
         <Stack>
-          <ImageContainer isMediumMobile={isMediumMobile}>{image}</ImageContainer>
+          <ImageContainer>{image}</ImageContainer>
           <Stack spacing="small">
             <DoDontHeader type={type} />
             {content}
@@ -78,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
@@ -2,7 +2,6 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { CheckCircle, CloseCircle } from "@kiwicom/orbit-components/icons";
 import { Stack } from "@kiwicom/orbit-components";
-import useMediaQuery from "@kiwicom/orbit-components/lib/hooks/useMediaQuery";
 
 import { GuidelineType } from ".";
 
@@ -19,16 +18,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 +39,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 +57,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";
@@ -50,14 +49,14 @@ const ContentContainer = styled.div`
 interface ImageContainerProps {
   noLeftPadding?: boolean;
   middleAlign?: boolean;
-  isMediumMobile?: boolean | null;
 }
 
 const ImageContainer = styled.div<ImageContainerProps>`
-  ${({ isMediumMobile, noLeftPadding, theme }) => css`
-    padding: ${noLeftPadding ? theme.orbit.spaceMedium : theme.orbit.spaceXLarge};
+  ${({ noLeftPadding, theme }) => css`
+    padding: ${noLeftPadding ? theme.orbit.spaceMedium : theme.orbit.spaceLarge};
     ${noLeftPadding && "padding-left: 0;"}
-    width: ${isMediumMobile ? "346px" : "100%"};
+    width: 100%;
+    max-width: 360px;
     background-color: ${theme.orbit.paletteWhite};
     border-radius: ${theme.orbit.spaceMedium};
   `}
@@ -84,8 +83,6 @@ export const DoDontHeader = ({ type }: GuidelineType) => (
 );
 
 export default function Guideline({ type = "do", title, children }: GuidelineProps) {
-  const { isDesktop, isMediumMobile, 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">
@@ -130,31 +127,28 @@ export default function Guideline({ type = "do", title, children }: GuidelinePro
             </HeadingWithLink>
             {content}
           </ContentContainer>
-          {images.length === 1 && (
-            <ImageContainer middleAlign isMediumMobile={isMediumMobile}>
-              {images}
-            </ImageContainer>
-          )}
+          {images.length === 1 && <ImageContainer middleAlign>{images}</ImageContainer>}
           {images.length > 1 && (
             <Stack
-              shrink
-              direction={isTablet ? "row" : "column"}
-              justify={isDesktop ? "end" : "start"}
-              basis="content"
+              basis="65%"
+              direction="column"
+              justify="start"
+              desktop={{ justify: "end" }}
+              tablet={{ direction: "row" }}
             >
               <Stack shrink direction="column" spacing="XXXSmall">
                 <DoDontHeaderWrapper>
                   <DoDontHeader type={type} />
                 </DoDontHeaderWrapper>
-                <ImageContainer isMediumMobile={isMediumMobile} noLeftPadding>
+                <ImageContainer noLeftPadding>
                   <ImageBorder type={type}>{images[0]}</ImageBorder>
                 </ImageContainer>
               </Stack>
               <Stack shrink direction="column" spacing="XXXSmall">
                 <DoDontHeaderWrapper>
                   <DoDontHeader type={typeOpposite} />
                 </DoDontHeaderWrapper>
-                <ImageContainer isMediumMobile={isMediumMobile} noLeftPadding>
+                <ImageContainer noLeftPadding>
                   <ImageBorder type={typeOpposite}>{images[1]}</ImageBorder>
                 </ImageContainer>
               </Stack>

diff --git a/docs/src/components/ImageContainer.tsx b/docs/src/components/ImageContainer.tsx
@@ -25,7 +25,8 @@ const ImageContainer = ({ align = "center", border, size = "large", children }:
     <div
       css={css`
         margin: ${getContainerMargin()};
-        width: ${getContainerWidth()};
+        width: 100%;
+        max-width: ${getContainerWidth()};
         ${border && `border: 1px solid ${defaultTheme.orbit.borderColorTableCell};`}
       `}
     >

diff --git a/docs/src/components/Navbar.tsx b/docs/src/components/Navbar.tsx
@@ -124,7 +124,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
           {searchOpen && !isHome && <Search onClose={() => setSearchOpen(false)} />}
           {docNavigation ? (
             <>
-              <Hide block on={["desktop", "largeDesktop"]}>
+              <Hide block on={["largeDesktop"]}>
                 <Button
                   type="white"
                   circled
@@ -133,7 +133,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
                   onClick={() => setMenuOpen(true)}
                 />
               </Hide>
-              <Hide block on={["smallMobile", "mediumMobile", "largeMobile", "tablet"]}>
+              <Hide block on={["smallMobile", "mediumMobile", "largeMobile", "tablet", "desktop"]}>
                 <Button
                   type="white"
                   iconLeft={<StarEmpty />}
@@ -186,7 +186,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
                       <ModalHeader
                         title={
                           <>
-                            <Hide block on={["desktop", "largeDesktop"]}>
+                            <Hide block on={["largeDesktop"]}>
                               <Stack flex direction="column" align="stretch" spacing="large">
                                 {/* TODO: ensure that tabs are accessible, code below is just guesswork */}
                                 <StyledTabList role="tablist">
@@ -225,7 +225,13 @@ const Navbar = ({ location, docNavigation }: Props) => {
                             </Hide>
                             <Hide
                               block
-                              on={["smallMobile", "mediumMobile", "largeMobile", "tablet"]}
+                              on={[
+                                "smallMobile",
+                                "mediumMobile",
+                                "largeMobile",
+                                "tablet",
+                                "desktop",
+                              ]}
                             >
                               <Stack flex align="center">
                                 <div>Your bookmarks</div>
@@ -238,7 +244,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
                         }
                       />
                       <ModalSection>
-                        <Hide block on={["desktop", "largeDesktop"]}>
+                        <Hide block on={["largeDesktop"]}>
                           {activeTab === "navigation" && (
                             <div
                               tabIndex={0}
@@ -262,7 +268,10 @@ const Navbar = ({ location, docNavigation }: Props) => {
                             </div>
                           )}
                         </Hide>
-                        <Hide block on={["smallMobile", "mediumMobile", "largeMobile", "tablet"]}>
+                        <Hide
+                          block
+                          on={["smallMobile", "mediumMobile", "largeMobile", "tablet", "desktop"]}
+                        >
                           <Bookmarks />
                         </Hide>
                       </ModalSection>
@@ -285,7 +294,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
                     </>
                   )}
                   <ModalFooter>
-                    <Hide block on={["desktop", "largeDesktop"]}>
+                    <Hide block on={["largeDesktop"]}>
                       {activeTab === "bookmarks" && editingBookmarks ? (
                         <>
                           <Button type="secondary" onClick={() => setEditingBookmarks(false)}>
@@ -309,7 +318,10 @@ const Navbar = ({ location, docNavigation }: Props) => {
                         </Button>
                       )}
                     </Hide>
-                    <Hide block on={["smallMobile", "mediumMobile", "largeMobile", "tablet"]}>
+                    <Hide
+                      block
+                      on={["smallMobile", "mediumMobile", "largeMobile", "tablet", "desktop"]}
+                    >
                       {!editingBookmarks && (
                         <Button type="secondary" onClick={() => setEditingBookmarks(true)}>
                           Edit bookmarks

diff --git a/docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1315%3A2202.png b/docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1315%3A2202.png
diff --git a/docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1418%3A0.png b/docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1418%3A0.png