Merge pull request #97 from DFE-Digital/add-classes-support-to-radios…

…-and-checkbox-helpers

Add classes support to radios and checkbox helpers

lib/govuk_design_system_formbuilder/builder.rb

@@ -238,6 +238,7 @@ def govuk_collection_select(attribute_name, collection, value_method, text_metho
     # @param inline [Boolean] controls whether the radio buttons are displayed inline or not
     # @param small [Boolean] controls whether small radio buttons are used instead of regular-sized ones
     # @param bold_labels [Boolean] controls whether the radio button labels are bold
+    # @param classes [String] Classes to add to the radio button container.
     # @option legend text [String] the fieldset legend's text content
     # @option legend size [String] the size of the fieldset legend font, can be +xl+, +l+, +m+ or +s+
     # @option legend tag [Symbol,String] the tag used for the fieldset's header, defaults to +h1+, defaults to +h1+
@@ -258,7 +259,7 @@ def govuk_collection_select(attribute_name, collection, value_method, text_metho
     #    legend: { text: 'Pick your favourite colour', size: 'm' },
     #    hint_text: 'If you cannot find the exact match choose something close',
     #    inline: false
-    def govuk_collection_radio_buttons(attribute_name, collection, value_method, text_method, hint_method = nil, hint_text: nil, legend: {}, inline: false, small: false, bold_labels: false, &block)
+    def govuk_collection_radio_buttons(attribute_name, collection, value_method, text_method, hint_method = nil, hint_text: nil, legend: {}, inline: false, small: false, bold_labels: false, classes: nil, &block)
       Elements::Radios::Collection.new(
         self,
         object_name,
@@ -272,6 +273,7 @@ def govuk_collection_radio_buttons(attribute_name, collection, value_method, tex
         inline: inline,
         small: small,
         bold_labels: bold_labels,
+        classes: classes,
         &block
       ).html
     end
@@ -289,6 +291,7 @@ def govuk_collection_radio_buttons(attribute_name, collection, value_method, tex
     # @option legend size [String] the size of the fieldset legend font, can be +xl+, +l+, +m+ or +s+
     # @option legend tag [Symbol,String] the tag used for the fieldset's header, defaults to +h1+
     # @param block [Block] a block of HTML that will be used to populate the fieldset
+    # @param classes [String] Classes to add to the radio button container.
     # @see https://design-system.service.gov.uk/components/radios/ GOV.UK Radios
     # @return [ActiveSupport::SafeBuffer] HTML output
     #
@@ -300,8 +303,8 @@ def govuk_collection_radio_buttons(attribute_name, collection, value_method, tex
     #    = f.govuk_radio_divider
     #    = f.govuk_radio_button :favourite_colour, :yellow, label: { text: 'Yellow' }
     #
-    def govuk_radio_buttons_fieldset(attribute_name, hint_text: nil, legend: {}, inline: false, small: false, &block)
-      Containers::RadioButtonsFieldset.new(self, object_name, attribute_name, hint_text: hint_text, legend: legend, inline: inline, small: small, &block).html
+    def govuk_radio_buttons_fieldset(attribute_name, hint_text: nil, legend: {}, inline: false, small: false, classes: nil, &block)
+      Containers::RadioButtonsFieldset.new(self, object_name, attribute_name, hint_text: hint_text, legend: legend, inline: inline, small: small, classes: classes, &block).html
     end
 
     # Generates a radio button
@@ -400,6 +403,7 @@ def govuk_collection_check_boxes(attribute_name, collection, value_method, text_
     # @option legend text [String] the fieldset legend's text content
     # @option legend size [String] the size of the fieldset legend font, can be +xl+, +l+, +m+ or +s+
     # @option legend tag [Symbol,String] the tag used for the fieldset's header, defaults to +h1+
+    # @param classes [String] Classes to add to the checkbox container.
     # @param block [Block] a block of HTML that will be used to populate the fieldset
     # @return [ActiveSupport::SafeBuffer] HTML output
     #
@@ -409,14 +413,15 @@ def govuk_collection_check_boxes(attribute_name, collection, value_method, text_
     #    = f.govuk_check_box :desired_filling, :cheese, label: { text: 'Cheese' }, link_errors: true
     #    = f.govuk_check_box :desired_filling, :tomato, label: { text: 'Tomato' }
     #
-    def govuk_check_boxes_fieldset(attribute_name, legend: {}, hint_text: {}, small: false, &block)
+    def govuk_check_boxes_fieldset(attribute_name, legend: {}, hint_text: {}, small: false, classes: nil, &block)
       Containers::CheckBoxesFieldset.new(
         self,
         object_name,
         attribute_name,
         hint_text: hint_text,
         legend: legend,
         small: small,
+        classes: classes,
         &block
       ).html
     end

lib/govuk_design_system_formbuilder/containers/check_boxes_fieldset.rb

@@ -4,12 +4,13 @@ class CheckBoxesFieldset < Base
       include Traits::Error
       include Traits::Hint
 
-      def initialize(builder, object_name, attribute_name, hint_text:, legend:, small:, &block)
+      def initialize(builder, object_name, attribute_name, hint_text:, legend:, small:, classes:, &block)
         super(builder, object_name, attribute_name, &block)
 
         @legend        = legend
         @hint_text     = hint_text
         @small         = small
+        @classes       = classes
         @block_content = capture { block.call }
       end
 
@@ -20,7 +21,7 @@ def html
               [
                 hint_element.html,
                 error_element.html,
-                Containers::CheckBoxes.new(@builder, small: @small).html do
+                Containers::CheckBoxes.new(@builder, small: @small, classes: @classes).html do
                   @block_content
                 end
               ]

lib/govuk_design_system_formbuilder/containers/radio_buttons_fieldset.rb

@@ -4,13 +4,14 @@ class RadioButtonsFieldset < Base
       include Traits::Hint
       include Traits::Error
 
-      def initialize(builder, object_name, attribute_name, hint_text:, legend:, inline:, small:, &block)
+      def initialize(builder, object_name, attribute_name, hint_text:, legend:, inline:, small:, classes:, &block)
         super(builder, object_name, attribute_name)
 
         @inline        = inline
         @small         = small
         @legend        = legend
         @hint_text     = hint_text
+        @classes       = classes
         @block_content = capture { block.call }
       end
 
@@ -21,7 +22,7 @@ def html
               [
                 hint_element.html,
                 error_element.html,
-                Containers::Radios.new(@builder, inline: @inline, small: @small).html do
+                Containers::Radios.new(@builder, inline: @inline, small: @small, classes: @classes).html do
                   @block_content
                 end
               ]

lib/govuk_design_system_formbuilder/containers/radios.rb

@@ -3,10 +3,11 @@ module Containers
     class Radios < Base
       include Traits::Hint
 
-      def initialize(builder, inline:, small:)
+      def initialize(builder, inline:, small:, classes:)
         @builder = builder
         @inline  = inline
         @small   = small
+        @classes = classes
       end
 
       def html
@@ -21,6 +22,7 @@ def radios_classes
         %w(govuk-radios).tap do |c|
           c.push('govuk-radios--inline') if @inline
           c.push('govuk-radios--small')  if @small
+          c.push(@classes)               if @classes
         end
       end
     end

lib/govuk_design_system_formbuilder/elements/radios/collection.rb

@@ -6,7 +6,7 @@ class Collection < Base
         include Traits::Hint
         include Traits::Supplemental
 
-        def initialize(builder, object_name, attribute_name, collection, value_method:, text_method:, hint_method:, hint_text:, legend:, inline:, small:, bold_labels:, &block)
+        def initialize(builder, object_name, attribute_name, collection, value_method:, text_method:, hint_method:, hint_text:, legend:, inline:, small:, bold_labels:, classes:, &block)
           super(builder, object_name, attribute_name, &block)
 
           @collection    = collection
@@ -17,6 +17,7 @@ def initialize(builder, object_name, attribute_name, collection, value_method:,
           @small         = small
           @legend        = legend
           @hint_text     = hint_text
+          @classes       = classes
           @bold_labels   = hint_method.present? || bold_labels
         end
 
@@ -28,7 +29,7 @@ def html
                   hint_element.html,
                   error_element.html,
                   supplemental_content.html,
-                  Containers::Radios.new(@builder, inline: @inline, small: @small).html do
+                  Containers::Radios.new(@builder, inline: @inline, small: @small, classes: @classes).html do
                     safe_join(build_collection)
                   end
                 ]

spec/govuk_design_system_formbuilder/builder/check_boxes/fieldset_spec.rb

@@ -9,8 +9,8 @@
     let(:aria_described_by_target) { 'fieldset' }
     let(:args) { [method, attribute] }
 
-    subject do
-      builder.send(*args) do
+    let(:example_block) do
+      proc do
         builder.safe_join(
           projects.map do |p|
             builder.govuk_check_box(attribute, p.id)
@@ -19,6 +19,8 @@
       end
     end
 
+    subject { builder.send(*args, &example_block) }
+
     it_behaves_like 'a field that supports errors' do
       let(:error_message) { /Select at least one project/ }
       let(:error_class) { nil }
@@ -50,6 +52,16 @@
         end
       end
 
+      context 'check boxes classes' do
+        context 'when extra css classes are specified in the options' do
+          subject { builder.send(*args, classes: 'foo', &example_block) }
+
+          specify "should have the additional class 'foo'" do
+            expect(subject).to have_tag('div', with: { class: %w(govuk-checkboxes foo) })
+          end
+        end
+      end
+
       context 'check box size' do
         context 'when small is specified in the options' do
           subject do

spec/govuk_design_system_formbuilder/builder/radios/collection_spec.rb

@@ -196,6 +196,16 @@
           end
         end
       end
+
+      context 'radio button classes' do
+        context 'when extra css classes are specified in the options' do
+          subject { builder.send(*args, classes: 'foo') }
+
+          specify "should have the additional class 'foo'" do
+            expect(subject).to have_tag('div', with: { class: %w(govuk-radios foo) })
+          end
+        end
+      end
     end
   end
 end

spec/govuk_design_system_formbuilder/builder/radios/fieldset_spec.rb

@@ -39,6 +39,10 @@
     end
 
     context 'when a block containing radio buttons is supplied' do
+      let(:example_block) do
+        proc { builder.govuk_radio_button(:favourite_colour, :red, label: { text: red_label }) }
+      end
+
       specify 'output should be a form group containing a form group and fieldset' do
         expect(subject).to have_tag('div', with: { class: 'govuk-form-group' }) do |fg|
           expect(fg).to have_tag('fieldset', with: { class: 'govuk-fieldset' })
@@ -53,23 +57,15 @@
 
       context 'layout direction' do
         context 'when inline is specified in the options' do
-          subject do
-            builder.send(*args, inline: true) do
-              builder.govuk_radio_button(:favourite_colour, :red, label: { text: red_label })
-            end
-          end
+          subject { builder.send(*args, inline: true, &example_block) }
 
           specify "should have the additional class 'govuk-radios--inline'" do
             expect(subject).to have_tag('div', with: { class: %w(govuk-radios govuk-radios--inline) })
           end
         end
 
         context 'when inline is not specified in the options' do
-          subject do
-            builder.send(*args) do
-              builder.govuk_radio_button(:favourite_colour, :red, label: { text: red_label })
-            end
-          end
+          subject { builder.send(*args, &example_block) }
 
           specify "should have no additional classes" do
             expect(parsed_subject.at_css('.govuk-radios')['class']).to eql('govuk-radios')
@@ -79,30 +75,32 @@
 
       context 'radio button size' do
         context 'when small is specified in the options' do
-          subject do
-            builder.send(*args, small: true) do
-              builder.govuk_radio_button(:favourite_colour, :red, label: { text: red_label })
-            end
-          end
+          subject { builder.send(*args, small: true, &example_block) }
 
           specify "should have the additional class 'govuk-radios--small'" do
             expect(subject).to have_tag('div', with: { class: %w(govuk-radios govuk-radios--small) })
           end
         end
 
         context 'when small is not specified in the options' do
-          subject do
-            builder.send(*args) do
-              builder.govuk_radio_button(:favourite_colour, :red, label: { text: red_label })
-            end
-          end
+          subject { builder.send(*args, &example_block) }
 
           specify "should not have the additional class 'govuk-radios--small'" do
             expect(parsed_subject.at_css('.govuk-radios')['class']).to eql('govuk-radios')
           end
         end
       end
 
+      context 'radio button classes' do
+        context 'when extra css classes are specified in the options' do
+          subject { builder.send(*args, classes: 'foo', &example_block) }
+
+          specify "should have the additional class 'foo'" do
+            expect(subject).to have_tag('div', with: { class: %w(govuk-radios foo) })
+          end
+        end
+      end
+
       context 'dividers' do
         subject do
           builder.send(*args) do