govuk_publishing_components 66.2.0 → 66.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86e6747e7ac2fbe09ae4b993c0220e43a0b95c72cb1916254bc26301fedf68ba
-  data.tar.gz: e70984d80ef1fb018177f52f10683b535af24665990ceb8c421802c23915afad
+  metadata.gz: 031cb0dedaaca1388bc7e5ab071d119abdb4f92a7dd5c57995d235130a35d466
+  data.tar.gz: 7d4ac4e41a5d7b507012d7e609296246b14c4d177780c82a94db421387f51342
 SHA512:
-  metadata.gz: c0393a75efbc028df6501454f07a78aa1b7f9a8cf029becea313a3881c05d0fd57f5d566551fcb631687de92dbcc379943ca846d97929bef8dd7623892006916
-  data.tar.gz: 19a5dfc0d677181f71c3d47553c9f0a5f05a1feef93fded11ba4b0f39151ae397d47e240d646f7423f3affb5a448805423b2838f04822cdabdccd1e0c3e0650f
+  metadata.gz: d7eb1b2249520995e6d0e4af76ad134f5715bff4c7aa8ccdf3bebf24628c601620d4f237b4483f907e3ec391264dcb008f1f10bc0399834934baf5d03106b6a5
+  data.tar.gz: 298c6a028ba9464378e5e215edfb336f243745d83398066364c01ae8c718316f6e7691a491d31bd9e940afa60eba64a77f2e1c10f0719467d8a575ffa9e58148

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js

