ccs-frontend_helpers 0.1.0.rc.1

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

@@ -0,0 +1,215 @@
+# frozen_string_literal: true
+
+require 'action_view'
+
+require_relative '../shared_methods'
+
+module CCS
+  module FrontendHelpers
+    module GovUKFrontend
+      # = GOV.UK Step by step navigation
+      #
+      # This helper is used for generating the Step by step navigation component from the
+      # {https://design-system.service.gov.uk/patterns/step-by-step-navigation/ GDS - Pages - Step by step navigation}
+      #
+      # To use this component you need the following from {https://github.com/alphagov/govuk_publishing_components GOV.UK Publishing Components}.
+      # For the SCSS components you should add:
+      # - {https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss _step-by-step-nav.scss}
+      # - {https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss _step-by-step-nav-related.scss}
+      # - {https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss _step-by-step-nav-header.scss}
+      # For the JavaScript you should add:
+      # - {https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js step-by-step-nav.js}
+
+      module StepByStepNavigation
+        include SharedMethods
+        include ActionView::Helpers
+        include ActionView::Context
+
+        # Generates the HTML for the GOV.UK Step by step navigation component (experimental)
+        #
+        # @param step_by_step_sections [Array] the navigation items that will be rendered to the page.
+        #                                   See {govuk_step_by_step_navigation_section} for more details
+        # @param govuk_step_by_step_navigation_options [Hash] options that will be used in customising the HTML
+        #
+        # @option govuk_step_by_step_navigation_options [String] :classes additional CSS classes for the step by step navigation HTML
+        # @option govuk_step_by_step_navigation_options [Hash] :attributes ({data: { module: 'govuk-step-by-step-navigation', 'show-text': 'Show', 'hide-text': 'Hide', 'show-all-text': 'Show all', 'hide-all-text': 'Hide all' } })
+        #                                                                  any additional attributes that will added as part of the HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Step by step navigation
+        #                                     which can then be rendered on the page
+
+        def govuk_step_by_step_navigation(step_by_step_sections, **govuk_step_by_step_navigation_options)
+          initialise_attributes_and_set_classes(govuk_step_by_step_navigation_options, 'gem-c-step-nav gem-c-step-nav--large gem-c-step-nav--active')
+          determine_step_by_step_navigation_attributes(govuk_step_by_step_navigation_options)
+
+          tag.div(**govuk_step_by_step_navigation_options[:attributes]) do
+            tag.ol(class: 'gem-c-step-nav__steps') do
+              step_by_step_sections.each.with_index(1) { |step_by_step_section, section_index| concat(govuk_step_by_step_navigation_section(step_by_step_section, section_index.to_s)) }
+            end
+          end
+        end
+
+        private
+
+        # The HTML for a section within GOV.UK Step by step navigation, used by {govuk_step_by_step_navigation}
+        #
+        # @param step_by_step_section [Hash] the parameters that will be used to create the section
+        # @param section_index [String] the index of the section
+        #
+        # @option step_by_step_section [Hash] :heading the paramaters for the section heading,
+        #                                              see {govuk_step_by_step_navigation_heading} for more details
+        # @option step_by_step_section [Array] :content the paramaters for the section content,
+        #                                               see {govuk_step_by_step_navigation_content} for more details
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Step by step navigation section
+        #                                     which is used in {govuk_step_by_step_navigation}
+
+        def govuk_step_by_step_navigation_section(step_by_step_section, section_index)
+          section_id = convert_to_id(step_by_step_section[:heading][:text])
+
+          tag.li(class: 'gem-c-step-nav__step js-step', id: section_id) do
+            concat(govuk_step_by_step_navigation_heading(step_by_step_section[:heading], section_index))
+            concat(govuk_step_by_step_navigation_content(step_by_step_section[:content], section_id, section_index))
+          end
+        end
+
+        # The HTML for a section heading within GOV.UK Step by step navigation, used by {govuk_step_by_step_navigation_section}
+        #
+        # @param section_heading [Hash] the parameters that will be used to create the heading
+        # @param section_index [String] the index of the section
+        #
+        # @option section_heading [Hash] :text text for the section heading
+        # @option section_heading [Hash] :logic (nil) text to show instead of a number in the sidebar
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Step by step navigation section heading
+        #                                     which is used in {govuk_step_by_step_navigation_section}
+
+        def govuk_step_by_step_navigation_heading(section_heading, section_index)
+          logic = section_heading[:logic]
+
+          tag.div(class: 'gem-c-step-nav__header js-toggle-panel', data: { position: section_index }) do
+            tag.h2(class: 'gem-c-step-nav__title') do
+              concat(tag.span(class: "gem-c-step-nav__circle gem-c-step-nav__circle--#{logic ? 'logic' : 'number'}") do
+                tag.span(class: 'gem-c-step-nav__circle-inner') do
+                  tag.span(class: 'gem-c-step-nav__circle-background') do
+                    concat(tag.span('Step', class: 'govuk-visually-hidden'))
+                    concat(logic || section_index)
+                  end
+                end
+              end)
+              concat(tag.span(class: 'js-step-title') do
+                tag.span(section_heading[:text], class: 'js-step-title-text')
+              end)
+            end
+          end
+        end
+
+        # The HTML for a section content within GOV.UK Step by step navigation, used by {govuk_step_by_step_navigation_section}
+        #
+        # @param content [Array] an array of the content items that will be rendered within the section.
+        #                        Only two types of content are allowed:
+        #                        - +:paragraph+ - see {govuk_step_by_step_navigation_paragraph}
+        #                        - +:list+ - see {govuk_step_by_step_navigation_list}
+        # @param section_id [String] the id of the section
+        # @param section_index [String] the index of the section
+        #
+        # @option content [Symbol] :type the type of content, either +:paragraph+ or +list+
+        # @option content [Symbol] :text the text for the paragraph. Ignored unless the +type+ is +:list+
+        # @option content [Symbol] :items the items for the list. Ignored unless the +type+ is +:paragraph+
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Step by step navigation section content
+        #                                     which is used in {govuk_step_by_step_navigation_section}
+
+        def govuk_step_by_step_navigation_content(content, section_id, section_index)
+          tag.div(class: 'gem-c-step-nav__panel js-panel', id: "step-panel-#{section_id}-#{section_index}") do
+            content.each do |element|
+              concat(
+                case element[:type]
+                when :paragraph
+                  govuk_step_by_step_navigation_paragraph(element[:text])
+                when :list
+                  govuk_step_by_step_navigation_list(element[:items])
+                end
+              )
+            end
+          end
+        end
+
+        # The HTML for the paragraph item within the GOV.UK Step by step navigation content, used by {govuk_step_by_step_navigation_content}
+        #
+        # @param text [String] the text for the paragraph
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the paragraph
+        #                                     which is used in {govuk_step_by_step_navigation_content}
+
+        def govuk_step_by_step_navigation_paragraph(text)
+          tag.p(
+            text,
+            class: 'gem-c-step-nav__paragraph',
+          )
+        end
+
+        # The HTML for the list items within the GOV.UK Step by step navigation content, used by {govuk_step_by_step_navigation_content}
+        #
+        # @param items [Array] an array of the list items,
+        #                      see {govuk_step_by_step_navigation_list_item} for more details
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the list
+        #                                     which is used in {govuk_step_by_step_navigation_content}
+
+        def govuk_step_by_step_navigation_list(items)
+          tag.ul(class: 'gem-c-step-nav__list gem-c-step-nav__list--choice', data: { length: items.length.to_s }) do
+            items.each do |item|
+              concat(govuk_step_by_step_navigation_list_item(item[:text], item[:no_marker]))
+            end
+          end
+        end
+
+        # The HTML for a list item, used by {govuk_step_by_step_navigation_list}
+        #
+        # @param text [Symbol] the text of the list item
+        # @param no_marker [Symbol] (nil) switch to hide the bullet marker
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the list item
+        #                                     which is used in {govuk_step_by_step_navigation_list}
+
+        def govuk_step_by_step_navigation_list_item(text, no_marker)
+          list_item_classes = ['gem-c-step-nav__list-item js-list-item']
+          list_item_classes << 'gem-c-step-nav__list--no-marker' if no_marker
+
+          tag.li(class: list_item_classes) do
+            tag.span(text)
+          end
+        end
+
+        # Converts the title text into a string to be used as the section id
+        #
+        # @param title [String] the section title that will be converted
+        #
+        # @return [String] the section id
+
+        def convert_to_id(title)
+          title.downcase.gsub(' ', '-').gsub('(', '').gsub(')', '')
+        end
+
+        # Generates a hash with the attributes used in {govuk_step_by_step_navigation}
+        #
+        # @param govuk_step_by_step_navigation_options [Hash] options that will be used in customising the HTML
+        #
+        # @option (see govuk_step_by_step_navigation)
+        #
+        # @return [Hash] contains the HTMl attributes used in {govuk_step_by_step_navigation}
+
+        def determine_step_by_step_navigation_attributes(govuk_step_by_step_navigation_options)
+          set_data_module(govuk_step_by_step_navigation_options, 'govuk-step-by-step-navigation')
+
+          DEFAULT_SHOW_HIDE_TEXT.each { |key, value| govuk_step_by_step_navigation_options[:attributes][:data][key] ||= value }
+        end
+
+        # Default text for the show and hide buttons which are part of each section
+
+        DEFAULT_SHOW_HIDE_TEXT = { 'show-text': 'Show', 'hide-text': 'Hide', 'show-all-text': 'Show all', 'hide-all-text': 'Hide all' }.freeze
+      end
+    end
+  end
+end

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

