refactor: team contact details

gatsby-node.js

@@ -1,8 +1,25 @@
 const { resolve } = require("path");
 const reviews = require("./src/data/reviews.json");
 const caseStudies = require("./src/data/case-studies.json");
+const team = require("./src/data/team.json");
 
 exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
+  team.team.forEach(person => {
+    const { name, email, phone, altPhone, title } = person;
+    const node = {
+      name,
+      email,
+      phone,
+      altPhone,
+      title,
+      id: createNodeId(`team-${name.replace(/ /g, "-")}`),
+      internal: {
+        type: "person",
+        contentDigest: createContentDigest(person)
+      }
+    };
+    actions.createNode(node);
+  });
   reviews.reviews.forEach((review, i) => {
     const { name, title, text, author, date } = review;
     const node = {

src/components/footer.js

@@ -30,6 +30,10 @@ const Cell = styled.div`
     `}
 `;
 
+const Item = styled.div`
+  margin-bottom: var(--spacing-y-sm);
+`;
+
 export default function Footer() {
   const year = new Date().getFullYear();
   return (
@@ -37,50 +41,56 @@ export default function Footer() {
       <Content>
         <Grid columns={[1, 2]} breakpoints={["45em"]}>
           <Cell>
-            <IconWithContent>
+            <Item>
-              <Icon color="dark" size="lg">
+              <IconWithContent>
-                <Phone />
+                <Icon color="dark" size="lg">
-              </Icon>
+                  <Phone />
-              <Link
+                </Icon>
-                weight="bold"
+                <Link
-                color="dark"
+                  weight="bold"
-                size="lg"
+                  color="dark"
-                to="tel:+447539051512"
+                  size="lg"
-                noDecoration
+                  to="tel:+447539051512"
-              >
+                  noDecoration
-                07539 051512
+                >
-              </Link>
+                  07539 051512
-            </IconWithContent>
+                </Link>
-            <IconWithContent>
+              </IconWithContent>
-              <Icon color="dark" size="lg">
+            </Item>
-                <Phone />
+            <Item>
-              </Icon>
+              <IconWithContent>
-              <Link
+                <Icon color="dark" size="lg">
-                weight="bold"
+                  <Phone />
-                color="dark"
+                </Icon>
-                size="lg"
+                <Link
-                to="tel:+447378839358"
+                  weight="bold"
-                noDecoration
+                  color="dark"
-              >
+                  size="lg"
-                07378 839358
+                  to="tel:+447378839358"
-              </Link>
+                  noDecoration
-            </IconWithContent>
+                >
+                  07378 839358
+                </Link>
+              </IconWithContent>
+            </Item>
           </Cell>
           <Cell flexEnd={"45em"}>
-            <IconWithContent>
+            <Item>
-              <Icon color="dark" size="lg">
+              <IconWithContent>
-                <Envelope />
+                <Icon color="dark" size="lg">
-              </Icon>
+                  <Envelope />
-              <Link
+                </Icon>
-                weight="bold"
+                <Link
-                color="dark"
+                  weight="bold"
-                size="md"
+                  color="dark"
-                to="mailto:quotations@abcprojectdesign.com"
+                  size="md"
-                noDecoration
+                  to="mailto:quotations@abcprojectdesign.com"
-              >
+                  noDecoration
-                quotations@abcprojectdesign.com
+                >
-              </Link>
+                  quotations@abcprojectdesign.com
-            </IconWithContent>
+                </Link>
+              </IconWithContent>
+            </Item>
           </Cell>
         </Grid>
         <Text size="xs">&copy; {year} Abc Project Ltd</Text>

src/components/icon-with-content.js

@@ -5,7 +5,6 @@ import { Icon } from "./";
 const Container = styled.div`
   display: flex;
   align-items: center;
-  margin-bottom: var(--spacing-y-sm);
 `;
 
 const IconWrapper = styled.div`

src/components/icon.js

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

src/components/index.js

@@ -23,5 +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 Text } from "./text";
 export { default as Tile } from "./tile";

src/components/team.js

@@ -0,0 +1,66 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Icon, IconWithContent, Link, Text } from ".";
+import PhoneIcon from "../icons/phone.svg";
+import EnvelopeIcon from "../icons/envelope.svg";
+
+const Container = styled.ul`
+  padding: 0;
+  list-style: none;
+`;
+
+const Item = styled.li`
+  margin-bottom: var(--spacing-y-md);
+`;
+
+export default function Team({ team = [] }) {
+  return (
+    <Container>
+      {team.map((person, i) => (
+        <Item key={i}>
+          <div>
+            <Text size="sm" noMargin>
+              <strong>{person.name}</strong> &ndash; {person.title}
+            </Text>
+          </div>
+          <div>
+            {person.phone && (
+              <IconWithContent>
+                <Icon color="dark" size="sm">
+                  <PhoneIcon />
+                </Icon>
+                <Link
+                  weight="bold"
+                  color="dark"
+                  size="sm"
+                  to={`tel:${person.phone
+                    .replace(/ /g, "")
+                    .replace(/^0/, "+44")}`}
+                  noDecoration
+                >
+                  {person.phone}
+                </Link>
+              </IconWithContent>
+            )}
+            {person.email && (
+              <IconWithContent>
+                <Icon color="dark" size="sm">
+                  <EnvelopeIcon />
+                </Icon>
+                <Link
+                  weight="bold"
+                  color="dark"
+                  size="sm"
+                  to={`mailto:${person.email}`}
+                  noDecoration
+                >
+                  {person.email}
+                </Link>
+              </IconWithContent>
+            )}
+          </div>
+        </Item>
+      ))}
+    </Container>
+  );
+}

