govuk_publishing_components 35.15.5 → 35.16.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3117de6a0b4a66caea24d67e4c462c728ef09fdc3cd3503ca0e2429673726631
-  data.tar.gz: 164a43d2a5ccc732f37fbdf6eb862fc500311f473b9cf1aca998515d6c978c14
+  metadata.gz: f215a358b5348fe905ec3b11ba2d3301dd263bbe5fe6961cdab3586de5f11ead
+  data.tar.gz: fee32e2c6b0b5a587b36577db5f51a731b8c3df67b5d7b30db4089650edf7efd
 SHA512:
-  metadata.gz: f9e56a63dc6f33e2df012aa4993cdd9404d07d8c96ecfe39ffe253676aa443deabadc47062b4a9443ee8e2f0fa89943629dd145b8e673f9c1ddef6e56fb5624d
-  data.tar.gz: ca4f944dbcbf4d77171f797bc1f3b16caad24b513dbb2c49d0749edba6570f9acb701922cd0fa4d33259ec2b80ebbabd5ad8e9390bfa2fb0e54aa58e5eab14d5
+  metadata.gz: f687a3d509cc89bd128d4c696f8f504575188b3ade7b6e536587c09be27ce7d0a3733203c52acfb48252ba6655a99b020d64d8ae5d2afbb23994e0f16a6bc2ad
+  data.tar.gz: 82488d3f778c9c3dc22f27eab581965780b695a43ff0585fd191771dbbf6aa05c165616c61d89873342755e9c90b13e638766f116fef25a72baf8c08a265362f

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -60,6 +60,7 @@
 //= link govuk_publishing_components/components/_metadata.css
 //= link govuk_publishing_components/components/_modal-dialogue.css
 //= link govuk_publishing_components/components/_notice.css
+//= link govuk_publishing_components/components/_option-select.css
 //= link govuk_publishing_components/components/_organisation-logo.css
 //= link govuk_publishing_components/components/_panel.css
 //= link govuk_publishing_components/components/_phase-banner.css

data/app/assets/images/option-select/input-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="40" height="40">
+  <path 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" />
+</svg>

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -28,7 +28,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             schema_name: this.getMetaContent('schema-name'),
             content_id: this.getMetaContent('content-id'),
 
-            browse_topic: this.getMetaContent('section'),
+            browse_topic: this.getMetaContent('ga4-browse-topic'),
             navigation_page_type: this.getMetaContent('navigation-page-type'),
             navigation_list_type: this.getMetaContent('navigation-list-type'),
             step_navs: this.getMetaContent('stepnavs'),
@@ -57,9 +57,11 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             emergency_banner: document.querySelector('[data-ga4-emergency-banner]') ? 'true' : undefined,
             phase_banner: this.getElementAttribute('data-ga4-phase-banner') || undefined,
             devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
-            cookie_banner: document.querySelector('[data-ga4-cookie-banner]') ? 'true' : undefined,
-            intervention: this.getInterventionPresence(),
-            query_string: this.getQueryString()
+            cookie_banner: this.getBannerPresence('[data-ga4-cookie-banner]'),
+            intervention: this.getBannerPresence('[data-ga4-intervention-banner]'),
+            query_string: this.getQueryString(),
+            search_term: this.getSearchTerm(),
+            spelling_suggestion: this.getMetaContent('spelling-suggestion')
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)
@@ -67,18 +69,35 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
     },
 
     getLocation: function () {
-      return this.PIIRemover.stripPII(this.stripGaParam(document.location.href))
+      return this.PIIRemover.stripPIIWithOverride(this.stripGaParam(document.location.href), true, true)
     },
 
     getSearch: function () {
       return window.location.search
     },
 
+    getSearchTerm: function () {
+      var queryString = this.getSearch()
+
+      if (!queryString) {
+        return undefined
+      }
+
+      var searchTerm = queryString.match(/keywords=([^&]*)/)
+      if (!searchTerm) {
+        return undefined
+      }
+
+      searchTerm = searchTerm[0].replace('keywords=', '')
+      searchTerm = this.PIIRemover.stripPIIWithOverride(searchTerm, true, true)
+      return searchTerm
+    },
+
     getQueryString: function () {
       var queryString = this.getSearch()
       if (queryString) {
-        queryString = this.PIIRemover.stripPIIWithOverride(queryString, true, true)
         queryString = this.stripGaParam(queryString)
+        queryString = this.PIIRemover.stripPIIWithOverride(queryString, true, true)
         queryString = queryString.substring(1) // removes the '?' character from the start.
         return queryString
       }
@@ -97,7 +116,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
     },
 
     getTitle: function () {
-      return this.PIIRemover.stripPII(document.title)
+      return this.PIIRemover.stripPIIWithOverride(document.title, true, true)
     },
 
     // window.httpStatusCode is set in the source of the error page in static
