govuk_publishing_components 36.0.3 → 37.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fca7a5f4a2f77be1b86157531a3f2884b70ebde62cea12c194bad2b29886d121
-  data.tar.gz: 9e59cd6485f898e8f86f1b2f21022bca130c5d471d2a87afd498be029811a265
+  metadata.gz: fe726cba8402c5e0b082b9183eb50b531bc4024e0a8d8420e8aa9bc01bf792ee
+  data.tar.gz: a0ca9fdb633e3f78bacd25fe5f6b1d10353d3ec70b49c8881f65c667c8cb5a6f
 SHA512:
-  metadata.gz: 00cb71df653b04a54fd700ab26efedde9852421def70e5e4c5e40b8ac3b90828e926aa9311dd526a0c2f2e417ed6dff0d70cd6197beaad702ffd311ac2e05a31
-  data.tar.gz: e34e2387ad6ef7903892a12090be73aa46c1307749fde8b38338afb7bcda5cd0f987eb675737012dc6f72b715643f14a16d2795a3593ea8671d04a81761eb8a3
+  metadata.gz: 983fb3da1f16193554ae6f850a6da73ce0a3a4a92df1e430ab8ccc028e50739188f8225a79cfeefd5aca477632b70105349b853e0bce55b704bba91947700dc4
+  data.tar.gz: bdcc215e867f598b8afd6d502ef393656b4bbca8e2059aa21f15bce7838d4a6ff9f02319f13c365c684f780b544272034d6fd0233e4aa7a5f978d3e6529eda50

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -11,81 +11,5 @@
 //= link govuk_publishing_components/vendor/modernizr.js
 //= link govuk_publishing_components/vendor/lux/lux-reporter.js
 //= link govuk_publishing_components/vendor/lux/lux-measurer.js
-//= link component_guide/application.css
 
-// components
-//= link govuk_publishing_components/components/_accordion.css
-//= link govuk_publishing_components/components/_action-link.css
-//= link govuk_publishing_components/components/_attachment.css
-//= link govuk_publishing_components/components/_attachment-link.css
-//= link govuk_publishing_components/components/_back-link.css
-//= link govuk_publishing_components/components/_big-number.css
-//= link govuk_publishing_components/components/_breadcrumbs.css
-//= link govuk_publishing_components/components/_button.css
-//= link govuk_publishing_components/components/_cards.css
-//= link govuk_publishing_components/components/_character-count.css
-//= link govuk_publishing_components/components/_checkboxes.css
-//= link govuk_publishing_components/components/_contents-list.css
-//= link govuk_publishing_components/components/_contextual-guidance.css
-//= link govuk_publishing_components/components/_contextual-sidebar.css
-//= link govuk_publishing_components/components/_cookie-banner.css
-//= link govuk_publishing_components/components/_copy-to-clipboard.css
-//= link govuk_publishing_components/components/_cross-service-header.css
-//= link govuk_publishing_components/components/_date-input.css
-//= link govuk_publishing_components/components/_details.css
-//= link govuk_publishing_components/components/_devolved-nations.css
-//= link govuk_publishing_components/components/_document-list.css
-//= link govuk_publishing_components/components/_emergency-banner.css
-//= link govuk_publishing_components/components/_error-alert.css
-//= link govuk_publishing_components/components/_error-message.css
-//= link govuk_publishing_components/components/_error-summary.css
-//= link govuk_publishing_components/components/_feedback.css
-//= link govuk_publishing_components/components/_fieldset.css
-//= link govuk_publishing_components/components/_file-upload.css
-//= link govuk_publishing_components/components/_govspeak-html-publication.css
-//= link govuk_publishing_components/components/_govspeak.css
-//= link govuk_publishing_components/components/_heading.css
-//= link govuk_publishing_components/components/_hint.css
-//= link govuk_publishing_components/components/_image-card.css
-//= link govuk_publishing_components/components/_input.css
-//= link govuk_publishing_components/components/_inset-text.css
-//= link govuk_publishing_components/components/_intervention.css
-//= link govuk_publishing_components/components/_inverse-header.css
-//= link govuk_publishing_components/components/_label.css
-//= link govuk_publishing_components/components/_layout-footer.css
-//= link govuk_publishing_components/components/_layout-for-admin.css
-//= link govuk_publishing_components/components/_layout-for-public.css
-//= link govuk_publishing_components/components/_layout-header.css
-//= link govuk_publishing_components/components/_layout-super-navigation-header.css
-//= link govuk_publishing_components/components/_lead-paragraph.css
-//= 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
-//= link govuk_publishing_components/components/_previous-and-next-navigation.css
-//= link govuk_publishing_components/components/_print-link.css
-//= link govuk_publishing_components/components/_radio.css
-//= link govuk_publishing_components/components/_related-navigation.css
-//= link govuk_publishing_components/components/_reorderable-list.css
-//= link govuk_publishing_components/components/_search.css
-//= link govuk_publishing_components/components/_select.css
-//= link govuk_publishing_components/components/_share-links.css
-//= link govuk_publishing_components/components/_show-password.css
-//= link govuk_publishing_components/components/_signup-link.css
-//= link govuk_publishing_components/components/_single-page-notification-button.css
-//= link govuk_publishing_components/components/_skip-link.css
-//= link govuk_publishing_components/components/_step-by-step-nav-header.css
-//= link govuk_publishing_components/components/_step-by-step-nav-related.css
-//= link govuk_publishing_components/components/_step-by-step-nav.css
-//= link govuk_publishing_components/components/_subscription-links.css
-//= link govuk_publishing_components/components/_success-alert.css
-//= link govuk_publishing_components/components/_summary-list.css
-//= link govuk_publishing_components/components/_tabs.css
-//= link govuk_publishing_components/components/_table.css
-//= link govuk_publishing_components/components/_textarea.css
-//= link govuk_publishing_components/components/_title.css
-//= link govuk_publishing_components/components/_translation-nav.css
-//= link govuk_publishing_components/components/_warning-text.css
+//= link_tree ../builds

data/app/assets/config/govuk_publishing_components_sassc-rails_manifest.js

