govuk-components 4.0.0 → 4.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3620f707aab42099193d2170ea2c22f1ffe97163d3b60d2d64460fe26a419f0b
-  data.tar.gz: 00a243bd3f36e033a6cce0ae5c3532b6233300ae3b4639921b7020feefbae3fc
+  metadata.gz: 9c2c1a327331508f3762590e9f79d7c75f2acc04b94effdc6149bae3c5f3131e
+  data.tar.gz: 4c97e4c60c086848d13c369c5d20af75429fffa7b1ebb8c8da0e2167a0c0fa35
 SHA512:
-  metadata.gz: c0682597760d5f6690cdb5ad012119a7041726599a73a72f13eeb2edc2e7b4c8c314904cec76531375525eaf45084bdae7e6b4f625b47ba7c0d8c066cfcd20d5
-  data.tar.gz: a6765ebe093d7f2513bf12966f29214b9725371952563adc42e7b716d0db8977286e9add8be4c8275d34b35940c9127e0f78030f3f2a0e470a0ed1f19f11a1bb
+  metadata.gz: 70b6e520d20d8e0c560312e959e7066d73482c95d1d43936fada0260f4c8d79cf85ffba3f6116fed1c0b8147f3a1651ceb380565d1cdc0c971a6311ed07a9ed0
+  data.tar.gz: cbca842a48e2ecf6e35801067a3d1583563231a281711ace6169b60182ba6b432e61303df84f900dd0748fe55ac8a11c64405b6fd077fa32dd9371786e5dbbea

data/README.md

@@ -1,14 +1,15 @@
-# GOV.UK Components
+# GOV.UK Components for Ruby on Rails
 