@@ -130,7 +149,10 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       var content = document.getElementById('content')
       var html = document.querySelector('html')
       if (content) {
-        return content.getAttribute('lang') || this.nullValue
+        var contentLanguage = content.getAttribute('lang')
+        if (contentLanguage) {
+          return contentLanguage
+        }
       }
       // html.getAttribute('lang') is untested - Jasmine would not allow lang to be set on <html>.
       return html.getAttribute('lang') || this.nullValue
@@ -146,18 +168,18 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       return (withdrawn === 'withdrawn') ? 'true' : 'false'
     },
 
-    getInterventionPresence: function () {
+    getBannerPresence: function (bannerSelector) {
       /* If the user hides the banner using JS, a cookie is set to hide it on future page loads.
-       * Therefore we need to start the intervention banner early so that it hides if this cookie exists.
+       * Therefore we need to start the banner module early so that it hides if this cookie exists.
        * Without this, our pageview object will track the banner as visible before it gets hidden. */
 
-      var intervention = document.querySelector('[data-ga4-intervention-banner]')
+      var banner = document.querySelector(bannerSelector)
 
-      if (intervention) {
-        window.GOVUK.modules.start(intervention)
-        var interventionHidden = intervention.getAttribute('hidden') === '' || intervention.getAttribute('hidden')
+      if (banner) {
+        window.GOVUK.modules.start(banner)
+        var bannerHidden = banner.getAttribute('hidden') === '' || banner.getAttribute('hidden')
 
-        if (interventionHidden) {
+        if (bannerHidden) {
           return undefined
         }
         return 'true'

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

@@ -70,7 +70,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       var data = {}
       data.event_name = 'video_' + event
       data.type = 'video'
-      data.url = player.getVideoUrl()
+      data.url = this.cleanVideoUrl(player.getVideoUrl())
       data.text = player.videoTitle
       data.action = event
       data.video_current_time = Math.round(player.getCurrentTime())
@@ -81,6 +81,12 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       var schema = schemas.mergeProperties(data, 'event_data')
 
       window.GOVUK.analyticsGa4.core.sendData(schema)
+    },
+
+    cleanVideoUrl: function (url) {
+      url = url.replace(/[?]{1}t=[0-9]+[&]{1}/, '?') // replace ?t=123& with ?
+      url = url.replace(/[&]{1}t=[0-9]+/, '') // replace &t=123 with ''
+      return url
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js

@@ -2,7 +2,7 @@
   'use strict'
 
   var GOVUK = global.GOVUK || {}
-  var EMAIL_PATTERN = /[^\s=/?&#]+(?:@|%40)[^\s=/?&]+/g
+  var EMAIL_PATTERN = /[^\s=/?&#+]+(?:@|%40)[^\s=/?&+]+/g
   var POSTCODE_PATTERN = /\b[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9](?!refund)[ABD-HJLNPQ-Z]{2,3}\b/gi
   var DATE_PATTERN_NUMERIC = /\d{4}(-?)\d{2}(-?)\d{2}/g
   var DATE_PATTERN_STRING = /\d{1,2}\s(January|February|March|April|May|June|July|August|September|October|November|December)\s\d{4}/g

data/app/assets/javascripts/govuk_publishing_components/components/option-select.js

@@ -0,0 +1,312 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  /* This JavaScript provides two functional enhancements to option-select components:
+    1) A count that shows how many results have been checked in the option-container
+    2) Open/closing of the list of checkboxes
+  */
+  function OptionSelect ($module) {
+    this.$optionSelect = $module
+    this.$options = this.$optionSelect.querySelectorAll("input[type='checkbox']")
+    this.$optionsContainer = this.$optionSelect.querySelector('.js-options-container')
+    this.$optionList = this.$optionsContainer.querySelector('.js-auto-height-inner')
+    this.$allCheckboxes = this.$optionsContainer.querySelectorAll('.govuk-checkboxes__item')
+    this.hasFilter = this.$optionSelect.getAttribute('data-filter-element') || ''
+
+    this.checkedCheckboxes = []
+
+    this.mq = window.matchMedia('(min-width: 641px)')
+    this.isClosedOnLoad = this.$optionSelect.getAttribute('data-closed-on-load')
+    this.isClosedOnLoadMobile = this.$optionSelect.getAttribute('data-closed-on-load-mobile')
+  }
+
+  OptionSelect.prototype.init = function () {
+    if (this.hasFilter.length) {
+      var filterEl = document.createElement('div')
+      filterEl.innerHTML = this.hasFilter
+
+      var optionSelectFilter = document.createElement('div')
+      optionSelectFilter.classList.add('gem-c-option-select__filter')
+      optionSelectFilter.innerHTML = filterEl.childNodes[0].nodeValue
+
+      this.$optionsContainer.parentNode.insertBefore(optionSelectFilter, this.$optionsContainer)
+
+      this.$filter = this.$optionSelect.querySelector('input[name="option-select-filter"]')
+      this.$filterCount = document.getElementById(this.$filter.getAttribute('aria-describedby'))
+      this.filterTextSingle = ' ' + this.$filterCount.getAttribute('data-single')
+      this.filterTextMultiple = ' ' + this.$filterCount.getAttribute('data-multiple')
+      this.filterTextSelected = ' ' + this.$filterCount.getAttribute('data-selected')
+      this.checkboxLabels = []
+      this.filterTimeout = 0
+
+      this.getAllCheckedCheckboxes()
+      for (var i = 0; i < this.$allCheckboxes.length; i++) {
+        this.checkboxLabels.push(this.cleanString(this.$allCheckboxes[i].textContent))
+      }
+
+      this.$filter.addEventListener('keyup', this.typeFilterText.bind(this))
+    }
+
+    // Attach listener to update checked count
+    this.$optionsContainer.querySelector('.gem-c-checkboxes__list').addEventListener('change', this.updateCheckedCount.bind(this))
+
+    // Replace div.container-head with a button
+    this.replaceHeadingSpanWithButton()
+
+    // Add js-collapsible class to parent for CSS
+    this.$optionSelect.classList.add('js-collapsible')
+
+    // Add open/close listeners
+    var button = this.$optionSelect.querySelector('.js-container-button')
+    button.addEventListener('click', this.toggleOptionSelect.bind(this))
+
+    // Toggle option visibility depending on screen size (min-width: 641px) and
+    // presence of any 'closed' properties (`data-closed-on-load`, `data-closed-on-load-mobile`).
+    // See https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/settings/_media-queries.scss#L10-L14
+    if (this.mq.matches) {
+      this.toggleVisibility(true)
+    } else {
+      this.toggleVisibility(false)
+    }
+
+    var checkedString = this.checkedString()
+    if (checkedString) {
+      this.attachCheckedCounter(checkedString)
+    }
+  }
+
+  OptionSelect.prototype.toggleVisibility = function (isTabletOrLarger) {
+    if (isTabletOrLarger) {
+      if (this.isClosedOnLoad === 'true') {
+        this.close()
+      } else {
+        this.setupHeight()
+      }
+    } else {
+      if (this.isClosedOnLoadMobile === 'true' || this.isClosedOnLoad === 'true') {
+        this.close()
+      } else {
+        this.setContainerHeight(201)
+      }
+    }
+  }
+
+  OptionSelect.prototype.typeFilterText = function (event) {
+    event.stopPropagation()
+    var ENTER_KEY = 13
+
+    if (event.keyCode !== ENTER_KEY) {
+      clearTimeout(this.filterTimeout)
+      this.filterTimeout = setTimeout(
+        function () { this.doFilter(this) }.bind(this),
+        300
+      )
+    } else {
+      event.preventDefault() // prevents finder forms from being submitted when user presses ENTER
+    }
+  }
+
+  OptionSelect.prototype.cleanString = function cleanString (text) {
+    text = text.replace(/&/g, 'and')
+    text = text.replace(/[’',:–-]/g, '') // remove punctuation characters
+    text = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // escape special characters
+    return text.trim().replace(/\s\s+/g, ' ').toLowerCase() // replace multiple spaces with one
+  }
+
+  OptionSelect.prototype.getAllCheckedCheckboxes = function getAllCheckedCheckboxes () {
+    this.checkedCheckboxes = []
+
+    for (var i = 0; i < this.$options.length; i++) {
+      if (this.$options[i].checked) {
+        this.checkedCheckboxes.push(i)
+      }
+    }
+  }
+
+  OptionSelect.prototype.doFilter = function doFilter (obj) {
+    var filterBy = obj.cleanString(obj.$filter.value)
+    var showCheckboxes = obj.checkedCheckboxes.slice()
+    var i = 0
+
+    for (i = 0; i < obj.$allCheckboxes.length; i++) {
+      if (showCheckboxes.indexOf(i) === -1 && obj.checkboxLabels[i].search(filterBy) !== -1) {
+        showCheckboxes.push(i)
+      }
+    }
+
+    for (i = 0; i < obj.$allCheckboxes.length; i++) {
+      obj.$allCheckboxes[i].style.display = 'none'
+    }
+
+    for (i = 0; i < showCheckboxes.length; i++) {
+      obj.$allCheckboxes[showCheckboxes[i]].style.display = 'block'
+    }
+
+    var lenChecked = obj.$optionsContainer.querySelectorAll('.govuk-checkboxes__input:checked').length
+    var len = showCheckboxes.length + lenChecked
+    var html = len + (len === 1 ? obj.filterTextSingle : obj.filterTextMultiple) + ', ' + lenChecked + obj.filterTextSelected
+    obj.$filterCount.innerHTML = html
+  }
+
+  OptionSelect.prototype.replaceHeadingSpanWithButton = function replaceHeadingSpanWithButton () {
+    /* Replace the span within the heading with a button element. This is based on feedback from Léonie Watson.
+     * The button has all of the accessibility hooks that are used by screen readers and etc.
+     * We do this in the JavaScript because if the JavaScript is not active then the button shouldn't
+     * be there as there is no JS to handle the click event.
+    */
+    var containerHead = this.$optionSelect.querySelector('.js-container-button')
+    var jsContainerHeadHTML = containerHead.innerHTML
+
+    // Create button and replace the preexisting html with the button.
+    var button = document.createElement('button')
+    button.setAttribute('class', 'js-container-button gem-c-option-select__title gem-c-option-select__button')
+    // Add type button to override default type submit when this component is used within a form
+    button.setAttribute('type', 'button')
+    button.setAttribute('aria-expanded', true)
+    button.setAttribute('id', containerHead.getAttribute('id'))
+    button.setAttribute('aria-controls', this.$optionsContainer.getAttribute('id'))
+    button.innerHTML = jsContainerHeadHTML
+    containerHead.parentNode.replaceChild(button, containerHead)
+
+    // GA4 Accordion tracking. Relies on the ga4-finder-tracker setting the index first, so we wrap this in a custom event.
+    window.addEventListener('ga4-filter-indexes-added', function () {
+      if (window.GOVUK.analyticsGa4) {
+        if (window.GOVUK.analyticsGa4.Ga4FinderTracker) {
+          window.GOVUK.analyticsGa4.Ga4FinderTracker.addFilterButtonTracking(button, button.innerHTML)
+        }
+      }
+    })
+  }
+
+  OptionSelect.prototype.attachCheckedCounter = function attachCheckedCounter (checkedString) {
+    var element = document.createElement('div')
+    element.setAttribute('class', 'gem-c-option-select__selected-counter js-selected-counter')
+    element.innerHTML = checkedString
+    this.$optionSelect.querySelector('.js-container-button').insertAdjacentElement('afterend', element)
+  }
+
+  OptionSelect.prototype.updateCheckedCount = function updateCheckedCount () {
+    var checkedString = this.checkedString()
+    var checkedStringElement = this.$optionSelect.querySelector('.js-selected-counter')
+
+    if (checkedString) {
+      if (checkedStringElement === null) {
+        this.attachCheckedCounter(checkedString)
+      } else {
+        checkedStringElement.textContent = checkedString
+      }
+    } else if (checkedStringElement) {
+      checkedStringElement.parentNode.removeChild(checkedStringElement)
+    }
+  }
+
+  OptionSelect.prototype.checkedString = function checkedString () {
+    this.getAllCheckedCheckboxes()
+    var count = this.checkedCheckboxes.length
+    var checkedString = false
+    if (count > 0) {
+      checkedString = count + ' selected'
+    }
+
+    return checkedString
+  }
+
+  OptionSelect.prototype.toggleOptionSelect = function toggleOptionSelect (e) {
+    if (this.isClosed()) {
+      this.open()
+    } else {
+      this.close()
+    }
+    e.preventDefault()
+  }
+
+  OptionSelect.prototype.open = function open () {
+    if (this.isClosed()) {
+      this.$optionSelect.querySelector('.js-container-button').setAttribute('aria-expanded', true)
+      this.$optionSelect.classList.remove('js-closed')
+      this.$optionSelect.classList.add('js-opened')
+      if (!this.$optionsContainer.style.height) {
+        this.setupHeight()
+      }
+    }
+  }
+
+  OptionSelect.prototype.close = function close () {
+    this.$optionSelect.classList.remove('js-opened')
+    this.$optionSelect.classList.add('js-closed')
+    this.$optionSelect.querySelector('.js-container-button').setAttribute('aria-expanded', false)
+  }
+
+  OptionSelect.prototype.isClosed = function isClosed () {
+    return this.$optionSelect.classList.contains('js-closed')
+  }
+
+  OptionSelect.prototype.setContainerHeight = function setContainerHeight (height) {
+    this.$optionsContainer.style.height = height + 'px'
+  }
+
+  OptionSelect.prototype.isCheckboxVisible = function isCheckboxVisible (option) {
+    var initialOptionContainerHeight = this.$optionsContainer.clientHeight
+    var optionListOffsetTop = this.$optionList.getBoundingClientRect().top
+    var distanceFromTopOfContainer = option.getBoundingClientRect().top - optionListOffsetTop
+    return distanceFromTopOfContainer < initialOptionContainerHeight
+  }
+
+  OptionSelect.prototype.getVisibleCheckboxes = function getVisibleCheckboxes () {
+    var visibleCheckboxes = []
+    for (var i = 0; i < this.$options.length; i++) {
+      if (this.isCheckboxVisible(this.$options[i])) {
+        visibleCheckboxes.push(this.$options[i])
+      }
+    }
+
+    // add an extra checkbox, if the label of the first is too long it collapses onto itself
+    if (this.$options[visibleCheckboxes.length]) {
+      visibleCheckboxes.push(this.$options[visibleCheckboxes.length])
+    }
+    return visibleCheckboxes
+  }
+
+  OptionSelect.prototype.isComponentParentHidden = function isComponentParentHidden () {
+    var parentContent = this.$optionSelect.parentElement
+    var isparentContentHidden = false
+    // check whether this is hidden by progressive disclosure,
+    // because height calculations won't work
+    // would use offsetParent === null but for IE10+
+    if (parentContent) {
+      isparentContentHidden = !(parentContent.offsetWidth || parentContent.offsetHeight || parentContent.getClientRects().length)
+    }
+
+    return isparentContentHidden
+  }
+
+  OptionSelect.prototype.setupHeight = function setupHeight () {
+    var initialOptionContainerHeight = this.$optionsContainer.clientHeight
+    var height = this.$optionList.offsetHeight
+
+    var isComponentParentHidden = this.isComponentParentHidden()
+
+    if (isComponentParentHidden) {
+      initialOptionContainerHeight = 200
+      height = 200
+    }
+
+    // Resize if the list is only slightly bigger than its container
+    // If isComponentParentHidden is true, then 200 < 250
+    // And the container height is always set to 201px
+    if (height < initialOptionContainerHeight + 50) {
+      this.setContainerHeight(height + 1)
+      return
+    }
+
+    // Resize to cut last item cleanly in half
+    var visibleCheckboxes = this.getVisibleCheckboxes()
+
+    var lastVisibleCheckbox = visibleCheckboxes[visibleCheckboxes.length - 1]
+    var position = lastVisibleCheckbox.parentNode.offsetTop // parent element is relative
+    this.setContainerHeight(position + (lastVisibleCheckbox.clientHeight / 1.5))
+  }
+
+  Modules.OptionSelect = OptionSelect
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/component_guide/application.scss

@@ -145,7 +145,7 @@ $gem-guide-border-width: 1px;
   border: 0;
   padding: govuk-spacing(2);
 
-  &:before {
+  &::before {
     display: none;
   }
 }
@@ -187,7 +187,7 @@ $gem-guide-border-width: 1px;
     font-style: italic;
   }
 
-  &:before {
+  &::before {
     @include govuk-font($size: 14);
     content: attr(data-content);
     position: absolute;
@@ -201,7 +201,7 @@ $gem-guide-border-width: 1px;
 .component-guide-preview--warning {
   border-color: govuk-colour("yellow");
 
-  &:before {
+  &::before {
     background-color: govuk-colour("yellow");
   }
 }
@@ -209,7 +209,7 @@ $gem-guide-border-width: 1px;
 .component-guide-preview--violation {
   border-color: govuk-colour("red");
 
-  &:before {
+  &::before {
     background-color: govuk-colour("red");
     color: govuk-colour("white");
   }
@@ -516,11 +516,11 @@ $code-delete-bg: #fadddd;
 }
 
 .component__count {
-  &:before {
+  &::before {
     content: "(";
   }
 
-  &:after {
+  &::after {
     content: ")";
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -57,6 +57,7 @@ $govuk-new-link-styles: true;
 @import "components/metadata";
 @import "components/modal-dialogue";
 @import "components/notice";
+@import "components/option-select";
 @import "components/organisation-logo";
 @import "components/panel";
 @import "components/phase-banner";

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -3,7 +3,7 @@
 .gem-c-action-link {
   display: table;
 
-  &:before {
+  &::before {
     content: "";
     display: table-cell;
     width: 60px;
@@ -66,7 +66,7 @@
   .gem-c-action-link__subtext {
     padding: 0;
 
-    &:before {
+    &::before {
       display: none;
     }
   }
@@ -82,7 +82,7 @@
     position: relative;
     padding-left: govuk-spacing(4);
 
-    &:before {
+    &::before {
       content: "";
       position: absolute;
       top: 10%;
@@ -95,14 +95,14 @@
 }
 
 .gem-c-action-link--white-arrow {
-  &:before {
+  &::before {
     background-image: image-url("govuk_publishing_components/action-link-arrow--white.png");
     background-image: image-url("govuk_publishing_components/action-link-arrow--white.svg"), linear-gradient(transparent, transparent);
   }
 }
 
 .gem-c-action-link--blue-arrow {
-  &:before {
+  &::before {
     width: 36px;
     height: 28px;
     background: image-url("govuk_publishing_components/action-link-arrow--blue.png");
@@ -120,7 +120,7 @@
 }
 
 .gem-c-action-link--simple {
-  &:before {
+  &::before {
     width: 30px;
     height: 30px;
     background: image-url("govuk_publishing_components/action-link-arrow--simple.png");
@@ -132,7 +132,7 @@
 }
 
 .gem-c-action-link--simple-light {
-  &:before {
+  &::before {
     width: 30px;
     height: 30px;
     background: image-url("govuk_publishing_components/action-link-arrow--simple-light.png");
@@ -144,14 +144,14 @@
 }
 
 .gem-c-action-link--dark-icon {
-  &:before {
+  &::before {
     background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
     background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
   }
 }
 
 .gem-c-action-link--dark-large-icon {
-  &:before {
+  &::before {
     background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
     background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
     height: 34px;
@@ -174,7 +174,7 @@
     margin-bottom: govuk-spacing(2);
   }
 
-  &:before {
+  &::before {
     height: 30px;
     width: 35px;
     background-repeat: no-repeat;
@@ -184,7 +184,7 @@
 }
 
 .gem-c-action-link--transparent-icon {
-  &:before {
+  &::before {
     background-image: image-url("govuk_publishing_components/action-link-arrow--transparent.svg");
   }
 }
@@ -192,7 +192,7 @@
 .gem-c-action-link--brexit {
   max-width: none;
 
-  &:before {
+  &::before {
     height: 30px;
     width: 30px;
     background-image: image-url("govuk_publishing_components/action-link-arrow--brexit.svg");
@@ -208,7 +208,7 @@
   @include govuk-media-query($from: tablet) {
     margin-bottom: govuk-spacing(2);
 
-    &:before {
+    &::before {
       width: 35px;
       background-position: 0 4px;
       background-size: 25px auto;
@@ -217,7 +217,7 @@
 }
 
 .gem-c-action-link--nhs {
-  &:before {
+  &::before {
     width: 80px;
     height: 70px;
     background: image-url("govuk_publishing_components/action-link--nhs.png");
@@ -232,7 +232,7 @@
   color: govuk-colour("white");
 
   .gem-c-action-link__subtext {
-    &:before {
+    &::before {
       border-color: govuk-colour("white");
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss

@@ -16,8 +16,9 @@
   @include govuk-font($size: 19, $weight: bold);
 
   // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
-  // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element
-  &:before {
+  // What's happening here is that the label and the number technically have an inline relationship
+  // but appear to have a block relationship thanks to this element
+  &::before {
     content: "";
     display: block;
   }