govuk_publishing_components 68.2.0 → 68.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba5b24da8c7e37b1df6a4f4fec4aff4cd3b099923b888a2c844aef00fc54259f
-  data.tar.gz: 39e1a0df6c03ca9cc320ec92a6e07738ab30e05a1b7b3c14f61197f23bd0387c
+  metadata.gz: 03455dfe8892b30b454209d8b8a490fd52abfbe5605d8f2823dbe9bd03d52979
+  data.tar.gz: c037b1fbba983e32b96b8abdc6e73cce0c7a2c448862982973f5d757ed324480
 SHA512:
-  metadata.gz: 1547f4b8b7362ba0105d288a2f484f2a040dba2f7e4955597d040be78dc1b6d891c36856ffab79f88a0b72eb9be616b8b06e8f79c5ca6a5c0c756fec59ae14e9
-  data.tar.gz: 35d2a6d741b9ec56ceecc69d311e9490d8c67bee32d4a86a7da37a8f82defe489906e8caa24f921aec4b88eb3fa812b528049bc446ccc36badf653890335edca
+  metadata.gz: f3e2136388c8bbc98caf66c605efc335139e485f59e15a4e1bffcc72b5f2ea94d67dcbcefb9dbde13ba8dc779dd465301ed25c22c0f2a88f0022f3ab2704d634
+  data.tar.gz: 275c48bef08012285e2091aef239b78effce8f893c5ed191fec261f05f708c5ef77241cc17a0763d2407a30512a4d4d040105b3aef9178dccc3fc45520e1d8ea

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

@@ -11,6 +11,7 @@
     this.useSelectCount = this.module.hasAttribute('data-ga4-form-use-select-count')
     this.redacted = false
     this.useFallbackValue = this.module.hasAttribute('data-ga4-form-no-answer-undefined') ? undefined : 'No answer given'
+    this.piiRemover = new window.GOVUK.analyticsGa4.PIIRemover()
   }
 
   Ga4FormTracker.prototype.init = function () {
@@ -117,6 +118,8 @@
 
       var isDateField = elem.closest('.govuk-date-input')
 
+      var forceReportValue = elem.hasAttribute('data-ga4-force-report-value-in-form-tracker')
+
       if (conditionalCheckbox && !conditionalCheckboxChecked) {
         // don't include conditional field if condition not checked
         inputs.splice(i, 1)
@@ -146,25 +149,10 @@
           // if placeholder value in select, do not include as not filled in
           inputs.splice(i, 1)
         } else {
-          input.answer = this.useSelectCount && selectedOptions.length > 1 ? selectedOptions.length : selectedOptions.join(',')
+          input.answer = this.getInputAnswerFromSelect(selectedOptions, forceReportValue)
         }
       } else if (isTextField && elem.value) {
-        if (this.includeTextInputValues || elem.hasAttribute('data-ga4-form-include-input')) {
-          if (this.useTextCount && !isDateField) {
-            input.answer = elem.value.length
-          } else {
-            var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
-            input.answer = PIIRemover.stripPIIWithOverride(elem.value, true, true)
-          }
-        } else {
-          // if recording JSON and text input not allowed
-          // set the specific answer to '[REDACTED]'
-          if (this.recordJson) {
-            input.answer = '[REDACTED]'
-          } else {
-            this.redacted = true
-          }
-        }
+        input.answer = this.getInputAnswerFromText(elem, isDateField, forceReportValue)
       } else if (inputType === 'file') {
         input.answer = elem.files.length + ' files chosen'
       } else {
@@ -201,6 +189,45 @@
     return inputs
   }
 
