ccs-frontend_helpers 0.1.0.rc.7 → 0.1.0

data/lib/ccs/frontend_helpers/ccs_frontend/header.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
-require_relative '../../components/ccs/header'
+require_relative 'logo'
+require_relative '../shared_methods'
 
 module CCS
   module FrontendHelpers
@@ -11,16 +12,192 @@ module CCS
       # {https://github.com/tim-s-ccs/ts-ccs-frontend/tree/main/src/ccs/components/header CCS - Components - Header}
 
       module Header
+        include SharedMethods
+        include Logo
+        include ActionView::Helpers::FormTagHelper
+        include ActionView::Helpers::UrlHelper
+
+        # rubocop:disable Metrics/AbcSize
+
         # Generates the HTML for the CCS Header component
         #
-        # @param (see CCS::Components::CCS::Header#initialize)
+        # @param ccs_header_options [Hash] options that will be used to generate the header
+        #
+        # @option ccs_header_options [String] :classes additional CSS classes for the header HTML
+        # @option ccs_header_options [Hash] :attributes additional attributes that will added as part of the header HTML
+        # @option ccs_header_options [String] :container_classes classes for the container
+        # @option ccs_header_options [String] :homepage_url URL of the homepage. Defaults to +https://www.crowncommercial.gov.uk+
+        # @option ccs_header_options [Array] :service_authentication see {ccs_service_authentication}
+        # @option ccs_header_options [Hash] :service see {ccs_header_service_name}
+        # @option ccs_header_options [Hash] :navigation see {ccs_header_navigation}
+        # @option ccs_header_options [Hash] :menu_button see {ccs_header_navigation}
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the CCS Header
+        #                                     which can then be rendered on the page
+
+        def ccs_header(**ccs_header_options)
+          determine_ccs_header_attributes(ccs_header_options)
+
+          tag.header(**ccs_header_options[:attributes]) do
+            concat(ccs_service_authentication(ccs_header_options[:service_authentication], ccs_header_options[:container_classes])) if ccs_header_options[:service_authentication]
+            concat(tag.div(class: "ccs-header__container #{ccs_header_options[:container_classes]}") do
+              concat(ccs_header_logo(**ccs_header_options))
+              if ccs_header_options[:service] || ccs_header_options[:navigation]
+                concat(tag.div(class: 'ccs-header__content') do
+                  concat(ccs_header_service_name(ccs_header_options[:service])) if ccs_header_options[:service]
+                  concat(ccs_header_navigation(ccs_header_options[:navigation], ccs_header_options[:menu_button], ccs_header_options[:service])) if ccs_header_options[:navigation]
+                end)
+              end
+            end)
+          end
+        end
+
+        # rubocop:enable Metrics/AbcSize
+
+        private
+
+        # Generates the service authentication section for {ccs_header}
+        #
+        # @param service_authentication [Array] array of service authentication items (see {ccs_header_navigation_item})
+        # @param container_classes [String] classes for the container
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the service authentication section which is used in {ccs_header}
+
+        def ccs_service_authentication(service_authentication, container_classes)
+          tag.div(class: 'ccs-header__service-authentication') do
+            tag.div(class: "ccs-header__service-authentication-container #{container_classes}") do
+              tag.ul(class: 'ccs-header__service-authentication-list') do
+                service_authentication.each do |service_authentication_item|
+                  concat(tag.li(class: 'ccs-header__service-authentication-item') do
+                    if service_authentication_item[:href]
+                      (service_authentication_item[:attributes] ||= {})[:class] = 'ccs-header__link'
+
+                      link_to(service_authentication_item[:text], service_authentication_item[:href], **service_authentication_item[:attributes])
+                    else
+                      service_authentication_item[:text]
+                    end
+                  end)
+                end
+              end
+            end
+          end
+        end
+
+        # Generates the logo for {ccs_header}
+        #
+        # @param (see ccs_header)
+        #
+        # @option (see ccs_header)
         #
