govuk_publishing_components 34.3.0 → 34.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54771399098f08d7e3116e65b9c98eaa7036d1214eebc3e7a5c086083ad4c2c1
-  data.tar.gz: 362003c9ad5faea353aa8a47aa5a1f94dbe8f60074be83176af996fb5583f58d
+  metadata.gz: 2f2ee7abdd80e27a4dde6873f8242bc48780430becffdc8f34a57b90746807ea
+  data.tar.gz: 78ea4284a765350807dfa91da53a52f8a28a7d81ec348877d9efec97f5cb4588
 SHA512:
-  metadata.gz: c735097c6bd48644ddde9390b4484ee4b66c3742883e8fa8b3d3ab98793a937e62f240335c835f052fdc28876bc4e063a8a7311aa0ccc15267ff872a1b1eed8e
-  data.tar.gz: e852b2021cd42f28bde7905896931be1443aaec8bef0ffcee808fcf4836429181f4985a13c3a28920df8b6c424d12c6408964ff72c6213e5e5c96e0c3103211e
+  metadata.gz: 201e4229a22f1717f9d84a8049f90a734d083ccc8cc306474495bc2983818cad0baff6fc45ac20469d0e6ef1b486f9b9b901ca2d618e65270d24a885aabef4e4
+  data.tar.gz: aa1b6e36f56bc1f34d56e1631d2b2c9a63c88d8b50b5a6ee457098b09015996a67a48684a58c6b569157dc5dbb460160c2274f068cd844948d98931fbd043f5e

data/app/assets/images/govuk_publishing_components/youtube-play-icon.svg

@@ -0,0 +1,4 @@
+<svg width="79" height="55" viewBox="0 0 79 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.7503 0H40.1861C44.2104 0.014681 64.6016 0.161492 70.0996 1.63938C71.7617 2.09042 73.2763 2.96959 74.492 4.18902C75.7076 5.40846 76.5818 6.92545 77.0272 8.5884C77.5217 10.448 77.8693 12.9095 78.1043 15.4493L78.1533 15.9583L78.261 17.2306L78.3001 17.7396C78.6184 22.2124 78.6575 26.4014 78.6624 27.3165V27.6835C78.6575 28.6329 78.6135 33.1057 78.261 37.7645L78.2218 38.2783L78.1777 38.7873C77.9329 41.5864 77.5706 44.366 77.0272 46.4116C76.5832 48.0752 75.7094 49.5929 74.4936 50.8126C73.2777 52.0322 71.7624 52.9109 70.0996 53.3606C64.4204 54.8874 42.8347 54.9951 39.8434 55H39.1481C37.6353 55 31.3785 54.9706 24.818 54.7455L23.9858 54.7162L23.5598 54.6966L22.7226 54.6623L21.8854 54.6281C16.4511 54.3883 11.2762 54.0017 8.8919 53.3557C7.22972 52.9065 5.71482 52.0285 4.49899 50.8097C3.28315 49.591 2.40907 48.0743 1.9643 46.4116C1.42086 44.3709 1.05857 41.5864 0.813776 38.7873L0.774609 38.2734L0.735443 37.7645C0.493822 34.4485 0.359932 31.1256 0.333984 27.801L0.333984 27.199C0.343776 26.1469 0.382943 22.5109 0.647318 18.4981L0.681589 17.994L0.696276 17.7396L0.735443 17.2306L0.843151 15.9583L0.892109 15.4493C1.12711 12.9095 1.47471 10.4431 1.96919 8.5884C2.41321 6.92478 3.28697 5.40707 4.50285 4.18743C5.71874 2.96779 7.23402 2.08907 8.8968 1.63938C11.2811 1.0032 16.456 0.611709 21.8903 0.367025L22.7226 0.33277L23.5647 0.303409L23.9858 0.288727L24.8229 0.254472C29.4823 0.104601 34.1437 0.0213994 38.8054 0.0048939H39.7503V0ZM31.6673 15.7087V39.2864L52.0193 27.5024L31.6673 15.7087Z" fill="#EA3323"/>
+<path d="M31.668 15.7087V39.2865L52.0199 27.5025L31.668 15.7087Z" fill="white"/>
+</svg>

data/app/assets/javascripts/govuk_publishing_components/analytics/linked-domains.js

