govuk_publishing_components 32.1.0 → 33.1.0

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -201,9 +201,7 @@ $after-button-padding-left: govuk-spacing(5);
 
   display: inline-block;
   font-size: 19px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(19px);
-  }
+  font-size: govuk-px-to-rem(19px);
   font-weight: bold;
   margin: govuk-spacing(3) 0;
 
@@ -242,14 +240,10 @@ $after-button-padding-left: govuk-spacing(5);
     }
 
     @include govuk-media-query($from: "desktop") {
+      // stylelint-disable max-nesting-depth
       float: left;
       font-size: 16px;
-
-      // stylelint-disable max-nesting-depth
-      @if $govuk-typography-use-rem {
-        font-size: govuk-px-to-rem(16px);
-      }
-
+      font-size: govuk-px-to-rem(16px);
       height: govuk-spacing(4);
       position: relative;
 
@@ -394,9 +388,7 @@ $after-button-padding-left: govuk-spacing(5);
       color: govuk-colour("white");
       float: left;
       font-size: 16px;
-      @if $govuk-typography-use-rem {
-        font-size: govuk-px-to-rem(16px);
-      }
+      font-size: govuk-px-to-rem(16px);
       height: $black-bar-height;
       position: relative;
       text-decoration: none;
@@ -604,9 +596,7 @@ $after-button-padding-left: govuk-spacing(5);
   @include govuk-link-style-no-underline;
 
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   font-weight: 700;
   background: govuk-colour("black");
   border: 0;
@@ -878,9 +868,7 @@ $after-button-padding-left: govuk-spacing(5);
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
 
   &:after {
     @include make-selectable-area-bigger;
@@ -898,9 +886,7 @@ $after-button-padding-left: govuk-spacing(5);
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 }
 
@@ -934,9 +920,7 @@ $after-button-padding-left: govuk-spacing(5);
 .gem-c-layout-super-navigation-header__navigation-second-footer-link {
   display: inline-block;
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   margin: govuk-spacing(1) 0;
 
   &:after {
@@ -956,9 +940,7 @@ $after-button-padding-left: govuk-spacing(5);
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
   @include govuk-typography-common;
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   font-weight: normal;
   margin: govuk-spacing(1) 0 0 0;
 }
@@ -996,9 +978,7 @@ $after-button-padding-left: govuk-spacing(5);
 .gem-c-layout-super-navigation-header__popular-link {
   display: inline-block;
   font-size: 16px;
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
+  font-size: govuk-px-to-rem(16px);
   padding: 0;
 
   &:after {

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

@@ -97,13 +97,6 @@ $large-input-size: 50px;
   }
 }
 
-@include govuk-compatibility(govuk_template) {
-  //  ultra specific rule overrides focus styling from govuk_template
-  #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
-    @extend %gem-c-search-input-focus;
-  }
-}
-
 @mixin icon-positioning($container-size) {
   $icon-dimension: 20px;
   $icon-position: ($container-size - $icon-dimension) / 2;

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

@@ -23,10 +23,12 @@
 
   data_attributes ||= {}
   ((data_attributes[:module] ||= "") << " " << "govuk-accordion gem-accordion").strip!
+  ga4_tracking ||= false
+  data_attributes[:module] << " ga4-event-tracker" if ga4_tracking
+  data_attributes[:ga4_expandable] = '' if ga4_tracking
   data_attributes[:anchor_navigation] = anchor_navigation
   data_attributes[:track_show_all_clicks] = track_show_all_clicks
   data_attributes[:track_sections] = track_sections
-
   data_attributes_show_all ||= nil
   data_attributes[:show_all_attributes] = data_attributes_show_all if data_attributes_show_all
 
@@ -57,6 +59,17 @@
 
         item[:data_attributes] ||= nil
 
+        if ga4_tracking
+          item[:data_attributes] ||= {}
+          item[:data_attributes][:ga4_event] = {
+            event_name: "select_content",
+            type: "accordion",
+            text: item[:heading][:text],
+            index: index,
+            index_total: items.length
+          }.to_json
+        end
+
         section_classes = %w(govuk-accordion__section)
         section_classes << 'govuk-accordion__section--expanded' if item[:expanded]
 

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

@@ -4,7 +4,6 @@
   description ||= false
   data_attributes ||= {}
   items ||= []
-  title_id ||= "error-summary-title-#{SecureRandom.hex(4)}"
   if items.empty? && !title
     raise ArgumentError, "The error_summary component needs at least one item or a title in order to render."
   end
@@ -12,33 +11,35 @@
 <%= tag.div(
   class: "gem-c-error-summary govuk-error-summary",
   data: { module: "govuk-error-summary" }.merge(data_attributes),
-  aria: { labelledby: title_id },
-  role: "alert",
   id: id,
 ) do %>
-  <% if title %>
-    <h2 class="govuk-error-summary__title" id="<%= title_id %>">
-      <%= title %>
-    </h2>
-  <% end %>
-  <div class="govuk-error-summary__body">
-    <% if description %>
-      <p><%= description %></p>
+  <%= tag.div(
+    role: "alert",
+  ) do %>
+    <% if title %>
+      <h2 class="govuk-error-summary__title">
+        <%= title %>
+      </h2>
     <% end %>
-    <% if items.present? %>
-      <ul class="govuk-list govuk-error-summary__list">
-        <% items.each_with_index do |item, index| %>
-          <li class="gem-c-error-summary__list-item">
-            <% if item[:href] %>
-              <%= link_to item[:text], item[:href], target: item[:target], data: item[:data_attributes] %>
-            <% else %>
-              <%= tag.span data: item[:data_attributes] do %>
-                <%= item[:text] %>
+    <div class="govuk-error-summary__body">
+      <% if description %>
+        <p><%= description %></p>
+      <% end %>
+      <% if items.present? %>
+        <ul class="govuk-list govuk-error-summary__list">
+          <% items.each_with_index do |item, index| %>
+            <li class="gem-c-error-summary__list-item">
+              <% if item[:href] %>
+                <%= link_to item[:text], item[:href], target: item[:target], data: item[:data_attributes] %>
+              <% else %>
+                <%= tag.span data: item[:data_attributes] do %>
+                  <%= item[:text] %>
+                <% end %>
               <% end %>
-            <% end %>
-          </li>
-        <% end %>
-      </ul>
-    <% end %>
-  </div>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+    </div>
+  <% end %>
 <% end %>

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

@@ -78,7 +78,7 @@
         hidden
         id="super-navigation-menu-toggle"
         type="button"
-        data-ga4="<%= {
+        data-ga4-event="<%= {
           "event_name": "select_content",
           "type": "header menu bar",
           "text": "Menu",
@@ -233,7 +233,7 @@
         hidden
         id="super-search-menu-toggle"
         type="button"
-        data-ga4="<%= {
+        data-ga4-event="<%= {
           "event_name": "select_content",
           "type": "header menu bar",
           "text": "Search",

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

@@ -8,7 +8,7 @@ unless message.present?
   if phase == "beta"
     message = raw("This part of GOV.UK is being rebuilt &ndash; <a class=\"govuk-link\" href=\"/help/beta\">find out what beta means</a>")
   elsif phase == "alpha"
-    message = raw("This part of GOV.UK is being built &ndash; <a class=\"govuk-link\" href=\"/service-manual/phases/ideal-alphas\">find out what alpha means</a>")
+    message = raw("This part of GOV.UK is being built &ndash; <a class=\"govuk-link\" href=\"/service-manual/agile-delivery/how-the-alpha-phase-works\">find out what alpha means</a>")
   end
 end
 

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

@@ -15,7 +15,8 @@
   classes << brand_helper.brand_class
 
   data_attributes ||= {}
-  data_attributes[:module] = 'gem-track-click'
+  ((data_attributes[:module] ||= "") << " " << "gem-track-click").strip!
+  data_attributes[:module] << " ga4-link-tracker" if track_as_sharing || track_as_follow
 %>
 <% if links.any? %>
   <%= tag.div(class: classes, data: data_attributes) do %>
@@ -54,7 +55,6 @@
                 'index': index + 1,
                 'index_total': links.length,
                 'text': link[:icon],
-                'method': 'populated-via-js'
               }
             end
             if track_as_follow
@@ -62,23 +62,21 @@
                 'event_name': 'navigation',
                 'type': 'follow us',
                 'index': index + 1,
-                'index_total': links.length,
-                'text': link[:text],
-                'external': 'populated-via-js',
-                'url': link[:href],
-                'method': 'populated-via-js'
+                'index_total': links.length
               }
             end
           %>
