govuk_publishing_components 21.56.2 → 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/_all_components.scss

@@ -53,6 +53,7 @@
 @import "components/panel";
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
+@import "components/print-link";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/search";

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;
@@ -118,6 +114,14 @@
 }
 
 .gem-c-action-link--dark-icon {
+  &:before {
+    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);
+  }
+}
+
+.gem-c-action-link--dark-icon,
+.gem-c-action-link--small-icon {
   max-width: none;
 
   @include govuk-media-query($until: tablet) {
@@ -125,12 +129,8 @@
   }
 
   &:before {
-    width: 30px;
     height: 30px;
-    // 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
+    width: 35px;
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;
@@ -145,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

@@ -12,6 +12,10 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
   background-color: $govuk-cookie-banner-background;
 }
 
+.gem-c-cookie-banner--services {
+  display: none;
+}
+
 .gem-c-cookie-banner__message {
   display: inline-block;
   padding-bottom: govuk-spacing(2);
@@ -23,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;
   }
@@ -36,7 +39,6 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
     @include govuk-media-query($until: desktop) {
       margin-bottom: govuk-spacing(4);
     }
-
   }
 }
 
@@ -49,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 {
@@ -122,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;
@@ -151,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/_list.scss

@@ -0,0 +1 @@
+@import "govuk/components/list/list";

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

@@ -0,0 +1,52 @@
+.gem-c-print-link {
+  display: none;
+  margin-bottom: 2em;
+  margin-top: 2em;
+}
+
+.gem-c-print-link.gem-c-print-link--show-without-js {
+  display: block;
+}
+
+.js-enabled {
+  .gem-c-print-link {
+    display: block;
+  }
+}
+
+.gem-c-print-link__link {
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+
+  margin-left: -10px;
+  padding: .5em .5em .5em 38px;
+
+  @include govuk-device-pixel-ratio($ratio: 2) {
+    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-size: 16px 18px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}
+
+.gem-c-print-link__button {
+  @extend %govuk-body-s;
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+  border: 0;
+  color: $govuk-link-colour;
+  cursor: pointer;
+  margin: 0;
+  margin-left: -10px;
+  padding: .5em .5em .5em 38px;
+  text-decoration: underline;
+
+  @include govuk-device-pixel-ratio($ratio: 2) {
+    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-size: 16px 18px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}