govuk_publishing_components 46.4.0 → 48.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7972dc1e95cf1c1175ee81653f3b298d0d2d930b62bbd8c1035ba110fbbdcb72
-  data.tar.gz: f55e702ced40190a656f098fc3f192738b1478cf989a0b532051a778a308126b
+  metadata.gz: 36a9c949e5b0818fd9a88c6e3d391589f2856b2354b061526323ee0da268663b
+  data.tar.gz: 9e50cfbc67ab2a7ad2be57cc08de07d962555de601f760a1737f99100fb20608
 SHA512:
-  metadata.gz: a588ba7241dc601438da646c2fc3ca9f5ddc93750cdaebac5e913f9a006acb8b13f61d7fe28b30936b41ba5268817876de7c235e4016f50790d5732d313a3939
-  data.tar.gz: d4f317981b263f21b71a8768600f6582c4a0592c22721f858a3e712f6756dca05c86e0cac787872043703df463456a8c7fed95b63cbc0377657dbdbbe35f960e
+  metadata.gz: d43bd8d3c8c0f58404798658c83e7b5349776b123dd1f3be9f9b380a8124ee510fce6d36ffbc634f33cdd0f4c5f7a4be2002a6c1225869e5289ab9f1c9c65183
+  data.tar.gz: a26a44f9bc7ba5b824d9f145662675935cf329f8cb98cfd076f217b18b1e2a557aff6df08b8bc03dc3c84f1d0b90330eb26c211569a3d99d3836bb765b4e5fe2

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/_all_components.scss

@@ -19,7 +19,6 @@
 @import "components/button";
 @import "components/cards";
 @import "components/character-count";
-@import "components/chat-entry";
 @import "components/checkboxes";
 @import "components/contents-list";
 @import "components/contextual-guidance";

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/assets/stylesheets/govuk_publishing_components/components/_heading.scss

@@ -1,6 +1,7 @@
 @import "govuk_publishing_components/individual_component_support";
 
-.gem-c-heading {
+.gem-c-heading,
+.gem-c-heading__text {
   margin: 0;
 }
 
@@ -9,18 +10,6 @@
   @include govuk-font(27, $weight: bold);
 }
 
-// special case for publications and consultations pages
-// separated to allow normalisation of the component for wider use
-.gem-c-heading--mobile-top-margin {
-  margin-top: govuk-spacing(6);
-  margin-bottom: govuk-spacing(3);
-
-  @include govuk-media-query($from: tablet) {
-    margin-top: 0;
-    margin-bottom: govuk-spacing(6);
-  }
-}
-
 .gem-c-heading--padding {
   padding: govuk-spacing(3) 0;
 }
@@ -43,7 +32,10 @@
 }
 
 .gem-c-heading--inverse {
-  color: govuk-colour("white");
+  .gem-c-heading__context,
+  .gem-c-heading__text {
+    color: govuk-colour("white");
+  }
 }
 
 // stylelint-disable declaration-no-important

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -82,6 +82,10 @@
   }
 }
 
