govuk_publishing_components 29.13.0 → 29.15.1

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

@@ -1,18 +1,18 @@
 <% if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page) %>
-<nav
-  class="gem-c-pagination"
-  role="navigation"
-  aria-label="<%= t("components.previous_and_next_navigation.pagination") %>"
->
-  <ul class="gem-c-pagination__list" data-module="gem-track-click">
+  <nav
+    class="govuk-pagination govuk-pagination--block"
+    role="navigation"
+    aria-label="<%= t("components.previous_and_next_navigation.pagination") %>"
+  >
     <% if local_assigns.include?(:previous_page) %>
       <%
-        link_text_classes = %w[gem-c-pagination__link-text]
-        link_text_classes << "gem-c-pagination__link-text--decorated" unless previous_page[:label].present?
+        title = previous_page[:title] || t("components.previous_and_next_navigation.previous")
+        link_text_classes = %w[govuk-pagination__link-title]
+        link_text_classes << "govuk-pagination__link-title--decorated" unless previous_page[:label].present?
       %>
-      <li class="gem-c-pagination__item gem-c-pagination__item--previous">
-        <a href="<%= previous_page[:url] %>"
-          class="govuk-link gem-c-pagination__link"
+      <div class="govuk-pagination__prev">
+        <a class="govuk-link govuk-pagination__link" 
+          href="<%= previous_page[:url] %>" 
           rel="prev"
           data-track-category="contentsClicked"
           data-track-action="previous"
@@ -20,27 +20,27 @@
           data-track-dimension="previous"
           data-track-dimension-index="29"
         >
-          <span class="gem-c-pagination__link-title">
-            <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
-              <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
-            </svg>
-            <%= tag.span(previous_page[:title], class: link_text_classes) %>
-          </span>
+          <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+            <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+          </svg>
+          <%= tag.span(title, class: link_text_classes) %>
           <% if previous_page[:label].present? %>
-            <span class="gem-c-pagination__link-divider visually-hidden">:</span>
-            <span class="gem-c-pagination__link-label"><%= previous_page[:label] %></span>
+            <span class="govuk-visually-hidden">:</span>
+            <span class="govuk-pagination__link-label"><%= previous_page[:label] %></span>
           <% end %>
         </a>
-      </li>
+      </div>
     <% end %>
+
     <% if local_assigns.include?(:next_page) %>
       <%
-        link_text_classes = %w[gem-c-pagination__link-text]
-        link_text_classes << "gem-c-pagination__link-text--decorated" unless next_page[:label].present?
+        title = next_page[:title] || t("components.previous_and_next_navigation.next")
+        link_text_classes = %w[govuk-pagination__link-title]
+        link_text_classes << "govuk-pagination__link-title--decorated" unless next_page[:label].present?
       %>
-      <li class="gem-c-pagination__item gem-c-pagination__item--next">
-        <a href="<%= next_page[:url] %>"
-          class="govuk-link gem-c-pagination__link"
+      <div class="govuk-pagination__next">
+        <a class="govuk-link govuk-pagination__link" 
+          href="<%= next_page[:url] %>" 
           rel="next"
           data-track-category="contentsClicked"
           data-track-action="next"
@@ -48,19 +48,16 @@
           data-track-dimension="next"
           data-track-dimension-index="29"
         >
-          <span class="gem-c-pagination__link-title">
-            <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
-              <path d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
-            </svg>
-            <%= tag.span(next_page[:title], class: link_text_classes) %>
-          </span>
+          <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+            <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+          </svg>
+          <%= tag.span(title, class: link_text_classes) %>
           <% if next_page[:label].present? %>
-            <span class="gem-c-pagination__link-divider visually-hidden">:</span>
-            <span class="gem-c-pagination__link-label"><%= next_page[:label] %></span>
+            <span class="govuk-visually-hidden">:</span>
+            <span class="govuk-pagination__link-label"><%= next_page[:label] %></span>
           <% end %>
         </a>
-      </li>
+      </div>
     <% end %>
-  </ul>
-</nav>
+  </nav>
 <% end %>

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

@@ -2,46 +2,77 @@
   caption ||= nil
   head ||= []
   rows ||= []
-  first_cell_is_header ||=false
+  first_cell_is_header ||= false
   caption_classes ||= nil
-  sortable ||=false
+  sortable ||= false
+  filterable ||= false
+  label ||= t("components.table.filter_label")
+
+  table_id = "table-id-#{SecureRandom.hex(4)}"
+  filter_count_id = "filter-count-id-#{SecureRandom.hex(4)}"
 %>
 
