govuk-components 3.0.4 → 3.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c3bf635c37adb87e738a728912c6e69c23fb78b8294bc5ec88051e2bf426c264
-  data.tar.gz: da828729be36c2602f70b404c4a5a81d31ebb079fca7aaa7107e77329c74c771
+  metadata.gz: 8d5cf5d99c77bcfbd24e77252b855265660bc80e2496b75adda9cf10362c9ee1
+  data.tar.gz: c54839796cf802ebe85dddf875a269b67a423856d36c87cdc7e16a4f90ee830d
 SHA512:
-  metadata.gz: 11be36a8bcd99438c882feb99e4428bded8aa524f80764fd62f640a723eb5e6fe864308b309735de5f1ed4d90f568de653aef0162bf57f802cc6d1b2e89cd130
-  data.tar.gz: 12b3f543f555c0bf7291e4295ff0f50c84c656833d74768fb8a142df87a48b30fa8b3cae269ecfeb8dfab2673814159a6013562fc6396424d45666c8dbcbcfbd
+  metadata.gz: 246a31f6ea734ae757f88bf92e0d2bf1ea15daa741fb87318f257b9d79926b189b8cf9312b492d6f82a9180608dec25344f7328f98c74f49d4ffd81fdda3540f
+  data.tar.gz: 61d94fc80d6e125d198eb388afd056b3edd612b6463adb06a17fb9fbfe8e37862b93f99ce45603a21cdf8c32a8a1cfe28edbd463b952ea73c08e003948d4175c

data/README.md