+          <%
+            data_attributes = link[:data_attributes] ||= {}
+            data_attributes[:track_category] = 'social media'
+            data_attributes[:track_action] = link[:icon]
+            data_attributes[:track_options] = track_options
+            data_attributes[:ga4_link] = ga4_link_data
+          %>
           <%= link_to link[:href],
             target: "_blank",
             rel: "noopener noreferrer external",
-            data: {
-              'track-category': 'social media',
-              'track-action': link[:icon],
-              'track-options': track_options,
-              'ga4-link': ga4_link_data
-            },
+            data: data_attributes,
             class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>

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

@@ -6,7 +6,7 @@
   wrapper_classes << shared_helper.get_margin_bottom
 %>
 <% button_text = capture do %>
-  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
+  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><span class="gem-c-single-page-notication-button__text"><%= component_helper.button_text %></span>
 <% end %>
 <%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %>
   <%= tag.form class: component_helper.classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>

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

@@ -15,10 +15,13 @@
   step_number = 0
 
   step_nav_helper = GovukPublishingComponents::Presenters::StepByStepNavHelper.new
+
+  ga4_tracking ||= false
 %>
 <% if steps %>
   <div
-    data-module="gemstepnav"
+    data-module="gemstepnav<% if ga4_tracking %> ga4-event-tracker<% end %>"
+    <%= "data-ga4-expandable" if ga4_tracking %>
     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/app/views/govuk_publishing_components/components/docs/accordion.yml

