govuk_design_system_formbuilder 0.7.2 → 0.7.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5dccd0fa57d48d4d0198307c0c4e11ac03dba8ffacd9bcf7850ba509477e4a82
-  data.tar.gz: f3f197d18cc7fb186cf319da8b90f16d9bef48bc0e3c6493857633105872b599
+  metadata.gz: 3c247c34794b087d27148758c3f540b38e241afbf42d7a4692b0043bd950518d
+  data.tar.gz: 8644e39ebe2339b34b41feea5c73f3de67888d4b89dc847a3ba332233cf163b2
 SHA512:
-  metadata.gz: dd17c106ef4052149c832e5e8428b7beeddb56cdef0ec4861036242069021d4a5122da8c817e19902c757513a9bc23bf47b4809c63fbc2f20ca19eb983921ee5
-  data.tar.gz: c3ee032aa1925b929abcf0a9d400f1a1404bb5a56b8290ae1f66d475018841a88bb4c504fddfa41ae4baf8d1a7094eb645b67d6b2ffbf935d726a023c42bd2a0
+  metadata.gz: 770f26c8ccddb0704b9e7f366cb122bc670ceec87e7e556d8a38dc9a55b1340c92aa6558dddb6224133efed153f72da1c659c0570994c6975e45d730042cd916
+  data.tar.gz: 498191263c697030b558bf5cfdec236c68ff4f77d66ee0285423489b123e3720e4f83c1eab87f8f124a9c9adf2489cbf524d6d132bc0e1e3701b9b90f80d3a39

data/README.md

@@ -47,6 +47,15 @@ Now we can get started! 🎉
 
   = f.govuk_number_field :age, label: { text: 'Age' }
 
