govuk_publishing_components 47.0.0 → 49.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd401f42bccab58df5ab5fb8d73e8faca9662f68038087b3fe103f0fd383bd21
-  data.tar.gz: 14202a57ad52922b57252c5484bfe7540dbc0d1e2c83690881bf4aed17cc185b
+  metadata.gz: a20a02d184c76606028650720f22cae103d3ccce1f42ca2dbc595915c03b55d8
+  data.tar.gz: d6187aefe322704e5e2e1d1ec58efe5c6b99d933e038085167f84211974b633f
 SHA512:
-  metadata.gz: ef6d0b85a5a028746ca5df2d9dd301cae0401b22d3b9aac4bad2beeeba292ba128940284539b68c1ccc9d6ecd175ab9173bb4e7e49e411f2d252b3a53dda17e9
-  data.tar.gz: 9692404de6256b99bd839ab47e7dd26b52d3641cf51c503caa7d530a7c5a98cf826e47af9deb3f26701805ff8048e9ba2bb2824d69988388cce1ae3412bb294c
+  metadata.gz: 5f49a37d3583d584d57c42be30daad593649ce8f7c60a217d7cebbb8f4cbc95ee768bedd93c9ced0b7003d2530675970212da802dabe9ec5bc173657df035d21
+  data.tar.gz: d3ea15671ae94e6f723c89af1cbc9420c501fd890569df435762254decc3ba31b9b725d5532448edc6291e3fcd145fb95e9a5328dc4ec42a1a24800f98faac66

data/app/assets/javascripts/govuk_publishing_components/rum-custom-data.js

@@ -0,0 +1,18 @@
+(function () {
+  /* global LUX, performance */
+  if (typeof LUX === 'undefined') { return }
+
+  const navigationPerformance = performance.getEntriesByType('navigation')[0]
+  if (!navigationPerformance) { return }
+
+  // As per RFC 147[1], this adds in monitoring of the type of HTTP protocol that
+  // is used when a browser loads a page.
+  // [1]: https://github.com/alphagov/govuk-rfcs/pull/148
+  LUX.addData('http-protocol', navigationPerformance.nextHopProtocol)
+
+  const serverTiming = navigationPerformance.serverTiming
+  if (serverTiming) {
+    const cacheState = serverTiming.find(entry => ['cacheHit', 'cacheMiss'].includes(entry.name))
+    if (cacheState) { LUX.addData('cache', cacheState.name) }
+  }
+}())

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-measurer.js

@@ -157,40 +157,3 @@ if (
     LongTaskObserver.observe({ type: ["longtask"] });
   } catch (e) {}
 }
