govuk_publishing_components 35.2.0 → 35.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 972ee046b894a4166b8098b0fd68443fe83c9dd3ca990dc53df66943719bc3f8
-  data.tar.gz: fe06a9efe47489b88fe35088fe043cbf404683516ba709d9ec8192412749e2e6
+  metadata.gz: 0f87c9fa99d845d53392c5a02a8c4330f7a9557b94290a55cc18b5f169862215
+  data.tar.gz: ee6d97596ccbc7cfc9704f95dd3b1940e6b60254fc3fe7f6c51d5d6c16d1ead4
 SHA512:
-  metadata.gz: 788a0616987260f023d3c4b982e9ae7ca1150bdf996ed6001c7d999eb22116725b4a5ebaef2069ab23882fb4d1acbdb7c47d7f0686c1ef4bd171773de27da178
-  data.tar.gz: ee4d860cc7fcaa7e7f374edd761d4f513455b319efea4b1e115667ae8cef89c0fef815c46c00b9b0330eb511ce6d5822dea79877174dddc3e1c67cb9feac3182
+  metadata.gz: 635eaae4b3ce872688184197dd240be9751f6d9286680f324a876cea3d00a9bfa0b6037b5817fbf58a66d319510dcbca747ff5c7bc69e5d76a7c33cb345963cb
+  data.tar.gz: 595feac64b2542ef4ff5cb669e7e12462cea78d250cb0d44f01312de9297379d0e2c9f4d8bff0ab75a59a3b523fd6d801df93518f4c407c600b87695c17c1ea8

data/app/assets/javascripts/component_guide/application.js

@@ -2,4 +2,5 @@
 //= require_tree .
 //= require ../govuk_publishing_components/dependencies
 //= require ../govuk_publishing_components/components/accordion
+//= require ../govuk_publishing_components/components/intervention
 //= require ../govuk_publishing_components/components/tabs

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

@@ -230,7 +230,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
           // Only index links that are not search results
           if (!link.getAttribute('data-ga4-ecommerce-path')) {
             totalLinks++
-            link.setAttribute('data-ga4-index', '{"index_link": "' + totalLinks + '"}')
+            link.setAttribute('data-ga4-index', '{"index_link": ' + totalLinks + '}')
           }
         }
 
@@ -273,6 +273,31 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
               index_link: parseInt(index[2])
             }
         }
+      },
+
+      addAttributesToElements: function (selector, dataAttributes) {
+        var targetElements = document.querySelectorAll(selector)
+
+        for (var i = 0; i < targetElements.length; i++) {
+          var element = targetElements[i]
+
+          for (var j = 0; j < dataAttributes.length; j++) {
+            var key = dataAttributes[j].key
+            var value = dataAttributes[j].value
+
+            // value must check for undefined only as it would return false on an empty string, the number 0, etc.
+            if (key && value !== undefined) {
+              var existingAttributeValue = element.getAttribute(key)
+
+              if (key === 'data-module' && existingAttributeValue) {
+                // Combines values to prevent replacing any existing data-module values.
+                element.setAttribute(key, existingAttributeValue + ' ' + value)
+              } else {
+                element.setAttribute(key, value)
+              }
+            }
+          }
+        }
       }
     },
 

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

@@ -108,20 +108,22 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Ga4LinkTracker.prototype.setIndex = function (indexData, target) {
-    var index
+    var index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(indexData)
 
     if (target.getAttribute('data-ga4-index')) {
       try {
-        index = JSON.parse(target.getAttribute('data-ga4-index'))
+        var indexLink = JSON.parse(target.getAttribute('data-ga4-index'))
+
+        // Check whether the index object already exists on a parent element, as is the case with tracking accordion links.
+        // If true, combine data-ga4-index with the index object. Otherwise, just return indexLink
+        index = index ? window.GOVUK.extendObject(index, indexLink) : indexLink
       } catch (e) {
         console.error('Unable to parse index as JSON: ' + e.message, window.location)
         return
       }
-    } else {
-      index = indexData || undefined
     }
 
-    return window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(index)
+    return index
   }
 
   Modules.Ga4LinkTracker = Ga4LinkTracker

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

