govuk_publishing_components 35.3.3 → 35.3.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a65b99aa87692b87b842da1d33c81240ab4632d1ee1e5344d28b368a8a4eddf
-  data.tar.gz: cc9f77e7bae24a5a43a8ba7c49be27e3811306b90ad4c82bc9df33b1bffdc08c
+  metadata.gz: 3d392a9b81ae24c8b1a28866c2b9de1b8f1416e8242a214b41885d5ffd1bb583
+  data.tar.gz: 5a8cc4ed7a4819aaf9113f24367a58699e519e9ccebf01c854193f3e010eaa42
 SHA512:
-  metadata.gz: 95655b6b6deff43a8665714a161b925059d60da25f1d63a39004a5b460dcaa860dbc9eeffd02e2f086b09cb810e61e9dde6eb30db91f68f4e356d88cf0d8ae48
-  data.tar.gz: bc259ebde3123faf6e41cd55cdec44ec13d98c30627ac40fd4336b7ccc06349a672712380d120d1194e3b0c7d086c16f947c8c3c636134dbdab2e0cb374ce8af
+  metadata.gz: 70b9c68201b266e1e19b48346994d5783b5246c5944de3fe59f5b703c634e8ad6db15722d9ef2781750380826b961f170ec9057c365e10f2c4986e528f5d7198
+  data.tar.gz: c55cfea102e83bc8c2423a77d21ce92dc58c8e33e84b301923bd880254b4082b6bb255f1d22fc6d62077787209417d7acb4bd541947dfc45910322ca24a694f7

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

@@ -32,6 +32,10 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
 
     sendData: function (data) {
       data.govuk_gem_version = this.getGemVersion()
+      // set this in the console as a debugging aid
+      if (window.GOVUK.analyticsGa4.showDebug) {
+        console.info(JSON.stringify(data, null, ' '))
+      }
       window.dataLayer.push(data)
     },
 

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

@@ -11,7 +11,7 @@ var initFunction = function () {
     var attachmentLinkData = [
       { key: 'data-module', value: 'ga4-link-tracker' },
       { key: 'data-ga4-track-links-only', value: '' },
-      { key: 'data-ga4-link', value: JSON.stringify({ event_name: 'navigation', type: 'html attachment' }) }]
+      { key: 'data-ga4-link', value: JSON.stringify({ event_name: 'navigation', type: 'attachment' }) }]
     window.GOVUK.analyticsGa4.core.trackFunctions.addAttributesToElements('[data-ga4-attachment-link]', attachmentLinkData)
     window.GOVUK.analyticsGa4.core.load()
 

data/app/assets/stylesheets/component_guide/application.scss

@@ -1,6 +1,42 @@
 // This file contains the styles for the Component Guide.
 
-@import "govuk_publishing_components/all_components";
+// feature flag for accessible link styles
+$govuk-new-link-styles: true;
+
+@import "govuk_publishing_components/govuk_frontend_support";
+@import "govuk_publishing_components/component_support";
+
+// Import the same stylesheets used in static
+// https://github.com/alphagov/static/blob/198a598682df40ce4a2c3c286c06244297c18cf0/app/assets/stylesheets/application.scss
+// Although the component guide does not use static, we still need to import the same stylesheets used in static
+// to avoid any rendering issues
+// By following the same approach as frontend rendering applications,
+// we ensure that stylesheets are loaded in the expected order and components render correctly
+@import "govuk_publishing_components/components/breadcrumbs";
+@import "govuk_publishing_components/components/button";
+@import "govuk_publishing_components/components/error-message";
+@import "govuk_publishing_components/components/heading";
+@import "govuk_publishing_components/components/hint";
+@import "govuk_publishing_components/components/input";
+@import "govuk_publishing_components/components/label";
+@import "govuk_publishing_components/components/search";
+@import "govuk_publishing_components/components/skip-link";
+@import "govuk_publishing_components/components/textarea";
+@import "govuk_publishing_components/components/title";
+
+@import "govuk_publishing_components/components/cookie-banner";
+@import "govuk_publishing_components/components/feedback";
+@import "govuk_publishing_components/components/layout-footer";
+@import "govuk_publishing_components/components/layout-for-public";
+@import "govuk_publishing_components/components/layout-header";
+@import "govuk_publishing_components/components/layout-super-navigation-header";
+
+// Imported to ensure inverse-header component examples render correctly
+// this helps avoid any issues with visual regressions tests
+@import "govuk_publishing_components/components/lead-paragraph";
+
+// Include required helpers
+@import "../../stylesheets/govuk_publishing_components/components/helpers/markdown-typography";
 
 $gem-guide-border-width: 1px;
 

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

