govuk_publishing_components 21.59.0 → 21.61.0

data/app/assets/stylesheets/component_guide/application.scss

@@ -125,6 +125,10 @@ $gem-guide-border-width: 1px;
     background-color: govuk-colour("blue");
   }
 
+  &.black-background {
+    background-color: govuk-colour("black");
+  }
+
   &.component-output {
     padding: 0;
   }
@@ -214,10 +218,10 @@ $gem-guide-border-width: 1px;
       @include govuk-text-colour;
       @include govuk-font($size: 24, $weight: bold);
       margin: $govuk-gutter-half 0;
+    }
 
-      small {
-        @include govuk-font($size: 16, $weight: bold);
-      }
+    .example-title small {
+      @include govuk-font($size: 16, $weight: bold);
     }
   }
 }
@@ -232,16 +236,14 @@ html {
 }
 
 .hide-header-and-footer {
-  // scss-lint:disable IdSelector
-  // sass-lint:disable no-ids
+  // stylelint-disable selector-max-id
   #global-header,
   #global-header-bar,
   #global-breadcrumb,
   #footer {
     display: none;
   }
-  // sass-lint:enable no-ids
-  // scss-lint:enable IdSelector
+  // stylelint-enable selector-max-id
 }
 
 .component-guide-preview-page {
@@ -261,14 +263,12 @@ html {
 }
 
 // Hide survey banner
-// scss-lint:disable IdSelector
-// sass-lint:disable no-ids
+// stylelint-disable selector-max-id
 #user-satisfaction-survey-container,
 #global-cookie-message {
   display: none;
 }
-// sass-lint:enable no-ids
-// scss-lint:enable IdSelector
+// stylelint-enable selector-max-id
 
 // Rouge syntax highlighting
 // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
@@ -294,7 +294,6 @@ $code-0f: #c92424; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?
 $code-insert-bg: #def8ca;
 $code-delete-bg: #fadddd;
 
-// sass-lint:disable no-empty-rulesets
 .component-highlight {
 
   // Map Rouge / Pygments Tokens to work with 'Base 16' themes
@@ -391,7 +390,7 @@ $code-delete-bg: #fadddd;
   // Literals
   //
 
-  .l  {     // Literal
+  .l {     // Literal
     color: $code-09;
   }
 
@@ -491,10 +490,9 @@ $code-delete-bg: #fadddd;
     font-weight: bold;
   }
 }
-// sass-lint:enable no-empty-rulesets
 
 // Specific for this Gem, optimized for erb render statements
-.component-highlight {
+.component-highlight { // stylelint-disable-line no-duplicate-selectors
   .s2 {
     color: $code-08;
   }
@@ -503,3 +501,9 @@ $code-delete-bg: #fadddd;
     color: $code-09;
   }
 }
+
+.sticky-table-header {
+  position: sticky;
+  top: 0;
+  background: govuk-colour("white");
+}

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

@@ -44,6 +44,7 @@
 @import "components/label";
 @import "components/layout-footer";
 @import "components/layout-for-admin";
+@import "components/layout-for-public";
 @import "components/layout-header";
 @import "components/lead-paragraph";
 @import "components/metadata";

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -6,10 +6,8 @@
     display: table-cell;
     width: 50px;
     height: 45px;
-    // sass-lint:disable no-duplicate-properties
     background: image-url("govuk_publishing_components/action-link-arrow.png");
     background: image-url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent);
-    // sass-lint:enable no-duplicate-properties
     background-repeat: no-repeat;
     background-position: 0 50%;
     background-size: 37px auto;
