govuk_publishing_components 24.21.0 → 25.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e658a82fdcc66d27c4e76f3fcfc8743612d80ca4f4b98493db30bc650ba5175c
-  data.tar.gz: 65fa6a0bd681467c70a64a106b39933c4275cf716c1e961e6397912d43f32a50
+  metadata.gz: 30b1c979671a113e33ce87e4db1b19cbd0b26d2c64a6f1f4a98da31c24ac6294
+  data.tar.gz: 8c1a5fa5e9d9fa2f78adb033a0409deb8a6da43f6149b8b6f2f041b4cc859809
 SHA512:
-  metadata.gz: cd7c02f1d17a3a72a5e74d70e1cad6b66d9ed2b48c8ab3d123a2397bb8062024084ffc650030a24742d556285f7e21b0474814e233a90554e29b5163a3cbd9c3
-  data.tar.gz: '0890b578800c9eb7649ad5450b0f8cc94c1d2838947f3ce151932ee129c501599eb2072df826c63cbfdfc16fefa4c21e4712c719d8f1187b397c64d66cc3b0b5'
+  metadata.gz: 591e1edddd512c62aa2c7948b7e901c23842f06fc518ef1e2b24277af9ac933044d274f353d1e0d1ad8bb5e8b0ce92fe33989e059cf77288c9aaec86f7d19e47
+  data.tar.gz: 891a548c447d50c57b464ff8244b75f8f069655555f45b71568708350b608dc606f1956de61fc67542856c6e1087e1eb5dcd66dacb60179350f9483efc6c52c2

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

@@ -15,3 +15,5 @@
 //= require ./analytics/init
 //= require ./analytics/scroll-tracker
 //= require ./analytics/explicit-cross-domain-links
+//= require ./analytics/track-click
+//= require ./analytics/track-select-change

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

@@ -0,0 +1,16 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function Intervention ($module) {
+    this.$module = $module
+  }
+
+  Intervention.prototype.init = function () {
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      window.GOVUK.analytics.trackEvent('interventionBanner', 'interventionShown')
+    }
+  }
+
+  Modules.Intervention = Intervention
+})(window.GOVUK.Modules)

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

@@ -4,68 +4,262 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function SuperNavigationToggle ($module) {
-    this.$module = $module
+  var SETTINGS = {
+    breakpoint: {
+      desktop: 769
+    },
+    label: {
+      hide: 'data-text-for-hide',
+      show: 'data-text-for-show'
+    }
+  }
 
-    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')
+  // Small helpers that update the label when the state of the button has
+  // changed:
+  var setLabel = function ($button, showOrHide) {
+    var newLabel = $button.getAttribute(SETTINGS.label[showOrHide])
 
-    this.$button = this.setupButton($module)
+    if (newLabel) {
+      $button.setAttribute('aria-label', newLabel)
+    }
+  }
 
-    this.$menu = document.getElementById(this.$button.getAttribute('aria-controls'))
+  // Wrapper functions to contain all of the mechanisms needed for hiding and
+  // toggling the menus.
+  var hide = function ($button, $menu) {
+    $button.setAttribute('aria-expanded', false)
+    $button.classList.remove('gem-c-layout-super-navigation-header__open-button')
+    $menu.setAttribute('hidden', 'hidden')
+    setLabel($button, 'show')
+  }
+  var show = function ($button, $menu) {
+    $button.setAttribute('aria-expanded', true)
+    $button.classList.add('gem-c-layout-super-navigation-header__open-button')
+    $menu.removeAttribute('hidden')
+    setLabel($button, 'hide')
+  }
 
-    this.syncStatus()
+  var toggle = function ($button, $menu) {
+    var isOpen = $button.getAttribute('aria-expanded') === 'true'
+    var trackingLabel = $button.getAttribute('data-tracking-key')
+    if (isOpen) {
+      hide($button, $menu)
+    } else {
+      show($button, $menu)
+    }
+
+    // Fire analytics if analytics are available
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent && trackingLabel) {
+      window.GOVUK.analytics.trackEvent('headerClicked', trackingLabel + (isOpen ? 'Closed' : 'Opened'), { label: 'none' })
+    }
+  }
+
+  // Clicking an element inside a `button` element causes the `event.target` to
+  // be the inside element, not the button. This can be taken care of by setting
+  // the CSS pointer-events to be none, but that doesn't work for older
+  // browsers, won't work for people with CSS turned off, or for people who are
+  // using CSS overrides.
+  //    This checks if the $element is the `elementType`; if it is, it gets
+  // returned; if not it recursively checks to see if the parent element is a
+  // `elementType`. This means that it can be used with `pointer-events: none`.
+  var closestParentIncluding = function ($element, elementType) {
+    if ($element.tagName.toLowerCase() === elementType.toLowerCase()) {
+      return $element
+    }
+    return closestParentIncluding($element.parentNode, elementType)
   }
 
