govuk_publishing_components 24.18.4 → 24.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 356af78d76ad3c161339e6c908f64e22aa8ce6da250fa1389ec2d5095d28c906
-  data.tar.gz: e820884ca39a8533a260ae07b824bee43d3d0616e4434f70e8d8a5212ec5f693
+  metadata.gz: e658a82fdcc66d27c4e76f3fcfc8743612d80ca4f4b98493db30bc650ba5175c
+  data.tar.gz: 65fa6a0bd681467c70a64a106b39933c4275cf716c1e961e6397912d43f32a50
 SHA512:
-  metadata.gz: 115b6017568f069bece6086533f4e24e03af451682b59323924e96fe5996dc6c9e6f7597226571adba3fcba0df5798f85d8cfbd55f3ecaeaa49ac570946876af
-  data.tar.gz: 10f2ba6089990b0703e6cc4bc37aa3fc9e689560d8dfa9c193bf60aac1bc8536693e5f67a1501fdd836a408ad41d2ea3f191a640271425a27148bd8e1df54baf
+  metadata.gz: cd7c02f1d17a3a72a5e74d70e1cad6b66d9ed2b48c8ab3d123a2397bb8062024084ffc650030a24742d556285f7e21b0474814e233a90554e29b5163a3cbd9c3
+  data.tar.gz: '0890b578800c9eb7649ad5450b0f8cc94c1d2838947f3ce151932ee129c501599eb2072df826c63cbfdfc16fefa4c21e4712c719d8f1187b397c64d66cc3b0b5'

data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js

@@ -5,21 +5,17 @@
 
   window.GOVUK = window.GOVUK || {}
 