+  = f.govuk_collection_select :department_id,
+    @departments,
+    :id,
+    :name,
+    :description,
+    label: { text: 'Which department do you work for?' },
+    hint_text: "If you don't know ask your manager" }
+
+
   = f.submit 'Away we go!'
 ```
 

data/lib/govuk_design_system_formbuilder/base.rb

@@ -13,17 +13,21 @@ module GOVUKDesignSystemFormBuilder
     def hint_id
       return nil unless @hint_text.present?
 
-      [@object_name, @attribute_name, @value, 'hint'].compact.join('-').parameterize
+      build_id('hint')
     end
 
     def error_id
       return nil unless has_errors?
 
-      [@object_name, @attribute_name, 'error'].compact.join('-').parameterize
+      build_id('error')
     end
 
     def conditional_id
-      [@object_name, @attribute_name, @value, 'conditional'].compact.join('-').parameterize
+      build_id('conditional')
+    end
+
+    def attribute_descriptor
+      build_id(nil, '_', '-')
     end
 
     def has_errors?
@@ -31,10 +35,6 @@ module GOVUKDesignSystemFormBuilder
         @builder.object.errors.messages.keys.include?(@attribute_name)
     end
 
-    def attribute_descriptor
-      [@object_name, @attribute_name, @value].compact.join('_').parameterize
-    end
-
     def attribute_identifier
       "%<object_name>s[%<attribute_name>s]" % {
         object_name: @object_name,
@@ -46,7 +46,23 @@ module GOVUKDesignSystemFormBuilder
       conditional = @builder.content_tag('div', class: conditional_classes, id: conditional_id) do
         @builder.capture { block.call }
       end
+
       return conditional, conditional_id
     end
+
+  private
+
+    def build_id(id_type, delimiter = '-', replace = '_', override_attribute_name: nil)
+      [
+        @object_name,
+        (override_attribute_name || @attribute_name),
+        @value,
+        id_type
+      ]
+        .compact
+        .join(delimiter)
+        .parameterize
+        .tr(replace, delimiter)
+    end
   end
 end

data/lib/govuk_design_system_formbuilder/builder.rb

@@ -4,6 +4,8 @@ module GOVUKDesignSystemFormBuilder
     #
     # @param attribute_name [Symbol] The name of the attribute
     # @param hint_text [String] The content of the hint. No hint will be injected if left +nil+
+    # @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
+    #   or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
     # @param [Hash] label configures the associated label
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +large+, +medium+, +regular+ or +small+
@@ -18,14 +20,16 @@ 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: {}, **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :text, hint_text: hint_text, label: label, **args).html
+    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
     end
 
     # Generates a input of type +tel+
     #
     # @param attribute_name [Symbol] The name of the attribute
     # @param hint_text [String] The content of the hint. No hint will be injected if left +nil+
+    # @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
+    #   or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
     # @param [Hash] label configures the associated label
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +large+, +medium+, +regular+ or +small+
@@ -41,14 +45,16 @@ module GOVUKDesignSystemFormBuilder
     #     hint_text: 'Include the dialling code',
     #     required: true,
     #     placeholder: '0123 456 789'
-    def govuk_phone_field(attribute_name, hint_text: nil, label: {}, **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :phone, hint_text: hint_text, label: label, **args).html
+    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
     end
 
     # Generates a input of type +email+
     #
     # @param attribute_name [Symbol] The name of the attribute
     # @param hint_text [String] The content of the hint. No hint will be injected if left +nil+
+    # @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
+    #   or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
     # @param [Hash] label configures the associated label
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +large+, +medium+, +regular+ or +small+
@@ -62,14 +68,16 @@ 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: {}, **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :email, hint_text: hint_text, label: label, **args).html
+    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
     end
 
     # Generates a input of type +url+
     #
     # @param attribute_name [Symbol] The name of the attribute
     # @param hint_text [String] The content of the hint. No hint will be injected if left +nil+
+    # @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
+    #   or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
     # @param [Hash] label configures the associated label
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +large+, +medium+, +regular+ or +small+
@@ -83,14 +91,16 @@ 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: {}, **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :url, hint_text: hint_text, label: label, **args).html
+    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
     end
 
     # Generates a input of type +number+
     #
     # @param attribute_name [Symbol] The name of the attribute
     # @param hint_text [String] The content of the hint. No hint will be injected if left +nil+
+    # @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
+    #   or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
     # @param [Hash] label configures the associated label
     # @option label text [String] the label text
     # @option label size [String] the size of the label font, can be +large+, +medium+, +regular+ or +small+
@@ -106,11 +116,10 @@ module GOVUKDesignSystemFormBuilder
     #     min: 80,
     #     max: 150,
     #     step: 5
-    def govuk_number_field(attribute_name, hint_text: nil, label: {}, **args)
-      Elements::Input.new(self, object_name, attribute_name, attribute_type: :number, hint_text: hint_text, label: label, **args).html
+    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
     end
 
-
     # Generates a +textarea+ element with a label, optional hint. Also offers
     # the ability to add the GOV.UK character and word counting components
     # automatically
@@ -123,6 +132,8 @@ module GOVUKDesignSystemFormBuilder
     # @option label weight [String] the weight of the label font, can be +bold+ or +regular+
     # @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
     # @return [ActiveSupport::SafeBuffer] HTML output
     # @see https://design-system.service.gov.uk/components/character-count GOV.UK character count component
@@ -134,8 +145,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, **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, **args).html
+    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
     end
 
     # Generates a +select+ element containing +option+ for each member in the provided collection
@@ -411,5 +422,24 @@ module GOVUKDesignSystemFormBuilder
     def govuk_date_field(attribute_name, hint_text: nil, legend: {}, date_of_birth: false, &block)
       Elements::Date.new(self, object_name, attribute_name, hint_text: hint_text, legend: legend, date_of_birth: date_of_birth, &block).html
     end
+
+    # Generates a summary of errors in the form, each linking to the corresponding
+    # part of the form that contains the error
+    #
+    # @param title [String] the error summary heading
+    #
+    # @todo Currently the summary anchors link to the inline error messages themselves rather to
+    #   the accompanying input. More work is required to improve this and it needs to be
+    #   handled in a less-generic manner. For example, we can't link to a specific radio button
+    #   if one hasn't been chosen but we should link to a {#govuk_text_field} if one has been left
+    #   blank
+    #
+    # @example An error summary with a custom title
+    #   = f.govuk_error_summary 'Uh-oh, spaghettios'
+    #
+    # @see https://design-system.service.gov.uk/components/error-summary/ GOV.UK error summary
+    def govuk_error_summary(title = 'There is a problem')
+      Elements::ErrorSummary.new(self, object_name, title).html
+    end
   end
 end

data/lib/govuk_design_system_formbuilder/containers/character_count.rb

@@ -1,11 +1,12 @@
 module GOVUKDesignSystemFormBuilder
   module Containers
     class CharacterCount < Base
-      def initialize(builder, max_words:, max_chars:)
+      def initialize(builder, max_words:, max_chars:, threshold:)
         @builder = builder
         fail ArgumentError, 'limit can be words or chars' if max_words && max_chars
         @max_words = max_words
         @max_chars = max_chars
+        @threshold = threshold
       end
 
       def html
@@ -14,7 +15,7 @@ module GOVUKDesignSystemFormBuilder
         @builder.content_tag(
           'div',
           class: 'govuk-character-count',
-          data: { module: 'character-count' }.merge(limit)
+          data: { module: 'character-count' }.merge(**limit, **threshold).compact
         ) do
           yield
         end
@@ -30,6 +31,10 @@ module GOVUKDesignSystemFormBuilder
         end
       end
 
+      def threshold
+        { threshold: @threshold }
+      end
+
       def limit?
         @max_words || @max_chars
       end

data/lib/govuk_design_system_formbuilder/containers/fieldset.rb

@@ -48,7 +48,7 @@ module GOVUKDesignSystemFormBuilder
       def descriptors(described_by)
         return nil unless described_by.present?
 
-        Array.wrap(described_by).join(' ')
+        Array.wrap(described_by).reject(&:blank?).join(' ')
       end
     end
   end

data/lib/govuk_design_system_formbuilder/elements/date.rb

@@ -13,12 +13,14 @@ module GOVUKDesignSystemFormBuilder
 
       def html
         hint_element  = Elements::Hint.new(@builder, @object_name, @attribute_name, @hint_text)
+        error_element = Elements::ErrorMessage.new(@builder, @object_name, @attribute_name)
 
         Containers::FormGroup.new(@builder, @object_name, @attribute_name).html do
-          Containers::Fieldset.new(@builder, @object_name, @attribute_name, legend: @legend, described_by: hint_element.hint_id).html do
+          Containers::Fieldset.new(@builder, @object_name, @attribute_name, legend: @legend, described_by: [error_element.error_id, hint_element.hint_id]).html do
             @builder.safe_join(
               [
                 hint_element.html,
+                error_element.html,
                 @block_content,
                 @builder.content_tag('div', class: 'govuk-date-input') do
                   @builder.safe_join(
@@ -69,7 +71,10 @@ module GOVUKDesignSystemFormBuilder
       end
 
       def date_input_classes(width)
-        %w(govuk-input govuk-date-input__input).push("govuk-input--width-#{width}")
+        %w(govuk-input govuk-date-input__input).tap do |classes|
+          classes.push("govuk-input--width-#{width}")
+          classes.push("govuk-input--error") if has_errors?
+        end
       end
 
       def date_input_label_classes

data/lib/govuk_design_system_formbuilder/elements/error_summary.rb

@@ -0,0 +1,68 @@
+module GOVUKDesignSystemFormBuilder
+  module Elements
+    class ErrorSummary < GOVUKDesignSystemFormBuilder::Base
+      def initialize(builder, object_name, title)
+        @builder = builder
+        @object_name = object_name
+        @title = title
+      end
+
+      def html
+        return nil unless object_has_errors?
+
+        @builder.content_tag('div', class: 'govuk-error-summary', **error_summary_attributes) do
+          @builder.safe_join(
+            [
+              @builder.tag.h2(@title, id: error_summary_title_id, class: 'govuk-error-summary__title'),
+              @builder.content_tag('div', class: 'govuk-error-summary__body') do
+                @builder.content_tag('ul', class: 'govuk-list govuk-error-summary__list') do
+                  @builder.safe_join(
+                    @builder.object.errors.messages.map do |attribute, messages|
+                      error_list_item(attribute, messages)
+                    end
+                  )
+                end
+              end
+            ]
+          )
+        end
+      end
+
+    private
+
+      def error_list_item(attribute, messages)
+        @builder.content_tag('li') do
+          @builder.tag.a(
+            messages.join(', '),
+            href: ['#', error_id(attribute)].join
+          )
+        end
+      end
+
+      def error_id(attribute)
+        build_id('error', override_attribute_name: attribute)
+      end
+
+      def error_summary_title_id
+        'error-summary-title'
+      end
+
+      def object_has_errors?
+        @builder.object.invalid?
+      end
+
+      def error_summary_attributes
+        {
+          tabindex: -1,
+          role: 'alert',
+          data: {
+            module: 'error-summary'
+          },
+          aria: {
+            labelledby: error_summary_title_id
+          }
+        }
+      end
+    end
+  end
+end

data/lib/govuk_design_system_formbuilder/elements/input.rb

@@ -1,11 +1,11 @@
 module GOVUKDesignSystemFormBuilder
   module Elements
     class Input < GOVUKDesignSystemFormBuilder::Base
-      def initialize(builder, object_name, attribute_name, attribute_type:, hint_text:, label:, **extra_args)
+      def initialize(builder, object_name, attribute_name, attribute_type:, hint_text:, label:, width:, **extra_args)
         super(builder, object_name, attribute_name)
 
-        @extra_args     = extra_args.dup
-        @width          = @extra_args.delete(:width)
+        @width          = width
+        @extra_args     = extra_args
         @builder_method = [attribute_type, 'field'].join('_')
         @label          = label
         @hint_text      = hint_text

data/lib/govuk_design_system_formbuilder/elements/text_area.rb

@@ -1,13 +1,14 @@
 module GOVUKDesignSystemFormBuilder
   module Elements
     class TextArea < Base
-      def initialize(builder, object_name, attribute_name, hint_text:, label:, rows:, max_words:, max_chars:, **extra_args)
+      def initialize(builder, object_name, attribute_name, hint_text:, label:, rows:, max_words:, max_chars:, threshold:, **extra_args)
         super(builder, object_name, attribute_name)
         @label      = label
         @hint_text  = hint_text
         @extra_args = extra_args
         @max_words  = max_words
         @max_chars  = max_chars
+        @threshold  = threshold
         @rows       = rows
       end
 
@@ -16,7 +17,7 @@ module GOVUKDesignSystemFormBuilder
         label_element = Elements::Label.new(@builder, @object_name, @attribute_name, @label)
         error_element = Elements::ErrorMessage.new(@builder, @object_name, @attribute_name)
 
-        Containers::CharacterCount.new(@builder, max_words: @max_words, max_chars: @max_chars).html do
+        Containers::CharacterCount.new(@builder, max_words: @max_words, max_chars: @max_chars, threshold: @threshold).html do
           Containers::FormGroup.new(@builder, @object_name, @attribute_name).html do
             @builder.safe_join(
               [

data/lib/govuk_design_system_formbuilder/version.rb

@@ -1,3 +1,3 @@
 module GOVUKDesignSystemFormBuilder
-  VERSION = '0.7.2'.freeze
+  VERSION = '0.7.3'.freeze
 end

data/lib/govuk_design_system_formbuilder.rb

@@ -12,6 +12,7 @@ require 'govuk_design_system_formbuilder/elements/check_boxes/collection_check_b
 require 'govuk_design_system_formbuilder/elements/check_boxes/label'
 require 'govuk_design_system_formbuilder/elements/check_boxes/hint'
 require 'govuk_design_system_formbuilder/elements/error_message'
+require 'govuk_design_system_formbuilder/elements/error_summary'
 require 'govuk_design_system_formbuilder/elements/submit'
 require 'govuk_design_system_formbuilder/elements/text_area'
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_design_system_formbuilder
 version: !ruby/object:Gem::Version
-  version: 0.7.2
+  version: 0.7.3
 platform: ruby
 authors:
 - Peter Yates
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-29 00:00:00.000000000 Z
+date: 2019-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -143,6 +143,7 @@ files:
 - lib/govuk_design_system_formbuilder/elements/check_boxes/label.rb
 - lib/govuk_design_system_formbuilder/elements/date.rb
 - lib/govuk_design_system_formbuilder/elements/error_message.rb
+- lib/govuk_design_system_formbuilder/elements/error_summary.rb
 - lib/govuk_design_system_formbuilder/elements/hint.rb
 - lib/govuk_design_system_formbuilder/elements/input.rb
 - lib/govuk_design_system_formbuilder/elements/label.rb