govuk_publishing_components 24.12.0 → 24.13.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9bf26b097c1773c4126687d518e698357b3c57425cc63f3b55788ed58e211019
-  data.tar.gz: 8a016b8a8d05b0805600eb6770fd401e8af63a8086bc077ed1cdc9c2816a64f2
+  metadata.gz: 48d13ec5bd03475381c42cb9e3fbdb32118e851c82a2021462994e0af0cbe042
+  data.tar.gz: 30b3eaa8d62c9fe6eab0c48b65667329e9ae99d955f584cd37009dc59daeb254
 SHA512:
-  metadata.gz: e32f62161f041f1614788acb40837ac1d535a90721de924bd1d86ce8e4abff8be1051fe10742042347fcb22982f45b35cba12e8f8eb2f3e07690cd57c5f78644
-  data.tar.gz: 57329b331cd9939c9f00c08b216c30b8b7ae1349ba1a2aa881ff488b14a49c795a7fcf2dc287243aa80f50159899bdfa1e9aa69677a39f3fe46cc8144ae2f91f
+  metadata.gz: 83f0878e78d24711ed4fa7694d4becac691474370c29b33b355faed6dc98b98619af4f22bb6d3bdd70a787c510d93ac3cf8659d78ff7b009a3a46bbce93a9a50
+  data.tar.gz: 919f5697fbba2e55d2709e24750af0f3d3d07836958c0a09ece0cba6a5ee8e4634e58b99230303eb6ce88f467e5a4e99ced6a3bf3de527fb7ef1b4c2e7fd344a

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

@@ -41,7 +41,9 @@
     // we ignore the possibility of there being campaign variables in the
     // anchor because we wouldn't know how to detect and parse them if they
     // were present
-    return this.pii.stripPIIFromString(location.href.substring(location.origin.length).split('#')[0])
+    // IE can't access window.location.origin, so we have to do this slightly complex thing
+    var root = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '')
+    return this.pii.stripPIIFromString(location.href.substring(root.length).split('#')[0])
   }
 
   Analytics.prototype.trackPageview = function (path, title, options) {

data/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js

@@ -33,6 +33,8 @@
 
     if (window.devicePixelRatio) {
       customDimensions.dimension11 = window.devicePixelRatio
+    } else {
+      customDimensions.dimension11 = window.screen.deviceXDPI / window.screen.logicalXDPI
     }
 
     return customDimensions

data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js

@@ -6,7 +6,7 @@
   window.GOVUK = window.GOVUK || {}
 
   var CONFIG = {
-    '/transition': [
+    '/brexit': [
       ['Percent', 20],
       ['Percent', 40],
       ['Percent', 60],

data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js

@@ -33,7 +33,9 @@ window.GOVUK.Modules.Checkboxes = window.GOVUKFrontend;
     if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
       // Where checkboxes are manipulated externally in finders, `suppressAnalytics`
       // is passed to prevent duplicate GA events.
-      if (!event.detail || (event.detail && event.detail.suppressAnalytics !== true)) {
+      // use Oliver Steele's Nested Object Access Pattern https://hackernoon.com/accessing-nested-objects-in-javascript-f02f1bd6387f
+      var allowAnalytics = ((event || {}).detail || {}).suppressAnalytics !== true
+      if (allowAnalytics) {
         var $checkbox = event.target
         var category = $checkbox.getAttribute('data-track-category')
         if (category) {
@@ -100,11 +102,11 @@ window.GOVUK.Modules.Checkboxes = window.GOVUKFrontend;
     var $exclusiveOption = $checkboxes.querySelector('input[type=checkbox][data-exclusive]')
     var $nonExclusiveOptions = $checkboxes.querySelectorAll('input[type=checkbox]:not([data-exclusive])')
 
-    if ($currentCheckbox.dataset.exclusive === 'true' && $currentCheckbox.checked === true) {
+    if ($currentCheckbox.getAttribute('data-exclusive') === 'true' && $currentCheckbox.checked === true) {
       for (var i = 0; i < $nonExclusiveOptions.length; i++) {
         $nonExclusiveOptions[i].checked = false
       }
-    } else if ($currentCheckbox.dataset.exclusive !== 'true' && $currentCheckbox.checked === true) {
+    } else if ($currentCheckbox.getAttribute('data-exclusive') !== 'true' && $currentCheckbox.checked === true) {
       if ($exclusiveOption) {
         $exclusiveOption.checked = false
       }

data/app/assets/javascripts/govuk_publishing_components/components/contextual-guidance.js

@@ -15,7 +15,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   ContextualGuidance.prototype.handleFocus = function (event) {
     this.hideAllGuidance()
-    if (!event.target.dataset.contextualGuidanceHideOnly) {
+    if (!event.target.getAttribute('data-contextual-guidance-hide-only')) {
       this.$guidance.style.display = 'block'
     }
   }

data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js

@@ -26,14 +26,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     var boundOnClickUpButton = this.onClickUpButton.bind(this)
-    this.$upButtons.forEach(function (button) {
-      button.addEventListener('click', boundOnClickUpButton)
-    })
+    for (var u = 0; u < this.$upButtons.length; u++) {
+      this.$upButtons[u].addEventListener('click', boundOnClickUpButton)
+    }
 
     var boundOnClickDownButton = this.onClickDownButton.bind(this)
-    this.$downButtons.forEach(function (button) {
-      button.addEventListener('click', boundOnClickDownButton)
-    })
+    for (var d = 0; d < this.$downButtons.length; d++) {
+      this.$downButtons[d].addEventListener('click', boundOnClickDownButton)
+    }
   }
 
   ReorderableList.prototype.setupResponsiveChecks = function () {
@@ -85,9 +85,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   ReorderableList.prototype.updateOrderIndexes = function () {
     var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
-    $orderInputs.forEach(function (input, index) {
-      input.setAttribute('value', index + 1)
-    })
+    for (var i = 0; i < $orderInputs.length; i++) {
+      $orderInputs[i].setAttribute('value', i + 1)
+    }
   }
 
   ReorderableList.prototype.triggerEvent = function (element, eventName) {

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -462,11 +462,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var allCharts = document.querySelectorAll('table.js-barchart-table')
     var id = null
 
-    allCharts.forEach(function (chart, i) {
-      if (chart === module) {
+    for (var i = 0; i < allCharts.length; i++) {
+      if (allCharts[i] === module) {
         id = i
       }
-    })
+    }
 
     return id
   }

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -21,8 +21,14 @@
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
+          if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+            window.GOVUK.analytics.trackEvent('headerClicked', 'searchClosed', { label: 'none' })
+          }
         } else {
           target.setAttribute('class', targetClass + ' js-visible')
+          if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+            window.GOVUK.analytics.trackEvent('headerClicked', 'searchOpened', { label: 'none' })
+          }
         }
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -2,15 +2,17 @@
   'use strict'
   window.GOVUK = window.GOVUK || {}
 
-  window.GOVUK.triggerEvent = function (element, eventName) {
-    var params = { bubbles: true, cancelable: true }
+  window.GOVUK.triggerEvent = function (element, eventName, parameters) {
+    var params = parameters || {}
+    params.bubbles = true
+    params.cancelable = true
     var event
 
     if (typeof window.CustomEvent === 'function') {
       event = new window.CustomEvent(eventName, params)
     } else {
       event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable, null)
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable, params.detail)
     }
 
     element.dispatchEvent(event)

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

@@ -1,6 +1,9 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
+// feature flag for accessible link styles
+$govuk-new-link-styles: true;
+
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 

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

@@ -40,6 +40,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     @include govuk-font($size: 16);
     @include govuk-link-common;
     @include govuk-link-style-default;
+
     // Remove default button focus outline in Firefox
     &::-moz-focus-inner {
       padding: 0;
@@ -47,21 +48,6 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  .gem-c-accordion__open-all:hover,
-  .gem-c-accordion__open-all-text:hover {
-    text-decoration: underline;
-    color: $govuk-link-colour;
-  }
-
-  // Focus state, also to change chervon icon to black
-  .gem-c-accordion__open-all:focus {
-    .gem-c-accordion__open-all-text,
-    .gem-c-accordion-nav__chevron {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
-  }
-
   // Create Chervon icon align with text
   .gem-c-accordion-nav__chevron {
     vertical-align: text-top;
@@ -73,6 +59,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     margin-left: govuk-em(5, 14);
     border: govuk-em(1, 14) solid;
     border-radius: govuk-em(100, 14);
+
     // Main icon size across views, yet keep responsive for zoom
     @include govuk-media-query($from: tablet) {
       width: govuk-em(20, 16);
@@ -94,6 +81,7 @@ $gem-c-accordion-bottom-border-width: 1px;
       transform: rotate(-45deg);
       left: govuk-em(6, 14);
       bottom: govuk-em(5, 14);
+
       @include govuk-media-query($from: tablet) {
         width: govuk-em(6, 16);
         height: govuk-em(6, 16);
@@ -105,6 +93,22 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
+  .gem-c-accordion__open-all:hover,
+  .gem-c-accordion__section-button:hover {
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-link-hover-colour;
+      text-decoration: none;
+    }
+  }
+
+  // Focus state, also to change chervon icon to black
+  .gem-c-accordion__open-all:focus {
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-focus-text-colour;
+      text-decoration: none;
+    }
+  }
+
   // Rotate icon to create "Down" version
   .gem-c-accordion-nav__chevron--down {
     transform: rotate(180deg);
@@ -150,6 +154,10 @@ $gem-c-accordion-bottom-border-width: 1px;
     @include govuk-typography-common;
     width: 100%;
 
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
     &:active {
       z-index: 1;
       color: $govuk-link-active-colour;
@@ -163,26 +171,12 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  .gem-c-accordion__section-button:hover {
-    color: $govuk-link-colour;
-    // On hover, add underline to toggle link
-    .gem-c-accordion__toggle-text {
-      text-decoration: underline;
-      color: $govuk-link-colour;
-    }
-  }
-
   .gem-c-accordion__section-button:focus {
     @include govuk-focused-text;
     // Overwrite focus border to top
     box-shadow: 0 0, 0 -4px;
     border-top: 1px solid transparent;
 
-    // Focus state to change the toggle link within individual sections
-    .gem-c-accordion__toggle-text {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
     // Focus state to change chervon icon colour within individual sections
     .gem-c-accordion-nav__chevron {
       color: $govuk-text-colour;
@@ -225,10 +219,24 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  // Setting width of the text, so the icon doesn't shift (left / right) when toggled
   .gem-c-accordion__toggle-text {
-    min-width: govuk-em(40, 16);
     display: inline-block;
+    // Setting width of the text so the icon doesn't shift left or right when
+    // toggled:
+    min-width: govuk-em(40, 16);
+  }
+
+  // On hover add underline to toggle link only:
+  .gem-c-accordion__section-button:hover .gem-c-accordion__toggle-text {
+    color: $govuk-link-hover-colour;
+    @include govuk-link-decoration;
+    @include govuk-link-hover-decoration;
+  }
+
+  // Ensure the correct focus sstate text colour and no underline:
+  .gem-c-accordion__section-button:focus .gem-c-accordion__toggle-text {
+    color: $govuk-focus-text-colour;
+    text-decoration: none;
   }
 
   .gem-c-accordion__open-all-text {
@@ -237,6 +245,17 @@ $gem-c-accordion-bottom-border-width: 1px;
     text-align: left;
   }
 
+  .gem-c-accordion__open-all:hover {
+    .gem-c-accordion__open-all-text {
+      @include govuk-link-decoration;
+      @include govuk-link-hover-decoration;
+    }
+  }
+
+  .gem-c-accordion__open-all:focus .gem-c-accordion__open-all-text {
+    text-decoration: none;
+  }
+
   // Change the summary subheading size.
   .gem-c-accordion__section-summary {
     @include govuk-responsive-margin(1, "top");

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

@@ -32,10 +32,6 @@
 .gem-c-action-link__link {
   color: inherit;
 
-  &:hover {
-    text-decoration: underline;
-  }
-
   &:focus {
     text-decoration: none;
     color: $govuk-focus-text-colour;
@@ -106,10 +102,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--simple-light {
@@ -122,10 +114,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--dark-icon {
@@ -150,10 +138,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--transparent-icon {
@@ -177,25 +161,6 @@
 .gem-c-action-link--light-text {
   color: govuk-colour("white");
 
-  .gem-c-action-link__link,
-  .gem-c-action-link__subtext-link {
-    text-decoration: underline;
-
-    &:link,
-    &:visited {
-      color: govuk-colour("white");
-    }
-
-    &:hover {
-      color: $gem-hover-dark-background;
-    }
-
-    &:focus {
-      text-decoration: none;
-      color: $govuk-focus-text-colour;
-    }
-  }
-
   .gem-c-action-link__subtext {
     &:before {
       border-color: govuk-colour("white");

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

@@ -25,19 +25,6 @@
   list-style-type: none;
 }
 
-.gem-c-contents-list--no-underline {
-  .gem-c-contents-list__link {
-    text-decoration: none;
-
-    &:hover,
-    &:active {
-      text-decoration: underline;
-    }
-
-    @include govuk-template-link-focus-override;
-  }
-}
-
 .gem-c-contents-list__link {
   .gem-c-contents-list__list-item--parent > & {
     font-weight: bold;

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

@@ -63,12 +63,6 @@
 }
 
 .gem-c-image-card__title-link {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
   &:focus {
     text-decoration: none;
   }

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

@@ -7,10 +7,6 @@
   box-sizing: border-box;
 }
 
-.gem-c-inverse-header a {
-  color: govuk-colour("white");
-}
-
 .gem-c-inverse-header .gem-c-inverse-header__supplement,
 .gem-c-inverse-header .publication-header__last-changed {
   // This publication-header class is injected on publication pages, really

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

@@ -1,12 +1,14 @@
 // Default logo corresponds with the "medium stacked" Whitehall equivalent
 .gem-c-organisation-logo {
   font-size: 13px;
-  line-height: (15 / 13);
   font-weight: 400;
+  line-height: 1.35;
+  // When this is a heading the margin needs to be set to stop it from
+  // inheriting the browser's default margin:
+  margin: 0;
 
   @include govuk-media-query($from: tablet) {
     font-size: 18px;
-    line-height: 20px;
   }
 }
 
@@ -62,7 +64,12 @@
   font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
 
   &:hover {
-    text-decoration: underline;
+    color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    color: govuk-colour("black");
+    @include govuk-link-hover-decoration;
   }
 
   &:focus {