govuk_publishing_components 23.13.1 → 24.1.1

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

@@ -4,20 +4,25 @@ govuk_frontend_components:
   - accordion
 body: |
   This component is based on the [design system accordion component](https://design-system.service.gov.uk/components/accordion/)
-  and is currently experimental. If using this component, please feed back any research findings to the Design System team.
+  and is currently experimental because more research is needed to validate it.  If using this component, [please feed back any research findings to the Design System team](https://design-system.service.gov.uk/components/accordion/#next-steps).
 
 accessibility_criteria: |
   The accordion must:
 
     * accept focus
     * be usable with a keyboard
-    * indicate when they have focus
+    * the controls must change in appearance when keyboard focus moves to it
+    * the controls must indicate when the mouse is hovered over it
     * be usable with touch
     * be usable with voice commands
     * have visible text
     * indicate to users that each section can be expanded and collapsed
     * inform the user when a step has been expanded or collapsed
-    * be readable when only the text of the page is zoomed in
+    * be readable when only the [text of the page is zoomed in](https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages#w_how-to-only-change-the-size-of-the-text)
+    * zoom in up to 300% without the text spilling off the screen
+    * pass colour contrast
+    * the accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
+    * section content must have aria-label / aria-labelledby with a value that refers to the button that controls display of the content.
 
   Section headings must use a button element:
 

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

@@ -72,6 +72,11 @@ examples:
                       - text: Check what age you can drive
                         href: "/vehicles-can-drive"
                     optional: false
+                  - title: Testing the and
+                    logic: and
+                    contents:
+                    - type: paragraph
+                      text: hello hello what's UP
                   - title: Driving lessons and practice
                     contents:
                     - type: paragraph
@@ -144,7 +149,33 @@ examples:
                       - text: Find out what you’ll get
                         href: "/settled-status-eu-citizens-families/what-settled-and-presettled-status-means"
                     optional: false
-  transition_countdown_exception:
+  with_brexit_cta:
+    description: For documents tagged with certain taxons defined in `brexit_cta_taxon_allow_list` we show a custom Brexit call to action element.
+    data:
+      content_item:
+        title: "Transport news story"
+        content_id: "3c402d90-fe77-49b9-a8aa-1800d4fc2b3d"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Training and study at work
+            base_path: /training-study-work-your-rights
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection
+          taxons:
+            - content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc"
+              title: "Transport"
+              phase: "live"
+  with_brexit_cta_document_exception:
+    description: Illustrates an exception to showing the custom Brexit call to action element as defined in `brexit_cta_document_type_exceptions`.
     data:
       content_item:
         title: "30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"
@@ -164,3 +195,36 @@ examples:
           - title: The future of jobs and skills
             base_path: /government/collections/the-future-of-jobs-and-skills
             document_type: document_collection
+          taxons:
+            - content_id: "e2ca2f1a-0ff3-43ce-b813-16645ff27904"
+              title: "Society and culture"
+              phase: "live"
+  with_brexit_cta_taxon_exception:
+    description: Illustrates an exception to showing the custom Brexit call to action element as defined in `brexit_cta_taxon_exception_list`.
+    data:
+      content_item:
+        title: "Local transport news story"
+        content_id: "5c82db20-7631-11e4-a3cb-005056011aef"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Training and study at work
+            base_path: /training-study-work-your-rights
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection
+          taxons:
+            - content_id: "3b4d6319-fcef-4637-b35a-e3df76321894"
+              title: "Local transport"
+              phase: "live"
+              links:
+                parent_taxons:
+                  - content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc"
+                    title: "Transport"

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"

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