+  Ga4FormTracker.prototype.getInputAnswerFromSelect = function (selectedOptions, forceReportValue) {
+    var joinedSelections = selectedOptions.join(',')
+
+    if (forceReportValue) {
+      return joinedSelections
+    }
+
+    if (this.useSelectCount && selectedOptions.length > 1) {
+      return selectedOptions.length
+    }
+
+    return joinedSelections
+  }
+
+  Ga4FormTracker.prototype.getInputAnswerFromText = function (inputElement, isDateField, forceReportValue) {
+    var willRecordInputValue = this.includeTextInputValues || inputElement.hasAttribute('data-ga4-form-include-input')
+    var willReplaceInputValueWithLength = this.useTextCount && !isDateField
+
+    if (forceReportValue) {
+      willReplaceInputValueWithLength = false
+    }
+
+    if (willRecordInputValue) {
+      if (willReplaceInputValueWithLength) {
+        return inputElement.value.length
+      }
+
+      return this.piiRemover.stripPIIWithOverride(inputElement.value, true, true)
+    }
+
+    // if recording JSON when recording text input not allowed
+    // set the specific answer to '[REDACTED]'
+    if (this.recordJson) {
+      return '[REDACTED]'
+    } else {
+      this.redacted = true
+    }
+  }
+
   Ga4FormTracker.prototype.combineGivenAnswers = function (data) {
     var answers = this.recordJson ? {} : []
 

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

@@ -1,15 +1,11 @@
 (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.filterAttributes = this.$optionSelect.getAttribute('data-filter-attributes')
 
     this.checkedCheckboxes = []
 
@@ -19,15 +15,9 @@
   }
 
   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)
+    if (this.filterAttributes) {
+      this.filterAttributes = JSON.parse(this.filterAttributes)
+      this.$optionsContainer.parentNode.insertBefore(this.createFilter(), this.$optionsContainer)
 
       this.$filter = this.$optionSelect.querySelector('input[name="option-select-filter"]')
       this.$filterCount = document.getElementById(this.$filter.getAttribute('aria-describedby'))
@@ -73,6 +63,26 @@
     }
   }
 
