govuk_publishing_components 23.12.2 → 23.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee5a24f565f5900b36058d428d5944f205d001d89d4fec819ce73696cab40f92
-  data.tar.gz: a3c714fac1eace552f26dabf2da1f357ac0b8a0dc79a7e328f99c748206bcec9
+  metadata.gz: dcb27613b799a95856f3a2125b6e5a95a0a6ef79dbb0b51b3c96abbcafbcc8ae
+  data.tar.gz: ce5e6a4c647af7b0260ad3e3258d1edae02607a129d1de4153cb89b8fdc24eb2
 SHA512:
-  metadata.gz: 6354ef8debf4cab296f119140d6a4018a0484b6c5ef61734a3d4e1920d9e7ea6c0b60219ca14a2275ec0b9d32ae73aae61a9a116218a5eab8651526fd09b9d72
-  data.tar.gz: fe69a6990d168343f224155fa7430d22e7f023fab8a9af88ae95f0d08de457bb088c0411e80c85b66e8aef75b5164f2ed5f20e1a5cbc5f350f31a87a8dcf7612
+  metadata.gz: c581512609cf6841314030d6d2ad34a930208b84cd769561b80913579e788b6b964f2b1c4feec07087ee8f5075cbda98b31dda749fc21606315ba34d0b46200d
+  data.tar.gz: 5b11f1c74f5045f23afc9e393b77892eb2089953dfc402157cd39efbcf72b876b491a6897c51d08d54e3575f7651b7e4ef63dec194bf50975532b3c1868fc35c

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/header.js

@@ -1,3 +1,6 @@
+// DO NOT MAKE CHANGES TO THIS FILE
+// It is a temporary copy of layout-header.js and will be deleted shortly
+
 // This component relies on JavaScript from GOV.UK Frontend
 // = require govuk/components/header/header.js
 window.GOVUK = window.GOVUK || {}

data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/header/header.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Header = window.GOVUKFrontend

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" 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"/>' +
+      '</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"/>' +
+      '</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">' +
+      this.$module.downChevronSvg +
+      this.$module.actions.showAllText +
+      '</button>'
 
     var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
     this.$module.insertBefore(showall, steps)
@@ -114,7 +126,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 +148,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 +177,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 +189,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 +333,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
@@ -359,21 +353,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     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
+      this.$module.showOrHideAllButton.innerHTML = this.$module.upChevronSvg + this.$module.actions.hideAllText
     } else {
-      this.$module.showOrHideAllButton.textContent = this.$module.actions.showAllText
+      this.$module.showOrHideAllButton.innerHTML = this.$module.downChevronSvg + this.$module.actions.showAllText
     }
   }
 
-  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 +394,7 @@ 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.innerHTML = isShown ? this.upChevronSvg + this.hideText : this.downChevronSvg + this.showText
     }
 
     this.isShown = function () {

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

@@ -7,7 +7,7 @@
 
   GOVUK.modules = {
     find: function (container) {
-      container = container || $('body')
+      container = container || $(document)
 
       var modules
       var moduleSelector = '[data-module]'

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

@@ -74,5 +74,4 @@
 @import "components/textarea";
 @import "components/title";
 @import "components/translation-nav";
-@import "components/transition-countdown";
 @import "components/warning-text";

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

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -4,6 +4,11 @@
   border-top: govuk-spacing(2) solid govuk-colour("blue");
 }
 
+.govuk-footer__list-item {
+  display: inline-block;
+  width: 99%;
+}
+
 .gem-c-layout-footer .govuk-footer__list {
   padding-bottom: govuk-spacing(7);
 }