govuk_publishing_components 21.55.4 → 21.57.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19ad2a3cf6f68efd7fe8140b3601107d25fff6dd67c3f05b8cde19a0a0cc74f9
-  data.tar.gz: 0bb67a7c588c7af08bfbb26159659f6801fece123836933755ba22fac236f3d6
+  metadata.gz: 5de5c1f4596f4f0f7eae60d3c76ad22f0ed61ce04619e72a7c9074ba3a31320c
+  data.tar.gz: 8feefd4ad704ce099dca964212c995b76aeef60c628458033e1b2611aabfecaa
 SHA512:
-  metadata.gz: d2ba559e148e74aec769f2fe1a4cdaa153703290c2c24da22b9607efe9930eba555fe31809f985d18fa481bb5213b24adbbb2bcda2d3b4baa754e7551c8e7e55
-  data.tar.gz: 8e84ad0c10264daf7b9a8898f513b9646db50ae1998b4ff3e723b1c45a2a122e135be33f1fbaa79e2dfae15def7fa939c6b162c1259c201b6603c868eefd4d22
+  metadata.gz: d396d8049e9a935808e3b3468b6a623a7d2d5093433037381278e2b907a664547007a124b34f1e91a5394a3bad076ad45f89fc1ba49a70505ea7b29e21ef9ff3
+  data.tar.gz: 7d4295428f49d6d1e7db3c3f1894aa48ddcb32a39ba5cd95c169ae725cd86869f0257d4ae94da27265e2614ebe949c948f3feb28bd42fa266d2feb8a8e3e50b7

data/app/assets/javascripts/govuk_publishing_components/components/print-link.js

@@ -0,0 +1,14 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict'
+
+  Modules.PrintLink = function () {
+    this.start = function (element) {
+      element[0].addEventListener('click', function () {
+        window.print()
+      })
+    }
+  }
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -53,6 +53,7 @@
 @import "components/panel";
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
+@import "components/print-link";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/search";

data/app/assets/stylesheets/govuk_publishing_components/component_support.scss

@@ -8,6 +8,7 @@
 
 @import "govuk_publishing_components/components/helpers/variables";
 @import "govuk_publishing_components/components/helpers/brand-colours";
