govuk_publishing_components 35.16.0 → 35.17.0

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

@@ -182,7 +182,7 @@ $after-button-padding-left: govuk-spacing(4);
       }
     }
 
-    &:after {
+    &::after {
       @include make-selectable-area-bigger;
       @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding);
     }
@@ -193,14 +193,14 @@ $after-button-padding-left: govuk-spacing(4);
     font-size: govuk-px-to-rem(16px);
     height: govuk-spacing(4);
 
-    &:before {
+    &::before {
       @include chevron(govuk-colour("white"), true);
     }
 
     &:hover {
       color: govuk-colour("mid-grey");
 
-      &:after {
+      &::after {
         background: govuk-colour("mid-grey");
       }
     }
@@ -216,7 +216,7 @@ $after-button-padding-left: govuk-spacing(4);
         box-shadow: none;
         color: $govuk-focus-text-colour;
 
-        &:after {
+        &::after {
           background: $govuk-focus-text-colour;
         }
       }
@@ -235,12 +235,12 @@ $after-button-padding-left: govuk-spacing(4);
       &:hover {
         color: govuk-colour("mid-grey");
 
-        &:after {
+        &::after {
           background: govuk-colour("mid-grey");
         }
       }
 
-      &:after {
+      &::after {
         background: none;
       }
     }
@@ -255,14 +255,14 @@ $after-button-padding-left: govuk-spacing(4);
       padding: 0;
       margin: 0;
 
-      &:after {
+      &::after {
         @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right, $width: 100%);
       }
     }
     // stylelint-enable max-nesting-depth
   }
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 }
@@ -299,7 +299,7 @@ $after-button-padding-left: govuk-spacing(4);
     &:hover {
       background: govuk-colour("black");
 
-      &:before {
+      &::before {
         left: 0;
         right: 0;
       }
@@ -308,12 +308,12 @@ $after-button-padding-left: govuk-spacing(4);
     &:focus {
       background: $govuk-focus-colour;
 
-      &:before {
+      &::before {
         content: none;
       }
     }
 
-    &:after {
+    &::after {
       left: 0;
       right: 0;
       width: 100%;
@@ -332,8 +332,8 @@ $after-button-padding-left: govuk-spacing(4);
         background: $govuk-focus-colour;
       }
 
-      &:after,
-      &:hover:after {
+      &::after,
+      &:hover::after {
         background: $govuk-focus-colour;
       }
     }
@@ -364,19 +364,19 @@ $after-button-padding-left: govuk-spacing(4);
   @include govuk-link-style-no-visited-state;
   @include govuk-link-style-no-underline;
 
-  &:after {
+  &::after {
     @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right);
   }
 
   &:hover {
     color: govuk-colour("mid-grey");
 
-    &:after {
+    &::after {
       background: govuk-colour("mid-grey");
     }
 
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-      &:before {
+      &::before {
         border-color: govuk-colour("mid-grey");
       }
     }
@@ -411,11 +411,11 @@ $after-button-padding-left: govuk-spacing(4);
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
         color: govuk-colour("black");
 
-        &:after {
+        &::after {
           background: govuk-colour("black");
         }
 
-        &:before {
+        &::before {
           @include chevron(govuk-colour("black"), true);
         }
       }
@@ -428,22 +428,23 @@ $after-button-padding-left: govuk-spacing(4);
     box-shadow: none;
 
     &:hover {
-      &:after {
+      &::after {
         background-color: govuk-colour("black");
       }
     }
 
-    &:after {
+    &::after {
       background-color: govuk-colour("black");
     }
-
+    // stylelint-disable max-nesting-depth
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
       border-color: $govuk-focus-colour;
 
-      &:before {
+      &::before {
         @include chevron(govuk-colour("black"), true);
       }
     }
+    // stylelint-enable max-nesting-depth
   }
 
   // Undoes the :focus styles *only* for browsers that support :focus-visible.
@@ -453,16 +454,17 @@ $after-button-padding-left: govuk-spacing(4);
     box-shadow: none;
     color: govuk-colour("white");
 
+    // stylelint-disable max-nesting-depth
     &:hover {
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        &:before {
+        &::before {
           @include chevron(govuk-colour("mid-grey"), true);
         }
 
         color: govuk-colour("mid-grey");
       }
 
-      &:after {
+      &::after {
         background: govuk-colour("mid-grey");
       }
     }
@@ -471,11 +473,12 @@ $after-button-padding-left: govuk-spacing(4);
       border-color: $button-pipe-colour;
 
       @include govuk-media-query($from: 360px) {
-        &:before {
+        &::before {
           @include chevron(govuk-colour("white"), true);
         }
       }
     }
+    // stylelint-enable max-nesting-depth
   }
 
   // Open button modifier
@@ -485,7 +488,7 @@ $after-button-padding-left: govuk-spacing(4);
       @include govuk-focused-text;
       box-shadow: none;
 
-      &:after {
+      &::after {
         background-color: govuk-colour("black");
       }
 
@@ -494,7 +497,7 @@ $after-button-padding-left: govuk-spacing(4);
         border-color: $govuk-focus-colour;
 
         @include govuk-media-query($from: 360px) {
-          &:before {
+          &::before {
             @include chevron(govuk-colour("black"), true);
             @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
@@ -505,7 +508,7 @@ $after-button-padding-left: govuk-spacing(4);
     @include focus-not-focus-visible {
       background: govuk-colour("light-grey");
 
-      &:after {
+      &::after {
         background-color: $govuk-link-colour;
       }
 
@@ -514,7 +517,7 @@ $after-button-padding-left: govuk-spacing(4);
         border-color: govuk-colour("light-grey");
 
         @include govuk-media-query($from: 360px) {
-          &:before {
+          &::before {
             @include chevron($govuk-link-colour);
             @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
@@ -533,7 +536,7 @@ $after-button-padding-left: govuk-spacing(4);
   padding: govuk-spacing(1) govuk-spacing(4);
 
   @include govuk-media-query($from: 360px) {
-    &:before {
+    &::before {
       @include chevron(govuk-colour("white"));
     }
   }
@@ -597,11 +600,13 @@ $after-button-padding-left: govuk-spacing(4);
       box-shadow: none;
       color: $govuk-focus-colour;
 
+      // stylelint-disable max-nesting-depth
       @include govuk-media-query($from: 360px) {
-        &:before {
+        &::before {
           @include chevron($govuk-focus-colour, true);
         }
       }
+      // stylelint-enable max-nesting-depth
     }
 
     @include focus-not-focus-visible {
@@ -708,14 +713,14 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 
   @include govuk-media-query($from: "desktop") {
     padding: 0;
 
-    &:after {
+    &::after {
       @include make-selectable-area-bigger;
     }
   }
@@ -726,7 +731,7 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
     height: calc(100% - 20px);
   }
@@ -756,7 +761,7 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   padding: 0;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -63,7 +63,7 @@
   }
 
   // Extend the touch area of the button to span the heading
-  &:after {
+  &::after {
     content: "";
     position: absolute;
     top: 0;

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

@@ -55,7 +55,7 @@ $large-input-size: 50px;
   }
 }
 
-%gem-c-search-input-focus {
+@mixin gem-c-search-input-focus {
   outline: $govuk-focus-width solid $govuk-focus-colour;
   // Ensure outline appears outside of the element
   outline-offset: 0;
@@ -89,7 +89,7 @@ $large-input-size: 50px;
   }
 
   &:focus {
-    @extend %gem-c-search-input-focus;
+    @include gem-c-search-input-focus;
   }
 }
 
@@ -168,10 +168,9 @@ $large-input-size: 50px;
     // Ensure outline appears outside of the element
     outline-offset: 0;
 
-    // no need for black outline as there is enough contrast
-    // with the blue background
     &:focus {
-      box-shadow: none;
+      @include gem-c-search-input-focus;
+      box-shadow: inset 0 0 0 4px;
     }
   }
 
@@ -191,6 +190,17 @@ $large-input-size: 50px;
   }
 }
 
+.gem-c-search--homepage {
+  .gem-c-search__submit {
+    background-color: #d2e2f1;
+    color: govuk-colour("blue");
+
+    &:hover {
+      background-color: lighten(#d2e2f1, 5%);
+    }
+  }
+}
+
 .gem-c-search--on-white {
   .gem-c-search__submit {
     background-color: govuk-colour("blue");
@@ -211,6 +221,10 @@ $large-input-size: 50px;
   }
 }
 
+.gem-c-search__label--white {
+  color: govuk-colour("white");
+}
+
 .gem-c-search--no-border {
   .gem-c-search__label {
     color: govuk-colour("white");
@@ -218,6 +232,11 @@ $large-input-size: 50px;
 
   .gem-c-search__input[type="search"] {
     border: 0;
+
+    &:focus {
+      @include gem-c-search-input-focus;
+      box-shadow: inset 0 0 0 4px;
+    }
   }
 
   .js-enabled & {

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -37,6 +37,11 @@ $share-button-height: 30px;
   line-height: $share-button-height;
 }
 
+.gem-c-share-links__svg {
+  width: 100%;
+  height: 100%;
+}
+
 .direction-rtl {
   .gem-c-share-links__link {
     display: inline-block;

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

@@ -17,6 +17,7 @@
   simple_light ||= false
   dark_icon ||= false
   dark_large_icon ||= false
+  light_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
   brexit_icon ||= false
@@ -31,6 +32,7 @@
   css_classes << "gem-c-action-link--dark-large-icon" if dark_large_icon
   css_classes << "gem-c-action-link--small-icon" if small_icon
   css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
+  css_classes << "gem-c-action-link--light-icon" if light_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--brexit" if brexit_icon
   css_classes << "gem-c-action-link--blue-arrow" if blue_arrow

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