govuk_publishing_components 46.3.1 → 47.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 36483f22d5d78ac563f819c7638cd059053b38a5df71a48b6ae6d8eef6e21a2c
-  data.tar.gz: 60063513c4f84e2107e77a4b670f2dabcd95efc6650a72dda3097deb1caf4ed9
+  metadata.gz: fd401f42bccab58df5ab5fb8d73e8faca9662f68038087b3fe103f0fd383bd21
+  data.tar.gz: 14202a57ad52922b57252c5484bfe7540dbc0d1e2c83690881bf4aed17cc185b
 SHA512:
-  metadata.gz: c9932de97294ccc4e51ce64fc07cfffd11b39d882f0ed69690e0f0e19a4e7fb57af59b10932a80c8a7bd0d23a87abc8486e7f072ab7fc34c0da25f8f11b5d26a
-  data.tar.gz: 2ded4ab1c925b4af9171cbe11412e38b9fc56dff8de8428254413115b06d370a8d29621c62c0e8d76e603c82c4042c229e41b27962d52076c8ddfe8fc9c23336
+  metadata.gz: ef6d0b85a5a028746ca5df2d9dd301cae0401b22d3b9aac4bad2beeeba292ba128940284539b68c1ccc9d6ecd175ab9173bb4e7e49e411f2d252b3a53dda17e9
+  data.tar.gz: 9692404de6256b99bd839ab47e7dd26b52d3641cf51c503caa7d530a7c5a98cf826e47af9deb3f26701805ff8048e9ba2bb2824d69988388cce1ae3412bb294c

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -340,6 +340,11 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
 
         if (isSearchResult) {
           var searchQuery = window.GOVUK.analyticsGa4.core.trackFunctions.standardiseSearchTerm(element.getAttribute('data-ga4-search-query'))
+
+          // Limit tracked search term to 500 characters
+          if (searchQuery) {
+            searchQuery = searchQuery.substring(0, 500)
+          }
           var variant = element.getAttribute('data-ga4-ecommerce-variant')
           DEFAULT_LIST_TITLE = 'Site search results'
         }

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -66,7 +66,8 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             search_term: this.getSearchTerm(),
             tool_name: this.getToolName(),
             spelling_suggestion: this.getMetaContent('spelling-suggestion'),
-            discovery_engine_attribution_token: this.getMetaContent('discovery-engine-attribution-token')
+            discovery_engine_attribution_token: this.getMetaContent('discovery-engine-attribution-token'),
+            canonical_url: this.getCanonicalHref()
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)
@@ -79,6 +80,14 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       }
     },
 
+    getCanonicalHref: function () {
+      var link = document.querySelector('link[rel=canonical]')
+
+      if (link) {
+        return link.href
+      }
+    },
+
     getLocation: function () {
       // We don't want to remove dates on search pages.
       return this.PIIRemover.stripPIIWithOverride(this.stripGaParam(document.location.href), this.stripDates, true)

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/_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/models/govuk_publishing_components/component_wrapper_helper_options.rb

@@ -8,6 +8,7 @@ This component uses the component wrapper helper. It accepts the following optio
 - `data_attributes` - accepts a hash of data attributes
 - `aria` - accepts a hash of aria attributes
 - `classes` - accepts a space separated string of classes, these should not be used for styling and must be prefixed with `js-`
+- `margin_bottom` - accepts a number from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale) (defaults to no margin)
 - `role` - accepts a space separated string of roles
 - `lang` - accepts a language attribute value
 - `open` - accepts an open attribute value (true or false)

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -50,7 +50,7 @@
           href: "#other-examples",
           text: "Other examples",
           items: other_examples_links
-        } if @component_doc.other_examples.any?),
+        } if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper?),
       ].compact
     %>
     <%= render "govuk_publishing_components/components/contents_list", {
@@ -92,7 +92,7 @@
     </div>
   <% end %>
 
-  <% if @component_doc.other_examples.any? %>
+  <% if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper? %>
     <div class="examples">
       <h2 class="component-doc-h2" id="other-examples">Other examples</h2>
 

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

@@ -13,8 +13,6 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.set_id(id)
   component_helper.add_class("gem-c-accordion govuk-accordion")
-  component_helper.add_class(shared_helper.get_margin_bottom)
-
   component_helper.add_data_attribute({ module: "govuk-accordion gem-accordion" })
   component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless disable_ga4
   component_helper.add_data_attribute({ ga4_expandable: "" }) unless disable_ga4

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

@@ -2,8 +2,6 @@
   add_gem_component_stylesheet("action-link")
 
   local_assigns[:margin_bottom] ||= 0
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
   text ||= false
   nowrap_text ||= false
   href ||= false
@@ -26,7 +24,6 @@
   css_classes << "gem-c-action-link--simple-light" if simple_light
   css_classes << "gem-c-action-link--with-subtext" if subtext
   css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
-  css_classes << shared_helper.get_margin_bottom
 
   link_classes = %w(govuk-link gem-c-action-link__link gem-c-force-print-link-styles)
   link_classes << "govuk-link--inverse" if inverse

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

@@ -9,7 +9,6 @@
   local_assigns[:aria] ||= {}
   local_assigns[:margin_bottom] ||= 4
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 
@@ -29,7 +28,6 @@
   component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}")
   component_helper.add_class("gem-c-contents-list--alternative-line-style") if alternative_line_style
   component_helper.add_class("gem-c-contents-list--custom-title") if title
