govuk_publishing_components 24.6.0 → 24.9.0

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -1,5 +1,21 @@
 <%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title, margin_top: 0 %>
 
+<% unless ENV["MAIN_COMPONENT_GUIDE"] %>
+  <p class="govuk-body">
+    <% if @index_audit_summary[:application_found] %>
+      Warnings:
+      <% if @index_audit_summary[:warning_count] > 0 %>
+        <strong class="govuk-tag govuk-tag--red"><%= @index_audit_summary[:warning_count] %></strong>
+      <% else %>
+        <%= @index_audit_summary[:warning_count] %>
+      <% end %>
+      <a href="/component-guide/audit" class="govuk-link">Warning details</a>
+    <% else %>
+      <strong class="govuk-tag govuk-tag--red">Application not found</strong>
+    <% end %>
+  </p>
+<% end %>
+
 <div class="component-markdown">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
   <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>

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

@@ -6,6 +6,10 @@
   classes = "gem-c-image-card"
   classes << " gem-c-image-card--large" if card_helper.large
   classes << " gem-c-image-card--no-image" unless defined?(image_src)
+
+  font_size ||= card_helper.large ? 'm' : 's'
+  heading_class = %w[gem-c-image-card__title]
+  heading_class << shared_helper.get_heading_size(font_size, 's')
 %>
 <% if card_helper.href || card_helper.extra_links.any? %>
   <div class="<%= classes %> <%= brand_helper.brand_class %>"
@@ -14,16 +18,15 @@
     <div class="gem-c-image-card__text-wrapper">
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>
-          <%= content_tag(shared_helper.get_heading_level,
-            class: "gem-c-image-card__title") do %>
-              <% if card_helper.href %>
-                <%= link_to card_helper.heading_text, card_helper.href,
-                  class: "gem-c-image-card__title-link #{brand_helper.color_class}",
-                  data: card_helper.href_data_attributes
-                %>
-              <% else %>
-                <%= card_helper.heading_text %>
-              <% end %>
+          <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
+            <% if card_helper.href %>
+              <%= link_to card_helper.heading_text, card_helper.href,
+                class: "gem-c-image-card__title-link govuk-link #{brand_helper.color_class}",
+                data: card_helper.href_data_attributes
+              %>
+            <% else %>
+              <%= card_helper.heading_text %>
+            <% end %>
           <% end %>
         <% end %>
         <%= card_helper.context %>
@@ -34,7 +37,7 @@
           <% card_helper.extra_links.each do |link| %>
             <li class="gem-c-image-card__list-item">
               <%= link_to link[:text], link[:href],
-                class: "gem-c-image-card__list-item-link #{brand_helper.color_class}",
+                class: "gem-c-image-card__list-item-link govuk-link #{brand_helper.color_class}",
                 data: link[:data_attributes]
               %>
             </li>

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

@@ -21,8 +21,13 @@
                 width_class = "govuk-grid-column-one-third"
               end
 
-              list_classes = %w( govuk-footer__list )
-              list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns]
+              # If the list has multiple columns and there is only one link.
+              # This is to prevent a long link wrapping in a column, which
+              # leaves an obvious blank space to the right.
+              single_item_list = (( item[:columns] == 2 || item[:columns] == 3 ) && item[:items].length == 1 )
+
+              list_classes = %w[govuk-footer__list]
+              list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns] unless single_item_list
             %>
             <div class="<%= width_class %>">
               <h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>

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

@@ -1,10 +1,33 @@
 <%
-  title ||= "GOV.UK - The best place to find government services and information"
-  html_lang ||= "en"
+  emergency_banner ||= nil
   full_width ||= false
+  global_bar ||= nil
+  html_lang ||= "en"
+  layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
+  navigation_items ||= []
   omit_header ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
-  layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
+  title ||= "GOV.UK - The best place to find government services and information"
+
+# This is a hack - but it's the only way I can find to not have two blue bars on
+# constrained width layouts.
+#
+# The full width layout hides the blue bar underneath the blar header bar - so
+# full width pages won't see the blue bar unless it's added by another component
+# - and for most pages that component is the global banner.
+#
+# The constrained width layout doesn't hide the blue bar - so having the global
+# banner on a constrained width layout means there are two blue bars.
+#
+# The global banner is shown with JavaScript, so users without JavaScript won't
+# see it. So the constrained width blue bar can't be turned off as then it'll be
+# off for everyone.
+#
+# This booleon adds a CSS class that shifts the banners up by the blue bar's
+# height, making the two blue bars overlap and appear as one. The class is added
+# when a) there's content for the emergency or global banner *and* b) when using
+# the contrained width layout.
+  blue_bar_dedupe = !full_width && global_bar.present?
 -%>
 <!DOCTYPE html>
   <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