-  SuperNavigationToggle.prototype.setupButton = function (target) {
-    var menuHeading = target.getAttribute('aria-labelledby')
-    var adjacentTo = target.querySelector('#' + menuHeading)
-    var buttonText = document.createTextNode(this.buttonText)
+  // Searched the previous elements to find one with the same tag as set in
+  // `elementType` . If it's found the element is returned; if not, it returns
+  // null.
+  var closestPrevious = function ($element, elementType) {
+    if ($element === null) {
+      return null
+    }
 
-    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)
+    // Using `previousSibling` means that there is a possibility that the
+    // $element could be a text node or a comment node - checking the `nodeType`
+    // of the element will ensure that it's a real element.
+    if ($element.nodeType === 1 && $element.tagName.toLowerCase() === elementType.toLowerCase()) {
+      return $element
+    }
 
-    button.appendChild(buttonText)
-    adjacentTo.insertAdjacentElement('beforebegin', button)
+    // If `previousElementSibling` can be used then let's use it as it'll be
+    // slightly faster since it skips things that aren't elements. If not,
+    // `previousSibling` can still be used as there's a `nodeType` check.
+    var previousElement = $element.previousElementSibling || $element.previousSibling
 
-    return button
+    return closestPrevious(previousElement, elementType)
   }
 
-  SuperNavigationToggle.prototype.syncStatus = function () {
-    this.status = this.$button.getAttribute('aria-expanded') === 'true' ? 'open' : 'closed'
+  // When moving from one screen size to another (eg mobile to desktop) we need
+  // to find out whether a submenu is open so the parent menu can be kept open.
+  var hasSubMenusOpen = function ($menu) {
+    return $menu.querySelectorAll('button[aria-expanded="true"]').length > 0
   }
 
-  SuperNavigationToggle.prototype.closeMenu = function () {
-    this.$menu.classList.remove('gem-c-layout-super-navigation-header__items--open')
+  // Returns what screen size the window is currently. Returns a string of
+  // either `desktop` or `mobile` so it can be interpolated to access the
+  // `data-toggle-{desktop|mobile}-group` attribute.
+  var windowSize = function () {
+    return window.innerWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
+  }
 
-    this.$button.classList.remove('govuk-header__menu-button--open')
-    this.$button.setAttribute('aria-expanded', false)
-    this.$button.setAttribute('aria-label', this.showMenuText)
+  function SuperNavigationMegaMenu ($module) {
+    this.$module = $module
+    this.$navigationToggle = this.$module.querySelector('#super-navigation-menu-toggle')
+    this.$navigationMenu = this.$module.querySelector('#super-navigation-menu')
+    this.$searchToggle = this.$module.querySelector('#super-search-menu-toggle')
+    this.$searchMenu = this.$module.querySelector('#super-search-menu')
+
+    // The menu toggler buttons need three attributes for this to work:
+    //  - `aria-controls` contains the id of the menu to be toggled
+    //  - `data-toggle-mobile-group` is the group that the menu belongs to on
+    //    smaller screens
+    //  - `data-toggle-desktop-group` is the group that the menu belongs to on
+    //    larger screens
+    this.$buttons = this.$module.querySelectorAll(
+      'button[aria-controls][data-toggle-mobile-group][data-toggle-desktop-group]'
+    )
+
+    this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
+
+    this.lastWindowSize = undefined
   }
 
-  SuperNavigationToggle.prototype.openMenu = function () {
-    this.$menu.classList.add('gem-c-layout-super-navigation-header__items--open')
+  SuperNavigationMegaMenu.prototype.windowSize = windowSize
 
-    this.$button.classList.add('govuk-header__menu-button--open')
-    this.$button.setAttribute('aria-expanded', true)
-    this.$button.setAttribute('aria-label', this.hideMenuText)
+  // Resizes the space needed for the dropdown menu so that it doesn't overlap
+  // with the page content. As this is an event that needs to be added and
+  // removed it can't be be bound to `this` because that changes the fingerprint
+  // of the function, and makes it unable to be removed with
+  // `removeEventListener`.
+  SuperNavigationMegaMenu.prototype.resizeHandler = function () {
+    var $module = document.querySelector('[data-module="super-navigation-mega-menu"]')
+    var $openButton = $module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
+    var $openMenu = $openButton ? $module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
+    var margin = $openMenu && windowSize() === 'desktop' ? $openMenu.offsetHeight : 0
+
+    $module.style.marginBottom = margin + 'px'
   }
 
-  SuperNavigationToggle.prototype.handleToggle = function () {
-    if (this.status === 'open') this.closeMenu()
-    if (this.status === 'closed') this.openMenu()
+  SuperNavigationMegaMenu.prototype.updateStates = function () {
+    if (this.windowSize() === 'mobile' && this.lastWindowSize !== 'mobile') {
+      this.$navigationToggle.removeAttribute('hidden')
+
+      // Hides navigation menu unless a submenu is open - this could be common
+      // as the desktop view has the navigation submenu as top level in the
+      // menu.
+      if (!hasSubMenusOpen(this.$navigationMenu)) {
+        hide(this.$navigationToggle, this.$navigationMenu)
+      }
+
+      this.$module.style.marginBottom = '0'
+
+      window.removeEventListener('resize', this.resizeHandler, { passive: true })
 
-    this.syncStatus()
+      this.lastWindowSize = this.windowSize()
+    }
+
+    // Hide the navigation toggle button and show the navigation submenu:
+    if (this.windowSize() === 'desktop' && this.lastWindowSize !== 'desktop') {
+      this.$navigationToggle.setAttribute('hidden', 'hidden')
+      this.$navigationMenu.removeAttribute('hidden')
+
+      window.addEventListener('resize', this.resizeHandler, { passive: true })
+
+      this.lastWindowSize = this.windowSize()
+    }
+  }
+
+  SuperNavigationMegaMenu.prototype.buttonHandler = function (event) {
+    var $target = closestParentIncluding(event.target, 'button')
+    var $targetMenu = this.$module.querySelector('#' + $target.getAttribute('aria-controls'))
+
+    var toggleGroupAttribute = 'data-toggle-' + this.windowSize() + '-group'
+    var toggleGroupName = $target.getAttribute(toggleGroupAttribute)
+    var toggleGroupList = this.$module.querySelectorAll('[' + toggleGroupAttribute + '="' + toggleGroupName + '"]')
+
+    for (var k = 0; k < toggleGroupList.length; k++) {
+      var $element = toggleGroupList[k]
+      if ($element !== $target) {
+        var $menu = this.$module.querySelector('#' + $element.getAttribute('aria-controls'))
+        hide($element, $menu)
+      }
+    }
+
+    toggle($target, $targetMenu)
+
+    if (this.windowSize() === 'desktop') {
+      this.$module.style.marginBottom = $targetMenu.offsetHeight + 'px'
+    }
   }
 
-  SuperNavigationToggle.prototype.init = function () {
-    this.$button.addEventListener('click', this.handleToggle.bind(this))
+  SuperNavigationMegaMenu.prototype.init = function () {
+    for (var j = 0; j < this.$buttons.length; j++) {
+      var $button = this.$buttons[j]
+      $button.addEventListener('click', this.buttonHandler.bind(this), true)
+    }
+
+    // The toggle buttons are hardcoded to be hidden in the markup - this means
+    // that people without JavaScript turned on won't have buttons present that
+    // don't do anything.
+    //     Since JavaScript is enabled we can remove the hidden attribute from
+    // the buttons so that they're perceivable by users.
+    //     As the toggle buttons are now selectable, we should prevent the links
+    // from being selectable to avoid confusion.
+    for (var i = 0; i < this.hiddenButtons.length; i++) {
+      var $element = this.hiddenButtons[i]
+      $element.removeAttribute('hidden')
+
+      var closestSiblingLink = closestPrevious($element, 'a')
+      if (closestSiblingLink) {
+        closestSiblingLink.setAttribute('hidden', 'hidden')
+      }
+    }
+
+    this.$module.querySelector('.gem-c-layout-super-navigation-header__search-item-link')
+      .setAttribute('hidden', 'hidden')
+
+    // Navigation menu and search menu are hardcoded to be open in the markup -
+    // this means that the menu still makes sense with CSS and JavaScript turned
+    // off.
+    //     The menus now need to be hidden as part of the JavaScript
+    // initialisation.
+    //   - On both mobile and desktop, this means hiding the search menu
+    //   - On mobile, this means hiding the navigation
+    //   - On desktop, this means hiding the navigation button, showing the
+    //     second level navigation menu
+    hide(this.$searchToggle, this.$searchMenu)
+    this.updateStates()
+
+    this.lastWindowSize = this.windowSize()
+
+    // The menu needs to be updated when the window is resized - specifically,
+    // the top level navigation toggle needs to be shown or hidden.
+    //     Using `matchMedia` to listen for both resize events means that this
+    // will only fire when the media query is matched so is more efficient. The
+    // fallback is the `window.resize` event with a check to make sure that it
+    // only does things when moving from mobile to desktop view.
+    var setupResizeListener = function () {
+      window.addEventListener('resize', this.updateStates.bind(this), { passive: true })
+    }.bind(this)
+
+    if (typeof window.matchMedia === 'function') {
+      // Internet Explorer 11 supports `matchMedia`, but doesn't support
+      // the `change` event[1] - so we try it, and then fail back to using
+      // `window.resize`.
+      // [1]: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange
+      try {
+        window.matchMedia('screen and (min-width:' + SETTINGS.breakpoint.desktop + 'px)')
+          .addEventListener('change', this.updateStates.bind(this))
+      } catch (error) {
+        setupResizeListener()
+      }
+    } else {
+      setupResizeListener()
+    }
   }
 
-  Modules.SuperNavigationToggle = SuperNavigationToggle
+  Modules.SuperNavigationMegaMenu = SuperNavigationMegaMenu
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -9,9 +9,15 @@
 
   YoutubeLinkEnhancement.prototype.init = function () {
     if (!this.campaignCookiesAllowed()) {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
       return
     }
+    this.startModule()
+  }
 
+  YoutubeLinkEnhancement.prototype.startModule = function () {
+    window.removeEventListener('cookie-consent', this.startModule)
     var $youtubeLinks = this.$element.querySelectorAll('a[href*="youtube.com"], a[href*="youtu.be"]')
 
     if ($youtubeLinks.length > 0) {

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -7,12 +7,41 @@
 
   if (document.querySelectorAll && document.addEventListener) {
     var els = document.querySelectorAll('.js-header-toggle')
-    var i
-    var _i
-    for (i = 0, _i = els.length; i < _i; i++) {
-      els[i].addEventListener('click', function (e) {
+    for (var i = 0; i < els.length; i++) {
+      // Reassign current index to bypass rules in Chrome and Firefox around indexed property setting
+      var thisEl = els[i]
+
+      // If the element is an a tag, convert it to a button
+      // This is to target instances where we want to change behaviour between a js and a no-js view eg: the search button on the mobile menu for some government pages. On no-js it's just a link to /search
+      // This swaps a link for no-js to a button, making it interactable. Using a link for interactivity is poor accessibility as it's a misuse of the link tag and can be confusing to assistive tech users
+
+      if (thisEl.tagName === 'A') {
+        var attributes = thisEl.attributes
+        var button = document.createElement('button')
+
+        for (var k = 0; k < attributes.length; k++) {
+          var thisAttr = attributes[k].name
+
+          if (thisAttr === 'href') {
+            if (button.getAttribute('data-search-toggle-for')) {
+              continue
+            } else {
+              button.setAttribute('data-search-toggle-for', thisEl.getAttribute('href').substr(1))
+            }
+          } else if (thisAttr !== 'data-button-text') {
+            button.setAttribute(thisAttr, thisEl.getAttribute(thisAttr))
+          }
+        }
+
+        button.innerText = thisEl.getAttribute('data-button-text') || thisEl.innerText
+
+        thisEl.parentNode.replaceChild(button, thisEl)
+        thisEl = button
+      }
+
+      thisEl.addEventListener('click', function (e) {
         e.preventDefault()
-        var target = this.getAttribute('href') ? document.getElementById(this.getAttribute('href').substr(1)) : document.getElementById(this.getAttribute('data-search-toggle-for'))
+        var target = document.getElementById(this.getAttribute('data-search-toggle-for'))
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
         var isSearchToggle = sourceClass.match('search-toggle')

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

@@ -30,27 +30,21 @@
         var moduleNames = element.data('module').split(' ')
 
         for (var j = 0, k = moduleNames.length; j < k; j++) {
-          var module
           var moduleName = camelCaseAndCapitalise(moduleNames[j])
           var started = element.data(moduleNames[j] + '-module-started')
 
-          if ( // GOV.UK Publishing & Legacy Modules
-            typeof GOVUK.Modules[moduleName] === 'function' &&
-            !GOVUK.Modules[moduleName].prototype.init &&
-            !started
-          ) {
-            module = new GOVUK.Modules[moduleName]()
-            module.start(element)
-            element.data(moduleNames[j] + '-module-started', true)
-          }
+          if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
+            // GOV.UK Legacy Modules using jQuery
+            if (!GOVUK.Modules[moduleName].prototype.init) {
+              new GOVUK.Modules[moduleName]().start(element)
+              element.data(moduleNames[j] + '-module-started', true)
+            }
 
-          if ( // GOV.UK Frontend Modules
-            typeof GOVUK.Modules[moduleName] === 'function' &&
-            GOVUK.Modules[moduleName].prototype.init &&
-            !started
-          ) {
-            module = new GOVUK.Modules[moduleName](element[0]).init()
-            element.data(moduleNames[j] + '-module-started', true)
+            // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
+            if (GOVUK.Modules[moduleName].prototype.init) {
+              new GOVUK.Modules[moduleName](element[0]).init()
+              element.data(moduleNames[j] + '-module-started', true)
+            }
           }
         }
       }