Add enhancements for USDS form builder (#96)

- Add tax_id_field to us form builder
- Add tests to catch missing content
- Add hint content for date_picker and tax_id_field

Author: lorenyu

template/{{app_name}}/app/helpers/uswds_form_builder.rb

@@ -4,6 +4,8 @@
 # additional helpers like fieldset and hint.
 # https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html
 class UswdsFormBuilder < ActionView::Helpers::FormBuilder
+  standard_helpers = %i[email_field file_field password_field text_area text_field]
+
   def initialize(*args)
     super
     self.options[:html] ||= {}
@@ -19,25 +21,33 @@ def initialize(*args)
   #
   # Example usage:
   #   <%= f.text_field :foobar, { label: "Custom label text", hint: "Some hint text" } %>
-  %i[email_field file_field password_field text_area text_field].each do |field_type|
+  standard_helpers.each do |field_type|
     define_method(field_type) do |attribute, options = {}|
       classes = us_class_for_field_type(field_type, options[:width])
       classes += " usa-input--error" if has_error?(attribute)
-
-      options[:class] ||= ""
-      options[:class].prepend("#{classes} ")
+      append_to_option(options, :class, " #{classes}")
 
       label_text = options.delete(:label)
+      label_class = options.delete(:label_class) || ""
+
+      label_options = options.except(:width, :class, :id).merge({
+        class: label_class,
+        for: options[:id]
+      })
+      field_options = options.except(:label, :hint, :large_label, :label_class)
 
-      us_form_group(attribute: attribute) do
-        us_text_field_label(attribute, label_text, options) + super(attribute, options)
+      if options[:hint]
+        field_options[:aria_describedby] = hint_id(attribute)
+      end
+
+      form_group(attribute, options[:group_options] || {}) do
+        us_text_field_label(attribute, label_text, label_options) + super(attribute, field_options)
       end
     end
   end
 
   def check_box(attribute, options = {}, *args)
-    options[:class] ||= ""
-    options[:class].prepend(us_class_for_field_type(:check_box))
+    append_to_option(options, :class, " #{us_class_for_field_type(:check_box)}")
 
     label_text = options.delete(:label)
 
@@ -47,8 +57,7 @@ def check_box(attribute, options = {}, *args)
   end
 
   def radio_button(attribute, tag_value, options = {})
-    options[:class] ||= ""
-    options[:class].prepend(us_class_for_field_type(:radio_button))
+    append_to_option(options, :class, " #{us_class_for_field_type(:radio_button)}")
 
     label_text = options.delete(:label)
     label_options = { for: field_id(attribute, tag_value) }.merge(options)
@@ -59,21 +68,21 @@ def radio_button(attribute, tag_value, options = {})
   end
 
   def select(attribute, choices, options = {}, html_options = {})
-    classes = "usa-select"
-
-    html_options[:class] ||= ""
-    html_options[:class].prepend("#{classes} ")
+    append_to_option(html_options, :class, " usa-select")
 
     label_text = options.delete(:label)
 
-    us_form_group(attribute: attribute) do
+    form_group(attribute) do
       us_text_field_label(attribute, label_text, options) + super(attribute, choices, options, html_options)
     end
   end
 
   def submit(value = nil, options = {})
-    options[:class] ||= ""
-    options[:class].prepend("usa-button ")
+    append_to_option(options, :class, " usa-button")
+
+    if options[:big]
+      append_to_option(options, :class, " usa-button--big margin-y-6")
+    end
 
     super(value, options)
   end
@@ -92,16 +101,49 @@ def honeypot_field
   # Custom helpers
   ########################################
 
+  def tax_id_field(attribute, options = {})
+    options[:inputmode] = "numeric"
+    options[:placeholder] = "_________"
+    options[:width] = "md"
+
+    append_to_option(options, :class, " usa-masked")
+    append_to_option(options, :hint, @template.content_tag(:p, I18n.t("us_form_with.tax_id_format")))
+
+    text_field(attribute, options)
+  end
+
+  def date_picker(attribute, options = {})
+    raw_value = object.send(attribute) if object
+
+    append_to_option(options, :hint, @template.content_tag(:p, I18n.t("us_form_with.date_picker_format")))
+
+    group_options = options[:group_options] || {}
+    append_to_option(group_options, :class, " usa-date-picker")
+
+    if raw_value.is_a?(Date)
+      append_to_option(group_options, :"data-default-value", raw_value.strftime("%Y-%m-%d"))
+      value = raw_value.strftime("%m/%d/%Y") if raw_value.is_a?(Date)
+    end
+
+    text_field(attribute, options.merge(value: value, group_options: group_options))
+  end
+
   def field_error(attribute)
     return unless has_error?(attribute)
 
     @template.content_tag(:span, object.errors[attribute].to_sentence, class: "usa-error-message")
   end
 
-  def fieldset(legend, attribute = nil, &block)
-    us_form_group(attribute: attribute) do
+  def fieldset(legend, options = {}, &block)
+    legend_classes = "usa-legend"
+
+    if options[:large_legend]
+      legend_classes += " usa-legend--large"
+    end
+
+    form_group(options[:attribute]) do
       @template.content_tag(:fieldset, class: "usa-fieldset") do
-        @template.content_tag(:legend, legend, class: "usa-legend") + @template.capture(&block)
+        @template.content_tag(:legend, legend, class: legend_classes) + @template.capture(&block)
       end
     end
   end
@@ -121,6 +163,17 @@ def hint(text)
     @template.content_tag(:div, @template.raw(text), class: "usa-hint")
   end
 
+  def form_group(attribute = nil, options = {}, &block)
+    append_to_option(options, :class, " usa-form-group")
+    children = @template.capture(&block)
+
+    if options[:show_error] or (attribute and has_error?(attribute))
+      append_to_option(options, :class, " usa-form-group--error")
+    end
+
+    @template.content_tag(:div, children, options)
+  end
+
   def yes_no(attribute, options = {})
     yes_options = options[:yes_options] || {}
     no_options = options[:no_options] || {}
@@ -132,7 +185,7 @@ def yes_no(attribute, options = {})
     @template.capture do
       # Hidden field included for same reason as radio button collections (https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_radio_buttons)
       hidden_field(attribute, value: "") +
-      fieldset(options[:legend] || human_name(attribute), attribute) do
+      fieldset(options[:legend] || human_name(attribute), { attribute: attribute }) do
         buttons =
           radio_button(attribute, true, yes_options) +
           radio_button(attribute, false, no_options)
@@ -147,6 +200,16 @@ def yes_no(attribute, options = {})
   end
 
   private
+    def append_to_option(options, key, value)
+      current_value = options[key] || ""
+
+      if current_value.is_a?(Proc)
+        options[key] = -> { current_value.call + value }
+      else
+        options[key] = current_value + value
+      end
+    end
+
     def us_class_for_field_type(field_type, width = nil)
       case field_type
       when :check_box
@@ -167,15 +230,33 @@ def us_class_for_field_type(field_type, width = nil)
 
     # Render the label, hint text, and error message for a form field
     def us_text_field_label(attribute, text = nil, options = {})
-      hint_text = options.delete(:hint)
+      hint_option = options.delete(:hint)
+      classes = "usa-label"
+      for_attr = options[:for] || field_id(attribute)
 
-      if hint_text
-        hint_id = "#{attribute}_hint"
-        options[:aria_describedby] = hint_id
-        hint = @template.content_tag(:div, @template.raw(hint_text), id: hint_id, class: "usa-hint")
+      if options[:class]
+        classes += " #{options[:class]}"
+      end
+
+      unless text
+        text = human_name(attribute)
       end
 
-      label(attribute, text, { class: "usa-label" }) + hint + field_error(attribute)
+      if options[:optional]
+        text += @template.content_tag(:span, " (#{I18n.t('us_form_with.optional').downcase})", class: "usa-hint")
+      end
+
+      if hint_option
+        if hint_option.is_a?(Proc)
+          hint_content = @template.capture(&hint_option)
+        else
+          hint_content = @template.raw(hint_option)
+        end
+
+        hint = @template.content_tag(:div, hint_content, id: hint_id(attribute), class: "usa-hint")
+      end
+
+      label(attribute, @template.raw(text), { class: classes, for: for_attr }) + field_error(attribute) + hint
     end
 
     # Label for a checkbox or radio
@@ -192,11 +273,7 @@ def us_toggle_label(type, attribute, text = nil, options = {})
       label(attribute, label_text, options)
     end
 
-    def us_form_group(attribute: nil, show_error: nil, &block)
-      children = @template.capture(&block)
-      classes = "usa-form-group"
-      classes += " usa-form-group--error" if show_error or (attribute and has_error?(attribute))
-
-      @template.content_tag(:div, children, class: classes)
+    def hint_id(attribute)
+      "#{attribute}_hint"
     end
 end

template/{{app_name}}/config/locales/defaults/en.yml

@@ -61,3 +61,6 @@ en:
   us_form_with:
     boolean_true: "Yes"
     boolean_false: "No"
+    date_picker_format: "Format: mm/dd/yyyy"
+    optional: "Optional"
+    tax_id_format: "For example, 123456789"