govuk_publishing_components 23.12.3 → 24.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0836916950b2ba5523342245a89390195dbc6687424656f229384afc5d079313'
-  data.tar.gz: 838a58d52afa6587637a377cee6a68077b6eb8ff1fecb2edfe820775943e4be9
+  metadata.gz: aba99b9b513b88a9b3ac310bdca5299af17ff94d6c296a13e8087deb510ddf64
+  data.tar.gz: 9238695c7fac3e53a47cda06d2de2114b7036dd805f9acba97dfc91c13151cdb
 SHA512:
-  metadata.gz: c04d9f5166eb2689a04e4b2307404d2f9e8c8aeeb419fd48d102351532b3c361e002b8e31b7901763eba35ff0ceb38bcf14db3042ef6757d7072ce4e6fd9d7c2
-  data.tar.gz: 89cb76ebcb46366ffb1197e6031115d527ce40ae2eaf30301b8f6985df197875b34d4545e41512f9f789b1f7107f9beac28fc1a716be51990f8eacb9959dbed4
+  metadata.gz: 8c39fe32ea761ab5d7a4c01752430b909c96947c3e8dfc9126071392a2ec10234f1948f1a4ca8724cb379c13ed712b361cf2de68f71263d4b80010043add2ba3
+  data.tar.gz: 53e5a2d17340534140eedd509128853c27ea1c3633110c2039f7afd9f363fcbc3f152c73829cdd32a291867b655501f58b53a8a442bcb401dc4052073c7afb23

data/app/assets/images/govuk_publishing_components/take-action-amber.svg

@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#FF5800"/>
+<path d="M28.5 10L13.6739 24L6.5 17.2258" stroke="white" stroke-width="3"/>
+</svg>

data/app/assets/images/govuk_publishing_components/take-action-green.svg

@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#0EBA72"/>
+<path d="M28.5 10L13.6739 24L6.5 17.2258" stroke="white" stroke-width="3"/>
+</svg>

data/app/assets/images/govuk_publishing_components/take-action-red.svg

@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#FF003B"/>
+<path d="M28.5 10.5L13.6739 24.5L6.5 17.7258" stroke="white" stroke-width="3"/>
+</svg>

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,6 +40,15 @@ 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">' +
+      '<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">' +
+      '<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)
 
     this.getTextForInsertedElements()
