govuk-components 4.0.0 → 4.1.1

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

data/app/components/govuk_component/panel_component.rb

@@ -21,7 +21,7 @@ class GovukComponent::PanelComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { class: %w(govuk-panel govuk-panel--confirmation) }
+    { class: "#{brand}-panel #{brand}-panel--confirmation" }
   end
 
   def heading_tag
@@ -39,13 +39,13 @@ private
   def panel_title
     return if title.blank?
 
-    content_tag(heading_tag, title, class: "govuk-panel__title")
+    content_tag(heading_tag, title, class: "#{brand}-panel__title")
   end
 
   def panel_body
     return if panel_content.blank?
 
-    tag.div(class: "govuk-panel__body") do
+    tag.div(class: "#{brand}-panel__body") do
       panel_content
     end
   end

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

@@ -1,6 +1,6 @@
 <%= tag.div(**html_attributes) do %>
-  <p class="govuk-phase-banner__content">
+  <p class="<%= brand %>-phase-banner__content">
     <%= render(phase_tag_component) %>
-    <%= tag.span((content.presence || @text), class: "govuk-phase-banner__text") %>
+    <%= tag.span((content.presence || @text), class: "#{brand}-phase-banner__text") %>
   </p>
 <% end %>

data/app/components/govuk_component/phase_banner_component.rb

@@ -14,12 +14,12 @@ class GovukComponent::PhaseBannerComponent < GovukComponent::Base
   end
 
   def phase_tag_component
-    GovukComponent::TagComponent.new(**phase_tag.deep_merge(classes: "govuk-phase-banner__content__tag"))
+    GovukComponent::TagComponent.new(**phase_tag.deep_merge(classes: "#{brand}-phase-banner__content__tag"))
   end
 
 private
 
   def default_attributes
-    { class: %w(govuk-phase-banner) }
+    { class: "#{brand}-phase-banner" }
   end
 end

data/app/components/govuk_component/section_break_component.rb

@@ -27,9 +27,9 @@ private
 
   def default_classes
     class_names(
-      "govuk-section-break",
+      "#{brand}-section-break",
       size_class,
-      "govuk-section-break--visible" => visible?
+      "#{brand}-section-break--visible" => visible?
     ).split
   end
 
@@ -37,7 +37,7 @@ private
     if size.blank?
       ""
     elsif size.in?(SIZES)
-      "govuk-section-break--#{size}"
+      "#{brand}-section-break--#{size}"
     else
       raise ArgumentError, "invalid size #{size}, supported sizes are #{SIZES.to_sentence}"
     end

data/app/components/govuk_component/start_button_component.rb

@@ -1,11 +1,4 @@
 class GovukComponent::StartButtonComponent < GovukComponent::Base
-  BUTTON_ATTRIBUTES = {
-    draggable: 'false',
-    data: { module: 'govuk-button' }
-  }.freeze
-
-  LINK_ATTRIBUTES = BUTTON_ATTRIBUTES.merge({ role: 'button' }).freeze
-
   attr_reader :text, :href, :as_button
 
   def initialize(text:, href:, as_button: config.default_start_button_as_button, classes: [], html_attributes: {})
@@ -31,8 +24,13 @@ class GovukComponent::StartButtonComponent < GovukComponent::Base
 private
 
   def default_attributes
-    (as_button ? BUTTON_ATTRIBUTES : LINK_ATTRIBUTES)
-      .merge({ class: %w(govuk-button govuk-button--start) })
+    attrs = {
+      class: ["#{brand}-button", "#{brand}-button--start"],
+      data: { module: "#{brand}-button" },
+      draggable: 'false',
+    }
+    attrs.merge!(role: 'button') unless as_button
+    attrs
   end
 
   def icon
