govuk_publishing_components 34.0.0 → 34.5.0

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

@@ -103,3 +103,61 @@ examples:
               title: "Russian invasion of Ukraine: UK government response"
               base_path: "/government/topical-events/russian-invasion-of-ukraine-uk-government-response"
               locale: "en"
+  with_ga4_tracking_on_related_navigation:
+    description: Adds Google Analytics 4 tracking to components within the sidebar. Currently only the Related Navigation and Step by Step navigation components accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "UK forces arrive to reinforce NATO’s eastern flank"
+        content_id: "a342fd46-d801-4c1e-9d8f-f41fba6da563"
+        locale: "en"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - 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
+  with_ga4_tracking_on_step_by_step:
+    description: Adds Google Analytics 4 tracking to components within the sidebar. Currently only the Related Navigation and Step by Step navigation components accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          part_of_step_navs:
+            - title: "Learn to drive a car: step by step"
+              base_path: "/micropigs-vs-micropugs"
+              details:
+                step_by_step_nav:
+                  title: 'Stay in the UK after it leaves the EU (''settled status''): step by step'
+                  steps:
+                  - title: Check you're allowed to drive
+                    contents:
+                    - type: paragraph
+                      text: Most people can start learning to drive when they’re 17.
+                    - type: list
+                      contents:
+                      - 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
+                      text: You need a provisional driving licence to take lessons or practice.
+                    - type: list
+                      contents:
+                      - text: The Highway Code
+                        href: "/guidance/the-highway-code"
+                    optional: false

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

@@ -7,7 +7,9 @@ body: |
 
 shared_accessibility_criteria:
   - link
-
+accessibility_excluded_rules:
+  - duplicate-id-aria # IDs will be duplicated in component examples list
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     description: |

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

@@ -21,3 +21,16 @@ examples:
       items:
         - text: Error 1
         - text: Error 2
+  with_dir_attribute:
+    description: Allows the correct display of right to left languages
+    data:
+      text: "An error message displayed right to left"
+      id: "error_id_2"
+      right_to_left: true
+  with_items_and_dir_attribute:
+    description: To allow the correct display of right to left languages on error items
+    data:
+      right_to_left: true
+      items:
+        - text: Error 1 displayed right to left
+        - text: Error 2 displayed right to left

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

@@ -19,3 +19,9 @@ examples:
     data:
       text: "You qualify if you were born in the UK before June 1960."
       margin_bottom: 9
+  with_dir_attribute:
+    description: |
+      Allows the correct display of right to left languages.
+    data:
+      text: "العربيَّة"
+      right_to_left: true

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

@@ -205,6 +205,29 @@ examples:
       <div class="govuk-!-width-full">
         <%= component %>
       </div>
+  youtube_video:
+    description: |
+      Given a Youtube video id, the image card will render a Youtube embed instead of an image. If Javascript fails to execute for any reason, then a fallback link to the Youtube video will be rendered instead.
+
+      Youtube does not support embeds on Internet Explorer versions lower than 10. In addition, Youtube's website will block any version of Internet Explorer using it. There is therefore no fallback for IE9 and lower.
+    data:
+      youtube_video_id: "XnP6jaK7ZAY"
+      href: "/still-not-a-page"
+      youtube_video_alt: "The vision for GOV.UK"
+      context:
+        date: 2017-06-14 11:30:00
+        text: "Announcement"
+      description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
+      extra_details: [
+        {
+          text: "Link to video transcript",
+          href: "/1"
+        }
+      ]
+    embed: |
+      <div class="govuk-!-width-full">
+        <%= component %>
+      </div>
   with_data_attributes:
     description: Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
@@ -296,4 +319,4 @@ examples:
     embed: |
       <div class="govuk-!-width-full">
         <%= component %>
-      </div>
+      </div>

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

@@ -183,3 +183,35 @@ examples:
         text: "Given name"
       name: given-name
       enterkeyhint: "next"
