From 87f7445324c9917c4f4602b0a62db2e045c461fb Mon Sep 17 00:00:00 2001 From: Aaron Collier Date: Tue, 25 May 2021 19:24:30 +0200 Subject: [PATCH 1/6] fix: allow guidelines to be side by side --- docs/gatsby-config.js | 6 +++-- .../components/Guidelines/GuidelineImages.tsx | 15 +++++------- docs/src/components/Guidelines/index.tsx | 23 ++++++++----------- 3 files changed, 19 insertions(+), 25 deletions(-) diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js index 850a60c3af..b737020cf7 100644 --- 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/Guidelines/GuidelineImages.tsx b/docs/src/components/Guidelines/GuidelineImages.tsx index 9a1a6cde1a..a9eff60d61 100644 --- a/docs/src/components/Guidelines/GuidelineImages.tsx +++ b/docs/src/components/Guidelines/GuidelineImages.tsx @@ -8,23 +8,21 @@ 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` - ${({ 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 +41,13 @@ const Border = styled.div` 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 ( - {image} + {image} {content} diff --git a/docs/src/components/Guidelines/index.tsx b/docs/src/components/Guidelines/index.tsx index 288bb0adce..39742ec056 100644 --- a/docs/src/components/Guidelines/index.tsx +++ b/docs/src/components/Guidelines/index.tsx @@ -50,14 +50,14 @@ const ContentContainer = styled.div` interface ImageContainerProps { noLeftPadding?: boolean; middleAlign?: boolean; - isMediumMobile?: boolean | null; } const ImageContainer = styled.div` - ${({ 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,7 +84,7 @@ export const DoDontHeader = ({ type }: GuidelineType) => ( ); export default function Guideline({ type = "do", title, children }: GuidelineProps) { - const { isDesktop, isMediumMobile, isTablet } = useMediaQuery(); + const { isDesktop, isTablet } = useMediaQuery(); const isImage = object => { if (object.props?.children?.props?.className === imageWrapperClass) return true; @@ -130,23 +130,18 @@ export default function Guideline({ type = "do", title, children }: GuidelinePro {content} - {images.length === 1 && ( - - {images} - - )} + {images.length === 1 && {images}} {images.length > 1 && ( - + {images[0]} @@ -154,7 +149,7 @@ export default function Guideline({ type = "do", title, children }: GuidelinePro - + {images[1]} From 2615c385b80a60d37a631378d7ed795903d57adc Mon Sep 17 00:00:00 2001 From: Aaron Collier Date: Tue, 25 May 2021 19:24:48 +0200 Subject: [PATCH 2/6] chore: include figma images --- .../4QJZqvBvRrLu6t9mwObCkA/1315%3A2202.png | Bin 0 -> 16909 bytes .../4QJZqvBvRrLu6t9mwObCkA/1418%3A0.png | Bin 0 -> 19871 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1315%3A2202.png create mode 100644 docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1418%3A0.png diff --git a/docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1315%3A2202.png b/docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1315%3A2202.png new file mode 100644 index 0000000000000000000000000000000000000000..f36fbab0799aadf474ebc5b04ff12d182fe62cbd GIT binary patch literal 16909 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 literal 0 HcmV?d00001 diff --git a/docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1418%3A0.png b/docs/src/figma-images/4QJZqvBvRrLu6t9mwObCkA/1418%3A0.png new file mode 100644 index 0000000000000000000000000000000000000000..5428b7d85da692b8310e89dbe3176351f1a15c5c GIT binary patch literal 19871 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 Y{^z@~FeXyzRU*iHp00i_>zopr0Ggs}KmY&$ literal 0 HcmV?d00001 From ef4992f180a1c4d733458217e2ac222787237d9c Mon Sep 17 00:00:00 2001 From: Aaron Collier Date: Wed, 26 May 2021 10:44:26 +0200 Subject: [PATCH 3/6] fix: stop using useMediaQuery hook for Guidelines to avoid problems with SSR and not resizing on initial load --- .../components/Guidelines/GuidelineImages.tsx | 8 ++++--- .../Guidelines/GuidelinesSideBySide.tsx | 21 ++++++++----------- docs/src/components/Guidelines/index.tsx | 11 +++++----- 3 files changed, 19 insertions(+), 21 deletions(-) diff --git a/docs/src/components/Guidelines/GuidelineImages.tsx b/docs/src/components/Guidelines/GuidelineImages.tsx index a9eff60d61..3210705fa2 100644 --- 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 {children}; + return ( + + {children} + + ); } diff --git a/docs/src/components/Guidelines/GuidelinesSideBySide.tsx b/docs/src/components/Guidelines/GuidelinesSideBySide.tsx index 0f4729ae1d..b5d3f06951 100644 --- a/docs/src/components/Guidelines/GuidelinesSideBySide.tsx +++ b/docs/src/components/Guidelines/GuidelinesSideBySide.tsx @@ -19,16 +19,12 @@ const Wrapper = styled.div` `} `; -interface StyledContainerProps { - isTablet?: boolean | null; -} - -const StyledContainer = styled.div` - ${({ 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 ( - + {React.Children.map(children.props?.children, child => ( {child.props.children} @@ -63,7 +58,9 @@ export const Dont = ({ children }) => ( ); export default function GuidelinesSideBySide({ children }) { - const { isTablet } = useMediaQuery(); - - return {children}; + return ( + + {children} + + ); } diff --git a/docs/src/components/Guidelines/index.tsx b/docs/src/components/Guidelines/index.tsx index 39742ec056..ffca2cb5dc 100644 --- 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 ) : ( ))} - + @@ -134,8 +131,10 @@ export default function Guideline({ type = "do", title, children }: GuidelinePro {images.length > 1 && ( From dd298a184321f55c506f745539c112f0159950cd Mon Sep 17 00:00:00 2001 From: Aaron Collier Date: Wed, 26 May 2021 14:40:41 +0200 Subject: [PATCH 4/6] fix: constrain guideline images (stop overflow) --- docs/src/components/Guidelines/GuidelinesSideBySide.tsx | 1 - docs/src/components/ImageContainer.tsx | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/components/Guidelines/GuidelinesSideBySide.tsx b/docs/src/components/Guidelines/GuidelinesSideBySide.tsx index b5d3f06951..77177b9482 100644 --- 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 "."; diff --git a/docs/src/components/ImageContainer.tsx b/docs/src/components/ImageContainer.tsx index 53b32c73e8..9c3e7b7f58 100644 --- a/docs/src/components/ImageContainer.tsx +++ b/docs/src/components/ImageContainer.tsx @@ -25,7 +25,8 @@ const ImageContainer = ({ align = "center", border, size = "large", children }:
From d9c9c8e528179fcc713ed8d7b36f3b9f91788893 Mon Sep 17 00:00:00 2001 From: Aaron Collier Date: Wed, 26 May 2021 14:49:11 +0200 Subject: [PATCH 5/6] fix: more space for content at smaller sizes --- docs/src/components/DocLayout/index.tsx | 5 ++++- docs/src/components/Navbar.tsx | 28 ++++++++++++++++++------- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/docs/src/components/DocLayout/index.tsx b/docs/src/components/DocLayout/index.tsx index 1dc09fd55f..208d600931 100644 --- a/docs/src/components/DocLayout/index.tsx +++ b/docs/src/components/DocLayout/index.tsx @@ -107,7 +107,10 @@ export default function DocLayout({ } /> - + diff --git a/docs/src/components/Navbar.tsx b/docs/src/components/Navbar.tsx index 2412388277..7eb6e1047b 100644 --- a/docs/src/components/Navbar.tsx +++ b/docs/src/components/Navbar.tsx @@ -124,7 +124,7 @@ const Navbar = ({ location, docNavigation }: Props) => { {searchOpen && !isHome && setSearchOpen(false)} />} {docNavigation ? ( <> - + )} - + {!editingBookmarks && (