govuk_publishing_components 21.59.0 → 21.60.0

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -21,7 +21,7 @@
     for (var i = 0; i < $youtubeLinks.length; ++i) {
       var $link = $youtubeLinks[i]
       var href = $link.getAttribute('href')
-      var hasTracking = $link.getAttribute('data-youtube-player-analytics') == "true"
+      var hasTracking = $link.hasAttribute('data-youtube-player-analytics')
       var options = {
         link: $link
       }
@@ -33,7 +33,7 @@
         }
       }
 
-      if (href.includes("/live_stream")) {
+      if (href.includes('/live_stream')) {
         var channelId = YoutubeLinkEnhancement.parseLivestream(href)
 
         if (!this.hasDisabledEmbed($link) && channelId) {
@@ -67,19 +67,19 @@
     youtubeVideoContainer.className += 'gem-c-govspeak__youtube-video'
     youtubeVideoContainer.innerHTML = '<span id="' + elementId + '" data-video-id="' + id + '"></span>'
 
-    options['title'] = $link.textContent
+    options.title = $link.textContent
 
     parentContainer.replaceChild(youtubeVideoContainer, parentPara)
     this.insertVideo(elementId, options)
   }
 
   YoutubeLinkEnhancement.prototype.insertVideo = function (elementId, options) {
-    var channelId = ""
-    var videoId = ""
+    var channelId = ''
+    var videoId = ''
 
     if (options.channel) {
       channelId = options.channel
-      videoId = "live_stream"
+      videoId = 'live_stream'
     } else {
       videoId = options.videoId
     }
@@ -112,16 +112,17 @@
             var eventData = event.data
             var eventTarget = event.target
             var states = {
-              "-1": "VideoUnstarted",
-              "0": "VideoEnded",
-              "1": "VideoPlaying",
-              "2": "VideoPaused",
-              "3": "VideoBuffering",
-              "5": "VideoCued"
+              /* eslint-disable quote-props */
+              '-1': 'VideoUnstarted',
+              '0': 'VideoEnded',
+              '1': 'VideoPlaying',
+              '2': 'VideoPaused',
+              '3': 'VideoBuffering',
+              '5': 'VideoCued'
+              /* eslint-enable */
             }
-            if (states[eventData] && options.tracking && options.tracking.hasTracking
-                && window.GOVUK.analytics && window.GOVUK.analytics.trackEvent)
-            {
+            if (states[eventData] && options.tracking && options.tracking.hasTracking &&
+                window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
               var tracking = {
                 category: options.tracking.category,
                 action: states[eventData],
@@ -192,8 +193,7 @@
         params[part[0]] = part[1]
       }
       return params.v
-    }
-    else if (url.indexOf('youtu.be') > -1) {
+    } else if (url.indexOf('youtu.be') > -1) {
       parts = url.split('/')
       return parts.pop()
     }

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

@@ -214,10 +214,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 +232,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 +259,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 +290,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 +386,7 @@ $code-delete-bg: #fadddd;
   // Literals
   //
 
-  .l  {     // Literal
+  .l {     // Literal
     color: $code-09;
   }
 
@@ -491,10 +486,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 +497,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/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/_radio.scss

@@ -1 +1,5 @@
 @import "govuk/components/radios/radios";
+
+.gem-c-radio__heading-text {
+  margin: 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 {

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

@@ -160,7 +160,6 @@ $large-input-size: 50px;
 }
 
 .gem-c-search--on-white {
-
   .gem-c-search__submit {
     background-color: govuk-colour("blue");
     color: govuk-colour("white");

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

@@ -11,16 +11,11 @@
   }
 }
 
-// scss-lint:disable SelectorFormat
-
 .gem-c-step-nav-header__part-of {
   @include govuk-font(19, $weight: bold);
   display: block;
 }
 
 .gem-c-step-nav-header__title {
-  @extend %govuk-link;
   @include govuk-font(24, $weight: bold, $line-height: 1);
 }
-
-// scss-lint:enable SelectorFormat

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

@@ -12,6 +12,7 @@
 
 .gem-c-step-nav-related__links {
   @include govuk-font(16);
+  list-style: none;
   margin: 0;
   padding: 0;
 }
@@ -42,10 +43,6 @@
   }
 }
 
-.gem-c-step-nav-related__links {
-  list-style: none;
-}
-
 .gem-c-step-nav-related__link-item {
   margin-top: govuk-spacing(3);
 }

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

@@ -29,7 +29,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 // 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();
+  @include govuk-typography-common;
   font-size: $size + px;
   font-weight: $weight;
   line-height: $line-height;
@@ -122,7 +122,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
     @include govuk-media-query($from: tablet) {
       padding-left: govuk-spacing(9);
 
-      &:after {
+      &:after { // stylelint-disable-line max-nesting-depth
         @include step-nav-line-position-large;
         top: govuk-spacing(6);
       }
@@ -145,12 +145,8 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   }
 
   &:after {
-    // scss-lint:disable DuplicateProperty
-    // sass-lint:disable no-duplicate-properties
     height: -webkit-calc(100% - #{govuk-spacing(3)}); // fallback for iphone 4
     height: calc(100% - #{govuk-spacing(3)});
-    // sass-lint:enable no-duplicate-properties
-    // scss-lint:enable DuplicateProperty
   }
 
   .gem-c-step-nav__help:after {
@@ -322,12 +318,6 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
   + .gem-c-step-nav__list {
     margin-top: -5px;
-
-    .gem-c-step-nav--large & {
-      @include govuk-media-query($from: tablet) {
-        margin-top: -govuk-spacing(3);
-      }
-    }
   }
 
   .gem-c-step-nav--large & {
@@ -335,6 +325,12 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
       padding-bottom: govuk-spacing(6);
     }
   }
+
+  .gem-c-step-nav--large & + .gem-c-step-nav__list {
+    @include govuk-media-query($from: tablet) {
+      margin-top: -govuk-spacing(3);
+    }
+  }
 }
 
 .gem-c-step-nav__list {