govuk_publishing_components 34.2.0 → 34.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 04ff78073c27727492f6e443164f9d15d35abdc2e22ac407693c2de1150fac51
-  data.tar.gz: 22829eace73fc47e3d43e5848e4f8c8ddb8588562787e600c408ae6dc5d67a15
+  metadata.gz: 2f2ee7abdd80e27a4dde6873f8242bc48780430becffdc8f34a57b90746807ea
+  data.tar.gz: 78ea4284a765350807dfa91da53a52f8a28a7d81ec348877d9efec97f5cb4588
 SHA512:
-  metadata.gz: d47fbb815b2d0538852f85e51d847d2fde2f93d88c043ced2209bcf186618e057423adf39742f204170464b76423321e571be23b94105ffab5eba1bc9824c935
-  data.tar.gz: a61767144465f49e6668ec69ed7b0b705685295930e19205ddd0e134f7cbd34e1e29460c8c4528df78206afb6ef3d63ee71a6911d1d55a07d81f24e6dca9e7f6
+  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/_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

@@ -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/_subscription-links.scss

@@ -123,7 +123,6 @@
   .gem-c-subscription-links__item--link {
     padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
     border: 1px solid transparent;
-    border-bottom: 1px solid govuk-colour("dark-grey", $legacy: "grey-1");
 
     &:focus {
       border-bottom-color: transparent;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss

@@ -3,21 +3,38 @@
   .steps {
     padding-left: 0;
     margin-left: 0;
-    overflow: hidden;
 
     > li {
-      background-position: 0 .87em;
-      background-repeat: no-repeat;
-      list-style-type: decimal;
+      list-style-type: none;
       margin-left: 0;
       padding: .75em 0 .75em 2.5em;
+      position: relative;
+
+      // IE doesn't render this correctly with this element as display:block
+      // (it leaves a space for the :before pseudo element) by setting to
+      // display inline block and a width of 100% it works correctly.
+      display: inline-block;
+      width: 100%;
+      box-sizing: border-box;
+
+      &:before {
+        background-color: govuk-colour("black");
+        border-radius: 50%;
+        color: govuk-colour("white");
+        float: left;
+        font-size: 80%;
+        height: 1.75em;
+        left: .3em;
+        line-height: 1.75em;
+        position: absolute;
+        text-align: center;
+        top: .9em;
+        width: 1.75em;
+      }
 
       @for $i from 1 through 30 {
-        &:nth-child(#{$i}) {
-          background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
-          background-repeat: no-repeat;
-          background-position: .2em .7em;
-          background-size: 1.4em 1.4em;
+        &:nth-child(#{$i}):before {
+          content: "#{$i}";
         }
       }
     }

data/app/controllers/govuk_publishing_components/application_controller.rb

@@ -5,19 +5,6 @@ module GovukPublishingComponents
     before_action :set_x_frame_options_header
     before_action :set_disable_slimmer_header
 
-    if defined? content_security_policy
-      content_security_policy do |p|
-        # don't do anything if the app doesn't have a content security policy
-        next unless p.directives.any?
-
-        # Unfortunately the axe core script uses a dependency that uses eval
-        # see: https://github.com/dequelabs/axe-core/issues/1175
-        # Thus all components shown by govuk_publishing_components need this
-        # enabled
-        p.script_src(*p.script_src, :unsafe_eval)
-      end
-    end
-
   private
 
     def set_x_frame_options_header

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

@@ -12,8 +12,8 @@
   accordion_classes << (shared_helper.get_margin_bottom)
 
   translations = {
-    show_text: "components.accordion.show",
-    hide_text: "components.accordion.hide",
+    show_text: "common.show",
+    hide_text: "common.hide",
     show_all_text: "components.accordion.show_all",
     hide_all_text: "components.accordion.hide_all",
     this_section_visually_hidden: "components.accordion.this_section_visually_hidden",

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/_error_message.html.erb

@@ -4,12 +4,13 @@
   css_classes = %w( gem-c-error-message govuk-error-message )
   css_classes << classes if classes
   items ||= []
+  right_to_left ||= false
 
   if items.any?
     errors = items.map { |item| capture { item[:text] } }
     text = raw(errors.join("<br />"))
   end
 %>
-<%= tag.p id: id, class: css_classes do %>
+<%= tag.p id: id, class: css_classes, dir: right_to_left ? "rtl" : nil do %>
   <span class="govuk-visually-hidden">Error:</span> <%= text %>
 <% end %>

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

@@ -7,7 +7,7 @@
     gtm_attributes << "gtm_preview=" + gtm_preview if gtm_preview
   gtm_attributes = gtm_attributes.join('&')
 %>
-<script>
+<%= javascript_tag nonce: true do -%>
 var doNotTrack = ( navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes' || navigator.msDoNotTrack === '1' || window.doNotTrack === '1' )
 if (!doNotTrack) {
   (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -16,4 +16,4 @@ if (!doNotTrack) {
   'https://www.googletagmanager.com/gtm.js?id='+i+dl+'&<%= raw gtm_attributes %>';f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','<%= gtm_id %>');
 }
-</script>
+<% end -%>

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

@@ -1,11 +1,12 @@
 <%
   id ||= "hint-#{SecureRandom.hex(4)}"
+  right_to_left ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   css_classes = %w( gem-c-hint govuk-hint )
   css_classes << shared_helper.get_margin_bottom
 %>
 
-<%= tag.div id: id, class: css_classes do %>
+<%= tag.div id: id, class: css_classes, dir: right_to_left ? "rtl" : nil do %>
   <%= text %>
 <% end %>