govuk_publishing_components 24.4.1 → 24.7.1

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

@@ -27,3 +27,29 @@ examples:
     description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
     data:
       omit_header: true
+  navigation:
+    description: Passes the navigation through to the [header component](/component-guide/layout_header/).
+    data:
+      show_search: false
+      navigation_items:
+      - text: Navigation item 1
+        href: "item-1"
+        active: true
+      - text: Navigation item 2
+        href: "item-2"
+      - text: Hidden on desktop
+        href: "item-3"
+        show_only_in_collapsed_menu: true
+  with_global_banner:
+    description: This allows the HTML for the global banner to be added to the page. This is only the slot for the global banner - the markup for the banner needs to be passed in.
+    data:
+      global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
+  with_emergency_banner:
+    description: This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
+    data:
+      emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
+  with_global_and_emergency_banner:
+    description: Both global banner and emergency banner should be usable together.
+    data:
+      emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
+      global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>

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,45 @@ 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:
+      title: "Title, summary and body"
+      items:
+      - field: "Title"
+        value: "Rural conservation techniques"
+        edit:
+          href: "edit-title"
+          text: "Edit"
+          data_attributes:
+            gtm: "edit-title"
+      - field: "Body"
+        value: "Following the land use committee change to overreaching rural byelaws in 2009, further policies were adopted."
+        edit:
+          href: "edit-body"
+          link_text: "Edit"
+        delete:
+          href: "delete-body"
+          link_text: "Remove"
+          link_text_no_enhance: true
+      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 +129,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,7 +1,14 @@
 <% 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>
+  <button
+    aria-controls="navigation"
+    aria-label="Show or hide Top Level Navigation"
+    class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button"
+    type="button"
+  >
+    Menu
+  </button>
   <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
     <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
       <% navigation_items.each_with_index do |item, index| %>

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/config/locales/ar.yml

@@ -0,0 +1 @@
+ar:

data/config/locales/az.yml

@@ -0,0 +1 @@
+az:

data/config/locales/be.yml

@@ -0,0 +1 @@
+be:

data/config/locales/bg.yml

@@ -0,0 +1 @@
+bg:

data/config/locales/bn.yml

@@ -0,0 +1 @@
+bn:

data/config/locales/cs.yml

@@ -0,0 +1 @@
+cs:

data/config/locales/da.yml

@@ -0,0 +1 @@
+da:

data/config/locales/de.yml

@@ -0,0 +1 @@
+de:

data/config/locales/dr.yml

@@ -0,0 +1 @@
+dr:

data/config/locales/el.yml

@@ -0,0 +1 @@
+el:

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,10 +54,14 @@ en:
       what_wrong: "What went wrong?"
       send_me_survey: "Send me the survey"
       send: "Send"
+    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"
@@ -76,22 +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
+      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/config/locales/es-419.yml

@@ -0,0 +1 @@
+es-419:

data/config/locales/es.yml

@@ -0,0 +1 @@
+es:

data/config/locales/fa.yml

@@ -0,0 +1 @@
+fa:

data/config/locales/fi.yml

@@ -0,0 +1 @@
+fi:

data/config/locales/gd.yml

@@ -0,0 +1 @@
+gd:

data/config/locales/gu.yml

@@ -0,0 +1 @@
+gu:

data/config/locales/he.yml

@@ -0,0 +1 @@
+he:

data/config/locales/hi.yml

@@ -0,0 +1 @@
+hi:

data/config/locales/hr.yml

@@ -0,0 +1 @@
+hr:

data/config/locales/hu.yml

@@ -0,0 +1 @@
+hu:

data/config/locales/hy.yml

@@ -0,0 +1 @@
+hy:

data/config/locales/id.yml

@@ -0,0 +1 @@
+id:

data/config/locales/is.yml

@@ -0,0 +1 @@
+is:

data/config/locales/it.yml

@@ -0,0 +1 @@
+it: