govuk_publishing_components 31.1.2 → 32.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6228168725fc509c3b6313611fb75d4700597c685bb059c58ab4058173adfee5
-  data.tar.gz: 4ecefeead36ad35884f76edc0cb679e8449b300e08b95bf05ef9a1bd2ba9c7fe
+  metadata.gz: 40c8f5cd0a641b265004d0db4aa4dad79cc1f251bc6510655d69bc7fa954614f
+  data.tar.gz: 80b737085d4e49d8a2d5558472f918ed7632db5932d32c9945ad82d936c3a2d0
 SHA512:
-  metadata.gz: 60b6aa5e85acf22e1bb663dc8e87d626f60ded689eb6809ec269868a4dba96bd1c41ae8766a30f8f97e27a5b56ef5044e65db4a2fee5814d150de6aa9731bd68
-  data.tar.gz: 06a0a8bd5ca1a14ff13bb0aec9869dba18d3e0e9942d48a712befde02c6738c7b62a2ca9e300f5c3ae320a86adfe507faa74598d74a76740b9da5fbcbf898200
+  metadata.gz: c18a6aee8070978fd4f72f29eb7d916d8899a261c3bac0fac075703a18d5c7e7b1854fc56dc3d9ee4bfae10e1c5725aa4693f0488edac5429bb5f9b6ceed3e33
+  data.tar.gz: 2903283d75f095a49ebd6940cb003bc6653bf3e2e96cd990f311b3b113b1925bf042b9bc689a0f01d1f951973aee8f58fd00945e771507477e1ec69fa29eca1b

data/app/assets/images/govuk_publishing_components/action-link-arrow--blue.svg

@@ -1,3 +1,9 @@
-<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4893 23C17.8406 23 22.9893 17.8513 22.9893 11.5C22.9893 5.14873 17.8406 0 11.4893 0C5.64643 0 0.821276 4.35747 0.0862655 10H12.7633L8.98933 5.67277L10.4482 4L16.9893 11.5L10.4482 19L8.98933 17.3272L13.6354 12H0C0.261778 18.1193 5.30558 23 11.4893 23ZM13.9893 11.5942L14.0715 11.5L13.9893 11.4057V11.5942Z" fill="#366FB3"/>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="19.5" cy="19.5" r="19.5" fill="#366FB3" mask="url(#mask)"/>
+
+<mask id="mask">
+	<rect width="100%" height="100%" fill="white"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0343 20L14.1812 10.1469L17.0096 7.31848L29.6912 20L17.0096 32.6815L14.1812 29.8531L24.0343 20Z" fill="black"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000423781 18L25.1328 18L25.1328 22L0.000423431 22L0.000423781 18Z" fill="black"/>
+</mask>
 </svg>

data/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js

@@ -19,7 +19,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var target = e.target
       if (!trackLinksOnly) {
         that.$module.handleClick(target)
-      } else if (trackLinksOnly && target.tagName === 'A') {
+      } else if (trackLinksOnly && target.closest('a')) {
         if (!limitToElementClass) {
           that.$module.handleClick(target)
         } else if (limitToElementClass && target.closest('.' + limitToElementClass)) {

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js

@@ -9,12 +9,17 @@
     PIIRemover: new GOVUK.analyticsGa4.PIIRemover(),
     DEFAULT_LIST_TITLE: 'Site search results',
 
-    init: function (isNewPageLoad) {
+    init: function (referrer) {
       if (window.dataLayer) {
+        /* The referrer parameter is only passed to the init() function as a result of an AJAX request
+        (in live_search.js in the finder-frontend repository). Otherwise it will not be available and this indicates a fresh page load.
+        This is needed to trigger a fresh pageViewTracker push to the dataLayer on dynamic page updates and to prevent multiple
+        click listeners from being applied on this.searchResultsBlocks elements. */
+        var isNewPageLoad = !referrer
+
         /* The data-ga4-ecommerce attribute may be present on several DOM elements e.g. search results and spelling
         suggestions, hence why document.querySelectorAll is required */
         this.searchResultsBlocks = document.querySelectorAll('[data-ga4-ecommerce]')
-        this.isNewPageLoad = isNewPageLoad
 
         if (!this.searchResultsBlocks.length === 0) {
           return
@@ -23,18 +28,18 @@
         /* If the results are updated by JS, the URL of the page will change and this needs to be visible to PA's,
         hence the pageView object push to the dataLayer. We do not need to send a pageView object on page load as
         this is handled elsewhere. */
-        if (!this.isNewPageLoad) {
+        if (referrer) {
           var pageViewTracker = window.GOVUK.analyticsGa4.analyticsModules.PageViewTracker
 
           if (pageViewTracker) {
-            pageViewTracker.init()
+            pageViewTracker.init(referrer)
           }
         }
 
         for (var i = 0; i < this.searchResultsBlocks.length; i++) {
           this.trackSearchResults(this.searchResultsBlocks[i])
 
-          if (this.isNewPageLoad) {
+          if (isNewPageLoad) {
             this.searchResultsBlocks[i].addEventListener('click', this.handleClick.bind(this))
           }
         }

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js

@@ -51,8 +51,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         }
       }
 
-      // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
-      if (target.closest('.gem-c-accordion')) {
+      /* Ensure it only tracks aria-expanded in an accordion or element with data-ga4-expandable on it. */
+      if (target.closest('.gem-c-accordion') || target.closest('[data-ga4-expandable]')) {
         var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
       }
 

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

@@ -9,13 +9,15 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
     PIIRemover: new window.GOVUK.analyticsGa4.PIIRemover(), // imported in analytics-ga4.js
     nullValue: undefined,
 
-    init: function () {
+    init: function (referrer) {
       if (window.dataLayer) {
         var data = {
           event: 'page_view',
           page_view: {
             location: this.getLocation(),
-            referrer: this.getReferrer(),
+            /* If the init() function receives a referrer parameter, this indicates that it has been called as a part of an AJAX request and
+            this.getReferrer() will not return the correct value. Therefore we need to rely on the referrer parameter. */
+            referrer: referrer || this.getReferrer(),
             title: this.getTitle(),
             status_code: this.getStatusCode(),
 
@@ -42,7 +44,12 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             political_status: this.getMetaContent('political-status'),
             primary_publishing_organisation: this.getMetaContent('primary-publishing-organisation'),
             organisations: this.getMetaContent('analytics:organisations'),
-            world_locations: this.getMetaContent('analytics:world-locations')
+            world_locations: this.getMetaContent('analytics:world-locations'),
+
+            /* The existence of a referrer parameter indicates that the page has been dynamically updated via an AJAX request
+            and therefore we can use it to set the dynamic property appropriately. This value is used by PA's to differentiate
+            between fresh page loads and dynamic page updates. */
+            dynamic: referrer ? 'true' : 'false'
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)

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

@@ -2,11 +2,20 @@
   background: govuk-colour("white");
   margin-top: govuk-spacing(6);
 
-  @include govuk-media-query($from: tablet) {
+  @include govuk-media-query($from: desktop) {
     margin-top: govuk-spacing(9);
-    border-bottom: 1px solid govuk-colour("white");
   }
 
+  // New design has the box flush with edges of smaller screens
+  // We need to compensate for `govuk-width-container` margins:
+  @include govuk-media-query($until: tablet) {
+    margin-right: govuk-spacing(-3);
+    margin-left: govuk-spacing(-3);
+  }
+  @include govuk-media-query($from: tablet, $until: desktop) {
+    margin-right: govuk-spacing(-6);
+    margin-left: govuk-spacing(-6);
+  }
   // Scoped to the feedback component temporarily
   [hidden] {
     // stylelint-disable-next-line declaration-no-important
@@ -14,92 +23,88 @@
   }
 }
 
-.gem-c-feedback__prompt-questions {
-  text-align: center;
-  border-bottom: 1px solid govuk-colour("white");
-  padding: govuk-spacing(5) govuk-spacing(5) govuk-spacing(5) govuk-spacing(5);
-  box-sizing: border-box;
+.gem-c-feedback__prompt {
+  background-color: govuk-colour("light-grey");
+  color: govuk-colour("black");
+  border-top: 1px solid $govuk-border-colour;
+  outline: 0;
+}
 
+.gem-c-feedback__prompt-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0 govuk-spacing(3);
   @include govuk-media-query($from: tablet) {
-    width: 50%;
-    display: table-cell;
-    text-align: left;
-    border-bottom: 0;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 
-.gem-c-feedback__prompt-questions--something-is-wrong {
-  text-align: center;
-
+.gem-c-feedback__prompt-questions {
+  text-align: left;
+  padding: govuk-spacing(4) 0;
   @include govuk-media-query($from: tablet) {
-    text-align: right;
-    vertical-align: bottom;
-    float: none;
+    margin: 0 govuk-spacing(3);
   }
 }
 
-.gem-c-feedback__prompt {
-  @include govuk-clearfix;
-  background-color: govuk-colour("blue");
-  color: govuk-colour("white");
-  outline: 0;
-
+.gem-c-feedback__prompt-questions--something-is-wrong {
+  border-top: 1px solid $govuk-border-colour;
   @include govuk-media-query($from: tablet) {
-    @include govuk-font(16, $weight: bold);
-    display: table;
-    width: 100%;
+    border: 0;
+  }
+}
+
+.gem-c-feedback__prompt-question-answer {
+  display: flex;
+  align-items: center;
+  @include govuk-media-query($until: mobile) {
+    justify-content: center;
+    flex-wrap: wrap;
   }
 }
 
 .gem-c-feedback__prompt-question,
 .gem-c-feedback__prompt-success {
   @include govuk-font(19, $weight: bold);
-
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16, $weight: bold);
   }
 }
 
 .gem-c-feedback__prompt-question {
-  vertical-align: top;
-  display: inline-block;
-  margin: govuk-spacing(2) govuk-spacing(4);
+  margin: 0;
+  padding-bottom: govuk-spacing(2);
 
   &:focus {
     outline: 0;
   }
-
-  @include govuk-media-query($from: tablet) {
-    margin-left: 0;
-    margin-top: 0;
-    display: block;
-  }
-
-  // This custom media-query is to account for some awkward positioning where the yes and no buttons are too big to sit inline with the prompt question
-  @include govuk-media-query($from: 950px) {
-    display: inline-block;
-    margin-top: govuk-spacing(2);
+  @include govuk-media-query($from: mobile) {
+    padding-bottom: 0;
+    margin-right: govuk-spacing(2);
   }
 }
 
 .gem-c-feedback__prompt-link {
   @include govuk-font(19);
   background: transparent;
-  box-shadow: 0 2px 0 govuk-colour("white");
-  border: 1px govuk-colour("white") solid;
-  min-width: 100%;
+  color: govuk-colour("black");
+  box-shadow: 0 3px 0 govuk-colour("black");
+  border: 1px govuk-colour("black") solid;
+  margin-bottom: 0;
+  width: 100%;
 
   &:hover {
     // backup style for browsers that don't support rgba
-    background: govuk-colour("black");
+    background: govuk-colour("mid-grey");
     background: rgba(govuk-colour("black"), .2);
+    color: govuk-colour("black");
   }
 
-  @include govuk-media-query($from: mobile) {
-    min-width: 100px;
-    margin-bottom: 0;
+  &:active:focus:not(:hover) {
+    background: govuk-colour("yellow");
   }
-
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
   }
@@ -108,42 +113,44 @@
 .gem-c-feedback__email-link,
 .gem-c-feedback__prompt-link {
   position: relative;
+
+  &:focus:not(:active):not(:hover) {
+    border-color: govuk-colour("black");
+  }
+
+  &:focus,
+  &:active {
+    color: $govuk-focus-text-colour;
+  }
 }
 
 .gem-c-feedback__prompt-link:link,
 .gem-c-feedback__prompt-link:visited {
-  color: govuk-colour("white");
+  color: govuk-colour("black");
 
-  &:focus {
+  &:focus,
+  &:active {
     color: $govuk-focus-text-colour;
   }
 }
 
 .gem-c-feedback__option-list {
+  display: flex;
   list-style-type: none;
   margin: 0;
   padding: 0;
-  margin-top: govuk-spacing(2);
-
-  @include govuk-media-query($from: mobile) {
-    display: inline-block;
-    margin-right: govuk-spacing(2);
-  }
-
-  @include govuk-media-query($from: tablet) {
-    margin-top: 0;
-  }
 }
 
 .gem-c-feedback__option-list-item {
-  @include govuk-media-query($from: mobile) {
-    display: inline-block;
+  &:last-child {
+    margin-left: govuk-spacing(2);
   }
 }
 
-.gem-c-feedback__option-list-item:last-child {
-  @include govuk-media-query($from: mobile) {
-    margin-left: govuk-spacing(4);
+.gem-c-feedback__option-list-item .gem-c-feedback__prompt-link {
+  min-width: 100px;
+  @include govuk-media-query($until: desktop) {
+    min-width: 80px;
   }
 }
 
@@ -158,7 +165,7 @@
     outline: solid 3px $govuk-focus-colour;
   }
 
-  @include govuk-media-query($from: tablet) {
+  @include govuk-media-query($from: desktop) {
     border-width: $govuk-border-width;
   }
 
@@ -190,11 +197,11 @@
 }
 
 .gem-c-feedback__form {
-  padding: govuk-spacing(3) 0;
-  border-top: govuk-spacing(2) solid govuk-colour("blue");
+  padding: govuk-spacing(3);
+  border-top: 1px solid $govuk-border-colour;
 
   @include govuk-media-query($from: tablet) {
-    padding: govuk-spacing(6) 0;
+    padding: govuk-spacing(6);
   }
 }
 
@@ -217,8 +224,10 @@
 }
 
 .gem-c-feedback__close {
-  float: right;
-  margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
+  margin: 0 govuk-spacing(2);
+  @include govuk-media-query($until: tablet) {
+    margin: govuk-spacing(4) 0 0;
+  }
 }
 
 .gem-c-feedback__email-link {
@@ -228,7 +237,6 @@
   @include govuk-media-query($from: desktop) {
     display: inline-block;
     margin-top: govuk-spacing(2);
-    margin-left: govuk-spacing(3);
   }
 }
 

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

@@ -15,7 +15,7 @@
   hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
   show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")
 %>
-<header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click" data-track-links-only>
+<header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click ga4-event-tracker" data-track-links-only data-ga4-expandable>
   <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
     <div class="gem-c-layout-super-navigation-header__header-logo">
       <a
@@ -78,6 +78,14 @@
         hidden
         id="super-navigation-menu-toggle"
         type="button"
+        data-ga4="<%= {
+          "event_name": "select_content",
+          "type": "header menu bar",
+          "text": "Menu",
+          "index": 1,
+          "index_total": navigation_links.length + 2,
+          "section": "Menu"
+        }.to_json %>"
       >
         <span class="gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner">
           Menu
@@ -124,6 +132,14 @@
                     toggle_desktop_group: "top",
                     toggle_mobile_group: "second",
                     tracking_key: tracking_label,
+                    ga4: {
+                      event_name: "select_content",
+                      type: "header menu bar",
+                      text: link[:label],
+                      index: index + 2,
+                      index_total: navigation_links.length + 2,
+                      section: link[:label]
+                    }
                   },
                   hidden: true,
                   id: "super-navigation-menu__section-#{unique_id}-toggle",
@@ -217,6 +233,14 @@
         hidden
         id="super-search-menu-toggle"
         type="button"
+        data-ga4="<%= {
+          "event_name": "select_content",
+          "type": "header menu bar",
+          "text": "Search",
+          "index": navigation_links.length + 2,
+          "index_total": navigation_links.length + 2,
+          "section": "Search"
+        }.to_json %>"
       >
         <span class="govuk-visually-hidden">
           <%= search_text %>

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

@@ -5,14 +5,6 @@
   data-track-action="GOV.UK Send Form"
   method="post"
   hidden>
-  <button
-    class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
-    data-track-category="Onsite Feedback"
-    data-track-action="GOV.UK Close Form"
-    aria-controls="something-is-wrong"
-    aria-expanded="true">
-    <%= t("components.feedback.close") %>
-  </button>
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -47,15 +39,32 @@
       } %>
 
       <%= render "govuk_publishing_components/components/button", {
-        text: t("components.feedback.send")
+        text: t("components.feedback.send"),
+        data_attributes: {
+          ga4: {
+            event_name: "form_submit",
+            type: "feedback",
+            text: "Send",
+            section: "Help us improve GOV.UK",
+          }
+        }
       } %>
+
+      <button
+        class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
+        data-track-category="Onsite Feedback"
+        data-track-action="GOV.UK Close Form"
+        aria-controls="something-is-wrong"
+        aria-expanded="true">
+        <%= t("components.feedback.close") %>
+      </button>
     </div>
   </div>
 </form>
 
 <%
-  # I've added the following script inline in case of a scenario where a bot is able to parse the page, 
-  # without downloading any of the external scripts. 
+  # I've added the following script inline in case of a scenario where a bot is able to parse the page,
+  # without downloading any of the external scripts.
   # This seems to be a more reliable way to make sure the script is executed.
 %>
 

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

@@ -4,15 +4,6 @@
   data-track-category="yesNoFeedbackForm"
   data-track-action="Send Form"
   method="post">
-  <button
-    class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
-    data-track-category="yesNoFeedbackForm"
-    data-track-action="ffFormClose"
-    aria-controls="page-is-not-useful"
-    aria-expanded="true"
-    hidden>
-    <%= t("components.feedback.close") %>
-  </button>
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds" id="survey-wrapper">
@@ -34,9 +25,28 @@
         describedby: "survey_explanation"
       } %>
 
-       <%= render "govuk_publishing_components/components/button", {
+      <%= render "govuk_publishing_components/components/button", {
         text: t("components.feedback.send_me_survey"),
+        data_attributes: {
+          ga4: {
+            event_name: "form_submit",
+            type: "feedback",
+            text: "Send me the survey",
+            section: "Help us improve GOV.UK",
+          }
+        }
       } %>
+
+      <button
+        class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
+        data-track-category="yesNoFeedbackForm"
+        data-track-action="ffFormClose"
+        aria-controls="page-is-not-useful"
+        aria-expanded="true"
+        hidden>
+        <%= t("components.feedback.close") %>
+      </button>
+
     </div>
   </div>
 </form>

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

@@ -1,42 +1,47 @@
 <div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
-  <div class="gem-c-feedback__prompt-questions js-prompt-questions" hidden>
-    <h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful") %></h2>
-    
-    <ul class="gem-c-feedback__option-list">
-      <li class="gem-c-feedback__option-list-item govuk-visually-hidden" style="display: none" hidden>
-        <% # Maybe button exists only to try and capture clicks by bots %>
-        <%= link_to "/contact/govuk", {
-          class: 'gem-c-feedback__prompt-link',
-          data: {
-            'track-category' => 'yesNoFeedbackForm',
-            'track-action' => 'ffMaybeClick'
-          },
-          role: 'button',
-          style: 'display: none',
-          hidden: 'hidden',
-          'aria-hidden': 'true',
-        } do %>
-          <%= t("components.feedback.maybe") %>
-        <% 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?"}'>
-          <%= 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?"}'>
-          <%= t("components.feedback.no") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful") %></span>
-        </button>
-      </li>
-    </ul>
-  </div>
-  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success" role="alert" hidden>
-    <%= t("components.feedback.thank_you_for_feedback") %>
-  </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">
-      <%= t("components.feedback.something_wrong") %>
-    </button>
+  <div class="gem-c-feedback__prompt-content">
+    <div class="gem-c-feedback__prompt-questions js-prompt-questions" hidden>
+      <div class="gem-c-feedback__prompt-question-answer">
+        <h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful") %></h2>
+        <ul class="gem-c-feedback__option-list">
+          <li class="gem-c-feedback__option-list-item govuk-visually-hidden" style="display: none" hidden>
+            <% # Maybe button exists only to try and capture clicks by bots %>
+            <%= link_to "/contact/govuk", {
+              class: 'gem-c-feedback__prompt-link',
+              data: {
+                'track-category' => 'yesNoFeedbackForm',
+                'track-action' => 'ffMaybeClick'
+              },
+              role: 'button',
+              style: 'display: none',
+              hidden: 'hidden',
+              'aria-hidden': 'true',
+            } do %>
+              <%= t("components.feedback.maybe") %>
+            <% 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?"}'>
+              <%= 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?"}'>
+              <%= t("components.feedback.no") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful") %></span>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success" role="alert" hidden>
+      <%= t("components.feedback.thank_you_for_feedback") %>
+    </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?"}'>
+        <%= t("components.feedback.something_wrong") %>
+      </button>
+    </div>
   </div>
 </div>

data/config/locales/en.yml

@@ -61,7 +61,7 @@ en:
         publication: Publication for %{nation}
       wales: Wales
     feedback:
-      close: Close
+      close: Cancel
       dont_include_personal_info: Don’t include personal or financial information like your National Insurance number or credit card details.
       email_address: Email address
       help_us_improve_govuk: Help us improve GOV.UK

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "31.1.2".freeze
+  VERSION = "32.0.0".freeze
 end