-
-// As per RFC 147[1], this adds in monitoring of the type of HTTP protocol that
-// is used when a browser loads a page.
-//
-// The User Timing API (aka window.performance) is used to record the data - to
-// avoid the use of this from breaking the JavaScript for the small number of
-// browsers that don't support it, it's been wrapped in a try/catch block plus a
-// couple of checks to prevent "is not defined" errors.
-//
-// Because the `nextHopProtocol` isn't immediately available - it seems to need
-// a request to be made before it's populated - we need to wait for the
-// `DOMContentReady` event before we can see what the HTTP version is.
-//
-// [1]: https://github.com/alphagov/govuk-rfcs/pull/148
-
-var measureHTTPProtocol = function () {
-  var getEntriesByType = performance.getEntriesByType('navigation')
-
-  if (typeof getEntriesByType !== 'undefined' && getEntriesByType.length > 0) {
-    var httpProtocol = getEntriesByType[0].nextHopProtocol
-    LUX.addData("http-protocol", httpProtocol)
-  }
-}
-
-try {
-  if (typeof performance !== 'undefined' && typeof performance.getEntriesByType !== 'undefined') {
-    if (document.readyState === 'complete') {
-      measureHTTPProtocol()
-    } else {
-      window.addEventListener('load', function() {
-        measureHTTPProtocol()
-      })
-    }
-  }
-} catch (e) {
-  console.error('Error in LUX reporting the HTTP protocol (%s):', window.location, e)
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss

@@ -1,6 +1,5 @@
 @import "govuk_publishing_components/individual_component_support";
 
-@import "govspeak/advisory";
 @import "govspeak/attachment";
 @import "govspeak/button";
 @import "govspeak/call-to-action";

data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb

@@ -13,8 +13,13 @@ This component uses the component wrapper helper. It accepts the following optio
 - `lang` - accepts a language attribute value
 - `open` - accepts an open attribute value (true or false)
 - `hidden` - accepts an empty string, 'hidden', or 'until-found'
-- `tabindex` - accepts an integer. The integer can also be passed as a string.
-- `dir` - accepts 'rtl', 'ltr', or 'auto'.
+- `tabindex` - accepts an integer. The integer can also be passed as a string
+- `dir` - accepts 'rtl', 'ltr', or 'auto'
+- `type` - accepts any valid type attribute e.g. 'button', 'submit', 'text'
+- `rel` - accepts any valid rel attribute e.g. 'nofollow'
+- `target` - accepts a valid target attribute e.g. '_blank'
+- `title` - accepts any string
+- `draggable` - accepts a draggable attribute value (\"true\" or \"false\")
       "
     end
   end

data/app/views/govuk_publishing_components/components/_attachment.html.erb

@@ -6,12 +6,13 @@
   hide_opendocument_metadata ||= false
   hide_order_copy_link ||= false
   attributes = []
-  data_attributes ||= {}
+  url_data_attributes ||= {}
   details_ga4_attributes ||= {}
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  container_class_names = %w[gem-c-attachment]
-  container_class_names << shared_helper.get_margin_bottom if local_assigns.key?(:margin_bottom)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-attachment")
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" })
   ga4_link = { 'event_name': 'navigation', 'type': 'attachment' }
 
   case attachment.type
@@ -55,16 +56,16 @@
     )
   end
 
-  data_attributes[:ga4_link] = ga4_link
+  url_data_attributes[:ga4_link] = ga4_link
 %>
-<%= tag.section class: class_names(container_class_names), data: { module: "ga4-link-tracker" } do %>
+<%= tag.section(**component_helper.all_attributes) do %>
   <%= tag.div class: "gem-c-attachment__thumbnail govuk-!-display-none-print" do %>
     <%= link_to attachment.url,
                 class: "govuk-link",
                 target: target,
                 tabindex: "-1",
                 "aria-hidden": true,
-                data: data_attributes do %>
+                data: url_data_attributes do %>
       <% if attachment.thumbnail_url.present? %>
         <% image_tag(attachment.thumbnail_url, alt: "", class: "gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--custom") %>
       <% elsif attachment.html? %>
@@ -88,7 +89,7 @@
       <%= link_to attachment.title, attachment.url,
       class: "govuk-link gem-c-attachment__link",
       target: target,
-      data: data_attributes %>
+      data: url_data_attributes %>
     <% end %>
 
     <% if attachment.reference.present? %>

data/app/views/govuk_publishing_components/components/_attachment_link.html.erb

@@ -3,7 +3,7 @@
 
   attachment = GovukPublishingComponents::Presenters::AttachmentHelper.new(attachment)
   target ||= nil
-  data_attributes ||= {}
+  url_data_attributes ||= {}
   attributes = []
   if attachment.content_type_name
     content = if attachment.content_type_abbr
@@ -30,11 +30,14 @@
       class: "gem-c-attachment-link__attribute",
     )
   end
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-attachment-link")
 %>
-<%= tag.span(class: "gem-c-attachment-link") do %>
+<%= tag.span(**component_helper.all_attributes) do %>
   <%= link_to(attachment.title, attachment.url,
               class: "govuk-link",
               target: target,
-              data: data_attributes) -%>
+              data: url_data_attributes) -%>
   <%= raw("(#{attributes.join(', ')})") if attributes.any? -%>
 <% end %>

