govuk_publishing_components 27.16.0 → 27.20.0

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/_signup-link.scss

@@ -0,0 +1,34 @@
+.gem-c-signup-link__link {
+  @include govuk-font($size: 19);
+}
+
+.gem-c-signup-link__inner {
+  position: relative;
+}
+
+.gem-c-signup-link__icon {
+  position: absolute;
+
+  @include govuk-media-query($from: tablet) {
+    top: 2px;
+  }
+}
+
+.gem-c-signup-link__title {
+  margin-bottom: govuk-spacing(2);
+  margin-left: govuk-spacing(5);
+}
+
+.gem-c-signup-link--with-background-and-border {
+  padding: govuk-spacing(6);
+  background-color: govuk-colour("light-grey");
+  border: 1px solid $govuk-border-colour;
+}
+
+.gem-c-signup-link--link-only .gem-c-signup-link__link {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: bold;
+  margin-left: govuk-spacing(5);
+  margin-bottom: 0;
+}

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,8 +3,10 @@
   suggestion_link_text ||= false
   suggestion_link_url ||= false
   suggestion_text ||= nil
+  hide ||= false
   new_tab ||= false
 
+
   data_attributes ||= {}
   data_attributes[:module] = 'intervention'
   suggestion_data_attributes ||= {}
@@ -34,9 +36,16 @@
 
     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 || (suggestion_link_text && suggestion_link_url) %>
-  <%= tag.section class: "gem-c-intervention", role: "region", aria: aria_attributes, data: data_attributes do %>
+  <%= 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 && suggestion_link_url %>

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/_signup_link.html.erb

@@ -0,0 +1,30 @@
+<%
+  local_assigns[:heading_level] ||= 3
+  local_assigns[:margin_bottom] ||= 0
+  link_text ||= false
+  link_href ||= false
+  heading ||= false
+  background ||= false
+  data ||= false
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  classes = %w(gem-c-signup-link govuk-!-display-none-print)
+  classes << shared_helper.get_margin_bottom
+  classes << "gem-c-signup-link--link-only" unless heading
+  classes << "gem-c-signup-link--with-background-and-border" if background
+%>
+<% if link_text && link_href %>
+  <div class="<%= classes.join(' ') %>">
+    <div class="gem-c-signup-link__inner govuk-width-container">
+      <svg  class="gem-c-signup-link__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334">
+        <path fill="black" 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>
+      <%= content_tag(shared_helper.get_heading_level, heading, class: "govuk-heading-s gem-c-signup-link__title") if heading %>
+      <%= link_to( link_text, link_href, {
+        class: "govuk-link gem-c-signup-link__link",
+        data: data
+      }) %>
+    </div>
+  </div>
+<% end %>

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",

data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb

@@ -15,9 +15,9 @@
   "track-dimension-index": "29",
 } %>
 
-<%= tag.div class: "gem-c-contextual-sidebar__brexit-cta" do %>
-  <%= tag.h2 title, class: "gem-c-contextual-sidebar__brexit-heading govuk-heading-s" %>
-  <%= tag.p class: "gem-c-contextual-sidebar__brexit-text govuk-body" do %>
+<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--brexit" do %>
+  <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
+  <%= tag.p class: "gem-c-contextual-sidebar__text govuk-body" do %>
     <%= link_to link_text,
       link_path,
       class: "govuk-link",

data/app/views/govuk_publishing_components/components/contextual_sidebar/_covid_cta.html.erb

@@ -0,0 +1,27 @@
+<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
+<%
+  title = t("components.related_navigation.covid_booster.title")
+  link_text = t("components.related_navigation.covid_booster.link_text")
+  link_path = t("components.related_navigation.covid_booster.link_path")
+  lang = shared_helper.t_locale("components.related_navigation.covid_booster.title")
+%>
+
+<% data_attributes = {
+  "module": "gem-track-click",
+  "track-category": "relatedLinkClicked",
+  "track-action": "1.0 Coronavirus",
+  "track-label": link_path,
+  "track-dimension": link_text,
+  "track-dimension-index": "29",
+} %>
+
+<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--covid" do %>
+  <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
+  <%= tag.p class: "gem-c-contextual-sidebar__text govuk-body" do %>
+    <%= link_to link_text,
+      link_path,
+      class: "govuk-link",
+      data: data_attributes,
+      lang: lang %>
+  <% end %>
+<% end %>