From 3f63cc61fef1ac15947b6019eb7abe61f6a5ec8a Mon Sep 17 00:00:00 2001
From: Benjamin Golder <bgolder@codeforamerica.org>
Date: Mon, 21 Dec 2020 10:29:48 -0800
Subject: [PATCH] Add compact text input styling (#228)

- closes #202
---
 .../stylesheets/_honeycrisp-compact.scss      | 14 +++++++
 .../_form_elements.html.erb                   | 39 +++++++++++++++----
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/_honeycrisp-compact.scss b/app/assets/stylesheets/_honeycrisp-compact.scss
index c23f9d2e..1ae40a79 100644
--- a/app/assets/stylesheets/_honeycrisp-compact.scss
+++ b/app/assets/stylesheets/_honeycrisp-compact.scss
@@ -9,6 +9,10 @@
     }
   }
 
+  .form-group {
+    margin-bottom: $s35;
+  }
+
   .form-question {
     margin-bottom: $s15;
   }
@@ -30,6 +34,16 @@
     }
   }
 
+
+  .text-input {
+    padding: 0 $s15;
+    height: 4.5rem;
+    border-width: 1px;
+    font-size: $font-size-25-small;
+    font-weight: normal;
+    margin-bottom: 2rem;
+  }
+
   .select {
     line-height: 4.6rem;
     height: 4.6rem;
diff --git a/app/views/examples/honeycrisp_compact/_form_elements.html.erb b/app/views/examples/honeycrisp_compact/_form_elements.html.erb
index d3e3607f..2473a48c 100644
--- a/app/views/examples/honeycrisp_compact/_form_elements.html.erb
+++ b/app/views/examples/honeycrisp_compact/_form_elements.html.erb
@@ -1,11 +1,34 @@
 <div class="honeycrisp-compact">
-  <label for="apple_quality" class="form-question">What's your favorite apple quality?</label>
-  <div class="select">
-    <select class="select__element" name="apple_quality" id="apple_quality">
-      <option selected disabled>Choose a selection</option>
-      <option value="crisp">Crisp</option>
-      <option value="sweet">Sweet</option>
-      <option value="tart">Tart</option>
-    </select>
+
+  <div class="form-group">
+    <label class="form-question" for="apple_comment">What would you like to tell us about apples?</label>
+    <input type="text" class="text-input" name="apple_comment" id="apple_comment">
+  </div>
+
+  <div class="form-group">
+    <label class="form-question" for="favorite_apples">What are your favorite apples?</label>
+    <input type="text" class="text-input form-width--long" name="favorite_apples" id="favorite_apples">
+  </div>
+
+  <div class="form-group">
+    <label class="form-question" for="them_apples">How about them apples?</label>
+    <input type="text" class="text-input form-width--med" name="them_apples" id="them_apples">
+  </div>
+
+  <div class="form-group">
+    <label class="form-question" for="phone">What is your phone number?</label>
+    <input type="tel" class="text-input form-width--phone phone-input" name="phone" id="phone">
+  </div>
+
+  <div class="form-group">
+    <label for="apple_quality" class="form-question">What's your favorite apple quality?</label>
+    <div class="select">
+      <select class="select__element" name="apple_quality" id="apple_quality">
+        <option selected disabled>Choose a selection</option>
+        <option value="crisp">Crisp</option>
+        <option value="sweet">Sweet</option>
+        <option value="tart">Tart</option>
+      </select>
+    </div>
   </div>
 </div>