Merge pull request #50 from DFE-Digital/move-conditional-content-to-s…

…ame-level-as-controlling-element

Fix alignment of conditional content beneath radio buttons and checkboxes

lib/govuk_design_system_formbuilder/elements/check_boxes/fieldset_check_box.rb

@@ -18,16 +18,20 @@ def initialize(builder, object_name, attribute_name, value, label:, hint_text:,
         end
 
         def html
-          @builder.content_tag('div', class: 'govuk-checkboxes__item') do
-            @builder.safe_join(
-              [
-                input,
-                label_element.html,
-                hint_element.html,
-                @conditional_content
-              ]
-            )
-          end
+          @builder.safe_join(
+            [
+              @builder.content_tag('div', class: 'govuk-checkboxes__item') do
+                @builder.safe_join(
+                  [
+                    input,
+                    label_element.html,
+                    hint_element.html,
+                  ]
+                )
+              end,
+              @conditional_content
+            ]
+          )
         end
 
       private

lib/govuk_design_system_formbuilder/elements/radios/fieldset_radio_button.rb

@@ -17,16 +17,20 @@ def initialize(builder, object_name, attribute_name, value, label:, hint_text:,
         end
 
         def html
-          @builder.content_tag('div', class: 'govuk-radios__item') do
-            @builder.safe_join(
-              [
-                input,
-                label_element.html,
-                hint_element.html,
-                @conditional_content
-              ]
-            )
-          end
+          @builder.safe_join(
+            [
+              @builder.content_tag('div', class: 'govuk-radios__item') do
+                @builder.safe_join(
+                  [
+                    input,
+                    label_element.html,
+                    hint_element.html,
+                  ]
+                )
+              end,
+              @conditional_content
+            ]
+          )
         end
 
       private

spec/govuk_design_system_formbuilder/builder/check_boxes/check_box_spec.rb

@@ -78,6 +78,10 @@
           end
         end
 
+        specify 'should place the conditional content at the same level as the checkbox container' do
+          expect(parsed_subject).to have_root_element_with_class('govuk-checkboxes__conditional')
+        end
+
         specify 'should include content provided in the block in a conditional div' do
           expect(subject).to have_tag('div', with: { class: 'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden' }) do |cd|
             expect(cd).to have_tag('label', with: { class: 'govuk-label' }, text: 'Project_responsibilities')

spec/govuk_design_system_formbuilder/builder/radios/radio_button_spec.rb

@@ -47,6 +47,10 @@
           end
         end
 
+        specify 'should place the conditional content at the same level as the radio button container' do
+          expect(parsed_subject).to have_root_element_with_class('govuk-radios__conditional')
+        end
+
         specify 'should include content provided in the block in a conditional div' do
           expect(subject).to have_tag('div', with: { class: 'govuk-radios__conditional govuk-radios__conditional--hidden' }) do |cd|
             expect(cd).to have_tag('label', with: { class: 'govuk-label' }, text: 'Favourite_colour_reason')

spec/support/html_helper.rb

@@ -1,5 +1,5 @@
-def extract_classes(nokogiri_document, selector)
-  nokogiri_document
+def extract_classes(nokogiri_fragment, selector)
+  nokogiri_fragment
     .at_css(selector)
     .attributes['class']
     .value

spec/support/matchers.rb

@@ -0,0 +1,18 @@
+require 'rspec/expectations'
+
+RSpec::Matchers.define :have_root_element_with_class do |class_name|
+  # We're using xpath here because there's no sane way (ie without wrapping
+  # everything in a useless element just for testing) of checking that elements
+  # appear at the root of the fragment
+  #
+  # Note that the ./* matches ANY element `*` at the root `./` of the fragment
+  match do |nokogiri_fragment|
+    !nokogiri_fragment.xpath(%(./*[contains(concat(" ", @class, " "), " #{class_name} ")])).empty?
+  end
+
+  #:nocov:
+  failure_message do |nokogiri_fragment|
+    "expected that #{class_name} would be a class of a root element in fragment: #{nokogiri_fragment}"
+  end
+  #:nocov:
+end

spec/support/shared/setup_builder.rb

@@ -4,5 +4,5 @@
   let(:object) { Person.new(name: 'Joey') }
   let(:object_name) { :person }
   let(:builder) { described_class.new(object_name, object, helper, {}) }
-  let(:parsed_subject) { Nokogiri.parse(subject) }
+  let(:parsed_subject) { Nokogiri::HTML::DocumentFragment.parse(subject) }
 end