Fix checkbox set with followup so that selecting additional checkboxes leaves followup open

app/assets/javascripts/honeycrisp.js

@@ -106,14 +106,16 @@ var followUpQuestion = (function() {
                 // add click listeners to initial question inputs
                 $(self).find('.question-with-follow-up__question input').click(function(e) {
                     // reset follow ups
-                    $(self).find('.question-with-follow-up__follow-up input').attr('checked', false);
-                    $(self).find('.question-with-follow-up__follow-up').find('.radio-button, .checkbox').removeClass('is-selected');
+                    $(self).find('.question-with-follow-up__follow-up input').attr('disabled', true);
                     $(self).find('.question-with-follow-up__follow-up').hide();
 
-                    // show the current follow up
-                    if($(this).is(':checked') && $(this).attr('data-follow-up') != null) {
-                        $($(this).attr('data-follow-up')).show();
-                    }
+                    $(self).find('.question-with-follow-up__question input').each(function(index, input) {
+                        // if any of the inputs with a data-follow-up is checked then show the follow-up
+                        if($(input).is(':checked') && $(input).attr('data-follow-up') != null) {
+                            $(self).find('.question-with-follow-up__follow-up input').attr('disabled', false);
+                            $($(this).attr('data-follow-up')).show();
+                        }
+                    });
                 })
             });
         }

app/assets/stylesheets/atoms/_form-elements.scss

@@ -5,7 +5,6 @@ fieldset {
 }
 
 legend {
-  float: left;
   display: block;
   width: 100%;
 }

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

@@ -129,7 +129,7 @@
 <%= render 'section', title: 'Two-up Input Group', example: 'molecules/two_up_input_group' %>
 <%= render 'section', title: 'Form Group', example: 'molecules/form_group' %>
 <%= render 'section', title: 'Form Group Error State', example: 'molecules/form_group_error_state' %>
-<%= render 'section', title: 'Follow Up Question', example: 'molecules/follow_up_question', explanation: "How it works: the proceeding question requires an additional class 'form-group--with-follow-up'. Any answer that triggers a follow up should contain an additional attribute 'data-follow-up' with the value being the id of the follow-up question (starting with #)." %>
+<%= render 'section', title: 'Follow Up Question', example: 'molecules/follow_up_question', explanation: "How it works: the proceeding question requires an additional class 'form-group--with-follow-up'. Any answer that triggers a follow up should contain an additional attribute 'data-follow-up' with the value being the id of the follow-up question (starting with #). Note: Only one follow-up question can be supplied for a checkbox set and it will look best if the last checkbox is the one that triggers it." %>
 
 <section class="slab slab--styleguide" id="organisms">
   <div class="grid">

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

@@ -2,6 +2,7 @@
   <%= f.cfa_radio_set(
     :example_method_name,
     label_text: "Example radio set (regular)",
+    help_text: "Choose 1",
     collection: [
       { value: :option1, label: "Option 1" },
       { value: :option2, label: "Option 2" },

app/views/examples/molecules/_follow_up_question.html.erb

@@ -3,7 +3,9 @@
   <div class="question-with-follow-up">
     <div class="question-with-follow-up__question">
       <fieldset class="form-group">
-        <label class="form-question" for="example_form_question">Did you have a CalFresh interview?</label>
+        <legend class="form-question">
+          Did you have a CalFresh interview?
+        </legend>
         <p class="text--help">Answering no will trigger a follow-up question.</p>
         <radiogroup class="input-group--inline">
           <label for="example_radio_inline_4_1" class="radio-button">
@@ -19,7 +21,7 @@
     </div>
     <div class="question-with-follow-up__follow-up" id="interview-follow-up">
       <fieldset class="form-group">
-        <label class="form-question" for="enrollment_survey_interview_follow_up">Do you know why?</label>
+        <legend class="form-question">Do you know why?</legend>
         <p class="text--help">Check all that apply</p>
         <radiogroup class="input-group--block">
           <label for="enrollment_survey_interview_follow_up_notified_too_late" class="radio-button">
@@ -43,22 +45,33 @@
     </div>
   </div>
 
-  <!-- Follow-up with a checkbox -->
+  <!-- Follow-up with a checkbox list -->
   <div class="question-with-follow-up">
     <div class="question-with-follow-up__question">
-      <fieldset class="form-group">
+      <fieldset class="input-group form-group">
+        <legend class="form-question ">
+          What are your favorite colors?
+        </legend>
+        <p class="text--help">Selecting 'Other' will trigger a follow-up question.</p>
+
+        <label class="checkbox">
+          <input type="checkbox" value="blue" name="form[example_blue]" id="form_example_blue" /> Blue
+        </label>
+        <label class="checkbox">
+          <input type="checkbox" value="green" name="form[example_green]" id="form_example_green" /> Green
+        </label>
         <label class="checkbox">
-          <input data-follow-up="#different-preferred-name-follow-up" type="checkbox" value="1" name="example_name_checkbox" id="example_name_checkbox">
-          I prefer a different first name
+          <input data-follow-up="#color_survey-follow-up" type="checkbox" value="other" name="form[example_other]" id="form_example_other">
+          Other
         </label>
       </fieldset>
     </div>
-    <div class="question-with-follow-up__follow-up" id="different-preferred-name-follow-up">
+    <div class="question-with-follow-up__follow-up" id="color_survey-follow-up">
       <div class="form-group">
-        <label for="member_preferred_first_name">
-          <p class="form-question">What is your preferred first name?</p>
+        <label for="color_survey_other_color">
+          <p class="form-question">Please specify</p>
         </label>
-        <input type="text" class="text-input" name="example_name_preferred" id="example_name_preferred">
+        <input type="text" class="text-input" name="color_survey_other_color" id="color_survey_other_color">
       </div>
     </div>
   </div>

spec/system/accessibility_spec.rb

@@ -21,7 +21,6 @@
   "form_builder/cfa_range_field",
   "form_builder/cfa_select",
   "form_builder/cfa_textarea",
-  "molecules/follow_up_question",
   "molecules/form_group",
   "molecules/form_group_error_state",
   "molecules/incrementer",

spec/system/follow_up_question_spec.rb

@@ -0,0 +1,39 @@
+require "spec_helper"
+
+describe "Follow up questions" do
+  before do
+    visit "cfa/styleguide/examples/molecules/follow_up_question"
+  end
+
+  describe "checkbox set" do
+    it "reveals the follow up question when the right checkbox is selected", js: true do
+      expect(page).not_to have_content "Please specify"
+
+      check "Other"
+
+      expect(page).to have_content "Please specify"
+
+      check "Blue"
+
+      expect(page).to have_content "Please specify"
+
+      uncheck "Other"
+
+      expect(page).not_to have_content "Please specify"
+    end
+  end
+
+  describe "radio set" do
+    it "reveals the follow up question when the right radio button is selected", js: true do
+      expect(page).not_to have_content "Do you know why?"
+
+      choose "No"
+
+      expect(page).to have_content "Do you know why?"
+
+      choose "Yes"
+
+      expect(page).not_to have_content "Do you know why?"
+    end
+  end
+end