govuk_publishing_components 23.13.0 → 24.1.0

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

@@ -1,16 +1,16 @@
 name: Document list
 description: An ordered list of documents including a document type, when updated and a link.
 body: |
-  Outputs a list to documents, based on an array of document data. This may include:
+  Outputs a list to documents, based on an array of document data. A "document" in this context can be an asset (such as a ODT or other downloadable document) or a web page.
+  
+  The component can display:
 
-  * document title
-  * link to the document
-  * last updated date object
-  * document type
+  * a document title
+  * a link to the document
+  * a last updated date object
+  * a document type
 
   Tracking can be added to the links by supplying optional data attributes for each.
-
-  Documents are presented in an ordered list as the component expects that the ordering of the documents is relevant.
 accessibility_criteria: |
   The component must:
 
@@ -195,6 +195,23 @@ examples:
           public_updated_at: 2017-07-19 15:01:48
           document_type: 'Statistical data set'
         subtext: 'First published during the 1996 Conservative Government'
+  without_top_border_on_list_element:
+    description: Several interfaces across GOV.UK benefit from the semantics of the document list but have their own bespoke designs, sometimes meaning that the visual border element doesn't gel with said interface. Removing it using the below attribute allows for cleaner visual fidelity in this instances.
+    data:
+      remove_top_border: true
+      items:
+      - link:
+          text: 'Department for Education – Statistics at DfE'
+          path: '/government/organisations/department-for-education/about/statistics'
+        metadata:
+          public_updated_at: 2017-07-19 15:01:48
+          document_type: 'Corporate information'
+      - link:
+          text: 'State-funded school inspections and outcomes: management information'
+          path: '/government/organisations/department-for-education/about/statistics'
+        metadata:
+          public_updated_at: 2017-07-19 15:01:48
+          document_type: 'Statistical data set'
   highlighted_result:
     description: Highlight one or more of the items in the list. This is used on finders to provide a 'top result' for a search. The `highlight_text` parameter is optional.
     data:
@@ -280,3 +297,29 @@ examples:
           document_type: 'Data tryloywder'
           locale:
             document_type: 'cy'
+  with_full_size_description_text:
+    data:
+      items:
+      - link:
+          text: 'Become an apprentice'
+          path: '/become-an-apprentice'
+          description: 'Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship.'
+          full_size_description: true
+  with_rel_link_attribute:
+    description: |
+      The [rel attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) is an option attribute to dictate the relationship between the document being linked to and the current page. This is predominantly used by search engines to help index journeys through a website.
+      
+      On GOV.UK, this is typically used to dictate an external website being linked to with `rel="external"`, however this component supports:
+      
+      - external
+      - nofollow
+      - noopener
+      - noreferrer
+      - opener
+    data:
+      items:
+      - link:
+          text: 'Report Fraud'
+          path: 'https://www.actionfraud.police.uk/contact-us'
+          rel: 'external'
+          description: "Contact Action Fraud to report fraud and cyber crime, or to tell them you've been the victim of a scam."

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

@@ -312,8 +312,8 @@ examples:
       block: |
         <div class="contact" id="contact_1017">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>
@@ -332,8 +332,8 @@ examples:
         <h2>This is a title</h2>
         <div class="contact" id="contact_1018">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>
@@ -349,8 +349,8 @@ examples:
         <p>This is a paragraph.</p>
         <div class="contact" id="contact_1019">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>

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

@@ -81,6 +81,17 @@ examples:
       - text: News and communications
         href: "item-6"
         active: true
+  with_navigation_link_data_attributes:
+    description: Supports adding data attributes i.e for tracking
+    data:
+      navigation_items:
+      - text: Departments
+        href: "item-1"
+        data:
+          module: "a custom attribute"
+          something_else: "some other custom attribute"
+      - text: Worldwide
+        href: "item-2"
   full_width:
     description: |
       This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -1,5 +1,5 @@
 <div class="govuk-header__logo gem-c-header__logo">
-  <a href="/" class="govuk-header__link govuk-header__link--homepage" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
+  <a href="/" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
     <span class="govuk-header__logotype">
       <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
         <path fill="currentColor" fill-rule="evenodd"

data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb

@@ -1,16 +1,21 @@
 <% if navigation_items.any? %>
   <button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
-  <%= tag.nav(class: "gem-c-header__nav", 'aria-label': navigation_aria_label ? navigation_aria_label : nil ) do %>
+  <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
     <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
       <% navigation_items.each_with_index do |item, index| %>
