govuk_publishing_components 40.1.0 → 41.1.0

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

@@ -31,11 +31,11 @@
 }
 
 .gem-c-button__info-text {
-  @include govuk-text-colour;
-  @include govuk-font($size: 16);
   display: block;
   max-width: 14em;
   margin-top: .5em;
+  @include govuk-text-colour;
+  @include govuk-font($size: 16);
 }
 
 .gem-c-button--secondary {

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

@@ -9,23 +9,12 @@
 .gem-c-cards__list {
   list-style: none;
   padding: 0;
-  // Remove the outermost left and right margin from the internal margin of the list items.
-  margin: 0 govuk-spacing(-3);
-
+  margin: 0;
   display: grid;
-  grid-auto-flow: row;   // Use CSS grid to calculate the number of rows
-  grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid
-  grid-template-columns: fractions(1);
-
-  @include govuk-media-query($from: "tablet") {
-    grid-template-columns: fractions(2);
-  }
+  grid-column-gap: govuk-spacing(6); // Use deprecated grid-column-gap for Grade C browser support
+  column-gap: govuk-spacing(6);
 
   @include govuk-media-query($from: "desktop") {
-    // Note that browsers that don't support CSS grid display the component as one column on all
-    // breakpoints
-    grid-template-columns: fractions(3);
-
     // For browsers that don't support CSS grid, constrain the width to 50% to improve usability
     // especially for screen magnifier users
     width: 50%;
@@ -38,16 +27,21 @@
 }
 
 .gem-c-cards__list--two-column-desktop {
+  @include govuk-media-query($from: "tablet") {
+    grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid
+    grid-template-columns: fractions(2); // Note that browsers that don't support CSS grid display the component as one column on all breakpoints
+  }
+}
+
+.gem-c-cards__list--three-column-desktop {
   @include govuk-media-query($from: "desktop") {
-    grid-template-columns: fractions(2);
+    grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid
+    grid-template-columns: fractions(3); // Note that browsers that don't support CSS grid display the component as one column on all breakpoints
   }
 }
 
 .gem-c-cards__list-item {
   border-top: 1px solid $govuk-border-colour;
-  // We use grid to split the container into column widths, so manage the horizontal spacing with
-  // internal margins.
-  margin: 0 govuk-spacing(3);
   padding: govuk-spacing(1) 0 govuk-spacing(4) 0;
 }
 
@@ -55,12 +49,17 @@
   // this wrapper ensures that the clickable area of the card only
   // covers the area of the card containing text so in a grid of cards
   // there is space above and below each link
-  padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) 0;
+  padding: 19px 0 4px;
   position: relative;
 }
 
 .gem-c-cards__sub-heading {
-  margin-bottom: govuk-spacing(2);
+  margin: 0 govuk-spacing(6) govuk-spacing(2) 0;
+
+  // Ensure card content width is constrained to two thirds on desktop
+  @include govuk-media-query($from: "desktop") {
+    max-width: 66.6667%;
+  }
 }
 
 .gem-c-cards__link {
@@ -81,10 +80,12 @@
     border-right: $width solid $govuk-brand-colour;
     border-top: $width solid $govuk-brand-colour;
     content: "";
+    display: block;
     height: $dimension;
     position: absolute;
     right: govuk-spacing(1);
-    top: govuk-spacing(3);
+    top: 50%;
+    margin-top: 5px;
     @include prefixed-transform($rotate: 45deg);
     width: $dimension;
   }