+  var percentages = [
+    ['Percent', 20],
+    ['Percent', 40],
+    ['Percent', 60],
+    ['Percent', 80],
+    ['Percent', 100]
+  ]
+
   var CONFIG = {
-    '/brexit': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
-    '/guidance/coronavirus-covid-19-information-for-the-public': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
+    '/brexit': percentages,
+    '/guidance/coronavirus-covid-19-information-for-the-public': percentages,
     '/government/publications/the-essential-trustee-what-you-need-to-know-cc3/the-essential-trustee-what-you-need-to-know-what-you-need-to-do': [
       ['Heading', '1. About this guidance'],
       ['Heading', '2. Trustees’ duties at a glance'],
@@ -151,75 +147,61 @@
     '/wood-packaging-import-export': [
       ['Heading', 'Export solid wood packaging']
     ],
-    '/guidance/answers-to-the-most-common-topics-asked-about-by-the-public-for-the-coronavirus-press-conference': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
-    '/coronavirus': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
-    '/coronavirus/education-and-childcare': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
-    '/coronavirus/worker-support': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
-    '/coronavirus/business-support': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
-    '/get-coronavirus-test': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
+    '/guidance/answers-to-the-most-common-topics-asked-about-by-the-public-for-the-coronavirus-press-conference': percentages,
+    '/coronavirus': percentages,
+    '/coronavirus/education-and-childcare': percentages,
+    '/coronavirus/worker-support': percentages,
+    '/coronavirus/business-support': percentages,
+    '/get-coronavirus-test': percentages,
     '/next-steps-for-your-business/results': [
       ['Heading', 'Things you need to do next'],
       ['Heading', 'Rules to follow'],
       ['Heading', 'Good to know'],
       ['Heading', 'Change your answers']
     ],
-    '/guidance/brexit-guidance-for-businesses': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
-    '/guidance/brexit-guidance-for-individuals-and-families': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ],
-    '/guidance/import-and-export-goods-using-preference-agreements': [
-      ['Percent', 20],
-      ['Percent', 40],
-      ['Percent', 60],
-      ['Percent', 80],
-      ['Percent', 100]
-    ]
+    '/guidance/brexit-guidance-for-businesses': percentages,
+    '/guidance/brexit-guidance-for-businesses.cy': percentages,
+    '/guidance/brexit-guidance-for-individuals-and-families': percentages,
+    '/guidance/brexit-guidance-for-individuals-and-families.cy': percentages,
+    '/guidance/import-and-export-goods-using-preference-agreements': percentages,
+    '/guidance/red-amber-and-green-list-rules-for-entering-england': [
+      ['Heading', 'Stay up-to-date'],
+      ['Heading', 'Red list of countries and territories'],
+      ['Heading', 'Amber list of countries and territories'],
+      ['Heading', 'Amber list rules if you are fully UK vaccinated'],
+      ['Heading', 'Amber list rules if you are not fully UK vaccinated'],
+      ['Heading', 'Green list countries and territories'],
+      ['Heading', 'Green list rules'],
+      ['Heading', 'Ireland, the UK, the Channel Islands and the Isle of Man'],
+      ['Heading', 'Transit stops in amber or red list countries'],
+      ['Heading', 'Job and medical exemptions'],
+      ['Heading', 'Travelling abroad from England'],
+      ['Heading', 'Demonstrating your COVID-19 vaccination status when travelling abroad'],
+      ['Heading', 'Foreign, Commonwealth & Development Office travel advice']
+    ],
+    '/guidance/travel-abroad-from-england-during-coronavirus-covid-19': [
+      ['Heading', 'Before you travel abroad'],
+      ['Heading', '1. Check the rules for the country you’re going to'],
+      ['Heading', '2. Find out what you need to do when you return'],
+      ['Heading', '3. Book any COVID-19 tests or quarantine hotel packages you need for your return'],
+      ['Heading', 'Before you return'],
+      ['Heading', 'After you return'],
+      ['Heading', 'Travelling with children'],
+      ['Heading', 'Ireland, the UK, the Channel Islands and the Isle of Man'],
+      ['Heading', 'Exemptions for work, medical or compassionate reasons']
+    ],
+    '/guidance/travel-to-england-from-another-country-during-coronavirus-covid-19': [
+      ['Heading', 'Before you travel'],
+      ['Heading', '1. Check the rules for the country you’re coming from or have travelled through'],
+      ['Heading', '2. Book any COVID-19 tests or quarantine hotel packages you need for your arrival'],
+      ['Heading', '3. Get tested and complete documents'],
+      ['Heading', 'When you arrive in England'],
+      ['Heading', 'Leaving England'],
+      ['Heading', 'Travelling with children'],
+      ['Heading', 'Ireland, the UK, the Channel Islands and the Isle of Man'],
+      ['Heading', 'Exemptions for work, medical or compassionate reasons']
+    ],
+    '/find-travel-test-provider': percentages
   }
 
   function ScrollTracker (sitewideConfig) {

data/app/assets/javascripts/govuk_publishing_components/components/details.js

@@ -7,24 +7,26 @@ window.GOVUK.Modules.GovukDetails = window.GOVUKFrontend;
 (function (Modules) {
   function GemDetails ($module) {
     this.$module = $module
-    this.customTrackLabel = this.$module.getAttribute('data-track-label')
+    this.$summary = this.$module.querySelector('.govuk-details__summary')
+
+    this.customTrackLabel = this.$summary.getAttribute('data-track-label')
     this.detailsClick = this.$module.querySelector('[data-details-track-click]')
   }
 
   GemDetails.prototype.init = function () {
     if (this.customTrackLabel) { // If a custom label has been provided, we can simply call the tracking module
       var trackDetails = new window.GOVUK.Modules.GemTrackClick()
-      trackDetails.start($(this.$module))
+      trackDetails.start($(this.$summary))
     } else if (this.detailsClick) { // If no custom label is set, we use the open/close status as the label
       this.detailsClick.addEventListener('click', function (event) {
-        this.trackDefault(this.$module)
+        this.trackDefault(this.$summary)
       }.bind(this))
     }
   }
 
   GemDetails.prototype.trackDefault = function (element) {
     if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-      var componentStatus = (element.getAttribute('open') == null) ? 'open' : 'closed'
+      var componentStatus = (this.$module.getAttribute('open') == null) ? 'open' : 'closed'
       var trackCategory = element.getAttribute('data-track-category')
       var trackAction = element.getAttribute('data-track-action')
       var trackOptions = element.getAttribute('data-track-options')

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

@@ -0,0 +1,71 @@
+//= require govuk/vendor/polyfills/Element/prototype/classList.js
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function SuperNavigationToggle ($module) {
+    this.$module = $module
+
+    this.showMenuText = $module.getAttribute('data-text-for-show-menu')
+    this.hideMenuText = $module.getAttribute('data-text-for-hide-menu')
+    this.buttonText = $module.getAttribute('data-text-for-button')
+
+    this.$button = this.setupButton($module)
+
+    this.$menu = document.getElementById(this.$button.getAttribute('aria-controls'))
+
+    this.syncStatus()
+  }
+
+  SuperNavigationToggle.prototype.setupButton = function (target) {
+    var menuHeading = target.getAttribute('aria-labelledby')
+    var adjacentTo = target.querySelector('#' + menuHeading)
+    var buttonText = document.createTextNode(this.buttonText)
+
+    var button = document.createElement('button')
+    button.type = 'button'
+    button.className = 'govuk-header__menu-button gem-c-layout-super-navigation-header__menu-button'
+    button.setAttribute('aria-controls', 'super-navigation-menu')
+    button.setAttribute('aria-label', this.showMenuText)
+    button.setAttribute('aria-expanded', false)
+
+    button.appendChild(buttonText)
+    adjacentTo.insertAdjacentElement('beforebegin', button)
+
+    return button
+  }
+
+  SuperNavigationToggle.prototype.syncStatus = function () {
+    this.status = this.$button.getAttribute('aria-expanded') === 'true' ? 'open' : 'closed'
+  }
+
+  SuperNavigationToggle.prototype.closeMenu = function () {
+    this.$menu.classList.remove('gem-c-layout-super-navigation-header__items--open')
+
+    this.$button.classList.remove('govuk-header__menu-button--open')
+    this.$button.setAttribute('aria-expanded', false)
+    this.$button.setAttribute('aria-label', this.showMenuText)
+  }
+
+  SuperNavigationToggle.prototype.openMenu = function () {
+    this.$menu.classList.add('gem-c-layout-super-navigation-header__items--open')
+
+    this.$button.classList.add('govuk-header__menu-button--open')
+    this.$button.setAttribute('aria-expanded', true)
+    this.$button.setAttribute('aria-label', this.hideMenuText)
+  }
+
+  SuperNavigationToggle.prototype.handleToggle = function () {
+    if (this.status === 'open') this.closeMenu()
+    if (this.status === 'closed') this.openMenu()
+
+    this.syncStatus()
+  }
+
+  SuperNavigationToggle.prototype.init = function () {
+    this.$button.addEventListener('click', this.handleToggle.bind(this))
+  }
+
+  Modules.SuperNavigationToggle = SuperNavigationToggle
+})(window.GOVUK.Modules)

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

@@ -4,9 +4,16 @@
 
   window.GOVUK.triggerEvent = function (element, eventName, parameters) {
     var params = parameters || {}
-    params.bubbles = true
-    params.cancelable = true
     var event
+    var keyCode = params.keyCode
+
+    if (!Object.prototype.hasOwnProperty.call(params, 'bubbles')) {
+      params.bubbles = true
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(params, 'cancelable')) {
+      params.cancelable = true
+    }
 
     if (typeof window.CustomEvent === 'function') {
       event = new window.CustomEvent(eventName, params)
@@ -15,6 +22,10 @@
       event.initCustomEvent(eventName, params.bubbles, params.cancelable, params.detail)
     }
 
+    if (keyCode) {
+      event.keyCode = keyCode
+    }
+
     element.dispatchEvent(event)
   }
 }(window))

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

@@ -42,12 +42,14 @@ $govuk-new-link-styles: true;
 @import "components/image-card";
 @import "components/input";
 @import "components/inset-text";
+@import "components/intervention";
 @import "components/inverse-header";
 @import "components/label";
 @import "components/layout-footer";
 @import "components/layout-for-admin";
 @import "components/layout-for-public";
 @import "components/layout-header";
+@import "components/layout-super-navigation-header";
 @import "components/lead-paragraph";
 @import "components/metadata";
 @import "components/modal-dialogue";

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

@@ -8,6 +8,7 @@
 @import "components/print/contents-list";
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
+@import "components/print/layout-super-navigation-header";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
 @import "components/print/textarea";

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -151,11 +151,11 @@
 
   &:before {
     height: 30px;
-    width: 35px;
+    width: 30px;
     background-image: image-url("govuk_publishing_components/action-link-arrow--brexit.svg");
     background-repeat: no-repeat;
-    background-size: 25px auto;
-    background-position: 0 0;
+    background-size: 18px auto;
+    background-position: 0 2px;
   }
 
   @include govuk-media-query($until: tablet) {
@@ -166,7 +166,9 @@
     margin-bottom: govuk-spacing(2);
 
     &:before {
+      width: 35px;
       background-position: 0 4px;
+      background-size: 25px auto;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -6,7 +6,6 @@
 }
 
 .gem-c-document-list__item {
-  overflow: hidden;
   margin-bottom: govuk-spacing(5);
   padding-top: govuk-spacing(2);
   border-top: 1px solid $govuk-border-colour;
@@ -18,11 +17,6 @@
   display: inline-block;
 }
 
-.gem-c-document-list__item-link {
-  @include govuk-link-common;
-  @include govuk-link-style-default;
-}
-
 .gem-c-document-list--no-underline {
   .gem-c-document-list__item-title {
     text-decoration: none;
@@ -156,18 +150,22 @@
 }
 
 .gem-c-document-list-child__link {
-  @include govuk-link-common;
-  @include govuk-link-style-default;
   text-decoration: none;
 
   &:hover {
     text-decoration: underline;
+    text-underline-offset: .1em;
+    @include govuk-link-hover-decoration;
+  }
+
+  &:focus {
+    text-decoration: none;
   }
 }
 
 .gem-c-document-list-child__description {
   @include govuk-text-colour;
-  margin-top: 0;
+  margin-top: govuk-spacing(1);
   margin-bottom: govuk-spacing(1);
 
   @include govuk-media-query($until: tablet) {

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

@@ -0,0 +1,16 @@
+.gem-c-intervention {
+  @include govuk-text-colour;
+  @include govuk-responsive-padding(4);
+  @include govuk-responsive-margin(4, "bottom");
+  background-color: govuk-colour("light-grey", $legacy: "grey-4");
+}
+
+.gem-c-intervention__title {
+  @include govuk-font(24, $weight: bold);
+  margin-top: 0;
+  @include govuk-responsive-margin(4, "bottom");
+}
+
+.gem-c-intervention__paragraph {
+  @include govuk-font(19);
+}

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

@@ -106,10 +106,6 @@
   vertical-align: middle;
 }
 
-.gem-c-header__logotype-crown {
-  top: -2px;
-}
-
 .gem-c-header__product-name {
   display: none;
 

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -0,0 +1,125 @@
+$search-icon-size: 20px;
+
+.gem-c-layout-super-navigation-header {
+  background: govuk-colour("black");
+  position: relative;
+}
+
+.gem-c-layout-super-navigation-header__header-logo {
+  height: govuk-spacing(6);
+  padding-top: govuk-spacing(3);
+  padding-bottom: govuk-spacing(3);
+
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+    float: left;
+  }
+}
+
+.gem-c-layout-super-navigation-header__content {
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+    float: right;
+  }
+}
+
+.gem-c-layout-super-navigation-header__items {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 govuk-spacing(1) 0;
+
+  @include govuk-media-query($from: "desktop") {
+    padding: 0;
+  }
+}
+
+.gem-c-layout-super-navigation-header__item {
+  margin-right: 0;
+  padding: govuk-spacing(1) 0;
+
+  @include govuk-media-query($from: "desktop") {
+    float: left;
+    padding: 0;
+  }
+}
+
+.gem-c-layout-super-navigation-header__item-link {
+  display: block;
+  padding: govuk-spacing(3) 0;
+  position: relative;
+
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(4);
+    width: auto;
+  }
+
+  &:focus {
+    z-index: 1;
+  }
+}
+
+// Special search link
+.gem-c-layout-super-navigation-header__item--search {
+  border-bottom: 0;
+}
+
+.gem-c-layout-super-navigation-header__item-link--search {
+  @include govuk-media-query($from: "desktop") {
+    background-color: $govuk-link-colour;
+    display: inherit;
+    width: govuk-spacing(4);
+
+    &:hover {
+      background-color: $govuk-link-hover-colour;
+    }
+
+    &:focus {
+      background-color: $govuk-focus-colour;
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__item-link-text--search {
+  @include govuk-media-query($from: "desktop") {
+    @include govuk-visually-hidden;
+  }
+}
+
+.gem-c-layout-super-navigation-header__item-link-icon--search {
+  display: none;
+
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+    height: $search-icon-size;
+    width: $search-icon-size;
+  }
+}
+
+.gem-c-layout-super-navigation-header__menu-button {
+  @include govuk-font($size: 19, $weight: bold, $line-height: 20px);
+  border-left: 1px solid govuk-colour("mid-grey");
+  border-right: 1px solid govuk-colour("mid-grey");
+  padding: govuk-spacing(4);
+  top: 0;
+
+  &:focus {
+    border-left-color: $govuk-focus-colour;
+    border-right-color: $govuk-focus-colour;
+  }
+}
+
+.js-enabled .gem-c-layout-super-navigation-header__items {
+  display: none;
+
+  @include govuk-media-query($from: "desktop") {
+    display: block;
+  }
+}
+
+.js-enabled .gem-c-layout-super-navigation-header__items--open {
+  display: block;
+}
+
+.gem-c-layout-super-navigation-header__dropdown-menu {
+  display: none;
+}