govuk_publishing_components 37.1.1 → 37.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6371bbc7ca91fdd7a004050d47b2f09ac4d55244a8c7475692022e87af313b80
-  data.tar.gz: aa375ef7ebb426df626123c3832df1b926b562633c36d8af8202a82cff4d1f65
+  metadata.gz: dd6a567dc9d2f526c099f1a5cffe3466e1198dd4e0dc0daa657fa1263ca747ee
+  data.tar.gz: 9b371409800e9c9bf9d78b8587a07c625824bdda222feea5a8eb19136adbece6
 SHA512:
-  metadata.gz: 7bc4e2777a12f8a6e6a68de36a0d4bb92d6d5f97e2b16e1a07eb264285c0a5f97c2b0b0d205946c570436368dc7319da9c5796de4c97a700939e3be39f27b120
-  data.tar.gz: 24472468c3ebe08a695d1a1f3b03f7e2a21a1850257d8ca0a121663a1ff3d9176de1421746c0e292b589d7f08f7127ec1670946349e2e830ebb080cd1964e9a8
+  metadata.gz: d542c5aa0c5a03260cd4df7c2752bef05c9e556ec5b7dad4a2fc2267f841d3d5c346b8b892606738ca6162833c0e8183b1c30521aceb3421dca539ab80dfe896
+  data.tar.gz: 938b1fca6df8b444cac7d2a0d5643c024d17b4c3bbe3488233457e970d5ab7c6a1bb5418bfa0790b45f04927695d48ba8b99344d4c29dd83eed843390fb8a302

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

@@ -34,8 +34,14 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       return navigator.userAgent
     },
 
+    getTimestamp: function () {
+      return Date.now().toString()
+    },
+
     sendData: function (data) {
       data.govuk_gem_version = this.getGemVersion()
+      data.timestamp = this.getTimestamp()
+
       // set this in the console as a debugging aid
       if (window.GOVUK.analyticsGa4.showDebug) {
         if (data.event_data) {

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

@@ -75,14 +75,14 @@
   // given an object and a key, insert a value into object[key] if it exists
   Schemas.prototype.addToObject = function (obj, key, value) {
     if (key in obj) {
-      obj[key] = value
+      obj[key] = value + '' // ensure is a string
       return obj
     } else {
       // check for one level of nesting in the object
       for (var property in obj) {
         if (this.isAnObject(obj[property])) {
           if (key in obj[property]) {
-            obj[property][key] = value
+            obj[property][key] = value + '' // ensure is a string
             return obj
           }
         }

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

@@ -0,0 +1,109 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function CookieSettings ($module) {
+    this.$module = $module
+  }
+
+  CookieSettings.prototype.init = function () {
+    this.$module.submitSettingsForm = this.submitSettingsForm.bind(this)
+
+    document.querySelector('form[data-module=cookie-settings]')
+      .addEventListener('submit', this.$module.submitSettingsForm)
+
+    this.setInitialFormValues()
+  }
+
+  CookieSettings.prototype.setInitialFormValues = function () {
+    if (!window.GOVUK.cookie('cookies_policy')) {
+      window.GOVUK.setDefaultConsentCookie()
+    }
+
+    var currentConsentCookie = window.GOVUK.cookie('cookies_policy')
+    var currentConsentCookieJSON = JSON.parse(currentConsentCookie)
+
+    // We don't need the essential value as this cannot be changed by the user
+    delete currentConsentCookieJSON.essential
+
+    for (var cookieType in currentConsentCookieJSON) {
+      var radioButton
+
+      if (currentConsentCookieJSON[cookieType]) {
+        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=on]')
+      } else {
+        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=off]')
+      }
+
+      if (radioButton) {
+        radioButton.checked = true
+      }
+    }
+  }
+
+  CookieSettings.prototype.submitSettingsForm = function (event) {
+    event.preventDefault()
+
+    var formInputs = event.target.getElementsByTagName('input')
+    var options = {}
+
+    for (var i = 0; i < formInputs.length; i++) {
+      var input = formInputs[i]
+      if (input.checked) {
+        var name = input.name.replace('cookies-', '')
+        var value = input.value === 'on'
+
+        options[name] = value
+      }
+    }
+
+    window.GOVUK.setConsentCookie(options)
+    window.GOVUK.setCookie('cookies_preferences_set', true, { days: 365 })
+
+    this.fireAnalyticsEvent(options)
+
+    this.showConfirmationMessage()
+
+    return false
+  }
+
+  CookieSettings.prototype.fireAnalyticsEvent = function (consent) {
+    var eventLabel = ''
+
+    for (var option in consent) {
+      var optionValue = consent[option] ? 'yes' : 'no'
+      eventLabel += option + '-' + optionValue + ' '
+    }
+
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      window.GOVUK.analytics.trackEvent('cookieSettings', 'Save changes', { label: eventLabel })
+    }
+  }
+
+  CookieSettings.prototype.showConfirmationMessage = function () {
+    var confirmationMessage = document.querySelector('div[data-cookie-confirmation]')
+    // hide the message if already visible so assistive tech is triggered when it appears
+    confirmationMessage.style.display = 'none'
+    var previousPageLink = document.querySelector('.cookie-settings__prev-page')
+    var referrer = CookieSettings.prototype.getReferrerLink()
+
+    document.body.scrollTop = document.documentElement.scrollTop = 0
+
+    if (previousPageLink) {
+      if (referrer && referrer !== document.location.pathname) {
+        previousPageLink.href = referrer
+        previousPageLink.style.display = 'inline'
+      } else {
+        previousPageLink.style.display = 'none'
+      }
+    }
+
+    confirmationMessage.style.display = 'block'
+  }
+
+  CookieSettings.prototype.getReferrerLink = function () {
+    return document.referrer ? new URL(document.referrer).pathname : false
+  }
+
+  Modules.CookieSettings = CookieSettings
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/load-analytics.js

@@ -3,49 +3,75 @@
 //= require govuk_publishing_components/analytics/linked-domains
 
 window.GOVUK.loadAnalytics = {
-  productionDomains: [
-    'www.gov.uk',
-    'www-origin.publishing.service.gov.uk',
-    'assets.publishing.service.gov.uk'
-  ],
-  stagingDomains: [
-    'www.staging.publishing.service.gov.uk',
-    'www-origin.staging.publishing.service.gov.uk',
-    'assets.staging.publishing.service.gov.uk'
-  ],
-  integrationDomains: [
-    'www.integration.publishing.service.gov.uk',
-    'www-origin.integration.publishing.service.gov.uk',
-    'assets.integration.publishing.service.gov.uk'
-  ],
-  developmentDomains: [
-    'localhost', '127.0.0.1', '0.0.0.0'
-  ],
-
-  // For Universal Analytics' cross domain tracking. linkedDomains is defined by the require statement at the top of the file.
-  linkedDomains: window.GOVUK.analytics.linkedDomains,
-
-  ga4EnvironmentVariables: {
-    // initialiseGA4 is used to enable/disable GA4 on specific environments
-    production: {
-      initialiseGA4: true
+  domains: [
+    {
+      // need to have this one at the start, see loadGa4 function
+      name: 'development',
+      domains: [
+        'localhost',
+        '127.0.0.1',
+        '0.0.0.0',
+        'dev.gov.uk'
+      ],
+      initialiseGA4: true,
+      id: 'GTM-MG7HG5W',
+      auth: 'bRiZ-jiEHtw6hHpGd6dF9w',
+      preview: 'env-3',
+      gaProperty: 'UA-UNSET',
+      gaPropertyCrossDomain: 'UA-UNSET'
+    },
+    {
+      name: 'production',
+      domains: [
+        'www.gov.uk',
+        'www-origin.publishing.service.gov.uk',
+        'assets.publishing.service.gov.uk'
+      ],
+      initialiseGA4: true,
+      id: 'GTM-MG7HG5W',
+      gaProperty: 'UA-26179049-1',
+      gaPropertyCrossDomain: 'UA-145652997-1'
     },
-    staging: {
+    {
+      name: 'staging',
+      domains: [
+        'www.staging.publishing.service.gov.uk',
+        'www-origin.staging.publishing.service.gov.uk',
+        'assets.staging.publishing.service.gov.uk'
+      ],
       initialiseGA4: true,
+      id: 'GTM-MG7HG5W',
       auth: 'oJWs562CxSIjZKn_GlB5Bw',
-      preview: 'env-5'
+      preview: 'env-5',
+      gaProperty: 'UA-26179049-20',
+      gaPropertyCrossDomain: 'UA-145652997-1'
     },
-    integration: {
+    {
+      name: 'integration',
+      domains: [
+        'www.integration.publishing.service.gov.uk',
+        'www-origin.integration.publishing.service.gov.uk',
+        'assets.integration.publishing.service.gov.uk'
+      ],
       initialiseGA4: true,
+      id: 'GTM-MG7HG5W',
       auth: 'C7iYdcsOlYgGmiUJjZKrHQ',
-      preview: 'env-4'
+      preview: 'env-4',
+      gaProperty: 'UA-26179049-22',
+      gaPropertyCrossDomain: 'UA-145652997-1'
     },
-    development: {
+    {
+      name: 'devdocs',
+      domains: [
+        'docs.publishing.service.gov.uk'
+      ],
       initialiseGA4: true,
-      auth: 'bRiZ-jiEHtw6hHpGd6dF9w',
-      preview: 'env-3'
+      id: 'GTM-TNKCK97'
     }
-  },
+  ],
+
+  // For Universal Analytics' cross domain tracking. linkedDomains is defined by the require statement at the top of the file.
+  linkedDomains: window.GOVUK.analytics.linkedDomains,
 
   loadUa: function (currentDomain) {
     currentDomain = currentDomain || window.location.hostname
@@ -57,17 +83,14 @@ window.GOVUK.loadAnalytics = {
     window.GOVUK.analyticsVars.gaProperty = 'UA-UNSET'
     window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-UNSET'
 
-    if (this.arrayContains(currentDomain, this.productionDomains)) {
-      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-1'
-      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
-    } else if (this.arrayContains(currentDomain, this.stagingDomains)) {
-      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-20'
-      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
-    } else if (this.arrayContains(currentDomain, this.integrationDomains)) {
-      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-22'
-      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
+    for (var i = 0; i < this.domains.length; i++) {
+      var current = this.domains[i]
+      if (this.arrayContains(currentDomain, current.domains)) {
+        window.GOVUK.analyticsVars.gaProperty = current.gaProperty
+        window.GOVUK.analyticsVars.gaPropertyCrossDomain = current.gaPropertyCrossDomain
+        break
+      }
     }
-
     // Load universal analytics
     if (typeof window.GOVUK.analyticsInit !== 'undefined') {
       window.GOVUK.analyticsInit()
@@ -76,29 +99,29 @@ window.GOVUK.loadAnalytics = {
 
   loadGa4: function (currentDomain) {
     currentDomain = currentDomain || window.location.hostname
-    var environment = ''
-
-    // Categorise current environment
-    if (this.arrayContains(currentDomain, this.productionDomains)) {
-      environment = 'production'
-    } else if (this.arrayContains(currentDomain, this.stagingDomains)) {
-      environment = 'staging'
-    } else if (this.arrayContains(currentDomain, this.integrationDomains)) {
-      environment = 'integration'
-    } else if (this.arrayContains(currentDomain, this.developmentDomains) || currentDomain.indexOf('.dev.gov.uk') !== -1) {
-      environment = 'development'
+    var environment = false
+    // lots of dev domains, so simplify the matching process
+    if (currentDomain.match(/\/{2}[a-zA-Z0-9.]+dev\.gov\.uk/)) {
+      environment = this.domains[0]
+    } else {
+      for (var i = 0; i < this.domains.length; i++) {
+        if (this.arrayContains(currentDomain, this.domains[i].domains)) {
+          environment = this.domains[i]
+          break
+        }
+      }
     }
 
     // If we recognise the environment (i.e. the string isn't empty), load in GA4
     if (environment) {
       // If analytics-ga4.js exists and our detected environment has 'initialiseGA4' set to true, load GA4.
-      if (typeof window.GOVUK.analyticsGa4.init !== 'undefined' && this.ga4EnvironmentVariables[environment].initialiseGA4) {
+      if (typeof window.GOVUK.analyticsGa4.init !== 'undefined' && environment.initialiseGA4) {
         window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
         window.GOVUK.analyticsGa4.vars = window.GOVUK.analyticsGa4.vars || {}
-        window.GOVUK.analyticsGa4.vars.id = 'GTM-MG7HG5W'
-        window.GOVUK.analyticsGa4.vars.auth = this.ga4EnvironmentVariables[environment].auth
-        window.GOVUK.analyticsGa4.vars.preview = this.ga4EnvironmentVariables[environment].preview
-        window.GOVUK.analyticsGa4.vars.environment = environment // Used for testing and debugging
+        window.GOVUK.analyticsGa4.vars.id = environment.id
+        window.GOVUK.analyticsGa4.vars.auth = environment.auth
+        window.GOVUK.analyticsGa4.vars.preview = environment.preview
+        window.GOVUK.analyticsGa4.vars.environment = environment.name // Used for testing and debugging
 
         window.GOVUK.analyticsGa4.vars.gem_version = 'not found'
         var gemMeta = document.querySelector('meta[name="govuk:components_gem_version"]')

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -157,7 +157,7 @@ module GovukPublishingComponents
     end
 
     def find_code_references(file, src, regex)
-      return clean_file_path(file) if regex.match?(src)
+      clean_file_path(file) if regex.match?(src)
     end
 
     def clean_file_path(file)

data/app/models/govuk_publishing_components/component_docs.rb

@@ -31,7 +31,7 @@ module GovukPublishingComponents
     end
 
     def component_in_use(component)
-      return true if @limit_to.include?(component)
+      true if @limit_to.include?(component)
     end
 
     def fetch_component_doc(id)

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

@@ -2,23 +2,39 @@
   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
   css_classes = %w(gem-c-details govuk-details)
   css_classes << shared_helper.get_margin_bottom
 
   details_data_attributes = {}
   details_data_attributes[:module] = 'govuk-details gem-details'
+  details_data_attributes[:module] = 'govuk-details gem-details ga4-event-tracker' unless disable_ga4
 
   data_attributes ||= {}
   data_attributes[:details_track_click] = ''
+  unless disable_ga4
+    ga4_event = {
+      event_name: "select_content",
+      type: "detail",
+      text: title,
+      section: title,
+      index_section: @ga4[:index_section],
+    }
+    ga4_event.merge!(ga4_attributes)
+    data_attributes[:ga4_event] = ga4_event
+  end
 
   summary_aria_attributes ||= {}
 %>
 <%= tag.details class: css_classes, data: details_data_attributes, open: open do %>
   <%= tag.summary class: "govuk-details__summary", data: data_attributes, aria: summary_aria_attributes do %>
-    <span class="govuk-details__summary-text">
+    <span class="govuk-details__summary-text" <% unless disable_ga4 %>data-ga4-expandable<% end %>>
       <%= title %>
     </span>
   <% end %>

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

@@ -7,13 +7,13 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns, brand_helper)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
-  classes = %w[gem-c-image-card]
-  classes << "govuk-grid-row" if card_helper.two_thirds
-  classes << "gem-c-image-card--large" if card_helper.large
-  classes << "gem-c-image-card--two-thirds" if card_helper.two_thirds
-  classes << "gem-c-image-card--no-image" unless (card_helper.image_src || card_helper.youtube_video_id)
-  classes << brand_helper.brand_class if brand_helper.brand_class
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-image-card")
+  component_helper.add_class("govuk-grid-row") if card_helper.two_thirds
+  component_helper.add_class("gem-c-image-card--large") if card_helper.large
+  component_helper.add_class("gem-c-image-card--two-thirds") if card_helper.two_thirds
+  component_helper.add_class("gem-c-image-card--no-image") unless (card_helper.image_src || card_helper.youtube_video_id)
+  component_helper.add_class(brand_helper.brand_class) if brand_helper.brand_class
 
   text_wrapper_classes = %w[gem-c-image-card__text-wrapper]
   text_wrapper_classes << "gem-c-image-card__text-wrapper--two-thirds" if card_helper.two_thirds
@@ -34,12 +34,12 @@
   ]
   extra_link_classes << brand_helper.color_class
 
-  data_modules = %w[]
-  data_modules << "gem-track-click ga4-link-tracker" if card_helper.is_tracking?
-  data_modules << "image-card" if card_helper.youtube_video_id
+  component_helper.add_data_attribute({ module: "gem-track-click" }) if card_helper.is_tracking?
+  component_helper.add_data_attribute({ module: "image-card" }) if card_helper.youtube_video_id
+  component_helper.set_lang(card_helper.lang)
 %>
 <% if card_helper.href || card_helper.extra_details.any? %>
-  <%= content_tag(:div, class: classes, "data-module": data_modules, lang: card_helper.lang) do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <%= content_tag(:div, class: text_wrapper_classes) do %>
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>

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

@@ -61,6 +61,27 @@ examples:
         tracking: GTM-123AB
       block: |
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
+  with_ga4_tracking:
+    description: |
+      GA4 tracking is mostly handled internally by the component, apart from the required attribute `index_section_count`. This records the number of details components on the page and must be passed by the hosting application. Other GA4 attributes can also be passed if required, including to override attributes set by the component (for some reason this doesn't work in the component guide but works in applications).
+
+      The tracking automatically includes `index_section` as the index of the component on the page compared with other instances of the component that are also being tracked, e.g. the first details component on a page will be `index_section` 1, the second `index_section` 2, etc.
+
+      Link tracking for the contents of the details component is not included due to varying tracking requirements. If you need to track links in the component, wrap it in the application with the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md).
+    data:
+      title: What did the ground say to the train?
+      ga4_attributes: {
+        index_section_count: 6,
+        type: "not the default"
+      }
+      block: |
+        Between you and me, I've been tracked.
+  disable_ga4_tracking:
+    description: Disables GA4 tracking on the component. Tracking is enabled by default.
+    data:
+      title: No tracking here
+      disable_ga4: true
+      block: Or here, but thanks for looking.
   open:
     data:
       title: Help with nationality

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

@@ -12,6 +12,7 @@ accessibility_criteria: |
   - include alt text for images when present
   - not have duplicate links for the image and the text
   - if the contents of the component are in a different language than the rest of the document, include an appropriate `lang` attribute to correctly identify the language used in the component
+uses_component_wrapper_helper: true
 shared_accessibility_criteria:
   - link
 embed: |
@@ -276,6 +277,23 @@ examples:
           }
         }
       ]
+  with_ga4_tracking:
+    description: The component does not include an option for GA4 tracking, but data attributes to enable the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) can be passed as shown.
+    data:
+      href: "/not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "News headline"
+      data_attributes:
+        module: "ga4-link-tracker"
+        ga4_link:
+          event_name: "navigation"
+          type: "homepage"
+          index_section: 1
+          index_link: 1
+          index_section_count: 1
+          index_total: 1
+          section: "homepage"
   with_metadata:
     description: Can be used for links to people pages to indicate payment type
     data:
@@ -293,17 +311,6 @@ examples:
         }
       ]
       extra_details_no_indent: true
-  with_lang:
-    description: |
-      Pass through an appropriate `lang` to set a HTML lang attribute for the component.
-
-      The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
-    data:
-      href: "/not-a-page"
-      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
-      image_alt: "some meaningful alt text please"
-      heading_text: Yr hyn rydym ni'n ei wneud
-      lang: cy
   with_sizes_attribute:
     description: |
       `sizes` is an attribute that makes use of html's native responsive images functionality.

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "37.1.1".freeze
+  VERSION = "37.2.1".freeze
 end