@@ -0,0 +1,91 @@
+// Pre-compile image and font assets from here and govuk-frontend
+//= link_tree ../images
+//= link_tree ../../../node_modules/govuk-frontend/govuk/assets/images
+//= link_tree ../../../node_modules/govuk-frontend/govuk/assets/fonts
+
+// Create asset files of each of the files in these directory
+//= link_directory ../javascripts/component_guide
+//= link_directory ../javascripts/govuk_publishing_components
+
+// Pre-compile these specific files
+//= link govuk_publishing_components/vendor/modernizr.js
+//= link govuk_publishing_components/vendor/lux/lux-reporter.js
+//= link govuk_publishing_components/vendor/lux/lux-measurer.js
+//= link component_guide/application.css
+
+// components
+//= link govuk_publishing_components/components/_accordion.css
+//= link govuk_publishing_components/components/_action-link.css
+//= link govuk_publishing_components/components/_attachment.css
+//= link govuk_publishing_components/components/_attachment-link.css
+//= link govuk_publishing_components/components/_back-link.css
+//= link govuk_publishing_components/components/_big-number.css
+//= link govuk_publishing_components/components/_breadcrumbs.css
+//= link govuk_publishing_components/components/_button.css
+//= link govuk_publishing_components/components/_cards.css
+//= link govuk_publishing_components/components/_character-count.css
+//= link govuk_publishing_components/components/_checkboxes.css
+//= link govuk_publishing_components/components/_contents-list.css
+//= link govuk_publishing_components/components/_contextual-guidance.css
+//= link govuk_publishing_components/components/_contextual-sidebar.css
+//= link govuk_publishing_components/components/_cookie-banner.css
+//= link govuk_publishing_components/components/_copy-to-clipboard.css
+//= link govuk_publishing_components/components/_cross-service-header.css
+//= link govuk_publishing_components/components/_date-input.css
+//= link govuk_publishing_components/components/_details.css
+//= link govuk_publishing_components/components/_devolved-nations.css
+//= link govuk_publishing_components/components/_document-list.css
+//= link govuk_publishing_components/components/_emergency-banner.css
+//= link govuk_publishing_components/components/_error-alert.css
+//= link govuk_publishing_components/components/_error-message.css
+//= link govuk_publishing_components/components/_error-summary.css
+//= link govuk_publishing_components/components/_feedback.css
+//= link govuk_publishing_components/components/_fieldset.css
+//= link govuk_publishing_components/components/_file-upload.css
+//= link govuk_publishing_components/components/_govspeak-html-publication.css
+//= link govuk_publishing_components/components/_govspeak.css
+//= link govuk_publishing_components/components/_heading.css
+//= link govuk_publishing_components/components/_hint.css
+//= link govuk_publishing_components/components/_image-card.css
+//= link govuk_publishing_components/components/_input.css
+//= link govuk_publishing_components/components/_inset-text.css
+//= link govuk_publishing_components/components/_intervention.css
+//= link govuk_publishing_components/components/_inverse-header.css
+//= link govuk_publishing_components/components/_label.css
+//= link govuk_publishing_components/components/_layout-footer.css
+//= link govuk_publishing_components/components/_layout-for-admin.css
+//= link govuk_publishing_components/components/_layout-for-public.css
+//= link govuk_publishing_components/components/_layout-header.css
+//= link govuk_publishing_components/components/_layout-super-navigation-header.css
+//= link govuk_publishing_components/components/_lead-paragraph.css
+//= 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
+//= link govuk_publishing_components/components/_previous-and-next-navigation.css
+//= link govuk_publishing_components/components/_print-link.css
+//= link govuk_publishing_components/components/_radio.css
+//= link govuk_publishing_components/components/_related-navigation.css
+//= link govuk_publishing_components/components/_reorderable-list.css
+//= link govuk_publishing_components/components/_search.css
+//= link govuk_publishing_components/components/_select.css
+//= link govuk_publishing_components/components/_share-links.css
+//= link govuk_publishing_components/components/_show-password.css
+//= link govuk_publishing_components/components/_signup-link.css
+//= link govuk_publishing_components/components/_single-page-notification-button.css
+//= link govuk_publishing_components/components/_skip-link.css
+//= link govuk_publishing_components/components/_step-by-step-nav-header.css
+//= link govuk_publishing_components/components/_step-by-step-nav-related.css
+//= link govuk_publishing_components/components/_step-by-step-nav.css
+//= link govuk_publishing_components/components/_subscription-links.css
+//= link govuk_publishing_components/components/_success-alert.css
+//= link govuk_publishing_components/components/_summary-list.css
+//= link govuk_publishing_components/components/_tabs.css
+//= link govuk_publishing_components/components/_table.css
+//= link govuk_publishing_components/components/_textarea.css
+//= link govuk_publishing_components/components/_title.css
+//= link govuk_publishing_components/components/_translation-nav.css
+//= link govuk_publishing_components/components/_warning-text.css

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