-        <li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
-          <%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
+        <%
+          li_classes = %w(govuk-header__navigation-item)
+          li_classes << "govuk-header__navigation-item--active" if item[:active]
+          li_classes << "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu]
+        %>
+        <%= tag.li class: li_classes do %>
           <%= link_to(
             item[:text],
             item[:href],
             class: 'govuk-header__link',
+            data: item[:data],
           ) %>
-        </li>
+        <% end %>
       <% end %>
     </ul>
   <% end %>

data/config/initializers/assets.rb

@@ -25,8 +25,10 @@ Rails.application.config.assets.precompile += %w[
   govuk_publishing_components/search-button.png
   govuk_publishing_components/icon-file-download.svg
   govuk_publishing_components/icon-important.svg
-  govuk_publishing_components/chevron-banner/*.svg
   govuk_publishing_components/crests/*.png
+  govuk_publishing_components/take-action-amber.svg
+  govuk_publishing_components/take-action-green.svg
+  govuk_publishing_components/take-action-red.svg
 ]
 
 # GOV.UK Frontend assets

data/config/locales/cy.yml

@@ -12,4 +12,9 @@ cy:
       transition:
         title: "Brexit"
         link_path: "/transition.cy"
-        link_text: "Darganfyddwch sut mae’r rheolau Brexit newydd yn effeithio arnoch chi"
+        link_text: "Gwiriwch beth sydd angen i chi ei wneud"
+      take_action_list:
+        red: Gwiriwch
+        amber: Newidiwch
+        green: Ewch
+        aria_label: Ymgyrch slogan Brexit, Gwiriwch, Newidiwch, Ewch.

data/config/locales/en.yml

@@ -79,7 +79,12 @@ en:
       transition:
         title: "Brexit"
         link_path: "/transition"
-        link_text: "Check how the new Brexit rules affect you"
+        link_text: "Check what you need to do"
+      take_action_list:
+        red: Check
+        amber: Change
+        green: Go
+        aria_label: Brexit campaign slogan, Check, Change, Go.
     related_footer_navigation:
       collections: "Collections"
       policies: "Policies"
@@ -92,8 +97,8 @@ en:
     step_by_step_nav:
       show: "Show"
       hide: "Hide"
-      show_all: "Show all"
-      hide_all: "Hide all"
+      show_all: "Show all steps"
+      hide_all: "Hide all steps"
     step_by_step_nav_related:
       part_of: "Part of"
     subscription_links:

data/lib/govuk_publishing_components/presenters/contextual_navigation.rb

@@ -113,8 +113,189 @@ module GovukPublishingComponents
         tagged_to_brexit? && (page_content_id != brexit_start_page_content_id)
       end
 
-      def transition_countdown_exception?
-        content_item["content_id"] == "c3752802-f091-43a9-ba90-33568fccf391"
+      def brexit_cta_document_exceptions
+        # /government/news/30-creative-teams-awarded-up-to-100000-each-for-festival-uk-2022-rd-project
+        # and answer pages that have a start button (tracked in https://docs.google.com/spreadsheets/d/1ynH8zIjvElvK-u8JLI8KOYylxTbzJsoXRqEnqrnqv_4/edit)
+        %w[
+          c3752802-f091-43a9-ba90-33568fccf391
+          e1a9ce2b-4085-4761-b70f-d125a6571de3
+          6a2bf66e-2313-4204-afd5-9940de5e1d66
+          f65b0ac7-b8cd-476b-bd5d-738268517659
+          45ad868a-2e79-4029-991b-c29559d7eb29
+          e4e9c4ec-385e-4758-93ac-388bc154815e
+          cee73f76-83f0-44e2-b657-3b51a9cbc76e
+          9a945506-60bc-44d8-a2ec-0eb2824732d6
+          6ae16c12-a554-44e2-b3e3-596375aa1b9a
+          9add4ccc-dc4c-44cf-9b69-6878c162d431
+          4f5cf1cd-efda-4c49-8292-1db1c6c3cfb0
+          73058592-dedf-4379-9a1d-d8222a796c0a
+          c9259172-5432-43a6-b710-409d463c7627
+          59ecfc6d-cb9e-49b8-b013-fc368ebdf8ed
+          9897695d-624b-4cb9-b873-f3113f0332a1
+          715f4659-b058-46ec-84c8-cc346c210778
+          c63890f9-2356-4be3-9e07-6cf4b8de7081
+          e7661ec8-b678-444e-b4d0-a221fa83a7f7
+          723f9c0a-bcdb-4d8f-952c-6df0ed468c57
+          a1c420b7-11d7-4b9c-a97e-406fb73c0200
+          c1347936-839b-4547-a570-0c315c34ee45
+          1396f68b-6ffa-47ef-a049-414e7b548e81
+          3b054acf-d0af-470e-b912-9481204d1a9a
+          317b9c08-928b-4fd2-bc8e-4c6acf287c58
+          44d6cb7a-d853-4cd8-a9cb-69eff0299d9e
+          15517245-f142-4e45-ad84-773250f7d5a2
+          6fe6644d-d037-4ea4-baf6-800dc1966ed0
+          4a63625c-a195-4b86-9562-cb6653dd26ff
+          47521233-20a8-4d02-ba31-6e1977448fd1
+          7b8ca4ac-f3a3-41b8-9555-9e244c36575b
+          be1a82d1-e53c-431a-9e7a-337ed4b2654f
+          6c445001-4e29-4853-8c14-444d7f9374ee
+          c8cf2a7c-5c13-4f3d-b1ff-6a7eb5533973
+          2422a237-f8f1-4e9f-ad51-f1d44fde9755
+          ae000c08-c74f-467b-b8a4-90f138252a5c
+          7eec7800-9c4d-4160-af53-57b5d3e02972
+          eb545b3b-111b-4c3c-890c-c9ec29b9090d
+          8d705ade-8977-480d-9080-72a19e341c2a
+          2a0dd317-0252-4c7c-8c13-b43af28406bc
+          f27e5792-a84b-4164-9890-7e86767634e8
+          b0b9a600-1fe6-4257-9e68-2be0f59ea25d
+          28fa04ea-42e1-46ad-9abc-acf132c5666d
+          64b27b8a-ae53-4034-a812-f4805cd7e3ad
+          1dd5a75f-18b4-419d-b2b6-6d4808f2c7e4
+          b21b9e34-455c-4305-b4cc-4e6b8d3f7522
+          0ab53a0d-b098-43a8-b3cc-8b3224697228
+          e3862156-ba5a-41ba-8ee6-22e5cd6a6144
+          2e8f7fae-7164-459c-898b-0c0538eee3e0
+          6087439c-26d2-4881-b345-5160e23f3b5e
+          cac78a0a-9c28-436a-a29e-8ccbe8fbc956
+          c2fd13a5-537b-4368-ac2e-6078b2c463f1
+          98f0a21d-7b67-4089-a98c-f0a0177291a2
+          06692612-8c39-464c-8aee-2aa62e6c8887
+          df943977-69cb-479d-a921-9410d603c471
+          2656eb6b-f2eb-4982-8a90-e40d03a34a4d
+          4ca8698b-4a24-45ff-baea-7633cc24b679
+          ed73581f-9bf8-48b5-bb66-935581a255e3
+          15f1c594-af1d-4f16-97cc-ad4d12017509
+        ]
+      end
+
+      def brexit_cta_document_exception?
+        brexit_cta_document_exceptions.include?(content_item["content_id"])
+      end
+
+      def brexit_cta_document_type_exceptions
+        %w[
+          aaib_report
+          asylum_support_decision
+          fatality_notice
+          maib_report
+          raib_report
+          simple_smart_answer
+          transaction
+        ]
+      end
+
+      def brexit_cta_document_type_exception?
+        brexit_cta_document_type_exceptions.include?(content_item["document_type"])
+      end
+
+      def brexit_cta_taxon_allow_list
+        # Entering and staying in the UK
+        # Going and being abroad
+        # Corporate information
+        # Transport
+        # Environment
+        # International
+        # Defence and armed forces
+        # Society and culture
+        # Government
+        # Work
+        # Welfare
+        # Money
+        # Business and industry
+        # Health and social care
+        # Education > Further and higher education
+        # Education > Teaching and leadership
+        # Education > Funding and finance for students
+        # Coronavirus (COVID-19)
+        %w[
+          ba3a9702-da22-487f-86c1-8334a730e559
+          9597c30a-605a-4e36-8bc1-47e5cdae41b3
+          a544d48b-1e9e-47fb-b427-7a987c658c14
+          a4038b29-b332-4f13-98b1-1c9709e216bc
+          3cf97f69-84de-41ae-bc7b-7e2cc238fa58
+          37d0fa26-abed-4c74-8835-b3b51ae1c8b2
+          e491505c-77ae-45b2-84be-8c94b94f6a2b
+          e2ca2f1a-0ff3-43ce-b813-16645ff27904
+          e48ab80a-de80-4e83-bf59-26316856a5f9
+          d0f1e5a3-c8f4-4780-8678-994f19104b21
+          dded88e2-f92e-424f-b73e-6ad24a839c51
+          6acc9db4-780e-4a46-92b4-1812e3c2c48a
+          495afdb6-47be-4df1-8b38-91c8adb1eefc
+          8124ead8-8ebc-4faf-88ad-dd5cbcc92ba8
+          dd767840-363e-43ad-8835-c9ab516633de
+          ff00b8b2-dcdb-4659-93c2-291c9be354f3
+          23265b25-7ec3-4960-8517-4ff8d4d92cac
+          5b7b9532-a775-4bd2-a3aa-6ce380184b6c
+        ]
+      end
+
+      def brexit_cta_taxon_allow_list?
+        taxons = content_item.dig("links", "taxons").to_a
+        taxons.each do |taxon|
+          if brexit_cta_taxon_allow_list.include?(taxon["content_id"]) || parent_taxon_include?(taxon, brexit_cta_taxon_allow_list)
+            return true
+          end
+        end
+        false
+      end
+
+      def parent_taxon_include?(taxon, taxon_list)
+        if taxon.present?
+          if taxon.dig("links", "parent_taxons").to_a.any? { |taxon_item| taxon_list.include?(taxon_item["content_id"]) }
+            return true
+          end
+
+          taxon.dig("links", "parent_taxons").to_a.any? { |taxon_item| parent_taxon_include?(taxon_item, taxon_list) }
+        else
+          false
+        end
+      end
+
+      def brexit_cta_taxon_exception_list
+        # Entering and staying in the UK > Immigration offences
+        # Entering and staying in the UK > Inspections of border, immigration and asylum services
+        # Entering and staying in the UK > Refugees, asylum and human rights
+        # Transport > Local transport
+        # Education > Further and higher education > Education in prisons
+        %w[
+          fa13521f-9285-45b0-bd65-4a472a8037e7
+          0fab9131-f877-4286-b4d8-922fbfb402b6
+          08a8a69f-2825-4fe2-a4cf-c83458a5629e
+          3b4d6319-fcef-4637-b35a-e3df76321894
+          6426d1c5-93c8-4659-85d5-1f0d3368a124
+        ]
+      end
+
+      def brexit_cta_taxon_exception_list?
+        taxons = content_item.dig("links", "taxons").to_a
+        taxons.each do |taxon|
+          if brexit_cta_taxon_exception_list.include?(taxon["content_id"]) || parent_taxon_include?(taxon, brexit_cta_taxon_exception_list)
+            return true
+          end
+        end
+        false
+      end
+
+      def brexit_cta_exception?
+        brexit_cta_document_exception? ||
+          brexit_cta_document_type_exception? ||
+          brexit_cta_taxon_exception_list?
+      end
+
+      def show_brexit_cta?
+        brexit_cta_taxon_allow_list? &&
+          step_by_step_count.zero? &&
+          !brexit_cta_exception?
       end
 
       def step_by_step_count

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.13.0".freeze
+  VERSION = "24.1.0".freeze
 end

data/node_modules/govuk-frontend/govuk/all.js

@@ -1498,7 +1498,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
   }
 }
 
@@ -1959,6 +1959,58 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     $input.closest('label')
 };
 
+function NotificationBanner ($module) {
+  this.$module = $module;
+}
+
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
+  var $module = this.$module;
+  // Check for module
+  if (!$module) {
+    return
+  }
+
+  this.setFocus();
+};
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1');
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex');
+    });
+  }
+
+  $module.focus();
+};
+
 function Header ($module) {
   this.$module = $module;
   this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
@@ -2476,6 +2528,11 @@ function initAll (options) {
   var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
   new Header($toggleButton).init();
 
+  var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
+  nodeListForEach($notificationBanners, function ($notificationBanner) {
+    new NotificationBanner($notificationBanner).init();
+  });
+
   var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();