govuk-components 4.1.0 → 4.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c998783ff4cc73621f04a651a6f3ef2f0a19813e5477a99d2676f50d0f5578b
-  data.tar.gz: 412f8a090cb71ea740c0844721568228a8efaa9cf33c064ef5062848ed326e05
+  metadata.gz: 9c2c1a327331508f3762590e9f79d7c75f2acc04b94effdc6149bae3c5f3131e
+  data.tar.gz: 4c97e4c60c086848d13c369c5d20af75429fffa7b1ebb8c8da0e2167a0c0fa35
 SHA512:
-  metadata.gz: b169ef4f3972c621d3ea3bd3ff84b7e7c93b232fb53336a896e0b8a3d2f52a04132e4142e7d6e3cf1f32629936e6abace87766b648174c93c1238254ba6bcebf
-  data.tar.gz: 27354029f86a306d806a763a9a466f247139664261591575c93fab124f2578c7b3ad4d3760b0e51c51f58320ff0bc31d4f997ab1b73d35b8abc82047ed8ecf6c
+  metadata.gz: 70b6e520d20d8e0c560312e959e7066d73482c95d1d43936fada0260f4c8d79cf85ffba3f6116fed1c0b8147f3a1651ceb380565d1cdc0c971a6311ed07a9ed0
+  data.tar.gz: cbca842a48e2ecf6e35801067a3d1583563231a281711ace6169b60182ba6b432e61303df84f900dd0748fe55ac8a11c64405b6fd077fa32dd9371786e5dbbea

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

@@ -22,8 +22,8 @@ private
   def default_attributes
     {
       class: class_names(
-        "govuk-back-link",
-        "govuk-back-link--inverse" => inverse
+        "#{brand}-back-link",
+        "#{brand}-back-link--inverse" => inverse
       ).split
     }
   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

@@ -21,10 +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,
-        "govuk-breadcrumbs--inverse" => inverse
+        "#{brand}-breadcrumbs",
+        "#{brand}-!-display-none-print" => hide_in_print,
+        "#{brand}-breadcrumbs--collapse-on-mobile" => collapse_on_mobile,
+        "#{brand}-breadcrumbs--inverse" => inverse
       ).split
     }
   end
@@ -42,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

