ccs-frontend_helpers 0.1.0.rc.1 → 0.1.0.rc.2

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

@@ -1,75 +1,25 @@
 # frozen_string_literal: true
 
-require 'action_view'
-
-require_relative '../shared_methods'
+require_relative '../../components/govuk/breadcrumbs'
 
 module CCS
-  module FrontendHelpers
-    module GovUKFrontend
-      # = GOV.UK Breadcrumbs
+  module FrontendHelpers::GovUKFrontend
+    # = GOV.UK Breadcrumbs
+    #
+    # This helper is used for generating the breadcrumbs component from the
+    # {https://design-system.service.gov.uk/components/breadcrumbs GDS - Components - Breadcrumbs}
+
+    module Breadcrumbs
+      # Generates the HTML for the GOV.UK breadcrumbs component
       #
-      # This helper is used for generating the breadcrumbs component from the
-      # {https://design-system.service.gov.uk/components/breadcrumbs GDS - Components - Breadcrumbs}
-
-      module Breadcrumbs
-        include SharedMethods
-        include ActionView::Context
-        include ActionView::Helpers::TagHelper
-        include ActionView::Helpers::TextHelper
-        include ActionView::Helpers::UrlHelper
-
-        # Generates the HTML for the GOV.UK breadcrumbs component
-        #
-        # @param govuk_breadcrumb_items [Array<Hash>] An array of links for the breadcrumbs list. See {#govuk_breadcrumb_link} for details of the items in the array.
-        # @param govuk_breadcrumbs_options [Hash] options that will be used in customising the HTML
-        #
-        # @option govuk_breadcrumbs_options [String] :classes additional CSS classes for the breadcrumbs HTML
-        # @option govuk_breadcrumbs_options [Boolean] :collapse_on_mobile indicates if it is to colapse breadcrumbs on mobile
-        # @option govuk_breadcrumbs_options [Hash] :attributes any additional attributes that will added as part of the HTML
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Breadcrumbs
-        #                                     which can then be rendered on the page
-
-        def govuk_breadcrumbs(govuk_breadcrumb_items, **govuk_breadcrumbs_options)
-          initialise_attributes_and_set_classes(govuk_breadcrumbs_options, 'govuk-breadcrumbs')
-
-          govuk_breadcrumbs_options[:attributes][:class] << ' govuk-breadcrumbs--collapse-on-mobile' if govuk_breadcrumbs_options[:collapse_on_mobile]
-
-          tag.div(**govuk_breadcrumbs_options[:attributes]) do
-            tag.ol(class: 'govuk-breadcrumbs__list') do
-              govuk_breadcrumb_items.each { |govuk_breadcrumb_item| concat(govuk_breadcrumb_link(govuk_breadcrumb_item)) }
-            end
-          end
-        end
-
-        private
-
-        # Generates the HTML for each link in the breadcrumbs.
-        # It is called by {#govuk_breadcrumbs} which will pass in the breadcrum item.
-        #
-        # @param govuk_breadcrumb_item [Hash] a hash containg options for the breadcrumb item
-        #
-        # @option govuk_breadcrumb_item [String] :text the text for the link
-        # @option govuk_breadcrumb_item [String] :href the URI for the link. If blank it is assumed that this item relates to current page
-        # @option govuk_breadcrumb_item [Hash] :attributes any additional attributes that will added as part of the HTML.
-        #                                                  If the link is blank then it defaults to +{ aria: { current: 'page' } }+
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Breadcrumb list item
-
-        def govuk_breadcrumb_link(govuk_breadcrumb_item)
-          if govuk_breadcrumb_item[:href].present?
-            (govuk_breadcrumb_item[:attributes] ||= {})[:class] = 'govuk-breadcrumbs__link'
+      # @param (see CCS::Components::GovUK::Breadcrumbs#initialize)
+      #
+      # @option (see CCS::Components::GovUK::Breadcrumbs#initialize)
+      #
+      # @return (see CCS::Components::GovUK::Breadcrumbs#render)
 
-            tag.li(class: 'govuk-breadcrumbs__list-item') do
-              link_to(govuk_breadcrumb_item[:text], govuk_breadcrumb_item[:href], **govuk_breadcrumb_item[:attributes])
-            end
-          else
-            tag.li(class: 'govuk-breadcrumbs__list-item', aria: { current: 'page' }) do
-              govuk_breadcrumb_item[:text]
-            end
-          end
-        end
+      def govuk_breadcrumbs(breadcrumb_links, **options)
+        Components::GovUK::Breadcrumbs.new(context: self, breadcrumb_links: breadcrumb_links, **options).render
       end
     end
   end

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

@@ -1,126 +1,25 @@
 # frozen_string_literal: true
 
-require 'action_view'
-
-require_relative '../shared_methods'
+require_relative '../../components/govuk/button'
 
 module CCS
-  module FrontendHelpers
-    module GovUKFrontend
-      # = GOV.UK Button
+  module FrontendHelpers::GovUKFrontend
+    # = GOV.UK Button
+    #
+    # This helper is used for generating the button component from the
+    # {https://design-system.service.gov.uk/components/button GDS - Components - Button}
+
+    module Button
+      # Generates the HTML for the GOV.UK button component
       #
-      # This helper is used for generating the button component from the
-      # {https://design-system.service.gov.uk/components/button GDS - Components - Button}
-
-      module Button
-        include SharedMethods
-        include ActionView::Context
-        include ActionView::Helpers::TagHelper
-        include ActionView::Helpers::TextHelper
-        include ActionView::Helpers::UrlHelper
-        include ActionView::Helpers::FormTagHelper
-
-        # Generates the HTML for the GOV.UK button component
-        #
-        # @param text [String] the text that will be shown in the button
-        # @param govuk_button_options [Hash] options that will be used in customising the HTML
-        #
-        # @option govuk_button_options [String] :classes additional CSS classes for the button HTML
-        # @option govuk_button_options [Boolean] :is_start_button indicates if it is a start button
-        # @option govuk_button_options [String] :href the URI that will be used in anchor tag
-        # @option govuk_button_options [ActionView::Helpers::FormBuilder] :form the form builder used to create the submit button
-        # @option govuk_button_options [Hash] :attributes ({ data: { module: 'govuk-button' } }) any additional attributes that will added as part of the HTML
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Button
-        #                                     which can then be rendered on the page
-
-        def govuk_button(text, **govuk_button_options)
-          initialise_attributes_and_set_classes(govuk_button_options, 'govuk-button')
-          set_data_module(govuk_button_options, 'govuk-button')
-
-          govuk_button_options[:attributes][:class] << ' govuk-button--disabled' if govuk_button_options[:attributes][:disabled]
-          govuk_button_options[:attributes][:class] << ' govuk-button--start' if govuk_button_options[:is_start_button]
-
-          button_method = if govuk_button_options[:href]
-                            :govuk_button_link
-                          elsif govuk_button_options[:form]
-                            :govuk_button_submit
-                          else
-                            :govuk_button_button
-                          end
-
-          send(button_method, text, **govuk_button_options)
-        end
-
-        private
-
-        # Generates the HTML for the GOV.UK button component as an anchor tag.
-        # It is called by {#govuk_button} which will pass in the parameters, including any defaults.
-        #
-        # @param text [String] the text that will be shown in the button
-        # @param govuk_button_options [Hash] options that will be used in customising the HTML
-        #
-        # @option govuk_button_options [Boolean] :is_start_button indicates if it is a start button
-        # @option govuk_button_options [String] :href the URI that will be used in anchor tag
-        # @option govuk_button_options [Hash] :attributes any additional attributes that will added as part of the HTML
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Button as an anchor element
-        #                                     which can then be rendered on the page
-
-        def govuk_button_link(text, **govuk_button_options)
-          govuk_button_options[:attributes][:role] = :button
-          govuk_button_options[:attributes][:draggable] = false
-
-          link_to(govuk_button_options[:href], **govuk_button_options[:attributes]) do
-            concat(text)
-            concat(govuk_start_button_icon) if govuk_button_options[:is_start_button]
-          end
-        end
-
-        # Generates the HTML for the GOV.UK button component as a button.
-        # It is called by {#govuk_button} which will pass in the parameters, including any defaults.
-        #
-        # @param text [String] the text that will be shown in the button
-        # @param govuk_button_options [Hash] options that will be used in customising the HTML
-        #
-        # @option govuk_button_options [Boolean] :is_start_button indicates if it is a start button
-        # @option govuk_button_options [Hash] :attributes any additional attributes that will added as part of the HTML
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Button as a button element
-        #                                     which can then be rendered on the page
-
-        def govuk_button_button(text, **govuk_button_options)
-          button_tag(**govuk_button_options[:attributes]) do
-            concat(text)
-            concat(govuk_start_button_icon) if govuk_button_options[:is_start_button]
-          end
-        end
-
-        # Generates the HTML for the GOV.UK button component as an input.
-        # It is called by {#govuk_button} which will pass in the parameters, including any defaults.
-        #
-        # @param text [String] the text that will be shown in the input
-        # @param govuk_button_options [Hash] options that will be used in customising the HTML
-        #
-        # @option govuk_button_options [ActionView::Helpers::FormBuilder] :form the form builder used to create the submit button
-        # @option govuk_button_options [Hash] :attributes any additional attributes that will added as part of the HTML
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Button as an input element
-        #                                     which can then be rendered on the page
-
-        def govuk_button_submit(text, **govuk_button_options)
-          govuk_button_options[:form].submit(text, **govuk_button_options[:attributes])
-        end
-
-        # Generates the arrow for the start button option as part of {#govuk_button}
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the arrow for the start button
+      # @param (see CCS::Components::GovUK::Button#initialize)
+      #
+      # @option (see CCS::Components::GovUK::Button#initialize)
+      #
+      # @return (see CCS::Components::GovUK::Button#render)
 