@@ -0,0 +1,135 @@
+// For Universal Analytics' cross domain tracking.
+window.GOVUK.analytics = window.GOVUK.analytics || {}
+window.GOVUK.analytics.linkedDomains = [
+  'access.service.gov.uk',
+  'access.tax.service.gov.uk',
+  'account.companieshouse.gov.uk',
+  'accounts.manage-apprenticeships.service.gov.uk',
+  'account.publishing.service.gov.uk',
+  'add-driving-licence-check-code.service.gov.uk',
+  'analyse-school-performance.service.gov.uk',
+  'appeal-tax-tribunal.service.gov.uk',
+  'apply-basic-criminal-record-check.service.gov.uk',
+  'apply-blue-badge.service.gov.uk',
+  'apply-company-tachograph-card.service.gov.uk',
+  'apply-for-bankruptcy.service.gov.uk',
+  'apply-for-debt-relief-order.service.gov.uk',
+  'apply-for-environmental-permit.service.gov.uk',
+  'apply-for-eu-settled-status.homeoffice.gov.uk',
+  'apply-for-innovation-funding.service.gov.uk',
+  'apply-for-refugee-integration-loan.service.gov.uk',
+  'apply-licence.ozone-depleting-substances.service.gov.uk',
+  'apply-quota.fluorinated-gas.service.gov.uk',
+  'apply-quota.ozone-depleting-substances.service.gov.uk',
+  'apprenticeships.gov.uk',
+  'beta.companieshouse.gov.uk',
+  'biometric-residence-permit.service.gov.uk',
+  'businessreadinessfund.beis.gov.uk',
+  'catchreturn.service.gov.uk',
+  'checklegalaid.service.gov.uk',
+  'check-mot.service.gov.uk',
+  'check-payment-practices.service.gov.uk',
+  'check-vehicle-recalls.service.gov.uk',
+  'civil-service-careers.gov.uk',
+  'civilservicejobs.service.gov.uk',
+  'claim.redundancy-payments.service.gov.uk',
+  'claim-power-of-attorney-refund.service.gov.uk',
+  'compare-school-performance.service.gov.uk',
+  'complete-deputy-report.service.gov.uk',
+  'contractsfinder.service.gov.uk',
+  'coronavirus.data.gov.uk',
+  'coronavirus-business-volunteers.service.gov.uk',
+  'coronavirus-shielding-support.service.gov.uk',
+  'coronavirus-vulnerable-people.service.gov.uk',
+  'courttribunalfinder.service.gov.uk',
+  'create-energy-label.service.gov.uk',
+  'create-qr-code-poster.service.gov.uk',
+  'cymraeg.registertovote.service.gov.uk',
+  'dartford-crossing-charge.service.gov.uk',
+  'design-system.service.gov.uk',
+  'devtracker.dfid.gov.uk',
+  'digitalmarketplace.service.gov.uk',
+  'eforms.homeoffice.gov.uk',
+  'electronic-visa-waiver.service.gov.uk',
+  'employmenttribunals.service.gov.uk',
+  'eu-settled-status-enquiries.service.gov.uk',
+  'faster-uk-entry.service.gov.uk',
+  'finance.manage-apprenticeships.service.gov.uk',
+  'find-and-update.company-information.service.gov.uk',
+  'findapprenticeship.service.gov.uk',
+  'find-coronavirus-support.service.gov.uk',
+  'find-employer-schemes.education.gov.uk',
+  'flood-map-for-planning.service.gov.uk',
+  'flood-warning-information.service.gov.uk',
+  'follow.company-information.service.gov.uk',
+  'gender-pay-gap.service.gov.uk',
+  'get-fishing-licence.service.gov.uk',
+  'get-information-schools.service.gov.uk',
+  'gro.gov.uk',
+  'helpforhouseholds.campaign.gov.uk',
+  'helpwithcourtfees.service.gov.uk',
+  'help-with-prison-visits.service.gov.uk',
+  'identity.company-information.service.gov.uk',
+  'identity-sandbox.company-information.service.gov.uk',
+  'import-products-animals-food-feed.service.gov.uk',
+  'lastingpowerofattorney.service.gov.uk',
+  'live.email-dvla.service.gov.uk',
+  'live.dvla-web-chat.service.gov.uk',
+  'loststolenpassport.service.gov.uk',
+  'makeaplea.service.gov.uk',
+  'managefleetvehicles.service.gov.uk',
+  'manage-apprenticeships.service.gov.uk',
+  'manage-fish-exports.service.gov.uk',
+  'manage-quota.fluorinated-gas.service.gov.uk',
+  'manage-water-abstraction-impoundment-licence.service.gov.uk',
+  'match.redundancy-payments.service.gov.uk',
+  'mot-testing.service.gov.uk',
+  'nominate-uk-honour.service.gov.uk',
+  'notice.redundancy-payments.service.gov.uk',
+  'passport.service.gov.uk',
+  'paydvlafine.service.gov.uk',
+  'payments.service.gov.uk',
+  'publish-payment-practices.service.gov.uk',
+  'queens-awards-enterprise.service.gov.uk',
+  'recruit.manage-apprenticeships.service.gov.uk',
+  'register.fluorinated-gas.service.gov.uk',
+  'register-trailer.service.gov.uk',
+  'register.ozone-depleting-substances.service.gov.uk',
+  'registertovote.service.gov.uk',
+  'register-vehicle.service.gov.uk',
+  'registers.service.gov.uk',
+  'reminders.mot-testing.service.gov.uk',
+  'renewable-heat-calculator.service.gov.uk',
+  'reply-jury-summons.service.gov.uk',
+  'report-director-conduct.service.gov.uk',
+  'report.fluorinated-gas.service.gov.uk',
+  'report.ozone-depleting-substances.service.gov.uk',
+  'right-to-rent.homeoffice.gov.uk',
+  'right-to-work.service.gov.uk',
+  'ruralpayments.service.gov.uk',
+  'schools-financial-benchmarking.service.gov.uk',
+  'secured.studentfinanceni.co.uk',
+  'secured.studentfinancewales.co.uk',
+  'selfservice.payments.service.gov.uk',
+  'send-money-to-prisoner.service.gov.uk',
+  'signin.service.gov.uk',
+  'sorn.service.gov.uk',
+  'staff.helpwithcourtfees.service.gov.uk',
+  'student-finance.service.gov.uk',
+  'tax.service.gov.uk',
+  'teacherservices.education.gov.uk',
+  'teaching-vacancies.service.gov.uk',
+  'to-visit-or-stay-in-the-uk.homeoffice.gov.uk',
+  'trade-tariff.service.gov.uk',
+  'tribunal-response.employmenttribunals.service.gov.uk',
+  'ukri.org',
+  'update-student-loan-employment-details.service.gov.uk',
+  'vehicle-operator-licensing.service.gov.uk',
+  'vehicleenquiry.service.gov.uk',
+  'viewdrivingrecord.service.gov.uk',
+  'view-and-prove-your-rights.homeoffice.gov.uk',
+  'view-immigration-status.service.gov.uk',
+  'visa-address-update.service.gov.uk',
+  'visas-immigration.service.gov.uk',
+  'your-defra-account.defra.gov.uk'
+]