-<%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, {
-    sortable: sortable,
-    caption_classes: caption_classes
-  }) do |t| %>
-
-  <% if head.any? %>
-    <%= t.head do %>
-      <% head.each_with_index do |item, cellindex| %>
-        <%= t.header item[:text], {
-          format: item[:format],
-          href: item[:href],
-          data_attributes: item[:data_attributes],
-          sort_direction: item[:sort_direction]
-        } %>
+<% @table = capture do %>
+  <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, {
+      sortable: sortable,
+      filterable: filterable,
+      caption_classes: caption_classes, 
+      table_id: table_id
+    }) do |t| %>
+
+    <% if head.any? %>
+      <%= t.head do %>
+        <% head.each_with_index do |item, cellindex| %>
+          <%= t.header item[:text], {
+            format: item[:format],
+            href: item[:href],
+            data_attributes: item[:data_attributes],
+            sort_direction: item[:sort_direction]
+          } %>
+        <% end %>
       <% end %>
     <% end %>
-  <% end %>
 
-  <%= t.body do %>
-    <% rows.each_with_index do |row, rowindex| %>
-      <%= t.row do %>
-        <% row.each_with_index do |cell, cellindex| %>
-          <% if cellindex == 0 && first_cell_is_header %>
-            <%= t.header cell[:text], {
-              scope: "row",
-              format: cell[:format]
-            } %>
-          <% else %>
-            <%= t.cell cell[:text], {
-              format: cell[:format]
-            } %>
+    <%= t.body do %>
+      <% rows.each_with_index do |row, rowindex| %>
+        <%= t.row do %>
+          <% row.each_with_index do |cell, cellindex| %>
+            <% if cellindex == 0 && first_cell_is_header %>
+              <%= t.header cell[:text], {
+                scope: "row",
+                format: cell[:format]
+              } %>
+            <% else %>
+              <%= t.cell cell[:text], {
+                format: cell[:format]
+              } %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
+<% end %>
+
+<% if filterable %>
+  <div data-module="table">
+    <div class="js-gem-c-table__filter govuk-!-display-none">
+      <%= render "govuk_publishing_components/components/input", {
+        label: {
+          text: label
+        },
+        name: "filter",
+        controls: table_id,
+        aria_described_by: filter_count_id,
+      } %>
+
+      <p id="<%= filter_count_id %>" aria-live="polite" class="js-filter-count govuk-visually-hidden" data-count-text="<%= t("components.table.filter_count") %>"></p>
+    </div>
+
+    <%= @table %>
 
+    <p class="govuk-body govuk-!-display-none js-gem-c-table__message"><%= t("components.table.filter_message") %></p>
+  </div>
+<% else %>
+  <%= @table %>
 <% end %>

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

@@ -189,7 +189,7 @@ examples:
 
       Each item can also have a `data_attributes` hash. These `data_attributes` are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
 
-      Data attributes can also be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created).
+      Data attributes can also be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). If `track_options` within `data_attributes_show_all` is set, then it is possible to pass a custom dimension when 'Show/Hide all' is clicked.
     data:
       data_attributes:
           gtm: gtm-accordion
@@ -197,6 +197,7 @@ examples:
       data_attributes_show_all:
         gtm-event-name: example
         gtm-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
+        tracking-options: "{ 'dimension114': 1 }"
       items:
         - heading:
             text: Writing well for the web

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

@@ -78,6 +78,14 @@ examples:
       light_text: true
     context:
       dark_background: true
+  white_arrow:
+    data:
+      text: Find out how to stay safe and help prevent the spread
+      href: "/something"
+      white_arrow: true
+      light_text: true
+    context:
+      dark_background: true
   blue_arrow:
     data:
       text: Find out how to stay safe and help prevent the spread

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

@@ -18,4 +18,4 @@ examples:
     data:
       href: '#'
       data_attributes:
-        tracking: GT-1234
+        an_attribute: the value

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

@@ -36,8 +36,8 @@ examples:
   with_data_attributes:
     description: |
       If a `href` attribute is present, `data_attributes` will apply to the `span` containing the number value (see below).
-      
-      This will also not automatically apply a `gem-track-click` module attribute if the data attributes pertain to click tracking. Remember to apply this outside the component call in a surrounding element, if using.
+
+      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:
       number: 23
       label: Ministerial departments

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

@@ -2,9 +2,9 @@ name: "Breadcrumbs"
 description: "Navigational breadcrumbs, showing page hierarchy"
 body: |
   Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
