govuk_publishing_components 27.15.0 → 27.19.0

data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss

@@ -1,13 +1,21 @@
 .gem-c-big-number {
   margin-bottom: govuk-spacing(3);
+  @include govuk-typography-common;
+  @include govuk-text-colour;
 }
 
 .gem-c-big-number__value {
-  @include govuk-font($size: 80, $weight: bold);
+  font-size: 80px;
+  @include govuk-typography-weight-bold;
+  line-height: 1;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(80px);
+  }
 }
 
 .gem-c-big-number__label {
-  @include govuk-font($size: 16, $weight: bold, $line-height: 2);
+  @include govuk-font($size: 19, $weight: bold);
 
   // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
   // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -1,31 +1,36 @@
 $transition-campaign-red: #ff003b;
+$covid-colour: $govuk-link-colour;
 
-.gem-c-contextual-sidebar__brexit-related-links {
+.gem-c-contextual-sidebar__related-links {
   border-top: 2px solid $govuk-brand-colour;
 }
 
-.gem-c-contextual-sidebar__brexit-heading {
+.gem-c-contextual-sidebar__heading {
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
+  color: $govuk-text-colour;
 }
 
-.gem-c-contextual-sidebar__brexit-cta {
+.gem-c-contextual-sidebar__text {
+  @include govuk-font(16);
+  margin-bottom: govuk-spacing(1);
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(2);
+  }
+}
+
+.gem-c-contextual-sidebar__cta {
   margin-bottom: govuk-spacing(6);
   background-color: govuk-colour('light-grey', $legacy: 'grey-4');
-  border-top: 2px solid $transition-campaign-red;
   display: block;
   padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;
+}
 
-  .gem-c-contextual-sidebar__brexit-heading {
-    color: $govuk-text-colour;
-  }
+.gem-c-contextual-sidebar__cta--brexit {
+  border-top: 2px solid $transition-campaign-red;
+}
 
-  .gem-c-contextual-sidebar__brexit-text {
-    @include govuk-font(16);
-    margin-bottom: govuk-spacing(1);
-    @include govuk-media-query($from: tablet) {
-      margin-bottom: govuk-spacing(2);
-    }
-  }
+.gem-c-contextual-sidebar__cta--covid {
+  border-top: 2px solid $covid-colour;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -45,17 +45,21 @@
   }
 
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: one-third, $at: mobile);
+    @include govuk-grid-column($width: one-half, $at: mobile);
   }
 
   .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: two-thirds, $at: mobile);
+    @include govuk-grid-column($width: one-half, $at: mobile);
   }
 }
 
 .gem-c-image-card__image {
   display: block;
   max-width: 100%;
+  border-top: 1px solid $govuk-border-colour;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
 }
 
 .gem-c-image-card__title {
@@ -100,7 +104,13 @@
 
 .gem-c-image-card__context,
 .gem-c-image-card__metadata {
-  @include govuk-font(14);
+  @include govuk-font($size: false);
+  font-size: 16px;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+
   margin: 0 0 (govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 
@@ -110,13 +120,13 @@
 }
 
 .gem-c-image-card__description {
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 19);
   padding-top: (govuk-spacing(3) / 2);
   word-wrap: break-word;
 }
 
 .gem-c-image-card__list {
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 19);
   position: relative;
   z-index: 2;
   padding: (govuk-spacing(3) / 2) 0 0 0;
@@ -160,7 +170,7 @@
 
 .gem-c-image-card--large {
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: two-thirds, $at: tablet);
+    @include govuk-grid-column($width: one-half, $at: tablet);
 
     margin-bottom: govuk-spacing(2);
     float: none;
@@ -175,7 +185,7 @@
   }
 
   .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: one-third, $at: tablet);
+    @include govuk-grid-column($width: one-half, $at: tablet);
 
     padding: 0;
     overflow: hidden;

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -1,102 +1,5 @@
 @import "mixins/prefixed-transform";