@@ -181,21 +181,33 @@ examples:
                     <a class="govuk-link" href="#">Retiring your service</a>
                   </li>
               </ul>'
+  with_ga4_tracking:
+    description: |
+      Allows you to add GA4 tracking to an accordion. This will add a data module and data-attributes with JSONs to the accordion. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      items:
+        - heading:
+            text: Writing well for the web
+          content:
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
+        - heading:
+            text: Writing well for specialists
+          content:
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
   with_data_attributes:
     description: |
       Adds custom data attributes to each section of the accordion. Accepts a hash, so multiple attributes can be added.
 
       The `data_attributes` option applies attributes to the outermost element in the accordion. Each item can also have a `data_attributes` hash, which are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
 
-      Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). More details on how this can be used with the GA4 event tracking can be found in the 'Advanced' section of the [event tracking documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md).
+      Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). Currently, this is only used for tracking with Universal Analytics.
 
       If `track_options` within `data_attributes_show_all` is set, then it is possible to pass a custom dimension when 'Show/Hide all' is clicked.
     data:
       data_attributes:
         custom_data_attr: custom-data-attr-accordion
       data_attributes_show_all:
-        custom_data_attr-event-name: example
-        custom_data_attr-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
         tracking-options: "{ 'dimension114': 1 }"
       items:
         - heading:

data/app/views/govuk_publishing_components/components/docs/button.yml

@@ -129,3 +129,13 @@ examples:
     data:
       text: Button
       aria_label: Button with custom label
+  with_aria_controls:
+    description: Used to identify what element(s) the button controls, this can be useful for users with visual impairment. In the example shown, the button controls the page wrapper with ID `wrapper` but it could be another identifying attribute.
+    data:
+      text: Button
+      aria_controls: wrapper
+  with_aria_describedby:
+    description: Can be used to give context to a button, this will be read after aria-label by a screenreader
+    data:
+      text: Button
+      aria_describedby: with_aria_describedby