@@ -8,6 +8,11 @@ var initFunction = function () {
     window.GOVUK.analyticsGa4.vars.internalDomains = []
     window.GOVUK.analyticsGa4.vars.internalDomains.push(window.GOVUK.analyticsGa4.core.trackFunctions.getHostname())
     window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(window.GOVUK.analyticsGa4.vars.internalDomains)
+    var attachmentLinkData = [
+      { key: 'data-module', value: 'ga4-link-tracker' },
+      { key: 'data-ga4-track-links-only', value: '' },
+      { key: 'data-ga4-link', value: JSON.stringify({ event_name: 'navigation', type: 'html attachment' }) }]
+    window.GOVUK.analyticsGa4.core.trackFunctions.addAttributesToElements('[data-ga4-attachment-link]', attachmentLinkData)
     window.GOVUK.analyticsGa4.core.load()
 
     var analyticsModules = window.GOVUK.analyticsGa4.analyticsModules

data/app/assets/javascripts/govuk_publishing_components/components/intervention.js

@@ -0,0 +1,69 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function Intervention ($module) {
+    this.$module = $module
+    this.$closeLink = this.$module.querySelector('.js-dismiss-link')
+    this.$campaignName = this.$module.getAttribute('data-intervention-name')
+    this.$campaignCookie = window.GOVUK.cookie('intervention_campaign') || ''
+  }
+
+  Intervention.prototype.init = function () {
+    this.$cookieHasCampaign = this.cookieHasCampaign()
+
+    if (this.$closeLink) {
+      this.$module.close = this.handleClose.bind(this)
+      this.$closeLink.addEventListener('click', this.$module.close)
+    }
+
+    if (this.$cookieHasCampaign) {
+      this.hideBanner()
+    }
+  }
+
+  Intervention.prototype.handleClose = function (event) {
+    event.preventDefault()
+
+    if (this.$cookieHasCampaign) {
+      this.setCookies()
+    }
+    this.hideBanner()
+  }
+
+  Intervention.prototype.cookieHasCampaign = function () {
+    if (this.$campaignCookie) {
+      return this.cookieValues().includes(this.$campaignName)
+    }
+    return false
+  }
+
+  Intervention.prototype.cookieValues = function () {
+    if (this.$campaignCookie !== null && this.$campaignCookie.length > 0) {
+      return this.$campaignCookie.split(',')
+    }
+  }
+
+  Intervention.prototype.appendCookieValues = function () {
+    return this.$campaignCookie + ',' + this.$campaignName
+  }
+
+  Intervention.prototype.setCookies = function () {
+    if (this.$campaignCookie) {
+      window.GOVUK.setCookie('intervention_campaign', this.appendCookieValues(), { days: 30 })
+    } else {
+      window.GOVUK.setCookie('intervention_campaign', this.$campaignName, { days: 30 })
+    }
+  }
+
+  Intervention.prototype.hideBanner = function () {
+    if (!this.$cookieHasCampaign) {
+      this.setCookies()
+    }
+
+    this.$module.hidden = true
+    this.$module.style.display = 'none'
+  }
+
+  Modules.Intervention = Intervention
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -17,6 +17,7 @@
     cookie_preferences_set: 'essential',
     cookies_preferences_set: 'essential',
     '_email-alert-frontend_session': 'essential',
+    intervention_campaign: 'essential',
     licensing_session: 'essential',
     govuk_contact_referrer: 'essential',
     multivariatetest_cohort_coronavirus_extremely_vulnerable_rate_limit: 'essential',

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

@@ -37,6 +37,7 @@
         index = i + 1
 
         item[:data_attributes] ||= nil
+        ga4_link_data_attributes ||= nil
 
         if ga4_tracking
           item[:data_attributes] ||= {}
@@ -49,6 +50,23 @@
               index_section_count: items.length,
             },
           }.to_json
+
+          # These attributes have been created separately from the item[:data_attributes] 
+          # object in order to keep them from colliding with GA4 event tracking and UA 
+          # tracking attributes
+          ga4_link_data_attributes = {}
+          ga4_link_data_attributes[:module] = "ga4-link-tracker"
+          ga4_link_data_attributes[:ga4_tracks_links_only] = ""
+          ga4_link_data_attributes[:ga4_set_indexes] = ""
+          ga4_link_data_attributes[:ga4_link] = {
+            event_name: "navigation",
+            type: "accordion",
+            section: item[:heading][:text],
+            index: {
+              index_section: index,
+              index_section_count: (items.length),
+            }
+          }.to_json
         end
 
         section_classes = %w(govuk-accordion__section)
@@ -74,7 +92,13 @@
           %>
           <%= tag.div(item[:summary][:text], id: "#{id}-summary-#{index}", class: summary_classes) if item[:summary].present? %>
         <% end %>
-        <%= tag.div(item[:content][:html], id: "#{id}-content-#{index}", class: "govuk-accordion__section-content", 'aria-labelledby': "#{id}-heading-#{index}") %>
+        <%= tag.div(
+          item[:content][:html], 
+          id: "#{id}-content-#{index}", 
+          class: "govuk-accordion__section-content", 
+          'aria-labelledby': "#{id}-heading-#{index}",
+          data: ga4_link_data_attributes
+        ) %>
       <% end %>
     <% end %>
   <% end %>

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