@@ -103,7 +104,31 @@
 }
 
 .gem-c-cards__description {
-  margin: 0 govuk-spacing(-6) 0 0;
+  margin: 0 govuk-spacing(6) 0 0;
+
+  // Ensure card content width is constrained to two thirds on desktop
+  @include govuk-media-query($from: "desktop") {
+    max-width: 66.6667%;
+  }
+}
+
+.gem-c-cards__list--two-column-desktop,
+.gem-c-cards__list--three-column-desktop {
+  .gem-c-cards__sub-heading {
+    max-width: 100%;
+  }
+
+  .gem-c-cards__description {
+    margin: 0;
+    max-width: 100%;
+  }
+
+  .gem-c-cards__link {
+    &::before {
+      top: 27px;
+      margin: 0;
+    }
+  }
 }
 
 @include govuk-media-query($media-type: print) {

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

@@ -12,18 +12,18 @@
 }
 
 .gem-c-contents-list__title {
+  margin: 0;
   @include govuk-text-colour;
   @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
-  margin: 0;
 }
 
 .gem-c-contents-list__list,
 .gem-c-contents-list__nested-list {
-  @include govuk-text-colour;
-  @include govuk-font($size: 16);
   margin: 0;
   padding: 0;
   list-style-type: none;
+  @include govuk-text-colour;
+  @include govuk-font($size: 16);
 }
 
 .gem-c-contents-list__link {

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

@@ -15,10 +15,8 @@
 
 .gem-c-contextual-guidance__wrapper {
   position: relative;
-
-  @include govuk-font(19);
-
   margin-bottom: govuk-spacing(7);
+  @include govuk-font(19);
 
   @include govuk-media-query($from: tablet) {
     margin-bottom: govuk-spacing(7);

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

@@ -17,8 +17,9 @@
 }
 
 .gem-c-contextual-sidebar__text {
-  @include govuk-font(16);
   margin-bottom: govuk-spacing(1);
+  @include govuk-font(16);
+
   @include govuk-media-query($from: tablet) {
     margin-bottom: govuk-spacing(2);
   }

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

@@ -47,17 +47,6 @@ $govuk-header-link-underline-thickness: 3px;
 
 .gem-c-cross-service-header__button {
   display: none;
-
-  .toggle-enabled & {
-    display: inline;
-    display: flex;
-
-    @include govuk-media-query($from: tablet) {
-      display: none;
-    }
-  }
-
-  @include govuk-font($size: 19, $weight: bold);
   position: relative;
   align-items: center;
   cursor: pointer;
@@ -68,6 +57,17 @@ $govuk-header-link-underline-thickness: 3px;
   padding: govuk-spacing(2) 0 govuk-spacing(1) govuk-spacing(4);
   background: none;
 
+  @include govuk-font($size: 19, $weight: bold);
+
+  .toggle-enabled & {
+    display: inline;
+    display: flex;
+
+    @include govuk-media-query($from: tablet) {
+      display: none;
+    }
+  }
+
   &::before {
     content: "";
     position: absolute;
@@ -141,11 +141,11 @@ $govuk-header-link-underline-thickness: 3px;
 
 // start One Login header styles
 .gem-c-one-login-header {
-  @include govuk-font($size: 19);
   color: govuk-colour("white");
   background: govuk-colour("black");
   border-bottom: govuk-spacing(2) solid $govuk-link-colour;
   position: relative;
+  @include govuk-font($size: 19);
 }
 
 .gem-c-one-login-header__container {
@@ -171,9 +171,9 @@ $govuk-header-link-underline-thickness: 3px;
 .gem-c-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;
@@ -235,15 +235,15 @@ $govuk-header-link-underline-thickness: 3px;
 }
 
 .gem-c-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-block;
   margin-right: govuk-spacing(2);
   font-size: 30px; // We don't have a mixin that produces 30px font size
   line-height: 1;
 
+  // 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);
+
   @include govuk-media-query($from: tablet) {
     display: inline;
 
@@ -366,11 +366,11 @@ $govuk-header-link-underline-thickness: 3px;
 }
 
 .gem-c-service-header__heading {
-  @include govuk-font($size: 24, $weight: bold);
   color: $govuk-text-colour;
   padding: govuk-spacing(3) 0;
   margin: 0;
   flex-grow: 1;
+  @include govuk-font($size: 24, $weight: bold);
 
   @include govuk-media-query($until: tablet) {
     padding: govuk-spacing(1) 0;
@@ -382,10 +382,10 @@ $govuk-header-link-underline-thickness: 3px;
 }
 
 .gem-c-service-header__nav-list {
-  @include govuk-font($size: 19, $weight: bold);
   list-style: none;
   margin: 0;
   padding: 0;
+  @include govuk-font($size: 19, $weight: bold);
 
   @include govuk-media-query($from: tablet) {
     @include govuk-font($size: 19, $weight: bold);

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

@@ -1,10 +1,10 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-document-list {
-  @include govuk-text-colour;
-  @include govuk-font(19);
   margin: 0;
   padding: 0;
+  @include govuk-text-colour;
+  @include govuk-font(19);
 }
 
 .gem-c-document-list__item {
@@ -19,8 +19,8 @@
 }
 
 .gem-c-document-list__item-title {
-  @include govuk-font($size: 19, $weight: bold);
   display: inline-block;
+  @include govuk-font($size: 19, $weight: bold);
 }
 
 .gem-c-document-list--no-underline {
@@ -57,8 +57,8 @@
 }
 
 .gem-c-document-list__item-description {
-  @include govuk-text-colour;
   margin: govuk-spacing(1) 0;
+  @include govuk-text-colour;
 }
 
 .gem-c-document-list__subtext {
@@ -79,12 +79,16 @@
 }
 
 .gem-c-document-list__attribute {
-  @include govuk-text-colour;
-  @include govuk-font(16);
-  color: $govuk-secondary-text-colour;
   display: inline-block;
   list-style: none;
   padding-right: govuk-spacing(4);
+  @include govuk-text-colour;
+  @include govuk-font(16);
+
+  & { // stylelint-disable-line no-duplicate-selectors
+    // overriding govuk-text-colour mixin
+    color: $govuk-secondary-text-colour;
+  }
 
   .direction-rtl & {
     padding-right: 0;
@@ -103,8 +107,8 @@
 }
 
 .gem-c-document-list__highlight-text {
-  @include govuk-font(16, bold);
   margin: 0 0 govuk-spacing(3) 0;
+  @include govuk-font(16, bold);
 }
 
 .gem-c-document-list__children {
@@ -125,10 +129,10 @@
 }
 
 .gem-c-document-list-child {
-  @include govuk-font($size: 16);
   position: relative;
   padding-left: govuk-spacing(5);
   padding-top: govuk-spacing(2);
+  @include govuk-font($size: 16);
 
   &::before {
     content: "";
@@ -171,9 +175,9 @@
 }
 
 .gem-c-document-list-child__description {
-  @include govuk-text-colour;
   margin-top: govuk-spacing(1);
   margin-bottom: govuk-spacing(1);
+  @include govuk-text-colour;
 
   @include govuk-media-query($until: tablet) {
     display: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_emergency-banner.scss

@@ -1,11 +1,11 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-emergency-banner {
-  @include govuk-font(19);
   background-color: govuk-colour("mid-grey");
   color: govuk-colour("white");
   margin-top: 2px;
   padding: govuk-spacing(3) 0;
+  @include govuk-font(19);
 
   @include govuk-media-query($from: tablet) {
     padding: govuk-spacing(6) 0;
@@ -22,8 +22,8 @@
 }
 
 .gem-c-emergency-banner__heading {
-  @include govuk-font(24, $weight: bold);
   margin: 0;
+  @include govuk-font(24, $weight: bold);
 }
 
 .gem-c-emergency-banner__heading--homepage {
@@ -35,10 +35,10 @@
 }
 
 .gem-c-emergency-banner__description {
-  @include govuk-font(19);
   color: govuk-colour("white");
   margin-top: 0;
   margin-bottom: govuk-spacing(4);
+  @include govuk-font(19);
 
   &:last-child {
     margin-bottom: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss

@@ -13,8 +13,8 @@
 }
 
 .gem-c-error-alert__message {
-  @include govuk-font(19, $weight: bold);
   margin: 0;
+  @include govuk-font(19, $weight: bold);
 }
 
 .gem-c-error-summary__title {
@@ -29,8 +29,8 @@
 }
 
 .gem-c-error-summary__body {
-  @include govuk-font(19);
   margin: 0;
+  @include govuk-font(19);
 }
 
 .gem-c-error-alert:focus {

data/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss

@@ -2,6 +2,6 @@
 @import "govuk/components/error-summary/error-summary";
 
 .gem-c-error-summary__list-item {
-  @include govuk-font($size: 19, $weight: bold);
   color: $govuk-error-colour;
+  @include govuk-font($size: 19, $weight: bold);
 }

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

@@ -93,13 +93,13 @@
 }
 
 .gem-c-feedback__prompt-link {
-  @include govuk-font(19);
   background: transparent;
   color: govuk-colour("black");
   box-shadow: 0 3px 0 govuk-colour("black");
   border: 1px govuk-colour("black") solid;
   margin-bottom: 0;
   width: 100%;
+  @include govuk-font(19);
 
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
@@ -173,15 +173,15 @@
 
   // this comes from the backend so we can't put a class on it
   h2 {
+    margin: 0 0 govuk-spacing(3) 0;
     @include govuk-text-colour;
     @include govuk-font($size: 24, $weight: bold);
-    margin: 0 0 govuk-spacing(3) 0;
   }
 
   p {
+    margin: 0 0 govuk-spacing(3) 0;
     @include govuk-text-colour;
     @include govuk-font($size: 19);
-    margin: 0 0 govuk-spacing(3) 0;
   }
 
   a {
@@ -192,10 +192,10 @@
 }
 
 .gem-c-feedback__error-message {
-  @include govuk-font(19, $weight: bold);
   display: block;
   padding: 4px 0 0;
   color: $govuk-error-colour;
+  @include govuk-font(19, $weight: bold);
 }
 
 .gem-c-feedback__form {
@@ -208,21 +208,21 @@
 }
 
 .gem-c-feedback__form-heading {
+  margin: 0 0 govuk-spacing(3) 0;
   @include govuk-text-colour;
   @include govuk-font(24, $weight: bold);
-  margin: 0 0 govuk-spacing(3) 0;
 }
 
 .gem-c-feedback__form-paragraph {
+  margin: 0 0 govuk-spacing(6) 0;
   @include govuk-text-colour;
   @include govuk-font(19);
-  margin: 0 0 govuk-spacing(6) 0;
 }
 
 .gem-c-feedback__form-label {
-  @include govuk-font(16);
   display: block;
   padding-bottom: govuk-spacing(3);
+  @include govuk-font(16);
 }
 
 .gem-c-feedback__close {
@@ -249,10 +249,10 @@
 // static.css on GOV.UK overwrites the component styles using input[type="text"]
 // so we need to apply  govuk-input styles using a stronger selector
 .gem-c-feedback .gem-c-input[type="text"] {
-  @include govuk-font($size: 19);
   margin: 0;
   padding: govuk-spacing(1);
   border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+  @include govuk-font($size: 19);
 
   &:focus {
     outline: $govuk-focus-width solid $govuk-focus-colour;

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

@@ -1,14 +1,14 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-image-card {
-  @include govuk-clearfix;
-  @include govuk-text-colour;
   position: relative;
   margin-bottom: govuk-spacing(6);
   display: flex;
   display: -ms-flexbox;
   flex-direction: column-reverse;
   -ms-flex-direction: column-reverse;
+  @include govuk-text-colour;
+  @include govuk-clearfix;
 
   @include govuk-media-query($from: mobile, $until: tablet) {
     display: block;
@@ -183,11 +183,11 @@
 
 .gem-c-image-card__context,
 .gem-c-image-card__metadata {
-  @include govuk-font($size: false);
   font-size: 16px;
   font-size: govuk-px-to-rem(16px);
   margin: 0 0 calc(govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey");
+  @include govuk-font($size: false);
 
   @include govuk-media-query($from: tablet) {
     margin-bottom: 0;
@@ -195,18 +195,18 @@
 }
 
 .gem-c-image-card__description {
-  @include govuk-font($size: 19);
   padding-top: calc(govuk-spacing(3) / 2);
   word-wrap: break-word;
+  @include govuk-font($size: 19);
 }
 
 .gem-c-image-card__list {
-  @include govuk-font($size: 19);
   position: relative;
   z-index: 2;
   padding: calc(govuk-spacing(3) / 2) 0 0 0;
   margin: 0;
   list-style: none;
+  @include govuk-font($size: 19);
 
   .gem-c-image-card__list-item {
     margin-bottom: govuk-spacing(2);
@@ -245,13 +245,16 @@
 
 .gem-c-image-card--large {
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: one-half, $at: tablet);
-
     margin-bottom: govuk-spacing(2);
     float: none;
     width: auto;
     max-width: 100%;
-    padding: 0;
+    @include govuk-grid-column($width: one-half, $at: tablet);
+
+    & { // stylelint-disable-line no-duplicate-selectors
+      // overriding the padding from govuk-grid-column mixin
+      padding: 0;
+    }
 
     @include govuk-media-query($from: tablet) {
       padding: 0 govuk-spacing(2) 0 0;
@@ -260,10 +263,13 @@
   }
 
   .gem-c-image-card__text-wrapper {
+    overflow: hidden;
     @include govuk-grid-column($width: one-half, $at: tablet);
 
-    padding: 0;
-    overflow: hidden;
+    & { // stylelint-disable-line no-duplicate-selectors
+      // overriding the padding from govuk-grid-column mixin
+      padding: 0;
+    }
 
     @include govuk-media-query($from: tablet) {
       float: right;

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

@@ -1,11 +1,11 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-intervention {
+  background-color: govuk-colour("light-grey");
+  border-left: 10px solid $govuk-success-colour;
   @include govuk-text-colour;
   @include govuk-responsive-padding(3);
   @include govuk-responsive-margin(6, "bottom");
-  background-color: govuk-colour("light-grey");
-  border-left: 10px solid $govuk-success-colour;
 
   .govuk-body:last-of-type {
     margin-bottom: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -11,11 +11,11 @@
 
 .gem-c-inverse-header .gem-c-inverse-header__supplement,
 .gem-c-inverse-header .publication-header__last-changed {
+  color: govuk-colour("white");
+  margin: 0;
   // This publication-header class is injected on publication pages, really
   // it should be a component class or be a component in it's own right.
   @include govuk-font($size: 16, $line-height: 1.5);
-  color: govuk-colour("white");
-  margin: 0;
 }
 
 .gem-c-inverse-header--full-width {