govuk-components 4.1.0 → 4.1.1

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_exit_this_page_link_helper.rb

@@ -6,12 +6,18 @@ module GovukExitThisPageLinkHelper
     **html_attributes,
     &block
   )
-    link_classes = Array.wrap(classes).append(%w(govuk-skip-link govuk-js-exit-this-page-skiplink))
+    link_classes = Array.wrap(classes).append(["#{brand}-skip-link", "#{brand}-js-exit-this-page-skiplink"])
 
-    html_attributes_with_data_module = { data: { module: "govuk-skip-link" } }.deep_merge(html_attributes)
+    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 }

data/app/helpers/govuk_link_helper.rb

@@ -3,35 +3,20 @@ require "html_attributes_utils"
 module GovukLinkHelper
   using HTMLAttributesUtils
 
-  LINK_STYLES = {
-    inverse:          "govuk-link--inverse",
-    muted:            "govuk-link--muted",
-    no_underline:     "govuk-link--no-underline",
-    no_visited_state: "govuk-link--no-visited-state",
-    text_colour:      "govuk-link--text-colour",
-  }.freeze
-
-  BUTTON_STYLES = {
-    disabled:  "govuk-button--disabled",
-    secondary: "govuk-button--secondary",
-    warning:   "govuk-button--warning",
-    inverse:   "govuk-button--inverse",
-  }.freeze
-
-  def govuk_link_classes(*styles, default_class: 'govuk-link')
-    if (invalid_styles = (styles - LINK_STYLES.keys)) && invalid_styles.any?
-      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{LINK_STYLES.keys.to_sentence}")
+  def govuk_link_classes(*styles, default_class: "#{brand}-link")
+    if (invalid_styles = (styles - link_styles.keys)) && invalid_styles.any?
+      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{link_styles.keys.to_sentence}")
     end
 
-    [default_class] + LINK_STYLES.values_at(*styles).compact
+    [default_class] + link_styles.values_at(*styles).compact
   end
 
-  def govuk_button_classes(*styles, default_class: 'govuk-button')
-    if (invalid_styles = (styles - BUTTON_STYLES.keys)) && invalid_styles.any?
-      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{BUTTON_STYLES.keys.to_sentence}")
+  def govuk_button_classes(*styles, default_class: "#{brand}-button")
+    if (invalid_styles = (styles - button_styles.keys)) && invalid_styles.any?
+      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{button_styles.keys.to_sentence}")
     end
 
-    [default_class] + BUTTON_STYLES.values_at(*styles).compact
+    [default_class] + button_styles.values_at(*styles).compact
   end
 
   def govuk_link_to(name = nil, options = nil, extra_options = {}, &block)
@@ -69,8 +54,11 @@ module GovukLinkHelper
 
   def govuk_button_link_to(name = nil, options = nil, extra_options = {}, &block)
     extra_options = options if block_given?
-    html_options = GovukComponent::StartButtonComponent::LINK_ATTRIBUTES
-      .merge build_html_options(extra_options, style: :button)
+    html_options = {
+      data: { module: "#{brand}-button" },
+      draggable: 'false',
+      role: 'button',
+    }.merge build_html_options(extra_options, style: :button)
 
     if block_given?
       link_to(name, html_options, &block)
@@ -92,8 +80,31 @@ module GovukLinkHelper
 
 private
 
+  def brand
+    Govuk::Components.brand
+  end
+
+  def link_styles
+    {
+      inverse:          "#{brand}-link--inverse",
+      muted:            "#{brand}-link--muted",
+      no_underline:     "#{brand}-link--no-underline",
+      no_visited_state: "#{brand}-link--no-visited-state",
+      text_colour:      "#{brand}-link--text-colour",
+    }
+  end
+
+  def button_styles
+    {
+      disabled:  "#{brand}-button--disabled",
+      secondary: "#{brand}-button--secondary",
+      warning:   "#{brand}-button--warning",
+      inverse:   "#{brand}-button--inverse",
+    }
+  end
+
   def build_html_options(provided_options, style: :link)
-    element_styles = { link: LINK_STYLES, button: BUTTON_STYLES }.fetch(style, {})
+    element_styles = { link: link_styles, button: button_styles }.fetch(style, {})
 
     # we need to take a couple of extra steps here because we don't want the style
     # params (inverse, muted, etc) to end up as extra attributes on the link.