data/app/views/govuk_publishing_components/components/docs/share_links.yml

@@ -3,6 +3,8 @@ description: Social media links for linking to or sharing the current page on so
 body: |
   The component will not process a URL into a share link itself. Pass complete share URLs to the component.
 
+  Note that the component automatically appends visually hidden text to the link (default: `Share on <your text> (opens in a new tab)`). Consider this when setting the link text.
+
   Real world examples:
 
     - [News article](https://www.gov.uk/government/news/fast-tracking-uk-innovation-apply-for-business-funding)
@@ -44,36 +46,27 @@ examples:
       ]
     context:
       right_to_left: true
-  track_as_sharing_links:
-    description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
-    data:
-      track_as_sharing: true
-      links: [
-        {
-          href: 'share',
-          text: 'Share on Facebook',
-          icon: 'facebook'
-        },
-        {
-          href: 'share',
-          text: 'Share on Twitter',
-          icon: 'twitter'
-        },
-      ]
-  track_as_follow_links:
-    description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
+  with_data_attributes:
+    description: Data attributes can be added to both the parent element and the individual share links, as shown. Note that the component defaults to having a `data-module` of `gem-track-click`, but this is preserved even if another value for module is passed.
     data:
-      track_as_follow: true
+      data_attributes:
+        module: 'example-passed-module'
       links: [
         {
-          href: 'follow',
-          text: 'Follow us on Facebook',
-          icon: 'facebook'
+          href: '/facebook-share-link',
+          text: 'Facebook',
+          icon: 'facebook',
+          data_attributes: {
+            meeting: 'hello'
+          },
         },
         {
-          href: 'follow',
-          text: 'Follow us on Twitter',
-          icon: 'twitter'
+          href: '/twitter-share-link',
+          text: 'Twitter',
+          icon: 'twitter',
+          data_attributes: {
+            departing: 'goodbye'
+          },
         },
       ]
   with_title:
@@ -83,9 +76,22 @@ examples:
         {
           href: 'share',
           text: 'Share on Facebook',
+          hidden_text: '',
           icon: 'facebook'
         }
       ]
+  with_branding:
+    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_branding.md) can be added to the component as shown.
+    data:
+      brand: 'attorney-generals-office'
+      links: [
+        {
+          href: 'share',
+          text: 'Follow the Attorney General on Twitter',
+          hidden_text: '',
+          icon: 'twitter'
+        }
+      ]      
   with_custom_visually_hidden_text:
     description: |
       Use this option to specify a visually hidden text for screenreaders to prepend to the link text.
@@ -100,16 +106,39 @@ examples:
           icon: 'facebook'
         }
       ]
-  with_branding:
-    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_branding.md) can be added to the component as shown.
+  track_as_sharing_links:
+    description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
     data:
-      brand: 'attorney-generals-office'
+      track_as_sharing: true
       links: [
         {
           href: 'share',
-          text: 'Follow the Attorney General on Twitter',
+          text: 'Share on Facebook',
+          icon: 'facebook'
+        },
+        {
+          href: 'share',
+          text: 'Share on Twitter',
           icon: 'twitter'
-        }
+        },
+      ]
+  track_as_follow_links:
+    description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
+    data:
+      track_as_follow: true
+      links: [
+        {
+          href: 'follow',
+          text: 'Follow us on Facebook',
+          hidden_text: '',
+          icon: 'facebook'
+        },
+        {
+          href: 'follow',
+          text: 'Follow us on Twitter',
+          hidden_text: '',
+          icon: 'twitter'
+        },
       ]
   stack_vertically:
     data:

data/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml

@@ -33,7 +33,8 @@ examples:
       margin_bottom: 5
   with_js_enhancement:
     description: |
-      If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
+      If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page and accordingly updates its tracking attribute and (optionally) button text.
+
     data:
       base_path: '/current-page-path'
       js_enhancement: true
