govuk_design_system_formbuilder 5.1.0 → 5.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c0051ba0d0eb5f3afcf87055e171bb1d0e930c9c063297a35e231537428ad84
-  data.tar.gz: 28dbcd6291008fe3010aebd3dd79276f452ca030b7f6fc1208646f33510de99d
+  metadata.gz: 8e35d673c28b60b7f821d646ce2386de839de096525d8689104b1d972e7cbd41
+  data.tar.gz: 59cdb7f48b6d6540e281d2c2953d87c9a54fb570415be01cf5f68d0a15db57c9
 SHA512:
-  metadata.gz: c1278d6f46dadbd4574a5551f7b4f758aa907e486d95ed1aca627e9ec4a785c7770edb5bb09bc0a941ec1ea8433888be6e2cc00e33e14ffb589f11a94e65b66c
-  data.tar.gz: e19a3b4357bcf82918a1f4354f927bbc265e2ec86759844fa7cc56fae4231e4a4f1c0c5106f0c5d1b59146bd2e4e716257de16c1a443ecf2df8dc4ee3f158f44
+  metadata.gz: 97062bf75bb33fd65e0e2b82a916f020164274ab4e9920eebbc56bdc7e392708e5fdd2570c5e7b6627a5cdb7c54156dc2ebe6c4ade09af67815122dbe00c0b46
+  data.tar.gz: dfb265e232f555c33fc432c15fe84e2a04386ebf2f2a8946fb691c5f64be323ecf2e5c6484d35a0e1697a82fc67c84fdfbaa0f1a31972356a12c74484de0be69

data/README.md