+  with_dir_attribute:
+    description: |
+      Allows the correct display of right to left languages.
+
+      By default the input element and the label both display text in a left to right direction.
+
+      When the `right_to_left` parameter of the input component is set to `true` both the input and the label, hint and error message display their content in a right to left direction. 
+    data:
+      label:
+        text: "Some input text to be displayed right to left with a label that displays in the same direction"
+      hint: "Some hint text that displays in the same text direction as the label"
+      error_message: "An error message that displays in the same text direction as the label"
+      name: rtl-input-text
+      value: "العربيَّة"
+      right_to_left: true
+
+  with_separate_dir_attributes_for_field_and_help_text:
+    description: |
+      Allows the correct display of right to left languages.
+
+      By default the input element and the label both display text in a left to right direction.
+
+      If the input field and the help text (label, hint and error messages) are required to display in different directions the `right_to_left_help` attribute can be set as false to override the `right_to_left` attribute.
+    data:
+      label:
+        text: "Some input text that displays right to left with a label that displays left to right"
+      hint: "Some hint text that displays in the same text direction as the label"
+      name: rtl-input-text
+      value: "العربيَّة"
+      right_to_left: true
+      right_to_left_help: false
+      error_message: "An error message that displays in the same text direction as the label"

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

@@ -14,9 +14,10 @@ accessibility_criteria: |
   - have a border colour contrast ratio of more than 4.5:1 with its background to be visually distinct
   - prevent screen readers from announcing the dismiss link icon
 
-
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

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

@@ -59,3 +59,20 @@ examples:
       html_for: "id-radio"
       hint_id: "id-radio"
       hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+  with_id:
+    description: 
+    data:
+      text: "Label with an ID"
+      id: "id-for-the-label"
+      html_for: "id-that-matches-input-6"
+  with_dir_attribute:
+    description: |
+      To allow the correct display of right to left languages.
+
+      When the `right_to_left` parameter is set to `true` any hint text displays in the same text direction as the label.
+    data:
+      text: "العربيَّة"
+      html_for: "id-that-matches-input-7"
+      hint_id: "should-match-aria-describedby-input"
+      hint_text: "Hint text displayed right to left"
+      right_to_left: true

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

@@ -7,6 +7,7 @@ govuk_frontend_components:
   - header
 accessibility_excluded_rules:
   - landmark-banner-is-top-level # The header element can not be top level in the examples
+  - duplicate-id # IDs will be duplicated in component examples list
   - duplicate-id-aria # IDs will be duplicated in component examples list
   - form-field-multiple-labels # Form labels will be ambiguous in component examples list
   - landmark-no-duplicate-banner # banners will be duplicated in component examples list

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

@@ -21,6 +21,8 @@ accessibility_criteria: |
 
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

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

@@ -306,3 +306,30 @@ examples:
               title: "Student loans: terms and conditions 2017 to 2018 (PDF, 136KB)"
             - title: The Student Room repaying your student loan
               url: https://www.thestudentroom.co.uk/content.php?r=5967-Repaying-your-student-loan
+  with_ga4_tracking:
+    description: Adds Google Analytics 4 tracking to the component, using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md).
+    data:
+      ga4_tracking: true
+      content_item:
+        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
+          topics:
+            - title: Apprenticeships, 14 to 19 education and training for work
+              base_path: /browse/education/find-course
+              document_type: topic
+            - title: Finding a job
+              base_path: /browse/working/finding-job
+              document_type: topic
+            - title: Apprenticeships
+              base_path: /topic/further-education-skills/apprenticeships
+              document_type: topic
+          topical_events:
+            - title: UK-China High-Level People to People Dialogue 2017
+              base_path: /government/topical-events/uk-china-high-level-people-to-people-dialogue-2017
+              document_type: topical_event

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

@@ -110,3 +110,34 @@ examples:
       name: "with_data_attrbutes"
       data:
         module: "some-awesome-module-here"