-        # @option (see CCS::Components::CCS::Header#initialize)
+        # @return [ActiveSupport::SafeBuffer] the HTML for the logo used in {ccs_header}
+
+        def ccs_header_logo(ccs_header_options)
+          tag.div(class: 'ccs-header__logo') do
+            link_to(ccs_logo, ccs_header_options[:homepage_url] || 'https://www.crowncommercial.gov.uk', class: 'ccs-header__link ccs-header__link--homepage', aria: { label: 'Crown Commercial Service' })
+          end
+        end
+
+        # Generates the service name section for {ccs_header}
         #
-        # @return (see CCS::Components::CCS::Header#render)
+        # @param service [Hash] options that will be used in the service name section
+        #
+        # @option service [String] :name the name of the service, included in the header
+        # @option service [String] :href URL for the service name anchor
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the service name section which is used in {ccs_header}
+
+        def ccs_header_service_name(service)
+          if service[:href]
+            link_to(service[:name], service[:href], class: 'ccs-header__link ccs-header__link--service-name')
+          else
+            tag.span(service[:name], class: 'ccs-header__link--service-name')
+          end
+        end
+
+        # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity,  Metrics/PerceivedComplexity
+
+        # @option ccs_header_options [String] :navigation_label text for the aria-label attribute of the navigation.
+        #                                                       Defaults to the same value as +:text+ in +:menu_button+
+        # @option ccs_header_options [String] :navigation_classes classes for the navigation section of the header
+
+        # Generates the navigation section for {ccs_header}
+        #
+        # @param navigation [Hash] options for the navigation
+        # @param menu_button [Hash] options for the menu button
+        # @param serivce_name_present [Boolean] flag to indicate if the service name section is present
+        #
+        # @option navigation [String] :label text for the aria-label attribute of the navigation.
+        #                                    Defaults to the same value as +:text+ in +:menu_button+
+        # @option navigation [String] :classes classes for the navigation section of the header
+        # @option navigation [Array] :primary_items primary navigation items that will be rendered on the page (see {ccs_header_navigation_item})
+        # @option navigation [Array] :secondary_items secondary navigation items that will be rendered on the page (see {ccs_header_navigation_item})
+        #
+        # @option menu_button [String] :text text for the button that opens the mobile navigation menu.
+        #                                    By default, this is set to +Menu+.
+        # @option menu_button [String] :label text for the aria-label attribute of the button that opens the mobile navigation.
+        #                                     Defaults to +Show or hide menu+.
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the navigation section which is used in {ccs_header}
+
+        def ccs_header_navigation(navigation, menu_button, serivce_name_present)
+          (menu_button ||= {})[:text] ||= 'Menu'
+          navigation_classes = "ccs-header__navigation #{navigation[:classes]}".rstrip
+          navigation_classes << ' ccs-header__navigation--no-service-name' unless serivce_name_present
+
+          tag.nav(aria: { label: navigation[:label] || menu_button[:text] }, class: navigation_classes) do
+            concat(button_tag(menu_button[:text], type: :button, class: 'ccs-header__menu-button ccs-js-header-toggle', aria: { controls: 'navigation', label: menu_button[:label] || 'Show or hide menu' }, hidden: true))
+            concat(tag.div(id: 'navigation', class: 'ccs-header__navigation-lists') do
+              if navigation[:secondary_items]
+                concat(tag.ul(id: 'navigation-secondary', class: "ccs-header__navigation-secondary-list #{'ccs-header__navigation--no-second-list' unless navigation[:primary_items]}") do
+                  navigation[:secondary_items].each { |navigation_item| concat(ccs_header_navigation_item(navigation_item)) }
+                end)
+              end
+              if navigation[:primary_items]
+                concat(tag.ul(id: 'navigation-primary', class: "ccs-header__navigation-primary-list #{'ccs-header__navigation--no-second-list' unless navigation[:secondary_items]}") do
+                  navigation[:primary_items].each { |navigation_item| concat(ccs_header_navigation_item(navigation_item)) }
+                end)
+              end
+            end)
+          end
+        end
+
+        # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity,  Metrics/PerceivedComplexity
+
+        # Generates a navigation item for {ccs_header_navigation_item}
+        #
+        # @param navigation_item [Hash] options that will be used in customising the HTML
+        #
+        # @option navigation_item [Boolean] :active flag to mark the navigation item as active or not
+        # @option navigation_item [String] :text text for the navigation item
+        # @option navigation_item [String] :href URL of the navigation item anchor
+        # @option navigation_item [Hash] :attributes ({}) any additional attributes that will added as part of the HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for a navigation item which is used in {ccs_header_navigation_item}
+
+        def ccs_header_navigation_item(navigation_item)
+          tag.li(class: "ccs-header__navigation-item #{'ccs-header__navigation-item--active' if navigation_item[:active]}".rstrip) do
+            if navigation_item[:href]
+              (navigation_item[:attributes] ||= {})[:class] = 'ccs-header__link'
+
+              link_to(navigation_item[:text], navigation_item[:href], **navigation_item[:attributes])
+            else
+              navigation_item[:text]
+            end
+          end
+        end
+
+        # Sets the default attributes for {ccs_header}
+        #
+        # @param ccs_header_options [Hash] options that will be used in customising the HTML
+        #
+        # @option (see ccs_header)
+
+        def determine_ccs_header_attributes(ccs_header_options)
+          initialise_attributes_and_set_classes(ccs_header_options, 'ccs-header')
+          set_data_module(ccs_header_options, 'ccs-header')
 
