govuk_publishing_components 35.15.5 → 35.16.1

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -89,7 +89,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   }
 
   // Create inner chevron arrow
-  &:after {
+  &::after {
     content: "";
     box-sizing: border-box;
     display: block;
@@ -128,7 +128,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
       background: govuk-colour("black");
     }
 
-    .gem-c-step-nav__chevron:after {
+    .gem-c-step-nav__chevron::after {
       color: govuk-colour("light-grey");
     }
 
@@ -145,7 +145,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
       background: govuk-colour("black");
     }
 
-    .gem-c-step-nav__chevron:after {
+    .gem-c-step-nav__chevron::after {
       color: $govuk-focus-colour;
     }
 
@@ -234,7 +234,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   list-style: none;
 
   // line down the side of a step
-  &:after {
+  &::after {
     @include step-nav-vertical-line;
     @include step-nav-line-position;
     top: govuk-em(govuk-spacing(3), 16);
@@ -244,7 +244,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     @include govuk-media-query($from: tablet) {
       padding-left: govuk-em(govuk-spacing(9), 16);
 
-      &:after { // stylelint-disable-line max-nesting-depth
+      &::after { // stylelint-disable-line max-nesting-depth
         @include step-nav-line-position-large;
         top: govuk-em(govuk-spacing(6), 16);
       }
@@ -254,7 +254,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__step:last-child {
   // little dash at the bottom of the line
-  &:before {
+  &::before {
     content: "";
     position: absolute;
     z-index: 6;
@@ -266,23 +266,23 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
   }
 
-  &:after {
+  &::after {
     height: -webkit-calc(100% - #{govuk-spacing(3)}); // fallback for iphone 4
     height: calc(100% - #{govuk-spacing(3)});
   }
 
-  .gem-c-step-nav__help:after {
+  .gem-c-step-nav__help::after {
     height: 100%;
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      &:before {
+      &::before {
         margin-left: $number-circle-size-large / 4;
         width: $number-circle-size-large / 2;
       }
 
-      &:after {
+      &::after {
         height: calc(100% - #{govuk-spacing(6)});
       }
     }
@@ -290,10 +290,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__step--active {
-  &:last-child:before,
+  &:last-child::before,
   .gem-c-step-nav__circle--number,
-  &:after,
-  .gem-c-step-nav__help:after {
+  &::after,
+  .gem-c-step-nav__help::after {
     border-color: govuk-colour("black");
   }
 }
@@ -365,7 +365,11 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   $shadow-colour: govuk-colour("white");
 
   // to make numbers readable for users zooming text only in browsers such as Firefox
-  text-shadow: 0 -#{$shadow-offset} 0 $shadow-colour, $shadow-offset 0 0 $shadow-colour, 0 $shadow-offset 0 $shadow-colour, -#{$shadow-offset} 0 0 $shadow-colour;
+  text-shadow:
+    0 -#{$shadow-offset} 0 $shadow-colour,
+    $shadow-offset 0 0 $shadow-colour,
+    0 $shadow-offset 0 $shadow-colour,
+    -#{$shadow-offset} 0 0 $shadow-colour;
 }
 
 .gem-c-step-nav__circle-step-label,
@@ -468,13 +472,13 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   margin-left: $links-margin;
   list-style: disc;
 
-  .gem-c-step-nav__list-item--active:before {
+  .gem-c-step-nav__list-item--active::before {
     left: -(govuk-spacing(6) + govuk-spacing(3)) - $links-margin;
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      .gem-c-step-nav__list-item--active:before {
+      .gem-c-step-nav__list-item--active::before {
         left: -(govuk-spacing(9)) - $links-margin;
       }
     }
@@ -497,7 +501,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__list-item--active {
   position: relative;
 
-  &:before {
+  &::before {
     box-sizing: border-box;
     content: "";
     position: absolute;
@@ -513,7 +517,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      &:before {
+      &::before {
         left: -(govuk-spacing(9));
         margin-left: ($number-circle-size-large / 2);
       }
@@ -530,7 +534,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   font-weight: normal;
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 
-  &:before {
+  &::before {
     content: " \2013\00a0"; // dash followed by  
   }
 }

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

@@ -44,7 +44,7 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
       @include govuk-focused-text;
     }
 
-    .app-table__sort-link:after {
+    .app-table__sort-link::after {
       content: "";
       position: absolute;
       top: 5px;
@@ -52,7 +52,7 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
       @include govuk-shape-arrow($direction: up, $base: $sort-link-arrow-size-small, $display: block);
     }
 
-    .app-table__sort-link:before {
+    .app-table__sort-link::before {
       content: "";
       position: absolute;
       top: 13px;
@@ -80,12 +80,12 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
       }
     }
 
-    .app-table__sort-link--ascending:before,
-    .app-table__sort-link--descending:before {
+    .app-table__sort-link--ascending::before,
+    .app-table__sort-link--descending::before {
       content: none;
     }
 
-    .app-table__sort-link--ascending:after {
+    .app-table__sort-link--ascending::after {
       content: "";
       position: absolute;
       top: $sort-link-arrow-spacing;
@@ -95,7 +95,7 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
       @include govuk-shape-arrow($direction: up, $base: $sort-link-arrow-size, $display: inline-block);
     }
 
-    .app-table__sort-link--descending:after {
+    .app-table__sort-link--descending::after {
       content: "";
       position: absolute;
       top: $sort-link-arrow-spacing;

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

@@ -10,7 +10,8 @@
 }
 
 // We have some styles within GOVUK (.content-block) which can leak into the list styles for this component.
-// These styles are defined in Static: https://github.com/alphagov/static/blob/a815620cada7ea1c65428c1c3b3ac4dbe28977bf/app/assets/stylesheets/helpers/_text.scss
+// These styles are defined in Static:
+// https://github.com/alphagov/static/blob/a815620cada7ea1c65428c1c3b3ac4dbe28977bf/app/assets/stylesheets/helpers/_text.scss
 // This sets more specific selectors so those unwanted styles are overidden
 ul.govuk-tabs__list { // stylelint-disable-line selector-no-qualifying-type
   margin: 0;

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

@@ -17,7 +17,8 @@
       width: 100%;
       box-sizing: border-box;
 
-      &:before {
+      // stylelint-disable max-nesting-depth
+      &::before {
         background-color: govuk-colour("black");
         border-radius: 50%;
         color: govuk-colour("white");
@@ -37,6 +38,7 @@
           content: "#{$i}";
         }
       }
+      // stylelint-enable max-nesting-depth
     }
   }
 }

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

@@ -49,14 +49,14 @@
         padding-left: govuk-spacing(6);
       }
 
-      &:before {
+      &::before {
         content: "\201C";
         float: left;
         clear: both;
         margin-left: (- govuk-spacing(3));
       }
 
-      &:last-child:after {
+      &:last-child::after {
         content: "\201D";
       }
     }
@@ -78,14 +78,14 @@
         padding-left: 0;
       }
 
-      &:before {
+      &::before {
         content: "\201D";
         float: right;
         margin-right: (- govuk-spacing(3));
         margin-left: 0;
       }
 
-      &:last-child:after {
+      &:last-child::after {
         content: "\201C";
       }
     }

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss

@@ -10,11 +10,11 @@ $is-ie: false !default;
 @mixin media-down($size: false, $max-width: false, $min-width: false) {
   @if $is-ie == false {
     @if $size == mobile {
-      @media (max-width: 640px) {
+      @media (max-width: 640px) { // stylelint-disable-line media-feature-range-notation
         @content;
       }
     } @else if $size == tablet {
-      @media (max-width: 800px) {
+      @media (max-width: 800px) { // stylelint-disable-line media-feature-range-notation
         @content;
       }
     }

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

@@ -99,7 +99,7 @@
     <% end %>
 
     <% if attachment.preview_url.present? %>
-      <%= tag.p link_to(t("components.attachment.preview_link"), attachment.preview_url, class: "govuk-link"), class: "gem-c-attachment__metadata" %>
+      <%= tag.p link_to(t("components.attachment.preview_link"), attachment.preview_url, class: "govuk-link", "aria-label": t("components.attachment.preview_aria_label", title: attachment.title)), class: "gem-c-attachment__metadata" %>
     <% end %>
 
     <% if attachment.is_official_document && !hide_order_copy_link %>

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

@@ -14,9 +14,10 @@
 
   ga4_tracking ||= false
   ga4_data = {
-      event_name: "navigation",
-      type: "content",
-      section: t("components.contents_list.contents", locale: :en) || ""
+    event_name: "navigation",
+    type: "contents list",
+    section: t("components.contents_list.contents", locale: :en) || "",
+    index_total: cl_helper.get_index_total
   } if ga4_tracking
   local_assigns[:aria] ||= {}
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -37,15 +38,15 @@
     <% end %>
 
     <ol class="gem-c-contents-list__list">
+      <% index_link = 1 if ga4_tracking %>
       <% contents.each.with_index(1) do |contents_item, position| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
-             if ga4_tracking
+            if ga4_tracking
               ga4_data[:index] = {
-                  "index_link": position,
+                "index_link": index_link,
               }
-              ga4_data[:index_total] = contents.length
-             end
+            end
           %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
             class:  link_classes,
@@ -59,11 +60,18 @@
               ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
             }
           %>
-
+          <% index_link += 1 if ga4_tracking %>
           <% if contents_item[:items] && contents_item[:items].any? %>
             <ol class="gem-c-contents-list__nested-list">
               <% contents_item[:items].each.with_index(1) do |nested_contents_item, nested_position| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
+                  <%
+                    if ga4_tracking
+                      ga4_data[:index] = {
+                        "index_link": index_link,
+                      }
+                    end
+                  %>
                   <%= link_to_if !nested_contents_item[:active], nested_contents_item[:text], nested_contents_item[:href],
                     class: link_classes,
                     data: {
@@ -72,13 +80,15 @@
                       track_label: nested_contents_item[:href],
                       track_options: {
                         dimension29: nested_contents_item[:text]
-                      }
+                      },
+                      ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
                     }
                   %>
                 </li>
+                <% index_link += 1 if ga4_tracking %>
               <% end %>
             </ol>
-            <% end %>
+          <% end %>
         </li>
       <% end %>
     </ol>

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

@@ -7,11 +7,17 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns, brand_helper)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   classes = %w[gem-c-image-card]
+  classes << "govuk-grid-row" if card_helper.two_thirds
   classes << "gem-c-image-card--large" if card_helper.large
+  classes << "gem-c-image-card--two-thirds" if card_helper.two_thirds
   classes << "gem-c-image-card--no-image" unless (card_helper.image_src || card_helper.youtube_video_id)
   classes << brand_helper.brand_class if brand_helper.brand_class
 
+  text_wrapper_classes = %w[gem-c-image-card__text-wrapper]
+  text_wrapper_classes << "gem-c-image-card__text-wrapper--two-thirds" if card_helper.two_thirds
+
   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')
@@ -33,7 +39,7 @@
 %>
 <% if card_helper.href || card_helper.extra_details.any? %>
   <%= content_tag(:div, class: classes, "data-module": data_modules, lang: card_helper.lang) do %>
-    <div class="gem-c-image-card__text-wrapper">
+    <%= content_tag(:div, class: text_wrapper_classes) do %>
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>
           <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
@@ -69,7 +75,7 @@
       <% if card_helper.metadata %>
         <p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
       <% end %>
-    </div>
+    <% end %>
     <%= card_helper.media %>
   <% end %>
 <% end %>

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

@@ -0,0 +1,71 @@
+<%
+  add_gem_component_stylesheet("option-select")
+  add_gem_component_stylesheet("input")
+
+  title_id = "option-select-title-#{title.parameterize}"
+  checkboxes_id = "checkboxes-#{SecureRandom.hex(4)}"
+  checkboxes_count_id = checkboxes_id + "-count"
+  show_filter ||= false
+  large ||= false
+
+  classes = %w[gem-c-option-select__container js-options-container]
+  classes << "gem-c-option-select__container--large" if large
+%>
+
+<% if show_filter %>
+  <%
+    filter_id ||= "input-#{SecureRandom.hex(4)}"
+  %>
+  <% filter = capture do %>
+    <%= tag.label for: filter_id, class: "govuk-label govuk-visually-hidden" do %>
+      Filter <%= title %>
+    <% end %>
+
+    <%= tag.input name: "option-select-filter",
+      id: filter_id,
+      class: "gem-c-option-select__filter-input govuk-input",
+      type: "text",
+      aria: {
+        describedby: checkboxes_count_id,
+        controls: checkboxes_id
+      }
+    %>
+  <% end %>
+  <% filter_element = CGI::escapeHTML(filter) %>
+<% end %>
+
+<div
+  class="gem-c-option-select" data-module="option-select"
+  <% if local_assigns.include?(:closed_on_load) && closed_on_load %>data-closed-on-load="true"<% end %>
+  <% if local_assigns.include?(:closed_on_load_mobile) && closed_on_load_mobile %>data-closed-on-load-mobile="true"<% end %>
+  <% if local_assigns.include?(:aria_controls_id) %>data-input-aria-controls="<%= aria_controls_id %>"<% end %>
+  <% if show_filter %>data-filter-element="<%= filter_element %>"<% end %>
+>
+  <h3 class="gem-c-option-select__heading js-container-heading">
+    <span class="gem-c-option-select__title js-container-button" id="<%= title_id %>"><%= title %></span>
+    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--up" aria-hidden="true" focusable="false"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z"/></svg>
+    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--down" aria-hidden="true" focusable="false"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"/></svg>
+  </h3>
+
+  <%= content_tag(:div, role: "group", aria: { labelledby: title_id }, class: classes, id: options_container_id, tabindex: "-1") do %>
+    <div class="gem-c-option-select__container-inner js-auto-height-inner">
+      <% if show_filter %>
+        <span id="<%= checkboxes_count_id %>"
+          class="gem-c-option-select__count govuk-visually-hidden"
+          aria-live="polite"
+          data-single="<%= t('components.option_select.found_single') %>"
+          data-multiple="<%= t('components.option_select.found_multiple') %>"
+          data-selected="<%= t('components.option_select.selected') %>"></span>
+      <% end %>
+      <%= render "govuk_publishing_components/components/checkboxes", {
+        name: "#{key}[]",
+        id: checkboxes_id,
+        heading: title,
+        small: true,
+        visually_hide_heading: true,
+        no_hint_text: true,
+        items: options
+      } %>
+    </div>
+  <% end %>
+</div>

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

@@ -19,8 +19,8 @@
         link_text_classes << "govuk-pagination__link-title--decorated" unless previous_page[:label].present?
       %>
       <div class="govuk-pagination__prev">
-        <a class="govuk-link govuk-pagination__link" 
-          href="<%= previous_page[:url] %>" 
+        <a class="govuk-link govuk-pagination__link"
+          href="<%= previous_page[:url] %>"
           rel="prev"
           data-track-category="contentsClicked"
           data-track-action="previous"
@@ -30,7 +30,7 @@
           <% if ga4_tracking %>
             data-ga4-link = "<%= {
               event_name: "navigation",
-              type: "content",
+              type: "previous and next",
               text: previous_page[:label] || title,
               section: "Previous",
             }.to_json %>"
@@ -55,8 +55,8 @@
         link_text_classes << "govuk-pagination__link-title--decorated" unless next_page[:label].present?
       %>
       <div class="govuk-pagination__next">
-        <a class="govuk-link govuk-pagination__link" 
-          href="<%= next_page[:url] %>" 
+        <a class="govuk-link govuk-pagination__link"
+          href="<%= next_page[:url] %>"
           rel="next"
           data-track-category="contentsClicked"
           data-track-action="next"
@@ -66,7 +66,7 @@
           <% if ga4_tracking %>
             data-ga4-link = "<%= {
               event_name: "navigation",
-              type: "content",
+              type: "previous and next",
               text: next_page[:label] || title,
               section: "Next",
             }.to_json %>"

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

@@ -204,6 +204,7 @@ examples:
             text: 1. Nested Item
           - href: "#third-thing"
             text: 2. Nested Item
+            active: true
         - href: "#first-thing"
           text: 2. Second thing
           items:

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

@@ -205,6 +205,19 @@ examples:
       <div class="govuk-!-width-full">
         <%= component %>
       </div>
+  two_thirds_column:
+    description: This variant is used for the featured section on the homepage.
+    data:
+      two_thirds: true
+      href: "/still-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/91397/s712_SG_Swear_in_1_.jpg"
+      image_alt: "some meaningful alt text please"
+      heading_text: "Something has happened nearby possibly"
+      description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
+    embed: |
+      <div class="govuk-!-width-full">
+        <%= component %>
+      </div>
   youtube_video:
     description: |
       Given a Youtube video id, the image card will render a Youtube embed instead of an image. If Javascript fails to execute for any reason, then a fallback link to the Youtube video will be rendered instead.