govuk_publishing_components 23.15.0 → 24.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dcb27613b799a95856f3a2125b6e5a95a0a6ef79dbb0b51b3c96abbcafbcc8ae
-  data.tar.gz: ce5e6a4c647af7b0260ad3e3258d1edae02607a129d1de4153cb89b8fdc24eb2
+  metadata.gz: aba99b9b513b88a9b3ac310bdca5299af17ff94d6c296a13e8087deb510ddf64
+  data.tar.gz: 9238695c7fac3e53a47cda06d2de2114b7036dd805f9acba97dfc91c13151cdb
 SHA512:
-  metadata.gz: c581512609cf6841314030d6d2ad34a930208b84cd769561b80913579e788b6b964f2b1c4feec07087ee8f5075cbda98b31dda749fc21606315ba34d0b46200d
-  data.tar.gz: 5b11f1c74f5045f23afc9e393b77892eb2089953dfc402157cd39efbcf72b876b491a6897c51d08d54e3575f7651b7e4ef63dec194bf50975532b3c1868fc35c
+  metadata.gz: 8c39fe32ea761ab5d7a4c01752430b909c96947c3e8dfc9126071392a2ec10234f1948f1a4ca8724cb379c13ed712b361cf2de68f71263d4b80010043add2ba3
+  data.tar.gz: 53e5a2d17340534140eedd509128853c27ea1c3633110c2039f7afd9f363fcbc3f152c73829cdd32a291867b655501f58b53a8a442bcb401dc4052073c7afb23

data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -85,10 +85,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.cookieBannerConfirmationMessage.style.display = 'block'
   }
 
-  CookieBanner.prototype.listenForCrossOriginMessages = function () {
-    window.addEventListener('message', this.receiveMessage.bind(this), false)
-  }
-
   CookieBanner.prototype.isInCookiesPage = function () {
     return window.location.pathname === '/help/cookies'
   }

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

@@ -40,13 +40,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.$module.sessionStoreLink = this.$module.sessionStoreLink + '_' + this.$module.uniqueId
     }
 
-    this.$module.upChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="gem-c-step-nav__chevron">' +
-      '<path d="M19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499998 10C0.499999 4.7533 4.7533 0.500001 10 0.500002C15.2467 0.500003 19.5 4.7533 19.5 10Z" stroke="#1D70B8"/>' +
-      '<path d="M6.32617 12.3262L10 8.65234L13.6738 12.3262" stroke="#1D70B8" stroke-width="2"/>' +
+    this.$module.upChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+      '<path class="gem-c-step-nav__chevron-stroke" d="M19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499998 10C0.499999 4.7533 4.7533 0.500001 10 0.500002C15.2467 0.500003 19.5 4.7533 19.5 10Z" stroke="#1D70B8"/>' +
+      '<path class="gem-c-step-nav__chevron-stroke" d="M6.32617 12.3262L10 8.65234L13.6738 12.3262" stroke="#1D70B8" stroke-width="2"/>' +
       '</svg>'
-    this.$module.downChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="gem-c-step-nav__chevron">' +
-      '<path d="M0.499997 10C0.499998 4.75329 4.75329 0.499999 10 0.499999C15.2467 0.5 19.5 4.75329 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499997 10Z" stroke="#1D70B8"/>' +
-      '<path d="M13.6738 8.67383L10 12.3477L6.32617 8.67383" stroke="#1D70B8" stroke-width="2"/>' +
+    this.$module.downChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+      '<path class="gem-c-step-nav__chevron-stroke" d="M0.499997 10C0.499998 4.75329 4.75329 0.499999 10 0.499999C15.2467 0.5 19.5 4.75329 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499997 10Z" stroke="#1D70B8"/>' +
+      '<path class="gem-c-step-nav__chevron-stroke" d="M13.6738 8.67383L10 12.3477L6.32617 8.67383" stroke="#1D70B8" stroke-width="2"/>' +
       '</svg>'
 
     var stepNavTracker = new this.StepNavTracker(this.$module.uniqueId, this.$module.totalSteps, this.$module.totalLinks)
