style: prettier

src/case-study.js

@@ -7,12 +7,12 @@ import {
   Heading,
   Section,
   Table,
-  Text
+  Text,
 } from "./components";
 
 const shadows = {
   white: "xl-white",
-  "dark-grey": "xl-black"
+  "dark-grey": "xl-black",
 };
 
 export default function CaseStudy({ data }) {
@@ -26,9 +26,9 @@ export default function CaseStudy({ data }) {
     price,
     time_taken,
     date,
-    content
+    content,
   } = data.caseStudy;
-  const images = data.images.nodes.map(node => node.childImageSharp);
+  const images = data.images.nodes.map((node) => node.childImageSharp);
   return (
     <Layout location={path} title={`${title} Case Study`}>
       <Header image={images[image].full}>

src/components/button.js

@@ -13,7 +13,7 @@ const Container = styled.button`
   text-decoration: none;
   cursor: pointer;
 
-  ${props =>
+  ${(props) =>
     props.float &&
     css`
       float: ${props.float};

src/components/content.js

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 
 const Container = styled.div`
-  transform: ${props =>
+  transform: ${(props) =>
     props.offset
       ? `perspective(500px) translate3d(-10%, 0, -200px)`
       : `translate3d(0, 0, 0)`};

src/components/custom-slick.js

@@ -9,7 +9,7 @@ import "slick-carousel/slick/slick.css";
 const Button = styled.button`
   position: absolute;
   top: 50%;
-  ${props =>
+  ${(props) =>
     props.variant === "right" &&
     css`
       right: 0;
@@ -61,7 +61,7 @@ export default function CustomSlick({ children }) {
     speed: 500,
     autoplaySpeed: 10000,
     slidesToShow: 1,
-    slidesToScroll: 1
+    slidesToScroll: 1,
   };
   useEffect(() => {
     slick.current.slickPlay();

src/components/grid.js

@@ -5,7 +5,7 @@ import { css } from "@emotion/react";
 const Container = styled.div`
   display: grid;
   gap: var(--spacing-y-lg) var(--spacing-x-md);
-  ${props =>
+  ${(props) =>
     props.columns &&
     props.columns.map((column, i) =>
       i === 0 && column > 1
@@ -24,7 +24,7 @@ const Container = styled.div`
 `
     )}
 
-  ${props =>
+  ${(props) =>
     props.verticalSeparator &&
     css`
       @media (max-width: ${props.verticalSeparator}) {
@@ -43,7 +43,7 @@ export default function Grid({
   columns,
   breakpoints = ["30em"],
   verticalSeparator,
-  children
+  children,
 }) {
   return (
     <Container

src/components/header-logo.js

@@ -27,7 +27,7 @@ const Top = styled.div`
     fill: var(--color-secondary);
   }
 
-  ${props =>
+  ${(props) =>
     props.visible &&
     css`
       filter: none;
@@ -39,7 +39,7 @@ const Top = styled.div`
 const Middle = styled.div`
   opacity: 0;
   transition: opacity 0.5s ease-in 0.75s;
-  ${props =>
+  ${(props) =>
     props.visible &&
     css`
       opacity: 1;
@@ -63,7 +63,7 @@ const Bottom = styled.div`
     fill: var(--color-secondary);
   }
 
-  ${props =>
+  ${(props) =>
     props.visible &&
     css`
       filter: none;

src/components/header.js

@@ -7,34 +7,34 @@ const Container = styled.header`
   height: 50vh;
   min-height: 280px;
   color: var(--color-white);
-  ${props => props.avoidNav && `margin-top: 40px;`}
+  ${(props) => props.avoidNav && `margin-top: 40px;`}
 `;
 
 const Content = styled.div`
   position: absolute;
-  ${props =>
+  ${(props) =>
     props.posY !== "bottom" &&
     css`
       top: ${props.posY === "top" ? 0 : "50%"};
     `}
-  ${props =>
+  ${(props) =>
     props.posY === "bottom" &&
     css`
       bottom: 0;
     `}
-  ${props =>
+  ${(props) =>
     props.posX !== "right" &&
     css`
       left: ${props.posX === "left" ? 0 : "50%"};
     `}
-  ${props =>
+  ${(props) =>
     props.posX === "right" &&
     css`
       right: 0;
     `}
   transform: translate(
-    ${props => (props.posX === "middle" ? "-50%" : 0)},
+    ${(props) => (props.posX === "middle" ? "-50%" : 0)},
-    ${props => (props.posY === "middle" ? "-50%" : 0)}
+    ${(props) => (props.posY === "middle" ? "-50%" : 0)}
   );
   max-width: var(--page-max-width);
   padding: var(--spacing-y-sm) var(--spacing-x-sm);
@@ -50,7 +50,7 @@ export default function Header({
   avoidNav,
   variant,
   swap,
-  children
+  children,
 }) {
   const [posY, posX] = position.split(" ");
   return (

src/components/heading.js

@@ -3,20 +3,21 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 
 const Styles = styled.h1`
-  margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
+  margin: ${(props) => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
-  font-size: ${props => `var(--font-size-${props.size})`};
+  font-size: ${(props) => `var(--font-size-${props.size})`};
-  text-shadow: 0 0 ${props => props.shadowSize} ${props => props.shadowColor};
+  text-shadow: 0 0 ${(props) => props.shadowSize}
-  ${props =>
+    ${(props) => props.shadowColor};
+  ${(props) =>
     props.color &&
     css`
       color: var(--color-${props.color});
     `}
-  ${props =>
+  ${(props) =>
     props.noWrap &&
     css`
       white-space: nowrap;
     `}
-  ${props =>
+  ${(props) =>
     props.align &&
     css`
       text-align: ${props.align};
@@ -29,19 +30,19 @@ const sizes = {
   h3: "lg",
   h4: "lg",
   h5: "lg",
-  h6: "lg"
+  h6: "lg",
 };
 
 const shadowSizes = {
   sm: "2px",
   md: "5px",
   lg: "10px",
-  xl: "15px"
+  xl: "15px",
 };
 
 const shadowColors = {
   white: "rgba(255, 255, 255, 0.25)",
-  black: "rgba(0, 0, 0, 0.25)"
+  black: "rgba(0, 0, 0, 0.25)",
 };
 
 export default function Heading({

src/components/icon-with-content.js

@@ -21,7 +21,7 @@ const Content = styled.div`
 export default function IconWithContent({ children }) {
   return (
     <Container>
-      {children.map(child => {
+      {children.map((child) => {
         if (child.type === Icon) {
           return <IconWrapper key="icon">{child}</IconWrapper>;
         }

src/components/icon.js

@@ -4,9 +4,9 @@ import { css } from "@emotion/react";
 
 const Container = styled.span`
   display: inline-flex;
-  width: ${props => `var(--icon-size-${props.size})`};
+  width: ${(props) => `var(--icon-size-${props.size})`};
-  height: ${props => `var(--icon-size-${props.size})`};
+  height: ${(props) => `var(--icon-size-${props.size})`};
-  ${props =>
+  ${(props) =>
     props.color &&
     css`
       color: var(--color-${props.color});

src/components/index.js

@@ -23,6 +23,6 @@ export { default as ReviewSummary } from "./review-summary";
 export { default as Section } from "./section";
 export { default as Select } from "./select";
 export { default as Table } from "./table";
-export { default as Team } from './team';
+export { default as Team } from "./team";
 export { default as Text } from "./text";
 export { default as Tile } from "./tile";

src/components/input-text.js

@@ -23,7 +23,7 @@ export default function InputText({
   value,
   onChange,
   required,
-  textArea
+  textArea,
 }) {
   return (
     <Input

src/components/link.js

@@ -4,13 +4,13 @@ import { css } from "@emotion/react";
 import { Link as GatsbyLink } from "gatsby";
 
 const StyledLink = styled.a`
-  ${props =>
+  ${(props) =>
     props.size &&
     css`
       font-size: var(--font-size-${props.size});
     `}
   color: var(--color-dark);
-  ${props =>
+  ${(props) =>
     props.noDecoration
       ? css`
           text-decoration: none;
@@ -20,7 +20,7 @@ const StyledLink = styled.a`
           text-decoration-thickness: 2px;
           text-underline-offset: 3px;
         `}
-  ${props =>
+  ${(props) =>
     props.weight &&
     css`
       font-weight: ${props.weight};

src/components/map.js

@@ -27,7 +27,7 @@ export default function CustomMap({ ...other }) {
   `);
 
   const Wrapper = GoogleApiWrapper({
-    apiKey: data.site.siteMetadata.secrets.GMAPS_APIKEY
+    apiKey: data.site.siteMetadata.secrets.GMAPS_APIKEY,
   })(MapContainer);
   return <Wrapper {...other} />;
 }

src/components/menu-button.js

@@ -35,7 +35,7 @@ const Bar = styled.span`
 
 const TopBar = styled(Bar)`
   top: 5px;
-  transform: ${props =>
+  transform: ${(props) =>
     props.open
       ? `translate3d(0, 10px, 0) rotate(50deg)`
       : `translate3d(0, 0, 0) rotate(0)`};
@@ -44,13 +44,13 @@ const TopBar = styled(Bar)`
 
 const MiddleBar = styled(Bar)`
   top: 15px;
-  opacity: ${props => (props.open ? 0 : 1)};
+  opacity: ${(props) => (props.open ? 0 : 1)};
   transition: opacity 1s ease-in;
 `;
 
 const BottomBar = styled(Bar)`
   top: 25px;
-  transform: ${props =>
+  transform: ${(props) =>
     props.open
       ? `translate3d(0, -10px, 0) rotate(-410deg)`
       : `translate3d(0, 0, 0) rotate(0)`};

src/components/nav-item.js

@@ -28,10 +28,10 @@ const ListItem = styled.li`
   }
 
   @media (max-width: 30em) {
-    transform: ${props =>
+    transform: ${(props) =>
       props.open ? `translate3d(0, 0, 0)` : `translate3d(-100%, 0, 0)`};
     transition: transform 0.3s ease-in-out
-      calc(0.15s + (${props => props.index} * 0.1s));
+      calc(0.15s + (${(props) => props.index} * 0.1s));
   }
 `;
 

src/components/nav-link.js

@@ -25,7 +25,7 @@ const Link = styled(GatsbyLink)`
     margin: 0 var(--spacing-x-xs);
     padding: 9px 0;
     border-bottom: 2px solid
-      ${props =>
+      ${(props) =>
         props.active === "true" || props.partiallyActive
           ? `var(--color-white)`
           : `transparent`};

src/components/nav.js

@@ -11,10 +11,10 @@ const Container = styled.div`
   bottom: 0;
   left: 0;
   z-index: 6;
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.open ? `rgba(0, 0, 0, 0.8)` : `rgba(0, 0, 0, 0.4)`};
   backdrop-filter: blur(2px);
-  transform: ${props =>
+  transform: ${(props) =>
     props.open
       ? `translate3d(0, 0, 0)`
       : `translate3d(0, calc(-100% + 40px), 0)`};
@@ -51,7 +51,7 @@ const Heading = styled(Link)`
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  opacity: ${props => (props.hidden ? 0 : 1)};
+  opacity: ${(props) => (props.hidden ? 0 : 1)};
   transform: opacity 0.3s ease-in;
 
   svg {

src/components/review-summary.js

@@ -12,7 +12,7 @@ import Calendar from "../icons/calendar.svg";
 const ICONS = {
   Bark: <Bark />,
   Checkatrade: <Checkatrade />,
-  "Rated People": <RatedPeople />
+  "Rated People": <RatedPeople />,
 };
 
 const Container = styled.div`

src/components/section.js

@@ -4,10 +4,10 @@ import { Heading } from ".";
 
 const Container = styled.div`
   padding: var(--spacing-y-lg) var(--spacing-x-sm);
-  ${props => !props.variant && `background-color: var(--color-white);`}
+  ${(props) => !props.variant && `background-color: var(--color-white);`}
-  ${props =>
+  ${(props) =>
     props.variant === "primary" && `background-color: var(--color-light);`}
-  ${props =>
+  ${(props) =>
     props.variant === "transparent" &&
     `background-color: var(--color-semi-transparent);`}
 `;
@@ -25,7 +25,7 @@ export default function Section({
   heading,
   headingElement = "h2",
   children,
-  variant
+  variant,
 }) {
   return (
     <Container variant={variant}>

src/components/text.js

@@ -3,28 +3,28 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 
 const StyledText = styled.p`
-  margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-md)`)};
+  margin: ${(props) => (props.noMargin ? 0 : `0 0 var(--spacing-y-md)`)};
-  ${props =>
+  ${(props) =>
     props.textStyle &&
     css`
       font-style: ${props.textStyle};
     `}
-  ${props =>
+  ${(props) =>
     props.align &&
     css`
       text-align: ${props.align};
     `}
-  ${props =>
+  ${(props) =>
     props.size &&
     css`
       font-size: var(--font-size-${props.size});
     `}
-  ${props =>
+  ${(props) =>
     props.color &&
     css`
       color: var(--color-${props.color});
     `}
-  ${props =>
+  ${(props) =>
     props.weight &&
     css`
       font-weight: ${props.weight};

src/layout.js

@@ -119,10 +119,10 @@ export default function Layout({ location, title: pageTitle, children }) {
           title={pageTitle ? `${pageTitle} : ${title}` : title}
           meta={[
             { name: "description", content: description },
-            { name: "keywords", content: keywords }
+            { name: "keywords", content: keywords },
           ]}
           htmlAttributes={{
-            lang: "en"
+            lang: "en",
           }}
         />
         <Global styles={GlobalStyles} />
@@ -130,8 +130,8 @@ export default function Layout({ location, title: pageTitle, children }) {
           styles={
             navOpen && {
               body: {
-                overflowY: "hidden"
+                overflowY: "hidden",
-              }
+              },
             }
           }
         />

src/pages/area-covered.js

@@ -17,7 +17,7 @@ const triangleCoords = [
   { lat: 51.611, lng: -0.45 }, // Northwood
   { lat: 51.737, lng: -0.399 }, // St Albans
   { lat: 51.992, lng: -0.281 }, // Letchworth
-  { lat: 52.253, lng: 0.109 } // Cambridge
+  { lat: 52.253, lng: 0.109 }, // Cambridge
 ];
 
 export default function Index() {
@@ -28,7 +28,7 @@ export default function Index() {
           <Map
             initialCenter={{
               lat: 51.765,
-              lng: 0.022
+              lng: 0.022,
             }}
             zoom={7}
             mapTypeContol={false}

src/pages/index.js

@@ -15,7 +15,7 @@ import {
   ReviewSummary,
   Section,
   Text,
-  Tile
+  Tile,
 } from "../components";
 import Calendar from "../icons/calendar.svg";
 import CheckCircle from "../icons/check-circle.svg";