govuk_publishing_components 24.19.0 → 24.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ccd720a9e54c8d5037c7d3878adf5ed2ba18b876f632447d451f1ca8a0ffd6e
-  data.tar.gz: a13272a73cbdcd36bfd42c312da9d568a89ed705cb27c923d424f91c6d163769
+  metadata.gz: 50a7296ca62da87133989dc55c692649132efeee4d4a2eedbb253291ea489459
+  data.tar.gz: 026f82dfb2d8b86abd040d5a69ccae280190e345247404e7621aeea89f30eca2
 SHA512:
-  metadata.gz: f2405f9f3a73b35945f495505b4e88485aa00698eff3f2e8afbbd1e6e5c800542335b93f02758014a03537ad7936ea8e882459f0d791a8355c47c410c306234c
-  data.tar.gz: 3d8d34f91ea142e1597d87a939c6db2e69bb81780506b58ffe34e0cbb56eb3df425b66cedb1d00e1a00848ebc64c7ace9fab1809728ebfa7bab9ca880d18d9a7
+  metadata.gz: 45190fd0137cd36e04523ce5d97783cda446256a4089646b317404a410be28f7e6c96798ec9d5a56fdd130cbfa0f47630ade875dfe8af61a2b9c52f0111f4abb
+  data.tar.gz: bc733b83f05ba2520729a23ecb56788bc8552ef082babc9b0743317cf0808fefc7baab2199dfa1fb77e168b4c38cf72d8b9068e38e67889682b088b2b707641f

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

@@ -49,6 +49,7 @@ $govuk-new-link-styles: true;
 @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/_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;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -99,3 +99,12 @@
     font-weight: inherit;
   }
 }
+
+.gem-c-govspeak--inverse {
+  color: govuk-colour('white');
+
+  a {
+    @include govuk-link-common;
+    @include govuk-link-style-inverse;
+  }
+}

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

@@ -0,0 +1,3 @@
+.gem-c-super-navigation-header a:after {
+  content: " ( " attr(href) " ) ";
+}

data/app/views/govuk_publishing_components/components/_govspeak.html.erb

@@ -1,10 +1,12 @@
 <%
+  inverse ||= false
   direction_class = "direction-#{direction}" if local_assigns.include?(:direction)
   disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)
 
   classes = []
   classes << direction_class if direction_class
   classes << "disable-youtube" if disable_youtube_expansions
+  classes << "gem-c-govspeak--inverse" if inverse
 %>
 
 <div class="gem-c-govspeak govuk-govspeak <%= classes.join(" ") %>" data-module="govspeak">

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -1,14 +1,15 @@
 <%
-  omit_feedback_form ||= false
   emergency_banner ||= nil
   full_width ||= false
   global_bar ||= nil
-  product_name ||= nil
   html_lang ||= "en"
   layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
   logo_link ||= "/"
   navigation_items ||= []
+  omit_feedback_form ||= false
   omit_header ||= false
+  product_name ||= nil
+  show_explore_header ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
   title ||= "GOV.UK - The best place to find government services and information"
 
@@ -75,16 +76,20 @@
     <%= render "govuk_publishing_components/components/cookie_banner" %>
 
     <% unless omit_header %>
-      <%= render "govuk_publishing_components/components/layout_header", {
-        search: show_search,
-        logo_link: logo_link,
-        navigation_items: navigation_items,
-        product_name: product_name,
-
-        # The (blue) bottom border needs to be underneath the emergency banner -
-        # so it has been turned off and added in manually.
-        remove_bottom_border: true,
-      } %>
+      <% if show_explore_header %>
+        <%= render "govuk_publishing_components/components/layout_super_navigation_header" %>
+      <% else %>
+        <%= render "govuk_publishing_components/components/layout_header", {
+          search: show_search,
+          logo_link: logo_link,
+          navigation_items: navigation_items,
+          product_name: product_name,
+
+          # The (blue) bottom border needs to be underneath the emergency banner -
+          # so it has been turned off and added in manually.
+          remove_bottom_border: true,
+        } %>
+      <% end %>
     <% end %>
 
     <%= raw(emergency_banner) %>

