govuk_publishing_components 34.0.0 → 34.5.0

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

@@ -0,0 +1,209 @@
+//= require govuk_publishing_components/analytics
+//= require govuk_publishing_components/analytics-ga4
+//= require govuk_publishing_components/analytics/linked-domains
+
+window.GOVUK = window.GOVUK || {}
+
+window.GOVUK.loadAnalytics = {
+  productionDomains: [
+    'www.gov.uk',
+    'www-origin.publishing.service.gov.uk'
+  ],
+  stagingDomains: [
+    'www.staging.publishing.service.gov.uk',
+    'www-origin.staging.publishing.service.gov.uk'
+  ],
+  integrationDomains: [
+    'www.integration.publishing.service.gov.uk',
+    'www-origin.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
+    },
+    staging: {
+      initialiseGA4: true,
+      auth: 'oJWs562CxSIjZKn_GlB5Bw',
+      preview: 'env-5'
+    },
+    integration: {
+      initialiseGA4: true,
+      auth: 'C7iYdcsOlYgGmiUJjZKrHQ',
+      preview: 'env-4'
+    },
+    development: {
+      initialiseGA4: true,
+      auth: 'bRiZ-jiEHtw6hHpGd6dF9w',
+      preview: 'env-3'
+    }
+  },
+
+  loadUa: function (currentDomain) {
+    // The domain can be overridden. This is needed for testing as we need to fake the domain that we are on to test each environment.
+    currentDomain = currentDomain || window.location.hostname
+
+    // Universal Analytics variables
+    window.GOVUK.analyticsVars = window.GOVUK.analyticsVars || {}
+    window.GOVUK.analyticsVars.primaryLinkedDomains = ['account.gov.uk']
+    window.GOVUK.analyticsVars.linkedDomains = this.linkedDomains
+    window.GOVUK.analyticsVars.gaProperty = 'UA-UNSET'
+    window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-UNSET'
+
+    if (this.arrayContains({ valueToFind: currentDomain, array: this.productionDomains })) {
+      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-1'
+      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
+    } else if (this.arrayContains({ valueToFind: currentDomain, array: this.stagingDomains })) {
+      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-20'
+      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
+    } else if (this.arrayContains({ valueToFind: currentDomain, array: this.integrationDomains })) {
+      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-22'
+      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
+    }
+
+    // Load universal analytics
+    if (typeof window.GOVUK.analyticsInit !== 'undefined') {
+      window.GOVUK.analyticsInit()
+    }
+  },
+
+  loadGa4Vars: function () {
+    // If we recognise the environment, load the GA4 vars
+    if (this.ga4EnvironmentVariables[this.environment]) {
+      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[this.environment].auth
+      window.GOVUK.analyticsGa4.vars.preview = this.ga4EnvironmentVariables[this.environment].preview
+      window.GOVUK.analyticsGa4.vars.environment = this.environment // Used for testing and debugging
+
+      window.GOVUK.analyticsGa4.vars.gem_version = 'not found'
+      var gemMeta = document.querySelector('meta[name="govuk:components_gem_version"]')
+      if (gemMeta) {
+        window.GOVUK.analyticsGa4.vars.gem_version = gemMeta.getAttribute('content')
+      }
+
+      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)
+    }
+  },
+
+  addGtmScriptToDom: function () {
+    var firstScript = document.getElementsByTagName('script')[0]
+    var newScript = document.createElement('script')
+    newScript.async = true
+
+    // initialise GTM
+    window.dataLayer = window.dataLayer || []
+    window.dataLayer.push({ 'gtm.blocklist': ['customPixels', 'customScripts', 'html', 'nonGoogleScripts'] })
+    window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
+
+    var auth = window.GOVUK.analyticsGa4.vars.auth || ''
+    var preview = window.GOVUK.analyticsGa4.vars.preview || ''
+    if (auth) {
+      auth = '&gtm_auth=' + auth
+    }
+    if (preview) {
+      preview = '&gtm_preview=' + preview + '&gtm_cookies_win=x'
+    }
+
+    this.googleSrc = 'https://www.googletagmanager.com/gtm.js?id=' + window.GOVUK.analyticsGa4.vars.id + auth + preview
+    newScript.src = this.googleSrc
+    firstScript.parentNode.insertBefore(newScript, firstScript)
+  },
+
+  loadGa4: function (currentDomain) {
+    // The domain can be overridden. This is needed for testing as we need to fake the domain that we are on to test each environment.
+    currentDomain = currentDomain || window.location.hostname
+
+    window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+
+    if (typeof window.GOVUK.analyticsGa4.core === 'undefined') {
+      console.error('load-analytics.js: window.GOVUK.analyticsGa4.core was not found - has ./analytics-ga4.js been imported?')
+      return
+    }
+
+    this.environment = ''
+    // Categorise current environment
+    if (this.arrayContains({ valueToFind: currentDomain, array: this.productionDomains })) {
+      this.environment = 'production'
+    } else if (this.arrayContains({ valueToFind: currentDomain, array: this.stagingDomains })) {
+      this.environment = 'staging'
+    } else if (this.arrayContains({ valueToFind: currentDomain, array: this.integrationDomains })) {
+      this.environment = 'integration'
+    } else if (this.arrayContains({ valueToFind: currentDomain, array: this.developmentDomains }) || currentDomain.indexOf('.dev.gov.uk') !== -1) {
+      this.environment = 'development'
+    }
+
+    if (!this.environment) {
+      console.error('load-analytics.js: environment for GA4 not recognised - ' + this.environment + ' on ' + currentDomain)
+      return
+    }
+
+    // Don't load GA4 if initialiseGA4 is set to false. This allows us to disable analytics if required.
+    if (!this.ga4EnvironmentVariables[this.environment].initialiseGA4) {
+      return
+    }
+
+    // to be added: digital identity consent mechanism
+    var consentCookie = window.GOVUK.getConsentCookie()
+    if (consentCookie && consentCookie.usage) {
+      // Creates 'window.GOVUK.analyticsGa4.vars', then adds the gtm.js script to the DOM.
+      window.GOVUK.loadAnalytics.loadGa4Vars()
+      window.GOVUK.loadAnalytics.addGtmScriptToDom()
+
+      /* Initialises our GA4 modules once the DOM has loaded.
+          document.readyState is needed as when cookies aren't set the DOM is likely already loaded.
+          Therefore, if they accept cookies after the page has loaded our modules wouldn't initialise,
+          as DOMContentLoaded won't fire if the DOM has already loaded. */
+      if (document.readyState === 'complete') {
+        window.GOVUK.loadAnalytics.startGa4Modules()
+      } else {
+        window.addEventListener('DOMContentLoaded', function () {
+          window.GOVUK.loadAnalytics.startGa4Modules()
+        })
+      }
+
+      // to be added: cross domain tracking code
+    } else {
+      window.addEventListener('cookie-consent', function (e) {
+        window.GOVUK.loadAnalytics.loadGa4()
+      })
+    }
+  },
+
+  startGa4Modules: function () {
+    // Some tests initialise GA4, but we do not want our modules initialising, so this check is in place.
+    if (!window.GOVUK.analyticsGa4.vars.disableModules) {
+      var analyticsModules = window.GOVUK.analyticsGa4.analyticsModules
+      for (var property in analyticsModules) {
+        var module = analyticsModules[property]
+        if (typeof module.init === 'function') {
+          module.init()
+        }
+      }
+    }
+  },
+
+  arrayContains: function (params) {
+    if (!params || !params.valueToFind || !params.array) {
+      return false
+    }
+
+    return params.array.indexOf(params.valueToFind) !== -1
+  }
+}
+
+// This if statement stops this function running during testing
+if (!window.jasmine) {
+  window.GOVUK.loadAnalytics.loadUa()
+  window.GOVUK.loadAnalytics.loadGa4()
+}

