govuk_publishing_components 40.1.0 → 41.1.0

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

@@ -107,14 +107,14 @@ $after-button-padding-left: govuk-spacing(4);
 }
 
 .gem-c-layout-super-navigation-header__button-container {
-  @include govuk-media-query($until: "tablet") {
-    margin-right: govuk-spacing(-3);
-  }
-
   top: -$black-bar-height;
   position: absolute;
   right: 0;
 
+  @include govuk-media-query($until: "tablet") {
+    margin-right: govuk-spacing(-3);
+  }
+
   @include govuk-media-query($until: 300px) {
     position: static;
   }
@@ -147,15 +147,14 @@ $after-button-padding-left: govuk-spacing(4);
 // Top level navigation links and search link.
 .gem-c-layout-super-navigation-header__navigation-item-link,
 .gem-c-layout-super-navigation-header__search-item-link {
-  @include govuk-link-common;
-  @include govuk-link-style-no-visited-state;
-
   display: inline-block;
   font-size: 19px;
   font-size: govuk-px-to-rem(19px);
   font-weight: bold;
   padding: govuk-spacing(3) 0;
   position: relative;
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
 
   @include govuk-media-query($from: "desktop") {
     display: block;
@@ -169,6 +168,12 @@ $after-button-padding-left: govuk-spacing(4);
   &,
   &:link,
   &:visited {
+    // stylelint-disable max-nesting-depth
+    float: left;
+    font-size: 16px;
+    font-size: govuk-px-to-rem(16px);
+    height: govuk-spacing(4);
+
     @include focus-and-focus-visible {
       @include govuk-focused-text;
     }
@@ -196,12 +201,6 @@ $after-button-padding-left: govuk-spacing(4);
       @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding);
     }
 
-    // stylelint-disable max-nesting-depth
-    float: left;
-    font-size: 16px;
-    font-size: govuk-px-to-rem(16px);
-    height: govuk-spacing(4);
-
     &::before {
       @include chevron(govuk-colour("white"), true);
     }
@@ -393,6 +392,19 @@ $after-button-padding-left: govuk-spacing(4);
 
 // Styles for top level navigation toggle button.
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button {
+  font-size: 16px;
+  font-size: govuk-px-to-rem(16px);
+  font-weight: 700;
+  background: govuk-colour("black");
+  border: 0;
+  box-sizing: border-box;
+  color: govuk-colour("white");
+  cursor: pointer;
+  height: $black-bar-height;
+  padding: 0;
+  position: relative;
+  margin: 0;
+  vertical-align: top;
   @include govuk-link-common;
   @include govuk-link-style-no-visited-state;
   @include govuk-link-style-no-underline;
@@ -415,20 +427,6 @@ $after-button-padding-left: govuk-spacing(4);
     }
   }
 
-  font-size: 16px;
-  font-size: govuk-px-to-rem(16px);
-  font-weight: 700;
-  background: govuk-colour("black");
-  border: 0;
-  box-sizing: border-box;
-  color: govuk-colour("white");
-  cursor: pointer;
-  height: $black-bar-height;
-  padding: 0;
-  position: relative;
-  margin: 0;
-  vertical-align: top;
-
   @include govuk-media-query($from: "desktop") {
     background: govuk-colour("black");
     display: block;
@@ -490,11 +488,11 @@ $after-button-padding-left: govuk-spacing(4);
     // stylelint-disable max-nesting-depth
     &:hover {
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+        color: govuk-colour("mid-grey");
+
         &::before {
           @include chevron(govuk-colour("mid-grey"), true);
         }
-
-        color: govuk-colour("mid-grey");
       }
 
       &::after {
@@ -607,7 +605,6 @@ $after-button-padding-left: govuk-spacing(4);
 
 // Styles for search toggle button.
 .gem-c-layout-super-navigation-header__search-toggle-button {
-  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
   background: none;
   border: 0;
   color: govuk-colour("white");
@@ -616,6 +613,7 @@ $after-button-padding-left: govuk-spacing(4);
   padding: govuk-spacing(3);
   position: relative;
   width: $search-width-or-height;
+  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
 
   @include focus-and-focus-visible {
     @include govuk-focused-text;
@@ -753,14 +751,14 @@ $after-button-padding-left: govuk-spacing(4);
 
 // Dropdown menu.
 .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
-  @include govuk-media-query($until: 300px) {
-    padding-top: 80px;
-  }
-
   background: govuk-colour("light-grey");
   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);
   }
@@ -877,11 +875,11 @@ $after-button-padding-left: govuk-spacing(4);
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
-  @include govuk-typography-common;
   font-size: 16px;
   font-size: govuk-px-to-rem(16px);
   font-weight: normal;
   margin: govuk-spacing(1) 0 0 0;
+  @include govuk-typography-common;
 }
 
 .gem-c-layout-super-navigation-header__search-form {

data/app/assets/stylesheets/govuk_publishing_components/components/_lead-paragraph.scss

@@ -1,12 +1,12 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-lead-paragraph {
-  @include govuk-text-colour;
-  @include govuk-font(24);
   margin-top: 0;
-  @include responsive-bottom-margin;
   // Ensure the text has a line-length of around 60 characters
   max-width: 30em;
+  @include govuk-text-colour;
+  @include responsive-bottom-margin;
+  @include govuk-font(24);
 }
 
 .gem-c-lead-paragraph--inverse {

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

@@ -7,9 +7,9 @@
   @include govuk-clearfix;
 
   a {
+    font-weight: bold;
     @include govuk-link-common;
     @include govuk-link-style-default;
-    font-weight: bold;
   }
 
   .gem-c-metadata__definition-link {

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

@@ -2,8 +2,8 @@
 @import "govuk/components/notification-banner/notification-banner";
 
 .gem-c-notice {
-  @include govuk-responsive-margin(8, "bottom");
   clear: both;
+  @include govuk-responsive-margin(8, "bottom");
 
   .govuk-govspeak {
     p:last-child {

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

@@ -28,8 +28,8 @@
 }
 
 .gem-c-option-select__title {
-  @include govuk-font(19);
   margin: 0;
+  @include govuk-font(19);
 }
 
 .gem-c-option-select__button {
@@ -111,8 +111,8 @@
 }
 
 .gem-c-option-select__filter-input {
-  @include govuk-font(19);
   background: url("option-select/input-icon.svg") govuk-colour("white") no-repeat -5px -3px;
+  @include govuk-font(19);
 
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
@@ -152,9 +152,9 @@
 }
 
 .gem-c-option-select__selected-counter {
-  @include govuk-font($size: 16);
   color: $govuk-text-colour;
   margin-top: 3px;
+  @include govuk-font($size: 16);
 }
 
 .gem-c-option-select.js-closed {

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -2,12 +2,18 @@
 
 // Default logo corresponds with the "medium stacked" Whitehall equivalent
 .gem-c-organisation-logo {
-  @include govuk-font($size: 19);
   font-weight: 400;
-  line-height: 1.35;
   // When this is a heading the margin needs to be set to stop it from
   // inheriting the browser's default margin:
   margin: 0;
+  @include govuk-typography-common;
+  @include govuk-font-size(19);
+
+  @include govuk-media-query($until: tablet) {
+    // only override line-height on small screens otherwise use govuk-font-size
+    // line-height
+    line-height: 1.35;
+  }
 }
 
 .gem-c-organisation-logo__container {
@@ -52,7 +58,11 @@
 .gem-c-organisation-logo__link {
   @include govuk-link-common;
   @include govuk-link-style-text;
-  font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif;
+
+  & { // stylelint-disable-line no-duplicate-selectors
+    // overriding the govuk-link font
+    font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif;
+  }
 
   &:hover {
     color: $govuk-link-hover-colour;

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

@@ -2,8 +2,8 @@
 @import "govuk/components/panel/panel";
 
 .gem-c-panel__prepend {
-  @include govuk-font($size: 24, $weight: bold);
   margin-bottom: govuk-spacing(3);
+  @include govuk-font($size: 24, $weight: bold);
 }
 
 .gem-c-panel__append {

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

@@ -1,30 +1,30 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-related-navigation {
-  @include govuk-text-colour;
   border-top: 2px solid govuk-colour("blue");
   margin-bottom: govuk-spacing(9);
+  @include govuk-text-colour;
 }
 
 .gem-c-related-navigation__main-heading {
-  @include govuk-font(19, $weight: bold);
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
+  @include govuk-font(19, $weight: bold);
 }
 
 .gem-c-related-navigation__sub-heading {
-  @include govuk-font(16);
   border-top: 1px solid govuk-colour("mid-grey");
   margin: 0;
   padding-top: govuk-spacing(3);
+  @include govuk-font(16);
 }
 
 .gem-c-related-navigation__sub-heading--footer {
-  @include govuk-font(19, $weight: bold);
   border-top: 0;
   padding-top: 0;
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
+  @include govuk-font(19, $weight: bold);
 }
 
 .gem-c-related-navigation__main-heading + .gem-c-related-navigation__sub-heading {
@@ -33,9 +33,9 @@
 }
 
 .gem-c-related-navigation__sub-heading--other {
-  @include govuk-font(19, $weight: bold);
   border-top: 0;
   padding-top: 0;
+  @include govuk-font(19, $weight: bold);
 }
 
 .gem-c-related-navigation__nav-section {
@@ -59,9 +59,9 @@
 }
 
 .gem-c-related-navigation__toggle {
+  display: none;
   @include govuk-link-common;
   @include govuk-link-style-no-visited-state;
-  display: none;
 
   .js-enabled & {
     display: inline-block;

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

@@ -1,13 +1,12 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-reorderable-list {
-  @include govuk-font(19, bold);
-
   list-style-type: none;
   margin-bottom: govuk-spacing(6);
   margin-top: 0;
   padding-left: 0;
   position: relative;
+  @include govuk-font(19, bold);
 
   .govuk-form-group {
     margin-bottom: 0;
@@ -57,8 +56,8 @@
 }
 
 .gem-c-reorderable-list__description {
-  @include govuk-font(16, regular);
   margin: 0;
+  @include govuk-font(16, regular);
 }
 
 .gem-c-reorderable-list__actions {

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

@@ -28,13 +28,13 @@ $large-input-size: 50px;
 }
 
 .gem-c-search__label {
-  @include govuk-font($size: 19, $line-height: $input-size);
   display: block;
   color: $govuk-text-colour;
+  @include govuk-font($size: 19, $line-height: $input-size);
 
   h1 {
-    @include govuk-font($size: 19, $line-height: $input-size);
     margin: 0;
+    @include govuk-font($size: 19, $line-height: $input-size);
   }
 
   .js-enabled & {
@@ -65,7 +65,6 @@ $large-input-size: 50px;
 }
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
-  @include govuk-font($size: 19, $line-height: (28 / 19));
   margin: 0;
   width: 100%;
   height: govuk-em(40, 16);
@@ -77,6 +76,8 @@ $large-input-size: 50px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  @include govuk-font($size: 19, $line-height: (28 / 19));
+
   @include govuk-media-query($from: tablet) {
     height: govuk-em(40, 19);
     padding: govuk-em(6, 19);

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

@@ -22,9 +22,8 @@ $share-button-height: 30px;
 }
 
 .gem-c-share-links__link {
-  @include govuk-font(16, $weight: bold);
   margin-right: govuk-spacing(6);
-
+  @include govuk-font(16, $weight: bold);
   @include govuk-template-link-focus-override;
 }
 
@@ -64,9 +63,9 @@ $column-width: 9.5em;
 
 .gem-c-share-links--columns {
   .gem-c-share-links__list {
-    @include govuk-clearfix;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax($column-width, 1fr));
+    @include govuk-clearfix;
   }
 
   .gem-c-share-links__list-item {

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

@@ -1,14 +1,13 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-step-nav-header {
-  @include govuk-font(24, $weight: bold);
-  @include govuk-text-colour;
-
   position: relative;
   padding: 10px;
   background: govuk-colour("light-grey");
   border-bottom: solid 1px govuk-colour("blue");
   margin-top: govuk-spacing(3);
+  @include govuk-font(24, $weight: bold);
+  @include govuk-text-colour;
 
   @include govuk-media-query($from: tablet) {
     padding: govuk-spacing(5);
@@ -16,8 +15,8 @@
 }
 
 .gem-c-step-nav-header__part-of {
-  @include govuk-font(19, $weight: bold);
   display: block;
+  @include govuk-font(19, $weight: bold);
 }
 
 @include govuk-media-query($media-type: print) {

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

@@ -1,9 +1,9 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .gem-c-step-nav-related {
-  @include govuk-text-colour;
   border-top: 2px solid govuk-colour("blue");
   margin-bottom: govuk-spacing(6);
+  @include govuk-text-colour;
 }
 
 .gem-c-step-nav-related__heading {
@@ -13,18 +13,18 @@
 }
 
 .gem-c-step-nav-related__links {
-  @include govuk-font(16);
   list-style: none;
   margin: 0;
   padding: 0;
+  @include govuk-font(16);
 }
 
 .gem-c-step-nav-related--singular {
   margin-bottom: govuk-spacing(2) + 3;
 
   .gem-c-step-nav-related__heading {
-    @include govuk-font(19, $weight: bold, $line-height: 1.4);
     margin-top: govuk-spacing(4);
+    @include govuk-font(19, $weight: bold, $line-height: 1.4);
   }
 
   .gem-c-step-nav-related__pretitle {

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

@@ -29,10 +29,10 @@ $top-border: solid 1px govuk-colour("mid-grey");
 // we want to ensure that both large and small step navs have the same size font on mobile
 // this will stop text resizing if compatibility mode is turned off
 @mixin step-nav-font($size, $tablet-size: $size, $weight: normal, $line-height: 1.3, $tablet-line-height: $line-height) {
-  @include govuk-typography-common;
   font-size: $size + px;
   font-weight: $weight;
   line-height: $line-height;
+  @include govuk-typography-common;
 
   @include govuk-media-query($from: tablet) {
     font-size: $tablet-size + px;
@@ -167,12 +167,12 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__button--title {
-  @include step-nav-font(19, $weight: bold, $line-height: 1.2);
   display: inline-block;
   padding: govuk-spacing(1) 0 0;
   text-align: left;
   color: govuk-colour("black");
   width: 100%;
+  @include step-nav-font(19, $weight: bold, $line-height: 1.2);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold);
@@ -184,11 +184,11 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__button--controls {
-  @include step-nav-font(15);
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
   margin: .5em 0 14px;
   padding: govuk-spacing(1) 0 govuk-spacing(1);
+  @include step-nav-font(15);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(15, $tablet-size: 19);
@@ -321,8 +321,8 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__circle--number {
-  @include step-nav-font(16, $weight: bold, $line-height: 29px);
   border: solid $stroke-width govuk-colour("mid-grey");
+  @include step-nav-font(16, $weight: bold, $line-height: 29px);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 29px, $tablet-line-height: 34px);
@@ -339,10 +339,10 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__circle--logic {
-  @include step-nav-font(19, $weight: bold, $line-height: 28px);
   left: 3px;
   width: govuk-em($number-circle-size, 19);
   height: govuk-em($number-circle-size, 19);
+  @include step-nav-font(19, $weight: bold, $line-height: 28px);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
@@ -395,9 +395,9 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__title {
-  @include govuk-text-colour;
-  @include step-nav-font(19, $weight: bold, $line-height: 1.4);
   margin: 0;
+  @include step-nav-font(19, $weight: bold, $line-height: 1.4);
+  @include govuk-text-colour;
 
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
@@ -405,11 +405,11 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__toggle-link {
-  @include step-nav-font(15, $line-height: 1.2);
   display: block;
   color: $govuk-link-colour;
   text-transform: capitalize;
   padding-bottom: govuk-spacing(6);
+  @include step-nav-font(15, $line-height: 1.2);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(15, $tablet-size: 19, $line-height: 1.2);
@@ -417,9 +417,9 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__panel {
-  @include govuk-text-colour;
-  @include step-nav-font(16);
   padding-bottom: govuk-spacing(5);
+  @include step-nav-font(16);
+  @include govuk-text-colour;
 
   .gem-c-step-nav--large & {
     @include step-nav-font(16, $tablet-size: 19);

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

@@ -58,10 +58,10 @@
 .gem-c-subscription-links__item--button {
   cursor: pointer;
   display: none;
-  @include govuk-font(19, $weight: bold);
   padding: govuk-spacing(2);
   border: 1px solid $gem-quiet-button-colour;
   background-color: $gem-secondary-button-background-colour;
+  @include govuk-font(19, $weight: bold);
 
   .js-enabled & {
     display: inline-block;

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

@@ -33,11 +33,11 @@ $table-row-even-background-colour: govuk-colour("light-grey");
     }
 
     .app-table__sort-link {
-      @include govuk-link-style-no-visited-state;
       position: relative;
       padding-right: $sort-link-arrow-size;
       color: $govuk-link-colour;
       text-decoration: none;
+      @include govuk-link-style-no-visited-state;
     }
 
     .app-table__sort-link:focus {

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

@@ -1,18 +1,18 @@
 @import "govuk_publishing_components/individual_component_support";
 
 .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);
-  margin-bottom: govuk-spacing(6);
-  border-bottom: 1px solid $govuk-border-colour;
 }
 
 .gem-c-translation-nav__list {
-  @include govuk-clearfix;
   list-style: none;
   margin: 0 (- govuk-spacing(2));
   padding: 0;
+  @include govuk-clearfix;
 }
 
 .gem-c-translation-nav__list-item {

data/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss

@@ -2,11 +2,11 @@
 @import "govuk/components/warning-text/warning-text";
 
 .gem-c-warning-text .govuk-warning-text__text {
+  margin: 0;
   // Ensure the font-size is always set to 19px
   // This prevents the default user agent styles being applied to heading elements used in the warning-text component following a change in v5.0.0, see:
   // https://github.com/alphagov/govuk-frontend/pull/4267
   @include govuk-font($size: 19, $weight: bold);
-  margin: 0;
 }
 
 .gem-c-warning-text__text--no-indent {

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

@@ -56,8 +56,8 @@
 
     .attachment-details {
       h2 {
-        @include govuk-font($size: 27);
         margin: 0;
+        @include govuk-font($size: 27);
       }
 
       p {
@@ -97,12 +97,13 @@
       }
 
       .accessibility-warning {
+        word-break: break-word;
+        word-wrap: break-word;
+
         h2 {
-          @include govuk-font($size: 16);
           margin: 0;
+          @include govuk-font($size: 16);
         }
-        word-break: break-word;
-        word-wrap: break-word;
       }
 
       .js-hidden {

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

@@ -19,8 +19,8 @@
   }
 
   .contact {
-    @include govuk-clearfix;
     position: relative;
+    @include govuk-clearfix;
 
     .content {
       float: none;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -13,14 +13,14 @@ $highlight-answer-color: govuk-colour("white");
     margin: 0 -1em 1em;
 
     p {
-      @include govuk-font($size: 24, $weight: bold);
       color: $highlight-answer-color;
+      @include govuk-font($size: 24, $weight: bold);
 
       em {
-        @include govuk-font($size: 80, $weight: bold);
         display: block;
         padding-top: .1em;
         color: $highlight-answer-color;
+        @include govuk-font($size: 80, $weight: bold);
       }
     }