data/app/views/govuk_publishing_components/components/_big_number.html.erb

@@ -1,22 +1,21 @@
 <%
   add_gem_component_stylesheet("big-number")
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   big_number_helper = GovukPublishingComponents::Presenters::BigNumberHelper.new(local_assigns)
 
   number ||= false
   label ||= nil
   href ||= nil
-  data_attributes ||= nil
-  aria ||= nil
-  classes = ["gem-c-big-number"]
-  classes << shared_helper.get_margin_bottom
+  nested_data_attributes ||= nil
 
   value_classes = big_number_helper.value_classes
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-big-number")
 %>
 <% if number %>
   <% big_number_value = capture do %>
-    <%= tag.span class: value_classes, data: href ? nil : data_attributes do %>
+    <%= tag.span class: value_classes, data: href ? nil : nested_data_attributes do %>
       <%
         # The below check is to account for small symbols awkwardly sitting above the baseline in our typeface and adjust them to sit at the baseline for the purpose of visual harmony
         # Currently the only small symbol used with big numbers are pluses so they are specifically applied in the below code
@@ -37,9 +36,9 @@
     <% end %>
   <% end %>
 
-  <%= tag.div class: classes, aria: aria do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <% unless href.nil? %>
-      <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %>
+      <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: nested_data_attributes %>
     <% else %>
       <%= big_number_value %>
     <% end %>

data/app/views/govuk_publishing_components/components/_contents_list.html.erb

@@ -30,7 +30,6 @@
   component_helper.add_class("gem-c-contents-list--custom-title") if title
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
   component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
-  component_helper.add_role("navigation")
 
   title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en")
 %>

data/app/views/govuk_publishing_components/components/_cross_service_header.html.erb

@@ -7,7 +7,7 @@
   service_navigation_aria_label ||= "Service menu"
 %>
 
-<header class="gem-c-cross-service-header" role="banner" data-module="cross-service-header">
+<header class="gem-c-cross-service-header" data-module="cross-service-header">
   <%= render "govuk_publishing_components/components/cross_service_header/one_login_header", {
     one_login_navigation_items: one_login_navigation_items,
   } %>

data/app/views/govuk_publishing_components/components/_intervention.html.erb

@@ -9,15 +9,10 @@
   hide ||= false
   new_tab ||= false
 
-  data_attributes = {}
   suggestion_data_attributes = {}
   dismiss_data_attributes = {}
   dismiss_link_data_attributes = {}
-  data_attributes[:module] = "intervention"
-  data_attributes["intervention-name"] = name
 
-  aria_attributes ||= {}
-  aria_attributes[:label] = 'Intervention'
 
   options = {
     name: name,
@@ -35,7 +30,6 @@
   disable_ga4 ||= false
   suggestion_data_attributes[:module] = "#{suggestion_data_attributes[:module]} ga4-link-tracker".strip unless disable_ga4
   suggestion_data_attributes[:ga4_link] = { event_name: "navigation", type: "intervention", section: suggestion_text, index_link: 1, index_total: 1 }.to_json unless disable_ga4
-  data_attributes[:ga4_intervention_banner] = "" unless disable_ga4 # Added to the parent element for the GA4 pageview object to use
 
   suggestion_tag_options = {
     class: "govuk-link gem-c-force-print-link-styles",
@@ -52,18 +46,20 @@
     suggestion_link_text = intervention_helper.accessible_text
   end
 
-  section_options = {
-    class: "gem-c-intervention",
-    role: "region", aria: aria_attributes,
-    data: data_attributes,
-  }
-  section_options.merge!({ hidden: true }) if hide
-
   dismiss_link_data_attributes[:module] = "#{dismiss_link_data_attributes[:module]} ga4-event-tracker".strip unless disable_ga4
   dismiss_link_data_attributes[:ga4_event] = { event_name: "select_content", type: "intervention", section: suggestion_text, action: 'closed' }.to_json unless disable_ga4
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-intervention")
+  component_helper.add_role("region")
+  component_helper.add_aria_attribute({ label: "Intervention"})
+  component_helper.add_data_attribute({ module: "intervention", intervention_name: name })
+  component_helper.add_data_attribute({ ga4_intervention_banner: "" }) unless disable_ga4 # Added to the parent element for the GA4 pageview object to use
+  component_helper.set_hidden("hidden") if hide
+
 %>
 <% if intervention_helper.show? %>
-  <%= tag.section **section_options do %>
+  <%= tag.section(**component_helper.all_attributes) do %>
     <p class="govuk-body">
       <%= tag.span suggestion_text, class: "gem-c-intervention__textwrapper" if suggestion_text %>
       <% if suggestion_link_text && suggestion_link_url %>

data/app/views/govuk_publishing_components/components/_layout_footer.html.erb

@@ -11,7 +11,6 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-footer govuk-footer")
   component_helper.add_class("gem-c-layout-footer--border") if with_border
-  component_helper.add_role("contentinfo")
   component_helper.add_data_attribute({ module: "ga4-link-tracker" })
 %>
 <%= tag.footer(**component_helper.all_attributes) do %>

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -65,6 +65,7 @@
     <title><%= title %></title>
 
     <%= javascript_include_tag "govuk_publishing_components/vendor/lux/lux-measurer", { async: true } %>
+    <%= javascript_include_tag "govuk_publishing_components/rum-custom-data", type: "module" %>
     <%= javascript_include_tag "govuk_publishing_components/rum-loader",
       {
         async: true,

data/app/views/govuk_publishing_components/components/_layout_header.html.erb

@@ -15,7 +15,6 @@
   component_helper.add_class("gem-c-layout-header govuk-header")
   component_helper.add_class("gem-c-layout-header--#{environment}") if environment
   component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border
-  component_helper.add_role("banner")
   component_helper.add_data_attribute({ module: "govuk-header" })
 
 %>

data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -35,9 +35,6 @@
   search_toggle_button_classes << "gem-c-layout-super-navigation-header__search-toggle-button--blue-background" if blue_background
   search_toggle_button_classes << "gem-c-layout-super-navigation-header__search-toggle-button--large-navbar" if large_navbar
 
-  layout_super_navigation_header_classes = %w(gem-c-layout-super-navigation-header)
-  layout_super_navigation_header_classes << "gem-c-layout-super-navigation-header--blue-background" if blue_background
-
   item_link_classes = %w(gem-c-layout-super-navigation-header__navigation-item-link)
   item_link_classes << "gem-c-layout-super-navigation-header__navigation-item-link--blue-background" if blue_background
   item_link_classes << "gem-c-layout-super-navigation-header__navigation-item-link--large-navbar" if large_navbar
@@ -64,16 +61,13 @@
   dropdown_menu_classes << "gem-c-layout-super-navigation-header__navigation-dropdown-menu--large-navbar" if large_navbar
 
   absolute_links_helper = GovukPublishingComponents::Presenters::AbsoluteLinksHelper.new()
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-layout-super-navigation-header")
+  component_helper.add_class("gem-c-layout-super-navigation-header--blue-background") if blue_background
+  component_helper.add_data_attribute({ module: "ga4-event-tracker ga4-link-tracker", ga4_expandable: "" })
 %>
-<%= content_tag("header",
-  {
-    role: "banner",
-    class: layout_super_navigation_header_classes,
-    data: {
-      module: "ga4-event-tracker ga4-link-tracker",
-      "ga4-expandable": '',
-    }
-}) do %>
+<%= tag.header(**component_helper.all_attributes) do %>
   <div class="gem-c-layout-super-navigation-header__container govuk-clearfix">
     <div class="govuk-width-container">
       <%= content_tag(:div, {
@@ -317,7 +311,7 @@
                   label: "Site-wide",
                 }
               ) do %>
-                <% search_options = {
+                <%= render "govuk_publishing_components/components/search_with_autocomplete", {
                   name: "keywords",
                   inline_label: false,
                   label_size: "m",
@@ -326,15 +320,9 @@
                   size: "large",
                   margin_bottom: 0,
                   disable_corrections: true,
+                  source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join,
+                  source_key: "suggestions",
                 } %>
-                <% if ENV["GOVUK_DISABLE_SEARCH_AUTOCOMPLETE"] %>
-                  <%= render "govuk_publishing_components/components/search", search_options %>
-                <% else %>
-                  <%= render "govuk_publishing_components/components/search_with_autocomplete", search_options.merge({
-                    source_url: [Plek.new.website_root, "/api/search/autocomplete.json"].join,
-                    source_key: "suggestions",
-                  }) %>
-                <% end %>
               <% end %>
             </div>
           </div>

data/app/views/govuk_publishing_components/components/_list.html.erb

@@ -1,20 +1,14 @@
 <%
-  aria_label ||= nil
   extra_spacing ||= nil
-  id ||= nil
   items ||= []
   list_type ||= "unordered"
   visible_counters ||= nil
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
-  classes = %w[gem-c-list govuk-list]
-  classes << "govuk-list--bullet" if visible_counters and list_type === "unordered"
-  classes << "govuk-list--number" if visible_counters and list_type === "number"
-  classes << "govuk-list--spaced" if extra_spacing
-  # Setting the  `margin_bottom` to 4 is the same as the default margin - so we
-  # can omit the override class. To do this we leave out `4` from the array:
-  classes << shared_helper.get_margin_bottom if [0,1,2,3,5,6,7,8,9].include?(local_assigns[:margin_bottom])
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-list govuk-list")
+  component_helper.add_class("govuk-list--bullet") if visible_counters and list_type === "unordered"
+  component_helper.add_class("govuk-list--number") if visible_counters and list_type === "number"
+  component_helper.add_class("govuk-list--spaced") if extra_spacing
 
   # Default list type is unordered list.
   list_tag = "ul"
@@ -23,7 +17,7 @@
   list_tag = "ol" if list_type === "number"
 %>
 <% if items.any? %>
-  <%= content_tag list_tag, class: classes, id: id, "aria-label": aria_label do %>
+  <%= content_tag list_tag, **component_helper.all_attributes do %>
     <% items.each do |item| %>
       <li><%= raw(item) %></li>
     <% end %>

data/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb

@@ -3,15 +3,19 @@
 
   id ||= "modal-dialogue-#{SecureRandom.hex(4)}"
   wide ||= false
-  data_attributes = {}
   aria_label ||= nil
   dialog_classes = ["gem-c-modal-dialogue__box"]
   dialog_classes << "gem-c-modal-dialogue__box--wide" if wide
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-modal-dialogue")
+  component_helper.add_data_attribute({ module: "modal-dialogue" })
+  component_helper.set_id(id)
 %>
 
-<%= tag.div class: "gem-c-modal-dialogue", data: { module: "modal-dialogue" }, id: id do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <%= tag.div class: "gem-c-modal-dialogue__overlay" %>
-  <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %>
+  <%= tag.dialog class: dialog_classes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %>
     <%= tag.div class: "gem-c-modal-dialogue__header" do %>
       <%= render "govuk_publishing_components/components/govuk_logo/govuk_logo_crown_only", {
         classes: %w[gem-c-modal-dialogue__logotype-crown],

data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb

@@ -4,7 +4,6 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-pagination govuk-pagination--block")
-  component_helper.add_role("navigation")
   component_helper.add_aria_attribute({ label: t("components.previous_and_next_navigation.pagination") })
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
 

data/app/views/govuk_publishing_components/components/_search.html.erb

@@ -7,7 +7,7 @@
   aria_controls ||= nil
   button_text ||= t("components.search_box.search_button")
   correction_value = "off" if local_assigns[:disable_corrections]
-  id ||= "search-main-" + SecureRandom.hex(4)
+  label_id ||= "search-main-" + SecureRandom.hex(4)
   wrap_label_in_a_heading ||= false
   label_margin_bottom ||= nil
   label_size ||= nil
@@ -19,21 +19,17 @@
   size ||= ""
   value ||= ""
 
-  data_attributes ||= {}
-
-  classes = %w[gem-c-search govuk-!-display-none-print]
-  classes << shared_helper.get_margin_top
-  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
-  classes << "gem-c-search--large" if size == "large"
-  classes << "gem-c-search--large-on-mobile" if size == "large-mobile"
-  classes << "gem-c-search--homepage" if homepage
-  classes << "gem-c-search--no-border" if no_border
-  if local_assigns[:on_govuk_blue].eql?(true)
-    classes << "gem-c-search--on-govuk-blue"
-  else
-    classes << "gem-c-search--on-white"
-  end
-  classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label) or local_assigns.include?(:label_size)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_data_attribute({ module: "gem-toggle-input-class-on-focus" })
+  component_helper.add_class("gem-c-search govuk-!-display-none-print")
+  component_helper.add_class(shared_helper.get_margin_top)
+  component_helper.add_class("gem-c-search--large") if size == "large"
+  component_helper.add_class("gem-c-search--large-on-mobile") if size == "large-mobile"
+  component_helper.add_class("gem-c-search--homepage") if homepage
+  component_helper.add_class("gem-c-search--no-border") if no_border
+  component_helper.add_class("gem-c-search--on-govuk-blue") if local_assigns[:on_govuk_blue].eql?(true)
+  component_helper.add_class("gem-c-search--on-white") unless local_assigns[:on_govuk_blue].eql?(true)
+  component_helper.add_class("gem-c-search--separate-label") if local_assigns.include?(:inline_label) or local_assigns.include?(:label_size)
 
   label_classes = []
   if (shared_helper.valid_heading_size?(label_size))
@@ -46,12 +42,12 @@
   label_classes << label_custom_class if label_custom_class
 
   tag_label = capture do
-    tag.label(for: id, class: label_classes) do
+    tag.label(for: label_id, class: label_classes) do
       label_text
     end
   end
 %>
-<div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
+<%= tag.div(**component_helper.all_attributes) do %>
   <% if wrap_label_in_a_heading %>
     <%= content_tag(shared_helper.get_heading_level, class: "govuk-!-margin-0") do %>
       <%= tag_label %>
@@ -67,7 +63,7 @@
         },
         enterkeyhint: "search",
         class: "gem-c-search__item gem-c-search__input js-class-toggle",
-        id: id,
+        id: label_id,
         name: name,
         title: t("components.search_box.input_title"),
         type: "search",
@@ -77,10 +73,10 @@
       ) %>
     </div>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
-      <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes, enterkeyhint: "search" do %>
+      <%= tag.button class: "gem-c-search__submit", type: "submit", enterkeyhint: "search" do %>
         <%= button_text %>
         <%= render "govuk_publishing_components/components/search/search_icon" %>
       <% end %>
     </div>
   </div>
-</div>
+<% end %>

data/app/views/govuk_publishing_components/components/_secondary_navigation.html.erb

@@ -8,7 +8,6 @@
   component_helper.add_aria_attribute({label: aria_label})
   component_helper.add_class('gem-c-secondary-navigation')
   component_helper.set_id(id)
-  component_helper.add_role("navigation")
 %>
 
 <% if items.any? %>

data/app/views/govuk_publishing_components/components/_subscription_links.html.erb

@@ -5,17 +5,11 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 
   sl_helper = GovukPublishingComponents::Presenters::SubscriptionLinksHelper.new(local_assigns)
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  local_assigns[:margin_bottom] ||= 0
-  local_assigns[:margin_bottom] = 0 if local_assigns[:margin_bottom] > 9
-
-  css_classes = %w( gem-c-subscription-links govuk-!-display-none-print )
-  css_classes << shared_helper.get_margin_bottom unless local_assigns[:margin_bottom] == 0
-  css_classes << brand_helper.brand_class
-  css_classes << "gem-c-subscription-links--with-feed-box" if sl_helper.feed_link_box_value
-
-  data = {"module": "gem-toggle"} if sl_helper.feed_link_box_value
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-subscription-links govuk-!-display-none-print #{brand_helper.brand_class}")
+  component_helper.add_class("gem-c-subscription-links--with-feed-box") if sl_helper.feed_link_box_value
+  component_helper.add_data_attribute({ module: "gem-toggle" }) if sl_helper.feed_link_box_value
 
   hide_heading ||= false
 
@@ -23,7 +17,7 @@
   feed_link_text_locale = local_assigns[:feed_link_text_locale].presence
 %>
 <% if sl_helper.component_data_is_valid? %>
-  <%= tag.section class: css_classes, data: data do %>
+  <%= tag.section(**component_helper.all_attributes) do %>
     <% unless hide_heading %>
       <h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("components.subscription_links.subscriptions") %></h2>
     <% end %>

data/app/views/govuk_publishing_components/components/_success_alert.html.erb

@@ -3,20 +3,16 @@
 
   description ||= nil
   title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(gem-c-success-alert govuk-notification-banner govuk-notification-banner--success)
-  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-success-alert govuk-notification-banner govuk-notification-banner--success")
+  component_helper.add_role("alert")
+  component_helper.set_tabindex(-1)
+  component_helper.add_aria_attribute({ labelledby: title_id })
+  component_helper.add_data_attribute({ module: "initial-focus" })
 %>
 
-<%= tag.div class: classes,
-  role: "alert",
-  tabindex: "-1",
-  aria: {
-    labelledby: title_id,
-  },
-  data: {
-    module: "initial-focus",
-  } do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <div class="govuk-notification-banner__header">
     <%= tag.h2 t("components.success_alert.success"), class: "govuk-notification-banner__title", id: title_id %>
   </div>

data/app/views/govuk_publishing_components/components/_summary_card.html.erb

@@ -3,12 +3,14 @@
 
   id ||= nil
   title ||= nil
-  data_attributes ||= {}
   summary_card_actions ||= []
   rows ||=[]
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-summary-card")
 %>
 <% if title || rows.any? %>
-  <%= tag.div class: "gem-c-summary-card", id: id, data: data_attributes do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <%= tag.div class: "govuk-summary-card" do %>
       <%= tag.div class: "govuk-summary-card__title-wrapper" do %>
         <%= tag.h2 class: "govuk-summary-card__title" do %>

data/app/views/govuk_publishing_components/components/_summary_list.html.erb

@@ -5,7 +5,6 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   heading_size = "m" unless shared_helper.valid_heading_size?(heading_size)
 
-  id ||= nil
   title ||= nil
   borderless ||= false
   edit ||= {}
@@ -13,9 +12,14 @@
   items ||= []
   block ||= yield
   wide_title ||= false
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-summary-list")
+  component_helper.add_class("govuk-summary-list--no-border") if borderless
+  component_helper.add_class("gem-c-summary-list--wide-title") if wide_title
 %>
 <% if title || items.any? %>
-  <%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless} #{"gem-c-summary-list--wide-title" if wide_title}", id: id do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <% if title %>
       <%= content_tag(shared_helper.get_heading_level, title, class: "govuk-heading-#{heading_size} gem-c-summary-list__group-title") %>