@@ -48,13 +71,31 @@
     <% unless omit_header %>
       <%= render "govuk_publishing_components/components/layout_header", {
         search: show_search,
-        # layout-header will always have border-bottom, unless the layout is full width
-        remove_bottom_border: full_width,
+        navigation_items: navigation_items,
+
+        # The (blue) bottom border needs to be underneath the emergency banner -
+        # so it has been turned off and added in manually.
+        remove_bottom_border: true,
       } %>
     <% end %>
-    <div class="<%= "govuk-width-container" unless full_width %>"  id="content">
+
+    <%= raw(emergency_banner) %>
+
+    <% unless full_width %>
+      <div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
+    <% end %>
+
+    <% if global_bar.present? %>
+      <%= content_tag("div", {
+        class: blue_bar_dedupe ? "gem-c-layout-for-public__global-banner-wrapper" : nil,
+      }) do %>
+        <%= raw(global_bar) %>
+      <% end %>
+    <% end %>
+
+    <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
       <%= yield :before_content %>
-      <main class="govuk-main-wrapper">
+      <main class="govuk-main-wrapper" id="content">
         <%= yield %>
       </main>
     </div>

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

@@ -1,16 +1,15 @@
 <%
-  product_name ||= nil
   environment ||= nil
   full_width ||= false
-  search ||= false
-  search_left ||= false
-  navigation_items ||= []
   navigation_aria_label ||= "Top level"
+  navigation_items ||= []
+  product_name ||= nil
   remove_bottom_border ||= false
+  search ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
 
-  header_classes = %w(gem-c-layout-header govuk-header)
+  header_classes = %w[gem-c-layout-header govuk-header]
   header_classes << "gem-c-layout-header--#{environment}" if environment
   header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
   header_classes << "gem-c-layout-header--search-left" if search_left
@@ -28,18 +27,22 @@
         <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
           <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>
-        <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
-        </div>
+        <% if navigation_items.any? %>
+          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
+            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
+          </div>
+        <% end %>
       </div>
     <% else %>
-      <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
+      <div class="govuk-grid-row">
         <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
           <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
-        <div class="govuk-header__content gem-c-header__content">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
-        </div>
+        <% if navigation_items.any? %>
+          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
+            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
+          </div>
+        <% end %>
         <% if search %>
           <div class="govuk-grid-column-one-third gem-c-layout-header__search">
             <%= render "govuk_publishing_components/components/layout_header/search" %>

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

@@ -1,10 +1,26 @@
-<% description ||= nil %>
+<%
+  description ||= nil
+  title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
+%>
 
-<%= tag.div class: "gem-c-success-alert", data: { module: "initial-focus" }, role: "alert", tabindex: "-1" do %>
-  <% if description.present? %>
-    <%= tag.h2 message, class: "gem-c-success-summary__title" %>
-    <%= tag.div description, class: "gem-c-success-summary__body" %>
-  <% else %>
-    <%= tag.p message, class: "gem-c-success-alert__message" %>
-  <% end %>
+<%= tag.div class: "gem-c-success-alert govuk-notification-banner govuk-notification-banner--success",
+  role: "alert",
+  tabindex: "-1",
+  aria: {
+    labelledby: title_id,
+  },
+  data: {
+    module: "initial-focus",
+  } do %>
+  <div class="govuk-notification-banner__header">
+    <%= tag.h2 t("govuk_component.success_alert.success", default: "Success"), class: "govuk-notification-banner__title", id: title_id %>
+  </div>
+  <div class="govuk-notification-banner__content">
+    <% if description.present? %>
+      <%= tag.h3 message, class: "govuk-notification-banner__heading" %>
+      <%= description %>
+    <% else %>
+      <%= tag.p message, class: "govuk-body gem-c-success-alert__message" %>
+    <% end %>
+  </div>
 <% end %>

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

@@ -81,7 +81,7 @@
                 <%= 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 edit[:link_text_no_enhance] -%>
+                  <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:edit][:link_text_no_enhance] -%>
                 <% end %>
               <% end %>
             <% end %>
@@ -94,7 +94,7 @@
                 <%= 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 delete[:link_text_no_enhance] -%>
+                  <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:delete][:link_text_no_enhance] -%>
                 <% end %>
               <% end %>
             <% end %>

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

@@ -1,5 +1,6 @@
 <%
   average_title_length ||= false
+
   context ||= false
   context_locale ||= false
   context_text = context.is_a?(Hash) ? context[:text] : context