+  with_dir_attribute:
+    description: |
+      Allows the correct display of right to left languages.
+
+      By default the textarea element and the label both display text in a left to right direction.
+
+      When the `right_to_left` parameter of the textarea component is set to `true` all text desplays in a right to left direction.
+    data:
+      label:
+        text: "Some textarea text that displays right to left with a label that displays in the same direction"
+      hint: "Some hint text that displays in the same text direction as the label"
+      error_message: "An error message that displays in the same text direction as the label"
+      name: "rtl-textarea-text"
+      value: "العربيَّة"
+      right_to_left: true
+  with_separate_dir_attributes_for_field_and_help_text:
+    description: |
+      Allows the correct display of right to left languages.
+
+      By default the textarea element and the label both display text in a left to right direction.
+
+      If the textarea field and the help text (label, hint and error messages) are required to display in different directions the right_to_left_help attribute can be set as false to override the right_to_left attribute.
+    data:
+      label:
+        text: "Some textarea text that displays right to left with a label that displays left to right"
+      hint: "Some hint text that displays in the same text direction as the label"
+      error_message: "An error message that displays in the same text direction as the label"
+      name: rtl-textarea-text
+      value: "العربيَّة"
+      right_to_left: true
+      right_to_left_help: false

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

@@ -14,6 +14,8 @@ accessibility_criteria: |
     [Watch a screen reader pronounce text differently based on lang attribute](https://bit.ly/screenreaderpronunciation)
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

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

@@ -68,7 +68,7 @@
   # This seems to be a more reliable way to make sure the script is executed.
 %>
 
-<script>
+<%= javascript_tag nonce: true do -%>
   document.addEventListener("DOMContentLoaded", function () {
     var input = document.querySelector("#giraffe"),
       form = document.querySelector("#something-is-wrong")
@@ -80,4 +80,4 @@
       e.preventDefault();
     }
   });
-</script>
+<% end -%>

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

@@ -4,7 +4,7 @@
       <div class="gem-c-feedback__prompt-question-answer">
         <h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful") %></h2>
         <ul class="gem-c-feedback__option-list">
-          <li class="gem-c-feedback__option-list-item govuk-visually-hidden" style="display: none" hidden>
+          <li class="gem-c-feedback__option-list-item govuk-visually-hidden" hidden>
             <% # Maybe button exists only to try and capture clicks by bots %>
             <%= link_to "/contact/govuk", {
               class: 'gem-c-feedback__prompt-link',
@@ -13,7 +13,6 @@
                 'track-action' => 'ffMaybeClick'
               },
               role: 'button',
-              style: 'display: none',
               hidden: 'hidden',
               'aria-hidden': 'true',
             } do %>

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

@@ -13,8 +13,10 @@
        class="gem-c-metadata__definition-link govuk-!-display-none-print"
        data-controls="toggle-<%= toggle_id %>"
        data-expanded="false"
-       data-toggled-text="<%= t("components.metadata.toggle_less") %>">
-        <%= t("components.metadata.toggle_more", number: remaining.length) %>
+       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>

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

@@ -3,20 +3,23 @@
      aria-labelledby="related-nav-<%= section_title %>-<%= random %>"
      data-module="gem-toggle">
 
-  <% unless section_title === "related_items" %>
+  <% if section_title === "related_items" %>
+   <% heading_text = related_nav_helper.component_title %>
+  <% else %>
     <%=
       heading_class = related_nav_helper.section_css_class("gem-c-related-navigation__sub-heading", section_title)
       heading_data = { 'track-count' => related_nav_helper.section_data_track_count(:related_item_section) }
       heading_id = "related-nav-#{section_title}-#{random}"
       heading_level = related_nav_helper.section_heading_level
+      heading_text = related_nav_helper.construct_section_heading(section_title)
 
       content_tag(heading_level, id: heading_id, class: heading_class, data: heading_data) do
-        related_nav_helper.construct_section_heading(section_title)
+        heading_text
       end
     %>
   <% end %>
 
-  <ul class="gem-c-related-navigation__link-list" data-module="gem-track-click">
+  <ul class="gem-c-related-navigation__link-list">
     <% constructed_link_array = [] %>
 
     <% section_link_limit = related_nav_helper.calculate_section_link_limit(links) %>