+.gem-c-organisation-logo__link-hide-underline:link:not(:hover) {
+  text-decoration: none;
+}
+
 .gem-c-organisation-logo--inverse {
   .gem-c-organisation-logo__container {
     border-color: govuk-colour("white");

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -9,8 +9,8 @@ $highlight-answer-color: govuk-colour("white");
     background-color: $highlight-answer-bg-color;
     color: $highlight-answer-color;
     text-align: center;
-    padding: 1.75em .75em 1.25em;
-    margin: 0 0 1em;
+    padding: govuk-spacing(5) govuk-spacing(2) govuk-spacing(4);
+    margin: 0 0 govuk-spacing(2);
 
     p {
       color: $highlight-answer-color;
@@ -18,7 +18,7 @@ $highlight-answer-color: govuk-colour("white");
 
       em {
         display: block;
-        padding-top: .1em;
+        padding-top: govuk-spacing(2);
         color: $highlight-answer-color;
         @include govuk-font($size: 80, $weight: bold);
       }
@@ -29,7 +29,7 @@ $highlight-answer-color: govuk-colour("white");
     }
 
     @include govuk-media-query($until: tablet) {
-      margin: 0 0 1em;
+      margin: 0 0 govuk-spacing(2);
       @include govuk-font($size: 48);
 
       p {

data/app/models/govuk_publishing_components/component_doc.rb

@@ -83,7 +83,7 @@ module GovukPublishingComponents
     end
 
     def github_search_url
-      params = { q: "org:alphagov components/components/#{id}", type: "Code" }
+      params = { q: "org:alphagov #{partial_path}", type: "Code" }
       "https://github.com/search?#{params.to_query}"
     end
 

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

@@ -3,21 +3,36 @@
 
   brand ||= false
   lang = local_assigns[:lang].presence
+  context ||= false
+  context_locale ||= false
+  context_inside ||= false
 
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   heading_helper = GovukPublishingComponents::Presenters::HeadingHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
 
-  classes = %w(gem-c-heading)
-  classes << heading_helper.classes
-  classes << brand_helper.brand_class
-  classes << brand_helper.border_color_class
-
-  component_helper.add_class(classes.join(" "))
+  component_helper.add_class("gem-c-heading")
+  component_helper.add_class(heading_helper.classes)
+  component_helper.add_class(brand_helper.brand_class)
+  component_helper.add_class(brand_helper.border_color_class)
   component_helper.set_id(heading_helper.id)
-  element = shared_helper.get_heading_level
 %>
-<%= content_tag(element, component_helper.all_attributes) do %>
-  <%= text %>
+<% context_block = capture do %>
+  <span class="govuk-caption-xl gem-c-heading__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
+    <%= context %>
+  </span>
+<% end %>
+
+<%= tag.div(**component_helper.all_attributes) do %>
+  <% if context && !context_inside %>
+    <%= context_block %>
+  <% end %>
+
+  <%= content_tag(shared_helper.get_heading_level, class: heading_helper.heading_classes) do %>
+    <% if context && context_inside %>
+      <%= context_block %>
+    <% end %>
+    <%= text %>
+  <% end %>
 <% end %>

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_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_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,14 @@
   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_role("banner")
+  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 +312,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 +321,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/_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/_skip_link.html.erb

@@ -3,5 +3,10 @@
 
   href ||= '#main-content'
   text ||= t('components.skip_link.text')
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-skip-link govuk-skip-link govuk-!-display-none-print")
+  component_helper.add_data_attribute({ module: "govuk-skip-link" })
+
 %>
-<%= link_to(text, href, class: "gem-c-skip-link govuk-skip-link govuk-!-display-none-print", data: { module: "govuk-skip-link" }) %>
+<%= link_to(text, href, **component_helper.all_attributes) %>

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

@@ -10,10 +10,11 @@
   ]
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
-  data = {}
-  data[:module] = "ga4-link-tracker" unless disable_ga4
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-step-nav-header")
 
   unless disable_ga4
+    component_helper.add_data_attribute({ module: "ga4-link-tracker" })
     ga4_data = {
       event_name: "navigation",
       type: "super breadcrumb",
@@ -21,17 +22,13 @@
       index_total: "1",
     }.to_json
   end
-
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w[gem-c-step-nav-header]
-  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <% if title %>
   <script type="application/ld+json">
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <%= tag.div(class: classes, data: data) do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"

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

@@ -4,13 +4,14 @@
   links ||= []
   pretitle ||= t("components.step_by_step_nav_related.part_of")
   always_display_as_list ||= false
-  classes = %w(gem-c-step-nav-related)
-  classes << "gem-c-step-nav-related--singular" if links.length == 1
-  data = {}
-  data[:module] = "ga4-link-tracker" unless disable_ga4
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-step-nav-related")
+  component_helper.add_class("gem-c-step-nav-related--singular") if links.length == 1
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
 %>
 <% if links.any? %>
-  <%= tag.div(class: classes, data: data) do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>

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") %>