From 30662a1989cd6dc6770ffc4c3c7c7538da16f95d Mon Sep 17 00:00:00 2001
From: Ben Golder <bgolder@codeforamerica.org>
Date: Thu, 17 Dec 2020 19:10:49 -0800
Subject: [PATCH 1/3] Add compact drop down and button styles

- Solves #205
- Dropdown story: [#176151526]
- Button story: [#175169414]
---
 .../stylesheets/_honeycrisp-compact.scss      | 28 +++++++++++++++++++
 .../pages/honeycrisp_compact.html.erb         |  8 ++++++
 .../honeycrisp_compact/_buttons.html.erb      | 19 +++++++++++++
 .../_form_elements.html.erb                   | 12 ++++++++
 4 files changed, 67 insertions(+)
 create mode 100644 app/views/examples/honeycrisp_compact/_buttons.html.erb
 create mode 100644 app/views/examples/honeycrisp_compact/_form_elements.html.erb

diff --git a/app/assets/stylesheets/_honeycrisp-compact.scss b/app/assets/stylesheets/_honeycrisp-compact.scss
index e61705f6..3593c445 100644
--- a/app/assets/stylesheets/_honeycrisp-compact.scss
+++ b/app/assets/stylesheets/_honeycrisp-compact.scss
@@ -1,10 +1,38 @@
 .honeycrisp-compact {
   font-size: $font-size-19;
   line-height: $s19;
+
   .data-table {
     font-size: inherit;
     th, td {
       padding: $s15;
     }
   }
+
+  .button {
+    line-height: 2rem;
+    padding: $s10;
+    font-weight: normal;
+    border-width: 1px;
+    box-shadow: 0 1px 0px rgba(#000, .5);
+    border-radius: $border-radius;
+    font-size: $font-size-25-small;
+    [class^="icon-"], [class*=" icon-"] {
+      vertical-align: 0;
+    }
+  }
+
+  .select {
+    line-height: 4.6rem;
+    height: 4.6rem;
+    &:after {
+      width: 4.2rem;
+    }
+  }
+  .select__element {
+    font-size: $font-size-25-small;
+    font-weight: normal;
+    border: 1px solid $color-grey-darkest;
+    padding: 0 4.2rem 0 $s15;
+  }
 }
diff --git a/app/views/cfa/styleguide/pages/honeycrisp_compact.html.erb b/app/views/cfa/styleguide/pages/honeycrisp_compact.html.erb
index ca50d47f..c0df35c7 100644
--- a/app/views/cfa/styleguide/pages/honeycrisp_compact.html.erb
+++ b/app/views/cfa/styleguide/pages/honeycrisp_compact.html.erb
@@ -1,7 +1,13 @@
 <% content_for(:template_name) { "styleguide" } %>
 
 <% content_for :subnavigation do %>
+
   <li class="spacing-below-0">
+    <span class="section-header heading-25-small spacing-below-10">Atoms</span>
+    <ul class="sidebar__sub-items spacing-below-10">
+      <li class="spacing-below-25"><%= link_to "Buttons", styleguide_honeycrisp_compact_path(anchor: "honeycrisp_compact-buttons") %></li>
+      <li class="spacing-below-25"><%= link_to "Form Elements", styleguide_honeycrisp_compact_path(anchor: "honeycrisp_compact-form_elements") %></li>
+    </ul>
     <span class="section-header heading-25-small spacing-below-10">Molecules</span>
     <ul class="sidebar__sub-items spacing-below-10">
       <li class="spacing-below-25"><%= link_to "Data Table", styleguide_honeycrisp_compact_path(anchor: "honeycrisp_compact-data_table") %></li>
@@ -26,4 +32,6 @@
   </div>
 </section>
 
+<%= render 'section', title: 'Buttons', example: 'honeycrisp_compact/buttons' %>
+<%= render 'section', title: 'Form Elements', example: 'honeycrisp_compact/form_elements' %>
 <%= render 'section', title: 'Data Table', example: 'honeycrisp_compact/data_table' %>
diff --git a/app/views/examples/honeycrisp_compact/_buttons.html.erb b/app/views/examples/honeycrisp_compact/_buttons.html.erb
new file mode 100644
index 00000000..92e2b570
--- /dev/null
+++ b/app/views/examples/honeycrisp_compact/_buttons.html.erb
@@ -0,0 +1,19 @@
+<div class="honeycrisp-compact">
+  <div class="h4">Compact</div>
+  <div>
+    <button class="button button--primary">Primary Button</button>
+    <button class="button button--primary button--disabled" disabled>Disabled Primary Button</button>
+  </div>
+  <div>
+    <button class="button">Button</button>
+    <button class="button button--disabled" disabled>Disabled Button</button>
+  </div>
+  <div>
+    <button class="button button--danger">Danger Button</button>
+    <button class="button button--danger button--disabled" disabled>Disabled Danger Button</button>
+  </div>
+  <div>
+    <button class="button">Button with icon<i class="button__icon icon-arrow_forward"></i></button>
+    <button class="button"><i class="button__icon--left icon-arrow_back"></i>Button with icon</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/views/examples/honeycrisp_compact/_form_elements.html.erb b/app/views/examples/honeycrisp_compact/_form_elements.html.erb
new file mode 100644
index 00000000..d4ec865d
--- /dev/null
+++ b/app/views/examples/honeycrisp_compact/_form_elements.html.erb
@@ -0,0 +1,12 @@
+<div class="honeycrisp-compact">
+  <form action="POST">
+    <div class="select">
+      <select class="select__element" name="example_select" id="example_select">
+        <option selected disabled>Choose a selection</option>
+        <option value="1">Selection 1</option>
+        <option value="2">Selection 2</option>
+        <option value="2">Selection 3</option>
+      </select>
+    </div>
+  </form>
+</div>

From 584df94d8fd2222daddf06541403cdd816b0602d Mon Sep 17 00:00:00 2001
From: Ben Golder <bgolder@codeforamerica.org>
Date: Fri, 18 Dec 2020 12:40:52 -0800
Subject: [PATCH 2/3] Adjust compact button margins

---
 app/assets/stylesheets/_honeycrisp-compact.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/_honeycrisp-compact.scss b/app/assets/stylesheets/_honeycrisp-compact.scss
index 3593c445..94fe1b7b 100644
--- a/app/assets/stylesheets/_honeycrisp-compact.scss
+++ b/app/assets/stylesheets/_honeycrisp-compact.scss
@@ -12,6 +12,10 @@
   .button {
     line-height: 2rem;
     padding: $s10;
+    margin-top: 0;
+    margin-left: $s10;
+    margin-right: $s10;
+    margin-bottom: 2rem;
     font-weight: normal;
     border-width: 1px;
     box-shadow: 0 1px 0px rgba(#000, .5);

From 48fa8321e6997b8dee47fe0ba79f8c61ec9c8595 Mon Sep 17 00:00:00 2001
From: Ben Golder <bgolder@codeforamerica.org>
Date: Fri, 18 Dec 2020 12:49:28 -0800
Subject: [PATCH 3/3] Add label to compact form element example

---
 .../stylesheets/_honeycrisp-compact.scss      |  4 ++++
 .../_form_elements.html.erb                   | 19 +++++++++----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/_honeycrisp-compact.scss b/app/assets/stylesheets/_honeycrisp-compact.scss
index 94fe1b7b..c23f9d2e 100644
--- a/app/assets/stylesheets/_honeycrisp-compact.scss
+++ b/app/assets/stylesheets/_honeycrisp-compact.scss
@@ -9,6 +9,10 @@
     }
   }
 
+  .form-question {
+    margin-bottom: $s15;
+  }
+
   .button {
     line-height: 2rem;
     padding: $s10;
diff --git a/app/views/examples/honeycrisp_compact/_form_elements.html.erb b/app/views/examples/honeycrisp_compact/_form_elements.html.erb
index d4ec865d..d3e3607f 100644
--- a/app/views/examples/honeycrisp_compact/_form_elements.html.erb
+++ b/app/views/examples/honeycrisp_compact/_form_elements.html.erb
@@ -1,12 +1,11 @@
 <div class="honeycrisp-compact">
-  <form action="POST">
-    <div class="select">
-      <select class="select__element" name="example_select" id="example_select">
-        <option selected disabled>Choose a selection</option>
-        <option value="1">Selection 1</option>
-        <option value="2">Selection 2</option>
-        <option value="2">Selection 3</option>
-      </select>
-    </div>
-  </form>
+  <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>