govuk_publishing_components 60.2.1 → 61.0.0

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

@@ -8,8 +8,6 @@
 
 @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";
 @import "govuk_publishing_components/components/mixins/css3";
 

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

@@ -1,6 +1,6 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "mixins/grid-helper";
-@import "mixins/prefixed-transform";
+@import "mixins/css3";
 
 .gem-c-cards__heading {
   @include govuk-responsive-margin(6, "bottom");

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

@@ -25,10 +25,6 @@
   @include govuk-font($size: 16);
 }
 
-.gem-c-contents-list__link {
-  @include govuk-template-link-focus-override;
-}
-
 .gem-c-contents-list__list-item--parent > .gem-c-contents-list__link {
   font-weight: $govuk-font-weight-bold;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss

@@ -8,10 +8,10 @@ $logo-height: 30px;
 $toggle-border-height: 3px;
 
 .gem-c-rebranded-one-login-header {
-  @include govuk-font($size: 16);
   color: govuk-colour("white");
   position: relative;
   background: $govuk-brand-colour;
+  @include govuk-font($size: 16);
 }
 
 .gem-c-rebranded-one-login-header__container {
@@ -58,11 +58,11 @@ $toggle-border-height: 3px;
 .gem-c-rebranded-one-login-header__link--homepage {
   // Font size needs to be set on the link so that the box sizing is correct
   // in Firefox
-  @include govuk-font($size: false, $weight: bold);
   display: inline;
   margin-right: govuk-spacing(2);
   font-size: 30px; // We don't have a mixin that produces 30px font size
   line-height: 1;
+  @include govuk-font($size: false, $weight: bold);
 
   @include govuk-media-query($from: tablet) {
     &:focus {
@@ -97,9 +97,9 @@ $toggle-border-height: 3px;
 .gem-c-rebranded-one-login-header__nav__link {
   &:link,
   &:visited {
+    text-decoration: none;
     @include govuk-typography-common;
     @include govuk-link-style-inverse;
-    text-decoration: none;
 
     &:hover {
       text-decoration: underline;
@@ -278,7 +278,6 @@ $toggle-border-height: 3px;
 
 .gem-c-rebranded-cross-service-header__toggle {
   display: none;
-  @include govuk-font($size: 16, $weight: bold);
   position: absolute;
   right: 0;
   top: 0;
@@ -289,6 +288,7 @@ $toggle-border-height: 3px;
   color: inherit;
   padding: $toggle-padding $toggle-padding calc($toggle-padding + 1px) $toggle-padding;
   margin-right: -(govuk-spacing(3));
+  @include govuk-font($size: 16, $weight: bold);
 
   @mixin toggle-button-focus {
     color: $govuk-focus-text-colour;

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

@@ -5,6 +5,7 @@
 @import "govspeak/call-to-action";
 @import "govspeak/charts";
 @import "govspeak/contact";
+@import "govspeak/content-block";
 @import "govspeak/example";
 @import "govspeak/footnotes";
 @import "govspeak/form-download";

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

@@ -1,6 +1,6 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/header/header";
-@import "mixins/prefixed-transform";
+@import "mixins/css3";
 @import "mixins/grid-helper";
 
 $chevron-breakpoint: 360px;
@@ -107,23 +107,14 @@ $search-icon-height: 20px;
 
 .gem-c-layout-super-navigation-header__container {
   position: relative;
-}
-
-.gem-c-layout-super-navigation-header__button-width-container {
-  position: relative;
-}
-
-.gem-c-layout-super-navigation-header__button-container {
-  top: -$navbar-height;
-  position: absolute;
-  right: 0;
-
-  @include govuk-media-query($until: "tablet") {
-    margin-right: govuk-spacing(-3);
-  }
+  // the background color is set again on the nav container to ensure the menu buttons are still
+  // visible when the text scale is increased
+  // related issue: https://github.com/alphagov/govuk_publishing_components/issues/4208
+  background: $govuk-brand-colour;
 
-  @include govuk-media-query($until: 300px) {
-    position: static;
+  // add a transparent bottom border for forced-color modes
+  @media (forced-colors: active) {
+    border-bottom: 1px solid transparent;
   }
 }
 
@@ -132,20 +123,39 @@ $search-icon-height: 20px;
   line-height: 1;
   padding-bottom: 12px;
   padding-top: 16px;
+  flex-grow: 1;
+  flex-shrink: 0;
+
+  // remove the right margin from the govuk-logo to ensure the super nav menu buttons
+  // do not wrap onto a new line when the screen width is 360px ($chevron-breakpoint)
+  // govuk-frontend includes spacing to the right of the logo to offset it from the product name
+  // as we do not include a product name in the super navigation menu, we can set the right margin to 0
+  .govuk-header__link--homepage {
+    margin-right: 0;
+  }
 }
 
 .gem-c-layout-super-navigation-header__content {
   width: 100%;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .gem-c-layout-super-navigation-header__navigation-item,
 .gem-c-layout-super-navigation-header__search-item {
-  display: block;
-  float: left;
+  display: inline-block;
   margin: 0;
   padding: 0;
 }
 
+.gem-c-layout-super-navigation-header__search-item {
+  margin-right: -15px;
+
+  @include govuk-media-query($from: "desktop") {
+    margin-right: 0;
+  }
+}
+
 // Top level navigation links and search link, used when JavaScript is not available
 .gem-c-layout-super-navigation-header__navigation-item-link,
 .gem-c-layout-super-navigation-header__search-item-link {
@@ -159,11 +169,6 @@ $search-icon-height: 20px;
   @include govuk-link-common;
   @include govuk-link-style-no-visited-state;
 
-  @include govuk-media-query($from: "desktop") {
-    display: block;
-    margin: 0;
-  }
-
   &::after {
     @include pseudo-underline;
   }
@@ -180,7 +185,6 @@ $search-icon-height: 20px;
   &:link,
   &:visited {
     color: govuk-colour("white");
-    float: left;
     font-size: 16px;
     font-size: govuk-px-to-rem(16px);
     height: govuk-spacing(4);
@@ -354,12 +358,6 @@ $search-icon-height: 20px;
       }
     }
   }
-
-  @include govuk-media-query($from: "desktop") {
-    display: block;
-    float: left;
-    right: 0;
-  }
 }
 
 // JS available - targets the "Menu" toggle button
@@ -546,19 +544,30 @@ $search-icon-height: 20px;
 
 // JS available - dropdown menu
 .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
+  width: 100%;
+  order: 1; // Ensure the dropdown menu appears after the super navigation buttons which have a default order of 0
   background: $govuk-rebrand-template-background-colour;
-  border-bottom: 1px govuk-colour("mid-grey") solid;
   padding-top: govuk-spacing(6);
 
-  @include govuk-media-query($until: 300px) {
-    padding-top: 80px;
-  }
-
   @include govuk-media-query($from: "desktop") {
     padding-top: govuk-spacing(8);
   }
 }
 
+// Ensure the dropdown menu background is offset from the menu height and
+// takes up the full screen width
+.govuk-frontend-supported .gem-c-layout-super-navigation-header {
+  &::before {
+    content: "";
+    position: absolute;
+    top: $navbar-height;
+    bottom: 0;
+    width: 100%;
+    background: $govuk-rebrand-template-background-colour;
+    box-shadow: 0 1px govuk-colour("mid-grey");
+  }
+}
+
 // JS available - styles the links in the dropdown menu
 .gem-c-layout-super-navigation-header__dropdown-list-item {
   box-sizing: border-box;
@@ -694,11 +703,13 @@ $search-icon-height: 20px;
   .gem-c-layout-super-navigation-header__header-logo {
     padding: 10px 0 !important; // stylelint-disable-line declaration-no-important
   }
-}
 
-// Used to add a transparent bottom border for forced-colour modes
-.transparent-bottom-border {
-  border-bottom: 1px solid transparent;
+  // Hide menu links, buttons and dropdown
+  .gem-c-layout-super-navigation-header__navigation-item,
+  .gem-c-layout-super-navigation-header__search-item,
+  .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
+    display: none;
+  }
 }
 
 // stylelint-enable max-nesting-depth

data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss

@@ -50,8 +50,6 @@
   @include govuk-media-query($from: tablet) {
     line-height: 1.28;
   }
-
-  @include govuk-template-link-focus-override;
 }
 
 .gem-c-related-navigation__link--truncated-links {
@@ -70,19 +68,10 @@
 
 .gem-c-related-navigation__section-link {
   font-weight: bold;
-
-  @include govuk-template-link-focus-override;
 }
 
 .gem-c-related-navigation__section-link--other {
   font-weight: normal;
-
-  @include govuk-template-link-focus-override;
-}
-
-.gem-c-related-navigation__section-link--footer {
-
-  @include govuk-template-link-focus-override;
 }
 
 .gem-c-related-navigation__section-link--inline {

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

@@ -1,5 +1,6 @@
 @use "sass:color";
 @import "govuk_publishing_components/individual_component_support";
+@import "mixins/css3";
 
 $input-size: 40px;
 $large-input-size: 50px;

data/app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss

@@ -16,7 +16,7 @@ $choices-border-radius-item: 0 !default;
 $choices-z-index: 2 !default;
 $choices-button-dimension: 12px !default;
 
-@import "mixins/prefixed-transform";
+@import "mixins/css3";
 @import "govuk/components/label/label";
 @import "choices.js/src/styles/choices";
 

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

@@ -24,7 +24,6 @@ $share-button-height: 30px;
 .gem-c-share-links__link {
   margin-right: govuk-spacing(6);
   @include govuk-font(16, $weight: bold);
-  @include govuk-template-link-focus-override;
 }
 
 .gem-c-share-links__link-icon {

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

@@ -1,4 +1,5 @@
 @import "govuk_publishing_components/individual_component_support";
+@import "mixins/css3";
 
 .gem-c-subscription-links {
   @include govuk-text-colour;

data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss

@@ -3,7 +3,6 @@
 .gem-c-translation-nav {
   margin-bottom: govuk-spacing(6);
   border-bottom: 1px solid $govuk-border-colour;
-  @include responsive-top-margin;
   @include govuk-text-colour;
   @include govuk-font(16);
 }
@@ -49,7 +48,3 @@
   border-right: 0;
   border-left: 0;
 }
-
-.gem-c-translation-nav--no-margin-top {
-  margin-top: 0;
-}

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

@@ -6,6 +6,7 @@
 // - alphagov/govspeak: ✔︎
 
 // stylelint-disable max-nesting-depth
+@use "sass:color";
 
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
@@ -38,7 +39,7 @@
         width: $thumbnail-width;
         height: 140px;
         background: govuk-colour("white");
-        outline: $govuk-border-width solid transparentize(govuk-colour("black"), .9);
+        outline: $govuk-border-width solid color.adjust(govuk-colour("black"), $alpha: -0.9);
         box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4);
       }
 

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

@@ -10,6 +10,7 @@
 // https://github.com/alphagov/magna-charta/blob/master/demo/stylesheets/magna-charta.css
 
 // stylelint-disable max-nesting-depth
+@use "sass:list";
 
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
@@ -92,9 +93,9 @@
       }
 
       // Key colours
-      @for $i from 0 to length($bar-colours) {
+      @for $i from 0 to list.length($bar-colours) {
         .mc-key-#{$i + 1} {
-          border-left-color: nth($bar-colours, $i + 1);
+          border-left-color: list.nth($bar-colours, $i + 1);
         }
       }
     }
@@ -150,10 +151,10 @@
         }
 
         // Bar colours
-        @for $i from 0 to length($bar-colours) {
+        @for $i from 0 to list.length($bar-colours) {
           .mc-bar-#{$i + 1} {
-            background-color: nth($bar-colours, $i + 1);
-            color: nth($bar-text-colours, $i + 1);
+            background-color: list.nth($bar-colours, $i + 1);
+            color: list.nth($bar-text-colours, $i + 1);
           }
         }
 
@@ -211,15 +212,15 @@
     }
 
     // Charts with multiple columns get different coloured bars
-    $len: length($bar-colours);
+    $len: list.length($bar-colours);
 
     @for $i from 0 to $len {
       .mc-tr .mc-td.mc-bar-cell.mc-bar-#{$i + 1} {
-        background-color: nth($bar-colours, $i + 1);
+        background-color: list.nth($bar-colours, $i + 1);
       }
 
       .mc-tr .mc-th.mc-key-#{$i + 1} {
-        border-left-color: nth($bar-colours, $i + 1);
+        border-left-color: list.nth($bar-colours, $i + 1);
       }
     }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_content-block.scss

@@ -0,0 +1,27 @@
+@import "govuk/core/lists";
+@import "govuk/core/typography";
+
+.content-block,
+.content-block__contact-key,
+.content-block__contact-value,
+.content-block__contact-list {
+  margin: 0;
+  padding: 0;
+}
+
+.content-block__contact-list {
+  .content-block__contact-key {
+    @extend %govuk-heading-m;
+  }
+}
+
+.content-block__contact-list--nested {
+  .content-block__contact-key {
+    @extend %govuk-heading-s;
+  }
+}
+
+.content-block .content-block__list {
+  @extend %govuk-list;
+  margin-left: 0;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_css3.scss

@@ -3,3 +3,9 @@
   -ms-transform: scale($size);  // IE 9
   transform: scale($size);  // Firefox 16+, IE 10+, Opera
 }
+
+@mixin prefixed-transform($translateY: 0, $rotate: 0, $scale: 1) {
+  -webkit-transform: translateY($translateY) rotate($rotate) scale($scale);
+  -ms-transform: translateY($translateY) rotate($rotate) scale($scale);
+  transform: translateY($translateY) rotate($rotate) scale($scale);
+}

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss

@@ -5,16 +5,3 @@
     margin-bottom: govuk-spacing(7);
   }
 }
-
-@mixin responsive-top-margin {
-  margin-top: govuk-spacing(3);
-
-  @include govuk-media-query($from: tablet) {
-    margin-top: govuk-spacing(7);
-  }
-}
-
-@mixin responsive-vertical-margins {
-  @include responsive-bottom-margin;
-  @include responsive-top-margin;
-}

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

@@ -4,9 +4,6 @@
 @import "govuk/base";
 
 @import "components/mixins/margins";
-// TODO: remove this focus override when govuk_template is no longer used
-@import "components/mixins/govuk-template-link-focus-override";
-@import "components/mixins/css3";
 
 $govuk-suppressed-warnings: (
   organisation-colours