data/app/assets/javascripts/govuk_publishing_components/components/image-card.js

@@ -0,0 +1,19 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ImageCard ($module) {
+    this.$module = $module
+    this.$module.youtubeLink = this.$module.querySelector('.gem-c-image-card__image-wrapper div')
+  }
+
+  ImageCard.prototype.init = function () {
+    var ytLink = new window.GOVUK.GovspeakYoutubeLinkEnhancement(
+      this.$module.youtubeLink,
+      'gem-c-govspeak__youtube-video gem-c-image-card__youtube-video-embed'
+    )
+    ytLink.init()
+  }
+
+  Modules.ImageCard = ImageCard
+})(window.GOVUK.Modules)

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

@@ -6,4 +6,13 @@
 
 document.addEventListener('DOMContentLoaded', function () {
   window.GOVUK.modules.start()
+
+  // if statements ensure these functions don't execute during testing
+  if (typeof window.GOVUK.analyticsGa4.vars === 'undefined') {
+    window.GOVUK.loadAnalytics.loadGa4()
+  }
+
+  if (typeof window.GOVUK.analyticsInit === 'undefined') {
+    window.GOVUK.loadAnalytics.loadUa()
+  }
 })

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -3,8 +3,9 @@
   window.GOVUK = window.GOVUK || {}
   var GOVUK = window.GOVUK || {}
 