@@ -111,7 +122,7 @@ private
     case style
     when :link then govuk_link_classes(*keys)
     when :button then govuk_button_classes(*keys)
-    when :breadcrumb then %w(govuk-breadcrumbs__link)
+    when :breadcrumb then "#{brand}-breadcrumbs__link"
     end
   end
 

data/app/helpers/govuk_skip_link_helper.rb

@@ -1,8 +1,8 @@
 module GovukSkipLinkHelper
   def govuk_skip_link(text: 'Skip to main content', href: '#main-content', classes: [], **html_attributes, &block)
-    link_classes = Array.wrap(classes).append('govuk-skip-link')
+    link_classes = Array.wrap(classes).append("#{brand}-skip-link")
 
-    html_attributes_with_data_module = { data: { module: "govuk-skip-link" } }.deep_merge(html_attributes)
+    html_attributes_with_data_module = { data: { module: "#{brand}-skip-link" } }.deep_merge(html_attributes)
 
     return link_to(href, class: link_classes, **html_attributes_with_data_module, &block) if block_given?
 

data/app/helpers/title_with_error_prefix_helper.rb

@@ -0,0 +1,7 @@
+module TitleWithErrorPrefixHelper
+  def title_with_error_prefix(title, error:, error_prefix: Govuk::Components.config.default_error_prefix)
+    "#{error_prefix if error}#{title}"
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include TitleWithErrorPrefixHelper }

data/lib/govuk/components/engine.rb

@@ -32,11 +32,13 @@ module Govuk
     #
     # Default components configuration
     #
+    # +:brand+ sets the value used to prefix all classes, used to allow the components to be branded for alternative (similar) design systems
     # +:default_back_link_text+ Default text for the back link, defaults to +Back+
     # +:default_breadcrumbs_collapse_on_mobile+ false
     # +:default_breadcrumbs_hide_in_print+ false
     # +:default_cookie_banner_aria_label+ "Cookie banner"
     # +:default_cookie_banner_hide_in_print+ true
+    # +:default_error_prefix+ Text to use at the start of the page title tag when there is an error on the page. Default is 'Error: '
     # +:default_exit_this_page_redirect_url+ The URL that the exit this page component links to by default. Defaults to https://www.bbc.co.uk/weather
     # +:default_exit_this_page_text+ The default text that forms the link. Defaults to 'Exit this page'
     # +:default_exit_this_page_activated_text+ Text announced by screen readers when Exit this Page has been activated via the keyboard shortcut. Default in govuk-frontend is 'Exiting page.' Defaults to nil so govuk-frontend value is used unless overridden.
@@ -72,11 +74,13 @@ module Govuk
     # +:require_summary_list_action_visually_hidden_text+ when true forces visually hidden text to be set for every action. It can still be explicitly skipped by passing in +nil+. Defaults to +false+
     # +:enable_auto_table_scopes+ automatically adds a scope of 'col' to th elements in thead and 'row' to th elements in tbody.
     DEFAULTS = {
+      brand: 'govuk',
       default_back_link_text: 'Back',
       default_breadcrumbs_collapse_on_mobile: false,
       default_breadcrumbs_hide_in_print: false,
       default_cookie_banner_aria_label: "Cookie banner",
       default_cookie_banner_hide_in_print: true,
+      default_error_prefix: "Error: ",
       default_exit_this_page_redirect_url: "https://www.bbc.co.uk/weather",
       default_exit_this_page_text: "Exit this page",
       default_exit_this_page_activated_text: nil,
@@ -108,9 +112,7 @@ module Govuk
       default_notification_title_success: false,
       default_warning_text_icon_fallback_text: "Warning",
       default_warning_text_icon: "!",
-
       default_link_new_tab_text: "(opens in new tab)",
-
       require_summary_list_action_visually_hidden_text: false,
       enable_auto_table_scopes: true,
     }.freeze

data/lib/govuk/components/version.rb

@@ -1,5 +1,5 @@
 module Govuk
   module Components
-    VERSION = '4.1.0'.freeze
+    VERSION = '4.1.1'.freeze
   end
 end