@@ -6,17 +6,23 @@ var initFunction = function () {
     window.GOVUK.analyticsGa4.vars.internalDomains.push(window.GOVUK.analyticsGa4.core.trackFunctions.getHostname())
     window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(window.GOVUK.analyticsGa4.vars.internalDomains)
     window.GOVUK.analyticsGa4.core.load()
-    var analyticsModules = window.GOVUK.analyticsGa4.analyticsModules
-    for (var property in analyticsModules) {
-      var module = analyticsModules[property]
-      if (typeof module.init === 'function') {
-        try {
-          module.init()
-        } catch (e) {
-          // if there's a problem with the module, catch the error to allow other modules to start
-          console.warn('Error starting analytics module ' + property + ': ' + e.message, window.location)
+
+    if (!window.GOVUK.analyticsGa4.analyticsModulesStarted) {
+      // Initialise analytics modules that start on page load
+      // https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/analytics.md#code-structure
+      var analyticsModules = window.GOVUK.analyticsGa4.analyticsModules
+      for (var property in analyticsModules) {
+        var module = analyticsModules[property]
+        if (typeof module.init === 'function') {
+          try {
+            module.init()
+          } catch (e) {
+            // if there's a problem with the module, catch the error to allow other modules to start
+            console.warn('Error starting analytics module ' + property + ': ' + e.message, window.location)
+          }
         }
       }
+      window.GOVUK.analyticsGa4.analyticsModulesStarted = true
     }
   } else {
     window.addEventListener('cookie-consent', window.GOVUK.analyticsGa4.init)

data/app/assets/javascripts/govuk_publishing_components/components/sub-navigation-menu.js

@@ -0,0 +1,23 @@
+(function (Modules) {
+  class SubNavigationMenu {
+    constructor (module) {
+      this.module = module
+      this.module.button = this.module.querySelector('button')
+      this.module.navContainer = this.module.querySelector('.js-menu__nav-container')
+      this.module.buttonContainer = this.module.querySelector('.js-menu__button-container')
+      this.module.button.classList.remove('gem-c-sub-navigation-menu__button--no-js')
+    }
+
+    init () {
+      this.module.button.addEventListener('click', this.toggleMenu.bind(this))
+    }
+
+    toggleMenu () {
+      var ariaExpanded = this.module.button.getAttribute('aria-expanded') === 'true'
+      this.module.navContainer.classList.toggle('gem-c-sub-navigation-menu__nav-container--js-hidden')
+      this.module.button.setAttribute('aria-expanded', `${!ariaExpanded}`)
+      this.module.buttonContainer.classList.toggle('gem-c-sub-navigation-menu__button-container--collapsed')
+    }
+  }
+  Modules.SubNavigationMenu = SubNavigationMenu
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/initialise-vars.js

@@ -5,3 +5,4 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
 window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
 window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analyticsModules || {}
+window.GOVUK.analyticsGa4.analyticsModulesStarted = false

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -20,9 +20,13 @@
     app_promo_banner: 'settings',
     global_banner_seen: 'settings',
     govuk_chat_onboarding_complete: 'settings', // cookie details page to be updated when this is in use
+    'ABTest-BankHolidaysTest': 'usage',
+    'ABTest-SearchFreshnessBoost': 'usage',
+    _ga: 'usage',
     _ga_VBLT2V3FZR: 'usage', // gtag cookie used to persist the session state, integration
     _ga_P1DGM6TVYF: 'usage', // staging
-    _ga_S5RQ7FTGVR: 'usage' // production
+    _ga_S5RQ7FTGVR: 'usage', // production
+    lux_uid: 'usage'
   }
 
   /*
@@ -194,7 +198,7 @@
 
   window.GOVUK.expireCookie = function (cookie, value = '') {
     // We need to handle deleting cookies on the domain and the .domain
-    var thePast = new Date(0) // 0 = 0 seconds since UTC started (1970/01/01)
+    var thePast = new Date(0).toUTCString() // 0 = 0 seconds since UTC started (1970/01/01)
     document.cookie = cookie + '=' + value + ';expires=' + thePast + ';'
     document.cookie = cookie + '=' + value + ';expires=' + thePast + ';domain=' + window.location.hostname + ';path=/'
   }

data/app/assets/stylesheets/govuk_publishing_components/all-components.scss

@@ -86,6 +86,7 @@
 @import "components/step-by-step-nav-header";
 @import "components/step-by-step-nav-related";
 @import "components/step-by-step-nav";
+@import "components/sub-navigation-menu";
 @import "components/subscription-links";
 @import "components/success-alert";
 @import "components/summary-banner";

data/app/assets/stylesheets/govuk_publishing_components/components/_sub-navigation-menu.scss

@@ -0,0 +1,137 @@
+.gem-c-sub-navigation-menu {
+  border-bottom: 1px solid $govuk-border-colour;
+  @include govuk-font(19);
+}
+
+.gem-c-sub-navigation-menu__button-container {
+  background-color: govuk-colour("light-grey");
+  border-bottom: 1px solid govuk-colour("mid-grey");
+}
+
+.gem-c-sub-navigation-menu__button-container--collapsed {
+  border-bottom: 0;
+}
+
+.gem-c-sub-navigation-menu__button {
+  height: 3.684em;
+  color: govuk-colour("blue");
+  background: none;
+  border: 0;
+  padding-left: govuk-spacing(3);
+  padding-right: govuk-spacing(3);
+  // Invisible border so the width of the collapsed button is the same as the expanded one.
+  border-left: 1px solid rgba(0, 0, 0, 0);
+  border-right: 1px solid govuk-colour("light-grey");
+  cursor: pointer;
+  position: relative;
+  @include govuk-font(19);
+}
+
+.gem-c-sub-navigation-menu__button--negative-margin-left {
+  margin-left: govuk-spacing(-3); // Ensures the button looks perfectly left-aligned with content.
+}
+
+// Shared styles for the expanded and collapsed arrow icon. Based off of the super navigation menu button.
+.gem-c-sub-navigation-menu__button::before {
+  border-bottom: 2px solid govuk-colour("blue");
+  border-right: 2px solid govuk-colour("blue");
+  content: "";
+  display: inline-block;
+  height: 8px;
+  margin: 0 10px 0 2px;
+  vertical-align: middle;
+  width: 8px;
+}
+
+.gem-c-sub-navigation-menu__button:focus {
+  &.gem-c-sub-navigation-menu__button::before {
+    border-color: govuk-colour("black");
+  }
+  @include govuk-focused-text;
+}
+
+.gem-c-sub-navigation-menu__button[aria-expanded="false"]::before {
+  // Collapsed arrow icon
+  transform: translateY(-35%) rotate(45deg) scale(1);
+}
+
+.gem-c-sub-navigation-menu__button[aria-expanded="true"] {
+  border-color: govuk-colour("mid-grey");
+  background-color: govuk-colour("white");
+
+  @include govuk-media-query($until: tablet) {
+    border-left: 1px solid govuk-colour("light-grey"); // Hide left border on mobile while preserving button width.
+  }
+
+  // Expanded arrow icon
+  &.gem-c-sub-navigation-menu__button::before {
+    transform: translateY(1px) rotate(225deg) scale(1);
+  }
+}
+
+.gem-c-sub-navigation-menu__button[aria-expanded="true"]:focus {
+  background-color: $govuk-focus-colour;
+  border-color: $govuk-focus-colour;
+}
+
+// Adds a white border at the bottom of the button when the button is expanded.
+// Used to make the button look like a tab that's seamlessly connected to element below it.
+.gem-c-sub-navigation-menu__button[aria-expanded="true"]::after {
+  content: "";
+  position: absolute;
+  border-bottom: 1px solid govuk-colour("white");
+  width: 100%;
+  left: 0;
+  bottom: -1px;
+}
+
+// Removes the white border on bottom of button when focus styles are active.
+.gem-c-sub-navigation-menu__button[aria-expanded="true"]:focus::after {
+  border: 0;
+}
+
+.gem-c-sub-navigation-menu__button--no-js {
+  display: none;
+}
+
+.gem-c-sub-navigation-menu__button:hover::before {
+  border-color: govuk-colour("dark-blue");
+}
+
+.gem-c-sub-navigation-menu__nav-container {
+  margin-top: govuk-spacing(7);
+  margin-bottom: govuk-spacing(9);
+}
+
+.js-enabled {
+  .gem-c-sub-navigation-menu__nav-container--js-hidden {
+    display: none;
+  }
+}
+
+.gem-c-sub-navigation-menu__heading {
+  margin-bottom: govuk-spacing(2);
+}
+
+.gem-c-sub-navigation-menu__list {
+  padding-left: 0;
+  margin-top: 0;
+  display: grid;
+  column-gap: govuk-spacing(7);
+  row-gap: 12px;
+  grid-template-columns: 1fr;
+
+  @include govuk-media-query($from: tablet) {
+    grid-template-columns: 1fr 1fr;
+  }
+  @include govuk-media-query($from: desktop) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.gem-c-sub-navigation-menu__list-item {
+  list-style: none;
+  @include govuk-media-query($until: mobile) {
+    margin-top: govuk-spacing(3);
+  }
+}

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

@@ -88,7 +88,7 @@
 .gem-c-govspeak--inverse {
   color: govuk-colour("white");
 
-  a {
+  a:not(.govuk-button) {
     @include govuk-link-common;
     @include govuk-link-style-inverse;
   }

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -61,6 +61,10 @@
     &:focus {
       @include govuk-focused-text;
     }
+
+    @include govuk-media-query($media-type: print) {
+      color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+    }
   }
 
   // Lists

data/app/controllers/govuk_publishing_components/applications_page_controller.rb

@@ -8,7 +8,7 @@ module GovukPublishingComponents
         },
         {
           type: "publishing",
-          apps: %w[content-data-admin collections-publisher travel-advice-publisher whitehall datagovuk_find local-links-manager places-manager support manuals-publisher service-manual-publisher short-url-manager specialist-publisher content-tagger publisher transition search-admin fact-check-manager content-block-manager].sort,
+          apps: %w[content-data-admin collections-publisher travel-advice-publisher whitehall local-links-manager places-manager support manuals-publisher service-manual-publisher short-url-manager specialist-publisher content-tagger publisher transition search-admin fact-check-manager content-block-manager].sort,
         },
         {
           type: "utility",

data/app/controllers/govuk_publishing_components/audit_controller.rb

@@ -8,7 +8,6 @@ module GovukPublishingComponents
         content-block-manager
         content-data-admin
         content-tagger
-        datagovuk_find
         email-alert-frontend
         fact-check-manager
         feedback

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -45,9 +45,7 @@ module GovukPublishingComponents
     end
 
     def components_in_use_sass
-      additional_files = "@import 'govuk_publishing_components/govuk_frontend_support';\n"
-      additional_files << "@import 'govuk_publishing_components/component_support';\n"
-
+      additional_files = "@import 'govuk_publishing_components/specific-components';\n"
       components = find_all_partials_in(get_used_component_names)
 
       components.map { |component|

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

@@ -18,6 +18,7 @@
   draft_watermark ||= false
   title ||= "GOV.UK - The best place to find government services and information"
   title_lang ||= nil
+  body_classes ||= nil
 
   show_account_layout ||= false
   account_nav_location ||= nil
@@ -27,6 +28,7 @@
   body_css_classes = %w(gem-c-layout-for-public govuk-template__body)
   body_css_classes << "gem-c-layout-for-public--draft" if draft_watermark
   body_css_classes << "global-banner-present" if global_banner.present?
+  body_css_classes << body_classes if body_classes
 -%>
 <!DOCTYPE html>
 <html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>">

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

@@ -0,0 +1,68 @@
+<%
+  button_text ||= "Menu"
+  links ||= []
+  negative_margin_left_on_button ||= false
+  button_classes = %w[gem-c-sub-navigation-menu__button gem-c-sub-navigation-menu__button--no-js govuk-link govuk-link--no-underline]
+  button_classes << "gem-c-sub-navigation-menu__button--negative-margin-left" if negative_margin_left_on_button
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-sub-navigation-menu")
+  component_helper.add_data_attribute({ module: "sub-navigation-menu" })
+
+  heading_id = "gem-c-sub-navigation-menu-heading-#{SecureRandom.hex(4)}"
+  container_id = "gem-c-sub-navigation-menu-container-#{SecureRandom.hex(4)}"
+%>
+<% unless links.empty? %>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <h2 class="govuk-visually-hidden" id="<%= heading_id %>">Secondary navigation menu</h2>
+    <div class="gem-c-sub-navigation-menu__button-container gem-c-sub-navigation-menu__button-container--collapsed js-menu__button-container">
+      <div class="govuk-width-container">
+        <%= tag.button button_text,
+          type: "button",
+          class: button_classes.join(" "),
+          aria: { expanded: "false", controls: container_id },
+          data: {
+            module: "ga4-event-tracker",
+            ga4_expandable: "",
+            ga4_event: {
+              event_name: "select_content",
+              index_section: 1,
+              index_section_count: 1,
+              type: "secondary header",
+              section: button_text,
+            }.to_json,
+          } %>
+      </div>
+    </div>
+    <div class="gem-c-sub-navigation-menu__nav-container gem-c-sub-navigation-menu__nav-container--js-hidden govuk-width-container js-menu__nav-container" id="<%= container_id %>">
+      <nav aria-labelledby="<%= heading_id %>" data-module="ga4-link-tracker">
+        <% ga4_index_section_count = links.length %>
+        <% links.each_with_index do |link_group, nav_index| %>
+          <% nav_section_heading = link_group[:text] %>
+          <h3 class="gem-c-sub-navigation-menu__heading govuk-heading-s"><%= link_group[:text] %></h3>
+          <ul class="gem-c-sub-navigation-menu__list">
+            <% ga4_index_total = link_group[:links].length %>
+            <% link_group[:links].each_with_index do |link, link_index| %>
+            <li class="gem-c-sub-navigation-menu__list-item">
+              <%= link_to link[:text],
+                link[:href],
+                class: "govuk-link govuk-link--no-underline govuk-link--no-visited-state",
+                data: {
+                  ga4_link: {
+                    event_name: "navigation",
+                    type: "secondary header",
+                    index_link: link_index + 1,
+                    index_total: ga4_index_total,
+                    index_section: nav_index + 1,
+                    index_section_count: ga4_index_section_count,
+                    section: nav_section_heading,
+                  }.to_json,
+                } %>
+            </li>
+            <% end %>
+          </ul>
+        <% end %>
+      </nav>
+    </div>
+  <% end %>
+<% end %>

data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml

@@ -116,3 +116,10 @@ examples:
       title_lang: 'cy'
       block: |
         <h1>Page content goes here</h1>
+  with_body_classes:
+    description: Allows a class to be passed to the body element. Note that this does not work in preview in this guide.
+    data:
+      title: 'Example layout'
+      body_classes: 'example__class'
+      block: |
+        <h1>Page content goes here</h1>

data/app/views/govuk_publishing_components/components/docs/sub_navigation_menu.yml

@@ -0,0 +1,67 @@
+name: Sub navigation menu (experimental)
+description: The sub navigation menu component helps users to navigate pages within a section of GOV.UK
+
+accessibility_criteria: |
+  The menu component must:
+
+    * be recognisable as navigation
+    * have the correct heading level structure
+    * indicate that any expandable content can be expanded or collapsed
+    * indicate the initial state of expandable content
+    * indicate where the state of expandable content has changed
+
+  When CSS and / or JavaScript is unavailable, the component must:
+
+  * fallback to an expanded menu
+shared_accessibility_criteria:
+  - link
+uses_component_wrapper_helper: true
+capture_full_width_screenshot: true
+examples:
+  default:
+    data:
+      links:
+      - text: "Example Heading"
+        links:
+          - text: "Hello world"
+            href: "/hello-world"
+      - text: "Another Heading"
+        links:
+          - text: "Example Link"
+            href: "/hello-world"
+          - text: "Example Link 2"
+            href: "/hello-world"
+          - text: "Example Link 3"
+            href: "/hello-world"
+          - text: "This is a very very very long link"
+            href: "/hello-world"
+          - text: "Another link that has a lot of characters"
+            href: "/hello-world"
+          - text: "Third link containing a lot of text"
+            href: "/hello-world"
+  custom_button_text:
+    data:
+      button_text: Open me
+      links:
+      - text: "Example Heading"
+        links:
+          - text: "Hello world"
+            href: "/hello-world"
+      - text: "Another Heading"
+        links:
+          - text: "Example Link"
+            href: "/hello-world"
+
+  negative_margin_left_on_button:
+    description: "The button does not look perfectly aligned with the content by default, so this negative margin aligns the button chevron with the content."
+    data:
+      negative_margin_left_on_button: true
+      links:
+      - text: "Example Heading"
+        links:
+          - text: "Hello world"
+            href: "/hello-world"
+      - text: "Another Heading"
+        links:
+          - text: "Example Link"
+            href: "/hello-world"

data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb

@@ -39,7 +39,6 @@
               class: "gem-c-feedback__prompt-link",
               role: "button",
               hidden: "hidden",
-              'aria-hidden': "true",
             } do %>
               <%= t("components.feedback.maybe") %>
             <% end %>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "66.2.0".freeze
+  VERSION = "66.4.0".freeze
 end

data/node_modules/axe-core/axe.js

@@ -1,4 +1,4 @@
-/*! axe v4.11.3
+/*! axe v4.11.4
  * Copyright (c) 2015 - 2026 Deque Systems, Inc.
  *
  * Your use of this Source Code Form is subject to the terms of the Mozilla Public
@@ -22,7 +22,7 @@
     }, _typeof(o);
   }
   var axe = axe || {};
-  axe.version = '4.11.3';
+  axe.version = '4.11.4';
   if (typeof define === 'function' && define.amd) {
     define('axe-core', [], function() {
       return axe;
@@ -10991,7 +10991,7 @@
       return Array.from(doc.querySelectorAll(selector));
     });
     function generateAncestry(node) {
-      var nodeName2 = node.nodeName.toLowerCase();
+      var nodeName2 = escape_selector_default(node.nodeName.toLowerCase());
       var parentElement = node.parentElement;
       var parentNode = node.parentNode;
       var nthChild = '';
@@ -16968,7 +16968,10 @@
       if (!virtualNode) {
         return false;
       }
-      if (virtualNode.props.nodeType !== 1 || context.includeHidden) {
+      if (context.includeHidden && !nativelyHidden(virtualNode)) {
+        return false;
+      }
+      if (virtualNode.props.nodeType !== 1) {
         return false;
       }
       return !_isVisibleToScreenReaders(virtualNode);