@@ -66,7 +75,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   Gemstepnav.prototype.addShowHideAllButton = function () {
     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.actions.showAllText + '</button>'
+    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>' +
+      '</button>'
 
     var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
     this.$module.insertBefore(showall, steps)
@@ -81,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'
 
@@ -114,7 +133,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var data = []
 
     for (var i = 0; i < this.$module.steps.length; i++) {
-      var stepView = new this.StepView(this.$module.steps[i], this.$module.actions.showText, this.$module.actions.hideText)
+      var stepView = new this.StepView(this.$module.steps[i], this.$module)
       stepView.setIsShown(isShown)
 
       if (isShown) {
@@ -136,7 +155,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     for (var i = 0; i < this.$module.steps.length; i++) {
       var thisel = this.$module.steps[i]
       var id = thisel.getAttribute('id')
-      var stepView = new this.StepView(thisel, this.$module.actions.showText, this.$module.actions.hideText)
+      var stepView = new this.StepView(thisel, this.$module)
       var shouldBeShown = thisel.hasAttribute('data-show')
 
       // show the step if it has been remembered or if it has the 'data-show' attribute
@@ -165,7 +184,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           '<button ' +
             'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
             'aria-expanded="false" aria-controls="' + contentId + '">' +
-              '<span class="js-step-title-text">' + titleText + '</span>' +
+              '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
           '</button>' +
         '</span>'
     }
@@ -177,7 +196,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     for (var i = 0; i < togglePanels.length; i++) {
       togglePanels[i].addEventListener('click', function (event) {
-        var stepView = new that.StepView(this.parentNode, that.$module.actions.showText, that.$module.actions.hideText)
+        var stepView = new that.StepView(this.parentNode, that.$module)
         stepView.toggle()
 
         var stepIsOptional = this.parentNode.hasAttribute('data-optional')
@@ -321,34 +340,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var that = this
 
     this.$module.showOrHideAllButton.addEventListener('click', function (event) {
-      var shouldshowAll
-      var showHideTexts = that.$module.querySelectorAll('.js-toggle-link')
       var textContent = this.textContent || this.innerText
+      var shouldShowAll = textContent === that.$module.actions.showAllText
 
-      if (textContent === that.$module.actions.showAllText) {
-        that.$module.showOrHideAllButton.textContent = that.$module.actions.hideAllText
-        for (var i = 0; i < showHideTexts.length; i++) {
-          showHideTexts[i].innerHTML = that.$module.actions.hideText
-        }
-        shouldshowAll = true
-
-        stepNavTracker.trackClick('pageElementInteraction', 'stepNavAllShown', {
-          label: that.$module.actions.showAllText + ': ' + that.$module.stepNavSize
-        })
-      } else {
-        that.$module.showOrHideAllButton.textContent = that.$module.actions.showAllText
-        for (var j = 0; j < showHideTexts.length; j++) {
-          showHideTexts[j].innerHTML = that.$module.actions.showText
-        }
-        shouldshowAll = false
-
-        stepNavTracker.trackClick('pageElementInteraction', 'stepNavAllHidden', {
-          label: that.$module.actions.hideAllText + ': ' + that.$module.stepNavSize
-        })
-      }
+      // Fire GA click tracking
+      stepNavTracker.trackClick('pageElementInteraction', (shouldShowAll ? 'stepNavAllShown' : 'stepNavAllHidden'), {
+        label: (shouldShowAll ? that.$module.actions.showAllText : that.$module.actions.hideAllText) + ': ' + that.$module.stepNavSize
+      })
 
-      that.setAllStepsShownState(shouldshowAll)
-      that.$module.showOrHideAllButton.setAttribute('aria-expanded', shouldshowAll)
+      that.setAllStepsShownState(shouldShowAll)
+      that.$module.showOrHideAllButton.setAttribute('aria-expanded', shouldShowAll)
       that.setShowHideAllText()
 
       return false
@@ -357,23 +358,25 @@ 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.textContent = this.$module.actions.hideAllText
-    } else {
-      this.$module.showOrHideAllButton.textContent = 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, showText, hideText) {
+  Gemstepnav.prototype.StepView = function (stepElement, $module) {
     this.stepElement = stepElement
     this.stepContent = this.stepElement.querySelectorAll('.js-panel')[0]
     this.titleButton = this.stepElement.querySelectorAll('.js-step-title-button')[0]
     var textElement = this.stepElement.querySelectorAll('.js-step-title-text')[0]
     this.title = textElement.textContent || textElement.innerText
     this.title = this.title.replace(/^\s+|\s+$/g, '') // this is 'trim' but supporting IE8
-    this.showText = showText
-    this.hideText = hideText
+    this.showText = $module.actions.showText
+    this.hideText = $module.actions.hideText
+    this.upChevronSvg = $module.upChevronSvg
+    this.downChevronSvg = $module.downChevronSvg
 
     this.show = function () {
       this.setIsShown(true)
@@ -398,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.hideText : 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/_contextual-sidebar.scss

@@ -3,45 +3,38 @@ $transition-campaign-dark-blue: #1e1348;
 
 .gem-c-contextual-sidebar__brexit-related-links {
   border-top: 2px solid $govuk-brand-colour;
+}
 
-  .gem-c-contextual-sidebar__brexit-heading {
-    @include govuk-font(19, $weight: bold);
-    padding-top: govuk-spacing(3);
-    margin-bottom: govuk-spacing(2);
-  }
+.gem-c-contextual-sidebar__brexit-heading {
+  @extend %govuk-heading-s;
+  margin-top: govuk-spacing(3);
+  margin-bottom: govuk-spacing(2);
 }
 
 .gem-c-contextual-sidebar__brexit-cta {
-  @include govuk-font(19);
   margin-bottom: govuk-spacing(6);
   background-color: govuk-colour('light-grey', $legacy: 'grey-4');
-  border-top: 4px solid $transition-campaign-red;
+  border-top: 2px solid $transition-campaign-red;
   display: block;
-  padding: govuk-spacing(3);
+  padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;
 
   .gem-c-contextual-sidebar__brexit-heading {
-    @extend %govuk-heading-m;
-    color: $transition-campaign-dark-blue;
+    color: $govuk-text-colour;
   }
 
   .gem-c-contextual-sidebar__brexit-text {
     @extend %govuk-link;
+    @include govuk-font(16);
 
     margin-top: 0;
-    margin-bottom: 0;
+    margin-bottom: govuk-spacing(1);
     text-decoration: underline;
 
     @include govuk-media-query($from: tablet) {
       margin-bottom: govuk-spacing(2);
     }
   }
-
-  @include govuk-compatibility(govuk_template) {
-    .gem-c-contextual-sidebar__brexit-title {
-      margin-bottom: govuk-spacing(3);
-    }
-  }
 }
 
 .gem-c-contextual-sidebar__brexit-cta:focus {
@@ -49,3 +42,27 @@ $transition-campaign-dark-blue: #1e1348;
     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/_document-list.scss

@@ -7,14 +7,10 @@
 
 .gem-c-document-list__item {
   overflow: hidden;
-  margin-bottom: govuk-spacing(4);
-  padding-bottom: govuk-spacing(4);
-  border-bottom: 1px solid $govuk-border-colour;
+  margin-bottom: govuk-spacing(5);
+  padding-top: govuk-spacing(2);
+  border-top: 1px solid $govuk-border-colour;
   list-style: none;
-
-  &:last-child {
-    border-bottom: 0;
-  }
 }
 
 .gem-c-document-list__item-title {
@@ -33,6 +29,12 @@
   }
 }
 
+.gem-c-document-list--no-top-border {
+  .gem-c-document-list__item {
+    border-top: none;
+  }
+}
+
 .gem-c-document-list__item-title--context {
   margin-right: govuk-spacing(2);
 
@@ -52,7 +54,7 @@
 }
 
 .gem-c-document-list__subtext {
-  margin: govuk-spacing(1) 0 0 0;
+  margin: 0;
 }
 
 .gem-c-document-list__item-description,
@@ -60,6 +62,10 @@
   @include govuk-font($size: 16, $line-height: 1.5);
 }
 
+.gem-c-document-list__item-description--full-size {
+  @include govuk-font($size: 19);
+}
+
 .gem-c-document-list__item-metadata {
   padding: 0;
 }

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/_feedback.scss

@@ -8,41 +8,6 @@
   }
 }
 
-// hide without js
-// show with js, unless also has the js-hidden class
-.gem-c-feedback__js-show,
-.gem-c-feedback__prompt-success,
-.gem-c-feedback__prompt-questions,
-.gem-c-feedback__error-summary {
-  display: none;
-
-  .js-enabled & {
-    display: block;
-
-    &.js-hidden {
-      display: none;
-    }
-  }
-}
-
-// maintain table display for prompt and prompt-questions
-.js-enabled .gem-c-feedback__prompt {
-  @include govuk-media-query($from: tablet) {
-    display: table;
-  }
-}
-
-.js-enabled .gem-c-feedback__prompt-questions {
-  @include govuk-media-query($from: tablet) {
-    display: table-cell;
-  }
-}
-
-// show the default feedback form without js
-.js-enabled .gem-c-feedback__form.js-hidden {
-  display: none;
-}
-
 .gem-c-feedback__prompt-questions {
   text-align: center;
   border-bottom: 1px solid govuk-colour("white");
@@ -137,15 +102,6 @@
 .gem-c-feedback__email-link,
 .gem-c-feedback__prompt-link {
   position: relative;
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: -14px;
-    right: -14px;
-    left: -14px;
-    bottom: -14px;
-  }
 }
 
 .gem-c-feedback__prompt-link:link,
@@ -282,3 +238,38 @@
     outline: $govuk-focus-width solid $govuk-focus-colour;
   }
 }
+
+// hide without js
+// show with js, unless also has the js-hidden class
+.gem-c-feedback__js-show,
+.gem-c-feedback__prompt-success,
+.gem-c-feedback__prompt-questions,
+.gem-c-feedback__error-summary {
+  display: none;
+
+  .js-enabled & {
+    display: block;
+
+    &.js-hidden {
+      display: none;
+    }
+  }
+}
+
+// maintain table display for prompt and prompt-questions
+.js-enabled .gem-c-feedback__prompt {
+  @include govuk-media-query($from: tablet) {
+    display: table;
+  }
+}
+
+.js-enabled .gem-c-feedback__prompt-questions {
+  @include govuk-media-query($from: tablet) {
+    display: table-cell;
+  }
+}
+
+// show the default feedback form without js
+.js-enabled .gem-c-feedback__form.js-hidden {
+  display: none;
+}