@@ -36,9 +36,9 @@ private
 
   def default_attributes
     {
-      class: "govuk-exit-this-page",
+      class: "#{brand}-exit-this-page",
       data: {
-        module: "govuk-exit-this-page",
+        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,
@@ -50,7 +50,7 @@ private
   def link_attributes
     {
       warning: true,
-      class: %w(govuk-exit-this-page__button govuk-js-exit-this-page-button)
+      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

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

@@ -1,10 +1,10 @@
 <%= tag.div(**html_attributes) do %>
-  <div class="govuk-notification-banner__header">
-    <%= content_tag(title_tag, class: "govuk-notification-banner__title", id: title_id) do %>
+  <div class="<%= brand %>-notification-banner__header">
+    <%= content_tag(title_tag, class: "#{brand}-notification-banner__title", id: title_id) do %>
       <%= title_content %>
     <% end %>
   </div>
-  <div class="govuk-notification-banner__content">
+  <div class="<%= brand %>-notification-banner__content">
     <% headings.each do |heading| %>
       <%= heading %>
     <% end %>

data/app/components/govuk_component/notification_banner_component.rb

@@ -52,11 +52,11 @@ class GovukComponent::NotificationBannerComponent < GovukComponent::Base
     end
 
     def link
-      link_to(link_text, link_href, class: 'govuk-notification-banner__link') if link_text.present? && link_href.present?
+      link_to(link_text, link_href, class: "#{brand}-notification-banner__link") if link_text.present? && link_href.present?
     end
 
     def default_attributes
-      { class: %w(govuk-notification-banner__heading) }
+      { class: ["#{brand}-notification-banner__heading"] }
     end
   end
 
@@ -65,11 +65,11 @@ private
   def default_attributes
     {
       class: class_names(
-        "govuk-notification-banner",
-        "govuk-notification-banner--success" => success
+        "#{brand}-notification-banner",
+        "#{brand}-notification-banner--success" => success
       ),
       data: {
-        "module" => "govuk-notification-banner",
+        "module" => "#{brand}-notification-banner",
         "disable-auto-focus" => disable_auto_focus
       },
       role: role,

data/app/components/govuk_component/pagination_component/adjacent_page.rb

@@ -14,7 +14,7 @@ class GovukComponent::PaginationComponent::AdjacentPage < GovukComponent::Base
 
   def call
     tag.div(**html_attributes) do
-      tag.a(href: href, class: %w(govuk-link govuk-pagination__link), rel: suffix) do
+      tag.a(href: href, class: ["#{brand}-link", "#{brand}-pagination__link"], rel: suffix) do
         safe_join([body, divider, label_content])
       end
     end
@@ -23,7 +23,7 @@ class GovukComponent::PaginationComponent::AdjacentPage < GovukComponent::Base
 private
 
   def default_attributes
-    { class: ["govuk-pagination__#{suffix}"] }
+    { class: ["#{brand}-pagination__#{suffix}"] }
   end
 
   def body
@@ -37,7 +37,7 @@ private
   def divider
     return if label_text.blank?
 
-    tag.span(":", class: %w(govuk-visually-hidden))
+    tag.span(":", class: "#{brand}-visually-hidden")
   end
 
   def label_content
@@ -48,12 +48,12 @@ private
 
   def title_classes
     class_names(
-      %(govuk-pagination__link-title),
-      %(govuk-pagination__link-title--decorated) => label_text.blank?
+      "#{brand}-pagination__link-title",
+      "#{brand}-pagination__link-title--decorated" => label_text.blank?
     )
   end
 
   def label_classes
-    %w(govuk-pagination__link-label)
+    "#{brand}-pagination__link-label"
   end
 end

data/app/components/govuk_component/pagination_component/item.rb

@@ -53,20 +53,20 @@ private
   end
 
   def link(current: false)
-    attributes = html_attributes.tap { |ha| ha[:class] << "govuk-pagination__item--current" if current }
+    attributes = html_attributes.tap { |ha| ha[:class] << "#{brand}-pagination__item--current" if current }
 
     tag.li(**attributes) do
-      tag.a(href: href, class: %w(govuk-link govuk-pagination__link)) { number.to_s }
+      tag.a(href: href, class: ["#{brand}-link", "#{brand}-pagination__link"]) { number.to_s }
     end
   end
 
   def ellipsis_item
-    tag.li("⋯", class: %w(govuk-pagination__item govuk-pagination__item--ellipses))
+    tag.li("⋯", class: ["#{brand}-pagination__item", "#{brand}-pagination__item--ellipses"])
   end
 
   def default_attributes
     {
-      class: %w(govuk-pagination__item),
+      class: ["#{brand}-pagination__item"],
       aria: { label: aria_label }
     }
   end

data/app/components/govuk_component/pagination_component/next_page.rb

@@ -20,7 +20,7 @@ class GovukComponent::PaginationComponent::NextPage < GovukComponent::Pagination
 private
 
   def arrow
-    tag.svg(class: "govuk-pagination__icon govuk-pagination__icon--next", xmlns: "http://www.w3.org/2000/svg", height: "13", width: "15", focusable: "false", viewBox: "0 0 15 13", aria: { hidden: "true" }) do
+    tag.svg(class: "#{brand}-pagination__icon #{brand}-pagination__icon--next", xmlns: "http://www.w3.org/2000/svg", height: "13", width: "15", focusable: "false", viewBox: "0 0 15 13", aria: { hidden: "true" }) do
       tag.path(d: "m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z")
     end
   end

data/app/components/govuk_component/pagination_component/previous_page.rb

@@ -14,7 +14,7 @@ class GovukComponent::PaginationComponent::PreviousPage < GovukComponent::Pagina
 private
 
   def arrow
-    tag.svg(class: "govuk-pagination__icon govuk-pagination__icon--prev", xmlns: "http://www.w3.org/2000/svg", height: "13", width: "15", focusable: "false", viewBox: "0 0 15 13", aria: { hidden: "true" }) do
+    tag.svg(class: "#{brand}-pagination__icon #{brand}-pagination__icon--prev", xmlns: "http://www.w3.org/2000/svg", height: "13", width: "15", focusable: "false", viewBox: "0 0 15 13", aria: { hidden: "true" }) do
       tag.path(d: "m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z")
     end
   end

data/app/components/govuk_component/pagination_component.rb

@@ -66,12 +66,12 @@ class GovukComponent::PaginationComponent < GovukComponent::Base
   end
 
   def call
-    attributes = html_attributes.tap { |ha| (ha[:class] << "govuk-pagination--block") if items.empty? }
+    attributes = html_attributes.tap { |ha| (ha[:class] << "#{brand}-pagination--block") if items.empty? }
 
     tag.nav(**attributes) do
       safe_join([
         previous_content,
-        tag.ul(class: "govuk-pagination__list") { safe_join(page_items) },
+        tag.ul(class: "#{brand}-pagination__list") { safe_join(page_items) },
         next_content
       ])
     end
@@ -85,7 +85,7 @@ class GovukComponent::PaginationComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { role: "navigation", aria: { label: landmark_label }, class: %w(govuk-pagination) }
+    { role: "navigation", aria: { label: landmark_label }, class: "#{brand}-pagination" }
   end
 
   def build_previous
@@ -124,6 +124,6 @@ private
 
     return visible if hidden.blank?
 
-    (visible + tag.span(" #{hidden}", class: "govuk-visually-hidden")).html_safe
+    (visible + tag.span(" #{hidden}", class: "#{brand}-visually-hidden")).html_safe
   end
 end