-        def ccs_header(**options)
-          Components::CCS::Header.new(context: self, **options).render
+          ccs_header_options[:attributes][:role] = 'banner'
+          ccs_header_options[:container_classes] ||= 'govuk-width-container'
         end
       end
     end

data/lib/ccs/{components/ccs → frontend_helpers/ccs_frontend}/logo.rb

@@ -1,23 +1,25 @@
+# frozen_string_literal: true
+
 require 'action_view'
 
 module CCS
-  module Components
-    module CCS
+  module FrontendHelpers
+    module CCSFrontend
       # = CCS Logo
       #
-      # This is used for generating the logo component from the
+      # This helper is used for generating the logo component from the
       # {https://github.com/tim-s-ccs/ts-ccs-frontend/tree/main/src/ccs/components/logo CCS - Components - Logo}
 
-      class Logo
-        extend ActionView::Context
-        extend ActionView::Helpers
+      module Logo
+        include ActionView::Context
+        include ActionView::Helpers::TagHelper
+        include ActionView::Helpers::TextHelper
 
-        # Generates the HTML for the CCS Logo.
-        # Used in {CCS::Components::CCS::Header Header} and {CCS::Components::CCS::Footer Footer}
+        # Generates the CCS logo used in {ccs_header} and {ccs_footer}
         #
-        # @return [ActiveSupport::SafeBuffer]
+        # @return [ActiveSupport::SafeBuffer] the HTML for the logo used in {ccs_header} and {ccs_footer}
 