data/app/assets/javascripts/govuk_publishing_components/modules.js

@@ -38,8 +38,13 @@
           if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
             // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
             if (GOVUK.Modules[moduleName].prototype.init) {
-              new GOVUK.Modules[moduleName](element).init()
-              element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
+              try {
+                new GOVUK.Modules[moduleName](element).init()
+                element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
+              } catch (e) {
+                // if there's a problem with the module, catch the error to allow other modules to start
+                console.error('Error starting ' + moduleName + ' component JS: ' + e.message, window.location)
+              }
             }
           }
         }

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

@@ -95,32 +95,24 @@
   margin-bottom: 0;
   width: 100%;
 
-  &:hover {
-    // backup style for browsers that don't support rgba
-    background: govuk-colour("mid-grey");
-    background: rgba(govuk-colour("black"), .2);
-    color: govuk-colour("black");
-  }
-
-  &:active:focus:not(:hover) {
-    background: govuk-colour("yellow");
-  }
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
   }
-}
-
-.gem-c-feedback__email-link,
-.gem-c-feedback__prompt-link {
-  position: relative;
 
+  &:focus,
   &:focus:not(:active):not(:hover) {
+    background: govuk-colour("yellow");
     border-color: govuk-colour("black");
+    box-shadow: 0 5px  0 govuk-colour("black");
   }
 
-  &:focus,
   &:active {
-    color: $govuk-focus-text-colour;
+    color: govuk-colour("black");
+  }
+
+  &:hover {
+    background: govuk-colour("mid-grey");
+    color: govuk-colour("black");
   }
 }
 