@@ -1,6 +1,7 @@
 <%
   add_gem_component_stylesheet("intervention")
 
+  name ||= ""
   dismiss_text ||= false
   suggestion_link_text ||= false
   suggestion_link_url ||= false
@@ -10,16 +11,23 @@
 
   data_attributes ||= {}
   suggestion_data_attributes ||= {}
-  dismiss_data_attributes ||= {}
+  data_attributes[:module] = "intervention"
+  data_attributes["intervention-name"] = name
 
   aria_attributes ||= {}
   aria_attributes[:label] = 'Intervention'
 
-  local_assigns[:query_string] ||= request.query_string
-  local_assigns[:suggestion_link_text] = suggestion_link_text
-  local_assigns[:suggestion_link_url] = suggestion_link_url
+  options = {
+    name: name,
+    dismiss_text: dismiss_text,
+    params: request.params,
+    query_string: request.query_string,
+    suggestion_text: suggestion_text,
+    suggestion_link_text: suggestion_link_text,
+    suggestion_link_url: suggestion_link_url,
+  }
 
-  intervention_helper = GovukPublishingComponents::Presenters::InterventionHelper.new(local_assigns)
+  intervention_helper = GovukPublishingComponents::Presenters::InterventionHelper.new(options)
   dismiss_href = intervention_helper.dismiss_link
 
   suggestion_tag_options = {
@@ -44,7 +52,7 @@
   }
   section_options.merge!({ hidden: true }) if hide
 %>
-<% if suggestion_text || (suggestion_link_text && suggestion_link_url) %>
+<% if intervention_helper.show? %>
   <%= tag.section **section_options do %>
     <p class="govuk-body">
       <%= tag.span suggestion_text, class: "gem-c-intervention__textwrapper" if suggestion_text %>
@@ -55,7 +63,7 @@
 
     <% if dismiss_text %>
       <p class="govuk-body">
-        <%= tag.a class: "govuk-link", href: dismiss_href, data: dismiss_data_attributes do %>
+        <%= tag.a class: "govuk-link js-dismiss-link", href: dismiss_href do %>
           <svg class="gem-c-intervention__dismiss-icon"
             width="19" height="19" viewBox="0 0 19 19"
             aria-hidden="true"

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

@@ -22,7 +22,7 @@
 %>
 <% if steps %>
   <div
-    data-module="gemstepnav<% if ga4_tracking %> ga4-event-tracker ga4-link-tracker<% end %>"
+    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 %>
@@ -73,7 +73,27 @@
             <% end %>
           </div>
 
-          <div class="gem-c-step-nav__panel js-panel" id="step-panel-<%= id %>-<%= step_index + 1 %>">
+          <%
+            ga4_link_data = {}
+
+            if ga4_tracking
+              ga4_link_data = {
+                "module": "ga4-link-tracker",
+                "ga4-track-links-only": "",
+                "ga4-set-indexes": "",
+                "ga4-link": {
+                  "event_name": "navigation",
+                  "type": "step by step",
+                  "index": {
+                    "index_section": step_index + 1
+                  },
+                  "section": step[:title]
+                }.to_json
+              }
+            end
+          %>
+
+          <%= tag.div(class: "gem-c-step-nav__panel js-panel", id: "step-panel-#{id}-#{step_index + 1}", data: ga4_link_data) do %>
             <%
               in_substep = false
               options[:step_nav_content_id] = step_nav_content_id
@@ -91,7 +111,7 @@
                 end
               %>
             <% end %>
-          </div>
+          <% end %>
 
         </li>
       <% end %>

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

@@ -6,7 +6,10 @@ body: |
   that would be useful to them. This component would be used to add this personalised content and would
   indicate to the user that this is not normally part of the page, but has been added for them specifically.
 
-  The dismiss link points to the current URL with the "hide-intervention" query string parameter set to "true". The backend should check for this string in order to render the same page without the intervention.
+  The dismiss link works without Javascript by pointing to the current URL with the "hide-intervention" 
+  query string parameter set to "true". It's progressively enhanced and sets a cookie to remember that 
+  the user has dismissed the banner before. The cookie requires a "name" parameter, the value of which 
+  is stored in the cookie to distinguish which campaign banner the user has dismissed.
 
 accessibility_criteria: |
   The intervention component must:
@@ -30,20 +33,20 @@ examples:
       suggestion_link_url: /travel-abroad
 
   with_dismiss_link:
+    description: | 
+      Name is required in order to set a cookie. The name value should be distinct to the campaign for the banner, 
+      so that other banners using this component are not hidden by accident.
     data:
       suggestion_text: You should renew your permit every 6 months.
       dismiss_text: Hide this suggestion
-
-  with_suggestion_link_only:
-    data:
-      suggestion_link_text: You can now apply for a permit online.
-      suggestion_link_url: /permit
+      name: campaign-name
 
   with_hide:
     description: |
       This example is for when we want to hide by default and display to the user based on some logic,
       either in the backend or with Javascript.
     data:
+      suggestion_text: You should renew your permit every 6 months.
       suggestion_link_text: You may be invited to fill in a questionnaire
       suggestion_link_url: /questionnaire
       hide: true
@@ -55,6 +58,7 @@ examples:
       Link text should tell the user that the link opens in a new tab.
       Note: "(opens in a new tab)" is added to link text if the phrase isn't included.
     data:
+      suggestion_text: You should renew your permit every 6 months.
       suggestion_link_text: You can now apply for a permit online
       suggestion_link_url: www.google.com/permit
       new_tab: true
@@ -76,6 +80,7 @@ examples:
         track-dimension-index: 29
         track-label: clicked suggestion
       dismiss_text: Hide this suggestion
+      name: another-campaign-name
       dismiss_data_attributes:
         track-category: interventionBanner
         track-action: interventionDismissed

data/lib/govuk_publishing_components/presenters/intervention_helper.rb

@@ -1,11 +1,15 @@
 module GovukPublishingComponents
   module Presenters
     class InterventionHelper
-      def initialize(local_assigns)
+      def initialize(options = {})
+        @name = options[:name]
+        @dismiss_text = options[:dismiss_text]
         @accessible_text_suffix = I18n.t("components.intervention.accessible_link_text_suffix")
-        @query_string = local_assigns[:query_string]
-        @suggestion_link_text = local_assigns[:suggestion_link_text]
-        @suggestion_link_url = local_assigns[:suggestion_link_url]
+        @params = options[:params]
+        @query_string = options[:query_string]
+        @suggestion_text = options[:suggestion_text]
+        @suggestion_link_text = options[:suggestion_link_text]
+        @suggestion_link_url = options[:suggestion_link_url]
       end
 
       def accessible_text
@@ -29,9 +33,16 @@ module GovukPublishingComponents
         rel
       end
 
+      def show?
+        return false if params["hide-intervention"] == "true"
+        return false if @dismiss_text && @name.blank?
+
+        @suggestion_text || (@suggestion_link_text && @suggestion_link_url)
+      end
+
     private
 
-      attr_reader :accessible_text_suffix, :query_string, :suggestion_link_text, :suggestion_link_url
+      attr_reader :accessible_text_suffix, :query_string, :params, :suggestion_text, :suggestion_link_text, :suggestion_link_url
     end
   end
 end

data/lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb

@@ -46,7 +46,6 @@ module GovukPublishingComponents
                 :li,
                 class: "gem-c-step-nav__list-item js-list-item #{link_active(contents[:active])}",
               ) do
-                @options[:ga4_index_total] = element[:contents].length if @options[:ga4_tracking]
                 create_list_item_content(contents)
               end,
             )
@@ -65,26 +64,11 @@ module GovukPublishingComponents
             concat create_context(link[:context])
           end
 
-          ga4_link_data ||= nil
-          if @options[:ga4_tracking]
-            ga4_link_data = {
-              "event_name": "navigation",
-              "type": "step by step",
-              "index": {
-                "index_section": (@options[:step_index] + 1).to_s,
-                "index_link": @link_index.to_s,
-              },
-              "index_total": @options[:ga4_index_total].to_s,
-              "section": @options[:step_title],
-            }.to_json
-          end
-
           link_to(
             href,
             rel: ("external" if href.start_with?("http")),
             data: {
               position: "#{@options[:step_index] + 1}.#{@link_index}",
-              ga4_link: ga4_link_data,
             },
             class: "gem-c-step-nav__link js-link",
           ) do

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.2.0".freeze
+  VERSION = "35.3.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.2.0
+  version: 35.3.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-31 00:00:00.000000000 Z
+date: 2023-04-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -484,6 +484,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/feedback.js
 - app/assets/javascripts/govuk_publishing_components/components/govspeak.js
 - app/assets/javascripts/govuk_publishing_components/components/image-card.js
+- app/assets/javascripts/govuk_publishing_components/components/intervention.js
 - app/assets/javascripts/govuk_publishing_components/components/layout-header.js
 - app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js
 - app/assets/javascripts/govuk_publishing_components/components/metadata.js
@@ -1415,7 +1416,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
+rubygems_version: 3.4.12
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications