govuk_publishing_components 24.3.1 → 24.6.1

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

@@ -1,4 +1,5 @@
 <%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   id ||= nil
   id_prefix ||= "radio-#{SecureRandom.hex(4)}"
   items ||= []
@@ -54,7 +55,7 @@
         <% end %>
       <% else %>
         <%= tag.legend class: legend_classes do %>
-          <%= tag.h2 heading, class: "govuk-fieldset__heading" %>
+          <%= content_tag(shared_helper.get_heading_level, heading, class: "govuk-fieldset__heading") %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -0,0 +1,45 @@
+<%
+  items ||= []
+  input_name ||= "ordering"
+  data_attributes ||= {}
+  data_attributes[:module] = "reorderable-list"
+%>
+
+<%= tag.ol class: "gem-c-reorderable-list", data: data_attributes do %>
+  <% items.each_with_index do |item, index| %>
+    <%= tag.li class: "gem-c-reorderable-list__item" do %>
+      <%= tag.div class: "gem-c-reorderable-list__wrapper" do %>
+        <%= tag.div class: "gem-c-reorderable-list__content" do %>
+          <%= tag.p item[:title], class: "gem-c-reorderable-list__title" %>
+          <%= tag.p(item[:description], class: "gem-c-reorderable-list__description") if item[:description].present? %>
+        <% end %>
+        <%= tag.div class: "gem-c-reorderable-list__actions" do %>
+          <% label_text = capture do %>
+            Position<span class='govuk-visually-hidden'> for <%= item[:title] %></span>
+          <% end %>
+          <%= render "govuk_publishing_components/components/input", {
+            label: { text: label_text },
+            name: "#{input_name}[#{item[:id]}]",
+            type: "number",
+            value: index + 1,
+            width: 2
+          } %>
+          <%= render "govuk_publishing_components/components/button", {
+            text: "Up",
+            type: "button",
+            aria_label: "Move \"#{item[:title]}\" up",
+            classes: "js-reorderable-list-up",
+            secondary_solid: true
+          } %>
+          <%= render "govuk_publishing_components/components/button", {
+            text: "Down",
+            type: "button",
+            aria_label: "Move \"#{item[:title]}\" down",
+            classes: "js-reorderable-list-down",
+            secondary_solid: true
+          } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -1,11 +1,19 @@
 <%
-  size ||= ""
-  no_border ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(gem-c-search)
+
+  aria_controls ||= nil
+  button_text ||= t("components.search_box.search_button")
+  id ||= "search-main-" + SecureRandom.hex(4)
+  label_text ||= t("components.search_box.label")
+  name ||= "q"
+  no_border ||= false
+  size ||= ""
+  value ||= ""
+
+  classes = %w[gem-c-search]
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
-  classes << "gem-c-search--large" if size == 'large'
+  classes << "gem-c-search--large" if size == "large"
   classes << "gem-c-search--no-border" if no_border
   if local_assigns[:on_govuk_blue].eql?(true)
     classes << "gem-c-search--on-govuk-blue"
@@ -13,25 +21,28 @@
     classes << "gem-c-search--on-white"
   end
   classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label)
-
-  value ||= ""
-  id ||= "search-main-" + SecureRandom.hex(4)
-  label_text ||= "Search on GOV.UK"
-  name ||= 'q'
-  aria_controls ||= nil
 %>
 
-<div class="<%= classes.join(' ') %>" data-module="gem-toggle-input-class-on-focus">
+<div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
   <label for="<%= id %>" class="gem-c-search__label">
     <%= label_text %>
   </label>
   <div class="gem-c-search__item-wrapper">
-    <input type="search" value="<%= value %>"
-      id="<%= id %>" name="<%= name %>" title="Search"
-      aria-controls="<%= aria_controls %>"
-      class="gem-c-search__item gem-c-search__input js-class-toggle">
+    <%= tag.input(
+      aria: {
+        controls: aria_controls,
+      },
+      class: "gem-c-search__item gem-c-search__input js-class-toggle",
+      id: id,
+      name: name,
+      title: t("components.search_box.input_title"),
+      type: "search",
+      value: value,
+    ) %>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
-      <button type="submit" class="gem-c-search__submit">Search</button>
+      <button class="gem-c-search__submit" type="submit">
+        <%= button_text %>
+      </button>
     </div>
   </div>
 </div>

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

@@ -19,10 +19,12 @@
     data: {
       module: "show-password",
       disable_form_submit_check: disable_form_submit_check,
-      show: t('components.input.show'),
-      hide: t('components.input.hide'),
-      announce_show: t('components.input.announce_show'),
-      announce_hide: t('components.input.announce_hide')
+      show_text: t('components.show_password.show'),
+      hide_text: t('components.show_password.hide'),
+      show_full_text: t('components.show_password.show_password'),
+      hide_full_text: t('components.show_password.hide_password'),
+      announce_show: t('components.show_password.announce_show'),
+      announce_hide: t('components.show_password.announce_hide')
     } do %>
       <%= render "govuk_publishing_components/components/input", {
         label: label,

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

@@ -10,37 +10,59 @@
   delete ||= {}
   items ||= []
   block ||= yield
+  wide_title ||= false
 %>
 <% if title || items.any? %>
-  <%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless}", id: id do %>
+  <%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless} #{"gem-c-summary-list--wide-title" if wide_title}", id: id do %>
     <% if title %>
       <%= content_tag(shared_helper.get_heading_level, title, class: "govuk-heading-#{heading_size} gem-c-summary-list__group-title") %>
-      <% if edit.any? || delete.any? %>
+
+      <% if edit.any? %>
+        <% edit_main_link = capture do %>
+          <%
+            edit_section_link_text = edit[:link_text] || t("components.summary_list.edit")
+          %>
+          <%= link_to edit.fetch(:href),
+                    class: "govuk-link",
+                    data: edit.fetch(:data_attributes, {}) do %>
+            <%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless edit[:link_text_no_enhance] -%>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if delete.any? %>
+        <% delete_main_link = capture do %>
+          <%
+            delete_section_link_text = delete[:link_text] || t("components.summary_list.delete")
+          %>
+          <%= link_to delete.fetch(:href),
+                    class: "govuk-link gem-link--destructive",
+                    data: delete.fetch(:data_attributes, {}) do %>
+            <%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless delete[:link_text_no_enhance] -%>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if edit_main_link && delete_main_link %>
         <%= tag.ul class: "govuk-summary-list__actions-list gem-c-summary-list__group-actions-list" do %>
           <%- if edit.any? %>
-            <% edit_section_link_text = edit[:link_text] || t("components.summary_list.edit") %>
             <%= tag.li class: "govuk-summary-list__actions-list-item" do -%>
-              <%= link_to edit.fetch(:href),
-                        class: "govuk-link",
-                        title: "#{edit_section_link_text} #{title}",
-                        data: edit.fetch(:data_attributes, {}) do %>
-                <%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
-              <% end %>
+              <%= edit_main_link %>
             <% end %>
           <% end %>
           <% if delete.any? %>
-            <% delete_section_link_text = delete[:link_text] || t("components.summary_list.delete") %>
             <%= tag.li class: "govuk-summary-list__actions-list-item" do -%>
-              <%= link_to delete.fetch(:href),
-                        class: "govuk-link gem-link--destructive",
-                        title: "#{delete_section_link_text} #{title}",
-                        data: delete.fetch(:data_attributes, {}) do %>
-                <%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
-              <% end %>
+              <%= delete_main_link %>
             <% end %>
           <% end %>
         <% end %>
+      <% else %>
+        <%= tag.div class: "govuk-summary-list__actions-list gem-c-summary-list__group-actions-list" do %>
+          <%= edit_main_link %>
+          <%= delete_main_link %>
+        <% end %>
       <% end %>
+
     <% end %>
 
     <% if items.any? %>
@@ -51,34 +73,54 @@
             <%= tag.dt item[:field], class: "govuk-summary-list__key" %>
             <%= tag.dd item[:value], class: "govuk-summary-list__value" %>
 
-            <% if item.fetch(:edit, {}).any? || item.fetch(:delete, {}).any? %>
+            <% if item.fetch(:edit, {}).any? %>
+              <% edit_link = capture do %>
+                <%
+                  edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit")
+                %>
+                <%= link_to item[:edit].fetch(:href),
+                            class: "govuk-link",
+                            data: item[:edit].fetch(:data_attributes, {}) do %>
+                  <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:edit][:link_text_no_enhance] -%>
+                <% end %>
+              <% end %>
+            <% end %>
+
+            <% if item.fetch(:delete, {}).any? %>
+              <% delete_link = capture do %>
+                <%
+                  delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete")
+                %>
+                <%= link_to item[:delete].fetch(:href),
+                            class: "govuk-link gem-link--destructive",
+                            data: item[:delete].fetch(:data_attributes, {}) do %>
+                  <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:delete][:link_text_no_enhance] -%>
+                <% end %>
+              <% end %>
+            <% end %>
+
+            <% if edit_link && delete_link %>
               <%= tag.dd class: "govuk-summary-list__actions" do %>
                 <%= tag.ul class: "govuk-summary-list__actions-list" do %>
                   <% if item.fetch(:edit, {}).any? %>
                     <%= tag.li class: "govuk-summary-list__actions-list-item" do %>
-                      <% edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit") %>
-                      <%= link_to item[:edit].fetch(:href),
-                                  class: "govuk-link",
-                                  title: "#{edit_link_text} #{item[:field]}",
-                                  data: item[:edit].fetch(:data_attributes, {}) do %>
-                        <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
-                      <% end %>
+                      <%= edit_link %>
                     <% end %>
                   <% end %>
                   <% if item.fetch(:delete, {}).any? %>
                     <%= tag.li class: "govuk-summary-list__actions-list-item" do %>
-                      <% delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete") %>
-                      <%= link_to item[:delete].fetch(:href),
-                                  class: "govuk-link gem-link--destructive",
-                                  title: "#{delete_link_text} #{item[:field]}",
-                                  data: item[:delete].fetch(:data_attributes, {}) do %>
-                        <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
-                      <% end %>
+                      <%= delete_link %>
                     <% end %>
                   <% end %>
                 <% end %>
               <% end %>
+            <% else %>
+              <%= tag.dd class: "govuk-summary-list__actions" do %>
+                <%= edit_link %>
+                <%= delete_link %>
+              <% end %>
             <% end %>
+
           <% end %>
         <% end %>
       <% end %>

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