-        def govuk_start_button_icon
-          tag.svg(class: 'govuk-button__start-icon', xmlns: 'http://www.w3.org/2000/svg', width: 17.5, height: 19, viewBox: '0 0 33 40', aria: { hidden: true }, focusable: false) do
-            tag.path(fill: 'currentColor', d: 'M0 0h13l20 20-20 20H0l20-20z')
-          end
-        end
+      def govuk_button(text, **options)
+        Components::GovUK::Button.new(context: self, text: text, **options).render
       end
     end
   end

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

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

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

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

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

@@ -1,135 +1,25 @@
 # frozen_string_literal: true
 
-require_relative 'button'
+require_relative '../../components/govuk/cookie_banner'
 
 module CCS
-  module FrontendHelpers
-    module GovUKFrontend
-      # = GOV.UK Cookie Banner
+  module FrontendHelpers::GovUKFrontend
+    # = GOV.UK Cookie Banner
+    #
+    # This helper is used for generating the cookie banner component from the
+    # {https://design-system.service.gov.uk/components/cookie-banner GDS - Components - Cookie banner}
+
+    module CookieBanner
+      # Generates the HTML for the GOV.UK Cookie banner component
       #
-      # This helper is used for generating the cookie banner component from the
-      # {https://design-system.service.gov.uk/components/cookie-banner GDS - Components - Cookie banner}
-
-      module CookieBanner
-        include ActionView::Context
-        include ActionView::Helpers::TagHelper
-        include ActionView::Helpers::TextHelper
-        include Button
-
-        # Generates the HTML for the GOV.UK Cookie banner component
-        #
-        # @param messages [Array] the different messages you can pass into the cookie banner. See {govuk_cookie_banner_message_content}
-        # @param govuk_cookie_banner_options [Hash] options that will be used in customising the HTML
-        #
-        # @option govuk_cookie_banner_options [String] :classes additional CSS classes for the cookie banner HTML
-        # @option govuk_cookie_banner_options [Hash] :attributes any additional attributes that will added as part of the HTML
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Cookie banner
-        #                                     which can then be rendered on the page
-
-        def govuk_cookie_banner(messages, **govuk_cookie_banner_options)
-          determine_govuk_cookie_banner_attributes(govuk_cookie_banner_options)
-
-          tag.div(**govuk_cookie_banner_options[:attributes]) do
-            messages.each do |message|
-              initialise_attributes_and_set_classes(message, 'govuk-cookie-banner__message govuk-width-container')
-
-              concat(tag.div(**message[:attributes]) do
-                concat(govuk_cookie_banner_message_content(message))
-                concat(govuk_cookie_banner_message_actions(message[:actions])) if message[:actions]
-              end)
-            end
-          end
-        end
-
-        private
-
-        # Generates the HTML for a cookie banner message content used in {govuk_cookie_banner}
-        #
-        # @param message [Hash] the options for the cookie banner message
-        #
-        # @option message [String] :heading_text the heading text that displays in the message
-        # @option message [ActiveSupport::SafeBuffer] :content HTML to use as content for the message
-        # @option message [String] :text if +:content+ is blank then this is the text used for the message
-        # @option message [Array] :actions the buttons and links that you want to display in the message. See {govuk_cookie_banner_message_actions}
-        # @option message [String] :classes additional CSS classes for the cookie message HTML
-        # @option message [Hash] :attributes any additional attributes that will added as part of the HTML
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for a cookie banner message content used in {govuk_cookie_banner}
-
-        def govuk_cookie_banner_message_content(message)
-          tag.div(class: 'govuk-grid-row') do
-            tag.div(class: 'govuk-grid-column-two-thirds') do
-              concat(tag.h2(message[:heading_text], class: 'govuk-cookie-banner__heading govuk-heading-m')) if message[:heading_text]
-              concat(tag.div(class: 'govuk-cookie-banner__content') do
-                message[:content] || tag.p(message[:text], class: 'govuk-body')
-              end)
-            end
-          end
-        end
-
-        # rubocop:disable Metrics/AbcSize
-
-        # Generates the HTML for the cookie banner message actions used in {govuk_cookie_banner}
-        # It defaults to creating button unless a +href+ is set which will create a link
-        #
-        # @param message_actions [Hash] the options for the cookie banner message actions
-        #
-        # @option message_actions [String] :text the button or link text
-        # @option message_actions [String] :href the href for a link
-        # @option message_actions [String] :classes additional CSS classes for the cookie action button or link
-        # @option message_actions [Hash] :attributes any additional attributes that will added as part of the HTML.
-        #                                            If the +:type+ key is present with a value of +:button+,
-        #                                            the action will be rendered as a button
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the cookie banner message actions used in {govuk_cookie_banner}
-
-        def govuk_cookie_banner_message_actions(message_actions)
-          tag.div(class: 'govuk-button-group') do
-            message_actions.each do |message_action|
-              message_action[:attributes] ||= {}
-
-              concat(
-                if message_action[:href]
-                  if message_action[:attributes][:type] == :button
-                    govuk_button(
-                      message_action[:text],
-                      href: message_action[:href],
-                      classes: message_action[:classes],
-                      attributes: message_action[:attributes]
-                    )
-                  else
-                    message_action[:attributes][:class] = "govuk-link #{message_action[:classes]}".rstrip
-
-                    link_to(message_action[:text], message_action[:href], **message_action[:attributes])
-                  end
-                else
-                  govuk_button(
-                    message_action[:text],
-                    classes: message_action[:classes],
-                    attributes: message_action[:attributes]
-                  )
-                end
-              )
-            end
-          end
-        end
-
-        # rubocop:enable Metrics/AbcSize
-
-        # Sets the default attributes for {govuk_cookie_banner}
-        #
-        # @param govuk_cookie_banner_options [Hash] options that will be used in customising the HTML
-        #
-        # @option (see govuk_cookie_banner)
-
-        def determine_govuk_cookie_banner_attributes(govuk_cookie_banner_options)
-          initialise_attributes_and_set_classes(govuk_cookie_banner_options, 'govuk-cookie-banner')
+      # @param (see CCS::Components::GovUK::CookieBanner#initialize)
+      #
+      # @option (see CCS::Components::GovUK::CookieBanner#initialize)
+      #
+      # @return (see CCS::Components::GovUK::CookieBanner#render)
 