@@ -43,7 +41,7 @@ private
 
   def svg_attributes
     {
-      class: "govuk-button__start-icon",
+      class: "#{brand}-button__start-icon",
       xmlns: "http://www.w3.org/2000/svg",
       width: "17.5",
       height: "19",

data/app/components/govuk_component/summary_list_component/action_component.rb

@@ -37,6 +37,6 @@ private
   end
 
   def visually_hidden_span
-    tag.span(%( #{visually_hidden_text}), class: "govuk-visually-hidden") if visually_hidden_text.present?
+    tag.span(%( #{visually_hidden_text}), class: "#{brand}-visually-hidden") if visually_hidden_text.present?
   end
 end

data/app/components/govuk_component/summary_list_component/card_component.html.erb

@@ -1,16 +1,16 @@
 <%= tag.div(**html_attributes) do %>
-  <div class="govuk-summary-card__title-wrapper">
-    <%= tag.h2(title, class: "govuk-summary-card__title") %>
+  <div class="<%= brand %>-summary-card__title-wrapper">
+    <%= tag.h2(title, class: "#{brand}-summary-card__title") %>
 
     <% if actions.any? %>
-      <ul class="govuk-summary-card__actions">
+      <ul class="<%= brand %>-summary-card__actions">
         <% actions.each do |action| %>
-          <%= tag.li(action, class: "govuk-summary-card__action") %>
+          <%= tag.li(action, class: "#{brand}-summary-card__action") %>
         <% end %>
       </ul>
     <% end %>
   </div>
-  <div class="govuk-summary-card__content">
+  <div class="<%= brand %>-summary-card__content">
     <%= summary_list || content %>
   </div>
 <% end %>

data/app/components/govuk_component/summary_list_component/card_component.rb

@@ -14,6 +14,6 @@ class GovukComponent::SummaryListComponent::CardComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { class: %w(govuk-summary-card) }
+    { class: "#{brand}-summary-card" }
   end
 end

data/app/components/govuk_component/summary_list_component/key_component.rb

@@ -14,7 +14,7 @@ class GovukComponent::SummaryListComponent::KeyComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { class: %w(govuk-summary-list__key) }
+    { class: "#{brand}-summary-list__key" }
   end
 
   def key_content

data/app/components/govuk_component/summary_list_component/row_component.rb

@@ -37,21 +37,21 @@ private
 
   def actions_list
     tag.dd(class: actions_class) do
-      tag.ul(class: "govuk-summary-list__actions-list") do
-        safe_join(actions.map { |action| tag.li(action, class: "govuk-summary-list__actions-list-item") })
+      tag.ul(class: "#{brand}-summary-list__actions-list") do
+        safe_join(actions.map { |action| tag.li(action, class: "#{brand}-summary-list__actions-list-item") })
       end
     end
   end
 
   def default_attributes
-    { class: %w(govuk-summary-list__row) }
+    { class: "#{brand}-summary-list__row" }
   end
 
   def actions_class
-    "govuk-summary-list__actions"
+    "#{brand}-summary-list__actions"
   end
 
   def no_actions_class
-    "govuk-summary-list__row--no-actions"
+    "#{brand}-summary-list__row--no-actions"
   end
 end

data/app/components/govuk_component/summary_list_component/value_component.rb

@@ -14,7 +14,7 @@ class GovukComponent::SummaryListComponent::ValueComponent < GovukComponent::Bas
 private
 
   def default_attributes
-    { class: %w(govuk-summary-list__value) }
+    { class: "#{brand}-summary-list__value" }
   end
 
   def value_content

data/app/components/govuk_component/summary_list_component.rb

@@ -39,11 +39,11 @@ module GovukComponent
     end
 
     def borders_class
-      %(govuk-summary-list--no-border) unless borders
+      "#{brand}-summary-list--no-border" unless borders
     end
 
     def default_attributes
-      { class: ["govuk-summary-list", borders_class].compact }
+      { class: ["#{brand}-summary-list", borders_class].compact }
     end
 
     def build(rows)

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

@@ -1,6 +1,6 @@
 <%= tag.div(**html_attributes) do %>
-  <%= tag.h2(title, class: "govuk-tabs__title") %>
-  <ul class="govuk-tabs__list">
+  <%= tag.h2(title, class: "#{brand}-tabs__title") %>
+  <ul class="<%= brand %>-tabs__list">
     <% tabs.each.with_index do |tab, i| %>
       <%= tag.li(tab.li_link, class: tab.li_classes(i)) %>
     <% end %>

data/app/components/govuk_component/tab_component.rb

@@ -15,7 +15,7 @@ class GovukComponent::TabComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { id: id, class: %w(govuk-tabs), data: { module: 'govuk-tabs' } }
+    { id: id, class: "#{brand}-tabs", data: { module: "#{brand}-tabs" } }
   end
 
   class Tab < GovukComponent::Base
@@ -35,19 +35,19 @@ private
     def hidden_class(i = nil)
       return [] if i&.zero?
 
-      %w(govuk-tabs__panel--hidden)
+      ["#{brand}-tabs__panel--hidden"]
     end
 
     def li_classes(i = nil)
-      class_names("govuk-tabs__list-item", "govuk-tabs__list-item--selected" => i&.zero?).split
+      class_names("#{brand}-tabs__list-item", "#{brand}-tabs__list-item--selected" => i&.zero?).split
     end
 
     def li_link
-      link_to(label, id(prefix: '#'), class: "govuk-tabs__tab")
+      link_to(label, id(prefix: '#'), class: "#{brand}-tabs__tab")
     end
 
     def default_attributes
-      { id: id, class: %w(govuk-tabs__panel) }
+      { id: id, class: "#{brand}-tabs__panel" }
     end
 
     def combined_attributes(i)

data/app/components/govuk_component/table_component/body_component.rb

@@ -28,6 +28,6 @@ private
   end
 
   def default_attributes
-    { class: %w(govuk-table__body) }
+    { class: "#{brand}-table__body" }
   end
 end

data/app/components/govuk_component/table_component/caption_component.rb

@@ -26,12 +26,12 @@ private
   end
 
   def default_attributes
-    { class: class_names("govuk-table__caption", caption_size_class => size).split }
+    { class: class_names("#{brand}-table__caption", caption_size_class => size).split }
   end
 
   def caption_size_class
     fail(ArgumentError, "bad size #{size}, must be in #{SIZES}") unless size.in?(SIZES)
 
-    %(govuk-table__caption--#{size})
+    "#{brand}-table__caption--#{size}"
   end
 end

data/app/components/govuk_component/table_component/cell_component.rb

@@ -4,14 +4,16 @@ class GovukComponent::TableComponent::CellComponent < GovukComponent::Base
   alias_method :numeric?, :numeric
   alias_method :header?, :header
 
-  WIDTHS = {
-    "full"           => "govuk-!-width-full",
-    "three-quarters" => "govuk-!-width-three-quarters",
-    "two-thirds"     => "govuk-!-width-two-thirds",
-    "one-half"       => "govuk-!-width-one-half",
-    "one-third"      => "govuk-!-width-one-third",
-    "one-quarter"    => "govuk-!-width-one-quarter",
-  }.freeze
+  def self.widths
+    {
+      "full"           => "#{brand}-!-width-full",
+      "three-quarters" => "#{brand}-!-width-three-quarters",
+      "two-thirds"     => "#{brand}-!-width-two-thirds",
+      "one-half"       => "#{brand}-!-width-one-half",
+      "one-third"      => "#{brand}-!-width-one-third",
+      "one-quarter"    => "#{brand}-!-width-one-quarter",
+    }.freeze
+  end
 
   def initialize(scope: nil, header: nil, numeric: false, text: nil, width: nil, parent: nil, rowspan: nil, colspan: nil, classes: [], html_attributes: {})
     @text    = text
@@ -71,8 +73,8 @@ private
 
   def default_classes
     class_names(
-      "govuk-table__#{class_suffix}",
-      "govuk-table__#{class_suffix}--numeric" => numeric?,
+      "#{brand}-table__#{class_suffix}",
+      "#{brand}-table__#{class_suffix}--numeric" => numeric?,
       width => width?,
     )
   end

data/app/components/govuk_component/table_component/foot_component.rb

@@ -39,6 +39,6 @@ private
   end
 
   def default_attributes
-    { class: %w(govuk-table__foot) }
+    { class: "#{brand}-table__foot" }
   end
 end

data/app/components/govuk_component/table_component/head_component.rb

@@ -29,6 +29,6 @@ private
   end
 
   def default_attributes
-    { class: %w(govuk-table__head) }
+    { class: "#{brand}-table__head" }
   end
 end

data/app/components/govuk_component/table_component/row_component.rb

@@ -68,7 +68,7 @@ private
   end
 
   def default_attributes
-    { class: %w(govuk-table__row) }
+    { class: "#{brand}-table__row" }
   end
 
   def in_thead?

data/app/components/govuk_component/table_component.rb

@@ -37,7 +37,7 @@ module GovukComponent
     end
 
     def default_attributes
-      { id: id, class: %w(govuk-table) }
+      { id: id, class: "#{brand}-table" }
     end
   end
 end

data/app/components/govuk_component/tag_component.rb

@@ -22,7 +22,7 @@ private
 
   def default_attributes
     {
-      class: ["govuk-tag", colour_class]
+      class: ["#{brand}-tag", colour_class]
     }
   end
 
@@ -31,7 +31,7 @@ private
 
     fail(ArgumentError, colour_error_message) unless valid_colour?
 
-    %(govuk-tag--#{colour})
+    "#{brand}-tag--#{colour}"
   end
 
   def valid_colour?

data/app/components/govuk_component/warning_text_component.rb

@@ -18,20 +18,20 @@ class GovukComponent::WarningTextComponent < GovukComponent::Base
 private
 
   def icon_element
-    tag.span(icon, class: 'govuk-warning-text__icon', aria: { hidden: true })
+    tag.span(icon, class: "#{brand}-warning-text__icon", aria: { hidden: true })
   end
 
   def warning_text
-    tag.strong(class: 'govuk-warning-text__text') do
+    tag.strong(class: "#{brand}-warning-text__text") do
       safe_join([assistive, (content || text)])
     end
   end
 
   def assistive
-    tag.span(icon_fallback_text, class: 'govuk-warning-text__assistive')
+    tag.span(icon_fallback_text, class: "#{brand}-warning-text__assistive")
   end
 
   def default_attributes
-    { class: %w(govuk-warning-text) }
+    { class: "#{brand}-warning-text" }
   end
 end

data/app/helpers/govuk_back_to_top_link_helper.rb

@@ -1,6 +1,6 @@
 module GovukBackToTopLinkHelper
   def govuk_back_to_top_link(target = '#top')
-    link_to(target, class: 'govuk-link govuk-link--no-visited-state') do
+    link_to(target, class: "#{brand}-link #{brand}-link--no-visited-state") do
       <<-HTML.squish.html_safe
       <svg class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
         <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
@@ -9,6 +9,12 @@ module GovukBackToTopLinkHelper
       HTML
     end
   end
+
+private
+
+  def brand
+    Govuk::Components.brand
+  end
 end
 
 ActiveSupport.on_load(:action_view) { include GovukBackToTopLinkHelper }

data/app/helpers/govuk_components_helper.rb

@@ -5,6 +5,7 @@ module GovukComponentsHelper
     govuk_breadcrumbs: 'GovukComponent::BreadcrumbsComponent',
     govuk_cookie_banner: 'GovukComponent::CookieBannerComponent',
     govuk_details: 'GovukComponent::DetailsComponent',
+    govuk_exit_this_page: 'GovukComponent::ExitThisPageComponent',
     govuk_footer: 'GovukComponent::FooterComponent',
     govuk_header: 'GovukComponent::HeaderComponent',
     govuk_inset_text: 'GovukComponent::InsetTextComponent',

data/app/helpers/govuk_exit_this_page_link_helper.rb

@@ -0,0 +1,23 @@
+module GovukExitThisPageLinkHelper
+  def govuk_exit_this_page_link(
+    text: Govuk::Components.config.default_exit_this_page_text,
+    href: Govuk::Components.config.default_exit_this_page_redirect_url,
+    classes: [],
+    **html_attributes,
+    &block
+  )
+    link_classes = Array.wrap(classes).append(["#{brand}-skip-link", "#{brand}-js-exit-this-page-skiplink"])
+
+    html_attributes_with_data_module = { data: { module: "#{brand}-skip-link" } }.deep_merge(html_attributes)
+
+    link_to(text, href, class: link_classes, **html_attributes_with_data_module, &block)
+  end
+
+private
+
+  def brand
+    Govuk::Components.brand
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include GovukExitThisPageLinkHelper }