govuk_publishing_components 24.9.4 → 24.11.0

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

@@ -98,7 +98,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       event = new window.CustomEvent(eventName, params)
     } else {
       event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable, null)
     }
 
     element.dispatchEvent(event)

data/app/assets/javascripts/govuk_publishing_components/components/show-password.js

@@ -41,6 +41,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.wrapper.insertBefore(this.statusText, this.showHide.nextSibling)
 
     this.showHide.addEventListener('click', this.$module.togglePassword)
+    this.moveDataAttributesToButton()
 
     this.parentForm = this.input.form
     var disableFormSubmitCheck = this.$module.getAttribute('data-disable-form-submit-check')
@@ -65,5 +66,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.input.setAttribute('type', 'password')
   }
 
+  ShowPassword.prototype.moveDataAttributesToButton = function () {
+    var attrs = this.input.attributes
+    for (var i = attrs.length; i >= 0; i--) {
+      var attr = attrs[i]
+      if (attr && /^data-button/.test(attr.name)) {
+        this.showHide.setAttribute(attr.name.replace('-button', ''), attr.value)
+        this.input.removeAttribute(attr.name)
+      }
+    }
+  }
+
   Modules.ShowPassword = ShowPassword
 })(window.GOVUK.Modules)

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

@@ -74,7 +74,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.addShowHideAllButton = function () {
     var showall = document.createElement('div')
-    showall.className = 'gem-c-step-nav__controls'
+    showall.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
     showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
       '<span class="gem-c-step-nav__button-text gem-c-step-nav__button-text--all js-step-controls-button-text">' + this.$module.actions.showAllText + '</span>' +
       '<span class="gem-c-step-nav__chevron js-step-controls-button-icon">' + this.$module.downChevronSvg + '</span>' +
@@ -98,7 +98,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var commaSpan = document.createElement('span')
         var thisSectionSpan = document.createElement('span')
 
-        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link'
+        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link govuk-!-display-none-print'
         showHideSpanText.className = 'gem-c-step-nav__button-text js-toggle-link-text'
         showHideSpanIcon.className = 'gem-c-step-nav__chevron js-toggle-link-icon'
         commaSpan.className = 'govuk-visually-hidden'

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

@@ -0,0 +1,18 @@
+(function (root) {
+  'use strict'
+  window.GOVUK = window.GOVUK || {}
+
+  window.GOVUK.triggerEvent = function (element, eventName) {
+    var params = { bubbles: true, 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)
+    }
+
+    element.dispatchEvent(event)
+  }
+}(window))

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

@@ -4,22 +4,11 @@
 @import "govuk_frontend_support";
 
 @import "components/print/accordion";
-@import "components/print/attachment";
-@import "components/print/back-link";
 @import "components/print/button";
 @import "components/print/contents-list";
-@import "components/print/feedback";
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
-@import "components/print/layout-header";
-@import "components/print/layout-footer";
-@import "components/print/metadata";
-@import "components/print/search";
-@import "components/print/share-links";
-@import "components/print/skip-link";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
-@import "components/print/subscription-links";
 @import "components/print/textarea";
 @import "components/print/title";
-@import "components/print/translation-nav";

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

@@ -68,17 +68,17 @@ $gem-c-accordion-bottom-border-width: 1px;
     display: inline-block;
     box-sizing: border-box;
     position: relative;
-    width: em(20, 14);
-    height: em(20, 14);
-    margin-left: em(5, 14);
-    border: em(1, 14) solid;
-    border-radius: em(100, 14);
+    width: govuk-em(20, 14);
+    height: govuk-em(20, 14);
+    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: em(20, 16);
-      height: em(20, 16);
-      margin-left: em(5, 16);
-      border: em(1, 16) solid;
+      width: govuk-em(20, 16);
+      height: govuk-em(20, 16);
+      margin-left: govuk-em(5, 16);
+      border: govuk-em(1, 16) solid;
     }
 
     &:after {
@@ -87,20 +87,20 @@ $gem-c-accordion-bottom-border-width: 1px;
       box-sizing: border-box;
       position: absolute;
       overflow: visible;
-      width: em(6, 14);
-      height: em(6, 14);
-      border-top: em(2, 14) solid;
-      border-right: em(2, 14) solid;
+      width: govuk-em(6, 14);
+      height: govuk-em(6, 14);
+      border-top: govuk-em(2, 14) solid;
+      border-right: govuk-em(2, 14) solid;
       transform: rotate(-45deg);
-      left: em(6, 14);
-      bottom: em(5, 14);
+      left: govuk-em(6, 14);
+      bottom: govuk-em(5, 14);
       @include govuk-media-query($from: tablet) {
-        width: em(6, 16);
-        height: em(6, 16);
-        border-top: em(2, 16) solid;
-        border-right: em(2, 16) solid;
-        left: em(6, 16);
-        bottom: em(5, 16);
+        width: govuk-em(6, 16);
+        height: govuk-em(6, 16);
+        border-top: govuk-em(2, 16) solid;
+        border-right: govuk-em(2, 16) solid;
+        left: govuk-em(6, 16);
+        bottom: govuk-em(5, 16);
       }
     }
   }
@@ -227,12 +227,12 @@ $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: em(40, 16);
+    min-width: govuk-em(40, 16);
     display: inline-block;
   }
 
   .gem-c-accordion__open-all-text {
-    min-width: em(120, 16);
+    min-width: govuk-em(120, 16);
     display: inline-block;
     text-align: left;
   }
@@ -277,20 +277,20 @@ $gem-c-accordion-bottom-border-width: 1px;
 
     // Reduce Chevron size
     .gem-c-accordion-nav__chevron {
-      width: em(20, 14);
-      height: em(20, 14);
-      margin-left: em(5, 14);
-      border: em(1, 14) solid;
-      border-radius: em(100, 14);
+      width: govuk-em(20, 14);
+      height: govuk-em(20, 14);
+      margin-left: govuk-em(5, 14);
+      border: govuk-em(1, 14) solid;
+      border-radius: govuk-em(100, 14);
       transform: scale(.875);
 
       &:after {
-        width: em(6, 14);
-        height: em(6, 14);
-        border-top: em(2, 14) solid;
-        border-right: em(2, 14) solid;
-        left: em(6, 14);
-        bottom: em(5, 14);
+        width: govuk-em(6, 14);
+        height: govuk-em(6, 14);
+        border-top: govuk-em(2, 14) solid;
+        border-right: govuk-em(2, 14) solid;
+        left: govuk-em(6, 14);
+        bottom: govuk-em(5, 14);
       }
     }
 

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

@@ -21,6 +21,7 @@
 @import "govspeak/typography";
 @import "govspeak/warning-callout";
 
+.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 {
   &.direction-rtl {
     direction: rtl;

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

@@ -7,6 +7,11 @@
   a {
     @include govuk-link-common;
     @include govuk-link-style-default;
+    font-weight: bold;
+  }
+
+  .gem-c-metadata__definition-link {
+    font-weight: normal;
   }
 }
 
@@ -29,17 +34,19 @@
   }
 }
 
+.gem-c-metadata__term,
+.gem-c-metadata__definition {
+  line-height: 1.4;
+}
+
 .gem-c-metadata__term {
   margin-top: .5em;
-  line-height: 1.4;
 
   @include govuk-media-query($from: tablet) {
     box-sizing: border-box;
     float: left;
     clear: left;
-    width: 30%;
-    max-width: 11em;
-    padding-right: govuk-spacing(2);
+    padding-right: govuk-spacing(1);
     margin-top: 0;
   }
 }
@@ -49,31 +56,21 @@
   clear: right;
 
   @include govuk-media-query($from: tablet) {
-    padding-left: govuk-spacing(2);
+    padding-left: govuk-spacing(1);
     padding-right: 0;
   }
 }
 
 .gem-c-metadata__definition {
   margin: 0;
-  line-height: 1.4;
 
   @include govuk-media-query($from: tablet) {
-    float: left;
-    width: 70%;
+    &:not(:last-of-type) {
+      margin-bottom: govuk-spacing(1);
+    }
   }
 }
 
-.gem-c-metadata__definition-link {
-  text-decoration: none;
-}
-
-.gem-c-metadata__definition-link:focus,
-.gem-c-metadata__definition-link:active,
-.gem-c-metadata__definition-link:hover {
-  text-decoration: underline;
-}
-
 .gem-c-metadata.direction-rtl .gem-c-metadata__definition {
   float: right;
 }

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

@@ -6,7 +6,7 @@
   clear: both;
   border: $govuk-border-width solid govuk-colour("blue");
 
-  .govuk-govspeak, {
+  .govuk-govspeak {
     p:last-child {
       margin-bottom: 0;
     }
@@ -27,7 +27,9 @@
   }
 
   a {
-    @extend %govuk-link;
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+    @include govuk-link-print-friendly;
   }
 }
 

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

@@ -53,8 +53,8 @@ $large-input-size: 50px;
   @include govuk-font($size: 19, $line-height: (28 / 19));
   margin: 0;
   width: 100%;
-  height: em(40, 16);
-  padding: em(6, 16);
+  height: govuk-em(40, 16);
+  padding: govuk-em(6, 16);
   border: $govuk-border-width-form-element solid $govuk-input-border-colour;
   background: govuk-colour("white");
   border-radius: 0; //otherwise iphones apply an automatic border radius
@@ -63,8 +63,8 @@ $large-input-size: 50px;
   -moz-appearance: none;
   appearance: none;
   @include govuk-media-query($from: tablet) {
-    height: em(40, 19);
-    padding: em(6, 19);
+    height: govuk-em(40, 19);
+    padding: govuk-em(6, 19);
   }
 
   // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in

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

@@ -15,12 +15,12 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 @mixin step-nav-line-position {
   left: 0;
-  margin-left: em(($number-circle-size / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(($number-circle-size / 2) - ($stroke-width / 2), 16);
 }
 
 @mixin step-nav-line-position-large {
   left: 0;
-  margin-left: em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
 }
 
 // custom mixin as govuk-font does undesirable things at different breakpoints
@@ -136,10 +136,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__chevron {
   display: inline-block;
   vertical-align: middle;
-  margin-left: em(5, 14);
+  margin-left: govuk-em(5, 14);
 
   .gem-c-step-nav--large & {
-    margin-left: em(5, 16);
+    margin-left: govuk-em(5, 16);
   }
 
   svg {
@@ -150,18 +150,18 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__button-text {
   display: inline-block;
   text-align: left;
-  min-width: em(35, 14);
+  min-width: govuk-em(35, 14);
 
   .gem-c-step-nav--large & {
-    min-width: em(40, 16);
+    min-width: govuk-em(40, 16);
   }
 }
 
 .gem-c-step-nav__button-text--all {
-  min-width: em(87, 14);
+  min-width: govuk-em(87, 14);
 
   .gem-c-step-nav--large & {
-    min-width: em(100, 16);
+    min-width: govuk-em(100, 16);
   }
 }
 
@@ -172,23 +172,23 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__step {
   position: relative;
-  padding-left: em(govuk-spacing(6) + govuk-spacing(3), 16);
+  padding-left: govuk-em(govuk-spacing(6) + govuk-spacing(3), 16);
   list-style: none;
 
   // line down the side of a step
   &:after {
     @include step-nav-vertical-line;
     @include step-nav-line-position;
-    top: em(govuk-spacing(3), 16);
+    top: govuk-em(govuk-spacing(3), 16);
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      padding-left: em(govuk-spacing(9), 16);
+      padding-left: govuk-em(govuk-spacing(9), 16);
 
       &:after { // stylelint-disable-line max-nesting-depth
         @include step-nav-line-position-large;
-        top: em(govuk-spacing(6), 16);
+        top: govuk-em(govuk-spacing(6), 16);
       }
     }
   }
@@ -246,8 +246,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   z-index: 5;
   top: 3px;
   left: 0;
-  width: em($number-circle-size, 16);
-  height: em($number-circle-size, 16);
+  width: govuk-em($number-circle-size, 16);
+  height: govuk-em($number-circle-size, 16);
   color: govuk-colour("black");
   background: govuk-colour("white");
   border-radius: 100px;
@@ -256,8 +256,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
       top: 11px;
-      width: em($number-circle-size-large, 19);
-      height: em($number-circle-size-large, 19);
+      width: govuk-em($number-circle-size-large, 19);
+      height: govuk-em($number-circle-size-large, 19);
     }
   }
 }
@@ -283,15 +283,15 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__circle--logic {
   @include step-nav-font(19, $weight: bold, $line-height: 28px);
   left: 3px;
-  width: em($number-circle-size, 19);
-  height: em($number-circle-size, 19);
+  width: govuk-em($number-circle-size, 19);
+  height: govuk-em($number-circle-size, 19);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
 
     @include govuk-media-query($from: tablet) {
-      width: em($number-circle-size-large, 24);
-      height: em($number-circle-size-large, 24);
+      width: govuk-em($number-circle-size-large, 24);
+      height: govuk-em($number-circle-size-large, 24);
     }
   }
 }

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

@@ -1,33 +1,36 @@
 $info-background: #d5e8f3;
 $high-alert-border: #cc0000;
 
-.gem-c-govspeak .advisory {
-  background-image: image-url("govuk_publishing_components/icon-important.svg");
-  background-repeat: no-repeat;
-  background-size: 30px 30px;
-  background-position: 98% center;
-  background-color: $info-background;
-  line-height: 1.3em;
-  margin: 0 -1em 1em;
-  padding: govuk-spacing(3) govuk-spacing(8) govuk-spacing(3) govuk-spacing(3);
-  text-align: left;
+.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-repeat: no-repeat;
+    background-size: 30px 30px;
+    background-position: 98% center;
+    background-color: $info-background;
+    line-height: 1.3em;
+    margin: 0 -1em 1em;
+    padding: govuk-spacing(3) govuk-spacing(8) govuk-spacing(3) govuk-spacing(3);
+    text-align: left;
 
-  p {
-    margin: 0 .75em 0 0;
-    min-height: 1.75em;
-    padding-right: 3em;
-  }
+    p {
+      margin: 0 .75em 0 0;
+      min-height: 1.75em;
+      padding-right: 3em;
+    }
 
-  strong {
-    font-weight: 400;
-  }
+    strong {
+      font-weight: 400;
+    }
 
-  &.high-alert {
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
-    border: 1px solid $high-alert-border;
-  }
+    &.high-alert {
+      background-color: govuk-colour("light-grey", $legacy: "grey-3");
+      border: 1px solid $high-alert-border;
+    }
 
-  @include govuk-media-query($until: tablet) {
-    margin: 0 0 1em;
+    @include govuk-media-query($until: tablet) {
+      margin: 0 0 1em;
+    }
   }
 }