+@import "govuk_publishing_components/components/helpers/link";
 @import "govuk_publishing_components/components/mixins/govuk-template-link-focus-override";
 @import "govuk_publishing_components/components/mixins/media-down";
 @import "govuk_publishing_components/components/mixins/margins";

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -118,6 +118,16 @@
 }
 
 .gem-c-action-link--dark-icon {
+  &:before {
+    // sass-lint:disable no-duplicate-properties
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
+    // sass-lint:enable no-duplicate-properties
+  }
+}
+
+.gem-c-action-link--dark-icon,
+.gem-c-action-link--small-icon {
   max-width: none;
 
   @include govuk-media-query($until: tablet) {
@@ -125,12 +135,8 @@
   }
 
   &:before {
-    width: 30px;
     height: 30px;
-    // sass-lint:disable no-duplicate-properties
-    background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
-    background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
-    // sass-lint:enable no-duplicate-properties
+    width: 35px;
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;

data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -12,6 +12,10 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
   background-color: $govuk-cookie-banner-background;
 }
 
+.gem-c-cookie-banner--services {
+  display: none;
+}
+
 .gem-c-cookie-banner__message {
   display: inline-block;
   padding-bottom: govuk-spacing(2);

data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss

@@ -10,6 +10,7 @@
 // TODO: remove these styles once static is made less aggressive
 .gem-c-input.govuk-input {
   margin: 0;
+  min-width: 0;
   padding: govuk-spacing(1);
 
   &.gem-c-input--search-icon {
@@ -40,16 +41,19 @@
   box-sizing: border-box;
   cursor: default; // emphasise non-editable status of prefixes and suffixes
   display: inline-block;
-  white-space: nowrap;
-  width: auto;
-  text-align: center;
+  flex: 0 0 auto;
   height: 40px;
-  padding: govuk-spacing(1);
+  margin-top: 0;
   min-width: 40px;
+  padding: govuk-spacing(1);
+  text-align: center;
+  white-space: nowrap;
+  width: auto;
+
   @if $govuk-typography-use-rem {
+    height: govuk-px-to-rem(40px);
     min-width: govuk-px-to-rem(40px);
   }
-  margin-top: 0;
 }
 
 .gem-c-input__prefix {

data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss

@@ -0,0 +1,52 @@
+.gem-c-print-link {
+  display: none;
+  margin-bottom: 2em;
+  margin-top: 2em;
+}
+
+.gem-c-print-link.gem-c-print-link--show-without-js {
+  display: block;
+}
+
+.js-enabled {
+  .gem-c-print-link {
+    display: block;
+  }
+}
+
+.gem-c-print-link__link {
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+
+  margin-left: -10px;
+  padding: .5em .5em .5em 38px;
+
+  @include govuk-device-pixel-ratio($ratio: 2) {
+    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-size: 16px 18px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}
+
+.gem-c-print-link__button {
+  @extend %govuk-body-s;
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+  border: 0;
+  color: $govuk-link-colour;
+  cursor: pointer;
+  margin: 0;
+  margin-left: -10px;
+  padding: .5em .5em .5em 38px;
+  text-decoration: underline;
+
+  @include govuk-device-pixel-ratio($ratio: 2) {
+    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-size: 16px 18px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}

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

@@ -1,7 +1,6 @@
 @import "govuk/components/summary-list/summary-list";
 
 .gem-c-summary-list {
-  position: relative;
   border-bottom: 1px solid $govuk-border-colour;
 
   @include govuk-font(19);
@@ -14,12 +13,26 @@
   &:nth-last-of-type(1) {
     border-bottom: 0;
   }
+
+  .govuk-summary-list {
+    clear: both;
+  }
 }
 
-.gem-c-summary-list__edit-section-link {
-  position: absolute;
-  top: 0;
-  right: 0;
+.gem-c-summary-list__group-title {
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+    margin-right: govuk-spacing(3);
+  }
+}
+
+.gem-c-summary-list__group-actions-list {
+  margin-bottom: govuk-spacing(3);
+
+  @include govuk-media-query($from: tablet) {
+    float: right;
+    width: auto;
+  }
 }
 
 .gem-c-summary__block {

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_link.scss

@@ -0,0 +1,17 @@
+.gem-link--destructive {
+  @include govuk-font(19);
+
+  &:link {
+    color: $govuk-error-colour;
+  }
+
+  &:visited,
+  &:hover,
+  &:active {
+    color: darken($govuk-error-colour, 5%);
+  }
+
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss

@@ -7,8 +7,12 @@
   .help-notice,
   .call-to-action {
     margin: govuk-spacing(3) 0;
-    padding: 0 govuk-spacing(3);
+  }
+
+  .call-to-action {
+    background: none;
     border: 1pt solid $govuk-border-colour;
+    padding: govuk-spacing(3);
   }
 
   .help-notice p {

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

@@ -11,6 +11,7 @@
   light_text ||= false
   simple ||= false
   dark_icon ||= false
+  small_icon ||= false
   nhs_icon ||= false
   data ||= nil
   classes ||= nil
@@ -18,6 +19,7 @@
   css_classes = %w(gem-c-action-link)
   css_classes << "gem-c-action-link--light-text" if light_text
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
+  css_classes << "gem-c-action-link--small-icon" if small_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--with-subtext" if subtext

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

@@ -1,16 +1,20 @@
 <% prioritise_taxon_breadcrumbs ||= false %>
-<% breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.call(content_item, request, prioritise_taxon_breadcrumbs) %>
+<% breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.new(content_item, request, prioritise_taxon_breadcrumbs) %>
 <% inverse ||= false %>
 <% collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) %>
 
-<div class='gem-c-contextual-breadcrumbs'>
-  <% if breadcrumb_selector[:step_by_step] %>
-    <%= render 'govuk_publishing_components/components/step_by_step_nav_header',
-               breadcrumb_selector[:breadcrumbs] %>
-  <% elsif breadcrumb_selector[:breadcrumbs] %>
+<div class="gem-c-contextual-breadcrumbs">
+  <% if breadcrumb_selector.step_by_step %>
+    <%= render 'govuk_publishing_components/components/step_by_step_nav_header', breadcrumb_selector.breadcrumbs %>
+  <% elsif breadcrumb_selector.breadcrumbs %>
     <%= render 'govuk_publishing_components/components/breadcrumbs',
-               breadcrumbs: breadcrumb_selector[:breadcrumbs],
+               breadcrumbs: breadcrumb_selector.breadcrumbs,
                inverse: inverse,
                collapse_on_mobile: collapse_on_mobile %>
   <% end %>
+
+  <%= render(
+        'govuk_publishing_components/components/step_by_step_nav_header', breadcrumb_selector.priority_breadcrumbs
+      ) if breadcrumb_selector.priority_breadcrumbs
+  %>
 </div>

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

@@ -5,9 +5,11 @@
   cookie_preferences_href ||= "/help/cookies"
   confirmation_message ||= raw("You’ve accepted all cookies. You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
   services_cookies ||= nil
+  css_classes = %w(gem-c-cookie-banner govuk-clearfix)
+  css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
 
-<div id="<%= id %>" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
   <div class="gem-c-cookie-banner__wrapper govuk-width-container">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">

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

@@ -95,15 +95,14 @@
 
   <% if prefix && suffix %>
     <%= tag.div class: "gem-c-input__wrapper" do %>
-      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %>
-      <%= input_tag %>
-      <%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+      <% # The line below relies on in-line styling for legacy browsers and it's whitespace-sensitive %>
+      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
     <% end %>
   <% elsif prefix %>
     <%= tag.div class: "gem-c-input__wrapper" do %>
       <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %>
     <% end %>
-  <% elsif suffix %> 
+  <% elsif suffix %>
     <%= tag.div class: "gem-c-input__wrapper" do %>
       <%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
     <% end %>

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

@@ -0,0 +1,27 @@
+<%
+  text ||= t('components.print_link.text')
+  href ||= nil
+  data_attributes ||= {}
+
+  require_js ||= href.nil?
+  data_attributes[:module] = 'print-link' if require_js
+%>
+
+<% if require_js %>
+  <div class="gem-c-print-link" >
+    <%= content_tag(:button, text, {
+        class: %w(gem-c-print-link__button govuk-link),
+        data: data_attributes
+    }) %>
+  </div>
+<% else %>
+  <div class="gem-c-print-link gem-c-print-link--show-without-js">
+    <%= link_to(
+      text,
+      href,
+      class: %w(gem-c-print-link__link govuk-link),
+      rel: "alternate",
+      data: data_attributes
+    ) %>
+  </div>
+<% end %>

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

@@ -1,23 +1,42 @@
 <%
+  local_assigns[:heading_level] ||= 3
+  heading_size = 'm' unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   id ||= nil
   title ||= nil
   borderless ||= false
   edit ||= {}
+  delete ||= {}
   items ||= []
   block ||= yield
 %>
 <% if title || items.any? %>
   <%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless}", id: id do %>
     <% if title %>
-      <%= tag.h3 title, class: "govuk-heading-m" %>
-      <% if edit.any? %>
-        <%= tag.ul class: "govuk-summary-list__actions-list" do %>
-          <%= tag.li class: "govuk-summary-list__actions-list-item" do %>
-            <%= link_to edit.fetch(:href),
-                      class: "govuk-link gem-c-summary-list__edit-section-link",
-                      title: "#{edit.fetch(:link_text, "Change")} #{title}",
-                      data: edit.fetch(:data_attributes, {}) do %>
-               <%= edit.fetch(:link_text, "Change") %> <%= tag.span title, class: "govuk-visually-hidden" %>
+      <%= content_tag(shared_helper.get_heading_level, title, class: "govuk-heading-#{heading_size} gem-c-summary-list__group-title") %>
+      <% if edit.any? || delete.any? %>
+        <%= 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 %>
+            <% 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 %>
             <% end %>
           <% end %>
         <% end %>
@@ -37,22 +56,23 @@
                 <%= 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] || "Change" %>
+                      <% 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_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
+                      <% end %>
                     <% end %>
                   <% end %>
                   <% if item.fetch(:delete, {}).any? %>
                     <%= tag.li class: "govuk-summary-list__actions-list-item" do %>
-                      <% delete_link_text = item[:delete][:link_text] || "Delete" %>
+                      <% delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete") %>
                       <%= link_to item[:delete].fetch(:href),
-                                  class: "govuk-link",
+                                  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" %>
+                        <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
                       <% end %>
                     <% end %>
                   <% end %>

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

@@ -75,6 +75,11 @@ examples:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
       simple: true
+  with_small_icon:
+    data:
+      text: Coronavirus (COVID-19)
+      href: "/my-test-page"
+      small_icon: true
   with_dark_icon:
     data:
       text: Coronavirus (COVID-19)