-          (govuk_cookie_banner_options[:attributes][:data] ||= {})[:nosnippet] = 'true'
-          govuk_cookie_banner_options[:attributes][:role] = 'region'
-          (govuk_cookie_banner_options[:attributes][:aria] ||= {})[:label] ||= 'Cookie banner'
-        end
+      def govuk_cookie_banner(messages, **options)
+        Components::GovUK::CookieBanner.new(context: self, messages: messages, **options).render
       end
     end
   end

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

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

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

@@ -1,45 +1,27 @@
 # frozen_string_literal: true
 
-require 'action_view'
-
-require_relative '../shared_methods'
+require_relative '../../components/govuk/details'
 
 module CCS
-  module FrontendHelpers
-    module GovUKFrontend
-      # = GOV.UK Details
-      #
-      # This helper is used for generating the details component from the
-      # {https://design-system.service.gov.uk/components/details GDS - Components - Details}
-
-      module Details
-        include SharedMethods
-        include ActionView::Context
-        include ActionView::Helpers::TagHelper
-        include ActionView::Helpers::TextHelper
-
-        # Generates the HTML for the GOV.UK Details component
-        #
-        # @param summary_text [String] the summary text for the details element
-        # @param govuk_details_options [Hash] options that will be used in customising the HTML
-        #
-        # @option govuk_details_options [String] :classes additional CSS classes for the details HTML
-        # @option govuk_details_options [Hash] :attributes ({ data: { module: 'govuk-details' } }) any additional attributes that will added as part of the HTML
-        #
-        # @yield HTML that will be contained within the 'govuk-details__text' div
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Details
-        #                                     which can then be rendered on the page
+  module FrontendHelpers::GovUKFrontend
+    # = GOV.UK Details
+    #
+    # This helper is used for generating the details component from the
+    # {https://design-system.service.gov.uk/components/details GDS - Components - Details}
 
