govuk_publishing_components 25.0.0 → 25.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4930037fb8d76aa6cf75218fbed6498b61d7c2cc6ff88510a3dce4e149b3fee0
-  data.tar.gz: 206843c301aa7361c39e7453b2e944eb119c3ecbbb81c5b274978c8117439073
+  metadata.gz: cd4ab6f1a2983ed60befeb3d8e91dbf8d51f5d310c5f0d582d835711c6008c6e
+  data.tar.gz: f51242d2587a0cdbb6309af3beb647b86db9cf87907cb9d6d50d4dbec2c3e634
 SHA512:
-  metadata.gz: 5ed7f1b00624cf90d8f1f75dfd7351968f358b4c9be1f3ec3c1f8715d315772ad6e9fcd3adb020cc01a87cd058992f4492bcbddd7677af74e5b378fe7ea037e1
-  data.tar.gz: 73fb36e36733e1b6652276c309e161979255976a913863a77d5245385180fb1daf0ed154d5edbfeb98711304ef307daf5b3df85b0aacabe3b1cb04720ac62dc9
+  metadata.gz: bbc69826dec61f4ac6d5d0c1ff0d9df3479ed278b1ca5d256a208140732c4271eaa0d7f57f1e8cab554486637e2f4ac82e2a4c599db8c85955f1e7a4759d7e9e
+  data.tar.gz: 3aa7c1d878348dab7673c60081875f2854efd24c5a88504e93e5999c8e344fd47420b19ee4e8a40bc29e1c48ab99f57fb010c4900390884d3adc59070248194b

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)
+            }
           }
         }
       }

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

@@ -1,8 +1,183 @@
 $search-icon-size: 20px;
 
+@mixin chevron($colour) {
+  border-bottom: 3px solid govuk-colour($colour);
+  border-right: 3px solid govuk-colour($colour);
+  content: " ";
+  display: inline-block;
+  height: 8px;
+  margin: 0 8px 0 2px;
+  transform: translateY(-35%) rotate(45deg);
+  vertical-align: middle;
+  width: 8px;
+}
+
+%top-level-navigation-link-base {
+  background: none;
+  @include govuk-font($size: 24, $weight: bold, $line-height: 20px);
+  border: 0;
+  box-sizing: border-box;
+  display: block;
+  margin: 0;
+  padding: govuk-spacing(6) govuk-spacing(3);
+  position: relative;
+  text-decoration: none;
+
+  &,
+  &:link,
+  &:visited {
+    color: $govuk-link-colour;
+  }
+
+  &:focus {
+    background: $govuk-focus-colour;
+    border-color: $govuk-focus-text-colour;
+    border-top-color: $govuk-focus-colour;
+    color: $govuk-focus-text-colour;
+    outline: 3px solid transparent;
+    box-shadow: none;
+    z-index: 1;
+  }
+
+  @include govuk-media-query($from: "tablet") {
+    padding: govuk-spacing(6);
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    @include govuk-font($size: 16, $weight: false, $line-height: 20px);
+    color: govuk-colour("white");
+    display: inherit;
+    height: govuk-spacing(9);
+    padding: govuk-spacing(4);
+
+    &:after {
+      background: govuk-colour("black");
+      bottom: 0;
+      content: " ";
+      display: block;
+      height: govuk-spacing(1);
+      left: govuk-spacing(4);
+      position: absolute;
+      right: govuk-spacing(4);
+    }
+
+    &:hover {
+      background: govuk-colour("black");
+      color: govuk-colour("mid-grey");
+
+      &:after {
+        background-color: govuk-colour("mid-grey");
+      }
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+      box-shadow: none;
+
+      &:after {
+        background-color: $govuk-focus-text-colour;
+      }
+    }
+
+    &,
+    &:visited {
+      color: govuk-colour("white");
+    }
+  }
+}
+
+%toggle-base {
+  @extend %top-level-navigation-link-base;
+  @include govuk-font($size: 16, $weight: false, $line-height: 20px);
+  border-radius: 0;
+  cursor: pointer;
+  padding: govuk-spacing(4);
+  right: 0;
+  top: 0;
+
+  @include govuk-media-query($from: "desktop") {
+    border: none;
+  }
+}
+
+%top-level-navigation-toggle-base {
+  @extend %toggle-base;
+  border-top: 1px solid govuk-colour("black");
+  height: govuk-spacing(9);
+
+  &:focus {
+    border-color: $govuk-focus-colour;
+  }
+
+  &.gem-c-layout-super-navigation-header__open-button {
+    border-left-color: govuk-colour("black");
+    border-right-color: govuk-colour("black");
+
+    &,
+    &:hover {
+      background: govuk-colour("light-grey");
+      color: govuk-colour("light-grey");
+    }
+
+    &:focus {
+      color: $govuk-focus-colour;
+      background: $govuk-focus-colour;
+    }
+
+    &:before,
+    &:after {
+      $width: govuk-spacing(4);
+      $height: 4px;
+
+      border: none;
+      content: " ";
+      display: block;
+      margin: 0;
+      width: $width;
+      height: $height;
+      background: govuk-colour("black");
+      transform-origin: center;
+      position: absolute;
+      top: calc(50% - #{$height / 2});
+      left: calc(50% - #{$width / 2});
+    }
+
+    &:before {
+      transform: rotate(45deg);
+    }
+
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+%search-icon {
+  height: $search-icon-size;
+  pointer-events: none;
+  width: $search-icon-size;
+}
+
+// Header layout - black bar and logo.
 .gem-c-layout-super-navigation-header {
   background: govuk-colour("black");
   position: relative;
+
+  .lte-ie8 & {
+    height: govuk-spacing(9);
+  }
+
+  [hidden] {
+    display: none;
+  }
+}
+
+.gem-c-layout-super-navigation-header__container {
+  position: relative;
+
+  @include govuk-media-query($from: "desktop") {
+    position: static;
+  }
 }
 
 .gem-c-layout-super-navigation-header__header-logo {
@@ -23,103 +198,493 @@ $search-icon-size: 20px;
   }
 }
 
-.gem-c-layout-super-navigation-header__items {
+// Top level navigation and search.
+.gem-c-layout-super-navigation-header__navigation-items,
+.gem-c-layout-super-navigation-header__search-items {
+  background: govuk-colour("light-grey");
+  display: block;
   list-style: none;
-  margin: 0;
-  padding: 0 0 govuk-spacing(1) 0;
+  margin: 0 (0 - govuk-spacing(3));
+  padding: 0;
+
+  @include govuk-media-query($from: "tablet") {
+    margin: 0 (0 - govuk-spacing(6));
+  }
 
   @include govuk-media-query($from: "desktop") {
+    background: none;
+    float: left;
     padding: 0;
+    margin: 0;
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-items {
+  .js-enabled & {
+    padding: 0 0 govuk-spacing(9) 0;
+
+    @include govuk-media-query($from: "desktop") {
+      padding: 0;
+    }
   }
 }
 
-.gem-c-layout-super-navigation-header__item {
+.gem-c-layout-super-navigation-header__navigation-item,
+.gem-c-layout-super-navigation-header__search-item {
   margin-right: 0;
-  padding: govuk-spacing(1) 0;
+  padding: 0;
 
   @include govuk-media-query($from: "desktop") {
+    border-bottom: none;
     float: left;
     padding: 0;
   }
 }
 
-.gem-c-layout-super-navigation-header__item-link {
-  display: block;
-  padding: govuk-spacing(3) 0;
-  position: relative;
+.gem-c-layout-super-navigation-header__navigation-item {
+  &:after {
+    background-color: $govuk-border-colour;
+    content: " ";
+    display: block;
+    height: 1px;
+    left: 0;
+    right: 0;
+    position: absolute;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    padding: govuk-spacing(4);
-    width: auto;
+    &:after {
+      content: none;
+    }
   }
+}
 
-  &:focus {
-    z-index: 1;
+// Top level navigation links.
+.gem-c-layout-super-navigation-header__navigation-item-link {
+  @extend %top-level-navigation-link-base;
+
+  &,
+  &:link, // 👈 required to override govuk-template
+  &:visited {
+    color: $govuk-link-colour;
+
+    &:hover {
+      color: govuk-colour("mid-grey");
+    }
+
+    &:focus {
+      color: $govuk-focus-text-colour;
+    }
+
+    @include govuk-media-query($from: "desktop") {
+      color: govuk-colour("white");
+    }
   }
-}
 
-// Special search link
-.gem-c-layout-super-navigation-header__item--search {
-  border-bottom: 0;
+  // This :link:focus selector is required to override the `govuk-template`
+  // defaults.
+  &:link:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  .js-enabled & {
+    @include govuk-media-query($until: "desktop") {
+      padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(6) govuk-spacing(9);
+    }
+
+    @include govuk-media-query($until: "tablet") {
+      padding-left: govuk-spacing(7);
+    }
+  }
 }
 
-.gem-c-layout-super-navigation-header__item-link--search {
+// Search link and dropdown.
+.gem-c-layout-super-navigation-header__search-item-link {
+  @extend %top-level-navigation-link-base;
+
   @include govuk-media-query($from: "desktop") {
-    background-color: $govuk-link-colour;
-    display: inherit;
-    width: govuk-spacing(4);
+    background: $govuk-link-colour;
+    margin-left: 0;
 
-    &:hover {
-      background-color: $govuk-link-hover-colour;
+    &:focus:hover:after,
+    &:after {
+      content: none;
     }
 
-    &:focus {
-      background-color: $govuk-focus-colour;
+    &:hover:after {
+      content: " ";
+      left: 0;
+      right: 0;
     }
   }
 }
 
-.gem-c-layout-super-navigation-header__item-link-text--search {
+.gem-c-layout-super-navigation-header__search-item-link-text {
   @include govuk-media-query($from: "desktop") {
     @include govuk-visually-hidden;
   }
 }
 
-.gem-c-layout-super-navigation-header__item-link-icon--search {
+.gem-c-layout-super-navigation-header__search-item-link-icon {
+  @extend %search-icon;
   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);
+.gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
+  @extend %search-icon;
+  display: block;
+}
+
+// Search and popular content dropdown.
+.gem-c-layout-super-navigation-header__search-and-popular {
+  display: none;
+  padding-bottom: govuk-spacing(4);
+  padding-top: govuk-spacing(4);
+
+  .js-enabled & {
+    display: block;
+  }
+}
+
+// Styles for top level navigation toggle button.
+.gem-c-layout-super-navigation-header__navigation-top-toggle-button {
+  @extend %top-level-navigation-toggle-base;
   border-left: 1px solid govuk-colour("mid-grey");
-  border-right: 1px solid govuk-colour("mid-grey");
-  padding: govuk-spacing(4);
-  top: 0;
+  color: govuk-colour("white");
+  position: absolute;
+  right: 45px;
+
+  @include govuk-media-query($from: 360px) {
+    &:before {
+      @include chevron("white");
+    }
+  }
 
   &:focus {
-    border-left-color: $govuk-focus-colour;
-    border-right-color: $govuk-focus-colour;
+    &:before {
+      border-color: $govuk-focus-text-colour;
+    }
+  }
+
+  @include govuk-media-query(360px) {
+    right: 60px;
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    display: none;
+  }
+}
+
+// styles for search toggle button
+.gem-c-layout-super-navigation-header__search-toggle-button {
+  @extend %top-level-navigation-toggle-base;
+  border-top: 1px solid transparent;
+  border-left: 1px solid govuk-colour("mid-grey");
+  color: govuk-colour("white");
+  position: absolute;
+  right: (0 - govuk-spacing(3));
+
+  &:hover {
+    border-color: govuk-colour("black");
+  }
+
+  @include govuk-media-query($from: 360px) {
+    right: 0;
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    background-color: $govuk-link-colour;
+    border-left: 0;
+    height: govuk-spacing(9);
+    margin-left: govuk-spacing(3);
+    padding: govuk-spacing(4);
+    position: relative;
+    float: right;
+
+    &:not(.gem-c-layout-super-navigation-header__open-button):hover {
+      background: none;
+      color: govuk-colour("light-grey");
+
+      &:after {
+        content: " ";
+        left: 0;
+        right: 0;
+      }
+    }
+
+    &:focus:hover:after,
+    &:after {
+      content: none;
+    }
+
+    &.gem-c-layout-super-navigation-header__open-button {
+      border-top-color: govuk-colour("black");
+
+      &:hover:after {
+        content: " ";
+      }
+    }
   }
 }
 
-.js-enabled .gem-c-layout-super-navigation-header__items {
+// styles for second level navigation toggle buttons
+.gem-c-layout-super-navigation-header__navigation-second-toggle-button {
+  @extend %toggle-base;
+  @include govuk-font($size: 24, $weight: false, $line-height: 20px);
+  border: 0;
+  margin: 0;
+  padding: govuk-spacing(6) govuk-spacing(3);
+  position: relative;
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+
+  &:before {
+    @include chevron("black");
+  }
+
+  &,
+  &:visited {
+    color: $govuk-link-colour;// FIXME: contrast against govuk-colour("light-grey") not high enough
+
+    @include govuk-media-query($from: "desktop") {
+      color: govuk-colour("white");
+    }
+  }
+
+  @include govuk-media-query($from: "tablet") {
+    padding: govuk-spacing(6);
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    @include govuk-font($size: 16, $weight: false, $line-height: 20px);
+    border-top: 1px solid transparent;
+    color: govuk-colour("white");
+    height: govuk-spacing(9);
+    padding: govuk-spacing(4);
+    position: relative;
+
+    &:before {
+      border-color: govuk-colour("white");
+    }
+
+    &:hover {
+      color: govuk-colour("mid-grey");
+
+      &:after {
+        background-color: govuk-colour("mid-grey");
+      }
+
+      &:before {
+        border-color: govuk-colour("mid-grey");
+      }
+    }
+
+    &:focus {
+      color: $govuk-focus-text-colour;
+      // border-color: $govuk-focus-text-colour;
+
+      &:after {
+        background-color: $govuk-focus-text-colour;
+      }
+
+      &:before {
+        border-color: $govuk-focus-text-colour;
+      }
+    }
+  }
+
+  &.gem-c-layout-super-navigation-header__open-button {
+    border-top-color: govuk-colour("black");
+
+    &:focus {
+      border-top-color: $govuk-focus-colour;
+    }
+
+    &:before {
+      transform: translateY(20%) rotate(225deg);
+    }
+
+    @include govuk-media-query($from: "desktop") {
+      background-color: govuk-colour("light-grey");
+      color: $govuk-link-colour;
+
+      &:after {
+        background: $govuk-link-colour;
+      }
+
+      &:before {
+        border-color: $govuk-link-colour;
+      }
+
+      &:focus {
+        background-color: $govuk-focus-colour;
+        color: $govuk-focus-text-colour;
+
+        &:after {
+          background-color: $govuk-focus-text-colour;
+        }
+
+        &:before {
+          border-color: $govuk-focus-text-colour;
+        }
+      }
+
+      &:active {
+        background-color: govuk-colour("light-grey");
+        color: $govuk-link-colour;
+
+        &:before {
+          border-color: $govuk-link-colour;
+        }
+      }
+    }
+  }
+}
+
+// Dropdown menu.
+.gem-c-layout-super-navigation-header__navigation-dropdown-menu {
+  background: govuk-colour("white");
+
+  @include govuk-media-query($from: "desktop") {
+    background: govuk-colour("light-grey");
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+}
+
+// Dropdown menu description.
+.gem-c-layout-super-navigation-header__menu-description {
   display: none;
 
   @include govuk-media-query($from: "desktop") {
     display: block;
+    padding: govuk-spacing(7) 0 govuk-spacing(7) 0;
   }
 }
 
-.js-enabled .gem-c-layout-super-navigation-header__items--open {
-  display: block;
+// Dropdown menu items.
+.gem-c-layout-super-navigation-header__dropdown-list-item {
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(2) 0;
+  }
 }
 
-.gem-c-layout-super-navigation-header__dropdown-menu {
-  display: none;
+// Navigation menu items.
+.gem-c-layout-super-navigation-header__navigation-second-items {
+  margin: 0 auto;
+  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
+
+  @include govuk-media-query($from: "desktop") {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: (0 - govuk-spacing(3));
+    margin-right: (0 - govuk-spacing(3));
+    padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
+
+    & > li {
+      box-sizing: border-box;
+      margin-bottom: 0;
+      padding-left: govuk-spacing(3);
+      padding-right: govuk-spacing(3);
+      width: 50%;
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-item-link {
+  display: inline-block;
+  padding: govuk-spacing(2) 0;
+
+  @include govuk-media-query($from: "desktop") {
+    display: inline;
+    font-weight: bold;
+    padding: 0;
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
+  @include govuk-font($size: 19, $weight: bold);
+  margin-bottom: 0;
+  padding-bottom: govuk-spacing(1);
+}
+
+// Dropdown menu footer links.
+.gem-c-layout-super-navigation-header__navigation-second-footer {
+  border-top: 1px solid govuk-colour("mid-grey");
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-footer-list {
+  list-style: none;
+  padding-bottom: govuk-spacing(8);
+  padding-top: govuk-spacing(4);
+
+  @include govuk-grid-column($width: "two-thirds", $float: right, $at: "desktop");
+
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(7) 0 govuk-spacing(8) 0;
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-footer-item {
+  @include govuk-media-query($from: "desktop") {
+    box-sizing: border-box;
+    float: left;
+    width: 50%;
+    padding: 0 govuk-spacing(3);
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-footer-link {
+  @include govuk-font($size: 19, $weight: bold);
+  display: inline-block;
+  margin: govuk-spacing(1) 0;
+  padding: govuk-spacing(2) 0;
+
+  @include govuk-media-query($from: "desktop") {
+    display: inline;
+    font-weight: bold;
+    padding: 0;
+  }
+}
+
+// Search dropdown.
+.gem-c-layout-super-navigation-header__search-items {
+  background: govuk-colour("light-grey");
+  margin: 0 (0 - govuk-spacing(3));
+
+  @include govuk-media-query($from: "tablet") {
+    margin: 0 (0 - govuk-spacing(6));
+  }
+
+  @include govuk-media-query($from: "desktop") {
+    margin: 0;
+
+    .js-enabled & {
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 60px;
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__search-form {
+  padding: govuk-spacing(3) 0 govuk-spacing(6) 0;
+}
+
+// Popular links.
+.gem-c-layout-super-navigation-header__popular-link {
+  padding: govuk-spacing(2) 0;
+  display: inline-block;
+
+  @include govuk-media-query($from: "desktop") {
+    margin: govuk-spacing(1) 0;
+    padding: 0;
+  }
 }