-  var YoutubeLinkEnhancement = function ($element) {
+  var YoutubeLinkEnhancement = function ($element, $classOverride) {
     this.$element = $element
+    this.$classOverride = typeof $classOverride !== 'undefined' ? $classOverride : 'gem-c-govspeak__youtube-video'
   }
 
   YoutubeLinkEnhancement.prototype.init = function () {
@@ -70,7 +71,7 @@
     var parentContainer = parentPara.parentNode
 
     var youtubeVideoContainer = document.createElement('div')
-    youtubeVideoContainer.className += 'gem-c-govspeak__youtube-video'
+    youtubeVideoContainer.className += this.$classOverride
     youtubeVideoContainer.innerHTML = '<span id="' + elementId + '" data-video-id="' + id + '"></span>'
 
     options.title = $link.textContent

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

@@ -0,0 +1,113 @@
+//= require govuk_publishing_components/analytics
+//= require govuk_publishing_components/analytics-ga4
+//= require govuk_publishing_components/analytics/linked-domains
+
+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) {
+    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(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'
+    }
+
+    // Load universal analytics
+    if (typeof window.GOVUK.analyticsInit !== 'undefined') {
+      window.GOVUK.analyticsInit()
+    }
+  },
+
+  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'
+    }
+
+    // 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) {
+        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.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.init()
+      }
+    }
+  },
+
+  arrayContains: function (valueToFind, array) {
+    return array.indexOf(valueToFind) !== -1
+  }
+}

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

@@ -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/views/govuk_publishing_components/components/_contextual_footer.html.erb

@@ -1,10 +1,12 @@
 <% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request) %>
+<% ga4_tracking ||= false %>
 
 <% unless navigation.content_tagged_to_current_step_by_step? %>
   <div class="gem-c-contextual-footer">
     <%# Rendering related navigation because no step by step list %>
     <%= render 'govuk_publishing_components/components/related_navigation',
                content_item: content_item,
+               ga4_tracking: ga4_tracking,
                context: :footer %>
   </div>
 <% end %>

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

@@ -1,5 +1,9 @@
-<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request) %>
-<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
+<%
+  ga4_tracking ||= false
+  request.query_parameters[:ga4_tracking] = ga4_tracking
+  navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+%>
 
 <div class="gem-c-contextual-sidebar">
   <% if navigation.content_tagged_to_a_reasonable_number_of_step_by_steps? %>
@@ -12,7 +16,7 @@
     <%= render 'govuk_publishing_components/components/step_by_step_nav', navigation.step_nav_helper.sidebar %>
   <% else %>
     <%# Rendering related navigation sidebar because no step by step list %>
-    <%= render 'govuk_publishing_components/components/related_navigation', content_item: content_item, context: :sidebar %>
+    <%= render 'govuk_publishing_components/components/related_navigation', content_item: content_item, context: :sidebar, ga4_tracking: ga4_tracking %>
   <% end %>
 
   <% if navigation.content_tagged_to_other_step_by_steps? %>

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

@@ -1,12 +1,14 @@
 <%
   sizes ||= false
   brand ||= false
+
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
-  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
+  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns, brand_helper)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = "gem-c-image-card"
-  classes << " gem-c-image-card--large" if card_helper.large
-  classes << " gem-c-image-card--no-image" unless defined?(image_src)
+  classes = %w[gem-c-image-card]
+  classes << "gem-c-image-card--large" if card_helper.large
+  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
 
   font_size ||= card_helper.large ? 'm' : 's'
   heading_class = %w[gem-c-image-card__title]
@@ -23,11 +25,12 @@
   ]
   extra_link_classes << brand_helper.color_class
 
+  data_modules = %w[]
+  data_modules << "gem-track-click" if card_helper.is_tracking?
+  data_modules << "image-card" if card_helper.youtube_video_id
 %>
 <% if card_helper.href || card_helper.extra_details.any? %>
-  <div class="<%= classes %> <%= brand_helper.brand_class %>"
-    <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
-    <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
+  <%= content_tag(:div, class: classes, "data-module": data_modules, lang: card_helper.lang) do %>
     <div class="gem-c-image-card__text-wrapper">
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>
@@ -65,6 +68,6 @@
         <p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
       <% end %>
     </div>
