Add cfa_select to the form builder (#50)

Add cfa_select to the form builder

Also bumps version

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    cfa-styleguide (0.5.2)
+    cfa-styleguide (0.5.3)
       autoprefixer-rails
       bourbon
       jquery-rails
@@ -76,7 +76,7 @@ GEM
     diff-lcs (1.3)
     erubi (1.7.1)
     execjs (2.7.0)
-    ffi (1.9.25)
+    ffi (1.10.0)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     i18n (1.1.1)
@@ -167,7 +167,7 @@ GEM
     rspec-support (3.8.0)
     rspec_junit_formatter (0.4.1)
       rspec-core (>= 2, < 4, != 2.12.0)
-    sass (3.7.2)
+    sass (3.7.3)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)

app/helpers/cfa/styleguide/cfa_form_builder.rb

@@ -332,6 +332,42 @@ def cfa_single_tap_button(method, label_text, value, classes: [])
         button(label_text.html_safe, name: "#{object_name}[#{method}]", value: value, class: classes.push("button").join(" "))
       end
 
+      def cfa_select(
+        method,
+        label_text,
+        collection,
+        options = {},
+        &block
+      )
+
+        html_options = {
+          class: "select__element",
+        }
+
+        formatted_label = label(
+          method,
+          label_contents(
+            label_text,
+            options[:help_text],
+            options[:optional],
+          ),
+          class: options[:hide_label] ? "sr-only" : "",
+        )
+        html_options_with_errors = html_options.merge(error_attributes(method: method))
+
+        html_output = <<~HTML
+      <div class="form-group#{error_state(object, method)}">
+        #{formatted_label}
+        <div class="select">
+          #{select(method, collection, options, html_options_with_errors, &block)}
+        </div>
+        #{errors_for(object, method)}
+      </div>
+        HTML
+
+        html_output.html_safe
+      end
+
       private
 
       def standard_options

app/views/cfa/styleguide/pages/form_builder.html.erb

@@ -17,3 +17,4 @@
 <%= render 'section', title: 'Radio set', example: 'form_builder/cfa_radio_set' %>
 <%= render 'section', title: 'Radio set with follow up', example: 'form_builder/cfa_radio_set_with_follow_up' %>
 <%= render 'section', title: 'Single tap button', example: 'form_builder/cfa_single_tap_button' %>
+<%= render 'section', title: 'Select', example: 'form_builder/cfa_select' %>

app/views/examples/form_builder/_cfa_select.html.erb

@@ -0,0 +1,30 @@
+<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
+  <%= f.cfa_select(
+    :example_method_name,
+    "Example select - without label",
+    [
+    ["Blue", :blue],
+    ["Green", :green],
+    ],
+    hide_label: true,
+    help_text: "Choose your favorite",
+    ) %>
+  <%= f.cfa_select(
+    :example_method_name,
+    "Example select - with label",
+    [
+      ["Blue", :blue],
+      ["Green", :green],
+    ],
+    help_text: "Choose your favorite",
+  ) %>
+  <%= f.cfa_select(
+    :example_method_with_validation,
+    "Example select - with error",
+    [
+      ["Blue", :blue],
+      ["Green", :green],
+    ],
+    help_text: "Choose your favorite",
+  ) %>
+<% end %>

app/views/examples/form_builder/_cfa_single_tap_button.html.erb

@@ -1,4 +1,4 @@
-<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
+<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
   <%= f.cfa_single_tap_button(
     :example_method_name,
     "Yes",

lib/cfa/styleguide/version.rb

@@ -1,5 +1,5 @@
 module Cfa
   module Styleguide
-    VERSION = "0.5.2"
+    VERSION = "0.5.3"
   end
 end

spec/feature/pages_spec.rb

@@ -60,5 +60,6 @@
     expect(page).to have_content('Example choice 2')
     expect(page).to have_content('Example radio set (regular)')
     expect(page).to have_content('Example radio set with follow up')
+    expect(page).to have_content('Example select')
   end
 end

spec/helpers/cfa_form_builder_spec.rb

@@ -690,7 +690,6 @@ class SampleForm < Cfa::Styleguide::FormExample
     end
   end
 
-
   describe "#cfa_single_tap_button" do
     it "renders an submit button with given value" do
       class SampleForm < Cfa::Styleguide::FormExample
@@ -713,4 +712,54 @@ class SampleForm < Cfa::Styleguide::FormExample
       HTML
     end
   end
+
+  describe "#cfa_select" do
+    it "renders a range of numeric options with a screen-reader only label" do
+      class SampleForm < Cfa::Styleguide::FormExample
+        attr_accessor :how_many
+        validates_presence_of :how_many
+      end
+
+      sample = SampleForm.new
+      sample.validate
+      form = described_class.new("sample", sample, template, {})
+      output = form.cfa_select(
+        :how_many,
+        "This is for screen readers!",
+        (0..10).map { |number| ["#{number} thing".pluralize(number), number] },
+        hide_label: true,
+        help_text: "Choose how many",
+      )
+      expect(output).to be_html_safe
+
+      expect(output).to match_html <<-HTML
+        <div class="form-group form-group--error">
+          <div class="field_with_errors">
+            <label class="sr-only" for="sample_how_many">
+              <p class="form-question">This is for screen readers!</p>
+              <p class="text--help">Choose how many</p>
+            </label>
+          </div>
+          <div class="select">
+            <div class="field_with_errors">
+              <select class="select__element" aria-describedby="sample_how_many__errors" name="sample[how_many]" id="sample_how_many">
+                <option value="0">0 things</option>
+                <option value="1">1 thing</option>
+                <option value="2">2 things</option>
+                <option value="3">3 things</option>
+                <option value="4">4 things</option>
+                <option value="5">5 things</option>
+                <option value="6">6 things</option>
+                <option value="7">7 things</option>
+                <option value="8">8 things</option>
+                <option value="9">9 things</option>
+                <option value="10">10 things</option>
+              </select>
+            </div>
+          </div>
+          <span class="text--error" id="sample_how_many__errors"><i class="icon-warning"></i> can't be blank </span>
+        </div>
+      HTML
+    end
+  end
 end