@@ -24,6 +27,12 @@
     <% links.each.with_index(1) do |link, index| %>
       <%
         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",
+          index: "#{section_index}.#{index}",
+          section: heading_text,
+        } if ga4_tracking
         link_element = link_to(
           link[:text],
           link[:path],
@@ -37,7 +46,8 @@
             track_options: {
               dimension28: links.length.to_s,
               dimension29: link[:text]
-            }
+            },
+            ga4_link: ga4_attributes,
           }
         )
       %>
@@ -54,10 +64,10 @@
           class="gem-c-related-navigation__toggle"
           data-controls="toggle_<%= section_title %>"
           data-expanded="false"
-          data-toggled-text="<%= t("components.metadata.toggle_less") %>">
-          <%= t("components.metadata.toggle_more",
-                number: related_nav_helper.remaining_link_count(links),
-                default: "+ #{related_nav_helper.remaining_link_count(links)} more") %>
+          data-toggled-text="<%= t("common.toggle_less") %>">
+          <%= t("common.toggle_more",
+            show: t('common.show'),
+            number: related_nav_helper.remaining_link_count(links)) %>
         </a>
       </li>
 

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

@@ -23,9 +23,9 @@
     <%= yield :extra_headers %>
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body <%= 'hide-header-and-footer' if @preview %>">
-    <script>
+    <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-    </script>
+    <% end -%>
     <% if @preview %>
       <main id="wrapper" class="govuk-width-container">
         <%= yield %>

data/config/locales/ar.yml

@@ -1,12 +1,14 @@
 ---
 ar:
   common:
+    hide: إخفاء
+    show: إظهار
+    toggle_less: عرض أقل
+    toggle_more: زيادة بمقدار %{show} %{number}
     translations: الترجمات
   components:
     accordion:
-      hide: إخفاء
       hide_all: إخفاء كل الأقسام
-      show: إظهار
       show_all: إظهار كل الأقسام
       this_section_visually_hidden: " هذا القسم"
     article_schema:
@@ -42,8 +44,12 @@ ar:
       buttons:
         accept_cookies: قبول ملفات تعريف الارتباط الإضافية
         reject_cookies: رفض ملفات تعريف الارتباط الإضافية
-      confirmation_message_html: يمكنك %{link} في أي وقت.
-      confirmation_message_link: قم بتغيير إعدادات ملفات تعريف الارتباط الخاصة بك
+        view_cookies:
+      confirmation_message:
+        accepted:
+        html: يمكنك %{link} في أي وقت.
+        link: قم بتغيير إعدادات ملفات تعريف الارتباط الخاصة بك
+        rejected:
       hide: إخفاء هذه الرسالة
       text:
       - نحن نستخدم بعض ملفات تعريف الارتباط الأساسية لجعل هذا الموقع يعمل.
@@ -112,7 +118,10 @@ ar:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
@@ -126,8 +135,6 @@ ar:
       part_of: جزء من
       published: منشورة
       see_all_updates: اطلع على كل التحديثات
-      toggle_less: عرض أقل
-      toggle_more: زيادة بمقدار + %{number}
     modal_dialogue:
       close_modal: إغلاق مربع الحوار المشروط
     notice:

data/config/locales/az.yml

@@ -1,12 +1,14 @@
 ---
 az:
   common:
+    hide: Gizlət
+    show: Göstər
+    toggle_less: Daha azını göstər
+    toggle_more: "%{show} %{number} daha çox"
     translations: Tərcümələr
   components:
     accordion:
-      hide: Gizlət
       hide_all: Bütün bölmələri gizlət
-      show: Göstər
       show_all: Bütün bölmələri göstər
       this_section_visually_hidden: " bu bölmə"
     article_schema:
@@ -38,8 +40,12 @@ az:
       buttons:
         accept_cookies: Əlavə kukilər qəbul edin
         reject_cookies: Əlavə kukilərdən imtina edin