@@ -12,10 +13,13 @@
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  classes = %w(gem-c-title)
+  classes = %w[gem-c-title]
   classes << "gem-c-title--inverse" if inverse
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom)
+
+  heading_classes = %w[gem-c-title__text]
+  heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
 %>
 <%= content_tag(:div, class: classes) do %>
   <% if context %>
@@ -23,7 +27,7 @@
       <%= context_href ? link_to(context_text, context_href, class: 'gem-c-title__context-link govuk-link', data: context_data) : context_text %>
     </span>
   <% end %>
-  <h1 class="gem-c-title__text <% if average_title_length %>gem-c-title__text--<%= average_title_length %><% end %>">
+  <h1 class="<%= heading_classes.join(" ") %>">
     <%= title %>
   </h1>
 <% end %>

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

@@ -66,18 +66,19 @@ examples:
       href: "#"
       start: true
       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"
+      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: "#"
       start: true
       info_text: "Sometimes you want to explain where a user is going to and have a margin bottom"
-      margin_bottom: true
-  with_margin_bottom:
-    description: "Sometimes it's useful to break up a page, for example if a button is at the bottom of a page."
-    data:
-      text: "Submit"
-      margin_bottom: true
+      margin_bottom: 6
   extreme_text:
     data:
       text: "I'm a button with lots of text to test how the component scales at extremes."

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

@@ -155,6 +155,7 @@ examples:
       content_item:
         title: "Transport news story"
         content_id: "3c402d90-fe77-49b9-a8aa-1800d4fc2b3d"
+        locale: "en"
         links:
           ordered_related_items:
           - title: Find an apprenticeship
@@ -180,6 +181,7 @@ examples:
       content_item:
         title: "30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"
         content_id: "c3752802-f091-43a9-ba90-33568fccf391"
+        locale: "en"
         links:
           ordered_related_items:
           - title: Find an apprenticeship
@@ -205,6 +207,7 @@ examples:
       content_item:
         title: "Local transport news story"
         content_id: "5c82db20-7631-11e4-a3cb-005056011aef"
+        locale: "en"
         links:
           ordered_related_items:
           - title: Find an apprenticeship

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

@@ -35,6 +35,18 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: "I am not a heading"
       heading_level: 0
+  with_different_link_size:
+    description: |
+      Set a different font size for the link. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 19px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
+
+      This option is not tied to the `heading_level` option in order to give flexibility.
+    data:
+      href: "/definitely-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "I am a big link"
+      heading_level: 0
+      font_size: 'xl'
   with_more_information:
     data:
       href: "/also-not-a-page"

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/modal_dialogue.yml

@@ -8,6 +8,8 @@ body: |
   When the component is not limited to presenting information (e.g. an alert dialog or an informative dialog) and it contains interactive elements (e.g. form elements) you should use the `aria_label` attribute.
   This will provide context around what the modal dialogue is about and will prevent it from being too verbose for screen reader users (if `aria_label` is not specified the whole modal content will be read out).
 
+  Modal components must be a direct descendant of the `<body>` element; we recommend placing it toward the end of the document for performance considerations.
+
   This component is currently experimental. If you are using it, please feed back any research findings to the Content Publisher team.
 accessibility_criteria: |
   The modal dialogue box must:
@@ -21,6 +23,7 @@ accessibility_criteria: |
   - can be operable with a keyboard (allows the ESC key to close the dialogue)
   - return focus to last focused element on close
 
+display_preview: false
 examples:
   default:
     embed: |

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

@@ -1,5 +1,7 @@
 name: Success alert
 description: Used at the top of the page, to summarise a successful user action.
+govuk_frontend_components:
+  - notification-banner
 accessibility_criteria: |
   - should be focused on page load, to ensure the message is noticed by
     assistive tech
@@ -10,9 +12,18 @@ examples:
     data:
       message: Message to alert the user to a successful action goes here
   with_message_and_description:
+    description: Descriptions can be passed as plain text but it is strongly recommended that you pass these as html, cleaned using `raw` or `sanitize`.
     data:
       message: Message to alert the user to a successful action goes here
-      description: A further description
+      description: <p class="govuk-body">A further description</p>
+  with_custom_title_id:
+    description: |
+      This is for the heading element at the head of the component (reading "Success" by default) where the id is used by an `aria-labelledby` on screen reader focus of the element.
+
+      Please ensure that this id is unique across the view you are building.
+    data:
+      message: Message to alert the user to a successful action goes here
+      title_id: my-custom-success-id
   long_example:
     data:
       message: |

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

@@ -73,7 +73,24 @@ examples:
 
       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
+      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>