@@ -76,8 +76,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var showall = document.createElement('div')
     showall.className = 'gem-c-step-nav__controls'
     showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
-      this.$module.downChevronSvg +
-      this.$module.actions.showAllText +
+      '<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>' +
       '</button>'
 
     var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
@@ -93,13 +93,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       if (!thisel.querySelectorAll('.js-toggle-link').length) {
         var span = document.createElement('span')
         var showHideSpan = document.createElement('span')
+        var showHideSpanText = document.createElement('span')
+        var showHideSpanIcon = document.createElement('span')
         var commaSpan = document.createElement('span')
         var thisSectionSpan = document.createElement('span')
 
         showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link'
+        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'
         thisSectionSpan.className = 'govuk-visually-hidden'
 
+        showHideSpan.appendChild(showHideSpanText)
+        showHideSpan.appendChild(showHideSpanIcon)
+
         commaSpan.innerHTML = ', '
         thisSectionSpan.innerHTML = ' this section'
 
@@ -351,12 +358,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.setShowHideAllText = function () {
     var shownSteps = this.$module.querySelectorAll('.step-is-shown').length
+
     // Find out if the number of is-opens == total number of steps
-    if (shownSteps === this.$module.totalSteps) {
-      this.$module.showOrHideAllButton.innerHTML = this.$module.upChevronSvg + this.$module.actions.hideAllText
-    } else {
-      this.$module.showOrHideAllButton.innerHTML = this.$module.downChevronSvg + this.$module.actions.showAllText
-    }
+    var shownStepsIsTotalSteps = shownSteps === this.$module.totalSteps
+
+    this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-text').innerHTML = shownStepsIsTotalSteps ? this.$module.actions.hideAllText : this.$module.actions.showAllText
+    this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-icon').innerHTML = shownStepsIsTotalSteps ? this.$module.upChevronSvg : this.$module.downChevronSvg
   }
 
   Gemstepnav.prototype.StepView = function (stepElement, $module) {
@@ -394,7 +401,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       this.titleButton.setAttribute('aria-expanded', isShown)
       var showHideText = this.stepElement.querySelectorAll('.js-toggle-link')[0]
-      showHideText.innerHTML = isShown ? this.upChevronSvg + this.hideText : this.downChevronSvg + this.showText
+
+      showHideText.querySelector('.js-toggle-link-text').innerHTML = isShown ? this.hideText : this.showText
+      showHideText.querySelector('.js-toggle-link-icon').innerHTML = isShown ? this.upChevronSvg : this.downChevronSvg
     }
 
     this.isShown = function () {

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

@@ -17,7 +17,6 @@
 @import "components/button";
 @import "components/character-count";
 @import "components/checkboxes";
-@import "components/chevron-banner";
 @import "components/contents-list";
 @import "components/contextual-guidance";
 @import "components/contextual-sidebar";

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

@@ -6,12 +6,10 @@
 @import "govuk/utilities/all";
 @import "govuk/overrides/all";
 
-@import "govuk_publishing_components/components/helpers/variables";
 @import "govuk_publishing_components/components/helpers/brand-colours";
 @import "govuk_publishing_components/components/helpers/link";
 @import "govuk_publishing_components/components/helpers/px-to-em";
 @import "govuk_publishing_components/components/mixins/govuk-template-link-focus-override";
 @import "govuk_publishing_components/components/mixins/media-down";
 @import "govuk_publishing_components/components/mixins/margins";
-@import "govuk_publishing_components/components/mixins/clearfix";
 @import "govuk_publishing_components/components/mixins/css3";

data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss

@@ -1,12 +1,12 @@
 .gem-c-error-alert {
-  color: $gem-text-colour;
+  color: $govuk-text-colour;
   padding: govuk-spacing(3);
-  border: $gem-border-width-mobile solid $gem-error-colour;
+  border: $govuk-border-width-narrow solid $govuk-error-colour;
   @include govuk-responsive-margin(8, "bottom");
 
   @include govuk-media-query($from: tablet) {
     padding: govuk-spacing(4);
-    border-width: $gem-border-width-tablet;
+    border-width: $govuk-border-width;
   }
 }
 
@@ -32,5 +32,5 @@
 }
 
 .gem-c-error-alert:focus {
-  outline: $gem-focus-width solid $gem-focus-colour;
+  outline: $govuk-focus-width solid $govuk-focus-colour;
 }

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

@@ -1,8 +1,7 @@
-$stroke-width: 2px;
-$stroke-width-large: 3px;
-$number-circle-size: 26px;
+$stroke-width: 1px;
+$number-circle-size: 30px;
 $number-circle-size-large: 35px;
-$top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
+$top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 @mixin step-nav-vertical-line ($line-style: solid) {
   content: "";
@@ -16,13 +15,12 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
 @mixin step-nav-line-position {
   left: 0;
-  margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
+  margin-left: em(($number-circle-size / 2) - ($stroke-width / 2), 16);
 }
 
 @mixin step-nav-line-position-large {
   left: 0;
-  margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
-  border-width: $stroke-width-large;
+  margin-left: em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
 }
 
 // custom mixin as govuk-font does undesirable things at different breakpoints
@@ -40,6 +38,13 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   }
 }
 
+// Adds a focus state for the chevron icon so that it turns black on button focus
+@mixin step-nav-chevron-focus-state {
+  .gem-c-step-nav__chevron-stroke {
+    stroke: govuk-colour("black");
+  }
+}
+
 .gem-c-step-nav {
   margin-bottom: govuk-spacing(6);
 
@@ -77,14 +82,29 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__button--title {
-  @include step-nav-font(19, $weight: bold, $line-height: 1.4);
+  @include step-nav-font(19, $weight: bold, $line-height: 1.2);
   display: inline-block;
-  padding: 0;
+  padding: govuk-spacing(1) 0 0;
   text-align: left;
   color: govuk-colour("black");
+  width: 100%;
 
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
+
+    @include govuk-media_query($from: tablet) {
+      padding-top: govuk-spacing(2);
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 -4px govuk-colour("black");
+
+    .gem-c-step-nav__toggle-link {
+      color: govuk-colour("black");
+    }
+
+    @include step-nav-chevron-focus-state;
   }
 }
 
@@ -92,15 +112,20 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   @include step-nav-font(14, $line-height: 1);
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
-  padding: .5em 0 1.5em;
+  margin: .5em 0 1.5em;
+  padding: 0 0 govuk-spacing(1);
 
-  &:hover {
+  &:hover .gem-c-step-nav__button-text {
     text-decoration: underline;
   }
 
   .gem-c-step-nav--large & {
     @include step-nav-font(14, $tablet-size: 16, $line-height: 1);
   }
+
+  &:focus {
+    @include step-nav-chevron-focus-state;
+  }
 }
 
 .gem-c-step-nav__title-text {
@@ -109,8 +134,31 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__chevron {
-  vertical-align: text-top;
-  margin-right: govuk-spacing(1);
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: em(5, 14);
+
+  .gem-c-step-nav--large & {
+    margin-left: em(5, 16);
+  }
+}
+
+.gem-c-step-nav__button-text {
+  display: inline-block;
+  text-align: left;
+  min-width: em(35, 14);
+
+  .gem-c-step-nav--large & {
+    min-width: em(40, 16);
+  }
+}
+
+.gem-c-step-nav__button-text--all {
+  min-width: em(87, 14);
+
+  .gem-c-step-nav--large & {
+    min-width: em(100, 16);
+  }
 }
 
 .gem-c-step-nav__steps {
@@ -120,23 +168,23 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__step {
   position: relative;
-  padding-left: govuk-spacing(6) + govuk-spacing(3);
+  padding-left: 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: govuk-spacing(3);
+    top: em(govuk-spacing(3), 16);
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      padding-left: govuk-spacing(9);
+      padding-left: em(govuk-spacing(9), 16);
 
       &:after { // stylelint-disable-line max-nesting-depth
         @include step-nav-line-position-large;
-        top: govuk-spacing(6);
+        top: em(govuk-spacing(6), 16);
       }
     }
   }
@@ -170,7 +218,6 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
       &:before {
         margin-left: $number-circle-size-large / 4;
         width: $number-circle-size-large / 2;
-        border-width: $stroke-width-large;
       }
 
       &:after {
@@ -193,10 +240,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   box-sizing: border-box;
   position: absolute;
   z-index: 5;
-  top: govuk-spacing(1);
+  top: 3px;
   left: 0;
-  width: $number-circle-size;
-  height: $number-circle-size;
+  width: em($number-circle-size, 16);
+  height: em($number-circle-size, 16);
   color: govuk-colour("black");
   background: govuk-colour("white");
   border-radius: 100px;
@@ -204,31 +251,44 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      top: govuk-spacing(3);
-      width: $number-circle-size-large;
-      height: $number-circle-size-large;
+      top: 11px;
+      width: em($number-circle-size-large, 19);
+      height: em($number-circle-size-large, 19);
     }
   }
 }
 
 .gem-c-step-nav__circle--number {
-  @include step-nav-font(16, $weight: bold, $line-height: 23px);
+  @include step-nav-font(16, $weight: bold, $line-height: 29px);
   border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 23px, $tablet-line-height: 30px);
+    @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 25px, $tablet-line-height: 34px);
+  }
 
-    @include govuk-media-query($from: tablet) {
-      border-width: $stroke-width-large;
+  .gem-c-step-nav__step--active & {
+    background-color: govuk-colour("black");
+
+    .gem-c-step-nav__circle-background {
+      text-shadow: none;
+      color: govuk-colour("white");
     }
   }
 }
 
 .gem-c-step-nav__circle--logic {
-  @include step-nav-font(16, $weight: bold, $line-height: 28px);
+  @include step-nav-font(19, $weight: bold, $line-height: 28px);
+  left: 3px;
+  width: em($number-circle-size, 19);
+  height: em($number-circle-size, 19);
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
+    @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);
+    }
   }
 }
 
@@ -252,21 +312,19 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__header {
-  padding: govuk-spacing(1) 0 govuk-spacing(3);
   border-top: $top-border;
+  padding: govuk-spacing(1) 0 govuk-spacing(6);
 
-  .gem-c-step-nav--active & {
-    cursor: pointer;
+  .gem-c-step-nav--large & {
+    padding-top: govuk-spacing(2);
   }
 
-  .gem-c-step-nav__button {
-    &:focus {
-      @include govuk-focused-text;
+  .js-enabled & {
+    padding: 0;
+  }
 
-      .gem-c-step-nav__toggle-link {
-        @include govuk-focused-text;
-      }
-    }
+  .gem-c-step-nav--active & {
+    cursor: pointer;
   }
 
   &:hover {
@@ -275,16 +333,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
       color: $govuk-link-colour;
     }
 
-    .gem-c-step-nav__toggle-link {
+    .gem-c-step-nav__button-text {
       text-decoration: underline;
     }
   }
-
-  .gem-c-step-nav--large & {
-    @include govuk-media-query($from: tablet) {
-      padding: govuk-spacing(2) 0 govuk-spacing(6);
-    }
-  }
 }
 
 .gem-c-step-nav__title {
@@ -302,6 +354,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   display: block;
   color: $govuk-link-colour;
   text-transform: capitalize;
+  padding-bottom: govuk-spacing(6);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(14, $tablet-size: 16, $line-height: 1.2);
@@ -311,6 +364,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__panel {
   @include govuk-text-colour;
   @include step-nav-font(16);
+  padding-bottom: govuk-spacing(5);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(16, $tablet-size: 19);
@@ -411,7 +465,6 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
       &:before {
         left: -(govuk-spacing(9));
         margin-left: ($number-circle-size-large / 2);
-        height: $stroke-width-large;
       }
     }
   }