-    <%= card_helper.image %>
-  </div>
+    <%= card_helper.media %>
+  <% end %>
 <% end %>

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

@@ -58,6 +58,7 @@
           "lux-reporter-script": path_to_javascript("govuk_publishing_components/vendor/lux/lux-reporter")
         }
       } %>
+    <%= javascript_include_tag "govuk_publishing_components/load-analytics" %>
 
     <%= csrf_meta_tags %>
 
@@ -78,6 +79,9 @@
     <% # The default og:image is added below :head so that scrapers see any custom metatags first, and this is just a fallback %>
     <meta property="og:image" content="<%= asset_path "govuk-opengraph-image.png" %>">
 
+    <% # Used for Google Analytics 4 debugging %>
+    <meta name="govuk:components_gem_version" content="<%= GovukPublishingComponents::VERSION %>" />
+
     <%= yield :head %>
   </head>
   <%= tag.body class: body_css_classes do %>

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

@@ -1,10 +1,15 @@
-<% related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns) %>
-<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
+<%
+  related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  ga4_tracking ||= false
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
+%>
 
 <% if related_nav_helper.related_navigation? %>
   <% random = SecureRandom.hex(4) %>
-  <div class="gem-c-related-navigation">
-
+  <%= tag.div(class: "gem-c-related-navigation", data: data) do %>
     <% if local_assigns[:context] != :footer %>
       <h2 id="related-nav-related_items-<%= random %>"
           class="gem-c-related-navigation__main-heading"
@@ -33,7 +38,8 @@
         section_title: section_title,
         links: links,
         section_index: section_index,
-        random: random %>
+        random: random,
+        ga4_tracking: ga4_tracking %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

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

@@ -69,3 +69,46 @@ examples:
           ordered_related_items:
             - title: "Find an apprenticeship"
               base_path: "/apply-apprenticeship"
+  with_ga4_tracking:
+    description: Adds Google Analytics 4 tracking to the Related Navigation component, if it is visible.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          topics:
+          - title: Apprenticeships, 14 to 19 education and training for work
+            base_path: /browse/education/find-course
+            document_type: topic
+          - title: Finding a job
+            base_path: /browse/working/finding-job
+            document_type: topic
+          - title: Apprenticeships
+            base_path: /topic/further-education-skills/apprenticeships
+            document_type: topic
+          topical_events:
+          - title: UK-China High-Level People to People Dialogue 2017
+            base_path: /government/topical-events/uk-china-high-level-people-to-people-dialogue-2017
+            document_type: topical_event
+          related:
+          - title: Pest Control
+            base_path: /pest-control
+            document_type: contact
+          related_statistical_data_sets:
+          - title: International road fuel prices
+            base_path: /government/statistical-data-sets/comparisons-of-industrial-and-domestic-energy-prices-monthly-figures
+            document_type: statistical_data_set
+          - title: Weekly road fuel prices
+            base_path: /government/statistical-data-sets/oil-and-petroleum-products-weekly-statistics
+            document_type: statistical_data_set
+          world_locations:
+          - title: South Sudan
+            base_path: /world/south-sudan/news
+          - title: USA
+            base_path: /world/usa/news
+        details:
+          external_related_links:
+          - url: "http://media.slc.co.uk/sfe/1718/ft/sfe_terms_and_conditions_guide_1718_d.pdf"
+            title: "Student loans: terms and conditions 2017 to 2018 (PDF, 136KB)"
+          - title: The Student Room repaying your student loan
+            url: https://www.thestudentroom.co.uk/content.php?r=5967-Repaying-your-student-loan

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

@@ -103,3 +103,61 @@ examples:
               title: "Russian invasion of Ukraine: UK government response"
               base_path: "/government/topical-events/russian-invasion-of-ukraine-uk-government-response"
               locale: "en"
+  with_ga4_tracking_on_related_navigation:
+    description: Adds Google Analytics 4 tracking to components within the sidebar. Currently only the Related Navigation and Step by Step navigation components accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "UK forces arrive to reinforce NATO’s eastern flank"
+        content_id: "a342fd46-d801-4c1e-9d8f-f41fba6da563"
+        locale: "en"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection
+  with_ga4_tracking_on_step_by_step:
+    description: Adds Google Analytics 4 tracking to components within the sidebar. Currently only the Related Navigation and Step by Step navigation components accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          part_of_step_navs:
+            - title: "Learn to drive a car: step by step"
+              base_path: "/micropigs-vs-micropugs"
+              details:
+                step_by_step_nav:
+                  title: 'Stay in the UK after it leaves the EU (''settled status''): step by step'
+                  steps:
+                  - title: Check you're allowed to drive
+                    contents:
+                    - type: paragraph
+                      text: Most people can start learning to drive when they’re 17.
+                    - type: list
+                      contents:
+                      - text: Check what age you can drive
+                        href: "/vehicles-can-drive"
+                    optional: false
+                  - title: Testing the and
+                    logic: and
+                    contents:
+                    - type: paragraph
+                      text: hello hello what's UP
+                  - title: Driving lessons and practice
+                    contents:
+                    - type: paragraph
+                      text: You need a provisional driving licence to take lessons or practice.
+                    - type: list
+                      contents:
+                      - text: The Highway Code
+                        href: "/guidance/the-highway-code"
+                    optional: false

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

@@ -7,7 +7,9 @@ body: |
 
 shared_accessibility_criteria:
   - link
-
+accessibility_excluded_rules:
+  - duplicate-id-aria # IDs will be duplicated in component examples list
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     description: |

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

@@ -205,6 +205,29 @@ examples:
       <div class="govuk-!-width-full">
         <%= component %>
       </div>
+  youtube_video:
+    description: |
+      Given a Youtube video id, the image card will render a Youtube embed instead of an image. If Javascript fails to execute for any reason, then a fallback link to the Youtube video will be rendered instead.
+
+      Youtube does not support embeds on Internet Explorer versions lower than 10. In addition, Youtube's website will block any version of Internet Explorer using it. There is therefore no fallback for IE9 and lower.
+    data:
+      youtube_video_id: "XnP6jaK7ZAY"
+      href: "/still-not-a-page"
+      youtube_video_alt: "The vision for GOV.UK"
+      context:
+        date: 2017-06-14 11:30:00
+        text: "Announcement"
+      description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
+      extra_details: [
+        {
+          text: "Link to video transcript",
+          href: "/1"
+        }
+      ]
+    embed: |
+      <div class="govuk-!-width-full">
+        <%= component %>
+      </div>
   with_data_attributes:
     description: Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
@@ -296,4 +319,4 @@ examples:
     embed: |
       <div class="govuk-!-width-full">
         <%= component %>
-      </div>
+      </div>

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

@@ -14,9 +14,10 @@ accessibility_criteria: |
   - have a border colour contrast ratio of more than 4.5:1 with its background to be visually distinct
   - prevent screen readers from announcing the dismiss link icon
 
-
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

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

@@ -7,6 +7,7 @@ govuk_frontend_components:
   - header
 accessibility_excluded_rules:
   - landmark-banner-is-top-level # The header element can not be top level in the examples
+  - duplicate-id # IDs will be duplicated in component examples list
   - duplicate-id-aria # IDs will be duplicated in component examples list
   - form-field-multiple-labels # Form labels will be ambiguous in component examples list
   - landmark-no-duplicate-banner # banners will be duplicated in component examples list

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

@@ -21,6 +21,8 @@ accessibility_criteria: |
 
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

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

@@ -306,3 +306,30 @@ examples:
               title: "Student loans: terms and conditions 2017 to 2018 (PDF, 136KB)"
             - title: The Student Room repaying your student loan
               url: https://www.thestudentroom.co.uk/content.php?r=5967-Repaying-your-student-loan
+  with_ga4_tracking:
+    description: Adds Google Analytics 4 tracking to the component, using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md).
+    data:
+      ga4_tracking: true
+      content_item:
+        links:
+          ordered_related_items:
+            - title: Find an apprenticeship
+              base_path: /apply-apprenticeship
+            - title: Training and study at work
+              base_path: /training-study-work-your-rights
+            - title: Careers helpline for teenagers
+              base_path: /careers-helpline-for-teenagers
+          topics:
+            - title: Apprenticeships, 14 to 19 education and training for work
+              base_path: /browse/education/find-course
+              document_type: topic
+            - title: Finding a job
+              base_path: /browse/working/finding-job
+              document_type: topic
+            - title: Apprenticeships
+              base_path: /topic/further-education-skills/apprenticeships
+              document_type: topic
+          topical_events:
+            - title: UK-China High-Level People to People Dialogue 2017
+              base_path: /government/topical-events/uk-china-high-level-people-to-people-dialogue-2017
+              document_type: topical_event

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

@@ -14,6 +14,8 @@ accessibility_criteria: |
     [Watch a screen reader pronounce text differently based on lang attribute](https://bit.ly/screenreaderpronunciation)
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb

@@ -3,20 +3,23 @@
      aria-labelledby="related-nav-<%= section_title %>-<%= random %>"
      data-module="gem-toggle">
 
-  <% unless section_title === "related_items" %>
+  <% if section_title === "related_items" %>
+   <% heading_text = related_nav_helper.component_title %>
+  <% else %>
     <%=
       heading_class = related_nav_helper.section_css_class("gem-c-related-navigation__sub-heading", section_title)
       heading_data = { 'track-count' => related_nav_helper.section_data_track_count(:related_item_section) }
       heading_id = "related-nav-#{section_title}-#{random}"
       heading_level = related_nav_helper.section_heading_level
+      heading_text = related_nav_helper.construct_section_heading(section_title)
 
       content_tag(heading_level, id: heading_id, class: heading_class, data: heading_data) do
-        related_nav_helper.construct_section_heading(section_title)
+        heading_text
       end
     %>
   <% end %>
 
-  <ul class="gem-c-related-navigation__link-list" data-module="gem-track-click">
+  <ul class="gem-c-related-navigation__link-list">
     <% constructed_link_array = [] %>
 
     <% section_link_limit = related_nav_helper.calculate_section_link_limit(links) %>
@@ -24,6 +27,12 @@
     <% links.each.with_index(1) do |link, index| %>
       <%
         link_class = "govuk-link #{related_nav_helper.section_css_class("govuk-link gem-c-related-navigation__section-link", section_title, link: link, link_is_inline: (index >= section_link_limit))}"
+        ga4_attributes = {
+          event_name: "navigation",
+          type: "related content",
+          index: "#{section_index}.#{index}",
+          section: heading_text,
+        } if ga4_tracking
         link_element = link_to(
           link[:text],
           link[:path],
@@ -37,7 +46,8 @@
             track_options: {
               dimension28: links.length.to_s,
               dimension29: link[:text]
-            }
+            },
+            ga4_link: ga4_attributes,
           }
         )
       %>

data/lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -4,14 +4,15 @@ module GovukPublishingComponents
       include ActionView::Helpers
       include ActionView::Context
 
-      attr_reader :href, :href_data_attributes, :extra_details, :large, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading
+      attr_reader :href_data_attributes, :extra_details, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading, :youtube_video_id, :image_src
 
-      def initialize(local_assigns)
+      def initialize(local_assigns, brand_helper)
         @href = local_assigns[:href]
         @href_data_attributes = local_assigns[:href_data_attributes]
         @extra_details = local_assigns[:extra_details] || []
         @image_src = local_assigns[:image_src]
         @image_alt = local_assigns[:image_alt] || ""
+        @youtube_video_alt = local_assigns[:youtube_video_alt]
         @image_loading = local_assigns[:image_loading] || "auto"
         @srcset = local_assigns[:srcset] || nil
         @sizes = local_assigns[:sizes] || nil
@@ -23,6 +24,22 @@ module GovukPublishingComponents
         @extra_details_no_indent = local_assigns[:extra_details_no_indent]
         @metadata = local_assigns[:metadata]
         @lang = local_assigns[:lang]
+        @youtube_video_id = local_assigns[:youtube_video_id] || nil
+
+        @brand_helper = brand_helper
+      end
+
+      def href
+        return youtube_href if @youtube_video_id
+
+        @href
+      end
+
+      def large
+        # if youtube video, we don't want to use
+        # the small variant, large will be always
+        # true if a youtube_video_id is supplied
+        @youtube_video_id || @large
       end
 
       def is_tracking?
@@ -36,6 +53,12 @@ module GovukPublishingComponents
         false
       end
 
+      def media
+        return youtube_link if @youtube_video_id
+
+        image
+      end
+
       def image
         if @image_src
           content_tag(:figure, class: "gem-c-image-card__image-wrapper") do