@@ -103,10 +101,8 @@
   &:before {
     width: 30px;
     height: 30px;
-    // sass-lint:disable no-duplicate-properties
     background: image-url("govuk_publishing_components/action-link-arrow--simple.png");
     background: image-url("govuk_publishing_components/action-link-arrow--simple.svg"), linear-gradient(transparent, transparent);
-    // sass-lint:enable no-duplicate-properties
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;
@@ -119,10 +115,8 @@
 
 .gem-c-action-link--dark-icon {
   &:before {
-    // sass-lint:disable no-duplicate-properties
     background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
     background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
-    // sass-lint:enable no-duplicate-properties
   }
 }
 
@@ -151,10 +145,8 @@
   &:before {
     width: 80px;
     height: 70px;
-    // sass-lint:disable no-duplicate-properties
     background: image-url("govuk_publishing_components/action-link--nhs.png");
     background: image-url("govuk_publishing_components/action-link--nhs.svg"), linear-gradient(transparent, transparent);
-    // sass-lint:enable no-duplicate-properties
     background-repeat: no-repeat;
     background-size: 85% auto;
     background-position: 0 50%;

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

@@ -45,7 +45,7 @@
       position: relative;
     }
 
-    .govuk-breadcrumbs__link::after {
+    .govuk-breadcrumbs__link:after {
       content: "";
       position: absolute;
       top: -14px;

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

@@ -46,3 +46,7 @@
     @include govuk-visually-hidden;
   }
 }
+
+.gem-c-checkboxes__heading-text {
+  margin: 0;
+}

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

@@ -27,7 +27,6 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 }
 
 .gem-c-cookie-banner__button {
-
   &.govuk-grid-column-one-half-from-desktop {
     padding: 0;
   }
@@ -40,7 +39,6 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
     @include govuk-media-query($until: desktop) {
       margin-bottom: govuk-spacing(4);
     }
-
   }
 }
 
@@ -53,13 +51,11 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
   display: inline-block;
 }
 
-
 .gem-c-cookie-banner__confirmation {
   display: none;
   position: relative;
   padding: govuk-spacing(1);
 
-
   // This element is focused using JavaScript so that it's being read out by screen readers
   // for this reason we don't want to show the default outline or emphasise it visually using `govuk-focused-text`
   &:focus {
@@ -126,8 +122,7 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 }
 
 // Override the styles from govuk_template
-// scss-lint:disable IdSelector
-// sass-lint:disable no-ids
+// stylelint-disable selector-max-id
 .gem-c-cookie-banner#global-cookie-message {
   background-color: $govuk-cookie-banner-background;
   padding: govuk-spacing(4) 0;
@@ -155,5 +150,3 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
     }
   }
 }
-// sass-lint:enable no-ids
-// scss-lint:enable IdSelector

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

@@ -136,7 +136,6 @@
   margin-right: govuk-spacing(7);
 }
 
-
 // Feedback form styles
 .gem-c-feedback__error-summary {
   margin-bottom: govuk-spacing(3);

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss

@@ -1,3 +1,5 @@
+// stylelint-disable max-nesting-depth
+
 // Override govspeak styles with HTML publication specific ones
 .gem-c-govspeak-html-publication {
   margin-bottom: govuk-spacing(6) * 1.5;
@@ -59,12 +61,10 @@
       }
     }
 
-    // scss-lint:disable QualifyingElement
-    // sass-lint:disable no-qualifying-elements
+    // stylelint-disable selector-no-qualifying-type
     // this class will only be for tables and is to distinguish from a bare `table`
     // the row classes below should not be applied to anything else but `tr`s
     table.financial-data {
-
       .numeric {
         text-align: right;
         @include govuk-font(14, $weight: regular, $tabular: true);
@@ -134,7 +134,6 @@
         background-color: govuk-colour("light-grey", $legacy: "grey-3");
       }
     }
-    // sass-lint:enable no-qualifying-elements
-    // scss-lint:enable QualifyingElement
+    // stylelint-enable selector-no-qualifying-type
   }
 }

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

@@ -1,15 +1,10 @@
 .gem-c-heading {
-  @include govuk-text-colour;
-  @include govuk-font(27, $weight: bold);
   margin: 0;
 }
 
-.gem-c-heading--font-size-24 {
-  @include govuk-font(24, $weight: bold);
-}
-
-.gem-c-heading--font-size-19 {
-  @include govuk-font(19, $weight: bold);
+.gem-c-heading--font-size-27 {
+  @include govuk-text-colour;
+  @include govuk-font(27, $weight: bold);
 }
 
 // special case for publications and consultations pages

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

@@ -125,7 +125,7 @@
     .gem-c-image-card__list-item {
       position: relative;
 
-      &:before {
+      &:before { // stylelint-disable-line max-nesting-depth
         content: "-";
         position: absolute;
         left: (- govuk-spacing(3));

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

@@ -20,7 +20,7 @@
 
 .gem-c-input__wrapper {
   display: flex;
-  display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
+  display: -ms-flexbox;
 
   .gem-c-input {
     display: inline-block;

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

@@ -11,16 +11,13 @@
   color: govuk-colour("white");
 }
 
-
-.gem-c-inverse-header {
+.gem-c-inverse-header .gem-c-inverse-header__supplement,
+.gem-c-inverse-header .publication-header__last-changed {
   // 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.
-  .gem-c-inverse-header__supplement,
-  .publication-header__last-changed {
-    @include govuk-font($size: 16, $line-height: 1.5);
-    color: govuk-colour("white");
-    margin: 0;
-  }
+  @include govuk-font($size: 16, $line-height: 1.5);
+  color: govuk-colour("white");
+  margin: 0;
 }
 
 .gem-c-inverse-header--full-width {

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -1 +1,9 @@
 @import "govuk/components/footer/footer";
+
+.gem-c-layout-footer--border {
+  border-top: govuk-spacing(2) solid govuk-colour("blue");
+}
+
+.gem-c-layout-footer .govuk-footer__list {
+  padding-bottom: govuk-spacing(7);
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -0,0 +1,4 @@
+.gem-c-layout-for-public {
+  margin: 0;
+  font-family: $govuk-font-family;
+}

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/components/search";
+@import "govuk_publishing_components/components/skip-link";
 @import "govuk/components/header/header";
 @import "govuk/components/tag/tag";
 
@@ -18,8 +20,80 @@
   border-bottom-color: govuk-colour("dark-grey", $legacy: "grey-1");
 }
 
+.gem-c-layout-header--no-bottom-border,
+.gem-c-layout-header--no-bottom-border .govuk-header__container {
+  margin-bottom: 0;
+  border-bottom: 0;
+
+  @include govuk-media-query($until: tablet) {
+    padding-bottom: govuk-spacing(1);
+  }
+}
+
+.gem-c-layout-header--search-left {
+  .gem-c-header__menu-button {
+    margin-top: - govuk-spacing(7);
+    left: 0;
+  }
+
+  .gem-c-header__nav-wrapper {
+    position: relative;
+    padding-left: 0;
+  }
+
+  .govuk-header__navigation--end {
+    padding-top: 0;
+    text-align: left;
+  }
+
+  .gem-c-layout-header__search {
+    margin-bottom: govuk-spacing(2);
+    padding-bottom: govuk-spacing(5);
+  }
+
+  .gem-c-header__content {
+    position: relative;
+    width: 100%;
+    padding-bottom: govuk-spacing(2);
+  }
+
+  @include govuk-media-query($from: desktop) {
+    .gem-c-layout-header__search {
+      padding-bottom: govuk-spacing(1);
+    }
+
+    .govuk-header__navigation-item {
+      padding: 0 0 govuk-spacing(1) 0;
+    }
+
+    .gem-c-header__logo {
+      margin-top: 0;
+    }
+
+    .gem-c-header__content {
+      @include govuk-grid-column(two-thirds);
+      padding-left: govuk-spacing(6);
+      padding-right: govuk-spacing(1);
+    }
+  }
+}
+
+.gem-c-layout-header__logo,
+.gem-c-layout-header__search {
+  padding: 0;
+
+  @include govuk-media-query($until: "tablet") {
+    margin-bottom: govuk-spacing(3);
+  }
+}
+
 .gem-c-header__logo {
-  width: auto;
+  margin-top: govuk-spacing(1);
+  margin-bottom: govuk-spacing(3);
+
+  @include govuk-media-query($from: desktop) {
+    white-space: nowrap;
+  }
 }
 
 .gem-c-header__content {
@@ -68,3 +142,15 @@
     display: none;
   }
 }
+
+.gem-c-layout-header__search-form {
+  display: none;
+
+  &.js-visible {
+    display: block;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: block;
+  }
+}

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

@@ -1 +1,5 @@
 @import "govuk/components/radios/radios";
+
+.gem-c-radio__heading-text {
+  margin: 0 0 govuk-spacing(4) 0;
+}

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

@@ -24,7 +24,7 @@
   margin-bottom: govuk-spacing(2);
 }
 
-.gem-c-related-navigation__main-heading  + .gem-c-related-navigation__sub-heading {
+.gem-c-related-navigation__main-heading + .gem-c-related-navigation__sub-heading {
   border-top: 0;
   padding-top: 0;
 }
@@ -62,7 +62,7 @@
 
   .js-enabled & {
     display: inline-block;
-   }
+  }
 }
 
 .gem-c-related-navigation__section-link {