@@ -0,0 +1,226 @@
+# frozen_string_literal: true
+
+require 'action_view'
+
+require_relative '../shared_methods'
+
+module CCS
+  module FrontendHelpers
+    module GovUKFrontend
+      # = GOV.UK Summary list
+      #
+      # This helper is used for generating the summary list component from the
+      # {https://design-system.service.gov.uk/components/summary-list GDS - Components - Summary list}
+
+      module SummaryList
+        include SharedMethods
+        include ActionView::Context
+        include ActionView::Helpers::TagHelper
+        include ActionView::Helpers::TextHelper
+        include ActionView::Helpers::UrlHelper
+
+        # Generates the HTML for the GOV.UK Summary list component
+        #
+        # @param summary_list_items [Array] the list of summary items. See {govuk_summary_list_row}
+        # @param govuk_summary_list_options [Hash] options that will be used in customising the HTML
+        #
+        # @option govuk_summary_list_options [String] :classes additional CSS classes for the summary list HTML
+        # @option govuk_summary_list_options [Hash] :attributes ({}) any additional attributes that will be added as part of the HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Summary list
+        #                                     which can then be rendered on the page
+
+        def govuk_summary_list(summary_list_items, **govuk_summary_list_options)
+          if govuk_summary_list_options[:card]
+            govuk_summary_card(**govuk_summary_list_options[:card]) do
+              _govuk_summary_list(summary_list_items, govuk_summary_list_options)
+            end
+          else
+            _govuk_summary_list(summary_list_items, govuk_summary_list_options)
+          end
+        end
+
+        private
+
+        # Generates the HTML for the GOV.UK Summary list.
+        # Used in {govuk_summary_list} to gererate the actual summary list.
+        #
+        # @param (see govuk_summary_list)
+        #
+        # @option (see govuk_summary_list)
+        #
+        # @return (see govuk_summary_list)
+
+        def _govuk_summary_list(summary_list_items, govuk_summary_list_options)
+          initialise_attributes_and_set_classes(govuk_summary_list_options, 'govuk-summary-list')
+
+          any_row_has_actions = summary_list_items.any? { |summary_list_item| summary_list_item.dig(:actions, :items).present? }
+
+          tag.dl(**govuk_summary_list_options[:attributes]) do
+            summary_list_items.each do |summary_list_item|
+              concat(govuk_summary_list_row(summary_list_item, any_row_has_actions))
+            end
+          end
+        end
+
+        # rubocop:disable Metrics/AbcSize
+
+        # Generates the HTML for a summary list row used in {govuk_summary_list}
+        #
+        # @param summary_list_item [Hash] the list of summary items
+        # @param any_row_has_actions [Boolean] flag to indicate if any rows have actioms
+        #
+        # @option summary_list_item [String] :classes additional CSS classes for the summary row HTML
+        # @option summary_list_item [Hash] :key the key for the summary list.
+        #                                       Has the following options:
+        #                                       - +:text+ - the text for the key
+        #                                       - +:classes+ - additional classes for the key
+        # @option summary_list_item [Hash] :value the value for the summary list.
+        #                                       Has the following options:
+        #                                       - +:text+ - the text for the value
+        #                                       - +:classes+ - additional classes for the value
+        # @option summary_list_item [Hash] :actions the actions for the summary list.
+        #                                       Has the following options:
+        #                                       - +:items+ - the action items (see {govuk_summary_list_action_link})
+        #                                       - +:classes+ - additional classes for the actions
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for a summary list row
+        #                                     used in {govuk_summary_list}
+
+        def govuk_summary_list_row(summary_list_item, any_row_has_actions)
+          item_has_actions = summary_list_item.dig(:actions, :items).present?
+          summary_list_item_classes = "govuk-summary-list__row #{'govuk-summary-list__row--no-actions' if any_row_has_actions && !item_has_actions}".rstrip
+          summary_list_item_classes += " #{summary_list_item[:classes]}".rstrip
+
+          tag.div(class: summary_list_item_classes) do
+            concat(tag.dt(summary_list_item[:key][:text], class: govuk_summary_list_cell_classes(:key, summary_list_item)))
+            concat(tag.dd(summary_list_item[:value][:text], class: govuk_summary_list_cell_classes(:value, summary_list_item)))
+            concat(tag.dd(govuk_summary_list_actions(summary_list_item[:actions]), class: govuk_summary_list_cell_classes(:actions, summary_list_item))) if item_has_actions
+          end
+        end
+
+        # rubocop:enable Metrics/AbcSize
+
+        # Generates the HTML for a summary list actions used in {govuk_summary_list_row}
+        #
+        # @param summary_list_actions [Hash] the actions for the summary list
+        #
+        # @option summary_list_actions [Hash] :items the action items (see {govuk_summary_list_action_link})
+        # @option summary_list_actions [String] :classes additional CSS classes for the summary row HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the summary list actions
+        #                                     used in {govuk_summary_list_row}
+
+        def govuk_summary_list_actions(summary_list_actions)
+          if summary_list_actions[:items].length == 1
+            govuk_summary_list_action_link(summary_list_actions[:items].first)
+          else
+            tag.ul(class: 'govuk-summary-list__actions-list') do
+              summary_list_actions[:items].each do |summary_list_actions_item|
+                concat(tag.li(govuk_summary_list_action_link(summary_list_actions_item), class: 'govuk-summary-list__actions-list-item'))
+              end
+            end
+          end
+        end
+
+        # Generates the HTML for a summary list action link used in {govuk_summary_list_actions}
+        #
+        # @param summary_list_action_item [Hash] an individual action ite,
+        #
+        # @option summary_list_action_item [String] :text text for the link
+        # @option summary_list_action_item [String] :href href for the link
+        # @option summary_list_action_item [String] :classes additional CSS classes for the summary link HTML
+        # @option summary_list_action_item [Hash] :attributes ({}) any additional attributes that will added as part of the HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the summary list action link
+        #                                     used in {govuk_summary_list_row}
+
+        def govuk_summary_list_action_link(summary_list_action_item)
+          initialise_attributes_and_set_classes(summary_list_action_item, 'govuk-link')
+
+          link_to(summary_list_action_item[:href], **summary_list_action_item[:attributes]) do
+            concat(summary_list_action_item[:text])
+            concat(tag.span(summary_list_action_item[:visually_hidden_text], class: 'govuk-visually-hidden')) if summary_list_action_item[:visually_hidden_text]
+          end
+        end
+
+        # rubocop:disable Metrics/AbcSize
+
+        # Creates the wrapper for the govuk summary card used in {govuk_summary_list}
+        #
+        # @param govuk_summary_card_options [Hash] options for the summary card
+        #
+        # @option govuk_summary_card_options [Hash] :title options for the title section of the card header
+        # @option govuk_summary_card_options [Hash] :actions options for the summary card actions section (see {govuk_summary_card_actions})
+        # @option govuk_summary_card_options [String] :classes additional CSS classes for the summary card HTML
+        # @option govuk_summary_card_options [Hash] :attributes ({}) any additional attributes that will be added as part of the HTML
+        #
+        # @option title [String] :text the title of the card
+        # @option title [String] :heading_level (2) heading level, from 1 to 6
+        # @option title [String] :classes additional classes to add to the title wrapper
+        #
+        # @yield HTML for the summary list (see {_govuk_summary_list})
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the summary card that
+        #                                     wraps round {_govuk_summary_list} and
+        #                                     used in {govuk_summary_list}
+
+        def govuk_summary_card(**govuk_summary_card_options, &block)
+          initialise_attributes_and_set_classes(govuk_summary_card_options, 'govuk-summary-card')
+
+          tag.div(**govuk_summary_card_options[:attributes]) do
+            concat(tag.div(class: 'govuk-summary-card__title-wrapper') do
+              if govuk_summary_card_options[:title]
+                govuk_summary_card_options[:title][:heading_level] ||= 2
+
+                concat(tag.send(:"h#{govuk_summary_card_options[:title][:heading_level]}", govuk_summary_card_options[:title][:text], class: "govuk-summary-card__title #{govuk_summary_card_options[:title][:classes]}".rstrip))
+              end
+              concat(govuk_summary_card_actions(govuk_summary_card_options[:actions])) if govuk_summary_card_options[:actions]
+            end)
+            concat(tag.div(class: 'govuk-summary-card__content', &block))
+          end
+        end
+
+        # rubocop:enable Metrics/AbcSize
+
+        # Generates the HTML for a summary card actions used in {govuk_summary_card}
+        #
+        # @param actions [Hash] options for the summary card actions
+        #
+        # @option actions [String] :classes additional CSS classes for the summary card actions HTML
+        # @option actions [Array] :items the action item objects which are passed to {govuk_summary_list_action_link}
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the summary card actions
+        #                                     used in {govuk_summary_card}
+
+        def govuk_summary_card_actions(actions)
+          action_classes = "govuk-summary-card__actions #{actions[:classes]}".rstrip
+
+          if actions[:items].length == 1
+            tag.div(class: action_classes) do
+              govuk_summary_list_action_link(actions[:items][0])
+            end
+          else
+            tag.ul(class: action_classes) do
+              actions[:items].each { |action_item| concat(tag.li(govuk_summary_list_action_link(action_item), class: 'govuk-summary-card__action')) }
+            end
+          end
+        end
+
+        # Generates a string containing the classes for the cell used in {govuk_summary_list_row}
+        #
+        # @param type [String] the type of the row. One of:
+        #                      - +'key'+
+        #                      - +'value'+
+        #                      - +'actions'+
+        # @param summary_list_item [Hash] see {govuk_summary_list_row}
+        #
+        # @return [String] the classes for a summary list cell
+
+        def govuk_summary_list_cell_classes(type, summary_list_item)
+          "govuk-summary-list__#{type} #{summary_list_item[type][:classes]}".rstrip
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+require 'action_view'
+
+require_relative '../shared_methods'
+
+module CCS
+  module FrontendHelpers
+    module GovUKFrontend
+      # = GOV.UK Table
+      #
+      # This helper is used for generating the table component from the
+      # {https://design-system.service.gov.uk/components/table GDS - Components - Table}
+
+      module Table
+        include SharedMethods
+        include ActionView::Context
+        include ActionView::Helpers::TagHelper
+        include ActionView::Helpers::TextHelper
+
+        # Generates the HTML for the GOV.UK Table component
+        #
+        # @param rows [Array] array of table rows and cells. See {govuk_table_row}
+        # @param head [NilClass,Array] array of table head cells. See {govuk_table_head}
+        # @param govuk_table_options [Hash] options that will be used in customising the HTML
+        #
+        # @option govuk_table_options [String] :classes additional CSS classes for the table HTML
+        # @option govuk_table_options [String] :first_cell_is_header if set to true, first cell in table row will be a TH instead of a TD
+        # @option govuk_table_options [Hash] :caption options for a table caption. See {govuk_table_caption}
+        # @option govuk_table_options [Hash] :attributes ({}) any additional attributes that will be added as part of the HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Table
+        #                                     which can then be rendered on the page
+
+        def govuk_table(rows, head = nil, **govuk_table_options)
+          initialise_attributes_and_set_classes(govuk_table_options, 'govuk-table')
+
+          tag.table(**govuk_table_options[:attributes]) do
+            concat(govuk_table_caption(govuk_table_options[:caption])) if govuk_table_options[:caption]
+            concat(govuk_table_head(head)) if head
+            concat(tag.tbody(class: 'govuk-table__body') do
+              rows.each { |row| concat(govuk_table_row(row, govuk_table_options[:first_cell_is_header])) }
+            end)
+          end
+        end
+
+        private
+
+        # Generates the HTML for the the table caption used in {govuk_table}
+        #
+        # @param caption [Hash] options that are used to define the caption
+        #
+        # @option caption [String] :text the caption text
+        # @option caption [String] :classes additional CSS classes for the table caption
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the table caption used in {govuk_table}
+
+        def govuk_table_caption(caption)
+          tag.caption(caption[:text], class: "govuk-table__caption #{caption[:classes]}".rstrip)
+        end
+
+        # Generates the HTML for the table head used in {govuk_table}
+        #
+        # @param head [Array] an array of table head cells
+        #
+        # @option head [String] :text the text of the cell
+        # @option head [String] :classes additional CSS classes for the cell
+        # @option head [String] :format specify format of a cell
+        # @option head [Hash] :attributes ({}) any additional attributes that will be added as part of the cell
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the table head used in {govuk_table}
+
+        def govuk_table_head(head)
+          tag.thead(class: 'govuk-table__head') do
+            tag.tr(class: 'govuk-table__row') do
+              head.each do |cell|
+                initialise_attributes_and_set_classes(cell, 'govuk-table__header')
+
+                cell[:attributes][:class] += " govuk-table__header--#{cell[:format]}" if cell[:format]
+                cell[:attributes][:scope] = 'col'
+
+                concat(tag.th(cell[:text], **cell[:attributes]))
+              end
+            end
+          end
+        end
+
+        # Generates the HTML for a table row used in {govuk_table}
+        #
+        # @param row [Array] an array of a rows cells
+        # @param first_cell_is_header [Boolean] if set to true, first cell in the row will be a TH instead of a TD
+        #
+        # @option row [String] :text the text of the cell
+        # @option row [String] :classes additional CSS classes for the cell
+        # @option row [String] :format specify format of a cell
+        # @option row [Hash] :attributes ({}) any additional attributes that will be added as part of the cell
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for a table row used in {govuk_table}
+
+        def govuk_table_row(row, first_cell_is_header)
+          tag.tr(class: 'govuk-table__row') do
+            row.each.with_index do |cell, index|
+              tag_type = if first_cell_is_header && index.zero?
+                           initialise_attributes_and_set_classes(cell, 'govuk-table__header')
+
+                           cell[:attributes][:scope] = 'row'
+
+                           :th
+                         else
+                           initialise_attributes_and_set_classes(cell, 'govuk-table__cell')
+
+                           cell[:attributes][:class] += " govuk-table__cell--#{cell[:format]}" if cell[:format]
+
+                           :td
+                         end
+
+              concat(tag.send(tag_type, cell[:text], **cell[:attributes]))
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+require 'action_view'
+
+require_relative '../shared_methods'
+
+module CCS
+  module FrontendHelpers
+    module GovUKFrontend
+      # = GOV.UK Tabs
+      #
+      # This helper is used for generating the tabs component from the
+      # {https://design-system.service.gov.uk/components/tabs GDS - Components - Tabs}
+
+      module Tabs
+        include SharedMethods
+        include ActionView::Context
+        include ActionView::Helpers::FormTagHelper
+        include ActionView::Helpers::TagHelper
+        include ActionView::Helpers::TextHelper
+        include ActionView::Helpers::UrlHelper
+
+        # Generates the HTML for the GOV.UK Tabs component
+        #
+        # @param items [Array] array of tab items. See {govuk_tabs_list_item}
+        # @param title [NilClass,String] title for the tabs table of contents
+        # @param govuk_tabs_options [Hash] options that will be used in customising the HTML
+        #
+        # @option govuk_tabs_options [String] :classes additional CSS classes for the tabs HTML
+        # @option govuk_tabs_options [String] :id_prefix prefix id for each tab item if no id is specified on each item
+        # @option govuk_tabs_options [Hash] :attributes ({}) any additional attributes that will be added as part of the HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for the GOV.UK Tabs
+        #                                     which can then be rendered on the page
+
+        def govuk_tabs(items, title = 'Contents', **govuk_tabs_options)
+          initialise_attributes_and_set_classes(govuk_tabs_options, 'govuk-tabs')
+          set_data_module(govuk_tabs_options, 'govuk-tabs')
+
+          id_prefix = govuk_tabs_options[:id_prefix] || sanitize_to_id(title.downcase)
+
+          tag.div(**govuk_tabs_options[:attributes]) do
+            concat(tag.h2(title, class: 'govuk-tabs__title'))
+            concat(tag.ul(class: 'govuk-tabs__lis') do
+              items.each.with_index(1) { |list_item, index| concat(govuk_tabs_list_item(list_item, index, id_prefix)) }
+            end)
+            items.each.with_index(1) { |panel_item, index| concat(govuk_tabs_panel_item(panel_item[:panel], index)) }
+          end
+        end
+
+        private
+
+        # Generates the HTML for a tab list item used in {govuk_tabs}
+        #
+        # @param list_item [Hash] options used to form the tab
+        # @param index [Integer] the index of the tab
+        # @param id_prefix [String] prefix id for a tab item if no id is specified
+        #
+        # @option list_item [String] :label the text label of a tab item
+        # @option list_item [Hash] :panel content for panel. See {govuk_tabs_panel_item}
+        # @option list_item [Hash] :attributes ({}) any additional attributes that will be added as part of the tab link HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for a tab list item used in {govuk_tabs}
+
+        def govuk_tabs_list_item(list_item, index, id_prefix)
+          (list_item[:attributes] ||= {})[:class] = 'govuk-tabs__tab'
+          (list_item[:panel][:attributes] ||= {})[:id] ||= "#{id_prefix}-#{index}"
+
+          tag.li(class: "govuk-tabs__list-item #{'govuk-tabs__list-item--selected' if index == 1}".rstrip) do
+            link_to(list_item[:label], "##{list_item[:panel][:attributes][:id]}", **list_item[:attributes])
+          end
+        end
+
+        # Generates the HTML for a tab panel used in {govuk_tabs}
+        #
+        # @param panel_item [Hash] options used to form the tab panel
+        # @param index [Integer] the index of the tab
+        #
+        # @option panel_item [ActiveSupport::SafeBuffer] :content HTML to use within the each tab panel
+        # @option panel_item [String] :text if +:content+ is blank then this is the text within the panel
+        # @option panel_item [Hash] :attributes ({}) any additional attributes that will be added as part of the tab panel HTML
+        #
+        # @return [ActiveSupport::SafeBuffer] the HTML for a tab panel used in {govuk_tabs}
+
+        def govuk_tabs_panel_item(panel_item, index)
+          panel_item[:attributes][:class] = "govuk-tabs__panel #{'govuk-tabs__panel--hidden' if index > 1}".rstrip
+
+          tag.div(**panel_item[:attributes]) do
+            panel_item[:content] || tag.p(panel_item[:text], class: 'govuk-body')
+          end
+        end
+      end
+    end
+  end
+end