@@ -166,17 +166,24 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     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)
+    var buttonAttributes = this.$optionSelect.getAttribute('data-button-data-attributes')
+    if (buttonAttributes) {
+      try {
+        buttonAttributes = JSON.parse(buttonAttributes)
+        for (var rawKey in buttonAttributes) {
+          var key = rawKey.replace(/_/i, '-').toLowerCase()
+          var rawValue = buttonAttributes[rawKey]
+          var value = typeof rawValue === 'object' ? JSON.stringify(rawValue) : rawValue
+          button.setAttribute('data-' + key, value)
         }
+      } catch (e) {
+        console.error('Error with option select button data attributes, invalid JSON passed' + e.message, window.location)
       }
-    })
+    }
+
+    button.innerHTML = jsContainerHeadHTML
+    containerHead.parentNode.replaceChild(button, containerHead)
   }
 
   OptionSelect.prototype.attachCheckedCounter = function attachCheckedCounter (checkedString) {

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

@@ -8,8 +8,8 @@
     display: table-cell;
     width: 60px;
     height: 45px;
-    background: image-url("govuk_publishing_components/action-link-arrow.png");
-    background: image-url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow.png");
+    background: url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;
     background-position: 0 50%;
     background-size: 45px auto;
@@ -98,8 +98,8 @@
   &::before {
     width: 30px;
     height: 30px;
-    background: image-url("govuk_publishing_components/action-link-arrow--simple.png");
-    background: image-url("govuk_publishing_components/action-link-arrow--simple.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow--simple.png");
+    background: url("govuk_publishing_components/action-link-arrow--simple.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;
@@ -110,8 +110,8 @@
   &::before {
     width: 30px;
     height: 30px;
-    background: image-url("govuk_publishing_components/action-link-arrow--simple-light.png");
-    background: image-url("govuk_publishing_components/action-link-arrow--simple-light.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow--simple-light.png");
+    background: url("govuk_publishing_components/action-link-arrow--simple-light.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;
@@ -120,8 +120,8 @@
 
 .gem-c-action-link--dark-large-icon {
   &::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);
+    background: url("govuk_publishing_components/action-link-arrow--dark.png");
+    background: url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
     height: 34px;
     width: 40px;
     background-repeat: no-repeat;
@@ -138,8 +138,8 @@
   &::before {
     width: 36px;
     height: 28px;
-    background: image-url("govuk_publishing_components/action-link-arrow--light.png");
-    background: image-url("govuk_publishing_components/action-link-arrow--light.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow--light.png");
+    background: url("govuk_publishing_components/action-link-arrow--light.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;
     background-size: 28px auto;
     background-position: 0 0;
@@ -162,8 +162,8 @@
   &::before {
     height: 30px;
     width: 35px;
-    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);
+    background: url("govuk_publishing_components/action-link-arrow--dark.png");
+    background: url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;

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

@@ -97,6 +97,33 @@
   align-items: flex-end;
 }
 
+.gem-c-image-card--two-thirds {
+  .gem-c-image-card__image {
+    border-top: none;
+  }
+
+  // TODO: Temporary fixes to ensure the layout
+  // renders correctly on screen sizes less than 320px wide
+  @include govuk-media-query($until: "mobile") {
+    padding: 0 govuk-spacing(3);
+  }
+
+  .gem-c-image-card__image-wrapper {
+    @include govuk-media-query($until: "mobile") {
+      margin-bottom: govuk-spacing(2);
+    }
+  }
+
+  // Ensures the font-size is 19px on all screen sizes
+  .gem-c-image-card__title-link--large-font-size-mobile,
+  .gem-c-image-card__description--large-font-size-mobile {
+    @include govuk-media-query($until: "tablet") {
+      font-size: 19px;
+      font-size: govuk-px-to-rem(19);
+    }
+  }
+}
+
 .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
   // The first two values set flex-grow and flex-basis to 0
   // This ensures that the flex item does not grow or shrink
@@ -259,54 +286,20 @@
   }
 }
 
-// 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.
-
+// Ensure the YouTube video has a fluid width
+// https://alistapart.com/article/creating-intrinsic-ratios-for-video/
 .gem-c-image-card__youtube-video-embed {
-  @include govuk-media-query($from: tablet) {
-    transform: scale(1.3);
-  }
-  margin: 0;
-  padding-bottom: 68%;
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
 }
 
-// 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-video-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .gem-c-image-card__youtube-thumbnail-image-container {

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

@@ -12,7 +12,7 @@ $search-icon-size: 40px;
   width: $search-icon-size;
   height: $search-icon-size;
   height: govuk-px-to-rem($search-icon-size);
-  background: image-url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;
+  background: url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;
 }
 
 // this overrides styles from static that break the look of the component

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

@@ -112,7 +112,7 @@
 
 .gem-c-option-select__filter-input {
   @include govuk-font(19);
-  background: image-url("option-select/input-icon.svg") govuk-colour("white") no-repeat -5px -3px;
+  background: url("option-select/input-icon.svg") govuk-colour("white") no-repeat -5px -3px;
 
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);

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

@@ -82,19 +82,19 @@
 }
 
 @mixin crest($crest) {
-  background: image-url("govuk_publishing_components/crests/#{$crest}_13px.png") no-repeat 5px 0;
+  background: url("govuk_publishing_components/crests/#{$crest}_13px.png") no-repeat 5px 0;
   background-size: auto 20px;
 
   @include govuk-device-pixel-ratio {
-    background-image: image-url("govuk_publishing_components/crests/#{$crest}_13px_x2.png");
+    background-image: url("govuk_publishing_components/crests/#{$crest}_13px_x2.png");
   }
 
   @include govuk-media-query($from: tablet) {
-    background: image-url("govuk_publishing_components/crests/#{$crest}_18px.png") no-repeat 6px 0;
+    background: url("govuk_publishing_components/crests/#{$crest}_18px.png") no-repeat 6px 0;
     background-size: auto 26px;
 
     @include govuk-device-pixel-ratio {
-      background-image: image-url("govuk_publishing_components/crests/#{$crest}_18px_x2.png");
+      background-image: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png");
     }
   }
 }

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

@@ -19,13 +19,13 @@ $gem-c-print-link-background-height: 18px;
 
 .gem-c-print-link__link,
 .gem-c-print-link__button {
-  background: image-url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%;
+  background: url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%;
   background-size: $gem-c-print-link-background-width $gem-c-print-link-background-height;
   padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-print-link-background-width);
   text-decoration: none;
 
   @include govuk-device-pixel-ratio($ratio: 2) {
-    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-image: url("govuk_publishing_components/icon-print-2x.png");
   }
 
   &:hover {

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

@@ -95,7 +95,7 @@ $large-input-size: 50px;
   // Note: this is a non-standard CSS feature and will not do anything in Firefox. https://bugzilla.mozilla.org/show_bug.cgi?id=1417753
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
-    background-image: image-url("govuk_publishing_components/icon-close.svg");
+    background-image: url("govuk_publishing_components/icon-close.svg");
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -281,7 +281,7 @@ $large-input-size: 50px;
 .search-toggle {
   display: none;
   background-color: govuk-colour("blue");
-  background-image: image-url("govuk_publishing_components/search-button.png");
+  background-image: url("govuk_publishing_components/search-button.png");
   background-position: 0 50%;
   background-repeat: no-repeat;
   float: right;

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

@@ -4,7 +4,7 @@ $high-alert-border: #cc0000;
 .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 {
   .advisory {
-    background-image: image-url("govuk_publishing_components/icon-important.svg");
+    background-image: url("govuk_publishing_components/icon-important.svg");
     background-repeat: no-repeat;
     background-size: 30px 30px;
     background-position: 98% center;

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

@@ -14,7 +14,7 @@
     a {
       display: block;
       font-weight: 600;
-      background-image: image-url("govuk_publishing_components/icon-file-download.svg");
+      background-image: url("govuk_publishing_components/icon-file-download.svg");
       background-repeat: no-repeat;
       background-size: 40px 40px;
       min-height: 2.5em;

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

@@ -16,7 +16,7 @@
     margin: 2em 0;
 
     // Add '!' icon
-    background-image: image-url("govuk_publishing_components/icon-important.svg");
+    background-image: url("govuk_publishing_components/icon-important.svg");
     background-size: $icon-size $icon-size;
     background-repeat: no-repeat;
     min-height: $icon-size;

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss

@@ -1,2 +1,15 @@
-$govuk-image-url-function: "image-url";
-$govuk-font-url-function: "font-url";
+// Custom image URL function
+// https://github.com/alphagov/govuk-frontend/blob/9f05cea739d14d4cbf18e79b17228045ca84b3ba/packages/govuk-frontend/src/govuk/settings/_assets.scss#L30-L55
+
+@function app-image-url($filename) {
+  @return url("#{$filename}");
+}
+// Custom font URL function
+// https://github.com/alphagov/govuk-frontend/blob/9f05cea739d14d4cbf18e79b17228045ca84b3ba/packages/govuk-frontend/src/govuk/settings/_assets.scss#L57-L82
+
+@function app-font-url($filename) {
+  @return url("#{$filename}");
+}
+
+$govuk-image-url-function: "app-image-url";
+$govuk-font-url-function: "app-font-url";

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -161,7 +161,7 @@ module GovukPublishingComponents
     end
 
     def clean_file_path(file)
-      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z+.]+/]
+      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/0-9a-zA-Z_-]+.[0-9a-zA-Z+.]+/]
     end
 
     def clean_file_name(name)

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

@@ -1,6 +1,8 @@
 <%
   add_gem_component_stylesheet("file-upload")
 
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   id ||= "file-upload-#{SecureRandom.hex(4)}"
   value ||= nil
   accept ||= nil
@@ -13,6 +15,8 @@
   has_error = error_message || error_items.any?
   hint_id = "hint-#{SecureRandom.hex(4)}"
   error_id = "error-#{SecureRandom.hex(4)}"
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
+  heading_level ||= nil
 
   css_classes = %w(gem-c-file-upload govuk-file-upload)
   css_classes << "govuk-file-upload--error" if has_error
@@ -30,7 +34,20 @@
 
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
-    <%= render "govuk_publishing_components/components/label", { html_for: id, text: label[:text] }.merge(label.symbolize_keys) %>
+    <% label_markup = capture do %>
+      <%= render "govuk_publishing_components/components/label", {
+        html_for: id,
+        heading_size: heading_size
+      }.merge(label.symbolize_keys) %>
+    <% end %>
+
+    <% if heading_level %>
+      <%= content_tag(shared_helper.get_heading_level, class: "govuk-label-wrapper") do %>
+        <%= label_markup %>
+      <% end %>
+    <% else %>
+      <%= label_markup %>
+    <% end %>
   <% end %>
 
   <% if hint %>

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

@@ -8,12 +8,9 @@
   gtm_attributes = gtm_attributes.join('&')
 %>
 <%= 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':
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
   j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
   'https://www.googletagmanager.com/gtm.js?id='+i+dl+'&<%= raw gtm_attributes %>';f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','<%= gtm_id %>');
-}
 <% end -%>

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

@@ -27,6 +27,7 @@
     govuk-link
   ]
   heading_link_classes << brand_helper.color_class
+  heading_link_classes << "gem-c-image-card__title-link--large-font-size-mobile" if card_helper.large_mobile_font_size?
   extra_link_classes = %w[
     gem-c-image-card__list-item-link
     govuk-link

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

@@ -37,6 +37,7 @@
   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({ "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]
   options_container_classes << "gem-c-option-select__container--large" if large

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

@@ -48,3 +48,14 @@ examples:
         text: "Upload an image"
       name: "file-upload-specific"
       accept: "image/*"
+  with_label_as_heading:
+    description: |
+      Wraps the label in a heading tag. Valid options are `1` to `6`. To adjust the size of the label/heading, use the `heading_size` option. Valid options are `s`, `m`, `l` and `xl`.
+
+      Based on the [heading/label pattern](https://design-system.service.gov.uk/patterns/question-pages/) in the GOV.UK Design System.
+    data:
+      label:
+        text: "This is a heading 1 and a label"
+      name: "name"
+      heading_level: 1
+      heading_size: "l"

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

@@ -206,7 +206,10 @@ examples:
         <%= component %>
       </div>
   two_thirds:
-    description: This variant is used for the featured section on the homepage. The aspect ratio used is 1:1 and the width of the image is constrained to 80px wide.
+    description: |
+      This variant is used for the featured section on the homepage. The aspect ratio used is 1:1 and the width of the image is constrained to 80px wide.
+
+      Setting `large_font_size_mobile` to `true` will ensure that the font size for the title and description will be 19px on all screen sizes.
     data:
       two_thirds: true
       href: "/still-not-a-page"
@@ -214,6 +217,7 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: "Something has happened nearby possibly"
       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."
+      large_font_size_mobile: true
     embed: |
       <div class="govuk-!-width-full">
         <%= component %>

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

@@ -156,6 +156,24 @@ examples:
           track_label: "high_heels"
           track_options:
             dimension28: 1
+  with_button_data_attributes:
+    description: Allows data attributes to be passed to the component to be added to the expand/collapse button. The attributes are written to the parent element then read by the JavaScript and applied to the button. This is used for tracking purposes.
+    data:
+      key: market_sector
+      title: Market sector
+      options_container_id: list_of_sectors
+      button_data_attributes:
+        ga4_expandable: ""
+        ga4_event:
+          event_name: "select_content"
+          type: "finder"
+      options:
+      - value: aerospace
+        label: Aerospace
+        id: aerospace
+      - value: agriculture-environment-and-natural-resources
+        label: Agriculture, environment and natural resources
+        id: agriculture-environment-and-natural-resources
   with_filter:
     description: Adds a filter to allow users to narrow the checkboxes down. Checkboxes will only show if they match what the user has typed, or if they are already checked. The filter is case insensitive and strips out punctuation characters and duplicate whitespace, and sees '&' and 'and' as the same, to make filtering easier.
     data:

data/config/initializers/assets.rb

@@ -7,7 +7,13 @@ return unless Rails.application.config.respond_to?(:assets)
 # In future we may want applications to link directly to this from their
 # manifest file as the use of `config.assets.precompile` is discouraged
 # from version 4: https://github.com/rails/sprockets/blob/58cca17aa447fcee17703e4ab4dbfaab630e7ed4/UPGRADING.md
-Rails.application.config.assets.precompile += %w[govuk_publishing_components_manifest.js]
+# Rails.application.config.assets.precompile += %w[govuk_publishing_components_manifest.js]
+
+if Gem.loaded_specs.key?("dartsass-rails")
+  Rails.application.config.assets.precompile += %w[govuk_publishing_components_manifest.js]
+elsif Gem.loaded_specs.key?("sassc-rails")
+  Rails.application.config.assets.precompile += %w[govuk_publishing_components_sassc-rails_manifest.js]
+end
 
 Rails.application.config.assets.paths += %W[
   #{__dir__}/../../node_modules/govuk-frontend/govuk/assets/images

data/lib/govuk_publishing_components/config.rb

@@ -28,5 +28,17 @@ module GovukPublishingComponents
     def self.gem_directory
       Gem::Specification.find_by_name("govuk_publishing_components").gem_dir
     end
+
+    def self.all_stylesheets
+      stylesheets = Dir.glob("#{gem_directory}/app/assets/stylesheets/govuk_publishing_components/components/*.scss")
+      # _copy-to-clipboard.css is removed due to being an empty stylesheet
+      included_files = stylesheets.reject { |path| path.include?("copy-to-clipboard") }
+
+      application_stylesheet_hash = { "#{gem_directory}/app/assets/stylesheets/component_guide/application.scss" => "component_guide/application.css" }
+
+      included_files.each_with_object(application_stylesheet_hash) do |path, hsh|
+        hsh[path] = "govuk_publishing_components/components/#{File.basename(path, '.*')}.css"
+      end
+    end
   end
 end

data/lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -4,7 +4,7 @@ module GovukPublishingComponents
       include ActionView::Helpers
       include ActionView::Context
 
-      attr_reader :href_data_attributes, :extra_details, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading, :youtube_video_id, :image_src, :two_thirds
+      attr_reader :href_data_attributes, :extra_details, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading, :youtube_video_id, :image_src, :two_thirds, :large_font_size_mobile
 
       def initialize(local_assigns, brand_helper)
         @href = local_assigns[:href]
@@ -21,6 +21,7 @@ module GovukPublishingComponents
         @description = local_assigns[:description]
         @large = local_assigns[:large]
         @two_thirds = local_assigns[:two_thirds] || false
+        @large_font_size_mobile = local_assigns[:large_font_size_mobile] || false
         @heading_text = local_assigns[:heading_text]
         @extra_details_no_indent = local_assigns[:extra_details_no_indent]
         @metadata = local_assigns[:metadata]
@@ -43,6 +44,13 @@ module GovukPublishingComponents
         @youtube_video_id || @large
       end
 
+      def large_mobile_font_size?
+        # allow the font-size to be 19px on mobile
+        # for the two-thirds varation of the
+        # image card component
+        @two_thirds && @large_font_size_mobile
+      end
+
       def is_tracking?
         return true if @href_data_attributes
 
@@ -104,6 +112,8 @@ module GovukPublishingComponents
       end
 
       def description
+        return content_tag(:div, @description, class: "gem-c-image-card__description gem-c-image-card__description--large-font-size-mobile") if @description && large_mobile_font_size?
+
         content_tag(:div, @description, class: "gem-c-image-card__description") if @description
       end
 

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "36.0.3".freeze
+  VERSION = "37.0.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 36.0.3
+  version: 37.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-12-07 00:00:00.000000000 Z
+date: 2023-12-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -108,6 +108,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '3'
+- !ruby/object:Gem::Dependency
+  name: sprockets-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: capybara
   requirement: !ruby/object:Gem::Requirement
@@ -123,7 +137,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: faker
+  name: dartsass-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -137,7 +151,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: gds-api-adapters
+  name: faker
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -151,7 +165,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: govuk_schemas
+  name: gds-api-adapters
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -165,7 +179,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: govuk_test
+  name: govuk_schemas
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -179,7 +193,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: i18n-coverage
+  name: govuk_test
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -193,7 +207,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: percy-capybara
+  name: i18n-coverage
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -207,7 +221,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: pry-byebug
+  name: percy-capybara
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -221,7 +235,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: rails_translation_manager
+  name: pry-byebug
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -235,7 +249,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: rake
+  name: rails_translation_manager
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -249,7 +263,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: rspec-rails
+  name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -263,7 +277,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: rubocop-govuk
+  name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -277,7 +291,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: sassc-rails
+  name: rubocop-govuk
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -342,6 +356,7 @@ files:
 - LICENCE.md
 - README.md
 - app/assets/config/govuk_publishing_components_manifest.js
+- app/assets/config/govuk_publishing_components_sassc-rails_manifest.js
 - app/assets/images/govuk_publishing_components/action-link-arrow--dark.png
 - app/assets/images/govuk_publishing_components/action-link-arrow--dark.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow--light.png
@@ -1461,7 +1476,11 @@ homepage: https://github.com/alphagov/govuk_publishing_components
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message: govuk_publishing_components has now migrated to dartsass-rails
+  from sassc-rails for stylesheet compilation since LibSass is deprecated. While both
+  implementations are supported, it is recommended to update your application to use
+  the latest implementation of Sass (dartsass-rails). You can find further details
+  in the docs - https://docs.publishing.service.gov.uk/manual/migrate-to-dart-sass-from-libsass.html.
 rdoc_options: []
 require_paths:
 - lib