govuk_publishing_components 68.0.0 → 68.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cf6fb7638042dd0bc9d2ac0bb19478a4f0cf10d724870e053ff1a024f937d864
-  data.tar.gz: 9b90cbac0482ebf1cb460e5d721b5525678ac16a47fea078d7ee0f6fa2167d5c
+  metadata.gz: ba5b24da8c7e37b1df6a4f4fec4aff4cd3b099923b888a2c844aef00fc54259f
+  data.tar.gz: 39e1a0df6c03ca9cc320ec92a6e07738ab30e05a1b7b3c14f61197f23bd0387c
 SHA512:
-  metadata.gz: 0cc3516cafd8b43f78621db72c1204a457a47e567354fd54f6128e35a940741c1971150b85d8a725670044f9517601bb781ab7c3e0f08a86cb1002c0d9462bab
-  data.tar.gz: d9a409ec5a08234d1d81c9a39d13962e4241d804de42056685082f636deba3bbadf9a3fad8a4f9eb4f858a81074492a4c1eeaf826b01121e1fa4ad6dce0d0ae7
+  metadata.gz: 1547f4b8b7362ba0105d288a2f484f2a040dba2f7e4955597d040be78dc1b6d891c36856ffab79f88a0b72eb9be616b8b06e8f79c5ca6a5c0c756fec59ae14e9
+  data.tar.gz: 35d2a6d741b9ec56ceecc69d311e9490d8c67bee32d4a86a7da37a8f82defe489906e8caa24f921aec4b88eb3fa812b528049bc446ccc36badf653890335edca

data/app/assets/javascripts/govuk_publishing_components/lib/filter-list.js

@@ -3,13 +3,24 @@
 
   function FilterList (module) {
     this.module = module
-    this.items = this.module.querySelectorAll('[data-filter-item]')
+    this.items = document.querySelectorAll('[data-filter-item]')
     this.labelText = this.module.getAttribute('data-filter-label') || 'Filter list'
+    this.resultsFound = this.items.length
+    this.resultsId = 'filter-results-count'
+
+    window.GOVUK.vars = window.GOVUK.vars || {}
   }
 
   FilterList.prototype.init = function () {
-    if (this.items.length) {
+    if (window.GOVUK.vars.filterStarted) {
+      return
+    }
+
+    if (this.resultsFound) {
       this.appendFilterInput()
+      this.resultsElement = document.getElementById(this.resultsId)
+      this.updateResultsCount()
+      window.GOVUK.vars.filterStarted = true
     }
   }
 
@@ -23,13 +34,19 @@
     formLabel.textContent = this.labelText
 
     const formInput = document.createElement('input')
-    formInput.classList.add('gem-c-input', 'govuk-input')
+    formInput.classList.add('gem-c-input', 'govuk-input', 'govuk-!-margin-bottom-1')
     formInput.id = 'filterInput'
     formInput.name = 'name'
     formInput.spellcheck = false
     formInput.type = 'text'
+    formInput.setAttribute('aria-describedby', this.resultsId)
+
+    const results = document.createElement('div')
+    results.classList.add('govuk-hint')
+    results.id = this.resultsId
+    results.setAttribute('aria-live', 'polite')
 
-    form.append(formLabel, formInput)
+    form.append(formLabel, formInput, results)
 
     this.module.prepend(form)
     const input = form.querySelector('.govuk-input')
@@ -50,6 +67,14 @@
         item.classList.add('govuk-!-display-none')
       }
     }
+    this.updateResultsCount()
+  }
+
+  FilterList.prototype.updateResultsCount = function () {
+    const count = Array.from(this.items).filter((item) => !item.classList.contains('govuk-!-display-none')).length
+    const text = count === 1 ? `${count} result found` : `${count === 0 ? 'No' : count} results found`
+
+    this.resultsElement.innerHTML = count !== this.resultsFound ? text : ''
   }
 
   Modules.FilterList = FilterList

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

@@ -158,10 +158,11 @@
 
 .gem-c-cards__sub-heading {
   margin: 0 govuk-spacing(6) govuk-spacing(2) 0;
+  text-wrap: pretty;
 
   // Ensure card content width is constrained to two thirds on desktop
   @include govuk-media-query($from: "desktop") {
-    max-width: 66.6667%;
+    max-width: 640px;
   }
 }
 
@@ -208,10 +209,11 @@
 
 .gem-c-cards__description {
   margin: 0 govuk-spacing(6) 0 0;
+  text-wrap: pretty;
 
   // Ensure card content width is constrained to two thirds on desktop
   @include govuk-media-query($from: "desktop") {
-    max-width: 66.6667%;
+    max-width: 640px;
   }
 }
 

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

@@ -90,7 +90,7 @@
   display: none;
 }
 
-.gem-c-metadata--history {
+.gem-c-metadata--border-top {
   padding-top: govuk-spacing(2);
   border-top: 1px solid $govuk-border-colour;
 }
@@ -110,22 +110,30 @@
 }
 
 .gem-c-metadata__change-history {
-  margin: govuk-spacing(4) 0 0 0;
+  margin: 0;
   padding: 0;
   list-style: none;
 }
 
+.gem-c-metadata__change-history-item {
+  margin-bottom: govuk-spacing(4);
+
+  &:last-child {
+    margin: 0;
+  }
+
+  .gem-c-metadata__change-note {
+    margin: 0;
+    white-space: pre-line;
+  }
+}
+
 .gem-c-metadata__change-date {
   display: block;
-  margin: govuk-spacing(3) 0;
+  margin: 0 0 govuk-spacing(3) 0;
   @include govuk-font(16, $weight: bold);
 }
 
-.gem-c-metadata__change-note {
-  margin: 0;
-  white-space: pre-line;
-}
-
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-metadata {

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

@@ -19,3 +19,11 @@
     border-color: #16eeee;
   }
 }
+
+// This can be removed once the organisation is added to govuk-frontend
+.brand--department-for-business-innovation-science-trade {
+  &.brand__border-color,
+  .brand__border-color {
+    border-color: #ff4328;
+  }
+}

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

@@ -13,12 +13,12 @@
   other ||= nil
   inverse ||= false
   inverse_compress ||= false
+  border_top ||= false
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-metadata")
   component_helper.add_class("direction-#{direction}") if local_assigns.include?(:direction)
-
-  component_helper.add_class("gem-c-metadata--history") if page_history.any?
+  component_helper.add_class("gem-c-metadata--border-top") if border_top
   component_helper.set_id("full-publication-update-history") if page_history.any?
 
   if inverse
@@ -49,13 +49,13 @@
   <dl class="gem-c-metadata__list">
     <% if from.any? %>
       <dt class="gem-c-metadata__term"><%= t("components.metadata.from") %>:</dt>
-      <dd class="gem-c-metadata__definition" data-module="gem-toggle">
+      <dd class="gem-c-metadata__definition">
         <%= render "govuk_publishing_components/components/metadata/sentence", items: from, toggle_id: "from-#{SecureRandom.hex(4)}" %>
       </dd>
     <% end %>
     <% if part_of.any? %>
       <dt class="gem-c-metadata__term"><%= t("components.metadata.part_of") %>:</dt>
-      <dd class="gem-c-metadata__definition" data-module="gem-toggle">
+      <dd class="gem-c-metadata__definition">
         <%= render "govuk_publishing_components/components/metadata/sentence", items: part_of, toggle_id: "part-of-#{SecureRandom.hex(4)}" %>
       </dd>
     <% end %>
@@ -69,7 +69,7 @@
     <% end %>
     <% if local_assigns.include?(:last_updated) && last_updated %>
       <dt class="gem-c-metadata__term"><%= t("components.metadata.last_updated") %>:</dt>
-      <dd class="gem-c-metadata__definition" data-module="gem-toggle">
+      <dd class="gem-c-metadata__definition">
         <%= last_updated %>
         <% if local_assigns.include?(:see_updates_link) %>
           &#8212; <a href="#full-publication-update-history"