data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -0,0 +1,121 @@
+<%
+logo_link = "https://www.gov.uk/"
+logo_link_title = t("components.layout_super_navigation_header.logo_link_title")
+logo_text = t("components.layout_super_navigation_header.logo_text")
+navigation_links = t("components.layout_super_navigation_header.navigation_links")
+navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
+popular_links = t("components.layout_super_navigation_header.popular_links")
+popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
+search_text= t("components.layout_super_navigation_header.search_text")
+%>
+<header role="banner" class="gem-c-layout-super-navigation-header">
+  <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
+    <div class="gem-c-layout-super-navigation-header__header-logo">
+      <a class="govuk-header__link govuk-header__link--homepage"
+        data-module="gem-track-click"
+        data-track-action="homeHeader"
+        data-track-category="homeLinkClicked"
+        href="<%= logo_link %>"
+        id="logo"
+        title="<%= logo_link_title %>">
+        <span class="govuk-header__logotype">
+          <svg aria-hidden="true"
+            class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown"
+            focusable="false"
+            height="30"
+            viewBox="0 0 132 97"
+            xmlns="http://www.w3.org/2000/svg"
+            width="36">
+            <path fill="currentColor"
+              fill-rule="evenodd"
+              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z">
+            </path>
+            <image class="govuk-header__logotype-crown-fallback-image"
+              height="30"
+              src="<%= asset_path('govuk-logotype-crown.png') %>"
+              width="36"
+              xlink:href="">
+            </image>
+          </svg>
+          <span class="govuk-header__logotype-text">
+            <%= logo_text %>
+          </span>
+        </span>
+      </a>
+    </div>
+    <nav
+      aria-labelledby="super-navigation-menu-heading"
+      class="gem-c-layout-super-navigation-header__content"
+      data-module="super-navigation-toggle"
+      data-text-for-button="Menu"
+      data-text-for-show-menu="Show navigation menu"
+      data-text-for-hide-menu="Hide navigation menu"
+    >
+      <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden"><%= navigation_menu_heading %></h2>
+      <ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__items">
+        <% navigation_links.each do | link | %>
+          <li class="govuk-header__navigation-item gem-c-layout-super-navigation-header__item">
+            <a class="govuk-header__link gem-c-layout-super-navigation-header__item-link" href="<%= link[:href] %>">
+              <%= link[:label] %>
+            </a>
+            <% if link[:menu_contents].present? or link[:footer_links].present? %>
+              <div class="gem-c-layout-super-navigation-header__dropdown-menu">
+                <% if link[:menu_contents].present? %>
+                  <ul class="govuk-list">
+                    <% link[:menu_contents].each do | item | %>
+                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                        <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= item[:href] %>">
+                          <%= item[:label] %>
+                        </a>
+                        <%= tag.p item[:description], class: "govuk-body-s gem-c-layout-super-navigation-header__dropdown-list-item-description" if item[:description].present? %>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% end %>
+                <% if link[:footer_links].present? %>
+                  <ul class="govuk-list">
+                    <% link[:footer_links].each do | item | %>
+                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                        <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= item[:href] %>">
+                          <%= item[:label] %>
+                        </a>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% end %>
+              </div>
+            <% end %>
+          </li>
+        <% end %>
+        <li class="govuk-header__navigation-item gem-c-layout-super-navigation-header__item gem-c-layout-super-navigation-header__item--search">
+          <a class="govuk-header__link gem-c-layout-super-navigation-header__item-link gem-c-layout-super-navigation-header__item-link--search" href="/search">
+            <span class="gem-c-layout-super-navigation-header__item-link-text--search"><%= search_text %></span>
+            <svg class="gem-c-layout-super-navigation-header__item-link-icon--search" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+              <circle cx="10.0161" cy="10.0161" r="8.51613" stroke="currentColor" stroke-width="3" />
+              <line x1="15.8668" y1="16.3587" x2="25.4475" y2="25.9393" stroke="currentColor" stroke-width="3" />
+            </svg>
+          </a>
+          <div class="gem-c-layout-super-navigation-header__dropdown-menu">
+            <form id="search" action="/search" method="get" role="search" aria-label="Site-wide">
+              <%= render "govuk_publishing_components/components/search", {
+                inline_label: false,
+                label_text: raw("<h2 class=\"govuk-heading-m\">#{search_text}</h2>"),
+                size: "large",
+              } %>
+            </form>
+            <h2 class="govuk-heading-m"><%= popular_links_heading %></h2>
+            <ul class="govuk-list">
+              <% popular_links.each do | popular_link | %>
+                <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
+                  <a class="govuk-link gem-c-layout-super-navigation-header__dropdown-list-item-link" href="<%= popular_link[:href] %>">
+                    <%= popular_link[:label] %>
+                  </a>
+                </li>
+              <% end %>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>