-  Links have tracking data but links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`
+  Links have tracking data but links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.
 
-   We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
+  We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
 shared_accessibility_criteria:
   - link
 accessibility_criteria:

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

@@ -23,92 +23,93 @@ govuk_frontend_components:
 examples:
   default:
     data:
-      text: "Submit"
+      text: Submit
   link_button:
     data:
-      text: "I'm really a link sssh"
-      href: "#"
+      text: I'm really a link sssh
+      href: '#'
   link_button_target_blank:
     data:
-      text: "I'm really a link sssh"
-      href: "http://www.gov.uk"
-      target: "_blank"
+      text: I'm really a link sssh
+      href: http://www.gov.uk
+      target: _blank
   with_type:
     description: Buttons default to having a type of submit, but in some cases it may be desirable to have a different type.
     data:
-      text: "Button type button"
-      type: "button"
+      text: Button type button
+      type: button
   start_now_button:
     data:
-      text: "Start now"
-      href: "#"
+      text: Start now
+      href: '#'
       start: true
-      rel: "external"
+      rel: external
   secondary_button:
     data:
-      text: "Secondary button"
+      text: Secondary button
       secondary: true
   secondary_quiet_button:
     data:
-      text: "Secondary quiet button"
+      text: Secondary quiet button
       secondary_quiet: true
   secondary_solid_button:
     data:
-      text: "Secondary solid button"
+      text: Secondary solid button
       secondary_solid: true
   destructive_button:
     data:
-      text: "Destructive button"
+      text: Destructive button
       destructive: true
   start_now_button_with_info_text:
     data:
-      text: "Start now"
-      href: "#"
+      text: Start now
+      href: '#'
       start: true
-      info_text: "Sometimes you want to explain where a user is going to."
+      info_text: Sometimes you want to explain where a user is going to.
   with_margin_bottom:
     description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
     data:
-      text: "Submit"
+      text: Submit
       margin_bottom: 6
   start_now_button_with_info_text_and_margin_bottom:
     description: When the component requires margin bottom and has info text, the margin is applied to the info text.
     data:
-      text: "Start now"
-      href: "#"
+      text: Start now
+      href: '#'
       start: true
-      info_text: "Sometimes you want to explain where a user is going to and have a margin bottom"
+      info_text: Sometimes you want to explain where a user is going to and have a margin bottom
       margin_bottom: 6
   extreme_text:
     data:
-      text: "I'm a button with lots of text to test how the component scales at extremes."
-      href: "#"
+      text: I'm a button with lots of text to test how the component scales at extremes.
+      href: '#'
   extreme_text_start_now_button:
     data:
-      text: "I'm a start now button with lots of text to test how the component scales at extremes."
+      text: I'm a start now button with lots of text to test how the component scales at extremes.
       start: true
-      href: "#"
+      href: '#'
   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:
-      text: "Track this!"
+      text: Track this!
       margin_bottom: true
       data_attributes: {
-        "module": "cross-domain-tracking",
-        "tracking-code": "GA-123ABC",
-        "tracking-name": "transactionTracker"
+        module: cross-domain-tracking,
+        tracking-code: GA-123ABC,
+        tracking-name: transactionTracker
       }
   with_title_attribute:
     data:
-      text: "Click me"
+      text: Click me
       margin_bottom: true
-      title: "A button to click"
+      title: A button to click
   inline_layout:
     description: Buttons will display adjacent to each other until mobile view, when they will appear on top of each other.
     embed: |
       <button class="gem-c-button govuk-button gem-c-button--inline">First button</button>
       <%= component %>
     data:
-      text: "Second button"
+      text: Second button
       inline_layout: true
   with_name_and_value_set:
     description: |
@@ -116,15 +117,15 @@ examples:
 
       Please note that Internet Explorer 6 and 7 have **breaking bugs** when submitting a form with multiple buttons - this can [change what value is submitted by the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Notes). Make sure to check your user needs and browser usage.
     data:
-      text: "This is the button text"
-      value: "this_is_the_value"
-      name: "this_is_the_name"
+      text: This is the button text
+      value: this_is_the_value
+      name: this_is_the_name
   with_js_classes:
     description: Use `js-` prefixed classes only as interaction hooks – to query and operate on elements via JavaScript
     data:
-      text: "Button"
-      classes: "js-selector-1 js-selector-2"
+      text: Button
+      classes: js-selector-1 js-selector-2
   with_aria_label:
     data:
-      text: "Button"
-      aria_label: "Button with custom label"
+      text: Button
+      aria_label: Button with custom label

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

@@ -119,6 +119,8 @@ examples:
   with_data_attributes:
     description: |
       Data attributes can be passed to individual links within the component as shown.
+
+      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:
       items:
         - link: