ccs-frontend_helpers 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 294fb84084e25efd871cf66bf4513023648669964b1fbc026aece725bcd64c78
-  data.tar.gz: cd55ae750739c51a9561871d5d2c782a067ace1b04f7014e3b41d05349db6f68
+  metadata.gz: d935d241fb0117c445c9e5a7eaa2cee257c5f7bc1e68457baf347aabf946a664
+  data.tar.gz: 4a8328285e0adad683eafbf72d8385ea7b3703ae352eded484eb6595bb8ce136
 SHA512:
-  metadata.gz: d64eb288f9595343e58ec37eec080a925928b908273c1880efd409a3cde6f9015567221838496084c03d3799dd54ea7ae10328e4c545d446d0f876b0892efb9c
-  data.tar.gz: d1c288ab82c3c78b1049a1bf8d580b515d213d52758aedf378799262efa854880eab99e69251e0cf74502bb29af8da7fa965adf6275f8755672896dc49787a43
+  metadata.gz: 3e4698ad6bcca9cfc345922d05da7580f8f21c4789ff2631d838001f0cd68090c0039467d95e2af4fee2b279822e9b522bfcc42f9ee198c89f4658e153e9e9ae
+  data.tar.gz: 5fb56ee826dc2350d685e6fa888e11e2644bbf199db306a9953174b386e21efd42393db88f62813268218f0a387f15e107f3f010d8d2964690063034808833f2

data/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [0.3.0] - 2024-04-12
+
+Update components to be compatible with GOV.UK Frontend v5.3
+
+### 🆕 New features
+
+The following GOV.UK helpers have been added:
+
+- Password input
+
 ## [0.2.0] - 2024-03-13
 
 ### 💥 Breaking changes

data/Gemfile

@@ -7,7 +7,7 @@ gemspec
 
 # Gems for building the package
 gem 'bundler', '~> 2.3'
-gem 'rake', '~> 13.1'
+gem 'rake', '~> 13.2'
 
 # Gems for testing the package
 gem 'capybara', '~> 3.40.0'
@@ -19,7 +19,7 @@ gem 'nokogiri-diff', '~> 0.3.0'
 gem 'rubocop', '~> 1.62'
 gem 'rubocop-rails', '~> 2.24'
 gem 'rubocop-rake', '~> 0.6'
-gem 'rubocop-rspec', '~> 2.27'
+gem 'rubocop-rspec', '~> 2.29'
 
 # Gems for documenting the package
 gem 'yard', '~> 0.9'

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ccs-frontend_helpers (0.2.0)
+    ccs-frontend_helpers (0.3.0)
       rails (>= 6.0)
 
 GEM
@@ -85,7 +85,7 @@ GEM
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
     base64 (0.2.0)
-    bigdecimal (3.1.6)
+    bigdecimal (3.1.7)
     builder (3.2.4)
     capybara (3.40.0)
       addressable
@@ -112,7 +112,7 @@ GEM
     irb (1.11.2)
       rdoc
       reline (>= 0.4.2)
-    json (2.7.1)
+    json (2.7.2)
     language_server-protocol (3.17.0.3)
     loofah (2.22.0)
       crass (~> 1.0.2)
@@ -125,7 +125,7 @@ GEM
     marcel (1.0.2)
     matrix (0.4.2)
     mini_mime (1.1.5)
-    minitest (5.22.2)
+    minitest (5.22.3)
     mutex_m (0.2.0)
     net-imap (0.4.10)
       date
@@ -152,7 +152,7 @@ GEM
       stringio
     public_suffix (5.0.4)
     racc (1.7.3)
-    rack (3.0.9.1)
+    rack (3.0.10)
     rack-session (2.0.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
@@ -190,7 +190,7 @@ GEM
       thor (~> 1.0, >= 1.2.2)
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
-    rake (13.1.0)
+    rake (13.2.1)
     rdoc (6.6.2)
       psych (>= 4.0.0)
     regexp_parser (2.9.0)
@@ -227,17 +227,20 @@ GEM
       rubocop (~> 1.41)
     rubocop-factory_bot (2.25.1)
       rubocop (~> 1.41)
-    rubocop-rails (2.24.0)
+    rubocop-rails (2.24.1)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
     rubocop-rake (0.6.0)
       rubocop (~> 1.0)
-    rubocop-rspec (2.27.1)
+    rubocop-rspec (2.29.1)
       rubocop (~> 1.40)
       rubocop-capybara (~> 2.17)
       rubocop-factory_bot (~> 2.22)
+      rubocop-rspec_rails (~> 2.28)
+    rubocop-rspec_rails (2.28.2)
+      rubocop (~> 1.40)
     ruby-progressbar (1.13.0)
     simplecov (0.22.0)
       docile (~> 1.1)
@@ -271,12 +274,12 @@ DEPENDENCIES
   capybara (~> 3.40.0)
   ccs-frontend_helpers!
   nokogiri-diff (~> 0.3.0)
-  rake (~> 13.1)
+  rake (~> 13.2)
   rspec (~> 3.13)
   rubocop (~> 1.62)
   rubocop-rails (~> 2.24)
   rubocop-rake (~> 0.6)
-  rubocop-rspec (~> 2.27)
+  rubocop-rspec (~> 2.29)
   simplecov (~> 0.21)
   yard (~> 0.9)
 

data/README.md

@@ -14,6 +14,7 @@ The following table shows the version of CCS Frontend Helpers that you should us
 
 | CCS Frontend Helpers Version | Target GOV.UK Frontend Version |
 | ----------------------------- | ------------------------------ |
+| [0.3.0](https://github.com/tim-s-ccs/ccs-frontend_helpers/releases/tag/v0.3.0) | [5.3.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.3.0) |
 | [0.2.0](https://github.com/tim-s-ccs/ccs-frontend_helpers/releases/tag/v0.2.0) | [5.2.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.2.0) |
 | [0.1.2](https://github.com/tim-s-ccs/ccs-frontend_helpers/releases/tag/v0.1.2) | [4.7.0](https://github.com/alphagov/govuk-frontend/releases/tag/v4.7.0) |
 

data/lib/ccs/components/ccs/footer.rb

@@ -37,7 +37,6 @@ module CCS
         def initialize(navigation: nil, meta: nil, **options)
           super(**options)
 
-          @options[:attributes][:role] = 'contentinfo'
           @options[:copyright] ||= '© Crown copyright'
 
           @navigation = navigation&.map { |navigation_item| Navigation.new(context: @context, **navigation_item) }

data/lib/ccs/components/ccs/header.rb

@@ -45,7 +45,6 @@ module CCS
         def initialize(service_authentication_items: nil, navigation: nil, menu_button: nil, service: nil, **options)
           super(**options)
 
-          @options[:attributes][:role] = 'banner'
           @options[:container_classes] ||= 'govuk-width-container'
           @options[:homepage_url] ||= 'https://www.crowncommercial.gov.uk'
 

data/lib/ccs/components/govuk/field/input/character_count/count_message.rb

@@ -0,0 +1,62 @@
+module CCS
+  module Components
+    module GovUK
+      class Field < Base
+        class Input < Field
+          class CharacterCount
+            # = GOV.UK Character count message
+            #
+            # This is used to generate the character count message
+            #
+            # @!attribute [r] count_message
+            #   @return [Hint] Hint with the count message
+            # @!attribute [r] after_input
+            #   @return [String] Text or HTML for after the textarea input
+
+            class CountMessage
+              include ActionView::Context
+              include ActionView::Helpers
+
+              private
+
+              attr_reader :count_message, :after_input
+
+              public
+
+              # @param character_count_attribute [String] the name of the field as it will appear in the textarea
+              # @param context [ActionView::Base] the view context
+              # @param character_count_options (see CCS::Components::GovUK::Field::Input::CharacterCount.get_character_count_from_group_options)
+              # @param after_input [String] Text or HTML that goes after the input
+              #
+              # @option (see CCS::Components::GovUK::Field::Input::CharacterCount.get_character_count_from_group_options)
+
+              def initialize(character_count_attribute:, context:, character_count_options:, after_input: nil)
+                count_message = character_count_options[:textarea_description] || {}
+
+                count_message_length = character_count_options[:maxwords] || character_count_options[:maxlength]
+                count_message_default = "You can enter up to %<count>s #{character_count_options[:maxwords] ? 'words' : 'characters'}"
+
+                text = count_message_length ? format(count_message[:count_message] || count_message_default, count: count_message_length) : ''
+                classes = "govuk-character-count__message #{count_message[:classes]}".rstrip
+
+                @count_message = Hint.new(text: text, classes: classes, attributes: { id: "#{character_count_attribute}-info" }, context: context)
+                @after_input = after_input
+              end
+
+              # Generates the HTML for the GOV.UK Character count message
+              #
+              # @return [ActiveSupport::SafeBuffer]
+
+              def render
+                capture do
+                  concat(count_message.render)
+                  concat(after_input) if after_input
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/field/input/character_count.rb

@@ -1,5 +1,5 @@
 require_relative 'textarea'
-require_relative '../../hint'
+require_relative 'character_count/count_message'
 
 module CCS
   module Components
@@ -21,12 +21,9 @@ module CCS
           #   @return [Hash] HTML options for the character count
 
           class CharacterCount
-            include ActionView::Context
-            include ActionView::Helpers
-
             private
 
-            attr_reader :textarea, :textarea_description, :character_count_html_options
+            attr_reader :textarea, :textarea_description
 
             public
 
@@ -41,21 +38,10 @@ module CCS
             def initialize(attribute:, context:, character_count_options: {}, **options)
               character_count_attribute = options[:form] ? "#{options[:form].object_name}_#{attribute}" : attribute
 
-              initialise_textarea(attribute, character_count_attribute, context, options)
-              initialise_character_count_html_options(character_count_options)
-              initialise_textarea_description(character_count_attribute, context, character_count_options)
+              initialise_textarea(attribute, character_count_attribute, character_count_options, context, options)
             end
 
-            # Generates the HTML for the GOV.UK Character count component
-            #
-            # @return [ActiveSupport::SafeBuffer]
-
-            def render
-              tag.div(**character_count_html_options) do
-                concat(textarea.render)
-                concat(textarea_description.render)
-              end
-            end
+            delegate :render, to: :textarea
 
             private
 
@@ -63,19 +49,23 @@ module CCS
             #
             # @param attribute [Symbol] the attribute of the field
             # @param character_count_attribute [String] the name of the field as it will appear in the textarea
+            # @param character_count_options [Hash] options for the character count
             # @param context [ActionView::Base] the view context
             # @param options [Hash] options that will be used for the textarea
             #
             # @option (see CCS::Components::GovUK::Field::Input::Textarea#initialize)
 
-            def initialise_textarea(attribute, character_count_attribute, context, options)
+            def initialise_textarea(attribute, character_count_attribute, character_count_options, context, options)
+              set_character_count_from_group_options(character_count_options, options)
+
               ((options[:attributes] ||= {})[:aria] ||= {})[:describedby] = [options.dig(:attributes, :aria, :describedby), "#{character_count_attribute}-info"].compact.join(' ')
               options[:classes] = "govuk-js-character-count #{options[:classes]}".rstrip
 
-              @textarea = Textarea.new(attribute: attribute, context: context, **options)
+              count_message = CountMessage.new(character_count_attribute: character_count_attribute, context: context, character_count_options: character_count_options, after_input: options.delete(:after_input))
+              @textarea = Textarea.new(attribute: attribute, context: context, after_input: count_message.render, **options)
             end
 
-            # Initialises the charcter count options
+            # Sets the charcter count form group options
             #
             # @param character_count_options [Hash] options for the charcter count
             #
@@ -91,50 +81,29 @@ module CCS
             #                                                            - +:count_message+ replaced the default text for the count message.
             #                                                                               If you want the count number to appear, put %<count>s in the string and it will be replaced with the number
             #                                                            - +classes+ additional CSS classes for the textarea description HTML
-            # @option character_count_options [Hash] :characters_under_limit Message displayed when the number of characters is under the configured maximum, maxlength
+            # @option character_count_options [String] :characters_under_limit Message displayed when the number of characters is under the configured maximum, maxlength
             # @option character_count_options [String] :characters_at_limit_text Message displayed when the number of characters reaches the configured maximum, maxlength
-            # @option character_count_options [Hash] :characters_over_limit Message displayed when the number of characters is over the configured maximum, maxlength
-            # @option character_count_options [Hash] :words_under_limit Message displayed when the number of words is under the configured maximum, maxwords
+            # @option character_count_options [String] :characters_over_limit Message displayed when the number of characters is over the configured maximum, maxlength
+            # @option character_count_options [String] :words_under_limit Message displayed when the number of words is under the configured maximum, maxwords
             # @option character_count_options [String] :words_at_limit_text Message displayed when the number of words reaches the configured maximum, maxwords
-            # @option character_count_options [Hash] :words_over_limit Message displayed when the number of words is over the configured maximum, maxwords
+            # @option character_count_options [String] :words_over_limit Message displayed when the number of words is over the configured maximum, maxwords
 
-            def initialise_character_count_html_options(character_count_options)
-              character_count_html_options = { class: 'govuk-character-count', data: { module: 'govuk-character-count' } }
+            def set_character_count_from_group_options(character_count_options, options)
+              (options[:form_group] ||= {})[:classes] = "govuk-character-count #{options.dig(:form_group, :classes)}".rstrip
+              ((options[:form_group][:attributes] ||= {})[:data] ||= {})[:module] = 'govuk-character-count'
 
               %i[maxlength threshold maxwords].each do |data_attribute|
-                character_count_html_options[:data][data_attribute] = character_count_options[data_attribute].to_s if character_count_options[data_attribute]
+                options[:form_group][:attributes][:data][data_attribute] = character_count_options[data_attribute].to_s if character_count_options[data_attribute]
               end
 
-              get_chacrter_count_translations(character_count_options).each do |data_attribute, value|
-                character_count_html_options[:data][data_attribute] = value
+              get_chacrter_count_translations(character_count_options) do |data_attribute, value|
+                options[:form_group][:attributes][:data][data_attribute] = value
               end
-
-              @character_count_html_options = character_count_html_options
-            end
-
-            # Initialises the charcter count textarea description
-            #
-            # @param character_count_attribute [String] the name of the field as it will appear in the textarea
-            # @param context [ActionView::Base] the view context
-            # @param (see initialise_character_count_html_options)
-            #
-            # @option (see initialise_character_count_html_options)
-
-            def initialise_textarea_description(character_count_attribute, context, character_count_options)
-              textarea_description = character_count_options[:textarea_description] || {}
-
-              textarea_description_length = character_count_options[:maxwords] || character_count_options[:maxlength]
-              textarea_description_default = "You can enter up to %<count>s #{character_count_options[:maxwords] ? 'words' : 'characters'}"
-
-              text = textarea_description_length ? format(textarea_description[:count_message] || textarea_description_default, count: textarea_description_length) : ''
-              classes = "govuk-character-count__message #{textarea_description[:classes]}".rstrip
-
-              @textarea_description = Hint.new(text: text, classes: classes, attributes: { id: "#{character_count_attribute}-info" }, context: context)
             end
 
             # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
 
-            # Returns the translation options for character count
+            # Generator for the translation options for character count
             #
             # @param (see initialise_character_count_html_options)
             #
@@ -143,24 +112,25 @@ module CCS
             # @return [Hash]
 
             def get_chacrter_count_translations(character_count_options)
-              character_count_data_options = {}
-
               %i[characters_at_limit words_at_limit].each do |data_attribute|
                 data_attribute_name = :"#{data_attribute}_text"
-                character_count_data_options[:"i18n.#{data_attribute.to_s.gsub('_', '-')}"] = character_count_options[data_attribute_name] if character_count_options[data_attribute_name]
+
+                next unless character_count_options[data_attribute_name]
+
+                yield :"i18n.#{data_attribute.to_s.gsub('_', '-')}", character_count_options[data_attribute_name]
               end
 
               %i[characters_under_limit characters_over_limit words_under_limit words_over_limit].each do |data_attribute|
                 next unless character_count_options[data_attribute]
 
                 %i[other one].each do |plural_rule|
-                  character_count_data_options[:"i18n.#{data_attribute.to_s.gsub('_', '-')}.#{plural_rule}"] = character_count_options[data_attribute][plural_rule] if character_count_options[data_attribute][plural_rule]
+                  next unless character_count_options[data_attribute][plural_rule]
+
+                  yield :"i18n.#{data_attribute.to_s.gsub('_', '-')}.#{plural_rule}", character_count_options[data_attribute][plural_rule]
                 end
               end
 
-              character_count_data_options[:'i18n.textarea-description.other'] = character_count_options[:textarea_description][:count_message] if character_count_options.dig(:textarea_description, :count_message) && !(character_count_options[:maxwords] || character_count_options[:maxlength])
-
-              character_count_data_options
+              yield :'i18n.textarea-description.other', character_count_options[:textarea_description][:count_message] if character_count_options.dig(:textarea_description, :count_message) && !(character_count_options[:maxwords] || character_count_options[:maxlength])
             end
 
             # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity

data/lib/ccs/components/govuk/field/input/password_input/show_hide_button.rb

@@ -0,0 +1,72 @@
+require_relative '../../../button'
+
+module CCS
+  module Components
+    module GovUK
+      class Field < Base
+        class Input < Field
+          class PasswordInput
+            # = GOV.UK Password input show/hide button
+            #
+            # This is used to generate the password input show/hide button
+            #
+            # @!attribute [r] show_hide_button
+            #   @return [Button] Show/Hide button
+            # @!attribute [r] after_input
+            #   @return [String] Text or HTML for after the textarea input
+
+            class ShowHideButton
+              include ActionView::Context
+              include ActionView::Helpers
+              include ActionView::Helpers::FormTagHelper
+
+              private
+
+              attr_reader :show_hide_button, :after_input
+
+              public
+
+              # @param attribute [String] the name of the field as it will appear in the input
+              # @param context [ActionView::Base] the view context
+              # @param button [Hash] options for the button
+              # @param after_input [String] Text or HTML that goes after the input
+              #
+              # @option button [String] :classes classes to add to the button
+              #
+              # @option (see CCS::Components::GovUK::Field::Input::PasswordInput.set_password_input_from_group_options)
+
+              def initialize(attribute:, context:, button: {}, after_input: nil, **options)
+                button[:classes] = "govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle #{button[:classes]}".rstrip
+                button[:attributes] = {
+                  type: :button,
+                  aria: {
+                    controls: options.dig(:attributes, :id) || field_id(options[:form]&.object_name, attribute),
+                    label: options[:show_password_aria_label_text] || 'Show password'
+                  },
+                  hidden: {
+                    value: true,
+                    optional: true
+                  }
+                }
+
+                @show_hide_button = Button.new(text: options[:show_password_text] || 'Show', context: context, classes: button[:classes], attributes: button[:attributes])
+                @after_input = after_input
+              end
+
+              # Generates the HTML for the GOV.UK Password input show/hide button
+              #
+              # @return [ActiveSupport::SafeBuffer]
+
+              def render
+                capture do
+                  concat(show_hide_button.render)
+                  concat(after_input) if after_input
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/field/input/password_input.rb

@@ -0,0 +1,101 @@
+require_relative 'text_input'
+require_relative 'password_input/show_hide_button'
+
+module CCS
+  module Components
+    module GovUK
+      class Field < Base
+        class Input < Field
+          # = GOV.UK Password input
+          #
+          # This is used for generating the password input component from the
+          # {https://design-system.service.gov.uk/components/password-input GDS - Components - Password Input}
+          #
+          # @!attribute [r] text_input
+          #   @return [CCS::Components::GovUK::Field::Input::TextInput] Initialised text input component
+
+          class PasswordInput
+            private
+
+            attr_reader :text_input
+
+            public
+
+            # @param (see CCS::Components::GovUK::Field::Input::TextInput#initialize)
+            #
+            # @option (see CCS::Components::GovUK::Field::Input::TextInput#initialize)
+
+            def initialize(attribute:, context:, **options)
+              set_password_input_from_group_options(options)
+
+              show_hide_button = ShowHideButton.new(attribute: attribute, context: context, after_input: options.delete(:after_input), **options)
+
+              options[:attributes] ||= {}
+              options[:attributes][:spellcheck] = false
+              options[:attributes][:autocapitalize] = 'none'
+              options[:attributes][:autocomplete] ||= 'current-password'
+
+              @text_input = TextInput.new(
+                context: context,
+                attribute: attribute,
+                after_input: show_hide_button.render,
+                input_wrapper: {
+                  classes: 'govuk-password-input__wrapper'
+                },
+                classes: "govuk-password-input__input govuk-js-password-input-input #{options.delete(:classes)}".rstrip,
+                field_type: :password,
+                **options
+              )
+            end
+
+            delegate :render, to: :text_input
+
+            private
+
+            # rubocop:disable Naming/AccessorMethodName
+
+            # Sets the password input form group options
+            #
+            # @param options [Hash] options for the password input
+            #
+            # @option options [String] :show_password_text button text when the password is hidden
+            # @option options [String] :hide_password_text button text when the password is visible
+            # @option options [String] :show_password_aria_label_text button text exposed to assistive technologies, like screen readers, when the password is hidden
+            # @option options [String] :hide_password_aria_label_text button text exposed to assistive technologies, like screen readers, when the password is visible
+            # @option options [String] :password_shown_announcement_text announcement made to screen reader users when their password has become visible in plain text
+            # @option options [String] :password_hidden_announcement_text announcement made to screen reader users when their password has been obscured and is not visible
+
+            def set_password_input_from_group_options(options)
+              (options[:form_group] ||= {})[:classes] = "govuk-password-input #{options.dig(:form_group, :classes)}".rstrip
+              ((options[:form_group][:attributes] ||= {})[:data] ||= {})[:module] = 'govuk-password-input'
+
+              get_password_input_translations(options) do |data_attribute, value|
+                options[:form_group][:attributes][:data][data_attribute] = value
+              end
+            end
+
+            # rubocop:enable Naming/AccessorMethodName
+
+            # Generator for the translation options for password input
+            #
+            # @param (see initialise_password_input_html_options)
+            #
+            # @option (see initialise_password_input_html_options)
+            #
+            # @yield Data attribute key and the value
+
+            def get_password_input_translations(password_input_options)
+              %i[show_password hide_password show_password_aria_label hide_password_aria_label password_shown_announcement password_hidden_announcement].each do |data_attribute|
+                data_attribute_name = :"#{data_attribute}_text"
+
+                next unless password_input_options[data_attribute_name]
+
+                yield :"i18n.#{data_attribute.to_s.gsub('_', '-')}", password_input_options[data_attribute_name]
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ccs/components/govuk/field/input/text_input.rb

@@ -19,11 +19,13 @@ module CCS
           #   @return [Fix] The initialised prefix
           # @!attribute [r] suffix
           #   @return [Fix] The initialised suffix
+          # @!attribute [r] input_wrapper_html_options
+          #   @return [Fix] HTML options for the input wrapper
 
           class TextInput < Input
             private
 
-            attr_reader :field_type, :value, :prefix, :suffix
+            attr_reader :field_type, :value, :prefix, :suffix, :input_wrapper_html_options
 
             public
 
@@ -36,33 +38,41 @@ module CCS
             #                      see {CCS::Components::GovUK::Field::Input::TextInput::Fix#initialize Fix#initialize} for more details.
             # @param suffix [Hash] optional suffix for the input field,
             #                      see {CCS::Components::GovUK::Field::Input::TextInput::Fix#initialize Fix#initialize} for more details.
+            # @param input_wrapper [Hash] HTML options for the input wrapper
             #
             # @option (see CCS::Components::GovUK::Field::Input#initialize)
 
-            def initialize(attribute:, field_type: :text, value: nil, prefix: nil, suffix: nil, **options)
+            def initialize(attribute:, field_type: :text, value: nil, prefix: nil, suffix: nil, input_wrapper: {}, **options)
               super(attribute: attribute, **options)
 
               @field_type = :"#{field_type}_field"
               @value = @options[:model] ? @options[:model].send(attribute) : value
               @prefix = Fix.new(fix: 'pre', context: @context, **prefix) if prefix
               @suffix = Fix.new(fix: 'suf', context: @context, **suffix) if suffix
+              @input_wrapper_html_options = {
+                class: "govuk-input__wrapper #{input_wrapper[:classes]}".rstrip
+              }.merge(input_wrapper[:attributes] || {})
             end
 
             # rubocop:enable Metrics/ParameterLists
+            # rubocop:disable Metrics/AbcSize
 
             # Generates the HTML for the GOV.UK Text Input component
             #
             # @return [ActiveSupport::SafeBuffer]
 
             def render
-              super() do
-                text_input_wrapper do
+              form_group.render do |display_error_message|
+                concat(label.render)
+                concat(hint.render) if hint
+                concat(display_error_message)
+                concat(text_input_wrapper do
                   if options[:form]
                     options[:form].send(field_type, attribute, **options[:attributes])
                   else
                     context.send("#{field_type}_tag", attribute, value, **options[:attributes])
                   end
-                end
+                end)
               end
             end
 
@@ -72,6 +82,8 @@ module CCS
 
             private
 
+            # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+
             # Wrapper method used by {render} to wrap the text input with a prefix or suffix if they exist
             #
             # @yield the text input HTML
@@ -79,16 +91,20 @@ module CCS
             # @return [ActiveSupport::SafeBuffer]
 
             def text_input_wrapper
-              if prefix || suffix
-                tag.div(class: 'govuk-input__wrapper') do
+              if prefix || suffix || before_input || after_input
+                tag.div(**input_wrapper_html_options) do
+                  concat(before_input) if before_input
                   concat(prefix.render) if prefix
                   concat(yield)
                   concat(suffix.render) if suffix
+                  concat(after_input) if after_input
                 end
               else
                 yield
               end
             end
+
+            # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
           end
         end
       end

data/lib/ccs/components/govuk/field/input.rb

@@ -25,6 +25,8 @@ module CCS
 
           # @param (see CCS::Components::GovUK::Field#initialize)
           # @param label [Hash] attributes for the label, see {CCS::Components::GovUK::Label#initialize Label#initialize} for more details.
+          # @param before_input [String] text or HTML to go before the input
+          # @param after_input [String] text or HTML to go after the input
           #
           # @option (see CCS::Components::GovUK::Field#initialize)
 
@@ -52,7 +54,9 @@ module CCS
               concat(label.render)
               concat(hint.render) if hint
               concat(display_error_message)
+              concat(before_input) if before_input
               concat(yield)
+              concat(after_input) if after_input
             end
           end
         end

data/lib/ccs/components/govuk/field/inputs/checkboxes.rb

@@ -12,17 +12,8 @@ module CCS
           #
           # This is used for generating the checkboxes component from the
           # {https://design-system.service.gov.uk/components/checkboxes GDS - Components - Checkboxes}
-          #
-          # @!attribute [r] checkbox_items
-          #   @return [Array<Item::Divider|Item::Checkbox|Item::Checkbox>] An array of the initialised checkbox items
 
           class Checkboxes < Inputs
-            private
-
-            attr_reader :checkbox_items
-
-            public
-
             # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity, Metrics/AbcSize
 
             # @param (see CCS::Components::GovUK::Field::Inputs#initialize)
@@ -42,23 +33,11 @@ module CCS
 
               checkbox_item_class = @options[:form] ? Item::Checkbox::Form : Inputs::Item::Checkbox::Tag
 
-              @checkbox_items = checkbox_items.map { |checkbox_item| checkbox_item[:divider] ? Item::Divider.new(divider: checkbox_item[:divider], type: 'checkboxes') : checkbox_item_class.new(attribute: attribute, form: @options[:form], context: @context, **checkbox_item) }
+              @input_items = checkbox_items.map { |checkbox_item| checkbox_item[:divider] ? Item::Divider.new(divider: checkbox_item[:divider], type: 'checkboxes') : checkbox_item_class.new(attribute: attribute, form: @options[:form], context: @context, **checkbox_item) }
             end
 
             # rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity, Metrics/AbcSize
 
-            # Generates the HTML for the GOV.UK Checkboxes component
-            #
-            # @return [ActiveSupport::SafeBuffer]
-
-            def render
-              super() do
-                tag.div(**options[:attributes]) do
-                  checkbox_items.each { |checkbox_item| concat(checkbox_item.render) }
-                end
-              end
-            end
-
             # The default attributes for the checkboxes
 
             DEFAULT_ATTRIBUTES = { class: 'govuk-checkboxes', data: { module: 'govuk-checkboxes' } }.freeze

data/lib/ccs/components/govuk/field/inputs/date_input.rb

@@ -10,17 +10,8 @@ module CCS
           #
           # This is used for generating the date input component from the
           # {https://design-system.service.gov.uk/components/date-input GDS - Components -  Date Input}
-          #
-          # @!attribute [r] date_input_items
-          #   @return [Array<DateInput::Item>] An array of the initialised date input items
 
           class DateInput < Inputs
-            private
-
-            attr_reader :date_input_items
-
-            public
-
             # @param (see CCS::Components::GovUK::Field::Inputs#initialize)
             # @param date_items [Array<Hash>] an array of options for the date items.
             #                                 See {Components::GovUK::Field::Inputs::DateInput::Item#initialize Item#initialize} for details of the items in the array.
@@ -34,19 +25,7 @@ module CCS
 
               date_items = default_date_items if date_items.blank?
 
-              @date_input_items = date_items.map { |date_input_item| Item.new(attribute: attribute, error_message: @error_message, model: @options[:model], form: @options[:form], context: @context, **date_input_item) }
-            end
-
-            # Generates the HTML for the GOV.UK date input component
-            #
-            # @return [ActiveSupport::SafeBuffer]
-
-            def render
-              super() do
-                tag.div(**options[:attributes]) do
-                  date_input_items.each { |date_input_item| concat(date_input_item.render) }
-                end
-              end
+              @input_items = date_items.map { |date_input_item| Item.new(attribute: attribute, error_message: @error_message, model: @options[:model], form: @options[:form], context: @context, **date_input_item) }
             end
 
             # The default attributes for the date input

data/lib/ccs/components/govuk/field/inputs/radios.rb

@@ -12,14 +12,11 @@ module CCS
           #
           # This is used for generating the radios component from the
           # {https://design-system.service.gov.uk/components/radios GDS - Components - Radios}
-          #
-          # @!attribute [r] radio_items
-          #   @return [Array<Item::Divider|Item::Radio|Item::Radio>] An array of the initialised radio items
 
           class Radios < Inputs
             private
 
-            attr_reader :radio_items
+            attr_reader :input_items
 
             public
 
@@ -40,23 +37,11 @@ module CCS
 
               radio_item_class = @options[:form] ? Item::Radio::Form : Inputs::Item::Radio::Tag
 
-              @radio_items = radio_items.map { |radio_item| radio_item[:divider] ? Item::Divider.new(divider: radio_item[:divider], type: 'radios') : radio_item_class.new(attribute: attribute, form: @options[:form], context: @context, **radio_item) }
+              @input_items = radio_items.map { |radio_item| radio_item[:divider] ? Item::Divider.new(divider: radio_item[:divider], type: 'radios') : radio_item_class.new(attribute: attribute, form: @options[:form], context: @context, **radio_item) }
             end
 
             # rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
 
-            # Generates the HTML for the GOV.UK Radios component
-            #
-            # @return [ActiveSupport::SafeBuffer]
-
-            def render
-              super() do
-                tag.div(**options[:attributes]) do
-                  radio_items.each { |radio_item| concat(radio_item.render) }
-                end
-              end
-            end
-
             # The default attributes for the radios
 
             DEFAULT_ATTRIBUTES = { class: 'govuk-radios', data: { module: 'govuk-radios' } }.freeze

data/lib/ccs/components/govuk/field/inputs.rb

@@ -14,11 +14,13 @@ module CCS
         #
         # @!attribute [r] fieldset
         #   @return [Fieldset] The initialised fieldset
+        # @!attribute [r] input_items
+        #   @return [Array<Item>] An array of the initialised items
 
         class Inputs < Field
           private
 
-          attr_reader :fieldset
+          attr_reader :fieldset, :input_items
 
           public
 
@@ -66,7 +68,11 @@ module CCS
           def field_inner_html(display_error_message)
             concat(hint.render) if hint
             concat(display_error_message)
-            concat(yield)
+            concat(tag.div(**options[:attributes]) do
+              concat(before_input) if before_input
+              input_items.each { |input_item| concat(input_item.render) }
+              concat(after_input) if after_input
+            end)
           end
         end
       end

data/lib/ccs/components/govuk/field.rb

@@ -18,14 +18,20 @@ module CCS
       #   @return [FormGroup] The initialised form group
       # @!attribute [r] hint
       #   @return [Hint] The initialised hint
+      # @!attribute [r] before_input
+      #   @return [String] Text or HTML to go before the input
+      # @!attribute [r] after_input
+      #   @return [String] Text or HTML to go after the input
 
       class Field < Base
         private
 
-        attr_reader :attribute, :error_message, :form_group, :hint
+        attr_reader :attribute, :error_message, :form_group, :hint, :before_input, :after_input
 
         public
 
+        # rubocop:disable Metrics/ParameterLists
+
         # @param attribute [String, Symbol] the attribute of the field
         # @param hint [Hash] attributes for the hint, see {CCS::Components::GovUK::Hint#initialize Hint#initialize} for more details.
         #                    If no hint is given then no hint will be rendered
@@ -39,7 +45,7 @@ module CCS
         # @option options [String] :classes additional CSS classes for the field HTML
         # @option options [Hash] :attributes ({}) any additional attributes that will added as part of the HTML
 
-        def initialize(attribute:, form_group: nil, hint: nil, **options)
+        def initialize(attribute:, form_group: nil, hint: nil, before_input: nil, after_input: nil, **options)
           super(**options)
 
           (hint[:attributes] ||= {})[:id] = "#{attribute}-hint" if hint && !hint.dig(:attributes, :id)
@@ -49,8 +55,12 @@ module CCS
 
           @form_group = FormGroup.new(attribute: attribute, error_message: @error_message, context: @context, **(form_group || {}))
           @hint = Hint.new(context: @context, **hint) if hint
+          @before_input = before_input
+          @after_input = after_input
         end
 
+        # rubocop:enable Metrics/ParameterLists
+
         # Generates the HTML to wrap arround a GDS form input component
         #
         # @yield the field HTML

data/lib/ccs/components/govuk/footer.rb

@@ -37,7 +37,6 @@ module CCS
         def initialize(navigation: nil, meta: nil, **options)
           super(**options)
 
-          @options[:attributes][:role] = 'contentinfo'
           @options[:copyright] ||= '© Crown copyright'
 
           @navigation = navigation&.map { |navigation_item| Navigation.new(context: @context, **navigation_item) }

data/lib/ccs/components/govuk/header.rb

@@ -41,7 +41,6 @@ module CCS
         def initialize(navigation: nil, menu_button: nil, service: nil, **options)
           super(**options)
 
-          @options[:attributes][:role] = 'banner'
           @options[:container_classes] ||= 'govuk-width-container'
           @options[:homepage_url] ||= '/'
           @options[:use_tudor_crown] = true if @options[:use_tudor_crown].nil?

data/lib/ccs/components/govuk/pagination.rb

@@ -46,7 +46,6 @@ module CCS
           block_is_level = pagination_items.blank? && (pagination_previous.present? || pagination_next.present?)
 
           @options[:attributes][:class] << ' govuk-pagination--block' if block_is_level
-          @options[:attributes][:role] = 'navigation'
           (@options[:attributes][:aria] ||= {})[:label] ||= 'Pagination'
 
           @pagination_previous = Increment::Previous.new(block_is_level: block_is_level, form: @options[:form], context: @context, **pagination_previous) if pagination_previous

data/lib/ccs/frontend_helpers/govuk_frontend/password_input.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require_relative '../../components/govuk/field/input/password_input'
+
+module CCS
+  module FrontendHelpers
+    module GovUKFrontend
+      # = GOV.UK Password input
+      #
+      # This helper is used for generating the password input component from the
+      # {https://design-system.service.gov.uk/components/password-input GDS - Components - Password Input}
+
+      module PasswordInput
+        # Generates the HTML for the GOV.UK Password Input component
+        #
+        # @param (see CCS::Components::GovUK::Input::PasswordInput#initialize)
+        #
+        # @option (see CCS::Components::GovUK::Input::PasswordInput#initialize)
+        #
+        # @return (see CCS::Components::GovUK::Input::PasswordInput#render)
+
+        def govuk_password_input(attribute, **options)
+          Components::GovUK::Field::Input::PasswordInput.new(context: self, attribute: attribute, **options).render
+        end
+      end
+    end
+  end
+end

data/lib/ccs/frontend_helpers/govuk_frontend.rb

@@ -24,6 +24,7 @@ require_relative 'govuk_frontend/label'
 require_relative 'govuk_frontend/notification_banner'
 require_relative 'govuk_frontend/pagination'
 require_relative 'govuk_frontend/panel'
+require_relative 'govuk_frontend/password_input'
 require_relative 'govuk_frontend/phase_banner'
 require_relative 'govuk_frontend/radios'
 require_relative 'govuk_frontend/select'
@@ -67,6 +68,7 @@ module CCS
       include NotificationBanner
       include Pagination
       include Panel
+      include PasswordInput
       include PhaseBanner
       include Radios
       include Select

data/lib/ccs/frontend_helpers/version.rb

@@ -2,6 +2,6 @@
 
 module CCS
   module FrontendHelpers
-    VERSION = '0.2.0'
+    VERSION = '0.3.0'
   end
 end

data/package.json

@@ -5,6 +5,6 @@
   "author": "CCS",
   "license": "MIT",
   "devDependencies": {
-    "govuk-frontend": "^5.2.0"
+    "govuk-frontend": "^5.3.0"
   }
 }

data/yarn.lock

@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-govuk-frontend@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-5.2.0.tgz#f8e0bf98b771b8ee1501fd45bbba24a091f3846d"
-  integrity sha512-beD3wztHpkKz6JUpPwnwop1ejb4rTFMPLCutKLCIDmUS4BPpW59ggVUfctsRqHd2Zjw9wxljdRdeIJ8AZFyyTw==
+govuk-frontend@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-5.3.0.tgz#f9a2b405925beada90d074e17939f9d8ddcd256e"
+  integrity sha512-w6yaaDU3nqhVmWJFnOuJKRIUEB/2RrTFGzoA3z5n4cTG9h292EseT/q+JJA/LYTf5IYzeTIVAUbE5fFjUxefiQ==

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ccs-frontend_helpers
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - tim-s-ccs
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-03-13 00:00:00.000000000 Z
+date: 2024-04-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -72,7 +72,10 @@ files:
 - lib/ccs/components/govuk/field.rb
 - lib/ccs/components/govuk/field/input.rb
 - lib/ccs/components/govuk/field/input/character_count.rb
+- lib/ccs/components/govuk/field/input/character_count/count_message.rb
 - lib/ccs/components/govuk/field/input/file_upload.rb
+- lib/ccs/components/govuk/field/input/password_input.rb
+- lib/ccs/components/govuk/field/input/password_input/show_hide_button.rb
 - lib/ccs/components/govuk/field/input/select.rb
 - lib/ccs/components/govuk/field/input/text_input.rb
 - lib/ccs/components/govuk/field/input/text_input/fix.rb
@@ -174,6 +177,7 @@ files:
 - lib/ccs/frontend_helpers/govuk_frontend/notification_banner.rb
 - lib/ccs/frontend_helpers/govuk_frontend/pagination.rb
 - lib/ccs/frontend_helpers/govuk_frontend/panel.rb
+- lib/ccs/frontend_helpers/govuk_frontend/password_input.rb
 - lib/ccs/frontend_helpers/govuk_frontend/phase_banner.rb
 - lib/ccs/frontend_helpers/govuk_frontend/radios.rb
 - lib/ccs/frontend_helpers/govuk_frontend/select.rb