@@ -6,7 +6,7 @@
 [![Gem](https://img.shields.io/gem/dt/govuk_design_system_formbuilder?logo=rubygems)](https://rubygems.org/gems/govuk_design_system_formbuilder)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/110136fb22341d3ba646/test_coverage)](https://codeclimate.com/github/x-govuk/govuk-form-builder/test_coverage)
 [![GitHub license](https://img.shields.io/github/license/x-govuk/govuk-form-builder)](https://github.com/x-govuk/govuk-form-builder/blob/main/LICENSE)
-[![GOV.UK Design System version](https://img.shields.io/badge/GOV.UK%20Design%20System-5.1.0-brightgreen)](https://design-system.service.gov.uk)
+[![GOV.UK Design System version](https://img.shields.io/badge/GOV.UK%20Design%20System-5.3.0-brightgreen)](https://design-system.service.gov.uk)
 [![Rails](https://img.shields.io/badge/Rails-6.1.7%20%E2%95%B1%207.1.3-E16D6D)](https://weblog.rubyonrails.org/releases/)
 [![Ruby](https://img.shields.io/badge/Ruby-3.1.4%20%20%E2%95%B1%203.2.3%20%20%E2%95%B1%203.3.0-E16D6D)](https://www.ruby-lang.org/en/downloads/)
 

data/lib/govuk_design_system_formbuilder/builder.rb

@@ -162,57 +162,6 @@ module GOVUKDesignSystemFormBuilder
       Elements::Inputs::Email.new(self, object_name, attribute_name, hint:, label:, caption:, width:, extra_letter_spacing:, form_group:, prefix_text:, suffix_text:, **kwargs, &block).html
     end
 
-    # Generates a input of type +password+
-    #
-    # @param attribute_name [Symbol] The name of the attribute
-    # @param hint [Hash,Proc] The content of the hint. No hint will be added if 'text' is left +nil+. When a +Proc+ is
-    #   supplied the hint will be wrapped in a +div+ instead of a +span+
-    # @option hint text [String] the hint text
-    # @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
-    # @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 extra_letter_spacing [Boolean] when true adds space between characters to increase the readability of
-    #   sequences of letters and numbers. Defaults to +false+.
-    # @param label [Hash,Proc] configures or sets the associated label content
-    # @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 label kwargs [Hash] additional arguments are applied as attributes on the +label+ element
-    # @param caption [Hash] configures or sets the caption content which is inserted above the label
-    # @option caption text [String] the caption text
-    # @option caption size [String] the size of the caption, can be +xl+, +l+ or +m+. Defaults to +m+
-    # @option caption kwargs [Hash] additional arguments are applied as attributes on the caption +span+ element
-    # @option kwargs [Hash] kwargs additional arguments are applied as attributes to the +input+ element
-    # @param form_group [Hash] configures the form group
-    # @option form_group kwargs [Hash] additional attributes added to the form group
-    # @param prefix_text [String] the text placed before the input. No prefix will be added if left +nil+
-    # @param suffix_text [String] the text placed after the input. No suffix will be added if left +nil+
-    # @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/passwords/ GOV.UK Password patterns
-    # @see https://design-system.service.gov.uk/styles/typography/#headings-with-captions Headings with captions
-    #
-    # @example A password field
-    #   = f.govuk_password_field :password,
-    #     label: { text: 'Enter your password' }
-    #
-    # @example A password field with injected content
-    #   = f.govuk_password_field :password,
-    #     label: { text: 'Password' } do
-    #
-    #     p.govuk-inset-text
-    #       | Ensure your password is at least 16 characters long
-    #
-    # @example A password field with the label supplied as a proc
-    #   = f.govuk_password_field :passcode,
-    #     label: -> { tag.h3('What is your secret pass code?') }
-    #
-    def govuk_password_field(attribute_name, hint: {}, label: {}, width: nil, extra_letter_spacing: false, form_group: {}, caption: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
-      Elements::Inputs::Password.new(self, object_name, attribute_name, hint:, label:, caption:, width:, extra_letter_spacing:, form_group:, prefix_text:, suffix_text:, **kwargs, &block).html
-    end
-
     # Generates a input of type +url+
     #
     # @param attribute_name [Symbol] The name of the attribute
@@ -320,6 +269,70 @@ module GOVUKDesignSystemFormBuilder
       Elements::Inputs::Number.new(self, object_name, attribute_name, hint:, label:, caption:, width:, extra_letter_spacing:, form_group:, prefix_text:, suffix_text:, **kwargs, &block).html
     end
 
+    # Generates a password input
+    #
+    # @param attribute_name [Symbol] The name of the attribute
+    # @param hint [Hash,Proc] The content of the hint. No hint will be added if 'text' is left +nil+. When a +Proc+ is
+    #   supplied the hint will be wrapped in a +div+ instead of a +span+
+    # @option hint text [String] the hint text
+    # @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
+    # @param label [Hash,Proc] configures or sets the associated label content
+    # @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 label kwargs [Hash] additional arguments are applied as attributes on the +label+ element
+    # @param caption [Hash] configures or sets the caption content which is inserted above the label
+    # @option caption text [String] the caption text
+    # @option caption size [String] the size of the caption, can be +xl+, +l+ or +m+. Defaults to +m+
+    # @option caption kwargs [Hash] additional arguments are applied as attributes on the caption +span+ element
+    # @option kwargs [Hash] kwargs additional arguments are applied as attributes to the +input+ element
+    # @param form_group [Hash] configures the form group
+    # @option form_group kwargs [Hash] additional attributes added to the form group
+    # @param show_password_text [String] button text when the password is hidden. Defaults to "Show"
+    # @param hide_password_text [String] button text when the password is shown. Defaults to "Hide"
+    # @param show_password_aria_label_text [String] button text exposed to assistive technologies, like screen readers, when the password is hidden. Defaults to "Show password"
+    # @param hide_password_aria_label_text [String] button text exposed to assistive technologies, like screen readers, when the password is visible. Defaults to "Hide password"
+    # @param password_shown_announcement_text [String] Announcement made to screen reader users when their password has become visible in plain text. Defaults to "Your password is visible"
+    # @param password_hidden_announcement_text [String] Announcement made to screen reader users when their password has been obscured and is not visible. Defaults to "Your password is hidden"
+    #
+    # @example A password field
+    #   = f.govuk_password_field :password
+    #
+    def govuk_password_field(
+      attribute_name,
+      hint: {},
+      label: {},
+      caption: {},
+      form_group: {},
+      show_password_text: config.default_show_password_text,
+      hide_password_text: config.default_hide_password_text,
+      show_password_aria_label_text: config.default_show_password_aria_label_text,
+      hide_password_aria_label_text: config.default_hide_password_aria_label_text,
+      password_shown_announcement_text: config.default_password_shown_announcement_text,
+      password_hidden_announcement_text: config.default_password_hidden_announcement_text,
+      **kwargs,
+      &block
+    )
+      Elements::Password.new(
+        self,
+        object_name,
+        attribute_name,
+        hint:,
+        label:,
+        caption:,
+        form_group:,
+        show_password_text:,
+        hide_password_text:,
+        show_password_aria_label_text:,
+        hide_password_aria_label_text:,
+        password_shown_announcement_text:,
+        password_hidden_announcement_text:,
+        **kwargs,
+        &block
+      ).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
@@ -655,7 +668,7 @@ module GOVUKDesignSystemFormBuilder
     # @example A custom divider
     #   = govuk_radio_divider 'Alternatively'
     def govuk_radio_divider(text = config.default_radio_divider_text)
-      tag.div(text, class: %w(govuk-radios__divider))
+      tag.div(text, class: %(#{config.brand}-radios__divider))
     end
 
     # Generate a list of check boxes from a collection

data/lib/govuk_design_system_formbuilder/elements/password.rb

@@ -0,0 +1,106 @@
+module GOVUKDesignSystemFormBuilder
+  module Elements
+    class Password < Base
+      using PrefixableArray
+
+      include Traits::Error
+      include Traits::Hint
+      include Traits::Label
+      include Traits::HTMLAttributes
+      include Traits::HTMLClasses
+
+      I18nAttr = Struct.new(:key, :text, :default)
+
+      def initialize(builder, object_name, attribute_name, label:, caption:, hint:, form_group:, show_password_text:, hide_password_text:, show_password_aria_label_text:, hide_password_aria_label_text:, password_hidden_announcement_text:, password_shown_announcement_text:, **kwargs, &block)
+        super(builder, object_name, attribute_name, &block)
+
+        @label           = label
+        @caption         = caption
+        @hint            = hint
+        @form_group      = form_group
+        @html_attributes = kwargs
+
+        @show_password_text = show_password_text
+        @hide_password_text = hide_password_text
+
+        @show_password_aria_label_text = show_password_aria_label_text
+        @hide_password_aria_label_text = hide_password_aria_label_text
+
+        @password_shown_announcement_text = password_shown_announcement_text
+        @password_hidden_announcement_text = password_hidden_announcement_text
+      end
+
+      def html
+        Containers::FormGroup.new(*bound, **form_group_options).html do
+          safe_join([label_element, hint_element, error_element, password_input_and_button])
+        end
+      end
+
+    private
+
+      def password_input_and_button
+        tag.div(class: wrapper_classes) do
+          safe_join([password_input, button])
+        end
+      end
+
+      def options
+        {
+          id: field_id(link_errors: true),
+          class: classes,
+          spellcheck: "false",
+          autocomplete: "current-password",
+          autocapitalize: "none",
+          aria: { describedby: combine_references(hint_id, error_id) }
+        }
+      end
+
+      def form_group_options
+        {
+          **@form_group,
+          **i18n_data,
+          class: %(#{brand}-password-input),
+          data: { module: %(#{brand}-password-input) },
+        }
+      end
+
+      def password_input
+        @builder.password_field(@attribute_name, attributes(@html_attributes))
+      end
+
+      def classes
+        build_classes('input', 'password-input__input', 'js-password-input-input', %(password-input--error) => has_errors?).prefix(brand)
+      end
+
+      def wrapper_classes
+        %w(input__wrapper password-input__wrapper).prefix(brand)
+      end
+
+      def button
+        tag.button(@show_password_text, **button_options)
+      end
+
+      def button_options
+        {
+          data: { module: %(#{brand}-button) },
+          aria: { label: "Show password", controls: field_id(link_errors: true) },
+          type: 'button',
+          class: %w(button button--secondary password-input__toggle js-password-input-toggle).prefix(brand)
+        }
+      end
+
+      def i18n_data
+        [
+          I18nAttr.new("data-i18n.show-password",                @show_password_text,                config.default_show_password_text),
+          I18nAttr.new("data-i18n.hide-password",                @hide_password_text,                config.default_hide_password_text),
+          I18nAttr.new("data-i18n.show-password-aria-label",     @show_password_aria_label_text,     config.default_show_password_aria_label_text),
+          I18nAttr.new("data-i18n.hide-password-aria-label",     @hide_password_aria_label_text,     config.default_hide_password_aria_label_text),
+          I18nAttr.new("data-i18n.password-shown-announcement",  @password_shown_announcement_text,  config.default_password_shown_announcement_text),
+          I18nAttr.new("data-i18n.password-hidden-announcement", @password_hidden_announcement_text, config.default_password_hidden_announcement_text),
+        ].each_with_object({}) do |attr, h|
+          h[attr.key] = attr.text unless attr.text == attr.default
+        end
+      end
+    end
+  end
+end

data/lib/govuk_design_system_formbuilder/elements/text_area.rb

@@ -13,6 +13,8 @@ module GOVUKDesignSystemFormBuilder
       def initialize(builder, object_name, attribute_name, hint:, label:, caption:, rows:, max_words:, max_chars:, threshold:, form_group:, **kwargs, &block)
         super(builder, object_name, attribute_name, &block)
 
+        fail ArgumentError, 'limit can be words or chars' if max_words && max_chars
+
         @label           = label
         @caption         = caption
         @hint            = hint
@@ -25,19 +27,13 @@ module GOVUKDesignSystemFormBuilder
       end
 
       def html
-        Containers::CharacterCount.new(@builder, **character_count_options).html do
-          Containers::FormGroup.new(*bound, **@form_group).html do
-            safe_join([label_element, supplemental_content, hint_element, error_element, text_area, limit_description])
-          end
+        Containers::FormGroup.new(*bound, **@form_group.merge(limit_form_group_options)).html do
+          safe_join([label_element, supplemental_content, hint_element, error_element, text_area, limit_description])
         end
       end
 
     private
 
-      def character_count_options
-        { max_words: @max_words, max_chars: @max_chars, threshold: @threshold }
-      end
-
       def text_area
         @builder.text_area(@attribute_name, **attributes(@html_attributes))
       end
@@ -92,6 +88,27 @@ module GOVUKDesignSystemFormBuilder
 
         limit_id
       end
+
+      def limit_form_group_options
+        return {} unless limit?
+
+        {
+          class: %(#{brand}-character-count),
+          data: { module: %(#{brand}-character-count) }.merge(**limit_max_options, **limit_threshold_options).compact
+        }
+      end
+
+      def limit_max_options
+        if @max_words
+          { maxwords: @max_words }
+        elsif @max_chars
+          { maxlength: @max_chars }
+        end
+      end
+
+      def limit_threshold_options
+        { threshold: @threshold }
+      end
     end
   end
 end

data/lib/govuk_design_system_formbuilder/version.rb

@@ -1,3 +1,3 @@
 module GOVUKDesignSystemFormBuilder
-  VERSION = '5.1.0'.freeze
+  VERSION = '5.3.0'.freeze
 end

data/lib/govuk_design_system_formbuilder.rb

@@ -102,7 +102,12 @@ module GOVUKDesignSystemFormBuilder
     default_collection_radio_buttons_include_hidden: true,
     default_collection_radio_buttons_auto_bold_labels: true,
     default_submit_validate: false,
-
+    default_show_password_text: "Show",
+    default_hide_password_text: "Hide",
+    default_show_password_aria_label_text: "Show password",
+    default_hide_password_aria_label_text: "Hide password",
+    default_password_shown_announcement_text: "Your password is visible",
+    default_password_hidden_announcement_text: "Your password is hidden",
     localisation_schema_fallback: %i(helpers __context__),
     localisation_schema_label: nil,
     localisation_schema_hint: nil,

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_design_system_formbuilder
 version: !ruby/object:Gem::Version
-  version: 5.1.0
+  version: 5.3.0
 platform: ruby
 authors:
 - Peter Yates
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-02-19 00:00:00.000000000 Z
+date: 2024-03-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: html-attributes-utils
@@ -310,7 +310,6 @@ files:
 - lib/govuk_design_system_formbuilder/builder.rb
 - lib/govuk_design_system_formbuilder/builder_helper.rb
 - lib/govuk_design_system_formbuilder/containers/button_group.rb
-- lib/govuk_design_system_formbuilder/containers/character_count.rb
 - lib/govuk_design_system_formbuilder/containers/check_boxes.rb
 - lib/govuk_design_system_formbuilder/containers/check_boxes_fieldset.rb
 - lib/govuk_design_system_formbuilder/containers/fieldset.rb
@@ -331,13 +330,13 @@ files:
 - lib/govuk_design_system_formbuilder/elements/hint.rb
 - lib/govuk_design_system_formbuilder/elements/inputs/email.rb
 - lib/govuk_design_system_formbuilder/elements/inputs/number.rb
-- lib/govuk_design_system_formbuilder/elements/inputs/password.rb
 - lib/govuk_design_system_formbuilder/elements/inputs/phone.rb
 - lib/govuk_design_system_formbuilder/elements/inputs/text.rb
 - lib/govuk_design_system_formbuilder/elements/inputs/url.rb
 - lib/govuk_design_system_formbuilder/elements/label.rb
 - lib/govuk_design_system_formbuilder/elements/legend.rb
 - lib/govuk_design_system_formbuilder/elements/null.rb
+- lib/govuk_design_system_formbuilder/elements/password.rb
 - lib/govuk_design_system_formbuilder/elements/radios/collection.rb
 - lib/govuk_design_system_formbuilder/elements/radios/collection_radio_button.rb
 - lib/govuk_design_system_formbuilder/elements/radios/fieldset_radio_button.rb

data/lib/govuk_design_system_formbuilder/containers/character_count.rb

@@ -1,46 +0,0 @@
-module GOVUKDesignSystemFormBuilder
-  module Containers
-    class CharacterCount < Base
-      def initialize(builder, max_words:, max_chars:, threshold:)
-        super(builder, nil, nil)
-
-        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(&block)
-        return yield unless limit?
-
-        tag.div(**options, &block)
-      end
-
-    private
-
-      def options
-        {
-          class: %(#{brand}-character-count),
-          data: { module: %(#{brand}-character-count) }.merge(**limit, **threshold).compact
-        }
-      end
-
-      def limit
-        if @max_words
-          { maxwords: @max_words }
-        elsif @max_chars
-          { maxlength: @max_chars }
-        end
-      end
-
-      def threshold
-        { threshold: @threshold }
-      end
-
-      def limit?
-        @max_words || @max_chars
-      end
-    end
-  end
-end

data/lib/govuk_design_system_formbuilder/elements/inputs/password.rb

@@ -1,20 +0,0 @@
-module GOVUKDesignSystemFormBuilder
-  module Elements
-    module Inputs
-      class Password < Base
-        include Traits::Input
-        include Traits::Error
-        include Traits::Hint
-        include Traits::Label
-        include Traits::Supplemental
-        include Traits::HTMLAttributes
-
-      private
-
-        def builder_method
-          :password_field
-        end
-      end
-    end
-  end
-end