RubyGems - govuk_publishing_components - Versions diffs - 24.4.0 → 24.7.0 - Mend

govuk_publishing_components 24.4.0 → 24.7.0

Files changed (39) hide show

data/app/assets/stylesheets/govuk_publishing_components/components/_summary-list.scss CHANGED Viewed

@@ -38,3 +38,15 @@
 .gem-c-summary__block {
   @include govuk-responsive-margin(6, "bottom");
 }
+.gem-c-summary-list--wide-title {
+  @include govuk-media-query($from: 'tablet') {
+    .govuk-summary-list__key {
+      width: 60%;
+    }
+    .govuk-summary-list__value {
+      width: 20%;
+    }
+  }
+}

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

@@ -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 CHANGED Viewed

@@ -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/_list.html.erb CHANGED Viewed

@@ -1,12 +1,12 @@
 <%
-  id ||= nil
+  aria_label ||= nil
   extra_spacing ||= nil
+  id ||= nil
+  items ||= []
   list_type ||= "unordered"
   visible_counters ||= nil
-  items ||= []
-  aria_label ||= nil
-  classes = %w(gem-c-list govuk-list)
+  classes = %w[gem-c-list govuk-list]
   classes << "govuk-list--bullet" if visible_counters && list_type === "unordered"
   classes << "govuk-list--number" if visible_counters && list_type === "number"
   classes << "govuk-list--spaced" if extra_spacing
@@ -20,7 +20,7 @@
 <% if items.any? %>
   <%= content_tag list_tag, class: classes, id: id, "aria-label": aria_label do %>
     <% items.each do |item| %>
-      <li><%= sanitize(item) %></li>
+      <li><%= raw(item) %></li>
     <% end %>
   <% end %>
 <% end %>

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

@@ -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 CHANGED Viewed

@@ -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/_summary_list.html.erb CHANGED Viewed

@@ -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/contextual_sidebar.yml CHANGED Viewed

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