@@ -31,6 +31,7 @@ The provided components are:
 * [Notification banner](https://govuk-components.netlify.app/components/notification-banner)
 * [Panel](https://govuk-components.netlify.app/components/panel)
 * [Phase banner](https://govuk-components.netlify.app/components/phase-banner)
+* [Section break](https://govuk-components.netlify.app/components/section-break)
 * [Start button](https://govuk-components.netlify.app/components/start-button)
 * [Summary list](https://govuk-components.netlify.app/components/summary-list)
 * [Tabs](https://govuk-components.netlify.app/components/tabs)

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

@@ -1,4 +1,4 @@
-<%= tag.div(id: id(suffix: 'section'), class: classes, **html_attributes) do %>
+<%= 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') }) %>

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

@@ -7,12 +7,12 @@ class GovukComponent::AccordionComponent::SectionComponent < GovukComponent::Bas
   alias_method :expanded?, :expanded
 
   def initialize(heading_text:, summary_text:, expanded:, heading_level:, classes: [], html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
     @heading_text  = heading_text
     @summary_text  = summary_text
     @expanded      = expanded
     @heading_level = heading_level
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
   def id(suffix: nil)
@@ -33,7 +33,7 @@ class GovukComponent::AccordionComponent::SectionComponent < GovukComponent::Bas
 
 private
 
-  def default_classes
-    class_names("govuk-accordion__section", "govuk-accordion__section--expanded" => expanded?).split
+  def default_attributes
+    { class: class_names("govuk-accordion__section", "govuk-accordion__section--expanded" => expanded?).split }
   end
 end

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

@@ -1,4 +1,4 @@
-<%= tag.div(id: @id, class: classes, data: { module: 'govuk-accordion' }, **html_attributes) do %>
+<%= tag.div(**html_attributes) do %>
   <% sections.each do |section| %>
     <%= section %>
   <% end %>

data/app/components/govuk_component/accordion_component.rb

@@ -13,17 +13,16 @@ class GovukComponent::AccordionComponent < GovukComponent::Base
 
   attr_reader :id, :heading_level
 
-  def initialize(id: nil, heading_level: 2, classes: [], html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
-    @id            = id
+  def initialize(heading_level: 2, classes: [], html_attributes: {})
     @heading_level = heading_tag(heading_level)
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
 private
 
-  def default_classes
-    %w(govuk-accordion)
+  def default_attributes
+    { class: %w(govuk-accordion), data: { module: 'govuk-accordion' } }
   end
 
   def heading_tag(level)

data/app/components/govuk_component/back_link_component.rb

@@ -1,15 +1,15 @@
 class GovukComponent::BackLinkComponent < GovukComponent::Base
   attr_reader :text, :href
 
-  def initialize(href:, text: 'Back', classes: nil, html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
+  def initialize(href:, text: 'Back', classes: [], html_attributes: {})
     @text = text
     @href = href
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
   def call
-    link_to(link_content, href, class: classes, **html_attributes)
+    link_to(link_content, href, **html_attributes)
   end
 
 private
@@ -18,7 +18,7 @@ private
     content || text || fail(ArgumentError, "no text or content")
   end
 
-  def default_classes
-    %w(govuk-back-link)
+  def default_attributes
+    { class: %w(govuk-back-link) }
   end
 end

data/app/components/govuk_component/base.rb

@@ -1,19 +1,21 @@
 class GovukComponent::Base < ViewComponent::Base
-  include Govuk::Components::Helpers::CssUtilities
-
-  include GovukComponent::Traits::CustomClasses
-  include GovukComponent::Traits::CustomHtmlAttributes
+  using HTMLAttributesUtils
 
   attr_reader :html_attributes
 
   def initialize(classes:, html_attributes:)
-    @classes         = parse_classes(classes)
-    @html_attributes = html_attributes
+    # FIXME: remove first merge when we deprecate classes
+    #
+    # This step only needs to be here while we still accept classes:, now
+    # we're using html_attributes_utils we can start to move towards
+    # supporting html_attributes: { class: 'xyz' } over taking them
+    # separately
 
-    super
-  end
+    @html_attributes = default_attributes
+      .deep_merge_html_attributes({ class: classes })
+      .deep_merge_html_attributes(html_attributes)
+      .deep_tidy_html_attributes
 
-  def default_classes
-    []
+    super
   end
 end

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

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

data/app/components/govuk_component/breadcrumbs_component.rb

@@ -2,21 +2,23 @@ class GovukComponent::BreadcrumbsComponent < GovukComponent::Base
   attr_reader :breadcrumbs, :hide_in_print, :collapse_on_mobile
 
   def initialize(breadcrumbs:, hide_in_print: false, collapse_on_mobile: false, classes: [], html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
     @breadcrumbs        = build_list(breadcrumbs)
     @hide_in_print      = hide_in_print
     @collapse_on_mobile = collapse_on_mobile
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
 private
 
-  def default_classes
-    class_names(
-      "govuk-breadcrumbs",
-      "govuk-!-display-none-print" => hide_in_print,
-      "govuk-breadcrumbs--collapse-on-mobile" => collapse_on_mobile
-    ).split
+  def default_attributes
+    {
+      class: class_names(
+        "govuk-breadcrumbs",
+        "govuk-!-display-none-print" => hide_in_print,
+        "govuk-breadcrumbs--collapse-on-mobile" => collapse_on_mobile
+      ).split
+    }
   end
 
   def build_list(breadcrumbs)

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

@@ -5,16 +5,16 @@ class GovukComponent::CookieBannerComponent::MessageComponent < GovukComponent::
   renders_one :heading_html
 
   def initialize(heading_text: nil, text: nil, hidden: false, role: nil, classes: [], html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
     @heading_text = heading_text
     @text         = text
     @hidden       = hidden
     @role         = role
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
   def call
-    tag.div(class: classes, role: role, hidden: hidden, **html_attributes) do
+    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]) }
@@ -26,8 +26,8 @@ class GovukComponent::CookieBannerComponent::MessageComponent < GovukComponent::
 
 private
 
-  def default_classes
-    %w(govuk-cookie-banner__message govuk-width-container)
+  def default_attributes
+    { class: %w(govuk-cookie-banner__message govuk-width-container) }
   end
 
   def heading_element

data/app/components/govuk_component/cookie_banner_component.rb

@@ -5,23 +5,25 @@ module GovukComponent
     attr_accessor :aria_label, :hidden, :hide_in_print
 
     def initialize(aria_label: "Cookie banner", hidden: false, hide_in_print: true, classes: [], html_attributes: {})
-      super(classes: classes, html_attributes: html_attributes)
-
       @aria_label    = aria_label
       @hidden        = hidden
       @hide_in_print = hide_in_print
+
+      super(classes: classes, html_attributes: html_attributes)
     end
 
     def call
-      tag.div(class: classes, role: "region", aria: { label: aria_label }, data: { nosnippet: true }, hidden: hidden, **html_attributes) do
+      tag.div(role: "region", aria: { label: aria_label }, data: { nosnippet: true }, hidden: hidden, **html_attributes) do
         safe_join(messages)
       end
     end
 
   private
 
-    def default_classes
-      class_names("govuk-cookie-banner", "govuk-!-display-none-print" => hide_in_print).split
+    def default_attributes
+      {
+        class: class_names("govuk-cookie-banner", "govuk-!-display-none-print" => hide_in_print).split
+      }
     end
   end
 end

data/app/components/govuk_component/details_component.rb

@@ -4,16 +4,16 @@ class GovukComponent::DetailsComponent < GovukComponent::Base
   renders_one :summary_html
 
   def initialize(summary_text: nil, text: nil, classes: [], id: nil, open: nil, html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
     @summary_text = summary_text
     @text         = text
     @id           = id
     @open         = open
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
   def call
-    tag.details(class: classes, data: { module: "govuk-details" }, id: id, open: open, **html_attributes) do
+    tag.details(data: { module: "govuk-details" }, id: id, open: open, **html_attributes) do
       safe_join([summary, description])
     end
   end
@@ -36,7 +36,7 @@ private
     end
   end
 
-  def default_classes
-    %w(govuk-details)
+  def default_attributes
+    { class: %w(govuk-details) }
   end
 end

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

@@ -1,5 +1,5 @@
-<%= tag.footer(class: classes, role: 'contentinfo', **html_attributes) do %>
-  <%= tag.div(class: container_classes, **container_html_attributes) do %>
+<%= tag.footer(role: 'contentinfo', **html_attributes) do %>
+  <%= tag.div(**container_html_attributes) do %>
     <% if navigation.present? %>
       <div class="govuk-footer__navigation">
         <%= navigation %>

data/app/components/govuk_component/footer_component.rb

@@ -1,4 +1,6 @@
 class GovukComponent::FooterComponent < GovukComponent::Base
+  using HTMLAttributesUtils
+
   renders_one :meta_html
   renders_one :meta
   renders_one :navigation
@@ -19,8 +21,6 @@ class GovukComponent::FooterComponent < GovukComponent::Base
     meta_classes: [],
     meta_html_attributes: {}
   )
-    super(classes: classes, html_attributes: html_attributes)
-
     @meta_text                        = meta_text
     @meta_items                       = build_meta_links(meta_items)
     @meta_items_title                 = meta_items_title
@@ -30,16 +30,14 @@ class GovukComponent::FooterComponent < GovukComponent::Base
     @copyright                        = build_copyright(copyright_text, copyright_url)
     @custom_container_classes         = container_classes
     @custom_container_html_attributes = container_html_attributes
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
 private
 
-  def default_classes
-    %w(govuk-footer)
-  end
-
-  def container_classes
-    combine_classes(%w(govuk-width-container), custom_container_classes)
+  def default_attributes
+    { class: %w(govuk-footer) }
   end
 
   def meta_content
@@ -55,7 +53,13 @@ private
   end
 
   def container_html_attributes
-    @custom_container_html_attributes
+    # FIXME: remove when we deprecate classes
+    #
+    # 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(
+      @custom_container_html_attributes.merge(class: custom_container_classes)
+    )
   end
 
   def build_meta_links(links)

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

@@ -1,5 +1,5 @@
-<%= tag.header(class: classes, role: 'banner', data: { module: 'govuk-header' }, **html_attributes) do %>
-  <%= tag.div(class: container_classes) do %>
+<%= tag.header(role: 'banner', data: { module: 'govuk-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">
@@ -36,7 +36,7 @@
         <% end %>
 
         <% if navigation_items.any? %>
-          <%= tag.nav(class: navigation_classes, aria: { label: navigation_label }) do %>
+          <%= tag.nav(**navigation_html_attributes) do %>
             <%= tag.button("Menu", type: "button", class: %w(govuk-header__menu-button govuk-js-header-toggle), aria: { controls: "navigation", label: menu_button_label }) %>
             <ul id="navigation" class="govuk-header__navigation-list">
               <% navigation_items.each do |item| %>

data/app/components/govuk_component/header_component.rb

@@ -27,8 +27,6 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
                  service_url: '/',
                  container_classes: nil)
 
-    super(classes: classes, html_attributes: html_attributes)
-
     @logotype                  = logotype
     @crown                     = crown
     @crown_fallback_image_path = crown_fallback_image_path
@@ -39,20 +37,24 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
     @custom_navigation_classes = navigation_classes
     @navigation_label          = navigation_label
     @custom_container_classes  = container_classes
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
 private
 
-  def default_classes
-    %w(govuk-header)
+  def default_attributes
+    { class: %w(govuk-header) }
   end
 
-  def navigation_classes
-    combine_classes(%w(govuk-header__navigation), custom_navigation_classes)
+  def navigation_html_attributes
+    nc = %w(govuk-header__navigation).append(custom_navigation_classes).compact
+
+    { class: nc, aria: { label: navigation_label } }
   end
 
-  def container_classes
-    combine_classes(%w(govuk-header__container govuk-width-container), custom_container_classes)
+  def container_html_attributes
+    { class: %w(govuk-header__container govuk-width-container).append(custom_container_classes).compact }
   end
 
   def crown_fallback_image_attributes
@@ -67,21 +69,22 @@ private
     attr_reader :text, :href, :options, :active
 
     def initialize(text:, href: nil, options: {}, active: nil, classes: [], html_attributes: {})
-      super(classes: classes, html_attributes: html_attributes)
-
-      @text    = text
-      @href    = href
-      @options = options
-
+      @text            = text
+      @href            = href
+      @options         = options
       @active_override = active
+
+      super(classes: classes, html_attributes: html_attributes)
     end
 
     def before_render
-      @active = active?(@active_override)
+      if active?
+        html_attributes[:class] << active_class
+      end
     end
 
     def active_class
-      %w(govuk-header__navigation-item--active) if @active
+      %w(govuk-header__navigation-item--active) if active?
     end
 
     def link?
@@ -89,9 +92,9 @@ private
     end
 
     def call
-      tag.li(class: classes.append(active_class), **html_attributes) do
+      tag.li(**html_attributes) do
         if link?
-          link_to(text, href, **options, class: "govuk-header__link")
+          link_to(text, href, class: "govuk-header__link", **options)
         else
           text
         end
@@ -100,14 +103,14 @@ private
 
   private
 
-    def active?(active_override)
-      return current_page?(href) if active_override.nil?
+    def active?
+      return @active_override unless @active_override.nil?
 
-      active_override
+      current_page?(href)
     end
 
-    def default_classes
-      %w(govuk-header__navigation-item)
+    def default_attributes
+      { class: %w(govuk-header__navigation-item) }
     end
   end
 
@@ -115,9 +118,9 @@ private
     attr_reader :name
 
     def initialize(name: nil, html_attributes: {}, classes: [])
-      super(classes: classes, html_attributes: html_attributes)
-
       @name = name
+
+      super(classes: classes, html_attributes: html_attributes)
     end
 
     def render?
@@ -126,16 +129,16 @@ private
 
     def call
       if content.present?
-        tag.div(content, class: classes)
+        tag.div(content, **html_attributes)
       else
-        tag.span(name, class: classes)
+        tag.span(name, **html_attributes)
       end
     end
 
   private
 
-    def default_classes
-      %w(govuk-header__product-name)
+    def default_attributes
+      { class: %w(govuk-header__product-name) }
     end
   end
 end

data/app/components/govuk_component/inset_text_component.rb

@@ -2,14 +2,14 @@ class GovukComponent::InsetTextComponent < GovukComponent::Base
   attr_reader :text, :id
 
   def initialize(text: nil, id: nil, classes: [], html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
     @text = text
     @id   = id
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
   def call
-    tag.div(class: classes, id: id, **html_attributes) { inset_text_content }
+    tag.div(id: id, **html_attributes) { inset_text_content }
   end
 
   def render?
@@ -22,7 +22,7 @@ private
     content.presence || text
   end
 
-  def default_classes
-    %w(govuk-inset-text)
+  def default_attributes
+    { class: %w(govuk-inset-text) }
   end
 end

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

@@ -1,4 +1,4 @@
-<%= tag.div(class: classes, role: role, aria: { labelledby: title_id }, data: data_params, **html_attributes) do %>
+<%= tag.div(**html_attributes) do %>
   <div class="govuk-notification-banner__header">
     <%= content_tag(title_tag, class: "govuk-notification-banner__title", id: title_id) do %>
       <%= title_content %>

data/app/components/govuk_component/notification_banner_component.rb

@@ -5,8 +5,6 @@ class GovukComponent::NotificationBannerComponent < GovukComponent::Base
   renders_many :headings, "Heading"
 
   def initialize(title_text: nil, text: nil, role: nil, success: false, title_heading_level: 2, title_id: "govuk-notification-banner-title", disable_auto_focus: nil, classes: [], html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
     @title_text          = title_text
     @title_id            = title_id
     @text                = text
@@ -14,6 +12,8 @@ class GovukComponent::NotificationBannerComponent < GovukComponent::Base
     @role                = role || default_role
     @title_heading_level = title_heading_level
     @disable_auto_focus  = disable_auto_focus
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
   def render?
@@ -24,15 +24,15 @@ class GovukComponent::NotificationBannerComponent < GovukComponent::Base
     attr_reader :text, :link_href, :link_text
 
     def initialize(text: nil, link_text: nil, link_href: nil, classes: [], html_attributes: {})
-      super(classes: classes, html_attributes: html_attributes)
-
       @text      = text
       @link_text = link_text
       @link_href = link_href
+
+      super(classes: classes, html_attributes: html_attributes)
     end
 
     def call
-      tag.div(class: classes, **html_attributes) do
+      tag.div(**html_attributes) do
         if text.present?
           safe_join([text, link].compact, " ")
         else
@@ -45,27 +45,26 @@ class GovukComponent::NotificationBannerComponent < GovukComponent::Base
       link_to(link_text, link_href, class: 'govuk-notification-banner__link') if link_text.present? && link_href.present?
     end
 
-    def default_classes
-      %w(govuk-notification-banner__heading)
+    def default_attributes
+      { class: %w(govuk-notification-banner__heading) }
     end
   end
 
 private
 
-  def default_classes
-    %w(govuk-notification-banner)
-  end
-
-  def data_params
-    { "module" => "govuk-notification-banner", "disable-auto-focus" => disable_auto_focus }.compact
-  end
-
-  def classes
-    super.append(success_class).compact
-  end
-
-  def success_class
-    %(govuk-notification-banner--success) if success
+  def default_attributes
+    {
+      class: class_names(
+        "govuk-notification-banner",
+        "govuk-notification-banner--success" => success
+      ),
+      data: {
+        "module" => "govuk-notification-banner",
+        "disable-auto-focus" => disable_auto_focus
+      },
+      role: role,
+      aria: { labelledby: title_id },
+    }
   end
 
   def title_content

data/app/components/govuk_component/panel_component.rb

@@ -4,24 +4,24 @@ class GovukComponent::PanelComponent < GovukComponent::Base
   renders_one :title_html
 
   def initialize(title_text: nil, text: nil, heading_level: 1, id: nil, classes: [], html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-
     @heading_level = heading_level
     @title_text    = title_text
     @text          = text
     @id            = id
+
+    super(classes: classes, html_attributes: html_attributes)
   end
 
   def call
-    tag.div(id: id, class: classes, **html_attributes) do
+    tag.div(id: id, **html_attributes) do
       safe_join([panel_title, panel_body].compact)
     end
   end
 
 private
 
-  def default_classes
-    %w(govuk-panel govuk-panel--confirmation)
+  def default_attributes
+    { class: %w(govuk-panel govuk-panel--confirmation) }
   end
 
   def heading_tag

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

@@ -1,4 +1,4 @@
-<%= tag.div(class: classes, **html_attributes) do %>
+<%= tag.div(**html_attributes) do %>
   <p class="govuk-phase-banner__content">
     <%= render(phase_tag_component) %>
     <%= tag.span((content.presence || @text), class: "govuk-phase-banner__text") %>