-        def govuk_details(summary_text, **govuk_details_options, &block)
-          initialise_attributes_and_set_classes(govuk_details_options, 'govuk-details')
-          set_data_module(govuk_details_options, 'govuk-details')
+    module Details
+      # Generates the HTML for the GOV.UK Details component
+      #
+      # @param (see CCS::Components::GovUK::Details#initialize)
+      #
+      # @option (see CCS::Components::GovUK::Details#initialize)
+      #
+      # @yield (see CCS::Components::GovUK::Details#render)
+      #
+      # @return (see CCS::Components::GovUK::Details#render)
 
-          tag.details(**govuk_details_options[:attributes]) do
-            concat(tag.summary(tag.span(summary_text, class: 'govuk-details__summary-text'), class: 'govuk-details__summary'))
-            concat(tag.div(class: 'govuk-details__text', &block))
-          end
-        end
+      def govuk_details(summary_text, **options, &block)
+        Components::GovUK::Details.new(context: self, summary_text: summary_text, **options).render(&block)
       end
     end
   end

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

@@ -1,66 +1,43 @@
 # frozen_string_literal: true
 
-require 'action_view'
-
-require_relative '../shared_methods'
+require_relative '../../components/govuk/back_link'
 
 module CCS
-  module FrontendHelpers
-    module GovUKFrontend
-      # = GOV.UK Error Message
+  module FrontendHelpers::GovUKFrontend
+    # = GOV.UK Error Message
+    #
+    # This helper is used for generating the error message component from the
+    # {https://design-system.service.gov.uk/components/error-message GDS - Components - Error message}
+
+    module ErrorMessage
+      # Generates the HTML for the GOV.UK Error message component
       #