-  component_helper.add_class(shared_helper.get_margin_bottom)
   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")

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

@@ -10,9 +10,7 @@
   component_helper.set_id(id)
   component_helper.add_class("gem-c-contextual-guidance")
   component_helper.add_data_attribute({ module: "contextual-guidance" })
-
 %>
-
 <%= tag.div(**component_helper.all_attributes) do %>
   <%= tag.div class: "govuk-grid-row" do %>
     <%= tag.div class: "govuk-grid-column-two-thirds" do %>

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

@@ -4,7 +4,6 @@
   disable_ga4 ||= false
   request.query_parameters[:disable_ga4] = disable_ga4
   navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request)
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   show_ukraine_cta = navigation.show_ukraine_cta?
   ga4_tracking_counts = OpenStruct.new(index_section_count: 0)
   ga4_tracking_counts.index_section_count = 1 if show_ukraine_cta

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

@@ -1,14 +1,12 @@
 <%
   add_gem_component_stylesheet("details")
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   open ||= nil
   disable_ga4 ||= false
   @ga4 ||= OpenStruct.new(index_section: 0) unless disable_ga4
   @ga4[:index_section] += 1 unless disable_ga4
   ga4_attributes ||= {}
-
-  margin_bottom ||= 3
+  local_assigns[:margin_bottom] ||= 3
 
   unless disable_ga4
     ga4_event = {
@@ -25,7 +23,6 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-details govuk-details")
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless disable_ga4
   component_helper.add_data_attribute({ ga4_event: ga4_event }) unless disable_ga4
   component_helper.set_open(open)

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

@@ -2,7 +2,6 @@
   add_gem_component_stylesheet("document-list")
 
   local_assigns[:margin_bottom] ||= 5
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   items ||= []
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -10,7 +9,6 @@
   component_helper.add_class("gem-c-document-list--no-top-border") if local_assigns[:remove_top_border]
   component_helper.add_class("gem-c-document-list--no-top-border-first-child") if local_assigns[:remove_top_border_from_first_child]
   component_helper.add_class("gem-c-document-list--equal-item-spacing") if local_assigns[:equal_item_spacing]
-  component_helper.add_class(shared_helper.get_margin_bottom)
 
   extra_link_classes = "govuk-link--no-underline" if local_assigns[:remove_underline]
   title_with_context_class = " gem-c-document-list__item-title--context"

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

@@ -6,13 +6,11 @@
   direction_class = "gem-c-govspeak--direction-#{direction}" if local_assigns.include?(:direction)
   disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-govspeak govuk-govspeak")
   component_helper.add_class(direction_class) if direction_class
   component_helper.add_class("js-disable-youtube") if disable_youtube_expansions
   component_helper.add_class("gem-c-govspeak--inverse") if inverse
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_data_attribute({ module: "govspeak" })
 %>
 <%= tag.div(**component_helper.all_attributes) do %>

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

@@ -3,22 +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
-  classes << shared_helper.get_margin_bottom if [*0..9].include?(local_assigns[:margin_bottom])
-
-  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/_hint.html.erb

@@ -4,14 +4,11 @@
   local_assigns[:id] ||= "hint-#{SecureRandom.hex(4)}"
   is_radio_label_hint ||= false
   right_to_left ||= false
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-hint govuk-hint")
   component_helper.add_class("govuk-radios__hint") if is_radio_label_hint
-  component_helper.add_class(shared_helper.get_margin_bottom) if [*0..9].include?(local_assigns[:margin_bottom])
 %>
-
 <%= tag.div(**component_helper.all_attributes, dir: right_to_left ? "rtl" : nil) do %>
   <%= text %>
 <% end %>

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

@@ -3,17 +3,15 @@
 
   id ||= "inset-text-#{SecureRandom.hex(4)}"
   margin_top ||= 6
-  margin_bottom ||= 6
+  local_assigns[:margin_bottom] ||= 6
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({
     margin_top: margin_top,
-    margin_bottom: margin_bottom
   })
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-inset-text govuk-inset-text gem-c-force-print-link-styles-within")
   component_helper.add_class(shared_helper.get_margin_top)
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.set_id(id)
 %>
 <%= tag.div(**component_helper.all_attributes) do %>

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

@@ -3,12 +3,10 @@
 
   text ||= ""
   inverse ||= false
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-lead-paragraph")
   component_helper.add_class("gem-c-lead-paragraph--inverse") if inverse
-  component_helper.add_class(shared_helper.get_margin_bottom) if [*0..9].include?(local_assigns[:margin_bottom])
 %>
 <% if text.present? %>
   <%= tag.p(**component_helper.all_attributes) do %>

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

@@ -16,8 +16,6 @@
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-metadata")
   component_helper.add_class("direction-#{direction}") if local_assigns.include?(:direction)
@@ -27,7 +25,6 @@
     component_helper.add_class("gem-c-metadata--inverse-padded") unless inverse_compress
   end
 
-  component_helper.add_class(shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
   component_helper.add_data_attribute({ module: "metadata" })
 
   disable_ga4 ||= false

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

@@ -15,10 +15,8 @@
   show_banner_title ||= false
   heading_level = show_banner_title ? "h3" : "h2"
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-notification-banner gem-c-notice")
-  component_helper.add_class(shared_helper.get_margin_bottom)
 
   component_helper.add_aria_attribute({ label: "Notice" })
   component_helper.add_aria_attribute({ live: "polite" }) if aria_live

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

@@ -2,7 +2,7 @@
   add_gem_component_stylesheet("password-input")
 
   label_text ||= t("components.password_input.label")
-
+  local_assigns[:margin_bottom] ||= 3
   error_text ||= nil
   error_text_prefix ||= t("components.password_input.error_text_prefix")
 
@@ -15,7 +15,6 @@
 
   name ||= "password"
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_data_attribute({
     module: "govuk-password-input",
@@ -30,7 +29,6 @@
   component_helper.add_class('govuk-form-group--error') if error_text
   component_helper.add_class('govuk-password-input')
   component_helper.add_class('gem-c-password-input')
-  component_helper.add_class(shared_helper.get_margin_bottom)
 
   uid = SecureRandom.hex(4)
 

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

@@ -31,7 +31,6 @@
   hint ||= nil
   error_message ||= nil
   error_items ||= []
-  margin_bottom = margin_bottom ||= 6
 
   has_error = error_message || error_items.any?
   hint_id = "hint-#{SecureRandom.hex(4)}" if hint
@@ -40,7 +39,6 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-form-group")
   component_helper.add_class("govuk-form-group--error") if has_error
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.set_id(id)
 
   radio_classes = %w(govuk-radios)

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

@@ -12,7 +12,6 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-signup-link govuk-!-display-none-print")
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_class("gem-c-signup-link--link-only") unless heading
   component_helper.add_class("gem-c-signup-link--with-background-and-border") if background
 %>

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

@@ -1,18 +1,17 @@
 <%
   add_gem_component_stylesheet("single-page-notification-button")
 
+  local_assigns[:margin_bottom] ||= 3
+
   spnb_helper = GovukPublishingComponents::Presenters::SinglePageNotificationButtonHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
 
-  wrapper_classes = %w(govuk-!-display-none-print)
-  wrapper_classes << shared_helper.get_margin_bottom
-
   ga4_data_attributes = ga4_data_attributes ||= nil
   ga4_link_data_attributes = ga4_data_attributes[:ga4_link] if ga4_data_attributes
   ga4_link_data_attributes[:url] = spnb_helper.form_action if ga4_link_data_attributes
 
-  component_helper.add_class(wrapper_classes.join(" "))
+  component_helper.add_class("govuk-!-display-none-print")
   component_helper.add_data_attribute({ module: ga4_data_attributes[:module] }) if ga4_data_attributes
 %>
 <% button_text = capture do %>

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.html.erb

@@ -19,19 +19,24 @@
   step_nav_helper = GovukPublishingComponents::Presenters::StepByStepNavHelper.new
 
   disable_ga4 ||= false
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_data_attribute({
+    module: "gemstepnav",
+    show_text: t("components.step_by_step_nav.show"),
+    hide_text: t("components.step_by_step_nav.hide"),
+    show_all_text: t("components.step_by_step_nav.show_all"),
+    hide_all_text: t("components.step_by_step_nav.hide_all")
+  })
+  component_helper.add_data_attribute({ module: "ga4-event-tracker", ga4_expandable: "", }) unless disable_ga4
+  component_helper.add_data_attribute({ remember: "" }) if remember_last_step
+  component_helper.add_data_attribute({ id: tracking_id }) if tracking_id
+  component_helper.add_class("gem-c-step-nav js-hidden")
+  component_helper.add_class("govuk-!-display-none-print") if small
+  component_helper.add_class("gem-c-step-nav--large") unless small
 %>
 <% if steps %>
-  <div
-    data-module="gemstepnav<% unless disable_ga4 %> ga4-event-tracker<% end %>"
-    <%= "data-ga4-expandable" unless disable_ga4 %>
-    class="gem-c-step-nav js-hidden <% if small %>govuk-!-display-none-print<% end %> <% unless small %>gem-c-step-nav--large<% end %>"
-    <%= "data-remember" if remember_last_step %>
-    <%= "data-id=#{tracking_id}" if tracking_id %>
-    data-show-text="<%= t("components.step_by_step_nav.show") %>"
-    data-hide-text="<%= t("components.step_by_step_nav.hide") %>"
-    data-show-all-text="<%= t("components.step_by_step_nav.show_all") %>"
-    data-hide-all-text="<%= t("components.step_by_step_nav.hide_all") %>"
-  >
+  <%= tag.div(**component_helper.all_attributes) do %>
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>
         <%
@@ -115,5 +120,5 @@
         </li>
       <% end %>
     </ol>
-  </div>
+  <% end %>
 <% end %>

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