From 92a52c183301454802665d79f2124e5d48729a2f Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Wed, 24 Jan 2018 11:28:19 +1000
Subject: [PATCH] Add default <select> field to <EnquiryFormSimple />

---
 src/components/EnquiryForm.css      | 22 +++++++++++++++++++++-
 src/components/EnquiryFormSimple.js | 15 +++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/components/EnquiryForm.css b/src/components/EnquiryForm.css
index 71cc4b3..893328e 100644
--- a/src/components/EnquiryForm.css
+++ b/src/components/EnquiryForm.css
@@ -16,6 +16,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  position: relative;
 }
 
 .EnquiryForm--Input {
@@ -27,12 +28,31 @@
   margin: 0;
   border: none;
   border-bottom: 1px solid #bababa;
-  padding: 0.5em 0;
+  padding: 0.75rem 0.5rem;
   line-height: 1;
   transition: border-color 0.2s;
   resize: none;
 }
 
+.EnquiryForm--Select {
+  border-radius: 0;
+  background: none;
+  appearance: none;
+}
+
+.EnquiryForm--Label.has-arrow:after {
+  content: '';
+  position: absolute;
+  right: 3px;
+  top: 50%;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+  height: 10px;
+  width: 10px;
+  transform: translateY(-75%) rotate(45deg);
+  pointer-events: none;
+}
+
 .EnquiryForm--Input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset !important;
 }
diff --git a/src/components/EnquiryFormSimple.js b/src/components/EnquiryFormSimple.js
index 225c1d7..7d81497 100644
--- a/src/components/EnquiryFormSimple.js
+++ b/src/components/EnquiryFormSimple.js
@@ -32,6 +32,21 @@ export default ({
         required
       />
     </label>
+    <label className='EnquiryForm--Label has-arrow'>
+      <select
+        className='EnquiryForm--Input EnquiryForm--Select'
+        name='type'
+        placeholder='Type of enquiry'
+        required
+      >
+        <option selected disabled hidden>
+          Type of Enquiry
+        </option>
+        <option>Need to know more</option>
+        <option>Found a bug</option>
+        <option>Want to say hello</option>
+      </select>
+    </label>
     <label className='EnquiryForm--Label'>
       <textarea
         className='EnquiryForm--Input EnquiryForm--Textarea'