@@ -23,16 +23,20 @@
 }
 
 .gem-c-metadata--inverse {
+  background-color: govuk-colour("blue");
   color: govuk-colour("white");
+  padding: govuk-spacing(2);
 
-  a:link,
-  a:active,
-  a:visited {
-    color: govuk-colour("white");
+  a {
+    @include govuk-link-style-inverse;
   }
 
-  a:focus {
-    color: govuk-colour("black");
+  .gem-c-metadata__list {
+    margin: govuk-spacing(2);
+
+    @include govuk-media-query($from: tablet) {
+      margin: govuk-spacing(3);
+    }
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -109,8 +109,8 @@
   }
 }
 
-.gem-c-organisation-logo__crest--dit {
-  @include crest("dit_crest");
+.gem-c-organisation-logo__crest--dbt {
+  @include crest("dbt_crest");
 }
 
 .gem-c-organisation-logo__crest--bis {

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss

@@ -96,27 +96,3 @@
     border-color: #045f71;
   }
 }
-
-// This change should be removed after relevant govuk-frontend release
-
-.brand--department-for-business-and-trade {
-  .brand__color {
-    color: #cf102d;
-
-    &:link,
-    &:visited,
-    &:active {
-      color: #cf102d;
-    }
-
-    &:hover,
-    &:focus {
-      color: $govuk-focus-text-colour;
-    }
-  }
-
-  &.brand__border-color,
-  .brand__border-color {
-    border-color: #cf102d;
-  }
-}

data/app/views/govuk_publishing_components/component_guide/example.html.erb

@@ -1,6 +1,6 @@
 <% content_for :title, "#{@component_example.name} example - #{@component_doc.name} component" %>
 <% content_for :application_stylesheet do %>
-  <% if @component_doc.source == "application" %>
+  <% if @component_doc.source == "application" && application_stylesheet_in_use? %>
     <%= render 'application_stylesheet' %>
   <% end %>
 <% end %>

data/app/views/govuk_publishing_components/component_guide/preview.html.erb

@@ -1,5 +1,5 @@
 <% content_for :application_stylesheet do %>
-  <% if @component_doc.source == "application" %>
+  <% if @component_doc.source == "application" && application_stylesheet_in_use? %>
     <%= render 'application_stylesheet' %>
   <% end %>
 <% end %>

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -1,6 +1,6 @@
 <% content_for :title, "#{@component_doc.name} component" %>
 <% content_for :application_stylesheet do %>
-  <% if @component_doc.source == "application" %>
+  <% if @component_doc.source == "application" && application_stylesheet_in_use? %>
     <%= render 'application_stylesheet' %>
   <% end %>
 <% end %>

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

@@ -126,8 +126,8 @@
                   text: link[:label],
                   index: {
                     index_section: 1,
+                    index_section_count: 2,
                   },
-                  index_total: 2,
                   section: link[:label]
                 }
               },
@@ -159,8 +159,8 @@
                 "text": "Search",
                 "index": {
                   "index_section": 2,
+                  "index_section_count": 2,
                 },
-                "index_total": 2,
                 "section": "Search"
               }.to_json %>"
             >

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

@@ -20,7 +20,7 @@
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>
-  <dl data-module="gem-track-click">
+  <dl class="gem-c-metadata__list" data-module="gem-track-click">
     <% if from.any? %>
       <dt class="gem-c-metadata__term"><%= t("components.metadata.from") %>:</dt>
       <dd class="gem-c-metadata__definition">

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

@@ -2,6 +2,7 @@
   related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   ga4_tracking ||= false
+  ga4_type = local_assigns[:context] == :footer ? "contextual footer" : "related content"
   data = {}
   data[:module] = "gem-track-click"
   data[:module] << " ga4-link-tracker" if ga4_tracking
@@ -42,7 +43,8 @@
         section_index: section_index,
         section_count: ga4_tracking_counts.index_section_count,
         random: random,
-        ga4_tracking: ga4_tracking %>
+        ga4_tracking: ga4_tracking,
+        ga4_type: ga4_type %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -54,7 +54,9 @@
               ga4_link_data = {
                 'event_name': 'share',
                 'type': 'share this page',
-                'index': index + 1,
+                'index': {
+                  'index_link': index + 1,
+                },
                 'index_total': links.length,
                 'text': link[:icon],
               }
