govuk_publishing_components 24.2.0 → 24.5.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/accordion.yml

@@ -274,6 +274,35 @@ examples:
             text: "How people read"
           content:
             html: "<p class='govuk-body'>This is the content for How people read.</p>"
+  with_the_anchor_link_navigation:
+    description: |
+      Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
+
+      This feature automatically opens accordions when an anchor link is clicked within another accordion that links to either the id of an accordion section heading or an id within the content of an accordion. This will also automatically navigate to and open accordions on page load using the same rules.
+
+      This feature won't be used if the `anchor_navigation` flag isn't passed as true to mitigate performance risk from event listeners on a large number of links.
+
+      Unlike with the accordion-wide custom id attribute, any ids passed to accordion headings as part of this feature aren't stored in `localStorage` so don't need to be unique across your domain, but **should still be unique in the context of the page**.
+    data:
+      anchor_navigation: true
+      items:
+        - heading:
+            text: "Writing well for the web"
+            id: "writing-well-for-the-web"
+          content:
+            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+        - heading:
+            text: "Writing well for specialists"
+          content:
+            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+        - heading:
+            text: "Know your audience"
+          content:
+            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+        - heading:
+            text: "How people read"
+          content:
+            html: "<p class='govuk-body'>This is the content for How people read.</p>"
   condensed_layout:
     description: |
       This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.

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/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

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

@@ -1,12 +1,6 @@
 module GovukPublishingComponents
   module Presenters
     class HtmlPublicationSchema < FaqPageSchema
-      attr_reader :page
-
-      def initialize(page)
-        @page = page
-      end
-
       def structured_data
         return ArticleSchema.new(page).structured_data if less_than_two_headings_of_any_one_type?
 
@@ -55,7 +49,7 @@ module GovukPublishingComponents
       # {:a => :b, :b => :c}
       def pairs_hash(array)
         all_but_last = array[0..-2]
-        all_but_first = array[1..-1]
+        all_but_first = array[1..]
         pairs = [all_but_last, all_but_first].transpose
         Hash[pairs]
       end

data/lib/govuk_publishing_components/presenters/meta_tags.rb

@@ -20,8 +20,7 @@ module GovukPublishingComponents
         meta_tags = add_organisation_tags(meta_tags)
         meta_tags = add_political_tags(meta_tags)
         meta_tags = add_taxonomy_tags(meta_tags)
-        meta_tags = add_step_by_step_tags(meta_tags)
-        meta_tags
+        add_step_by_step_tags(meta_tags)
       end
 
     private

data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb

@@ -58,14 +58,14 @@ module GovukPublishingComponents
           I18n.t(
             "components.related_#{@context}_navigation." + section_title,
             default: [
-              I18n.t("components.related_navigation." + section_title),
+              I18n.t("components.related_navigation.#{section_title}"),
               section_title.tr("_", " "),
             ],
           )
         end
       end
 
-      def section_css_class(css_class, section_title, link = {}, link_is_inline = false)
+      def section_css_class(css_class, section_title, link: {}, link_is_inline: false)
         css_classes = [css_class]
         css_classes << "#{css_class}--#{@context}" unless @context.nil?
         css_classes << "#{css_class}--inline" if link_is_inline