-      confirmation_message_html: İstənilən vaxt %{link}.
-      confirmation_message_link: Kuki parametrlərinizi dəyişdirin
+        view_cookies:
+      confirmation_message:
+        accepted:
+        html: İstənilən vaxt %{link}.
+        link: Kuki parametrlərinizi dəyişdirin
+        rejected:
       hide: Bu mesajı gizlət
       text:
       - Biz bu vebsaytın işləməsini təmin etmək üçün bəzi zəruri kukilərdən istifadə edirik.
@@ -109,7 +115,10 @@ az:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
@@ -123,8 +132,6 @@ az:
       part_of: Hissə
       published: Dərc edilib
       see_all_updates: Bütün yeniləmələrə baxın
-      toggle_less: Daha azını göstər
-      toggle_more: "+ %{number} daha çox"
     modal_dialogue:
       close_modal: Modal dialoqu bağla
     notice:

data/config/locales/be.yml

@@ -1,12 +1,14 @@
 ---
 be:
   common:
+    hide: Схаваць
+    show: Паказаць
+    toggle_less: Паказаць меньш
+    toggle_more: "%{show} %{number} болей"
     translations: Пераклады
   components:
     accordion:
-      hide: Схаваць
       hide_all: Схаваць усе секцыi
-      show: Паказаць
       show_all: Паказаць усе секцыi
       this_section_visually_hidden: " гэта секцыя"
     article_schema:
@@ -40,8 +42,12 @@ be:
       buttons:
         accept_cookies: Прыняць дадатковыя файлы cookie
         reject_cookies: Адхіліць дадатковыя файлы cookie
-      confirmation_message_html: Вы можаце %{link} у любы час.
-      confirmation_message_link: змяніць налады файлаў cookie
+        view_cookies:
+      confirmation_message:
+        accepted:
+        html: Вы можаце %{link} у любы час.
+        link: змяніць налады файлаў cookie
+        rejected:
       hide: Схаваць гэта паведамленне
       text:
       - Мы выкарыстоўваем некаторыя асноўныя файлы cookie для забеспячэння працы гэтага сайта.
@@ -115,7 +121,10 @@ be:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
@@ -129,8 +138,6 @@ be:
       part_of: Частка
       published: Апублікаваны
       see_all_updates: Паглядзець усе абнаўленні
-      toggle_less: Паказаць меньш
-      toggle_more: "+ %{number} болей"
     modal_dialogue:
       close_modal: Зачыніць мадальны дыялог
     notice:

data/config/locales/bg.yml

@@ -1,12 +1,14 @@
 ---
 bg:
   common:
+    hide: Скриване
+    show: Показване
+    toggle_less: Показване на по-малко
+    toggle_more: "%{show} %{number} повече"
     translations: Translations
   components:
     accordion:
-      hide: Скриване
       hide_all: Скриване на всички раздели
-      show: Показване
       show_all: Показване на всички раздели
       this_section_visually_hidden: " този раздел"
     article_schema:
@@ -38,8 +40,12 @@ bg:
       buttons:
         accept_cookies: Приемане на допълнителни бисквитки
         reject_cookies: Отказване от допълнителни бисквитки
-      confirmation_message_html: Можете да %{link} по всяко време.
-      confirmation_message_link: Промяна на настройките за бисквитките
+        view_cookies:
+      confirmation_message:
+        accepted:
+        html: Можете да %{link} по всяко време.
+        link: Промяна на настройките за бисквитките
+        rejected:
       hide: Скриване на това съобщение
       text:
       - Използваме някои основни бисквитки
@@ -113,7 +119,10 @@ bg:
       menu_toggle_label:
         hide:
         show:
-      navigation_links:
+      navigation_link:
+        href:
+        label:
+      navigation_links_columns:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
@@ -127,8 +136,6 @@ bg:
       part_of: Част от
       published: Публикуван
       see_all_updates: Вижте всички актуализации
-      toggle_less: Показване на по-малко
-      toggle_more: "+ %{number} повече"
     modal_dialogue:
       close_modal: Затваряне на модалния диалог
     notice: