From 3da62ab97248f1730922b8b074092e96ed4cdf8c Mon Sep 17 00:00:00 2001
From: Aaron Gustafson <aaron@easy-designs.net>
Date: Wed, 22 Apr 2020 20:54:40 -0700
Subject: [PATCH 1/4] refactor descriptions

---
 src/_includes/macros/form.njk | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/_includes/macros/form.njk b/src/_includes/macros/form.njk
index 08599715..6d4aa56d 100644
--- a/src/_includes/macros/form.njk
+++ b/src/_includes/macros/form.njk
@@ -23,7 +23,7 @@
         >
   {% if data.description %}
     <br>
-    <em class="[ field-list__field-group__description ]" id="description-{{ name }}">{{ data.description }}</em>
+    {{ description( name, data.description ) }}
   {% endif %}
 {% endmacro %}
 
@@ -41,7 +41,7 @@
   </label>
   {% if data.description %}
     <br>
-    <em class="[ field-list__field-group__description ]" id="description-{{ name }}">{{ data.description }}</em>
+    {{ description( name, data.description ) }}
   {% endif %}
 {% endmacro %}
 
@@ -65,7 +65,7 @@
   </select>
   {% if data.description %}
     <br>
-    <em class="[ field-list__field-group__description ]" id="description-{{ name }}">{{ data.description }}</em>
+    {{ description( name, data.description ) }}
   {% endif %}
 {% endmacro %}
 
@@ -82,7 +82,7 @@
             {% if data.description %}aria-describedby="description-{{ name }}"{% endif %}
             ></textarea>
   {% if data.description %}
-    <em class="[ field-list__field-group__description ]" id="description-{{ name }}">{{ data.description }}</em>
+    {{ description( name, data.description ) }}
   {% endif %}
 {% endmacro %}
 
@@ -112,13 +112,13 @@
           {% endif %}
           {% if option.note %}
             <br>
-            <em class="[ field-list__field-group__description ]" id="description-{{ name }}-{{ option.value }}">{{ option.note }}</em>
+            {{ description( ( name + '-' + option.value ), option.note ) }}
           {% endif %}
         </li>
       {% endfor %}
     </ul>
     {% if data.description %}
-      <em class="[ field-list__field-group__description ]" id="description-{{ name }}">{{ data.description }}</em>
+      {{ description( name, data.description ) }}
     {% endif %}
   </fieldset>
 {% endmacro %}
@@ -149,17 +149,21 @@
           {% endif %}
           {% if option.note %}
             <br>
-            <em class="[ field-list__field-group__description ]" id="description-{{ name }}-{{ option.value }}">{{ option.note }}</em>
+            {{ description( ( name + '-' + option.value ), option.note ) }}
           {% endif %}
         </li>
       {% endfor %}
     </ul>
     {% if data.description %}
-      <em class="[ field-list__field-group__description ]" id="description-{{ name }}">{{ data.description }}</em>
+      {{ description( name, data.description ) }}
     {% endif %}
   </fieldset>
 {% endmacro %}
 
+{% macro description( id, html ) %}
+  <em class="[ field-list__field-group__description ]" id="description-{{ id }}">{{ html | safe }}</em>
+{% endmacro %}
+
 {% macro button( text ) %}
   <button type="submit" class="[ button ] [ font-base text-base weight-bold ]">{{ text }}</button>
 {% endmacro %}

From 7874a8fc1c6d2ec31b021cb1a2393f7e213f4312 Mon Sep 17 00:00:00 2001
From: Aaron Gustafson <aaron@easy-designs.net>
Date: Wed, 22 Apr 2020 20:55:58 -0700
Subject: [PATCH 2/4] refactor options

---
 src/_includes/macros/form.njk | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/_includes/macros/form.njk b/src/_includes/macros/form.njk
index 6d4aa56d..f6ffc6fb 100644
--- a/src/_includes/macros/form.njk
+++ b/src/_includes/macros/form.njk
@@ -53,14 +53,14 @@
           {% if data.multiple %}multiple{% endif %}
           {% if data.description %}aria-describedby="description-{{ name }}"{% endif %}
           >
-    {% for option in data.options_before %}
-      <option>{{ option }}</option>
+    {% for opt in data.options_before %}
+      {{ option( opt ) }}
     {% endfor %}
-    {% for option in options %}
-      <option>{{ option }}</option>
+    {% for opt in options %}
+      {{ option( opt ) }}
     {% endfor %}
-    {% for option in data.options_after %}
-      <option>{{ option }}</option>
+    {% for opt in data.options_after %}
+      {{ option( opt ) }}
     {% endfor %}
   </select>
   {% if data.description %}
@@ -69,6 +69,14 @@
   {% endif %}
 {% endmacro %}
 
+{% macro option( data ) %}
+  {% if data.value %}
+    <option value="{{ data.value }}">{{ data.label }}</option>
+  {% else %}
+    <option>{{ data }}</option>
+  {% endif %}
+{% endmacro %}
+
 {% macro textarea( name, data ) %}
   <br>
   <textarea id="field-{{ name }}"

From c4edad1d5b10f7ceada1635565f73d4cfd9b7422 Mon Sep 17 00:00:00 2001
From: Aaron Gustafson <aaron@easy-designs.net>
Date: Wed, 22 Apr 2020 20:56:35 -0700
Subject: [PATCH 3/4] Add hidden field type

---
 src/_includes/macros/form.njk | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/_includes/macros/form.njk b/src/_includes/macros/form.njk
index f6ffc6fb..01d907a0 100644
--- a/src/_includes/macros/form.njk
+++ b/src/_includes/macros/form.njk
@@ -172,6 +172,10 @@
   <em class="[ field-list__field-group__description ]" id="description-{{ id }}">{{ html | safe }}</em>
 {% endmacro %}
 
+{% macro hidden_field( name, value ) %}
+  <input type="hidden" name="{{ name }}" id="field-{{ name }}" value="{{ value }}">
+{% endmacro %}
+
 {% macro button( text ) %}
   <button type="submit" class="[ button ] [ font-base text-base weight-bold ]">{{ text }}</button>
 {% endmacro %}

From 29edd9fec6066ac30c1cc4db50ecbf9e6d3d58e3 Mon Sep 17 00:00:00 2001
From: Aaron Gustafson <aaron@easy-designs.net>
Date: Wed, 22 Apr 2020 21:01:05 -0700
Subject: [PATCH 4/4] showing select with custom label/value option showing
 hidden field

---
 src/styleguide.njk | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/styleguide.njk b/src/styleguide.njk
index e2928ec9..bed295ee 100644
--- a/src/styleguide.njk
+++ b/src/styleguide.njk
@@ -108,7 +108,7 @@ permalink: /styleguide/
         {% endfor %}
         
         <h2>Forms</h2>
-        {% from "macros/form.njk" import label, field, textarea, confirm, select, radios, checkboxes, button %}
+        {% from "macros/form.njk" import label, field, textarea, confirm, select, radios, checkboxes, hidden_field, button %}
         <form>
           <ol class="[ field-list ]">
             <li class="[ field-list__field-group ]">
@@ -125,7 +125,7 @@ permalink: /styleguide/
             </li>
             <li class="[ field-list__field-group ]">
               {{ label("Select Label", "field-select-name") }}
-              {{ select( "select", [ "option 1", "option 2" ], { required: true, options_before: ["prepended option"], options_after: ["appended option"], description: "Optional description." } ) }}
+              {{ select( "select", [ "option 1", {label: "Option II", value: "option 2"} ], { required: true, options_before: ["prepended option"], options_after: ["appended option"], description: "Optional description." } ) }}
             </li>
             <li class="[ field-list__field-group field-list__field-group--confirm ]">
               {{ confirm("Confirm this statement", "confirm") }}
@@ -136,6 +136,10 @@ permalink: /styleguide/
             <li class="[ field-list__field-group ]">
               {{ checkboxes("Checkbox Legend", "field-checkbox-name", [ "Choice 1", { label: "Choice 2", value: "Choice 2", note: "Note about choice." }, "Choice 3" ], { description: "Optional description." } ) }}
             </li>
+            <li class="[ field-list__field-group ]">
+              There is a hidden field here…
+              {{ hidden_field("hidden-name", "hidden-value") }}
+            </li>
           </ol>
           {{ button("Button Text") }}
         </form>