src/data/team.json

@@ -0,0 +1,27 @@
+{
+  "team": [
+    {
+      "name": "Nicholas Day",
+      "email": "quotations@abcprojectdesign.com",
+      "phone": "07539 051512",
+      "altPhone": "01708 938455",
+      "title": "Head of Sales and Marketing"
+    },
+    {
+      "name": "Daniel Costea",
+      "email": "daniel.costea@abcprojectdesign.com",
+      "phone": "07378 839358",
+      "title": "Project Director"
+    },
+    {
+      "name": "Maria Antonia",
+      "email": "maria.antonia@abcprojectdesign.com",
+      "title": "Design and Consultation Manager"
+    },
+    {
+      "name": "Harry Jackson",
+      "email": "harry.jackson@abcprojectdesign.com",
+      "title": "After Sales Manager"
+    }
+  ]
+}

src/layout.js

@@ -30,6 +30,7 @@ const GlobalStyles = css`
     --font-size-lg: 1.125rem; // 18px
     --font-size-xl: 1.375rem; // 22px
     --font-size-xxl: 1.625rem; // 26px
+    --icon-size-sm: 12px;
     --icon-size-md: 16px;
     --icon-size-lg: 24px;
 

src/pages/contact.js

@@ -16,12 +16,13 @@ import {
   Map,
   Section,
   Select,
+  Team,
   Text
 } from "../components";
-import CheckCircle from "../icons/check-circle.svg";
+import CheckCircleIcon from "../icons/check-circle.svg";
-import Envelope from "../icons/envelope.svg";
+import EnvelopeIcon from "../icons/envelope.svg";
-import Phone from "../icons/phone.svg";
+import PhoneIcon from "../icons/phone.svg";
-import Team from "../icons/team.svg";
+import TeamIcon from "../icons/team.svg";
 
 const encode = data => {
   const formData = new FormData();
@@ -86,7 +87,7 @@ export default function Index({ data }) {
               <>
                 <IconWithContent>
                   <Icon color="dark" size="lg">
-                    <CheckCircle />
+                    <CheckCircleIcon />
                   </Icon>
                   <Text color="dark" size="lg">
                     Thank you for contacting us!
@@ -102,7 +103,7 @@ export default function Index({ data }) {
                 {formState === "submitting" && <Interrupt />}
                 <IconWithContent>
                   <Icon color="dark" size="lg">
-                    <Envelope />
+                    <EnvelopeIcon />
                   </Icon>
                   <Text color="dark" size="lg">
                     Contact us
@@ -222,102 +223,13 @@ export default function Index({ data }) {
           <div>
             <IconWithContent>
               <Icon color="dark" size="lg">
-                <Team />
+                <TeamIcon />
               </Icon>
               <Text color="dark" size="lg">
                 The team
               </Text>
             </IconWithContent>
-            <ul>
+            <Team team={data.allPerson.nodes} />
-              <li>
-                <Text>
-                  <Link to="mailto:quotations@abcprojectdesign.com">
-                    Nicholas Day
-                  </Link>{" "}
-                  &ndash; <em>Sales and Marketing Manager</em>
-                </Text>
-              </li>
-              <li>
-                <Text>
-                  <Link to="mailto:daniel.costea@abcprojectdesign.com">
-                    Daniel Costea
-                  </Link>{" "}
-                  &ndash; <em>Project Director</em>
-                </Text>
-              </li>
-              <li>
-                <Text>
-                  <Link to="mailto:maria.antonia@abcprojectdesign.com">
-                    Maria Antonia
-                  </Link>{" "}
-                  &ndash; <em>Design and Consultation Manager</em>
-                </Text>
-              </li>
-              <li>
-                <Text>
-                  <Link to="mailto:harry.jackson@abcprojectdesign.com">
-                    Harry Jackson
-                  </Link>{" "}
-                  &ndash; <em>After Sales Manager</em>
-                </Text>
-              </li>
-            </ul>
-            <IconWithContent>
-              <Icon color="dark" size="lg">
-                <Phone />
-              </Icon>
-              <Link
-                weight="bold"
-                color="dark"
-                size="lg"
-                to="tel:+447539051512"
-                noDecoration
-              >
-                07539 051512
-              </Link>
-            </IconWithContent>
-            <IconWithContent>
-              <Icon color="dark" size="lg">
-                <Phone />
-              </Icon>
-              <Link
-                weight="bold"
-                color="dark"
-                size="lg"
-                to="tel:+447378839358"
-                noDecoration
-              >
-                07378 839358
-              </Link>
-            </IconWithContent>
-            <IconWithContent>
-              <Icon color="dark" size="lg">
-                <Phone />
-              </Icon>
-              <Link
-                weight="bold"
-                color="dark"
-                size="lg"
-                to="tel:+441708938455"
-                noDecoration
-              >
-                01708 938455
-              </Link>
-            </IconWithContent>
-            <IconWithContent>
-              <Icon color="dark" size="lg">
-                <Envelope />
-              </Icon>
-              <Link
-                weight="bold"
-                color="dark"
-                size="md"
-                to="mailto:quotations@abcprojectdesign.com"
-                noDecoration
-              >
-                quotations@abcprojectdesign.com
-              </Link>
-            </IconWithContent>
           </div>
         </Grid>
       </Section>
@@ -354,5 +266,14 @@ export const query = graphql`
         }
       }
     }
+    allPerson {
+      nodes {
+        name
+        email
+        phone
+        altPhone
+        title
+      }
+    }
   }
 `;