@@ -78,27 +78,19 @@
           </a>
         <% end %>
         <% if page_history.any? %>
-          <span aria-hidden="true">&#8212; </span>
-          <% page_history_toggle_id = "page-history-#{SecureRandom.hex(4)}" %>
-          <a
-            href="#full-history"
-            class="gem-c-metadata__toggle govuk-link"
-            data-controls="<%= page_history_toggle_id %>"
-            data-expanded="false"
-            data-toggled-text='<%= t("components.metadata.hide_all_updates", locale: :en) %>'
-            data-module="ga4-event-tracker"
-            data-ga4-event='<%= { event_name: "select_content", type: "content history", section: "Footer" }.to_json %>'
-            data-ga4-expandable>
-            <%= t("components.metadata.show_all_updates", locale: :en) %>
-          </a>
-          <ol class="gem-c-metadata__change-history js-hidden" id="<%= page_history_toggle_id %>">
-            <% page_history.each do |change| %>
-              <li>
-                <time class="gem-c-metadata__change-date timestamp" datetime="<%= change[:timestamp] %>"><%= change[:display_time] %></time>
-                <p class="gem-c-metadata__change-note"><%= change[:note].strip %></p>
-              </li>
-            <% end %>
-          </ol>
+          <%= render "govuk_publishing_components/components/details", {
+            title: t("components.metadata.show_all_updates", locale: :en),
+            small: true,
+          } do %>
+            <ol class="gem-c-metadata__change-history">
+              <% page_history.each do |change| %>
+                <li class="gem-c-metadata__change-history-item">
+                  <time class="gem-c-metadata__change-date" datetime="<%= change[:timestamp] %>"><%= change[:display_time] %></time>
+                  <p class="gem-c-metadata__change-note"><%= change[:note].strip %></p>
+                </li>
+              <% end %>
+            </ol>
+          <% end %>
         <% end %>
       </dd>
     <% end %>
@@ -111,10 +103,8 @@
         <% if definition.any? %>
           <dt class="gem-c-metadata__term"><%= title %>:</dt>
           <dd class="gem-c-metadata__definition"
-            <% if disable_ga4 %>
-              data-module="gem-toggle"
-            <% else %>
-              data-module="gem-toggle ga4-link-tracker"
+            <% unless disable_ga4 %>
+              data-module="ga4-link-tracker"
               data-ga4-link="<%= ga4_object %>"
             <% end %>>
             <%= render "govuk_publishing_components/components/metadata/sentence", items: definition, toggle_id: "#{index}-#{SecureRandom.hex(4)}" %>

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

@@ -22,6 +22,10 @@ examples:
   history_only:
     data:
       history: Updated 2 weeks ago
+  with_border_top:
+    data:
+      border_top: true
+      from: <a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>
   published_and_updated:
     data:
       first_published: 14 June 2014
@@ -33,6 +37,37 @@ examples:
     data:
       last_updated: 10 September 2015
       see_updates_link: true
+  display_page_history:
+    description: |
+      This will set up an expandable section on the page, with a top border, to let users toggle the display of the page history. It also includes a hidden H2 heading of 'Updates to this page'. This heading will not be included if one is passed to the component using the `title` option.
+
+      This example includes an expandable 'part of' section to show both toggling elements working together in one component instance.
+    data:
+      border_top: true
+      part_of:
+        - <a href="/government/world/afghanistan">Afghanistan</a>
+        - <a href="/government/world/albania">Albania</a>
+        - <a href="/government/world/algeria">Algeria</a>
+        - <a href="/government/world/angola">Angola</a>
+        - <a href="/government/world/anguilla">Anguilla</a>
+        - <a href="/government/world/argentina">Argentina</a>
+        - <a href="/government/world/armenia">Armenia</a>
+        - <a href="/government/world/australia">Australia</a>
+        - <a href="/government/world/austria">Austria</a>
+        - <a href="/government/world/azerbaijan">Azerbaijan</a>
+        - <a href="/government/world/bahrain">Bahrain</a>
+      first_published: 1st January 1990
+      last_updated: 20th October 2016
+      page_history:
+      - display_time: 1st January 1990
+        note: First published
+        timestamp: 1990-01-01T15:42:37.000+00:00
+      - display_time: 20th July 1995
+        note: Updated to include information for 1994
+        timestamp: 1995-07-20T15:42:37.000+00:00
+      - display_time: 14th October 2000
+        note: Updated information on pupil premium reviews and what information schools need to publish on their websites.
+        timestamp: 2000-10-14T15:42:37.000+00:00
   extensive:
     data:
       from:
@@ -348,36 +383,6 @@ examples:
       first_published: 14 June 2014
       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>)
-  display_page_history:
-    description: |
-      This will set up an expandable section on the page, with a top border, to let users toggle the display of the page history. It also includes a hidden H2 heading of 'Updates to this page'. This heading will not be included if one is passed to the component using the `title` option.
-
-      This example includes an expandable 'part of' section to show both toggling elements working together in one component instance.
-    data:
-      part_of:
-        - <a href="/government/world/afghanistan">Afghanistan</a>
-        - <a href="/government/world/albania">Albania</a>
-        - <a href="/government/world/algeria">Algeria</a>
-        - <a href="/government/world/angola">Angola</a>
-        - <a href="/government/world/anguilla">Anguilla</a>
-        - <a href="/government/world/argentina">Argentina</a>
-        - <a href="/government/world/armenia">Armenia</a>
-        - <a href="/government/world/australia">Australia</a>
-        - <a href="/government/world/austria">Austria</a>
-        - <a href="/government/world/azerbaijan">Azerbaijan</a>
-        - <a href="/government/world/bahrain">Bahrain</a>
-      first_published: 1st January 1990
-      last_updated: 20th October 2016
-      page_history:
-      - display_time: 1st January 1990
-        note: First published
-        timestamp: 1990-01-01T15:42:37.000+00:00
-      - display_time: 20th July 1995
-        note: Updated to include information for 1994
-        timestamp: 1995-07-20T15:42:37.000+00:00
-      - display_time: 14th October 2000
-        note: Updated information on pupil premium reviews and what information schools need to publish on their websites.
-        timestamp: 2000-10-14T15:42:37.000+00:00
   with_title:
     data:
       last_updated: 10 September 2015

data/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb

@@ -9,16 +9,10 @@
 %>
 <%= items.to_sentence(two_words_connector: connector, last_word_connector: connector).html_safe %>
 <% if remaining.any? %>
-  <div class="gem-c-metadata__toggle-wrap govuk-!-display-none-print">
-    <a href="#"
-       class="gem-c-metadata__definition-link govuk-!-display-none-print"
-       data-controls="toggle-<%= toggle_id %>"
-       data-expanded="false"
-       data-toggled-text="<%= t("common.toggle_less") %>">
-        <%= t("common.toggle_more",
-          show: t("common.show"),
-          number: remaining.length) %>
-    </a>
-  </div>
-  <span id="toggle-<%= toggle_id %>" class="gem-c-metadata__toggle-items js-hidden"><%= remaining.to_sentence.html_safe %></span>
+  <%= render "govuk_publishing_components/components/details", {
+    title: t("common.toggle_more", show: t("common.show"), number: remaining.length),
+    small: true,
+  } do %>
+    <%= remaining.to_sentence.html_safe %>
+  <% end %>
 <% end %>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "68.0.0".freeze
+  VERSION = "68.2.0".freeze
 end

data/node_modules/axe-core/README.md

@@ -28,6 +28,12 @@ First download the package:
 npm install axe-core --save-dev
 ```
 
+Or, using pnpm:
+
+```console
+pnpm add --save-dev axe-core
+```
+
 Now include the javascript file in each of your iframes in your fixtures or test systems:
 
 ```html
@@ -95,17 +101,13 @@ The [axe-core API](doc/API.md) package consists of:
 
 Axe can be built using your local language. To do so, a localization file must be added to the `./locales` directory. This file must be named in the following manner: `<langcode>.json`. To build axe using this locale, instead of the default, run axe with the `--lang` flag, like so:
 
-`grunt build --lang=nl`
-
-or equivalently:
-
-`npm run build -- --lang=nl`
+`pnpm run build -- --lang=nl`
 
 This will create a new build for axe, called `axe.<lang>.js` and `axe.<lang>.min.js`. If you want to build all localized versions, simply pass in `--all-lang` instead. If you want to build multiple localized versions (but not all of them), you can pass in a comma-separated list of languages to the `--lang` flag, like `--lang=nl,ja`.
 
-To create a new translation for axe, start by running `grunt translate --lang=<langcode>`. This will create a json file in the `./locales` directory, with the default English text in it for you to translate. Alternatively, you could copy `./locales/_template.json`. We welcome any localization for axe-core. For details on how to contribute, see the Contributing section below. For details on the message syntax, see [Check Message Template](/doc/check-message-template.md).
+To create a new translation for axe, start by running `pnpm run translate -- --lang=<langcode>`. This will create a json file in the `./locales` directory, with the default English text in it for you to translate. Alternatively, you could copy `./locales/_template.json`. We welcome any localization for axe-core. For details on how to contribute, see the Contributing section below. For details on the message syntax, see [Check Message Template](/doc/check-message-template.md).
 
-To update an existing translation file, re-run `grunt translate --lang=<langcode>`. This will add new messages used in English and remove messages which were not used in English.
+To update an existing translation file, re-run `pnpm run translate -- --lang=<langcode>`. This will add new messages used in English and remove messages which were not used in English.
 
 Additionally, locale can be applied at runtime by passing a `locale` object to `axe.configure()`. The locale object must be of the same shape as existing locales in the `./locales` directory. For example:
 
@@ -153,6 +155,7 @@ Axe-core supports the following locales. Do note that since locales are contribu
 - Polish
 - Portuguese (Brazilian)
 - Spanish
+- Swedish
 
 ## Updates & Security
 

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

@@ -37,12 +37,7 @@ declare namespace axe {
     | 'sectionhead';
 
   type HtmlContentTypes =
-    | 'flow'
-    | 'sectioning'
-    | 'heading'
-    | 'phrasing'
-    | 'embedded'
-    | 'interactive';
+    'flow' | 'sectioning' | 'heading' | 'phrasing' | 'embedded' | 'interactive';
 
   // Array of length 2 or greater
   type MultiArray<T> = [T, T, ...T[]];
@@ -65,10 +60,7 @@ declare namespace axe {
 
   // Context options
   type Selector =
-    | Node
-    | BaseSelector
-    | LabelledShadowDomSelector
-    | LabelledFramesSelector;
+    Node | BaseSelector | LabelledShadowDomSelector | LabelledFramesSelector;
   type SelectorList = Array<Selector | FramesSelector> | NodeList;
   type ContextProp = Selector | SelectorList;
   type ContextObject =
@@ -85,9 +77,7 @@ declare namespace axe {
   type ElementContext = ContextSpec;
 
   type SerialSelector =
-    | BaseSelector
-    | LabelledShadowDomSelector
-    | LabelledFramesSelector;
+    BaseSelector | LabelledShadowDomSelector | LabelledFramesSelector;
   type SerialFrameSelector = SerialSelector | FramesSelector;
   type SerialSelectorList = Array<SerialFrameSelector>;
 
@@ -310,8 +300,7 @@ declare namespace axe {
           virtualNode: VirtualNode
         ) => boolean | undefined | void);
     after?:
-      | string
-      | ((results: AfterResult[], options: unknown) => AfterResult[]);
+      string | ((results: AfterResult[], options: unknown) => AfterResult[]);
     options?: any;
     matches?: string;
     enabled?: boolean;