govuk_publishing_components 35.14.0 → 35.15.1

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

@@ -17,6 +17,12 @@
     display: block !important; // stylelint-disable-line declaration-no-important
   }
 
+  .js-enabled .govuk-accordion__section-content[hidden] {
+    @supports (content-visibility: hidden) {
+      content-visibility: auto;
+    }
+  }
+
   // Change the colour from the blue link colour to black.
   .govuk-accordion__section-button {
     color: govuk-colour("black") !important; // stylelint-disable-line declaration-no-important

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

@@ -34,6 +34,12 @@
   // stylelint-disable max-nesting-depth
 
   .gem-c-govspeak {
+    a[href^="/"]:after,a[href^="http://"]:after,a[href^="https://"]:after {
+      content: " (" attr(href) ")";
+      font-size: 90%;
+      word-wrap: break-word;
+    }
+
     .media-player {
       display: none;
     }

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

@@ -693,7 +693,7 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-.gem-c-layout-super-navigation-header__navigation-second-items--topics {
+.gem-c-layout-super-navigation-header__navigation-second-items--services-and-information {
   @include govuk-media-query($until: "desktop") {
     border-bottom: 1px solid govuk-colour("mid-grey");
   }

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

@@ -54,8 +54,9 @@
     )
   end
 
+  data_attributes[:ga4_link] = ga4_link
 %>
-<%= tag.section class: class_names(container_class_names), data: { module: "ga4-link-tracker", ga4_track_links_only: "", ga4_link: ga4_link } do %>
+<%= tag.section class: class_names(container_class_names), data: { module: "ga4-link-tracker" } do %>
   <%= tag.div class: "gem-c-attachment__thumbnail" do %>
     <%= link_to attachment.url,
                 class: "govuk-link",

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

@@ -30,6 +30,8 @@
   services_cookies ||= nil
   css_classes = %w(gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
+
+  ga4_tracking ||= false
 %>
 
 <div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>">
@@ -39,7 +41,14 @@
         <h2 class="govuk-cookie-banner__heading govuk-heading-m"><%= title %></h2>
         <div tabindex="-1" class="govuk-cookie-banner__content gem-c-cookie-banner__confirmation">
           <span class="gem-c-cookie-banner__content"><%= text %></span>
-          <p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden><%= t("components.cookie_banner.confirmation_message.accepted") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
+          <p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden
+          <% if ga4_tracking %>
+            data-ga4-cookie-banner <%# GA4 pageview JS looks for data-ga4-cookie-banner %>
+            data-module="ga4-link-tracker"
+            data-ga4-track-links-only
+            data-ga4-set-indexes
+            data-ga4-link="<%= { event_name: "navigation", type: "cookie banner", section: t("components.cookie_banner.confirmation_message.accepted", locale: :en) }.to_json %>"
+          <% end %>><%= t("components.cookie_banner.confirmation_message.accepted") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
           <p class="gem-c-cookie-banner__confirmation-message--rejected govuk-body" hidden><%= t("components.cookie_banner.confirmation_message.rejected") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
         </div>
       </div>
@@ -85,7 +94,26 @@
       <% end %>
     </div>
     <div hidden class="js-hide-button govuk-button-group">
-      <button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner"><%= t("components.cookie_banner.hide") %></button>
+      <%
+        button_data_module = "gem-track-click"
+        button_data_module << " ga4-event-tracker" if ga4_tracking
+
+        ga4_event = {
+          event_name: "select_content",
+          type: "cookie banner",
+          action: "closed",
+          section: t("components.cookie_banner.confirmation_message.accepted", locale: :en)
+        }.to_json if ga4_tracking
+      %>
+      <button
+        class="gem-c-cookie-banner__hide-button govuk-button"
+        data-hide-cookie-banner="true"
+        data-module="<%= button_data_module %>"
+        data-track-category="cookieBanner"
+        data-track-action="Hide cookie banner"
+        <% if ga4_tracking %> data-ga4-event="<%= ga4_event %>" <% end %>>
+          <%= t("components.cookie_banner.hide") %>
+        </button>
     </div>
   </div>
 </div>

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

@@ -6,10 +6,24 @@
 
   applies_to ||= t("components.devolved_nations.applies_to")
   heading_level ||= 2
+  ga4_tracking ||= false
+  data_attributes = {}
+
+  if ga4_tracking
+    data_attributes[:ga4_devolved_nations_banner] = devolved_nations_helper.ga4_applicable_nations_title_text(true)
+    data_attributes[:module] = "ga4-link-tracker"
+    data_attributes[:ga4_track_links_only] = ""
+    data_attributes[:ga4_set_indexes] = ""
+    data_attributes[:ga4_link] = {
+      event_name: "navigation",
+      type: "devolved nations banner",
+      section: t("components.devolved_nations.applies_to", locale: :en) + " " + devolved_nations_helper.ga4_applicable_nations_title_text,
+    }.to_json
+  end
 %>
 
 <% if national_applicability.any? { |k,v| v[:applicable] == true } %>
-  <%= tag.section class: "gem-c-devolved-nations" do %>
+  <%= tag.section class: "gem-c-devolved-nations", data: data_attributes do %>
     <%= content_tag(shared_helper.get_heading_level, class: "govuk-heading-s govuk-!-margin-bottom-0") do %>
       <%= applies_to %> <%= devolved_nations_helper.applicable_nations_title_text %>
     <% end %>

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

@@ -217,11 +217,11 @@
                 end
               %>
 
-              <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.sub(" ", "-") %>">
+              <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.gsub(" ", "-") %>">
                 <h3 class="govuk-heading-m gem-c-layout-super-navigation-header__column-header">
                   <%= column[:label] %>
                 </h3>
-                <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.sub(" ", "-") %>">
+                <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.gsub(" ", "-") %>">
                   <% index_total = column[:menu_contents].length %>
                   <% column[:menu_contents].each_with_index do | item, index | %>
                       <%

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

@@ -20,7 +20,7 @@ uses_component_wrapper_helper: true
 examples:
   default:
     data:
-      heading: Topics
+      heading: Services and information
       items:
         - link:
             text: Benefits
@@ -109,7 +109,7 @@ examples:
 
       Override default subheading level by passing through `sub_heading_level` parameter (defaults to `<h3>`)
     data:
-      heading: Topics
+      heading: Services and information
       heading_level: 3
       sub_heading_level: 4
       items:

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

@@ -49,3 +49,8 @@ examples:
         cookie_preferences:
           text: How we use cookies
           href: "/cookies"
+  with_ga4_tracking:
+    description: |
+      Enables GA4 tracking on the banner. This includes link tracking on the "You have accepted cookies" section, and allows the pageview event that is sent when GA4 initialises to record the presence of the cookie acceptance message.
+    data:
+      ga4_tracking: true

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

@@ -89,3 +89,19 @@ examples:
       national_applicability:
         england:
           applicable: true
+  with_ga4_tracking:
+    description: |
+      Enables GA4 tracking on the banner. This includes link tracking on the component itself, and allows pageviews to record the presence of the banner on page load.
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        scotland:
+          applicable: true
+        wales:
+          applicable: true
+        northern_ireland:
+          applicable: false
+          alternative_url: /
+      type: detailed_guide
+      ga4_tracking: true

data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb

@@ -1,6 +1,7 @@
 <div class="govuk-width-container">
   <%= render "govuk_publishing_components/components/phase_banner", {
     phase: "beta",
+    ga4_tracking: true,
     message: sanitize(t("components.layout_for_public.account_layout.feedback.banners.phase_banner_html"))
   } unless omit_account_phase_banner %>
 

data/config/locales/en.yml

@@ -91,7 +91,7 @@ en:
       copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
       licence_html: All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
       navigation_links:
-      - title: Topics
+      - title: Services and information
         menu_contents:
         - text: Benefits
           href: "/browse/benefits"
@@ -171,7 +171,7 @@ en:
         href: "/browse"
         label: Menu
       navigation_links_columns:
-      - label: Topics
+      - label: Services and information
         size: 2
         menu_contents:
         - label: Benefits

data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb

@@ -8,17 +8,29 @@ module GovukPublishingComponents
         @type = local_assigns[:type] || "publication"
       end
 
-      def applicable_nations_title_text
+      def applicable_nations_title_text(use_english_translation = nil)
         @national_applicability
           .select { |_, v| v[:applicable] == true }
-          .map { |k, _| I18n.t("components.devolved_nations.#{k}") }
+          .map { |k, _| get_translation("components.devolved_nations.#{k}", use_english_translation) }
           .sort
           .to_sentence(
-            two_words_connector: I18n.t("components.devolved_nations.connectors.two_words"),
-            last_word_connector: I18n.t("components.devolved_nations.connectors.last_word"),
+            two_words_connector: get_translation("components.devolved_nations.connectors.two_words", use_english_translation),
+            last_word_connector: get_translation("components.devolved_nations.connectors.last_word", use_english_translation),
           )
       end
 
+      def get_translation(key, use_english_translation = nil)
+        return I18n.t(key, locale: :en) if use_english_translation
+
+        I18n.t(key)
+      end
+
+      def ga4_applicable_nations_title_text(remove_connector_word = nil)
+        return applicable_nations_title_text(true).gsub(" and", ",") if remove_connector_word
+
+        applicable_nations_title_text(true)
+      end
+
       def nations_with_urls
         @national_applicability
           .select do |_, v|

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.14.0".freeze
+  VERSION = "35.15.1".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.14.0
+  version: 35.15.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-17 00:00:00.000000000 Z
+date: 2023-09-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -1468,7 +1468,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.18
+rubygems_version: 3.4.19
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications