feat(contact): init select fields

src/components/index.js

@@ -11,6 +11,7 @@ export { default as Heading } from "./heading";
 export { default as Icon } from "./icon";
 export { default as IconWithContent } from "./icon-with-content";
 export { default as InputText } from "./input-text";
+export { default as Label } from "./label";
 export { default as Link } from "./link";
 export { default as Map } from "./map";
 export { default as MenuButton } from "./menu-button";
@@ -19,6 +20,7 @@ export { default as NavLink } from "./nav-link";
 export { default as Nav } from "./nav";
 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 Text } from "./text";
 export { default as Tile } from "./tile";

src/components/input-text.js

@@ -1,16 +1,6 @@
 import React from "react";
 import styled from "@emotion/styled";
 
-const Container = styled.div`
-  max-width: 320px;
-`;
-
-const Label = styled.label`
-  display: block;
-  margin-bottom: var(--spacing-y-xs);
-  font-size: var(--font-size-sm);
-`;
-
 const Input = styled.input`
   width: 100%;
   margin-bottom: var(--spacing-y-sm);
@@ -21,23 +11,19 @@ const Input = styled.input`
 export default function InputText({
   id,
   name,
-  label,
   value,
   onChange,
   required,
   textArea
 }) {
   return (
-    <Container>
+    <Input
-      <Label htmlFor={id}>{label}</Label>
+      type="text"
-      <Input
+      id={id}
-        type="text"
+      name={name}
-        id={id}
+      value={value}
-        name={name}
+      onChange={onChange}
-        value={value}
+      as={textArea ? "textarea" : "input"}
-        onChange={onChange}
+    />
-        as={textArea ? "textarea" : "input"}
-      />
-    </Container>
   );
 }

src/components/label.js

@@ -0,0 +1,12 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Container = styled.label`
+  display: block;
+  margin-bottom: var(--spacing-y-xs);
+  font-size: var(--font-size-sm);
+`;
+
+export default function Label({ id, children }) {
+  return <Container htmlFor={id}>{children}</Container>;
+}

src/components/select.js

@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Select = styled.select`
+  width: 100%;
+  margin-bottom: var(--spacing-y-sm);
+  padding: var(--spacing-y-xs) var(--spacing-x-sm);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-dark);
+`;
+
+export default function InputSelect({ id, name, value, options = [] }) {
+  return (
+    <Select id={id} name={name} value={value}>
+      {options.map((opt, i) => (
+        <option value={opt.value} key={i}>
+          {opt.label}
+        </option>
+      ))}
+    </Select>
+  );
+}

src/pages/contact.js

@@ -10,9 +10,11 @@ import {
   Icon,
   IconWithContent,
   InputText,
+  Label,
   Link,
   Map,
   Section,
+  Select,
   Text
 } from "../components";
 import CheckCircle from "../icons/check-circle.svg";
@@ -35,7 +37,11 @@ export default function Index({ data }) {
       name: e.target.name.value,
       email: e.target.email.value,
       telephone: e.target.telephone.value,
-      message: e.target.message.value
+      start: e.target.start.value,
+      stage: e.target.stage.value,
+      status: e.target.status.value,
+      message: e.target.message.value,
+      file: e.target.file.value
     });
     fetch("/contact", {
       method: "POST",
@@ -170,19 +176,64 @@ export default function Index({ data }) {
                   data-netlify-honeypot="bot-field"
                 >
                   <input type="hidden" name="form-name" value="contact" />
-                  <InputText id="contact-name" name="name" label="Name" />
+                  <Label htmlFor="contact-name">Name</Label>
-                  <InputText id="contact-email" name="email" label="Email" />
+                  <InputText id="contact-name" name="name" />
-                  <InputText
+                  <Label htmlFor="contact-email">Email</Label>
-                    id="contact-telephone"
+                  <InputText id="contact-email" name="email" />
-                    name="telephone"
+                  <Label htmlFor="contact-telephone">Telephone</Label>
-                    label="Telephone"
+                  <InputText id="contact-telephone" name="telephone" />
+                  <Label htmlFor="contact-start">
+                    When would you like to start?
+                  </Label>
+                  <Select
+                    id="contact-start"
+                    name="start"
+                    options={[
+                      { value: "urgently", label: "Urgently" },
+                      { value: "1week", label: "Within 1 week" },
+                      { value: "2weeks", label: "Within 2 weeks" },
+                      { value: "1month", label: "Within 1 month" },
+                      { value: "2months", label: "Within 2 months" },
+                      { value: "unsure", label: "Not sure" }
+                    ]}
                   />
-                  <InputText
+                  <Label htmlFor="contact-stage">
-                    id="contact-message"
+                    What stage of planning are you at?
-                    name="message"
+                  </Label>
-                    label="Message"
+                  <Select
-                    textArea
+                    id="contact-stage"
+                    name="stage"
+                    options={[
+                      { value: "ready", label: "I'm ready to hire" },
+                      {
+                        value: "budgeting",
+                        label: "I'm planning and budgeting"
+                      },
+                      {
+                        value: "insurance",
+                        label: "I need a quote for insurance"
+                      }
+                    ]}
                   />
+                  <Label htmlFor="contact-status">
+                    Are you the owner of the property?
+                  </Label>
+                  <Select
+                    id="contact-status"
+                    name="status"
+                    options={[
+                      { value: "owner", label: "I own the property" },
+                      { value: "landlord", label: "I am the landlord" },
+                      { value: "tenant", label: "I am a tenant" },
+                      { value: "council", label: "It's a council property" }
+                    ]}
+                  />
+                  <Label htmlFor="contact-message">
+                    Describe what needs to be done
+                  </Label>
+                  <InputText id="contact-message" name="message" textArea />
+                  <Label htmlFor="contact-file">Add a photo</Label>
+                  <input id="contact-file" name="file" type="file" />
                   <Button type="submit">Submit</Button>
                 </form>
               </>