+  OptionSelect.prototype.createFilter = function () {
+    const filter = document.createElement('div')
+    filter.classList.add('gem-c-option-select__filter')
+
+    const label = document.createElement('label')
+    label.classList.add('govuk-label', 'govuk-visually-hidden')
+    label.setAttribute('for', this.filterAttributes.id)
+    label.textContent = this.filterAttributes.title
+
+    const input = document.createElement('input')
+    input.classList.add('gem-c-option-select__filter-input', 'govuk-input')
+    input.name = 'option-select-filter'
+    input.id = this.filterAttributes.id
+    input.setAttribute('aria-describedby', this.filterAttributes.describedby)
+    input.setAttribute('aria-controls', this.filterAttributes.controls)
+
+    filter.append(label, input)
+    return filter
+  }
+
   OptionSelect.prototype.toggleVisibility = function (isTabletOrLarger) {
     if (isTabletOrLarger) {
       if (this.isClosedOnLoad === 'true') {
@@ -142,8 +152,8 @@
 
     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
+    var hiddenText = len + (len === 1 ? obj.filterTextSingle : obj.filterTextMultiple) + ', ' + lenChecked + obj.filterTextSelected
+    obj.$filterCount.textContent = hiddenText
   }
 
   OptionSelect.prototype.replaceHeadingSpanWithButton = function replaceHeadingSpanWithButton () {

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -168,19 +168,20 @@
       var thisel = this.$module.steps[i]
       var title = thisel.querySelectorAll('.js-step-title')[0]
       var contentId = thisel.querySelectorAll('.js-panel')[0].getAttribute('id')
-      var titleText = title.textContent || title.innerText // IE8 fallback
+      var titleText = title.textContent
 
       title.outerHTML =
-        '<span class="js-step-title">' +
-          '<button ' +
-            'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
-            'aria-expanded="false" aria-controls="' + contentId + '"' + '>' +
-              '<span class="gem-c-step-nav____title-text-focus">' +
-                  '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
-                  '<span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>' +
-              '</span>' +
-          '</button>' +
-        '</span>'
+        `<span class="js-step-title">
+          <button class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button"
+            aria-expanded="false" aria-controls="${contentId}">
+              <span class="gem-c-step-nav____title-text-focus">
+                <span class="gem-c-step-nav__title-text js-step-title-text"></span>
+                <span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>
+              </span>
+          </button>
+        </span>`
+
+      thisel.querySelector('.gem-c-step-nav__title-text').textContent = titleText
 
       if (this.$module.isGa4Enabled) {
         var ga4JSON = {

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

@@ -68,7 +68,7 @@ $gem-guide-border-width: 1px;
 }
 
 .component-guide-preview {
-  padding: govuk-spacing(8) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
+  padding: govuk-spacing(8) govuk-spacing(6) govuk-spacing(6);
   border: $gem-guide-border-width solid govuk-functional-colour(border);
   position: relative;
   margin-bottom: govuk-spacing(8);
@@ -475,7 +475,7 @@ $code-delete-bg: #fadddd;
 
 .gem-full-width__container {
   container-type: inline-size;
-  container-name: gem_page;
+  container-name: gem-page;
 }
 
 .full-width__table-wrapper {
@@ -500,7 +500,7 @@ $code-delete-bg: #fadddd;
   }
 }
 
-@container gem_page (width > 1040px) {
+@container gem-page (width > 1040px) {
   $w: 960px;
 
   .gem-full-width__element {
@@ -529,7 +529,7 @@ $code-delete-bg: #fadddd;
 .govuk-tabs {
   $w: 920px;
 
-  @container gem_page (width > 1040px) {
+  @container gem-page (width > 1040px) {
     .full-width__table-wrapper {
       margin-left: calc(((-100cqw + $w) / 2) - 1px);
       margin-right: calc(((-100cqw + $w) / 2) - 1px);

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

@@ -44,8 +44,8 @@ $thumbnail-border-width: 5px;
 
   .gem-c-details {
     margin-top: govuk-spacing(3);
-    word-break: break-word;
-    word-wrap: break-word;
+    word-break: break-word; // stylelint-disable-line declaration-property-value-keyword-no-deprecated
+    overflow-wrap: break-word;
   }
 }
 
@@ -68,12 +68,12 @@ $thumbnail-border-width: 5px;
 .govspeak,
 .gem-c-govspeak {
   .gem-c-attachment__title {
-    margin: 0 0 govuk-spacing(3) 0;
+    margin: 0 0 govuk-spacing(3);
     @include govuk-font($size: 27, $weight: regular);
   }
 
   .gem-c-attachment__metadata {
-    margin: 0 0 govuk-spacing(3) 0;
+    margin: 0 0 govuk-spacing(3);
   }
 }
 
@@ -101,7 +101,7 @@ $thumbnail-border-width: 5px;
   }
 
   .gem-c-attachment__link.govuk-link {
-    word-break: break-word;
+    word-break: break-word;  // stylelint-disable-line declaration-property-value-keyword-no-deprecated
 
     &::after {
       font-size: 12pt;

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

@@ -7,6 +7,7 @@
   padding: 0;
   margin: 0;
   display: grid;
+  // stylelint-disable-next-line property-no-deprecated
   grid-column-gap: govuk-spacing(6); // Use deprecated grid-column-gap for Grade C browser support
   column-gap: govuk-spacing(6);
 
@@ -48,15 +49,15 @@
 
 .gem-c-cards__list--two-column-desktop {
   @include govuk-media-query($from: "tablet") {
-    grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid
-    grid-template-columns: fractions(2); // Note that browsers that don't support CSS grid display the component as one column on all breakpoints
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 .gem-c-cards__list--three-column-desktop {
   @include govuk-media-query($from: "desktop") {
-    grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid
-    grid-template-columns: fractions(3); // Note that browsers that don't support CSS grid display the component as one column on all breakpoints
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
@@ -145,7 +146,7 @@
 
 .gem-c-cards__list-item {
   border-top: 1px solid govuk-functional-colour(border);
-  padding: govuk-spacing(1) 0 govuk-spacing(4) 0;
+  padding: govuk-spacing(1) 0 govuk-spacing(4);
 }
 
 .gem-c-cards__list-item-wrapper {

data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss

@@ -305,6 +305,7 @@ $toggle-border-height: 3px;
     &-visible {
       @include toggle-button-focus;
 
+      // stylelint-disable-next-line selector-no-qualifying-type
       &.gem-c-rebranded-cross-service-header__toggle--open {
         @include toggle-button-focus;
       }

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -82,7 +82,7 @@
   @include govuk-text-colour;
   @include govuk-font(16);
 
-  & { // stylelint-disable-line no-duplicate-selectors
+  & { // stylelint-disable-line no-duplicate-selectors, block-no-redundant-nested-style-rules
     // overriding govuk-text-colour mixin
     color: govuk-functional-colour(secondary-text);
   }
@@ -104,7 +104,7 @@
 }
 
 .gem-c-document-list__highlight-text {
-  margin: 0 0 govuk-spacing(3) 0;
+  margin: 0 0 govuk-spacing(3);
   @include govuk-font(16, bold);
 }
 

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

@@ -175,13 +175,13 @@ $feedback-prompt-border-top-colour: $govuk-blue-tint-50;
 
   // this comes from the backend so we can't put a class on it
   h2 {
-    margin: 0 0 govuk-spacing(3) 0;
+    margin: 0 0 govuk-spacing(3);
     @include govuk-text-colour;
     @include govuk-font($size: 24, $weight: bold);
   }
 
   p {
-    margin: 0 0 govuk-spacing(3) 0;
+    margin: 0 0 govuk-spacing(3);
     @include govuk-text-colour;
     @include govuk-font($size: 19);
   }
@@ -210,13 +210,13 @@ $feedback-prompt-border-top-colour: $govuk-blue-tint-50;
 }
 
 .gem-c-feedback__form-heading {
-  margin: 0 0 govuk-spacing(3) 0;
+  margin: 0 0 govuk-spacing(3);
   @include govuk-text-colour;
   @include govuk-font(24, $weight: bold);
 }
 
 .gem-c-feedback__form-paragraph {
-  margin: 0 0 govuk-spacing(6) 0;
+  margin: 0 0 govuk-spacing(6);
   @include govuk-text-colour;
   @include govuk-font(19);
 }

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

@@ -20,7 +20,7 @@ $gap: govuk-spacing(1);
 }
 
 .gem-c-figure__figcaption-text {
-  margin: govuk-spacing(2) 0 0 0;
+  margin: govuk-spacing(2) 0 0;
   color: govuk-functional-colour(secondary-text);
   @include govuk-font(19);
 }

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

@@ -11,7 +11,6 @@
   @include govuk-text-colour;
 
   @include govuk-media-query($until: tablet) {
-    flex-direction: column-reverse;
     gap: govuk-spacing(3);
   }
 }
@@ -36,7 +35,7 @@
   height: auto;
   width: 100%;
   border: 0;
-  border-top: 1px solid govuk-functional-colour(border);
+  border-top: 1px solid govuk-functional-colour("border");
 }
 
 .gem-c-image-card__title {
@@ -73,7 +72,7 @@
 .gem-c-image-card__context,
 .gem-c-image-card__metadata {
   font-size: govuk-px-to-rem(16px);
-  margin: 0 0 calc(govuk-spacing(3) / 2);
+  margin: 0 0 govuk-spacing(2);
   color: govuk-functional-colour("secondary-text");
   @include govuk-font($size: false);
 
@@ -83,15 +82,15 @@
 }
 
 .gem-c-image-card__description {
-  padding-top: calc(govuk-spacing(3) / 2);
-  word-wrap: break-word;
+  padding-top: govuk-spacing(2);
+  overflow-wrap: break-word;
   @include govuk-font($size: 19);
 }
 
 .gem-c-image-card__list {
   position: relative;
   z-index: 2;
-  padding: calc(govuk-spacing(3) / 2) 0 0 0;
+  padding: govuk-spacing(2) 0 0;
   margin: 0;
   list-style: none;
   @include govuk-font($size: 19);

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -2,7 +2,7 @@
   width: 100%;
   background-color: $govuk-blue-tint-80;
   margin-bottom: govuk-spacing(6);
-  padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
+  padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(6);
   box-sizing: border-box;
 
   @include govuk-media-query($until: desktop) {

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -10,7 +10,7 @@
 }
 
 .gem-c-layout-for-public-account-menu {
-  margin: 0 0 govuk-spacing(6) 0;
+  margin: 0 0 govuk-spacing(6);
   padding: 0;
 
   @include govuk-media-query($from: desktop) {

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -81,6 +81,7 @@ $search-icon-height: 20px;
 // Undoes the :focus styles *only* for browsers that support :focus-visible.
 // See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
 @mixin focus-not-focus-visible {
+  // stylelint-disable-next-line block-no-redundant-nested-style-rules
   & {
     @content;
   }
@@ -571,12 +572,12 @@ $search-icon-height: 20px;
 // JS available - styles the links in the dropdown menu
 .gem-c-layout-super-navigation-header__dropdown-list-item {
   box-sizing: border-box;
-  padding: 0 0 govuk-spacing(3) 0;
+  padding: 0 0 govuk-spacing(3);
   position: relative;
-  margin: 0 0 govuk-spacing(2) 0;
+  margin: 0 0 govuk-spacing(2);
   @include govuk-media-query($from: "desktop") {
-    padding: 0 0 govuk-spacing(3) 0;
-    margin: 0 govuk-spacing(3) govuk-spacing(1) govuk-spacing(3);
+    padding: 0 0 govuk-spacing(3);
+    margin: 0 govuk-spacing(3) govuk-spacing(1);
   }
 }
 
@@ -588,7 +589,7 @@ $search-icon-height: 20px;
 
   @include govuk-media-query($from: "desktop") {
     margin: 0 (0 - govuk-spacing(3)) govuk-spacing(9);
-    padding: govuk-spacing(2) 0 0 0;
+    padding: govuk-spacing(2) 0 0;
   }
 }
 
@@ -642,7 +643,7 @@ $search-icon-height: 20px;
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
   font-size: govuk-px-to-rem(16px);
   font-weight: normal;
-  margin: govuk-spacing(1) 0 0 0;
+  margin: govuk-spacing(1) 0 0;
   @include govuk-typography-common;
 }
 

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

@@ -130,7 +130,7 @@
 
 .gem-c-metadata__change-date {
   display: block;
-  margin: 0 0 govuk-spacing(3) 0;
+  margin: 0 0 govuk-spacing(3);
   @include govuk-font(16, $weight: bold);
 }
 

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

@@ -21,5 +21,5 @@
 }
 
 .gem-c-notice__description {
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -15,8 +15,8 @@
     ::-webkit-scrollbar-thumb {
       border-radius: 4px;
 
-      background-color: rgba(0, 0, 0, .5);
-      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .87);
+      background-color: rgb(0, 0, 0, .5);
+      -webkit-box-shadow: 0 0 1px rgb(255, 255, 255, .87);
     }
   }
 
@@ -104,7 +104,7 @@
 .gem-c-option-select__filter {
   position: relative;
   background: govuk-colour("white");
-  padding: 13px 13px govuk-spacing(2) 13px;
+  padding: 13px 13px govuk-spacing(2);
 }
 
 .gem-c-option-select__filter-input {

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -6,12 +6,6 @@
   margin: 0;
   @include govuk-typography-common;
   @include govuk-font-size(19);
-
-  @include govuk-media-query($until: tablet) {
-    // only override line-height on small screens otherwise use govuk-font-size
-    // line-height
-    line-height: 1.35;
-  }
 }
 
 .gem-c-organisation-logo__container {
@@ -59,7 +53,7 @@
   @include govuk-link-common;
   @include govuk-link-style-text;
 
-  & { // stylelint-disable-line no-duplicate-selectors
+  & { // stylelint-disable-line no-duplicate-selectors, block-no-redundant-nested-style-rules
     // overriding the govuk-link font
     font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif;
   }

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

@@ -1,5 +1,5 @@
 @import "govuk/components/radios/radios";
 
 .gem-c-radio__heading-text {
-  margin: 0 0 govuk-spacing(4) 0;
+  margin: 0 0 govuk-spacing(4);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_search-with-autocomplete.scss

@@ -60,7 +60,7 @@ $large-input-size: 50px;
   // for everyone. This span is added dynamically only on iOS and not given a class, so we need to
   // target it in a roundabout way and make it invisible to non-screenreader users.
   & > span {
-    clip: rect(0 0 0 0);
+    clip: rect(0 0 0 0); // stylelint-disable-line property-no-deprecated
     clip-path: inset(50%);
     height: 1px;
     overflow: hidden;

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss

@@ -19,7 +19,7 @@
 
 @include govuk-media-query($media-type: print) {
   .gem-c-step-nav-header {
-    padding: 0 0 govuk-spacing(4) 0;
+    padding: 0 0 govuk-spacing(4);
     background: none;
     border-color: govuk-functional-colour(print-text);
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -185,7 +185,7 @@ $top-border: solid 1px govuk-functional-colour("border");
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
   margin: .5em 0 14px;
-  padding: govuk-spacing(1) 0 govuk-spacing(1);
+  padding: govuk-spacing(1) 0;
   @include step-nav-font(15);
 
   .gem-c-step-nav--large & {

data/app/assets/stylesheets/govuk_publishing_components/components/_sub-navigation-menu.scss

@@ -20,7 +20,7 @@
   padding-left: govuk-spacing(3);
   padding-right: govuk-spacing(3);
   // Invisible border so the width of the collapsed button is the same as the expanded one.
-  border-left: 1px solid rgba(0, 0, 0, 0);
+  border-left: 1px solid rgb(0, 0, 0, 0);
   border-right: 1px solid govuk-colour("black", $variant: "tint-95");
   cursor: pointer;
   position: relative;

data/app/assets/stylesheets/govuk_publishing_components/components/_summary-banner.scss

@@ -17,7 +17,7 @@
 }
 
 .gem-c-summary-banner__title {
-  margin: 0 0 govuk-spacing(6) 0;
+  margin: 0 0 govuk-spacing(6);
   color: govuk-colour("white");
   @include govuk-font(27, $weight: bold);
 }

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

@@ -14,7 +14,7 @@
 
   .attachment {
     position: relative;
-    margin: 0 0 govuk-spacing(6) 0;
+    margin: 0 0 govuk-spacing(6);
     padding: 0 0 0 ($thumbnail-width + govuk-spacing(6));
     @include govuk-clearfix;
 
@@ -56,12 +56,12 @@
 
     .attachment-details {
       h2 {
-        margin: 0 0 govuk-spacing(2) 0;
+        margin: 0 0 govuk-spacing(2);
         @include govuk-font($size: 27);
       }
 
       p {
-        margin: 0 0 govuk-spacing(2) 0;
+        margin: 0 0 govuk-spacing(2);
       }
 
       .metadata {
@@ -69,8 +69,8 @@
       }
 
       .url {
-        word-break: break-word;
-        word-wrap: break-word;
+        word-break: break-word; // stylelint-disable-line declaration-property-value-keyword-no-deprecated
+        overflow-wrap: break-word;
       }
 
       .changed,
@@ -103,8 +103,8 @@
       }
 
       .accessibility-warning {
-        word-break: break-word;
-        word-wrap: break-word;
+        word-break: break-word; // stylelint-disable-line declaration-property-value-keyword-no-deprecated
+        overflow-wrap: break-word;
 
         h2 {
           margin: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss

@@ -9,7 +9,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .call-to-action {
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
     background-color: govuk-colour("black", $variant: "tint-95");
     padding: govuk-spacing(6);
     padding-bottom: govuk-spacing(2);

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

@@ -14,7 +14,7 @@
   .contact {
     border-left: 1px solid govuk-functional-colour("border");
     padding-left: govuk-spacing(3);
-    margin: 0 0 govuk-spacing(6) 0;
+    margin: 0 0 govuk-spacing(6);
   }
 
   .address {
@@ -38,7 +38,7 @@
 
     .email-url-number {
       .email {
-        word-wrap: break-word;
+        overflow-wrap: break-word;
       }
 
       span {

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

@@ -10,7 +10,7 @@
   .example {
     border-left: 10px solid govuk-functional-colour("border");
     padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
 
     strong {
       display: block;

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

@@ -15,7 +15,7 @@
 .gem-c-govspeak {
   .footnotes {
     border-top: 1px solid govuk-functional-colour("border");
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
     padding-top: govuk-spacing(4);
     overflow-wrap: break-word;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss

@@ -1,7 +1,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .form-download {
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
 
     p {
       padding-right: 3em;

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

@@ -13,7 +13,7 @@
   }
 
   figure {
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
     display: table;
 
     &:has(img[src*=".svg"]) {
@@ -31,7 +31,7 @@
     }
 
     figcaption p {
-      margin: govuk-spacing(2) 0 0 0;
+      margin: govuk-spacing(2) 0 0;
       color: govuk-functional-colour(secondary-text);
       @include govuk-font(19);
     }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss

@@ -11,7 +11,7 @@
   .info-notice {
     border-left: 10px solid govuk-functional-colour("border");
     padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
 
     @include govuk-media-query($media-type: print) {
       margin: govuk-spacing(3) 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss

@@ -9,7 +9,7 @@
 .gem-c-govspeak {
   .legislative-list {
     list-style: none;
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
 
     ol {
       margin: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss

@@ -9,7 +9,7 @@
   position: relative;
   height: 0;
   overflow: hidden;
-  margin: 0 0 govuk-spacing(4) 0;
+  margin: 0 0 govuk-spacing(4);
   padding-top: 0;
   padding-left: 0;
   padding-right: 0;

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

@@ -2,7 +2,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .place {
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
     border-bottom: solid 1px govuk-functional-colour("border");
     padding-bottom: 1.5em;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss

@@ -8,7 +8,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .stat-headline {
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
 
     p {
       margin: 0;

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

@@ -11,7 +11,7 @@
     border-collapse: collapse;
     border-spacing: 0;
     display: block;
-    margin: 0 0 govuk-spacing(6) 0;
+    margin: 0 0 govuk-spacing(6);
     overflow-x: auto;
     width: 100%;
     @include govuk-font($size: 19);
@@ -28,7 +28,7 @@
       border-bottom: 1px solid govuk-functional-colour("border");
 
       &:last-child {
-        padding: govuk-spacing(2) 0 govuk-spacing(2) 0;
+        padding: govuk-spacing(2) 0;
       }
     }
 

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

@@ -34,7 +34,7 @@
 
   blockquote {
     padding: 0 0 0 govuk-spacing(6);
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
     border: 0;
 
     p {
@@ -80,7 +80,7 @@
     a[href^="/"]:after,a[href^="http://"]:after,a[href^="https://"]:after {
       content: " (" attr(href) ")";
       font-size: 90%;
-      word-wrap: break-word;
+      overflow-wrap: break-word;
     }
   }
 }
@@ -88,6 +88,7 @@
 .gem-c-govspeak--inverse {
   color: govuk-colour("white");
 
+  // stylelint-disable-next-line selector-no-qualifying-type
   a:not(.govuk-button) {
     @include govuk-link-common;
     @include govuk-link-style-inverse;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -16,7 +16,7 @@
     $icon-spacing: 10px;
 
     padding: govuk-spacing(3) 0 0 calc($icon-size + $icon-spacing);
-    margin: 0 0 govuk-spacing(6) 0;
+    margin: 0 0 govuk-spacing(6);
     position: relative;
 
     &::before {

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -5,7 +5,7 @@
   ol,
   ul,
   p {
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
     @include govuk-font($size: 19);
   }
 
@@ -30,13 +30,13 @@
   }
 
   h2 {
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
     @include govuk-font($size: 24, $weight: bold);
     @include govuk-text-break-word;
   }
 
   h3 {
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 govuk-spacing(4);
     @include govuk-font($size: 19, $weight: bold);
     @include govuk-text-break-word;
   }
@@ -53,6 +53,7 @@
 
   // Links
 
+  // stylelint-disable-next-line selector-no-qualifying-type
   a:not(.govuk-button) {
     @include govuk-link-common;
     @include govuk-link-style-default;

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

@@ -4,35 +4,24 @@
   checkboxes_count_id = checkboxes_id + "-count"
   show_filter ||= false
   large ||= false
-%>
-
-<% if show_filter %>
-  <% filter_id ||= "input-#{SecureRandom.hex(4)}" %>
-  <% filter = capture do %>
-    <%= tag.label for: filter_id, class: "govuk-label govuk-visually-hidden" do %>
-      Filter <%= title %>
-    <% end %>
 
-    <%= tag.input name: "option-select-filter",
+  if show_filter
+    filter_id ||= "input-#{SecureRandom.hex(4)}"
+    filter_attributes = {
       id: filter_id,
-      class: "gem-c-option-select__filter-input govuk-input",
-      type: "text",
-      aria: {
-        describedby: checkboxes_count_id,
-        controls: checkboxes_id,
-      } %>
-  <% end %>
-  <% filter_element = CGI::escapeHTML(filter) %>
-<% end %>
+      title: "Filter #{title}",
+      describedby: checkboxes_count_id,
+      controls: checkboxes_id,
+    }
+  end
 
-<%
   helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   helper.add_class("gem-c-option-select")
   helper.add_data_attribute({ module: "option-select" })
   helper.add_data_attribute({ "closed-on-load": true }) if local_assigns.include?(:closed_on_load) && closed_on_load
   helper.add_data_attribute({ "closed-on-load-mobile": "true" }) if local_assigns.include?(:closed_on_load_mobile) && closed_on_load_mobile
   helper.add_data_attribute({ "input-aria-controls": aria_controls_id }) if local_assigns.include?(:aria_controls_id)
-  helper.add_data_attribute({ "filter-element": filter_element }) if show_filter
+  helper.add_data_attribute({ "filter-attributes": filter_attributes }) if filter_attributes
   helper.add_data_attribute({ "button-data-attributes": button_data_attributes }) if local_assigns.include?(:button_data_attributes)
 
   options_container_classes = %w[gem-c-option-select__container js-options-container]

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "68.2.0".freeze
+  VERSION = "68.3.0".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 68.2.0
+  version: 68.3.0
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -2118,7 +2118,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.18
+rubygems_version: 4.0.19
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications
 test_files: []