@@ -63,7 +65,9 @@
               ga4_link_data = {
                 'event_name': 'navigation',
                 'type': 'follow us',
-                'index': index + 1,
+                'index': {
+                  'index_link': index + 1,
+                },
                 'index_total': links.length
               }
             end

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

@@ -31,7 +31,7 @@
                   "index_link": "1"
                 },
                 index_total: "1",
-                section: "Part of",
+                section: pretitle,
               }.to_json
             %>
               data-ga4-link="<%= ga4_attributes %>"

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

@@ -12,7 +12,7 @@ shared_accessibility_criteria:
 accessibility_excluded_rules:
   - skip-link # This component is creating a reference to sections of the page that are not part of the examples.
 examples:
-  from_only:
+  default:
     data:
       from: <a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>
   part_of_only:
@@ -355,8 +355,6 @@ examples:
       see_updates_link: true
       other:
         Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
-    context:
-      dark_background: true
   with_custom_margin_bottom:
     description: |
       The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to the `margin-bottom` values defined in the [responsive-bottom-margin mixin](https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss#L1)

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

@@ -41,13 +41,13 @@ examples:
         url: '/government/organisations/department-for-business-innovation-skills'
         brand: 'department-for-business-innovation-skills'
         crest: 'bis'
-  department_for_international_trade:
+  department_for_business_and_trade:
     data:
       organisation:
-        name: 'Department for<br>International Trade'
-        url: '/government/organisations/department-for-international-trade'
-        brand: 'department-for-international-trade'
-        crest: 'dit'
+        name: 'Department for<br>Business &amp; Trade'
+        url: '/government/organisations/department-for-business-and-trade'
+        brand: 'department-for-business-and-trade'
+        crest: 'dbt'
   executive_office:
     data:
       organisation:

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

@@ -80,6 +80,7 @@ examples:
     description: The ga4_tracking boolean allows you to add Google Analytics 4 (GA4) tracking to your component. Setting this to true will add the `ga4-link-tracker` module to your component. The JavaScript will then add a `data-ga4-link` attribute which contains a JSON object with data relevant to our tracking. See the [ga4-link-tracker docs](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
     data:
       ga4_tracking: true
+      pretitle: 'Example pretitle'
       links: [
         {
           href: '#',

data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb

@@ -34,7 +34,7 @@
         link_class = "govuk-link #{related_nav_helper.section_css_class("govuk-link gem-c-related-navigation__section-link", section_title, link: link, link_is_inline: (index >= section_link_limit))}"
         ga4_attributes = {
           event_name: "navigation",
-          type: "related content",
+          type: ga4_type,
           index: {
             index_section: "#{section_index}",
             index_link: "#{index}",

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -18,6 +18,7 @@
 
     <%= stylesheet_link_tag "component_guide/application", media: "all" %>
     <%= yield :application_stylesheet %>
+    <%= render_component_stylesheets %>
 
     <%= javascript_include_tag "govuk_publishing_components/vendor/modernizr" %>
     <%= yield :extra_headers %>

data/config/locales/en.yml

@@ -236,10 +236,10 @@ en:
         href: "/guidance/getting-the-energy-bills-support-scheme-discount"
       - label: Find a job
         href: "/find-a-job"
-      - label: Coronavirus (COVID-19)
-        href: "/coronavirus"
       - label: 'Universal Credit account: sign in'
         href: "/sign-in-universal-credit"
+      - label: Check your National Insurance record
+        href: "/check-national-insurance-record"
       popular_links_heading: Popular on GOV.UK
       search_text: Search GOV.UK
     metadata:

data/lib/govuk_publishing_components/app_helpers/asset_helper.rb

@@ -72,6 +72,10 @@ module GovukPublishingComponents
         COMPONENT_CSS_PATHS
       end
 
+      def application_stylesheet_in_use?
+        GovukPublishingComponents::Config.application_stylesheet.presence
+      end
+
     private
 
       def is_already_used?(component)

data/lib/govuk_publishing_components/presenters/breadcrumbs_helper.rb

@@ -60,7 +60,7 @@ module GovukPublishingComponents
           },
           ga4_link: {
             event_name: "navigation",
-            type: "breadcrumbs",
+            type: "breadcrumb",
             index: {
               index_link: index.to_s,
             },

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.3.3".freeze
+  VERSION = "35.3.5".freeze
 end

data/node_modules/axe-core/axe.d.ts

@@ -190,12 +190,13 @@ declare namespace axe {
       help: string;
     };
   }
+  interface CheckMessages {
+    pass: string | { [key: string]: string };
+    fail: string | { [key: string]: string };
+    incomplete: string | { [key: string]: string };
+  }
   interface CheckLocale {
-    [key: string]: {
-      pass: string | { [key: string]: string };
-      fail: string | { [key: string]: string };
-      incomplete: string | { [key: string]: string };
-    };
+    [key: string]: CheckMessages;
   }
   interface Locale {
     lang?: string;
@@ -237,7 +238,7 @@ declare namespace axe {
   }
   interface Spec {
     branding?: string | Branding;
-    reporter?: ReporterVersion;
+    reporter?: ReporterVersion | string | AxeReporter;
     checks?: Check[];
     rules?: Rule[];
     standards?: Standards;
@@ -263,6 +264,10 @@ declare namespace axe {
     options?: any;
     matches?: string;
     enabled?: boolean;
+    metadata?: {
+      impact?: ImpactValue;
+      messages?: CheckMessages;
+    };
   }
   interface Rule {
     id: string;
@@ -277,6 +282,7 @@ declare namespace axe {
     tags?: string[];
     matches?: string;
     reviewOnFail?: boolean;
+    metadata?: Omit<RuleMetadata, 'ruleId'>;
   }
   interface AxePlugin {
     id: string;
@@ -319,6 +325,40 @@ declare namespace axe {
     frameSelector: CrossTreeSelector;
     frameContext: FrameContextObject;
   }
+
+  interface RawNodeResult<T extends 'passed' | 'failed' | 'incomplete'> {
+    any: CheckResult[];
+    all: CheckResult[];
+    none: CheckResult[];
+    impact: ImpactValue | null;
+    result: T;
+  }
+
+  interface RawResult extends Omit<Result, 'nodes'> {
+    inapplicable: [];
+    passes: RawNodeResult<'passed'>[];
+    incomplete: RawNodeResult<'incomplete'>[];
+    violations: RawNodeResult<'failed'>[];
+    pageLevel: boolean;
+    result: 'failed' | 'passed' | 'incomplete' | 'inapplicable';
+  }
+
+  type AxeReporter<T = unknown> = (
+    rawResults: RawResult[],
+    option: RunOptions,
+    callback: (report: T) => void
+  ) => void;
+
+  interface VirtualNode {
+    actualNode?: Node;
+    shadowId?: string;
+    children?: VirtualNode[];
+    parent?: VirtualNode;
+    attr(attr: string): string | null;
+    hasAttr(attr: string): boolean;
+    props: { [key: string]: unknown };
+  }
+
   interface Utils {
     getFrameContexts: (
       context?: ElementContext,
@@ -326,7 +366,9 @@ declare namespace axe {
     ) => FrameContext[];
     shadowSelect: (selector: CrossTreeSelector) => Element | null;
     shadowSelectAll: (selector: CrossTreeSelector) => Element[];
+    getStandards(): Required<Standards>;
   }
+
   interface EnvironmentData {
     testEngine: TestEngine;
     testRunner: TestRunner;
@@ -436,6 +478,35 @@ declare namespace axe {
    */
   function frameMessenger(frameMessenger: FrameMessenger): void;
 
+  /**
+   * Setup axe-core so axe.common functions can work properly.
+   */
+  function setup(node?: Element | Document): VirtualNode;
+
+  /**
+   * Clean up axe-core tree and caches. `axe.run` will call this function at the end of the run so there's no need to call it yourself afterwards.
+   */
+  function teardown(): void;
+
+  /**
+   * Check if a reporter is registered
+   */
+  function hasReporter(reporterName: string): boolean;
+
+  /**
+   * Get a reporter based the name it is registered with
+   */
+  function getReporter<T>(reporterName: string): AxeReporter<T>;
+
+  /**
+   * Register a new reporter, optionally setting it as the default
+   */
+  function addReporter<T>(
+    reporterName: string,
+    reporter: AxeReporter<T>,
+    isDefault?: boolean
+  ): void;
+
   // axe.frameMessenger
   type FrameMessenger = {
     open: (topicHandler: TopicHandler) => Close | void;