@@ -75,6 +98,46 @@ module GovukPublishingComponents
       def description
         content_tag(:div, @description, class: "gem-c-image-card__description") if @description
       end
+
+      def youtube_href
+        "https://www.youtube.com/watch?v=#{@youtube_video_id}"
+      end
+
+      def youtube_thumbnail_url
+        "https://img.youtube.com/vi/#{@youtube_video_id}/maxresdefault.jpg"
+      end
+
+      def youtube_thumbnail
+        thumbnail = content_tag(:div, class: "gem-c-image-card__youtube-thumbnail-image-container") do
+          image_tag(
+            youtube_thumbnail_url,
+            class: "gem-c-image-card__image gem-c-image-card__youtube-thumbnail-image",
+            alt: "",
+            loading: @image_loading,
+          )
+        end
+        thumbnail + content_tag(:figcaption, @youtube_video_alt, class: "gem-c-image-card__youtube-thumbnail-container-text govuk-link #{@brand_helper.color_class}")
+      end
+
+      def youtube_link
+        content_tag(
+          :figure,
+          class: "gem-c-image-card__image-wrapper gem-c-image-card__image-wrapper--youtube-embed",
+        ) do
+          content_tag(:div) do
+            link_to(
+              href,
+              {
+                class: "govuk-body govuk-link gem-c-image-card__youtube-thumbnail-container js-youtube-card-embed",
+                "data-youtube-player-analytics": true,
+                "data-youtube-player-analytics-category": "EmbeddedYoutube",
+              },
+            ) do
+              youtube_thumbnail
+            end
+          end
+        end
+      end
     end
   end
 end

data/lib/govuk_publishing_components/presenters/page_with_step_by_step_navigation.rb

@@ -77,7 +77,7 @@ module GovukPublishingComponents
         if show_sidebar?
           @sidebar ||= current_step_nav.content.tap do |sb|
             configure_for_sidebar(sb)
-            sb.merge!(small: true, heading_level: 3, tracking_id: current_step_nav.content_id)
+            sb.merge!(small: true, heading_level: 3, tracking_id: current_step_nav.content_id, ga4_tracking: @query_parameters[:ga4_tracking])
           end
         end
       end

data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb

@@ -65,6 +65,10 @@ module GovukPublishingComponents
         end
       end
 
+      def component_title
+        I18n.t("components.related_#{@context}_navigation.related_content", default: I18n.t("components.related_navigation.related_content"))
+      end
+
       def section_css_class(css_class, section_title, link: {}, link_is_inline: false)
         css_classes = [css_class]
         css_classes << "#{css_class}--#{@context}" unless @context.nil?

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "34.3.0".freeze
+  VERSION = "34.4.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 34.3.0
+  version: 34.4.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-01-10 00:00:00.000000000 Z
+date: 2023-01-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -430,6 +430,8 @@ files:
 - app/assets/images/govuk_publishing_components/take-action-amber.svg
 - app/assets/images/govuk_publishing_components/take-action-green.svg
 - app/assets/images/govuk_publishing_components/take-action-red.svg
+- app/assets/images/govuk_publishing_components/youtube-play-icon.png
+- app/assets/images/govuk_publishing_components/youtube-play-icon.svg
 - app/assets/javascripts/component_guide/accessibility-test.js
 - app/assets/javascripts/component_guide/application.js
 - app/assets/javascripts/component_guide/filter-components.js
@@ -459,6 +461,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/analytics/external-link-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics/google-analytics-universal-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics/init.js
+- app/assets/javascripts/govuk_publishing_components/analytics/linked-domains.js
 - app/assets/javascripts/govuk_publishing_components/analytics/mailto-link-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics/page-content.js
 - app/assets/javascripts/govuk_publishing_components/analytics/pii.js
@@ -477,6 +480,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/error-summary.js
 - 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/layout-header.js
 - app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js
 - app/assets/javascripts/govuk_publishing_components/components/metadata.js
@@ -504,6 +508,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js
 - app/assets/javascripts/govuk_publishing_components/lib/toggle.js
 - app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js
+- app/assets/javascripts/govuk_publishing_components/load-analytics.js
 - app/assets/javascripts/govuk_publishing_components/modules.js
 - app/assets/javascripts/govuk_publishing_components/rum-loader.js
 - app/assets/javascripts/govuk_publishing_components/vendor/html5shiv-printshiv.js