-      # This helper is used for generating the error message component from the
-      # {https://design-system.service.gov.uk/components/error-message GDS - Components - Error message}
-
-      module ErrorMessage
-        include SharedMethods
-        include ActionView::Context
-        include ActionView::Helpers::TagHelper
-        include ActionView::Helpers::TextHelper
-
-        # Generates the HTML for the GOV.UK Error message component
-        #
-        # @param message [String] the message to be displayed
-        # @param attribute [String, Symbol] the attribute that has an error
-        # @param govuk_error_message_options [Hash] options that will be used in customising the HTML
-        #
-        # @option govuk_error_message_options [String] :classes additional CSS classes for the error message HTML
-        # @option govuk_error_message_options [String] :visually_hidden_text ('Error') visualy hidden text before the error message
-        # @option govuk_error_message_options [Hash] :attributes ({}) any additional attributes that will be added as part of the HTML
-        #
-        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Error message
-        #                                     which can then be rendered on the page
-
-        def govuk_error_message(message, attribute, **govuk_error_message_options)
-          initialise_attributes_and_set_classes(govuk_error_message_options, 'govuk-error-message')
-
-          govuk_error_message_options[:attributes][:id] ||= "#{attribute}-error"
-          visually_hidden_text = govuk_error_message_options[:visually_hidden_text] || 'Error'
+      # @param (see CCS::Components::GovUK::ErrorMessage#initialize)
+      #
+      # @option (see CCS::Components::GovUK::ErrorMessage#initialize)
+      #
+      # @return (see CCS::Components::GovUK::ErrorMessage#render)
 
-          tag.p(**govuk_error_message_options[:attributes]) do
-            concat(tag.span("#{visually_hidden_text}: ", class: 'govuk-visually-hidden')) if visually_hidden_text.present?
-            concat(message)
-          end
-        end
+      def govuk_error_message(error_message, attribute, **options)
+        Components::GovUK::ErrorMessage.new(context: self, message: error_message, attribute: attribute, **options).render
+      end
 
-        # Generates the HTML for the GOV.UK Error message component using the error messages in an ActiveModel
-        #
-        # @param model [ActiveModel] model that will be used to find the error message
-        # @param attribute [String, Symbol] the attribute that has an error
-        # @param govuk_error_message_options [Hash] options that will be used in customising the HTML
-        #
-        # @option (see #govuk_error_message)
-        #
-        # @return [NilClass, ActiveSupport::SafeBuffer] if the error message is not on the model it will return nil,
-        #                                               otherwise the HTML for the GOV.UK Error message
-        #                                               which can then be rendered on the page is returned
+      # Generates the HTML for the GOV.UK Error message component using the error messages in an ActiveModel
+      #
+      # @param model [ActiveModel] model that will be used to find the error message
+      # @param attribute [String, Symbol] the attribute that has an error
+      # @param options [Hash] options that will be used in customising the HTML
+      #
+      # @option (see CCS::Components::GovUK::ErrorMessage#initialize)
+      #
+      # @return [NilClass, ActiveSupport::SafeBuffer] if the error message is not on the model it will return nil,
+      #                                               otherwise it returns the error message HTML
 
-        def govuk_error_message_with_model(model, attribute, **govuk_error_message_options)
-          error_message = model.errors[attribute].first
-          return unless error_message
+      def govuk_error_message_with_model(model, attribute, **options)
+        error_message = model.errors[attribute].first
+        return unless error_message
 
-          govuk_error_message(error_message, attribute, **govuk_error_message_options)
-        end
+        Components::GovUK::ErrorMessage.new(context: self, message: error_message, attribute: attribute, **options).render
       end
     end
   end