-[![Tests](https://github.com/DFE-Digital/govuk-components/workflows/Tests/badge.svg)](https://github.com/DFE-Digital/govuk-components/actions?query=workflow%3ATests)
-[![Maintainability](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/maintainability)](https://codeclimate.com/github/DFE-Digital/govuk-components/maintainability)
-[![Gem Version](https://badge.fury.io/rb/govuk-components.svg)](https://badge.fury.io/rb/govuk-components)
+[![Tests](https://github.com/x-govuk/govuk-components/workflows/Tests/badge.svg)](https://github.com/x-govuk/govuk-components/actions?query=workflow%3ATests)
+[![Maintainability](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/maintainability)](https://codeclimate.com/github/x-govuk/govuk-components/maintainability)
+[![Gem version](https://badge.fury.io/rb/govuk-components.svg)](https://badge.fury.io/rb/govuk-components)
 [![Gem](https://img.shields.io/gem/dt/govuk-components?logo=rubygems)](https://rubygems.org/gems/govuk-components)
-[![Test Coverage](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/test_coverage)](https://codeclimate.com/github/DFE-Digital/govuk-components/test_coverage)
-[![GitHub license](https://img.shields.io/github/license/DFE-Digital/govuk-components)](https://github.com/DFE-Digital/govuk-components/blob/main/LICENSE)
-[![GOV.UK Design System Version](https://img.shields.io/badge/GOV.UK%20Design%20System-4.6.0-brightgreen)](https://design-system.service.gov.uk)
-[![Rails](https://img.shields.io/badge/Rails-6.1.7%20%E2%95%B1%207.0.3-E16D6D)](https://weblog.rubyonrails.org/releases/)
-[![Ruby](https://img.shields.io/badge/Ruby-3.0.5%20%20%E2%95%B1%203.1.3%20%20%E2%95%B1%203.2.0-E16D6D)](https://www.ruby-lang.org/en/downloads/)
+[![Test coverage](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/test_coverage)](https://codeclimate.com/github/x-govuk/govuk-components/test_coverage)
+[![Licence](https://img.shields.io/github/license/x-govuk/govuk-components)](https://github.com/x-govuk/govuk-components/blob/main/LICENSE.txt)
+[![GOV.UK Design System version](https://img.shields.io/badge/GOV.UK%20Design%20System-4.7.0-brightgreen)](https://design-system.service.gov.uk)
+[![ViewComponent](https://img.shields.io/badge/ViewComponent-3.3.0-brightgreen)](https://viewcomponent.org/)
+[![Rails](https://img.shields.io/badge/Rails-6.1.7%20%E2%95%B1%207.0.6-E16D6D)](https://weblog.rubyonrails.org/releases/)
+[![Ruby](https://img.shields.io/badge/Ruby-3.0.6%20%20%E2%95%B1%203.1.4%20%20%E2%95%B1%203.2.2-E16D6D)](https://www.ruby-lang.org/en/downloads/)
 
 This gem provides a suite of reusable components for the [GOV.UK Design System](https://design-system.service.gov.uk/). It is intended to provide a lightweight alternative to the [GOV.UK Publishing Components](https://github.com/alphagov/govuk_publishing_components) library and is built with GitHub’s [ViewComponent](https://github.com/github/view_component) framework.
 
@@ -16,10 +17,7 @@ It aims to implement the functionality from the original Nunjucks macros in a wa
 
 ## Documentation
 
-The gem comes with [a full guide](https://govuk-components.netlify.app/) that
-covers most aspects of day-to-day use, along with code and output examples. The
-examples in the guide (and the guide itself) are built using the components,
-so it will always be up to date.
+The gem comes with [a full guide](https://govuk-components.netlify.app/) that covers most aspects of day-to-day use, along with code and output examples. The examples in the guide (and the guide itself) are built using the components, so it will always be up to date.
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/d40a5a0a-b086-4c35-b046-97fbcbf9f219/deploy-status)](https://app.netlify.com/sites/govuk-components/deploys)
 
@@ -34,6 +32,7 @@ The provided components are:
 * [Breadcrumbs](https://govuk-components.netlify.app/components/breadcrumbs)
 * [Cookie banner](https://govuk-components.netlify.app/components/cookie-banner)
 * [Details](https://govuk-components.netlify.app/components/details)
+* [Exit this page](https://govuk-components.netlify.app/components/exit-this-page)
 * [Footer](https://govuk-components.netlify.app/components/footer)
 * [Header](https://govuk-components.netlify.app/components/header)
 * [Inset text](https://govuk-components.netlify.app/components/inset-text)
@@ -81,15 +80,15 @@ This library allows components to be rendered with Rails’ `render` method or v
 
 ```erb
 <%= govuk_tabs(title: 'Days of the week') do |component| %>
-  <% component.tab(label: 'Monday') do %>
+  <% component.with_tab(label: 'Monday') do %>
     <p>Monday’s child is fair of face</p>
   <% end %>
 
-  <% component.tab(label: 'Tuesday') do %>
+  <% component.with_tab(label: 'Tuesday') do %>
     <p>Tuesday’s child is full of grace</p>
   <% end %>
 
-  <% component.tab(label: 'Wednesday') do %>
+  <% component.with_tab(label: 'Wednesday') do %>
     <p>Wednesday’s child is full of woe</p>
   <% end %>
 <% end %>
@@ -118,6 +117,10 @@ require "govuk/components"
 * [Register trainee teachers](https://github.com/DFE-Digital/register-trainee-teachers)
 * [Teaching Vacancies](https://github.com/DFE-Digital/teaching-vacancies)
 
+## Forks
+
+* [Betagouv Système de Design de l'État view components](https://betagouv.github.io/dsfr-view-components/)
+
 ## Installation
 
 Add this line to your application’s Gemfile:
@@ -140,12 +143,9 @@ gem install govuk-components
 
 ## Contributing
 
-Bug reports and feature requests are most welcome, please raise an issue or
-submit a pull request.
+Bug reports and feature requests are most welcome, please raise an issue or submit a pull request.
 
-Currently we're using [GOVUK Lint](https://github.com/alphagov/govuk-lint) to
-ensure code meets the GOV.UK guidelines. Please ensure that any PRs also adhere
-to this standard.
+Currently we're using [GOVUK Lint](https://github.com/alphagov/govuk-lint) to ensure code meets the GOV.UK guidelines. Please ensure that any PRs also adhere to this standard.
 
 To help keep the logs clean and tidy, please configure git to use your full name:
 
@@ -153,6 +153,6 @@ To help keep the logs clean and tidy, please configure git to use your full name
 git config --global user.name "Julius Hibbert"
 ```
 
-## License
+## Licence
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/govuk_component/accordion_component/section_component.html.erb

@@ -1,11 +1,11 @@
 <%= tag.div(id: id(suffix: 'section'), **html_attributes) do %>
-  <div class="govuk-accordion__section-header">
-    <%= content_tag(heading_level, class: "govuk-accordion__section-heading") do %>
-      <%= tag.span(heading_content, id: id, class: "govuk-accordion__section-button", aria: { expanded: expanded?, controls: id(suffix: 'content') }) %>
+  <div class="<%= brand %>-accordion__section-header">
+    <%= content_tag(heading_level, class: "#{brand}-accordion__section-heading") do %>
+      <%= tag.span(heading_content, id: id, class: "#{brand}-accordion__section-button", aria: { expanded: expanded?, controls: id(suffix: 'content') }) %>
     <% end %>
     <% if summary_content.present? %>
-      <%= tag.div(summary_content, id: id(suffix: 'summary'), class: %w(govuk-accordion__section-summary govuk-body)) %>
+      <%= tag.div(summary_content, id: id(suffix: 'summary'), class: "#{brand}-accordion__section-summary #{brand}-body") %>
     <% end %>
   </div>
-  <%= tag.div(content, id: id(suffix: 'content'), class: %w(govuk-accordion__section-content), aria: { labelledby: id }) %>
+  <%= tag.div(content, id: id(suffix: 'content'), class: "#{brand}-accordion__section-content", aria: { labelledby: id }) %>
 <% end %>

data/app/components/govuk_component/accordion_component/section_component.rb

@@ -37,6 +37,6 @@ class GovukComponent::AccordionComponent::SectionComponent < GovukComponent::Bas
 private
 
   def default_attributes
-    { class: class_names("govuk-accordion__section", "govuk-accordion__section--expanded" => expanded?).split }
+    { class: class_names("#{brand}-accordion__section", "#{brand}-accordion__section--expanded" => expanded?).split }
   end
 end

data/app/components/govuk_component/accordion_component.rb

@@ -24,7 +24,7 @@ class GovukComponent::AccordionComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { class: %w(govuk-accordion), data: { module: 'govuk-accordion' } }.compact
+    { class: "#{brand}-accordion", data: { module: "#{brand}-accordion" } }.compact
   end
 
   def heading_tag(level)

data/app/components/govuk_component/back_link_component.rb

@@ -1,9 +1,10 @@
 class GovukComponent::BackLinkComponent < GovukComponent::Base
-  attr_reader :text, :href
+  attr_reader :text, :href, :inverse
 
-  def initialize(href:, text: config.default_back_link_text, classes: [], html_attributes: {})
+  def initialize(href:, inverse: false, text: config.default_back_link_text, classes: [], html_attributes: {})
     @text = text
     @href = href
+    @inverse = inverse
 
     super(classes: classes, html_attributes: html_attributes)
   end
@@ -19,6 +20,11 @@ private
   end
 
   def default_attributes
-    { class: %w(govuk-back-link) }
+    {
+      class: class_names(
+        "#{brand}-back-link",
+        "#{brand}-back-link--inverse" => inverse
+      ).split
+    }
   end
 end

data/app/components/govuk_component/base.rb

@@ -25,4 +25,8 @@ class GovukComponent::Base < ViewComponent::Base
 
     super
   end
+
+  def brand(override = nil)
+    override || config.brand
+  end
 end

data/app/components/govuk_component/breadcrumbs_component.html.erb

@@ -1,5 +1,5 @@
 <%= tag.div(**html_attributes) do %>
-  <ol class="govuk-breadcrumbs__list">
+  <ol class="<%= brand %>-breadcrumbs__list">
     <% @breadcrumbs.each do |link| %>
       <%= link %>
     <% end %>

data/app/components/govuk_component/breadcrumbs_component.rb

@@ -1,15 +1,17 @@
 class GovukComponent::BreadcrumbsComponent < GovukComponent::Base
-  attr_reader :breadcrumbs, :hide_in_print, :collapse_on_mobile
+  attr_reader :breadcrumbs, :hide_in_print, :collapse_on_mobile, :inverse
 
   def initialize(breadcrumbs:,
                  hide_in_print: config.default_breadcrumbs_hide_in_print,
                  collapse_on_mobile: config.default_breadcrumbs_collapse_on_mobile,
+                 inverse: false,
                  classes: [],
                  html_attributes: {})
 
     @breadcrumbs        = build_list(breadcrumbs)
     @hide_in_print      = hide_in_print
     @collapse_on_mobile = collapse_on_mobile
+    @inverse            = inverse
 
     super(classes: classes, html_attributes: html_attributes)
   end
@@ -19,9 +21,10 @@ private
   def default_attributes
     {
       class: class_names(
-        "govuk-breadcrumbs",
-        "govuk-!-display-none-print" => hide_in_print,
-        "govuk-breadcrumbs--collapse-on-mobile" => collapse_on_mobile
+        "#{brand}-breadcrumbs",
+        "#{brand}-!-display-none-print" => hide_in_print,
+        "#{brand}-breadcrumbs--collapse-on-mobile" => collapse_on_mobile,
+        "#{brand}-breadcrumbs--inverse" => inverse
       ).split
     }
   end
@@ -39,13 +42,13 @@ private
 
   def build_list_item(text, link = nil)
     if link.present?
-      list_item { link_to(text, link, class: "govuk-breadcrumbs__link") }
+      list_item { link_to(text, link, class: "#{brand}-breadcrumbs__link") }
     else
       list_item(aria: { current: "page" }) { text.to_s }
     end
   end
 
   def list_item(html_attributes = {}, &block)
-    tag.li(class: "govuk-breadcrumbs__list-item", **html_attributes, &block)
+    tag.li(class: "#{brand}-breadcrumbs__list-item", **html_attributes, &block)
   end
 end

data/app/components/govuk_component/cookie_banner_component/message_component.rb

@@ -16,8 +16,8 @@ class GovukComponent::CookieBannerComponent::MessageComponent < GovukComponent::
   def call
     tag.div(role: role, hidden: hidden, **html_attributes) do
       safe_join([
-        tag.div(class: "govuk-grid-row") do
-          tag.div(class: "govuk-grid-column-two-thirds") { safe_join([heading_element, message_element]) }
+        tag.div(class: "#{brand}-grid-row") do
+          tag.div(class: "#{brand}-grid-column-two-thirds") { safe_join([heading_element, message_element]) }
         end,
         actions_element
       ])
@@ -27,13 +27,13 @@ class GovukComponent::CookieBannerComponent::MessageComponent < GovukComponent::
 private
 
   def default_attributes
-    { class: %w(govuk-cookie-banner__message govuk-width-container) }
+    { class: "#{brand}-cookie-banner__message #{brand}-width-container" }
   end
 
   def heading_element
     return if heading_content.blank?
 
-    tag.h2(heading_content, class: %w(govuk-cookie-banner__heading govuk-heading-m))
+    tag.h2(heading_content, class: "#{brand}-cookie-banner__heading #{brand}-heading-m")
   end
 
   def heading_content
@@ -41,7 +41,7 @@ private
   end
 
   def message_element
-    tag.div(message_content, class: "govuk-cookie-banner__content")
+    tag.div(message_content, class: "#{brand}-cookie-banner__content")
   end
 
   def message_content
@@ -51,12 +51,12 @@ private
   def wrap_in_p(message_text)
     return if message_text.blank?
 
-    tag.p(message_text, class: "govuk-body")
+    tag.p(message_text, class: "#{brand}-body")
   end
 
   def actions_element
     return if actions.none?
 
-    tag.div(class: "govuk-button-group") { safe_join(actions) }
+    tag.div(class: "#{brand}-button-group") { safe_join(actions) }
   end
 end

data/app/components/govuk_component/cookie_banner_component.rb

@@ -28,7 +28,7 @@ module GovukComponent
 
     def default_attributes
       {
-        class: class_names("govuk-cookie-banner", "govuk-!-display-none-print" => hide_in_print).split
+        class: class_names("#{brand}-cookie-banner", "#{brand}-!-display-none-print" => hide_in_print).split
       }
     end
   end

data/app/components/govuk_component/details_component.rb

@@ -13,7 +13,7 @@ class GovukComponent::DetailsComponent < GovukComponent::Base
   end
 
   def call
-    tag.details(data: { module: "govuk-details" }, id: id, open: open, **html_attributes) do
+    tag.details(data: { module: "#{brand}-details" }, id: id, open: open, **html_attributes) do
       safe_join([summary, description])
     end
   end
@@ -21,8 +21,8 @@ class GovukComponent::DetailsComponent < GovukComponent::Base
 private
 
   def summary
-    tag.summary(class: "govuk-details__summary") do
-      tag.span(summary_content, class: "govuk-details__summary-text")
+    tag.summary(class: "#{brand}-details__summary") do
+      tag.span(summary_content, class: "#{brand}-details__summary-text")
     end
   end
 
@@ -31,12 +31,12 @@ private
   end
 
   def description
-    tag.div(class: "govuk-details__text") do
+    tag.div(class: "#{brand}-details__text") do
       content.presence || text
     end
   end
 
   def default_attributes
-    { class: %w(govuk-details) }
+    { class: "#{brand}-details" }
   end
 end

data/app/components/govuk_component/exit_this_page_component.rb

@@ -0,0 +1,56 @@
+class GovukComponent::ExitThisPageComponent < GovukComponent::Base
+  attr_reader :text, :redirect_url, :activated_text, :timed_out_text, :press_two_more_times_text, :press_one_more_time_text
+
+  def initialize(
+    redirect_url: nil,
+    href: nil,
+    text: config.default_exit_this_page_text,
+    activated_text: config.default_exit_this_page_activated_text,
+    timed_out_text: config.default_exit_this_page_timed_out_text,
+    press_two_more_times_text: config.default_exit_this_page_press_two_more_times_text,
+    press_one_more_time_text: config.default_exit_this_page_press_one_more_time_text,
+    classes: [],
+    html_attributes: {}
+  )
+    fail(ArgumentError, "provide either redirect_url or href, not both") if redirect_url.present? && href.present?
+
+    @text = text
+    @redirect_url = href || redirect_url || config.default_exit_this_page_redirect_url || fail(ArgumentError, "no redirect_url provided")
+    @activated_text = activated_text
+    @timed_out_text = timed_out_text
+    @press_two_more_times_text = press_two_more_times_text
+    @press_one_more_time_text = press_one_more_time_text
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.div(exit_this_page_content, **html_attributes)
+  end
+
+private
+
+  def exit_this_page_content
+    govuk_button_link_to((content.presence || text), redirect_url, **link_attributes)
+  end
+
+  def default_attributes
+    {
+      class: "#{brand}-exit-this-page",
+      data: {
+        module: "#{brand}-exit-this-page",
+        "i18n.activated" => activated_text,
+        "i18n.timed-out" => timed_out_text,
+        "i18n.press-two-more-times" => press_two_more_times_text,
+        "i18n.press-one-more-time" => press_one_more_time_text,
+      }.compact
+    }
+  end
+
+  def link_attributes
+    {
+      warning: true,
+      class: "#{brand}-exit-this-page__button #{brand}-js-exit-this-page-button"
+    }
+  end
+end

data/app/components/govuk_component/footer_component.html.erb

@@ -1,24 +1,24 @@
 <%= tag.footer(role: 'contentinfo', **html_attributes) do %>
   <%= tag.div(**container_html_attributes) do %>
     <% if navigation.present? %>
-      <div class="govuk-footer__navigation">
+      <div class="<%= brand %>-footer__navigation">
         <%= navigation %>
       </div>
 
-      <hr class="govuk-footer__section-break">
+      <hr class="<% brand %>-footer__section-break">
     <% end %>
 
     <%= tag.div(class: meta_classes, **meta_html_attributes) do %>
       <% if meta.present? %>
         <%= meta %>
       <% else %>
-        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+        <div class="<%= brand %>-footer__meta-item <%= brand %>-footer__meta-item--grow">
           <% if meta_items.any? %>
-            <h2 class="govuk-visually-hidden"><%= meta_items_title %></h2>
+            <h2 class="<%= brand %>-visually-hidden"><%= meta_items_title %></h2>
 
-            <ul class="govuk-footer__inline-list">
+            <ul class="<%= brand %>-footer__inline-list">
               <% @meta_items.each do |hyperlink| %>
-                <li class="govuk-footer__inline-list-item">
+                <li class="<%= brand %>-footer__inline-list-item">
                   <%= hyperlink %>
                 </li>
               <% end %>
@@ -26,23 +26,23 @@
           <% end %>
 
           <% if meta_licence.nil? %>
-            <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+            <svg aria-hidden="true" focusable="false" class="<%= brand %>-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
               <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
             </svg>
 
-            <%= tag.span(default_licence, class: "govuk-footer__licence-description") %>
+            <%= tag.span(default_licence, class: "#{brand}-footer__licence-description") %>
           <% elsif meta_licence.present? %>
-            <%= tag.span(meta_licence, class: "govuk-footer__licence-description") %>
+            <%= tag.span(meta_licence, class: "#{brand}-footer__licence-description") %>
           <% end %>
 
           <% if meta_content.present? %>
-            <div class="govuk-footer__meta-custom">
+            <div class="<%= brand %>-footer__meta-custom">
               <%= meta_content %>
             </div>
           <% end %>
         </div>
 
-        <%= tag.div(copyright, class: "govuk-footer__meta-item") %>
+        <%= tag.div(copyright, class: "#{brand}-footer__meta-item") %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/govuk_component/footer_component.rb

@@ -37,7 +37,7 @@ class GovukComponent::FooterComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { class: %w(govuk-footer) }
+    { class: "#{brand}-footer" }
   end
 
   def meta_content
@@ -45,7 +45,7 @@ private
   end
 
   def meta_classes
-    %w(govuk-footer__meta).append(@custom_meta_classes)
+    ["#{brand}-footer__meta"].append(@custom_meta_classes)
   end
 
   def meta_html_attributes
@@ -57,7 +57,7 @@ private
     #
     # Once we drop classes this extra merging can be dropped along with the
     # container_classes and meta_classes args
-    { class: %w(govuk-width-container) }.deep_merge_html_attributes(
+    { class: "#{brand}-width-container" }.deep_merge_html_attributes(
       @custom_container_html_attributes.merge(class: custom_container_classes)
     )
   end
@@ -67,21 +67,21 @@ private
 
     case links
     when Array
-      links.map { |link| raw(link_to(link[:text], link[:href], class: %w(govuk-footer__link), **link.fetch(:attr, {}))) }
+      links.map { |link| raw(link_to(link[:text], link[:href], class: "#{brand}-footer__link", **link.fetch(:attr, {}))) }
     when Hash
-      links.map { |text, href| raw(link_to(text, href, class: %w(govuk-footer__link))) }
+      links.map { |text, href| raw(link_to(text, href, class: "#{brand}-footer__link")) }
     else
       fail(ArgumentError, 'meta links must be a hash or array of hashes') unless links.is_a?(Hash)
     end
   end
 
   def default_licence
-    link = link_to("Open Government Licence v3.0", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", class: %w(govuk-footer__link))
+    link = link_to("Open Government Licence v3.0", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", class: "#{brand}-footer__link")
 
     raw(%(All content is available under the #{link}, except where otherwise stated))
   end
 
   def build_copyright(text, url)
-    link_to(text, url, class: %w(govuk-footer__link govuk-footer__copyright-logo))
+    link_to(text, url, class: "#{brand}-footer__link #{brand}-footer__copyright-logo")
   end
 end

data/app/components/govuk_component/header_component.html.erb

@@ -1,14 +1,14 @@
-<%= tag.header(role: 'banner', data: { module: 'govuk-header' }, **html_attributes) do %>
+<%= tag.header(role: 'banner', data: { module: "#{brand}-header" }, **html_attributes) do %>
   <%= tag.div(**container_html_attributes) do %>
-    <div class="govuk-header__logo">
-      <%= link_to(homepage_url, class: %w(govuk-header__link govuk-header__link--homepage)) do %>
-        <span class="govuk-header__logotype">
+    <div class="<%= brand %>-header__logo">
+      <%= link_to(homepage_url, class: ["#{brand}-header__link", "#{brand}-header__link--homepage"]) do %>
+        <span class="<%= brand %>-header__logotype">
           <% if custom_logo.present? %>
             <%= custom_logo %>
           <% else %>
             <% if crown %>
               <!--[if gt IE 8]><!-->
-              <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="30" width="36">
+                <svg aria-hidden="true" focusable="false" class="<%= brand %>-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="30" width="36">
                 <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
               </svg>
               <!--<![endif]-->
@@ -20,7 +20,7 @@
               <![endif]-->
             <% end %>
 
-            <%= tag.span(logotype, class: "govuk-header__logotype-text") %>
+            <%= tag.span(logotype, class: "#{brand}-header__logotype-text") %>
           <% end %>
         </span>
         <% if product_name.present? %>
@@ -30,15 +30,15 @@
     </div>
 
     <% if service_name.present? || navigation_items.present? %>
-      <div class="govuk-header__content">
+      <div class="<%= brand %>-header__content">
         <% if service_name.present? %>
-          <%= link_to(service_name, service_url, class: %w(govuk-header__link govuk-header__service-name)) %>
+          <%= link_to(service_name, service_url, class: ["#{brand}-header__link", "#{brand}-header__service-name"]) %>
         <% end %>
 
         <% if navigation_items.any? %>
           <%= tag.nav(**navigation_html_attributes) do %>
-            <%= tag.button("Menu", type: "button", class: %w(govuk-header__menu-button govuk-js-header-toggle), hidden: true, aria: { controls: "navigation", label: menu_button_label }) %>
-            <ul id="navigation" class="govuk-header__navigation-list">
+            <%= tag.button("Menu", type: "button", class: ["#{brand}-header__menu-button", "#{brand}-js-header-toggle"], hidden: true, aria: { controls: "navigation", label: menu_button_label }) %>
+            <ul id="navigation" class="<%= brand %>-header__navigation-list">
               <% navigation_items.each do |item| %>
                 <%= item %>
               <% end %>

data/app/components/govuk_component/header_component.rb

@@ -44,22 +44,22 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { class: %w(govuk-header) }
+    { class: ["#{brand}-header"] }
   end
 
   def navigation_html_attributes
-    nc = %w(govuk-header__navigation).append(custom_navigation_classes).compact
+    nc = ["#{brand}-header__navigation"].append(custom_navigation_classes).compact
 
     { class: nc, aria: { label: navigation_label } }
   end
 
   def container_html_attributes
-    { class: %w(govuk-header__container govuk-width-container).append(custom_container_classes).compact }
+    { class: ["#{brand}-header__container", "#{brand}-width-container"].append(custom_container_classes).compact }
   end
 
   def crown_fallback_image_attributes
     {
-      class: "govuk-header__logotype-crown-fallback-image",
+      class: "#{brand}-header__logotype-crown-fallback-image",
       width: "36",
       height: "32",
     }
@@ -84,7 +84,7 @@ private
     end
 
     def active_class
-      %w(govuk-header__navigation-item--active) if active?
+      ["#{brand}-header__navigation-item--active"] if active?
     end
 
     def link?
@@ -94,7 +94,7 @@ private
     def call
       tag.li(**html_attributes) do
         if link?
-          link_to(text, href, class: "govuk-header__link", **options)
+          link_to(text, href, class: "#{brand}-header__link", **options)
         else
           text
         end
@@ -111,7 +111,7 @@ private
     end
 
     def default_attributes
-      { class: %w(govuk-header__navigation-item) }
+      { class: ["#{brand}-header__navigation-item"] }
     end
   end
 
@@ -139,7 +139,7 @@ private
   private
 
     def default_attributes
-      { class: %w(govuk-header__product-name) }
+      { class: ["#{brand}-header__product-name"] }
     end
   end
 end

data/app/components/govuk_component/inset_text_component.rb

@@ -23,6 +23,6 @@ private
   end
 
   def default_attributes
-    { class: %w(govuk-inset-text) }
+    { class: ["#{brand}-inset-text"] }
   end
 end