-
-/// Set grid row or column value using the fraction unit.
-///
-/// @param {Integer} $number - number of fractions that the grid row or column
-///   needs to be divided into.
-/// @returns {String} - the value
-///
-/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
-///  .container {
-///    grid-template-rows: fractions(5);
-///  }
-///
-@function fractions($number) {
-  $fractions: "1fr";
-
-  @for $i from 1 to $number {
-    $fractions: $fractions + " 1fr";
-  }
-
-  @return unquote($fractions);
-}
-
-/// Arrange items into vertical columns
-///
-/// @param {Integer} $items - number of items that need to be arranged
-/// @param {Integer} $columns - number of columns required
-/// @param {String} $selector - (optional) the inner element to be targeted.
-///
-/// @example scss - A 7 item 2 column layout.
-///  .container {
-///    @include columns(7, 2);
-///  }
-
-/// @example scss - A 9 item 3 column layout that has `div`s as the inner
-///   elements.
-///  .container {
-///    @include columns(9, 3, "div");
-///  }
-///
-@mixin columns($items, $columns, $selector: "*") {
-  $rows: ceil($items / $columns);
-
-  display: -ms-grid;
-  display: grid;
-  grid-auto-flow: column;
-  -ms-grid-columns: fractions($columns);
-  grid-template-columns: fractions($columns);
-  -ms-grid-rows: fractions($rows);
-  grid-template-rows: fractions($rows);
-}
-
-@mixin columns-children($items, $columns, $selector: "*") {
-  $rows: ceil($items / $columns);
-
-  // Internet Explorer 10-11 require each element to be placed in the grid -
-  // the `grid-auto-flow` property isn't supported. This means that both the
-  // column and row needs to be set for every element.
-
-  // This creates a list of lists to represent the columns and rows; for
-  // example, a 7 item 2 column list would create this:
-  //   [
-  //     [1, 2, 3, 4 ] // column one
-  //     [5, 6, 7] // column two
-  //   ]
-  $grid: ();
-  $counter: 0;
-
-  @for $column from 1 through $columns {
-    $this-row: ();
-
-    @for $row from 1 through $rows {
-      $counter: $counter + 1;
-
-      @if $counter <= $items {
-        $this-row: append($this-row, $counter);
-      }
-    }
-
-    $grid: append($grid, $this-row, "comma");
-  }
-
-  // Now we can loop through the list of lists to create the rules needed for
-  // the older grid syntax; fist looping through the list to get the number
-  // needed for the column, then looping again to get the number for the grid
-  // row:
-  @for $column_index from 1 through length($grid) {
-    $this-row: nth($grid, $column_index);
-
-    @for $item-index from 1 through length($this-row) {
-      $this-item: nth($this-row, $item-index);
-
-      & > #{$selector}:nth-child(#{$this-item}) {
-        -ms-grid-column: $column_index;
-        -ms-grid-row: $item-index;
-      }
-    }
-  }
-}
+@import "mixins/grid-helper";
 
 $icon-size: 20px;
 $chevron-indent-spacing: 7px;
@@ -131,14 +34,14 @@ $pseudo-underline-height: 3px;
   top: 0;
 }
 
-@mixin pseudo-underline {
+@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4)) {
   background: none;
   bottom: 0;
   content: "";
   height: $pseudo-underline-height;
-  left: govuk-spacing(5);
+  left: $left;
   position: absolute;
-  right: govuk-spacing(6);
+  right: $right;
   top: auto;
 }
 
@@ -385,7 +288,7 @@ $pseudo-underline-height: 3px;
       // stylelint-enable max-nesting-depth
 
       &:after {
-        @include pseudo-underline;
+        @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
       }
     }
   }