@@ -48,3 +49,11 @@ examples:
       base_path: '/current-page-path'
       js_enhancement: true
       button_location: 'top'
+  with_custom_button_text:
+    description: The component accepts custom button text, provided that both subscribe and unsubscribe text is provided.
+    data:
+      base_path: '/current-page-path'
+      js_enhancement: true
+      button_text:
+        subscribe: 'Subscribe to this page of things'
+        unsubscribe: 'Unsubscribe to this page of things'

data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml

@@ -72,6 +72,40 @@ examples:
           ]
         }
       ]
+  with_google_analytics_4_tracking:
+    description: |
+      The ga4_tracking boolean allows you to add Google Analytics 4 (GA4) tracking to your component.
+      Setting this to true will add the `ga4-event-tracker` module to your component. The JavaScript will then add a `data-ga4-event` attribute and `data-ga4-expandable` attribute to the "Show all steps" button, and each clickable Step heading.
+      GA4 will then track these elements when they are expanded or collapsed.
+      `data-ga4-event` contains a JSON with event data relevant to our tracking. `data-ga4-expandable` enables the value of `aria-expanded` to be captured.
+      See the [ga4-event-tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) docs for more information.
+    data:
+      ga4_tracking: true
+      steps: [
+        {
+          title: "Do something",
+          contents: [
+            {
+              type: 'paragraph',
+              text: 'This is a paragraph of text.'
+            },
+            {
+              type: 'paragraph',
+              text: 'This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth.'
+            }
+          ],
+        },
+        {
+          title: "Do something thing else",
+          logic: "and",
+          contents: [
+            {
+              type: 'paragraph',
+              text: 'Some more text.'
+            },
+          ]
+        },
+      ]
   with_unique_tracking:
     description: |
       In order to identify the step by step navigation the component is part of, we need to track a unique ID of the navigation in Google Analytics. This ID should be the same across all pages that are linked from and are part of that navigation. Its value is included in any tracking events, specifically in dimension96. It refers to the ID of the step nav page.

data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb

@@ -41,7 +41,7 @@
       <%= render "govuk_publishing_components/components/button", {
         text: t("components.feedback.send"),
         data_attributes: {
-          ga4: {
+          ga4_event: {
             event_name: "form_submit",
             type: "feedback",
             text: "Send",

data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb

@@ -28,7 +28,7 @@
       <%= render "govuk_publishing_components/components/button", {
         text: t("components.feedback.send_me_survey"),
         data_attributes: {
-          ga4: {
+          ga4_event: {
             event_name: "form_submit",
             type: "feedback",
             text: "Send me the survey",

data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb

@@ -21,12 +21,12 @@
             <% end %>
           </li>
           <li class="gem-c-feedback__option-list-item">
-            <button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick" data-ga4='{"event_name":"form_submit","type":"feedback","text":"Yes", "section": "Is this page useful?"}'>
+            <button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick" data-ga4-event='{"event_name":"form_submit","type":"feedback","text":"Yes", "section": "Is this page useful?"}'>
               <%= t("components.feedback.yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful") %></span>
             </button>
           </li>
           <li class="gem-c-feedback__option-list-item">
-            <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false" data-ga4='{"event_name":"form_submit","type":"feedback","text":"No", "section": "Is this page useful?"}'>
+            <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false" data-ga4-event='{"event_name":"form_submit","type":"feedback","text":"No", "section": "Is this page useful?"}'>
               <%= t("components.feedback.no") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful") %></span>
             </button>
           </li>
@@ -39,7 +39,7 @@
     </div>
 
     <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions" hidden>
-      <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false" data-ga4='{"event_name":"form_submit","type":"feedback","text":"Report a problem with this page", "section": "Is this page useful?"}'>
+      <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false" data-ga4-event='{"event_name":"form_submit","type":"feedback","text":"Report a problem with this page", "section": "Is this page useful?"}'>
         <%= t("components.feedback.something_wrong") %>
       </button>
     </div>