-        def self.render
+        def ccs_logo
           tag.span(class: 'ccs-logo') do
             concat(tag.svg(class: 'ccs-logo__svg', xmlns: 'http://www.w3.org/2000/svg', height: '101', width: '121', aria: { hidden: 'true' }, focusable: 'false', viewBox: '0 0 121 101') do
               CCS_LOGO_PATHS.each { |ccs_logo_path_attributes| concat(tag.path(**ccs_logo_path_attributes)) }

data/lib/ccs/frontend_helpers/ccs_frontend.rb

@@ -1,8 +1,9 @@
 # frozen_string_literal: true
 
-require_relative 'ccs_frontend/dashboard_section'
 require_relative 'ccs_frontend/footer'
 require_relative 'ccs_frontend/header'
+require_relative 'ccs_frontend/logo'
+require_relative 'ccs_frontend/dashboard_panels'
 
 module CCS
   module FrontendHelpers
@@ -10,9 +11,10 @@ module CCS
     # These are a collection of view helpers to help render CCS components
 
     module CCSFrontend
-      include DashboardSection
+      include DashboardPanels
       include Footer
       include Header
+      include Logo
     end
   end
 end

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

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
-require_relative '../../components/govuk/accordion'
+require 'action_view'
+
+require_relative '../shared_methods'
 
 module CCS
   module FrontendHelpers
@@ -8,19 +10,104 @@ module CCS
       # = GOV.UK Accordion
       #
       # This helper is used for generating the accordion component from the
-      # {https://design-system.service.gov.uk/components/accordion GDS - Components - Accordion}
+      # {https://design-system.service.gov.uk/accordion/back-link GDS - Components - Accordion}
 
       module Accordion
-        # Generates the HTML for the GOV.UK Accordion component
+        include SharedMethods
+        include ActionView::Context
+        include ActionView::Helpers::TagHelper
+        include ActionView::Helpers::TextHelper
+
+        # Generates the HTML for the GOV.UK accordion component
+        #
+        # @param accordion_id [String] used as an id in the HTML for the accordion as a whole,
+        #                              and also as a prefix for the ids of the section contents
+        #                              and the buttons that open them
+        # @param accordion_items [Array<Hash>] an array of accordion items.
+        #                                      See {#govuk_accordion_section} for details of the items in the array.
+        # @param govuk_accordion_options [Hash] options that will be used in customising the HTML
+        #
+        # @option govuk_accordion_options [String] :classes additional CSS classes for the accordion HTML
+        # @option govuk_accordion_options [Integer] :heading_level (2) heading level, from 1 to 6
+        # @option govuk_accordion_options [Hash] :attributes ({ data: { module: 'govuk-accordion' } }) any additional
+        #                                                    attributes that will added as part of the HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Accordion
+        #                                     which can then be rendered on the page
+
+        def govuk_accordion(accordion_id, accordion_items, **govuk_accordion_options)
+          initialise_attributes_and_set_classes(govuk_accordion_options, 'govuk-accordion')
+          set_data_module(govuk_accordion_options, 'govuk-accordion')
+
+          govuk_accordion_options[:attributes][:id] = accordion_id
+          govuk_accordion_options[:heading_level] ||= 2
+
+          tag.div(**govuk_accordion_options[:attributes]) do
+            accordion_items.each.with_index(1) { |accordion_item, index| concat(govuk_accordion_section(accordion_id, accordion_item, index, govuk_accordion_options[:heading_level])) }
+          end
+        end
+
+        private
+
+        # Generates the HTML for an accordion section, used by {govuk_accordion}
+        #
+        # @param accordion_id [String] used as an id in the HTML for the accordion
+        # @param index [Integer] the index of the accordion item
+        # @param heading_level [Integer] heading level, from 1 to 6
+        #
+        # @option accordion_item [Boolean] :expanded sets whether the section should be expanded
+        #                                            when the page loads for the first time.
+        # @option accordion_item [String] :heading_level (2) Heading level, from 1 to 6
+        # @option accordion_item [String] :heading the heading text for the accordion
+        # @option accordion_item [String] :summary (nil) optional summary text for the accordion header
+        # @option accordion_item [String, ActiveSupport::SafeBuffer] the content within the accordion section
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for an accordion section
+        #                                     which is used in {govuk_accordion}
+
+        def govuk_accordion_section(accordion_id, accordion_item, index, heading_level)
+          tag.div(class: "govuk-accordion__section #{'govuk-accordion__section--expanded' if accordion_item[:expanded]}".rstrip) do
+            concat(govuk_accordion_section_header(accordion_id, accordion_item, index, heading_level))
+            concat(govuk_accordion_section_content(accordion_id, accordion_item, index))
+          end
+        end
+
+        # Generates the HTML for an accordion section heading, used by {govuk_accordion_section}
+        #
+        # @param (see govuk_accordion_section)
+        #
+        # @option (see govuk_accordion_section)
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for an accordion section heading
+        #                                     which is used in {govuk_accordion_section}
+
+        def govuk_accordion_section_header(accordion_id, accordion_item, index, heading_level)
+          tag.div(class: 'govuk-accordion__section-header') do
+            concat(tag.send("h#{heading_level}", class: 'govuk-accordion__section-heading') do
+              tag.span(accordion_item[:heading], class: 'govuk-accordion__section-button', id: "#{accordion_id}-heading-#{index}")
+            end)
+            concat(tag.div(accordion_item[:summary], class: 'govuk-accordion__section-summary govuk-body', id: "#{accordion_id}-summary-#{index}")) if accordion_item[:summary]
+          end
+        end
+
+        # Generates the HTML for an accordion sections content, used by {govuk_accordion_section}
         #
-        # @param (see CCS::Components::GovUK::Accordion#initialize)
+        # @param accordion_id [String] used as an id in the HTML for the accordion
+        # @param index [Integer] the index of the accordion item
         #
-        # @option (see CCS::Components::GovUK::Accordion#initialize)
+        # @option (see govuk_accordion_section)
         #
-        # @return (see CCS::Components::GovUK::Accordion#render)
+        # @return [ActiveSupport::SafeBuffer] the HTML for an accordion sections content
+        #                                     which is used in {govuk_accordion_section}
 
-        def govuk_accordion(accordion_id, accordion_sections, **options)
-          Components::GovUK::Accordion.new(context: self, accordion_id: accordion_id, accordion_sections: accordion_sections, **options).render
+        def govuk_accordion_section_content(accordion_id, accordion_item, index)
+          tag.div(class: 'govuk-accordion__section-content', id: "#{accordion_id}-content-#{index}", aria: { labelledby: "#{accordion_id}-heading-#{index}" }) do
+            if accordion_item[:content].is_a? ActiveSupport::SafeBuffer
+              accordion_item[:content]
+            else
+              tag.p(accordion_item[:content], class: 'govuk-body')
+            end
+          end
         end
       end
     end

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

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
-require_relative '../../components/govuk/back_link'
+require 'action_view'
+
+require_relative '../shared_methods'
 
 module CCS
   module FrontendHelpers
@@ -11,16 +13,25 @@ module CCS
       # {https://design-system.service.gov.uk/components/back-link GDS - Components - Back link}
 
       module BackLink
+        include SharedMethods
+        include ActionView::Helpers::UrlHelper
+
         # Generates the HTML for the GOV.UK Back link component
         #
-        # @param (see CCS::Components::GovUK::BackLink#initialize)
+        # @param text [String] the text for the back link
+        # @param href [String] the href for the back link
+        # @param govuk_back_link_options [Hash] options that will be used in customising the HTML
         #
-        # @option (see CCS::Components::GovUK::BackLink#initialize)
+        # @option govuk_back_link_options [String] :classes additional CSS classes for the back link HTML
+        # @option govuk_back_link_options [Hash] :attributes ({}) any additional attributes that will added as part of the HTML
         #
-        # @return (see CCS::Components::GovUK::BackLink#render)
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Back link
+        #                                     which can then be rendered on the page
+
+        def govuk_back_link(text, href, **govuk_back_link_options)
+          initialise_attributes_and_set_classes(govuk_back_link_options, 'govuk-back-link')
 
-        def govuk_back_link(text, href, **options)
-          Components::GovUK::BackLink.new(context: self, text: text, href: href, **options).render
+          link_to(text, href, **govuk_back_link_options[:attributes])
         end
       end
     end

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

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
-require_relative '../../components/govuk/breadcrumbs'
+require 'action_view'
+
+require_relative '../shared_methods'
 
 module CCS
   module FrontendHelpers
@@ -11,16 +13,62 @@ module CCS
       # {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 (see CCS::Components::GovUK::Breadcrumbs#initialize)
+        # @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 (see CCS::Components::GovUK::Breadcrumbs#initialize)
+        # @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 (see CCS::Components::GovUK::Breadcrumbs#render)
+        # @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'
 
-        def govuk_breadcrumbs(breadcrumb_links, **options)
-          Components::GovUK::Breadcrumbs.new(context: self, breadcrumb_links: breadcrumb_links, **options).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
       end
     end

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

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
-require_relative '../../components/govuk/button'
+require 'action_view'
+
+require_relative '../shared_methods'
 
 module CCS
   module FrontendHelpers
@@ -11,16 +13,113 @@ module CCS
       # {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 (see CCS::Components::GovUK::Button#initialize)
+        # @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 (see CCS::Components::GovUK::Button#initialize)
+        # @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 (see CCS::Components::GovUK::Button#render)
+        # @return [ActiveSupport::SafeBuffer] the HTML for the arrow for the start button
 
-        def govuk_button(text, **options)
-          Components::GovUK::Button.new(context: self, text: text, **options).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
       end
     end