govuk_design_system_formbuilder 0.9.2 → 0.9.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3261eb0310f8ef07e0171a828c3f56f93e206a027fb3f92f7bcc3633de198f24
-  data.tar.gz: 2b6b2145defccbf2614162482a6236f35a07363845371c226e595f6475f3c6c7
+  metadata.gz: '038b9fbda5b650e3f3a0b954180f2e1d6ad0f78292e35b5ada83a105383e63a1'
+  data.tar.gz: baf3d3ec5d4a8eb9626ce905eec6581391c039078fd3b4f61658f5e7f89406f0
 SHA512:
-  metadata.gz: c5fd231254a061d60437c02823381d4227c7a6e4377dd979cc386894bb504585abcd86445bf630084d006ccfe5ae0bc8bf11e86c9b41a2e6d344dee91be3a505
-  data.tar.gz: ceca49879d920f2372f2ff6b140fb21d6a908ae4641faeee0f159c7c97909d594fff72ad98ff7a4159bff565301956f0c7cc11b0c60b48344b7732d0ebaa5bc2
+  metadata.gz: 887c07fd7dfdef6d704cd12ce43fd3acf151896b761046bb1f6dbbc547f6dd06a76b0566faf0ba31f1abf912a3381aff319de80f55727e8e6b683a63cce5573b
+  data.tar.gz: 9905f1671e4603866744256b1595b43a220eac1bdbfc890c414de6972051bd6a34960b6b04165a3ec5050ea9709b052c12fa27b16dfc91876345e324ef542178

data/README.md