@@ -431,7 +334,7 @@ $pseudo-underline-height: 3px;
 
   @include govuk-media-query($from: "desktop") {
     &:after {
-      @include pseudo-underline;
+      @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
     }
 
     @include focus-not-focus-visible {
@@ -866,15 +769,13 @@ $pseudo-underline-height: 3px;
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns(17, 2, "li");
-    @include columns-children(17, 2, "li");
+    @include columns($items: 17, $columns: 2, $selector: "li", $flow: column);
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
   @include govuk-media-query($from: "desktop") {
-    @include columns(6, 2, "li");
-    @include columns-children(6, 2, "li");
+    @include columns($items: 6, $columns: 2, $selector: "li", $flow: column);
     padding-bottom: 0;
 
     & > li {
@@ -924,8 +825,7 @@ $pseudo-underline-height: 3px;
   padding: 0 0 govuk-spacing(8) govuk-spacing(4);
 
   @include govuk-media-query($from: "desktop") {
-    @include columns(2, 2, "li");
-    @include columns-children(2, 2, "li");
+    @include columns($items: 2, $columns: 2, $selector: "li");
     margin: 0 (0 - govuk-spacing(3));
     padding: govuk-spacing(6) 0 govuk-spacing(7) 0;
   }
@@ -963,6 +863,7 @@ $pseudo-underline-height: 3px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
+  @include govuk-typography-common;
   font-size: 16px;
   @if $govuk-typography-use-rem {
     font-size: govuk-px-to-rem(16px);

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

@@ -1,6 +1,25 @@
 $input-size: 40px;
 $large-input-size: 50px;
 
+@mixin large-mode {
+  .gem-c-search__label {
+    @include govuk-font($size: 19, $line-height: $large-input-size);
+  }
+
+  .gem-c-search__input[type="search"] {
+    height: $large-input-size;
+  }
+
+  .gem-c-search__submit {
+    width: $large-input-size;
+    height: $large-input-size;
+
+    .gem-c-search__icon {
+      @include icon-positioning($large-input-size);
+    }
+  }
+}
+
 .gem-c-search {
   position: relative;
   margin-bottom: 30px;
@@ -220,21 +239,12 @@ $large-input-size: 50px;
 }
 
 .gem-c-search--large {
-  .gem-c-search__label {
-    @include govuk-font($size: 19, $line-height: $large-input-size);
-  }
-
-  .gem-c-search__input[type="search"] {
-    height: $large-input-size;
-  }
-
-  .gem-c-search__submit {
-    width: $large-input-size;
-    height: $large-input-size;
+  @include large-mode;
+}
 
-    .gem-c-search__icon {
-      @include icon-positioning($large-input-size);
-    }
+.gem-c-search--large-on-mobile {
+  @include govuk-media-query($until: "tablet") {
+    @include large-mode;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss

@@ -28,3 +28,11 @@
   vertical-align: top;
   margin-right: govuk-spacing(1);
 }
+
+.js-enabled .gem-c-single-page-notification-button.js-personalisation-enhancement {
+  opacity: 0;
+
+  &.gem-c-single-page-notification-button--visible {
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -14,7 +14,7 @@
     margin: govuk-spacing(6) 0;
     overflow-x: auto;
     width: 100%;
-    @include govuk-font($size: 14);
+    @include govuk-font($size: 19);
 
     caption {
       text-align: left;
@@ -24,12 +24,16 @@
     th,
     td {
       vertical-align: top;
-      padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
-      border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
+      padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
+      border-bottom: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
+
+      &:last-child {
+        padding: govuk-spacing(2) 0 govuk-spacing(2) 0;
+      }
     }
 
     th {
-      @include govuk-font($size: 14, $weight: bold);
+      @include govuk-font($size: 19, $weight: bold);
       text-align: left;
       color: $govuk-text-colour;
     }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -34,4 +34,11 @@
       margin-left: 1em;
     }
   }
+
+  // Prevent excessive spacing when placed in a call-to-action block
+  .call-to-action {
+    .help-notice:first-child {
+      margin-top: 0;
+    }
+  }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_grid-helper.scss

@@ -0,0 +1,141 @@
+/// Set grid row or column value using the fraction unit.
+///
+/// @param {Integer} $number - number of fractions that the grid row or column
+///   needs to be divided into.
+/// @returns {String} - the value
+///
+/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
+///  .container {
+///    grid-template-rows: fractions(5);
+///  }
+///
+@function fractions($number) {
+  $fractions: "1fr";
+
+  @for $i from 1 to $number {
+    $fractions: $fractions + " 1fr";
+  }
+
+  @return unquote($fractions);
+}
+
+/// Arrange items into columns
+///
+/// The items can flow from horizontally or vertically.
+///
+/// @param {Integer} $items - number of items that need to be arranged
+/// @param {Integer} $columns - number of columns required
+/// @param {String} $selector - (optional) the inner element to be targeted.
+/// @param {String} $direction - (optional) the flow of the items in the grid:
+///   * `row` goes from the left to right, top to bottom one row at a time
+///   * `column` goes from the top to bottom, left to right one column at a time
+///
+/// @example scss - A 7 item 2 column layout going left to right, top to bottom.
+///  .container {
+///    @include columns($items: 7, $columns: 2);
+///  }
+///
+/// @example scss - A 9 item 3 column layout that has `div`s as the inner
+///   elements.
+///  .container {
+///    @include columns($items: 9, $columns: 3, $selector:"div");
+///  }
+///
+/// @example scss - A 16 item 2 column layout going from top to bottom
+///   elements.
+///  .container {
+///    @include columns($items: 9, $columns: 3, $flow:"column");
+///  }
+///
+@mixin columns($items, $columns, $selector: "*", $flow: row) {
+  $rows: ceil($items / $columns);
+
+  display: -ms-grid;
+  display: grid;
+  grid-auto-flow: $flow;
+  -ms-grid-columns: fractions($columns);
+  grid-template-columns: fractions($columns);
+  -ms-grid-rows: fractions($rows);
+  grid-template-rows: fractions($rows);
+
+  // Internet Explorer 10-11 require each element to be placed in the grid -
+  // the `grid-auto-flow` property isn't supported. This means that both the
+  // column and row needs to be set for every child element.
+  @if $flow == "row" {
+    $grid: ();
+    $counter: 0;
+
+    @for $row from 1 through $rows {
+      $this-row: ();
+
+      @for $column from 1 through $columns {
+        $counter: $counter + 1;
+
+        // stylelint-disable max-nesting-depth
+        @if $counter <= $items {
+          $this-row: append($this-row, $counter);
+        }
+        // stylelint-enable max-nesting-depth
+      }
+
+      $grid: append($grid, $this-row, "comma");
+    }
+
+    @for $row-count from 1 through length($grid) {
+      $this-column: nth($grid, $row-count);
+
+      @for $item-index from 1 through length($this-column) {
+        $this-item: nth($this-column, $item-index);
+
+        & > #{$selector}:nth-child(#{$this-item}) {
+          -ms-grid-column: $item-index;
+          -ms-grid-row: $row-count;
+        }
+      }
+    }
+  }
+
+  @if $flow == "column" {
+    // This creates a list of lists to represent the columns and rows; for
+    // example, a 7 item 2 column list would create this:
+    //   [
+    //     [1, 2, 3, 4 ] // column one
+    //     [5, 6, 7] // column two
+    //   ]
+    $grid: ();
+    $counter: 0;
+
+    @for $column from 1 through $columns {
+      $this-row: ();
+
+      @for $row from 1 through $rows {
+        $counter: $counter + 1;
+
+        // stylelint-disable max-nesting-depth
+        @if $counter <= $items {
+          $this-row: append($this-row, $counter);
+        }
+        // stylelint-enable max-nesting-depth
+      }
+
+      $grid: append($grid, $this-row, "comma");
+    }
+
+    // Now we can loop through the list of lists to create the rules needed for
+    // the older grid syntax; fist looping through the list to get the number
+    // needed for the column, then looping again to get the number for the grid
+    // row:
+    @for $column_index from 1 through length($grid) {
+      $this-row: nth($grid, $column_index);
+
+      @for $item-index from 1 through length($this-row) {
+        $this-item: nth($this-row, $item-index);
+
+        & > #{$selector}:nth-child(#{$this-item}) {
+          -ms-grid-column: $column_index;
+          -ms-grid-row: $item-index;
+        }
+      }
+    }
+  }
+}

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

@@ -24,7 +24,11 @@
     } %>
   <% end %>
 
-  <% if navigation.show_brexit_cta? || navigation.show_brexit_related_links? %>
+  <% if navigation.show_brexit_cta? %>
     <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta', content_item: content_item %>
   <% end %>
+
+  <% if navigation.show_covid_booster_cta? %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/covid_cta', content_item: content_item %>
+  <% end %>
 </div>

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

@@ -14,7 +14,7 @@
   text = raw(text)
 
   cookie_preferences_href ||= "/help/cookies"
-  confirmation_message ||= raw(t("components.cookie_banner.confirmation_message",
+  confirmation_message ||= raw(t("components.cookie_banner.confirmation_message_html",
                                 link: link_to(
                                   t("components.cookie_banner.confirmation_message_link"),
                                   cookie_preferences_href,

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

@@ -1,4 +1,5 @@
 <%
+  sizes ||= false
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)

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

@@ -3,6 +3,9 @@
   suggestion_link_text ||= false
   suggestion_link_url ||= false
   suggestion_text ||= nil
+  hide ||= false
+  new_tab ||= false
+
 
   data_attributes ||= {}
   data_attributes[:module] = 'intervention'
@@ -13,17 +16,40 @@
   aria_attributes[:label] = 'Intervention'
 
   local_assigns[:query_string] ||= request.query_string
+  local_assigns[:suggestion_link_text] = suggestion_link_text
+  local_assigns[:suggestion_link_url] = suggestion_link_url
 
   intervention_helper = GovukPublishingComponents::Presenters::InterventionHelper.new(local_assigns)
   dismiss_href = intervention_helper.dismiss_link
+
+  suggestion_tag_options = {
+    class: "govuk-link gem-c-intervention__suggestion-link",
+    href: suggestion_link_url,
+    data: suggestion_data_attributes,
+  }
+
+  if new_tab && (suggestion_link_text && suggestion_link_url)
+    target = "_blank"
+    rel = intervention_helper.security_attr
+
+    suggestion_tag_options.merge!({ target: target, rel: rel })
+
+    suggestion_link_text = intervention_helper.accessible_text
+  end
+
+  section_options = {
+    class: "gem-c-intervention",
+    role: "region", aria: aria_attributes,
+    data: data_attributes,
+  }
+  section_options.merge!({ hidden: true }) if hide
 %>
-<% if suggestion_text or (suggestion_link_text and suggestion_link_text) %>
-  <%= tag.section class: "gem-c-intervention", role: "region", aria: aria_attributes, data: data_attributes do %>
+<% if suggestion_text || (suggestion_link_text && suggestion_link_url) %>
+  <%= tag.section section_options do %>
     <p class="govuk-body">
       <%= tag.span suggestion_text, class: "gem-c-intervention__textwrapper" if suggestion_text %>
-      <% if suggestion_link_text and suggestion_link_url %>
-        <%= tag.a suggestion_link_text, class: "govuk-link gem-c-intervention__suggestion-link", href: suggestion_link_url, data: suggestion_data_attributes %>
-
+      <% if suggestion_link_text && suggestion_link_url %>
+        <%= tag.a suggestion_link_text, suggestion_tag_options %>
       <% end %>
     </p>
 

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

@@ -21,6 +21,7 @@
   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-on-mobile" if size == "large-mobile"
   classes << "gem-c-search--no-border" if no_border
   if local_assigns[:on_govuk_blue].eql?(true)
     classes << "gem-c-search--on-govuk-blue"

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

@@ -9,7 +9,7 @@
   <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
 <% end %>
 <%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %>
-  <%= tag.form class: "gem-c-single-page-notification-button", action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+  <%= tag.form class: component_helper.classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
     <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
     <%= content_tag(:button, button_text, {
       class: "govuk-body-s gem-c-single-page-notification-button__submit",