@@ -231,13 +223,17 @@
 }
 
 .gem-c-feedback__email-link {
-  display: block;
+  display: inline-block;
   margin-top: govuk-spacing(4);
 
   @include govuk-media-query($from: desktop) {
-    display: inline-block;
     margin-top: govuk-spacing(2);
   }
+
+  &:focus,
+  &:active {
+    color: $govuk-focus-text-colour;
+  }
 }
 
 // static.css on GOV.UK overwrites the component styles using input[type="text"]

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -131,7 +131,7 @@
   list-style: none;
 
   .gem-c-image-card__list-item {
-    margin-bottom: govuk-spacing(1);
+    margin-bottom: govuk-spacing(2);
   }
 
   .gem-c-image-card__list-item--text {
@@ -208,6 +208,87 @@
   }
 }
 
+// The following two rules are used to 'trick' the
+// Youtube embed into using the desktop styles. Without
+// this, the Youtube embed will use mobile styles in
+// desktop viewports. The Youtube mobile styles are more
+// challenging to use with a keyboard as they are designed
+// for a touch screen interface. There is seemingly no way
+// to make an iframe request the desktop version of a site
+// and there is no parameter in the Youtube embed that would
+// force the desktop styles. Hence this workaround.
+
+// In the first rule, we are adding an arbitrarly large
+// enough px to the width of the Youtube iframe so that
+// it will use the desktop styling. Unfortunately, this width
+// would result in the Youtube embed overlapping into the
+// text content. To stop this happening, we scale the size of
+// the embed down.
+
+.gem-c-image-card__youtube-video-embed iframe {
+  @include govuk-media-query($from: tablet) {
+    transform: scale(.7);
+    width: calc(100% + 45px);
+  }
+  z-index: 1;
+}
+
+// In the second rule, we scale the container of the embed
+// up by the amount that we scaled the Youtube embed down.
+// This results in the embed being the correct size and the
+// desktop styles being used.
+
+.gem-c-image-card__youtube-video-embed {
+  @include govuk-media-query($from: tablet) {
+    transform: scale(1.3);
+  }
+  margin: 0;
+  padding-bottom: 68%;
+}
+
+// This rule is to reposition the embed to the correct
+// place in the image card. As the embed has been scaled
+// down and then scaled up again, it is misaligned and
+// here we correct that misalignment.
+
+.gem-c-image-card__youtube-video-embed.gem-c-govspeak__youtube-video iframe {
+  @include govuk-media-query($from: tablet) {
+    left: -22px;
+    top: -10px;
+  }
+}
+
+.gem-c-image-card__youtube-thumbnail-image-container {
+  position: relative;
+
+  &:before {
+    background: url("govuk_publishing_components/youtube-play-icon.png");
+    background: url("govuk_publishing_components/youtube-play-icon.svg"), linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 75px auto;
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+}
+
+.gem-c-image-card__youtube-thumbnail-image {
+  filter: brightness(.9);
+}
+
+.gem-c-image-card__youtube-thumbnail-container-text {
+  margin-top: 10px;
+}
+
+.gem-c-image-card__youtube-thumbnail-container:focus .gem-c-image-card__youtube-thumbnail-container-text {
+  @include govuk-focused-text;
+}
+
 .gem-c-image-card--no-image {
   .gem-c-image-card__text-wrapper {
     @include govuk-media-query($from: mobile, $until: tablet) {

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

@@ -10,7 +10,7 @@ $search-icon-size: 40px;
   width: $search-icon-size;
   height: $search-icon-size;
   height: govuk-px-to-rem($search-icon-size);
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") no-repeat -3px center;
+  background: image-url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;
 }
 
 // this overrides styles from static that break the look of the component