@@ -3,9 +3,11 @@
 [![Build Status](https://travis-ci.com/DFE-Digital/govuk_design_system_formbuilder.svg?branch=master)](https://travis-ci.com/DFE-Digital/govuk_design_system_formbuilder)
 [![Maintainability](https://api.codeclimate.com/v1/badges/fde73b5dc9476197281b/maintainability)](https://codeclimate.com/github/DFE-Digital/govuk_design_system_formbuilder/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/fde73b5dc9476197281b/test_coverage)](https://codeclimate.com/github/DFE-Digital/govuk_design_system_formbuilder/test_coverage)
+[![Gem Version](https://badge.fury.io/rb/govuk_design_system_formbuilder.svg)](https://badge.fury.io/rb/govuk_design_system_formbuilder)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/d4c50b8d-6ca3-4797-9ab3-6e0731c72b44/deploy-status)](https://app.netlify.com/sites/govuk-form-builder/deploys)
 
 This gem provides a easy-to-use form builder that generates forms that are
-fully-compliant with version 3 of the [GOV.UK Design System](https://design-system.service.gov.uk/),
+fully-compliant with version 3.2.0 of the [GOV.UK Design System](https://design-system.service.gov.uk/),
 minimising the amount of markup you need to write.
 
 The latest version of this gem that supports GOV.UK Design System version 2 is
@@ -13,14 +15,15 @@ The latest version of this gem that supports GOV.UK Design System version 2 is
 
 In addition to the basic markup, the more-advanced functionality of the Design
 System is exposed via the API. Adding [JavaScript-enhanced word count
-checking](https://www.rubydoc.info/gems/govuk_design_system_formbuilder/GOVUKDesignSystemFormBuilder/Builder#govuk_text_area-instance_method)
+checking](https://govuk-form-builder.netlify.com/form-elements/text-area/)
 to text areas or [setting the size and weight of
-labels](https://www.rubydoc.info/gems/govuk_design_system_formbuilder/GOVUKDesignSystemFormBuilder/Builder#govuk_text_field-instance_method)
+labels](https://govuk-form-builder.netlify.com/introduction/labels-hints-and-legends/)
 on text fields requires only a single argument.
 
 If you're still not sure what a form builder is or how it works, don't worry!
 [This screencast](https://www.youtube.com/watch?v=PhoFZ0qXAlA) should give you
-an idea of what's on offer 😅
+an idea of what's on offer and [the official guide](https://govuk-form-builder.netlify.com) goes
+into a bit more depth on how everything works 😅
 
 ## What's included
 
@@ -32,8 +35,9 @@ an idea of what's on offer 😅
 * Additional params for programmatically adding hints to check box and radio
   button collections
 * No external dependencies
-* [Extensive documentation](https://www.rubydoc.info/gems/govuk_design_system_formbuilder/GOVUKDesignSystemFormBuilder/Builder)
 * An exhaustive test suite
+* [Extensive documentation](https://www.rubydoc.info/gems/govuk_design_system_formbuilder/GOVUKDesignSystemFormBuilder/Builder)
+* [A full guide](https://govuk-form-builder.netlify.com/)
 
 ## Installation
 

data/lib/govuk_design_system_formbuilder/base.rb

@@ -1,9 +1,10 @@
 module GOVUKDesignSystemFormBuilder
   class Base
-    def initialize(builder, object_name, attribute_name)
+    def initialize(builder, object_name, attribute_name, &block)
       @builder = builder
       @object_name = object_name
       @attribute_name = attribute_name
+      @block_content = @builder.capture { block.call } if block_given?
     end
 
     def hint_element
@@ -18,6 +19,10 @@ module GOVUKDesignSystemFormBuilder
       @label_element ||= Elements::Label.new(@builder, @object_name, @attribute_name, **@label)
     end
 
+    def supplemental_content
+      @supplemental_content ||= Containers::Supplemental.new(@builder, @object_name, @attribute_name, @block_content)
+    end
+
     # returns the id value used for the input
     #
     # @note field_id is overridden so that the error summary can link to the
@@ -40,7 +45,7 @@ module GOVUKDesignSystemFormBuilder
     end
 
     def hint_id
-      return nil if @hint_text.blank?
+      return nil unless @hint_text.present?
 
       build_id('hint')
     end
@@ -55,6 +60,12 @@ module GOVUKDesignSystemFormBuilder
       build_id('conditional')
     end
 
+    def supplemental_id
+      return nil unless @block_content.present?
+
+      build_id('supplemental')
+    end
+
     def has_errors?
       @builder.object.errors.any? &&
         @builder.object.errors.messages.dig(@attribute_name).present?

data/lib/govuk_design_system_formbuilder/builder.rb

@@ -10,7 +10,9 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
     # @option args [Hash] args additional arguments are applied as attributes to +input+ element
+    # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
     # @return [ActiveSupport::SafeBuffer] HTML output
     # @see https://design-system.service.gov.uk/components/text-input/ GOV.UK Text input
     #
@@ -20,8 +22,8 @@ module GOVUKDesignSystemFormBuilder
     #     hint_text: 'It says it on your birth certificate',
     #     required: true,
     #     placeholder: 'Ralph Wiggum'
-    def govuk_text_field(attribute_name, hint_text: nil, label: {}, width: 'full', **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :text, hint_text: hint_text, label: label, width: width, **args).html
+    def govuk_text_field(attribute_name, hint_text: nil, label: {}, width: nil, **args, &block)
+      Elements::Input.new(self, object_name, attribute_name, attribute_type: :text, hint_text: hint_text, label: label, width: width, **args, &block).html
     end
 
     # Generates a input of type +tel+
@@ -34,7 +36,9 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
     # @option args [Hash] args additional arguments are applied as attributes to +input+ element
+    # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
     # @return [ActiveSupport::SafeBuffer] HTML output
     # @see https://design-system.service.gov.uk/components/text-input/ GOV.UK Text input
     # @see https://design-system.service.gov.uk/patterns/telephone-numbers/ GOV.UK Telephone number patterns
@@ -45,8 +49,8 @@ module GOVUKDesignSystemFormBuilder
     #     hint_text: 'Include the dialling code',
     #     required: true,
     #     placeholder: '0123 456 789'
-    def govuk_phone_field(attribute_name, hint_text: nil, label: {}, width: 'full', **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :phone, hint_text: hint_text, label: label, width: width, **args).html
+    def govuk_phone_field(attribute_name, hint_text: nil, label: {}, width: nil, **args, &block)
+      Elements::Input.new(self, object_name, attribute_name, attribute_type: :phone, hint_text: hint_text, label: label, width: width, **args, &block).html
     end
 
     # Generates a input of type +email+
@@ -59,7 +63,9 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
     # @option args [Hash] args additional arguments are applied as attributes to +input+ element
+    # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
     # @return [ActiveSupport::SafeBuffer] HTML output
     # @see https://design-system.service.gov.uk/components/text-input/ GOV.UK Text input
     # @see https://design-system.service.gov.uk/patterns/email-addresses/ GOV.UK Email address patterns
@@ -68,8 +74,8 @@ module GOVUKDesignSystemFormBuilder
     #   = f.govuk_email_field :email_address,
     #     label: { text: 'Enter your email address' },
     #     placeholder: 'ralph.wiggum@springfield.edu'
-    def govuk_email_field(attribute_name, hint_text: nil, label: {}, width: 'full', **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :email, hint_text: hint_text, label: label, width: width, **args).html
+    def govuk_email_field(attribute_name, hint_text: nil, label: {}, width: nil, **args, &block)
+      Elements::Input.new(self, object_name, attribute_name, attribute_type: :email, hint_text: hint_text, label: label, width: width, **args, &block).html
     end
 
     # Generates a input of type +url+
@@ -82,7 +88,9 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
     # @option args [Hash] args additional arguments are applied as attributes to +input+ element
+    # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
     # @return [ActiveSupport::SafeBuffer] HTML output
     # @see https://design-system.service.gov.uk/components/text-input/ GOV.UK Text input
     #
@@ -91,8 +99,8 @@ module GOVUKDesignSystemFormBuilder
     #     label: { text: 'Enter your favourite website' },
     #     placeholder: 'https://www.gov.uk',
     #     autocomplete: 'url'
-    def govuk_url_field(attribute_name, hint_text: nil, label: {}, width: 'full', **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :url, hint_text: hint_text, label: label, width: width, **args).html
+    def govuk_url_field(attribute_name, hint_text: nil, label: {}, width: nil, **args, &block)
+      Elements::Input.new(self, object_name, attribute_name, attribute_type: :url, hint_text: hint_text, label: label, width: width, **args, &block).html
     end
 
     # Generates a input of type +number+
@@ -105,7 +113,9 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
     # @option args [Hash] args additional arguments are applied as attributes to the +input+ element
+    # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
     # @return [ActiveSupport::SafeBuffer] HTML output
     # @see https://design-system.service.gov.uk/components/text-input/ GOV.UK Text input
     #
@@ -116,8 +126,8 @@ module GOVUKDesignSystemFormBuilder
     #     min: 80,
     #     max: 150,
     #     step: 5
-    def govuk_number_field(attribute_name, hint_text: nil, label: {}, width: 'full', **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :number, hint_text: hint_text, label: label, width: width, **args).html
+    def govuk_number_field(attribute_name, hint_text: nil, label: {}, width: nil, **args, &block)
+      Elements::Input.new(self, object_name, attribute_name, attribute_type: :number, hint_text: hint_text, label: label, width: width, **args, &block).html
     end
 
     # Generates a +textarea+ element with a label, optional hint. Also offers
@@ -130,11 +140,13 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
     # @param max_words [Integer] adds the GOV.UK max word count
     # @param max_chars [Integer] adds the GOV.UK max characters count
     # @param threshold [Integer] only show the +max_words+ and +max_chars+ warnings once a threshold (percentage) is reached
     # @param rows [Integer] sets the initial number of rows
     # @option args [Hash] args additional arguments are applied as attributes to the +textarea+ element
+    # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
     # @return [ActiveSupport::SafeBuffer] HTML output
     # @see https://design-system.service.gov.uk/components/character-count GOV.UK character count component
     # @note Setting +max_chars+ or +max_words+ will add a caption beneath the +textarea+ with a live count of words
@@ -145,8 +157,8 @@ module GOVUKDesignSystemFormBuilder
     #     label: { text: 'Tell us about your work history' },
     #     rows: 8,
     #     max_words: 300
-    def govuk_text_area(attribute_name, hint_text: nil, label: {}, max_words: nil, max_chars: nil, rows: 5, threshold: nil, **args)
-      Elements::TextArea.new(self, object_name, attribute_name, hint_text: hint_text, label: label, max_words: max_words, max_chars: max_chars, rows: rows, threshold: threshold, **args).html
+    def govuk_text_area(attribute_name, hint_text: nil, label: {}, max_words: nil, max_chars: nil, rows: 5, threshold: nil, **args, &block)
+      Elements::TextArea.new(self, object_name, attribute_name, hint_text: hint_text, label: label, max_words: max_words, max_chars: max_chars, rows: rows, threshold: threshold, **args, &block).html
     end
 
     # Generates a +select+ element containing +option+ for each member in the provided collection
@@ -159,6 +171,8 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
+    # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
     # @return [ActiveSupport::SafeBuffer] HTML output
     def govuk_collection_select(attribute_name, collection, value_method, text_method, options: {}, html_options: {}, hint_text: nil, label: {}, &block)
       Elements::Select.new(
@@ -178,9 +192,13 @@ module GOVUKDesignSystemFormBuilder
 
     # Generates a radio button for each item in the supplied collection
     #
-    # @note Unlike the Rails +collection_radio_buttons+ helper, this version can also insert
+    # @note Unlike the Rails +#collection_radio_buttons+ helper, this version can also insert
     #   hints per item in the collection by supplying a +:hint_method+
     #
+    # @note +:bold_labels+, while false by default, is set to true when a
+    #   +:hint_method+ is provided. This is done to make the label stand out more
+    #   from the hint.
+    #
     # @param attribute_name [Symbol] The name of the attribute
     # @param collection [Enumerable<Object>] Options to be added to the +select+ element
     # @param value_method [Symbol] The method called against each member of the collection to provide the value
@@ -190,6 +208,7 @@ module GOVUKDesignSystemFormBuilder
     # @param legend [Hash] options for configuring the legend
     # @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
     # @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+
@@ -210,7 +229,7 @@ module GOVUKDesignSystemFormBuilder
     #    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: { text: nil, size: 'm' }, inline: false, small: 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, &block)
       Elements::Radios::Collection.new(
         self,
         object_name,
@@ -223,6 +242,7 @@ module GOVUKDesignSystemFormBuilder
         legend: legend,
         inline: inline,
         small: small,
+        bold_labels: bold_labels,
         &block
       ).html
     end
@@ -377,6 +397,7 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
     # @param multiple [Boolean] controls whether the check box is part of a collection or represents a single attribute
     # @param block [Block] any HTML passed in will form the contents of the fieldset
     # @return [ActiveSupport::SafeBuffer] HTML output
@@ -504,8 +525,10 @@ module GOVUKDesignSystemFormBuilder
     # @option label text [String] the label text
     # @option label tag [Symbol,String] the label's wrapper tag, intended to allow labels to act as page headings
     # @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
+    # @option label hidden [Boolean] control the visability of the label. Hidden labels will stil be read by screenreaders
     # @param hint_text [String] The content of the hint. No hint will be injected if left +nil+
     # @option args [Hash] args additional arguments are applied as attributes to +input+ element
+    # @param block [Block] arbitrary HTML that will be rendered between the hint and the input
     #
     # @example A photo upload field with file type specifier
     #   = f.govuk_file_field :photo, label: { text: 'Upload your photo' }, accept: 'image/*'
@@ -516,8 +539,8 @@ module GOVUKDesignSystemFormBuilder
     # @note Remember to set +multipart: true+ when creating a form with file
     #   uploads, {https://guides.rubyonrails.org/form_helpers.html#uploading-files see
     #   the Rails documentation} for more information
-    def govuk_file_field(attribute_name, label: {}, hint_text: nil, **args)
-      Elements::File.new(self, object_name, attribute_name, label: label, hint_text: hint_text, **args).html
+    def govuk_file_field(attribute_name, label: {}, hint_text: nil, **args, &block)
+      Elements::File.new(self, object_name, attribute_name, label: label, hint_text: hint_text, **args, &block).html
     end
   end
 end

data/lib/govuk_design_system_formbuilder/containers/check_boxes_fieldset.rb

@@ -2,7 +2,7 @@ module GOVUKDesignSystemFormBuilder
   module Containers
     class CheckBoxesFieldset < GOVUKDesignSystemFormBuilder::Base
       def initialize(builder, object_name, attribute_name, hint_text:, legend:, small:, &block)
-        super(builder, object_name, attribute_name)
+        super(builder, object_name, attribute_name, &block)
 
         @legend        = legend
         @hint_text     = hint_text

data/lib/govuk_design_system_formbuilder/containers/fieldset.rb

@@ -1,7 +1,7 @@
 module GOVUKDesignSystemFormBuilder
   module Containers
     class Fieldset < GOVUKDesignSystemFormBuilder::Base
-      LEGEND_DEFAULTS = { text: nil, tag: 'h1', size: 'xl' }.freeze
+      LEGEND_DEFAULTS = { text: nil, tag: 'h1', size: 'm' }.freeze
       LEGEND_SIZES = %w(xl l m s).freeze
 
       def initialize(builder, legend: {}, described_by: nil)

data/lib/govuk_design_system_formbuilder/containers/supplemental.rb

@@ -0,0 +1,24 @@
+module GOVUKDesignSystemFormBuilder
+  module Containers
+    class Supplemental < GOVUKDesignSystemFormBuilder::Base
+      def initialize(builder, object_name, attribute_name, content)
+        @builder        = builder
+        @object_name    = object_name
+        @attribute_name = attribute_name
+        @content        = content
+      end
+
+      def html
+        return nil unless @content.present?
+
+        @builder.content_tag('div', id: supplemental_id) do
+          @content
+        end
+      end
+
+      def supplemental_id
+        build_id('supplemental')
+      end
+    end
+  end
+end

data/lib/govuk_design_system_formbuilder/elements/check_boxes/collection.rb

@@ -3,7 +3,7 @@ module GOVUKDesignSystemFormBuilder
     module CheckBoxes
       class Collection < GOVUKDesignSystemFormBuilder::Base
         def initialize(builder, object_name, attribute_name, collection, value_method:, text_method:, hint_method: nil, hint_text:, legend:, small:, &block)
-          super(builder, object_name, attribute_name)
+          super(builder, object_name, attribute_name, &block)
 
           @collection    = collection
           @value_method  = value_method
@@ -12,17 +12,16 @@ module GOVUKDesignSystemFormBuilder
           @small         = small
           @legend        = legend
           @hint_text     = hint_text
-          @block_content = @builder.capture { block.call } if block_given?
         end
 
         def html
           Containers::FormGroup.new(@builder, @object_name, @attribute_name).html do
-            Containers::Fieldset.new(@builder, legend: @legend, described_by: [error_element.error_id, hint_element.hint_id]).html do
+            Containers::Fieldset.new(@builder, legend: @legend, described_by: [error_id, hint_id, supplemental_id]).html do
               @builder.safe_join(
                 [
                   hint_element.html,
                   error_element.html,
-                  @block_content,
+                  supplemental_content.html,
                   Containers::CheckBoxes.new(@builder, small: @small).html do
                     build_collection
                   end

data/lib/govuk_design_system_formbuilder/elements/check_boxes/collection_check_box.rb

@@ -18,7 +18,7 @@ module GOVUKDesignSystemFormBuilder
                 @checkbox.check_box(
                   id: field_id(link_errors: @link_errors),
                   class: "govuk-checkboxes__input",
-                  aria: { describedby: hint_element.hint_id }
+                  aria: { describedby: hint_id }
                 ),
                 label_element.html,
                 hint_element.html

data/lib/govuk_design_system_formbuilder/elements/check_boxes/fieldset_check_box.rb

@@ -52,7 +52,7 @@ module GOVUKDesignSystemFormBuilder
         end
 
         def hint_element
-          @hint_element ||= Elements::Hint.new(@builder, @object_name, @attribute_name, @hint_text, checkbox: true)
+          @hint_element ||= Elements::Hint.new(@builder, @object_name, @attribute_name, @hint_text, @value, checkbox: true)
         end
 
         def conditional_classes

data/lib/govuk_design_system_formbuilder/elements/date.rb

@@ -4,21 +4,20 @@ module GOVUKDesignSystemFormBuilder
       SEGMENTS = { day: '3i', month: '2i', year: '1i' }.freeze
 
       def initialize(builder, object_name, attribute_name, legend:, hint_text:, date_of_birth: false, &block)
-        super(builder, object_name, attribute_name)
+        super(builder, object_name, attribute_name, &block)
         @legend = legend
         @hint_text = hint_text
         @date_of_birth = date_of_birth
-        @block_content = @builder.capture { block.call } if block_given?
       end
 
       def html
         Containers::FormGroup.new(@builder, @object_name, @attribute_name).html do
-          Containers::Fieldset.new(@builder, legend: @legend, described_by: [error_element.error_id, hint_element.hint_id]).html do
+          Containers::Fieldset.new(@builder, legend: @legend, described_by: [error_id, hint_id, supplemental_id]).html do
             @builder.safe_join(
               [
                 hint_element.html,
                 error_element.html,
-                @block_content,
+                supplemental_content.html,
                 @builder.content_tag('div', class: 'govuk-date-input') do
                   @builder.safe_join(
                     [

data/lib/govuk_design_system_formbuilder/elements/error_summary.rb

@@ -71,7 +71,7 @@ module GOVUKDesignSystemFormBuilder
           tabindex: -1,
           role: 'alert',
           data: {
-            module: 'error-summary'
+            module: 'govuk-error-summary'
           },
           aria: {
             labelledby: error_summary_title_id

data/lib/govuk_design_system_formbuilder/elements/file.rb

@@ -1,8 +1,8 @@
 module GOVUKDesignSystemFormBuilder
   module Elements
     class File < GOVUKDesignSystemFormBuilder::Base
-      def initialize(builder, object_name, attribute_name, hint_text:, label:, **extra_args)
-        super(builder, object_name, attribute_name)
+      def initialize(builder, object_name, attribute_name, hint_text:, label:, **extra_args, &block)
+        super(builder, object_name, attribute_name, &block)
 
         @label      = label
         @hint_text  = hint_text
@@ -16,11 +16,12 @@ module GOVUKDesignSystemFormBuilder
               label_element.html,
               hint_element.html,
               error_element.html,
+              supplemental_content.html,
               @builder.file_field(
                 @attribute_name,
                 id: field_id(link_errors: true),
                 class: file_classes,
-                aria: { describedby: described_by(hint_element.hint_id, error_element.error_id) },
+                aria: { describedby: described_by(hint_id, error_id, supplemental_id) },
                 **@extra_args
               )
             ]

data/lib/govuk_design_system_formbuilder/elements/input.rb

@@ -1,8 +1,8 @@
 module GOVUKDesignSystemFormBuilder
   module Elements
     class Input < GOVUKDesignSystemFormBuilder::Base
-      def initialize(builder, object_name, attribute_name, attribute_type:, hint_text:, label:, width:, **extra_args)
-        super(builder, object_name, attribute_name)
+      def initialize(builder, object_name, attribute_name, attribute_type:, hint_text:, label:, width:, **extra_args, &block)
+        super(builder, object_name, attribute_name, &block)
 
         @width          = width
         @extra_args     = extra_args
@@ -17,13 +17,20 @@ module GOVUKDesignSystemFormBuilder
             [
               label_element.html,
               hint_element.html,
+              supplemental_content.html,
               error_element.html,
               @builder.send(
                 @builder_method,
                 @attribute_name,
                 id: field_id(link_errors: true),
                 class: input_classes,
-                aria: { describedby: described_by(hint_element.hint_id, error_element.error_id) },
+                aria: {
+                  describedby: described_by(
+                    hint_id,
+                    error_id,
+                    supplemental_id
+                  )
+                },
                 **@extra_args
               )
             ]
@@ -34,16 +41,19 @@ module GOVUKDesignSystemFormBuilder
     private
 
       def input_classes
-        %w(govuk-input).tap do |classes|
-          classes.push(width_classes)
-          classes.push('govuk-input--error') if has_errors?
-        end
+        %w(govuk-input).push(width_classes, error_classes).compact
+      end
+
+      def error_classes
+        ('govuk-input--error') if has_errors?
       end
 
       def width_classes
         return if @width.blank?
 
         case @width
+        when nil then nil
+
           # fixed (character) widths
         when 20 then 'govuk-input--width-20'
         when 10 then 'govuk-input--width-10'

data/lib/govuk_design_system_formbuilder/elements/label.rb

@@ -1,10 +1,10 @@
 module GOVUKDesignSystemFormBuilder
   module Elements
     class Label < GOVUKDesignSystemFormBuilder::Base
-      def initialize(builder, object_name, attribute_name, text: nil, value: nil, size: nil, radio: false, checkbox: false, tag: nil)
+      def initialize(builder, object_name, attribute_name, text: nil, value: nil, size: nil, hidden: false, radio: false, checkbox: false, tag: nil)
         super(builder, object_name, attribute_name)
 
-        @text           = label_text(text)
+        @text           = label_text(text, hidden)
         @value          = value # used by field_id
         @size_class     = label_size_class(size)
         @radio_class    = radio_class(radio)
@@ -27,15 +27,22 @@ module GOVUKDesignSystemFormBuilder
       def build_label
         @builder.label(
           @attribute_name,
-          @text,
           value: @value,
           for: field_id(link_errors: true),
           class: %w(govuk-label).push(@size_class, @weight_class, @radio_class, @checkbox_class).compact
-        )
+        ) do
+          @text
+        end
       end
 
-      def label_text(option_text)
-        [option_text, @value, @attribute_name.capitalize].compact.first
+      def label_text(option_text, hidden)
+        text = [option_text, @value, @attribute_name.capitalize].compact.first
+
+        if hidden
+          @builder.tag.span(text, class: %w(govuk-visually-hidden))
+        else
+          @builder.raw(text)
+        end
       end
 
       def radio_class(radio)

data/lib/govuk_design_system_formbuilder/elements/radios/collection.rb

@@ -2,8 +2,8 @@ module GOVUKDesignSystemFormBuilder
   module Elements
     module Radios
       class Collection < GOVUKDesignSystemFormBuilder::Base
-        def initialize(builder, object_name, attribute_name, collection, value_method:, text_method:, hint_method:, hint_text:, legend:, inline:, small:, &block)
-          super(builder, object_name, attribute_name)
+        def initialize(builder, object_name, attribute_name, collection, value_method:, text_method:, hint_method:, hint_text:, legend:, inline:, small:, bold_labels:, &block)
+          super(builder, object_name, attribute_name, &block)
 
           @collection    = collection
           @value_method  = value_method
@@ -13,17 +13,17 @@ module GOVUKDesignSystemFormBuilder
           @small         = small
           @legend        = legend
           @hint_text     = hint_text
-          @block_content = @builder.capture { block.call } if block_given?
+          @bold_labels   = hint_method.present? || bold_labels
         end
 
         def html
           Containers::FormGroup.new(@builder, @object_name, @attribute_name).html do
-            Containers::Fieldset.new(@builder, legend: @legend, described_by: [error_element.error_id, hint_element.hint_id]).html do
+            Containers::Fieldset.new(@builder, legend: @legend, described_by: [error_id, hint_id, supplemental_id]).html do
               @builder.safe_join(
                 [
                   hint_element.html,
                   error_element.html,
-                  @block_content,
+                  supplemental_content.html,
                   Containers::Radios.new(@builder, inline: @inline, small: @small).html do
                     @builder.safe_join(build_collection)
                   end
@@ -45,7 +45,8 @@ module GOVUKDesignSystemFormBuilder
               value_method: @value_method,
               text_method: @text_method,
               hint_method: @hint_method,
-              link_errors: has_errors? && i.zero?
+              link_errors: has_errors? && i.zero?,
+              bold_labels: @bold_labels
             ).html
           end
         end

data/lib/govuk_design_system_formbuilder/elements/radios/collection_radio_button.rb

@@ -6,13 +6,14 @@ module GOVUKDesignSystemFormBuilder
         #   error summary requires that the id of the first radio is linked-to from the corresponding
         #   error message. As when the summary is built what happens later in the form is unknown, we
         #   need to control this to ensure the link is generated correctly
-        def initialize(builder, object_name, attribute_name, item, value_method:, text_method:, hint_method:, link_errors: false)
+        def initialize(builder, object_name, attribute_name, item, value_method:, text_method:, hint_method:, link_errors: false, bold_labels:)
           super(builder, object_name, attribute_name)
           @item        = item
           @value       = item.send(value_method)
           @text        = item.send(text_method)
           @hint_text   = item.send(hint_method) if hint_method.present?
           @link_errors = link_errors
+          @bold_labels = bold_labels
         end
 
         def html
@@ -40,7 +41,11 @@ module GOVUKDesignSystemFormBuilder
         end
 
         def label_element
-          @label_element ||= Elements::Label.new(@builder, @object_name, @attribute_name, text: @text, value: @value, radio: true)
+          @label_element ||= Elements::Label.new(@builder, @object_name, @attribute_name, text: @text, value: @value, radio: true, size: label_size)
+        end
+
+        def label_size
+          @bold_labels.present? ? 's' : nil
         end
       end
     end

data/lib/govuk_design_system_formbuilder/elements/select.rb

@@ -2,7 +2,7 @@ module GOVUKDesignSystemFormBuilder
   module Elements
     class Select < GOVUKDesignSystemFormBuilder::Base
       def initialize(builder, object_name, attribute_name, collection, value_method:, text_method:, options: {}, html_options: {}, hint_text:, label:, &block)
-        super(builder, object_name, attribute_name)
+        super(builder, object_name, attribute_name, &block)
 
         @collection    = collection
         @value_method  = value_method
@@ -11,7 +11,6 @@ module GOVUKDesignSystemFormBuilder
         @html_options  = html_options
         @label         = label
         @hint_text     = hint_text
-        @block_content = @builder.capture { block.call } if block_given?
       end
 
       def html
@@ -21,14 +20,14 @@ module GOVUKDesignSystemFormBuilder
               label_element.html,
               hint_element.html,
               error_element.html,
-              @block_content,
+              supplemental_content.html,
               @builder.collection_select(
                 @attribute_name,
                 @collection,
                 @value_method,
                 @text_method,
                 @options,
-                build_html_options(hint_element, error_element)
+                build_html_options
               )
             ]
           )
@@ -37,11 +36,11 @@ module GOVUKDesignSystemFormBuilder
 
     private
 
-      def build_html_options(hint_element, error_element)
+      def build_html_options
         @html_options.deep_merge(
           id: field_id(link_errors: true),
           class: select_classes,
-          aria: { describedby: described_by(hint_element.hint_id, error_element.error_id) }
+          aria: { describedby: described_by(hint_id, error_id, supplemental_id) }
         )
       end
 

data/lib/govuk_design_system_formbuilder/elements/submit.rb

@@ -23,7 +23,7 @@ module GOVUKDesignSystemFormBuilder
                   warning_class,
                   secondary_class,
                   padding_class(@block_content.present?)
-                ),
+                ).compact,
                 **extra_args
               ),
               @block_content

data/lib/govuk_design_system_formbuilder/elements/text_area.rb

@@ -1,8 +1,8 @@
 module GOVUKDesignSystemFormBuilder
   module Elements
     class TextArea < Base
-      def initialize(builder, object_name, attribute_name, hint_text:, label:, rows:, max_words:, max_chars:, threshold:, **extra_args)
-        super(builder, object_name, attribute_name)
+      def initialize(builder, object_name, attribute_name, hint_text:, label:, rows:, max_words:, max_chars:, threshold:, **extra_args, &block)
+        super(builder, object_name, attribute_name, &block)
         @label      = label
         @hint_text  = hint_text
         @extra_args = extra_args
@@ -17,12 +17,18 @@ module GOVUKDesignSystemFormBuilder
           Containers::FormGroup.new(@builder, @object_name, @attribute_name).html do
             @builder.safe_join(
               [
-                [label_element, hint_element, error_element].map(&:html),
+                [label_element, hint_element, error_element, supplemental_content].map(&:html),
                 @builder.text_area(
                   @attribute_name,
                   id: field_id(link_errors: true),
                   class: govuk_textarea_classes,
-                  aria: { describedby: described_by(hint_element.hint_id, error_element.error_id) },
+                  aria: {
+                    describedby: described_by(
+                      hint_id,
+                      error_id,
+                      supplemental_id
+                    )
+                  },
                   **@extra_args.merge(rows: @rows)
                 )
               ].flatten.compact

data/lib/govuk_design_system_formbuilder/version.rb

@@ -1,3 +1,3 @@
 module GOVUKDesignSystemFormBuilder
-  VERSION = '0.9.2'.freeze
+  VERSION = '0.9.3'.freeze
 end

data/lib/govuk_design_system_formbuilder.rb

@@ -31,10 +31,11 @@ require 'govuk_design_system_formbuilder/containers/radios'
 require 'govuk_design_system_formbuilder/containers/radio_buttons_fieldset'
 require 'govuk_design_system_formbuilder/containers/check_boxes'
 require 'govuk_design_system_formbuilder/containers/character_count'
+require 'govuk_design_system_formbuilder/containers/supplemental'
 
 module GOVUKDesignSystemFormBuilder
   class FormBuilder < ActionView::Helpers::FormBuilder
-    delegate :content_tag, :tag, :safe_join, :safe_concat, :capture, :link_to, to: :@template
+    delegate :content_tag, :tag, :safe_join, :safe_concat, :capture, :link_to, :raw, to: :@template
 
     include GOVUKDesignSystemFormBuilder::Builder
   end

metadata

@@ -1,35 +1,35 @@
 --- !ruby/object:Gem::Specification
 name: govuk_design_system_formbuilder
 version: !ruby/object:Gem::Version
-  version: 0.9.2
+  version: 0.9.3
 platform: ruby
 authors:
 - Peter Yates
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-08-27 00:00:00.000000000 Z
+date: 2019-09-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '5.2'
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.3
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '5.2'
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.3
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.0.0
 - !ruby/object:Gem::Dependency
   name: govuk-lint
   requirement: !ruby/object:Gem::Requirement
@@ -134,6 +134,104 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: nanoc
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.11'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.11'
+- !ruby/object:Gem::Dependency
+  name: slim
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.0.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.0.1
+- !ruby/object:Gem::Dependency
+  name: adsf
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.2
+- !ruby/object:Gem::Dependency
+  name: adsf-live
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.2
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.8.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.8.0
+- !ruby/object:Gem::Dependency
+  name: htmlbeautifier
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.3.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.3.1
+- !ruby/object:Gem::Dependency
+  name: sassc
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.1.0
 description: A Rails form builder that generates form inputs adhering to the GOV.UK
   Design System
 email:
@@ -143,7 +241,6 @@ extensions: []
 extra_rdoc_files: []
 files:
 - README.md
-- Rakefile
 - lib/govuk_design_system_formbuilder.rb
 - lib/govuk_design_system_formbuilder/base.rb
 - lib/govuk_design_system_formbuilder/builder.rb
@@ -154,6 +251,7 @@ files:
 - lib/govuk_design_system_formbuilder/containers/form_group.rb
 - lib/govuk_design_system_formbuilder/containers/radio_buttons_fieldset.rb
 - lib/govuk_design_system_formbuilder/containers/radios.rb
+- lib/govuk_design_system_formbuilder/containers/supplemental.rb
 - lib/govuk_design_system_formbuilder/elements/check_boxes/collection.rb
 - lib/govuk_design_system_formbuilder/elements/check_boxes/collection_check_box.rb
 - lib/govuk_design_system_formbuilder/elements/check_boxes/fieldset_check_box.rb
@@ -173,7 +271,7 @@ files:
 - lib/govuk_design_system_formbuilder/elements/submit.rb
 - lib/govuk_design_system_formbuilder/elements/text_area.rb
 - lib/govuk_design_system_formbuilder/version.rb
-homepage: https://github.com/DFE-Digital
+homepage: https://govuk-form-builder.netlify.com
 licenses:
 - MIT
 metadata: {}