From 086199593638eb2ed98471155b8d50160d3ccaed Mon Sep 17 00:00:00 2001 From: Dan Head Date: Sun, 7 Feb 2021 22:39:44 +0000 Subject: [PATCH] refactor: team contact details --- gatsby-node.js | 17 ++++ src/components/footer.js | 94 +++++++++++++---------- src/components/icon-with-content.js | 1 - src/components/icon.js | 2 +- src/components/index.js | 1 + src/components/team.js | 66 ++++++++++++++++ src/data/team.json | 27 +++++++ src/layout.js | 1 + src/pages/contact.js | 115 +++++----------------------- 9 files changed, 183 insertions(+), 141 deletions(-) create mode 100644 src/components/team.js create mode 100644 src/data/team.json diff --git a/gatsby-node.js b/gatsby-node.js index c91fb98..d69da8a 100644 --- a/gatsby-node.js +++ b/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 = { diff --git a/src/components/footer.js b/src/components/footer.js index 4bd8d86..741e84d 100644 --- a/src/components/footer.js +++ b/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() { - - - - - - 07539 051512 - - - - - - - - 07378 839358 - - + + + + + + + 07539 051512 + + + + + + + + + + 07378 839358 + + + - - - - - - quotations@abcprojectdesign.com - - + + + + + + + quotations@abcprojectdesign.com + + + © {year} Abc Project Ltd diff --git a/src/components/icon-with-content.js b/src/components/icon-with-content.js index a0e5b58..91a0459 100644 --- a/src/components/icon-with-content.js +++ b/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` diff --git a/src/components/icon.js b/src/components/icon.js index 43be91d..2cf8308 100644 --- a/src/components/icon.js +++ b/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 => diff --git a/src/components/index.js b/src/components/index.js index f558c45..a229cef 100644 --- a/src/components/index.js +++ b/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"; diff --git a/src/components/team.js b/src/components/team.js new file mode 100644 index 0000000..b3686cc --- /dev/null +++ b/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 ( + + {team.map((person, i) => ( + +
+ + {person.name} – {person.title} + +
+
+ {person.phone && ( + + + + + + {person.phone} + + + )} + {person.email && ( + + + + + + {person.email} + + + )} +
+ + ))} + + ); +} diff --git a/src/data/team.json b/src/data/team.json new file mode 100644 index 0000000..6e15523 --- /dev/null +++ b/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" + } + ] +} diff --git a/src/layout.js b/src/layout.js index 1fe232c..7b2ed84 100644 --- a/src/layout.js +++ b/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; diff --git a/src/pages/contact.js b/src/pages/contact.js index c2e46d7..6b3ea72 100644 --- a/src/pages/contact.js +++ b/src/pages/contact.js @@ -16,12 +16,13 @@ import { Map, Section, Select, + Team, Text } from "../components"; -import CheckCircle from "../icons/check-circle.svg"; -import Envelope from "../icons/envelope.svg"; -import Phone from "../icons/phone.svg"; -import Team from "../icons/team.svg"; +import CheckCircleIcon from "../icons/check-circle.svg"; +import EnvelopeIcon from "../icons/envelope.svg"; +import PhoneIcon from "../icons/phone.svg"; +import TeamIcon from "../icons/team.svg"; const encode = data => { const formData = new FormData(); @@ -86,7 +87,7 @@ export default function Index({ data }) { <> - + Thank you for contacting us! @@ -102,7 +103,7 @@ export default function Index({ data }) { {formState === "submitting" && } - + Contact us @@ -222,102 +223,13 @@ export default function Index({ data }) {
- + The team -
    -
  • - - - Nicholas Day - {" "} - – Sales and Marketing Manager - -
    • -
  • - - - Daniel Costea - {" "} - – Project Director - -
    • -
  • - - - Maria Antonia - {" "} - – Design and Consultation Manager - -
    • -
  • - - - Harry Jackson - {" "} - – After Sales Manager - -
    • -
- - - - - - 07539 051512 - - - - - - - - 07378 839358 - - - - - - - - 01708 938455 - - - - - - - - quotations@abcprojectdesign.com - - +
@@ -354,5 +266,14 @@ export const query = graphql` } } } + allPerson { + nodes { + name + email + phone + altPhone + title + } + } } `;