govuk_publishing_components 24.3.0 → 24.6.0

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

@@ -9,7 +9,7 @@
   taxonomy_list_helper = GovukPublishingComponents::Presenters::TaxonomyListHelper.new(image_cards)
 %>
 <% if highlight_box || document_list || image_cards %>
-  <ul class="gem-c-taxonomy-list" data-module="track-click">
+  <ul class="gem-c-taxonomy-list" data-module="gem-track-click">
     <% if image_cards %>
       <% taxonomy_list_helper.image_card_data.each do |image_card| %>
         <li class="gem-c-taxonomy-list__item">

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

@@ -7,7 +7,7 @@
   <nav role="navigation"
     class="gem-c-translation-nav <%= translation_helper.classes %> <%= brand_helper.brand_class %>"
     aria-label="<%= t("common.translations") %>"
-    <%= "data-module=\"track-click\"" if translation_helper.tracking_is_present? %>
+    <%= "data-module=\"gem-track-click\"" if translation_helper.tracking_is_present? %>
   >
     <ul class="gem-c-translation-nav__list">
       <% translation_helper.translations.each.with_index do |translation, i| %>

data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb

@@ -3,7 +3,7 @@
 <% link_path = t("components.related_navigation.transition.link_path") %>
 
 <% data_attributes = {
-  "module": "track-click",
+  "module": "gem-track-click",
   "track-category": "relatedLinkClicked",
   "track-action": "1.0 Transition",
   "track-label": link_path,

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

@@ -97,3 +97,25 @@ examples:
         url: '/browse/abroad'
       - title: 'Travel abroad'
         url: '/browse/abroad/travel-abroad'
+  with_border:
+    description: "Set a border below the breadcrumb. Off by default."
+    data:
+      border: "bottom"
+      breadcrumbs:
+      - title: "Section"
+        url: "/section"
+      - title: "Sub-section"
+        url: "/section/sub-section"
+      - title: "Sub-sub-section"
+        url: "/section/sub-section/sub-section"
+  with_border_and_collapse_on_mobile:
+    data:
+      border: "bottom"
+      collapse_on_mobile: true
+      breadcrumbs:
+      - title: "Section"
+        url: "/section"
+      - title: "Sub-section"
+        url: "/section/sub-section"
+      - title: "Sub-sub-section"
+        url: "/section/sub-section/sub-section"

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

@@ -45,7 +45,7 @@ examples:
     data:
       padding_top: false
       block: |
-        <div class="gem-c-breadcrumbs " data-module="track-click">
+        <div class="gem-c-breadcrumbs " data-module="gem-track-click">
           <ol>
             <li class="">
                 <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="gem-c-breadcrumbs--inverse" aria-current="false" href="/section">Section</a>

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

@@ -184,7 +184,7 @@ examples:
         text: "Blue"
   with_custom_heading_size:
     description: |
-      This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed. 
+      This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed.
 
       If the is_page_heading option is true and heading_size is not set, the text size will be xl.
     data:
@@ -198,6 +198,19 @@ examples:
         text: "Green"
       - value: "blue"
         text: "Blue"
+  with_custom_heading_level:
+    description: This allows the heading level to be changed. Heading level will default to `h2` if nothing is passed.
+    data:
+      name: "radio-group-description"
+      heading: "What is your favourite colour?"
+      heading_level: 3
+      items:
+      - value: "red"
+        text: "Red"
+      - value: "green"
+        text: "Green"
+      - value: "blue"
+        text: "Blue"
   with_hint_text_on_radios:
     data:
       name: "radio-group-hint-text"

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

@@ -0,0 +1,85 @@
+name: Reorderable list
+description: A list of items that can be reordered
+body: |
+  List items can be reordered by drag and drop or by using the up/down buttons.
+  On small viewports the drag and drop feature is disabled to prevent being triggered
+  when scrolling on touch devices.
+
+  This component uses SortableJS - a JavaScript library for drag and drop interactions.
+  When JavaScript is disabled a set of inputs will be shown allowing users to provide
+  an order index for each item.
+
+  When this component is embedded into a form and that form is submit you will receive a
+  parameter of `ordering` (which can be customised with the `input_name` option).
+  This will contain item ids and ordering positions in a hash.
+
+  For example, for two items with id "a" and "b" that are ordered accordingly,
+  you'd receive a submission of `ordering[a]=1&ordering[b]=2`, which Rails can
+  translate to `"ordering" => { "a" => "1", "b" => "2" }`.
+
+accessibility_criteria: |
+  Buttons in this component must:
+
+  * be keyboard focusable
+  * inform the user about which item they operate on
+  * preserve focus after interacting with them
+examples:
+  default:
+    data:
+      items:
+        - id: "ce99dd60-67dc-11eb-ae93-0242ac130002"
+          title: "Budget 2018"
+        - id: "d321cb86-67dc-11eb-ae93-0242ac130002"
+          title: "Budget 2018 (web)"
+        - id: "63a6d29e-6b6d-4157-9067-84c1a390e352"
+          title: "Impact on households: distributional analysis to accompany Budget 2018"
+        - id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
+          title: "Table 2.1: Budget 2018 policy decisions"
+        - id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
+          title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
+  with_description:
+    data:
+      items:
+        - id: "ce99dd60-67dc-11eb-ae93-0242ac130002"
+          title: "Budget 2018"
+          description: "PDF, 2.56MB, 48 pages"
+        - id: "d321cb86-67dc-11eb-ae93-0242ac130002"
+          title: "Budget 2018 (web)"
+          description: "HTML attachment"
+        - id: "63a6d29e-6b6d-4157-9067-84c1a390e352"
+          title: "Impact on households: distributional analysis to accompany Budget 2018"
+          description: "PDF, 592KB, 48 pages"
+        - id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
+          title: "Table 2.1: Budget 2018 policy decisions"
+          description: "MS Excel Spreadsheet, 248KB"
+        - id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
+          title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
+          description: "MS Excel Spreadsheet, 248KB"
+  within_form:
+    embed: |
+      <form>
+        <%= component %>
+        <button class="govuk-button" type="submit">Save order</button>
+      </form>
+    data:
+      items:
+        - id: "ce99dd60-67dc-11eb-ae93-0242ac130002"
+          title: "Budget 2018"
+        - id: "d321cb86-67dc-11eb-ae93-0242ac130002"
+          title: "Budget 2018 (web)"
+        - id: "63a6d29e-6b6d-4157-9067-84c1a390e352"
+          title: "Impact on households: distributional analysis to accompany Budget 2018"
+        - id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
+          title: "Table 2.1: Budget 2018 policy decisions"
+        - id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
+          title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
+  with_custom_input_name:
+    data:
+      input_name: "attachments[ordering]"
+      items:
+        - id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
+          title: "Budget 2018"
+          description: "PDF, 2.56MB, 48 pages"
+        - id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
+          title: "Budget 2020"
+          description: "PDF, 2.56MB, 48 pages"

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

@@ -51,6 +51,16 @@ examples:
   with_aria_controls_attribute:
     description: |
       The aria-controls attribute is a 'relationship attribute' which denotes which elements in a page an interactive element or set of elements has control over and affects.
+
       For places like the finders where the page is updated dynamically after value changes to the input.
     data:
       aria_controls: "wrapper"
+  with_custom_button_text:
+    description: |
+      The search box component may be used multiple times on a page -- for example, on a [guidance and regulation finder results page](https://www.gov.uk/search/guidance-and-regulation?keywords=bananas&order=relevance) there is both the sitewide search in the header and also for the specific finder.
+
+      To avoid confusion, the text inside the button should be different for each form. This can be done by setting the `button_text` parameter.
+
+      This is visually hidden text -- to check for changes use a screen reader or inspect the button element.
+    data:
+      button_text: "Search absolutely everywhere"

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

@@ -35,6 +35,7 @@ examples:
       borderless: true
 
   with_edit_on_section:
+    description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
     data:
       <<: *default-example-data
       edit:
@@ -43,6 +44,7 @@ examples:
           gtm: "edit-title-summary-body"
 
   with_delete_on_section:
+    description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
     data:
       <<: *default-example-data
       delete:
@@ -51,6 +53,7 @@ examples:
           gtm: "delete-title-summary-body"
 
   with_edit_and_delete_on_section:
+    description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
     data:
       <<: *default-example-data
       edit:
@@ -62,32 +65,28 @@ examples:
         data_attributes:
           gtm: "delete-title-summary-body"
 
+  with_customised_links:
+    description: |
+      For all links shown in the component, visually hidden text containing the name of the thing it refers to is automatically appended. This offers a better experience for screen reader users by making the link text unique and more explicit. In the example below, the link text would be `Change Title, summary and body`.
+
+      The text of the link can be customised using the `link_text` option. Take care that the provided `link_text` still makes sense to screen readers when combined with the title. For instance, `Reorder` link text and `Items` title becomes `Reorder Items`, which reads fine, but link text of `Summary` would read as `Summary Items`, which does not make sense.
+
+      To override this behaviour, use `link_text_no_enhance` on the link in question, as shown. This will remove the visually hidden text, allowing you to add your own. The component will render a `span` element with a class of `govuk-visually-hidden` included in a passed [capture block](https://apidock.com/rails/ActionView/Helpers/CaptureHelper/capture) as the `link_text` parameter.
+    data:
+      <<: *default-example-data
+      edit:
+        href: "edit-title-summary-body"
+        link_text: Edit this document <span class="govuk-visually-hidden">my hidden text for screenreaders</span>
+        link_text_no_enhance: true
+
   with_custom_section_heading:
     data:
       <<: *default-example-data
       heading_level: 2
       heading_size: l
 
-  with_custom_link_on_section:
-    description: |
-      Take care that the provided `link_text` still makes sense to screen readers when combined with the title.
-      For instance, `Reorder` link text and `Items` title becomes `Reorder Items`, which reads fine, but link text
-      of `Summary` would read as `Summary Items`, which does not make sense.
-    data:
-      edit:
-        href: "custom-link"
-        link_text: "Reorder"
-      title: "Items"
-      items:
-      - field: "Item 1"
-        value: "Value 2"
-      - field: "Item 2"
-        value: "Value 2"
-      - field: "Item 3"
-        value: "Value 3"
-
   with_edit_on_individual_items:
-    description: The link text can be optionally modified using the 'link_text' parameter, as for the edit link in previous examples.
+    description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
     data:
       title: "Title, summary and body"
       items:
@@ -113,6 +112,21 @@ examples:
           href: "delete-body"
           link_text: "Remove"
 
+  wide_title_layout:
+    description: Allows a slightly adjusted layout for longer text in the field name.
+    data:
+      title: Privacy settings
+      wide_title: true
+      items:
+      - field: "GOV.UK can use cookies while you’re signed in"
+        value: "No"
+        edit:
+          href: "edit-cookies"
+      - field: "GOV.UK can send you feedback emails"
+        value: "Yes"
+        edit:
+          href: "edit-feedback"
+
   with_block:
     description: Use the summary list with a block when you need to show an empty state message or load another component.
     data:

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

@@ -1,3 +1,5 @@
+<% navigation_aria_label ||= "Top level" %>
+
 <% 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 } do %>

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

@@ -1,8 +1,22 @@
-<button class="search-toggle js-header-toggle" data-search-toggle-for="search">Show search</button>
-<form id="search" class="gem-c-layout-header__search-form govuk-clearfix" action="/search" method="get" role="search">
+<button
+  class="search-toggle js-header-toggle"
+  data-search-toggle-for="search"
+  data-show-text="<%= t("components.layout_header.show_button") %>"
+  data-hide-text="<%= t("components.layout_header.hide_button") %>"
+>
+  <%= t("components.layout_header.show_button") %>
+</button>
+<form
+  action="/search"
+  class="gem-c-layout-header__search-form govuk-clearfix"
+  id="search"
+  method="get"
+  role="search"
+>
   <%= render "govuk_publishing_components/components/search", {
+    button_text: t("components.layout_header.search_button"),
     id: "site-search-text",
+    margin_bottom: 0,
     no_border: true,
-    margin_bottom: 0
   } %>
 </form>

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

@@ -16,7 +16,7 @@
     %>
   <% end %>
 
-  <ul class="gem-c-related-navigation__link-list" data-module="track-click">
+  <ul class="gem-c-related-navigation__link-list" data-module="gem-track-click">
     <% constructed_link_array = [] %>
 
     <% section_link_limit = related_nav_helper.calculate_section_link_limit(links) %>
@@ -26,7 +26,7 @@
         link_element = link_to(
           link[:text],
           link[:path],
-          class: related_nav_helper.section_css_class("gem-c-related-navigation__section-link", section_title, link, (index >= section_link_limit)),
+          class: related_nav_helper.section_css_class("gem-c-related-navigation__section-link", section_title, link: link, link_is_inline: (index >= section_link_limit)),
           rel: link[:rel],
           lang: shared_helper.t_locale_check(link[:locale]),
           data: {

data/config/locales/en.yml

@@ -4,11 +4,11 @@
 #
 # To use the locales, use `I18n.t`:
 #
-#     I18n.t 'hello'
+#     I18n.t "hello"
 #
 # In views, this is aliased to just `t`:
 #
-#     <%= t('hello') %>
+#     <%= t("hello") %>
 #
 # To use a different locale, set it with `I18n.locale`:
 #
@@ -31,11 +31,11 @@ en:
     article_schema:
       scoped_search_description: "Search within %{title}"
     back_link:
-      back: 'Back'
+      back: "Back"
     checkboxes:
-      or: 'or'
+      or: "or"
     contents_list:
-      contents: Contents
+      contents: "Contents"
     feedback:
       is_this_page_useful: "Is this page useful?"
       yes: "Yes"
@@ -54,15 +54,14 @@ en:
       what_wrong: "What went wrong?"
       send_me_survey: "Send me the survey"
       send: "Send"
-    input:
-      show: Show
-      hide: Hide
-      announce_show: Your password is shown
-      announce_hide: Your password is hidden
+    layout_header:
+      search_button: "Search GOV.UK"
+      show_button: "Show search"
+      hide_button: "Hide search"
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:
-      or: 'or'
+      or: "or"
     related_navigation:
       collections: "Collection"
       external_links: "Elsewhere on the web"
@@ -81,15 +80,26 @@ en:
         link_path: "/transition"
         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.
+        red: "Check"
+        amber: "Change"
+        green: "Go"
+        aria_label: "Brexit campaign slogan, Check, Change, Go."
     related_footer_navigation:
       collections: "Collections"
       policies: "Policies"
       statistical_data_sets: "Statistical data sets"
       topical_events: "Topical events"
+    search_box:
+      search_button: "Search"
+      label: "Search on GOV.UK"
+      input_title: "Search"
+    show_password:
+      show: "Show"
+      hide: "Hide"
+      show_password: "Show password"
+      hide_password: "Hide password"
+      announce_show: "Your password is shown"
+      announce_hide: "Your password is hidden"
     print_link:
       text: "Print this page"
     skip_link:

data/lib/govuk_publishing_components/app_helpers/table_helper.rb

@@ -15,6 +15,7 @@ module GovukPublishingComponents
           yield(builder)
         end
       end
+
       class TableBuilder
         include ActionView::Helpers::UrlHelper
         include ActionView::Helpers::TagHelper
@@ -57,7 +58,7 @@ module GovukPublishingComponents
 
         def cell(str, opt = {})
           classes = %w[govuk-table__cell]
-          classes << "govuk-table__cell--" + opt[:format] if opt[:format]
+          classes << "govuk-table__cell--#{opt[:format]}" if opt[:format]
           classes << "govuk-table__cell--empty" unless str
           str ||= "Not set"
           tag.td str, class: classes

data/lib/govuk_publishing_components/presenters/machine_readable/faq_page_schema.rb

@@ -88,7 +88,7 @@ module GovukPublishingComponents
       end
 
       def section_url(anchor)
-        return page_url + "#" + anchor if anchor.present?
+        return "#{page_url}##{anchor}" if anchor.present?
 
         page_url
       end