govuk_publishing_components 24.9.2 → 24.10.2

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)
+    }
+
+    element.dispatchEvent(event)
+  }
+}(window))

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/_contextual-sidebar.scss

@@ -1,5 +1,4 @@
 $transition-campaign-red: #ff003b;
-$transition-campaign-dark-blue: #1e1348;
 
 .gem-c-contextual-sidebar__brexit-related-links {
   border-top: 2px solid $govuk-brand-colour;
@@ -24,45 +23,9 @@ $transition-campaign-dark-blue: #1e1348;
 
   .gem-c-contextual-sidebar__brexit-text {
     @include govuk-font(16);
-
-    margin-top: 0;
     margin-bottom: govuk-spacing(1);
-    text-decoration: underline;
-
     @include govuk-media-query($from: tablet) {
       margin-bottom: govuk-spacing(2);
     }
   }
 }
-
-.gem-c-contextual-sidebar__brexit-cta:focus {
-  box-shadow: 0 $govuk-focus-width $govuk-focus-text-colour;
-
-  .gem-c-contextual-sidebar__brexit-text {
-    text-decoration: none;
-  }
-}
-
-.gem-c-contextual-sidebar__take-action-traffic-lights {
-  text-align: left;
-  margin-bottom: govuk-spacing(2);
-}
-
-.gem-c-contextual-sidebar__take-action-traffic-lights > li {
-  white-space: nowrap;
-  display: inline;
-  margin-right: 7px;
-  margin-bottom: govuk-spacing(1);
-}
-
-.gem-c-contextual-sidebar__take-action-traffic-lists-icon {
-  vertical-align: middle;
-  margin-top: -2px;
-  width: 22px;
-  margin-right: 2px;
-}
-
-.gem-c-contextual-sidebar__take-action-traffic-lists-text {
-  @include govuk-font($size: 19, $weight: bold, $line-height: 2);
-  vertical-align: middle;
-}

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;
+    }
   }
 }