govuk_publishing_components 54.0.0 → 55.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 45d09b1fcf62542a7497ba78e1b60618d092fc528646495b1f296aa64f54e59e
-  data.tar.gz: b25260a62d83b0395457eb8921ca7547eb775802c2c0a4fbbf851e8c5df46a1f
+  metadata.gz: 532966284434b5003c9404473e6c44aeaa7222f0a5d79a5b463ea20ea7afb420
+  data.tar.gz: 4db9c53579d833f627b2e32545a14fbd65defc5df96ac6f3af9c9111cd7e46dc
 SHA512:
-  metadata.gz: acac17226a90dbd3083c33379ded3fcd64d9e53b6ee9a5f9390240a9bf7b720ac90c5eff2b94133ad5d34f0d347efb7f646c6a51af89eca386e03d0413d5aa85
-  data.tar.gz: 2840251f9834711840167a93322dd66508397f8f52769115cbb0023327eb44a9f9586c100dc3243f978c2d482a8a70920f0cc6b3b31049600bcef16d5ad90b55
+  metadata.gz: bbd29a8b7db26faa0b0cb0e379bedf18b05133b8d4ea7c8ca16ccd9792cc46fee730d4986f2f69b261ac2a8f10d553d8990a3853e54e6251edfe68bbb04df1a6
+  data.tar.gz: 6b02333dca16d573b0d1b373e8d0febe2f17bcf2a6c712fed6ae072c2b296675a499fd98709cc32532dd6590b25724e510175c723cea839605f9ecd5e1374eac

data/app/assets/javascripts/govuk_publishing_components/lib/sticky-element-container.js

@@ -0,0 +1,117 @@
+/*
+  This module will cause a child in the target element to:
+  - hide when the top of the target element is visible;
+  - stick to the bottom of the window while the parent element is in view;
+  - stick to the bottom of the target when the user scrolls past the bottom.
+
+  Use 'data-module="sticky-element-container"' to instantiate, and add
+  `[data-sticky-element]` to the child you want to position.
+*/
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function StickyElementContainer (element) {
+    this.wrapper = element
+    this.stickyElement = this.wrapper.querySelector('[data-sticky-element]')
+    this.hasResized = true
+    this.hasScrolled = true
+    this.interval = 50
+    this.windowVerticalPosition = 1
+    this.startPosition = 0
+    this.stopPosition = 0
+  }
+
+  StickyElementContainer.prototype.init = function () {
+    if (!this.stickyElement) return
+
+    window.onresize = this.onResize.bind(this)
+    window.onscroll = this.onScroll.bind(this)
+    setInterval(this.checkResize.bind(this), this.interval)
+    setInterval(this.checkScroll.bind(this), this.interval)
+    this.checkResize()
+    this.checkScroll()
+    this.stickyElement.classList.add('sticky-element--enabled')
+  }
+
+  StickyElementContainer.prototype.getWindowDimensions = function () {
+    return {
+      height: window.innerHeight,
+      width: window.innerWidth
+    }
+  }
+
+  StickyElementContainer.prototype.getWindowPositions = function () {
+    return {
+      scrollTop: window.scrollY
+    }
+  }
+
+  StickyElementContainer.prototype.onResize = function () {
+    this.hasResized = true
+  }
+
+  StickyElementContainer.prototype.onScroll = function () {
+    this.hasScrolled = true
+  }
+
+  StickyElementContainer.prototype.checkResize = function () {
+    if (this.hasResized) {
+      this.hasResized = false
+      this.hasScrolled = true
+
+      var windowDimensions = this.getWindowDimensions()
+      var elementHeight = this.wrapper.offsetHeight || parseFloat(this.wrapper.style.height.replace('px', ''))
+      this.startPosition = this.wrapper.offsetTop
+      this.stopPosition = this.wrapper.offsetTop + elementHeight - windowDimensions.height
+    }
+  }
+
+  StickyElementContainer.prototype.checkScroll = function () {
+    if (this.hasScrolled) {
+      this.hasScrolled = false
+
+      this.windowVerticalPosition = this.getWindowPositions().scrollTop
+
+      this.updateVisibility()
+      this.updatePosition()
+    }
+  }
+
+  StickyElementContainer.prototype.updateVisibility = function () {
+    var isPastStart = this.startPosition < this.windowVerticalPosition
+    if (isPastStart) {
+      this.show()
+    } else {
+      this.hide()
+    }
+  }
+
+  StickyElementContainer.prototype.updatePosition = function () {
+    var isPastEnd = this.stopPosition < this.windowVerticalPosition
+    if (isPastEnd) {
+      this.stickToParent()
+    } else {
+      this.stickToWindow()
+    }
+  }
+
+  StickyElementContainer.prototype.stickToWindow = function () {
+    this.stickyElement.classList.add('sticky-element--stuck-to-window')
+  }
+
+  StickyElementContainer.prototype.stickToParent = function () {
+    this.stickyElement.classList.remove('sticky-element--stuck-to-window')
+  }
+
+  StickyElementContainer.prototype.show = function () {
+    this.stickyElement.classList.remove('sticky-element--hidden')
+  }
+
+  StickyElementContainer.prototype.hide = function () {
+    this.stickyElement.classList.add('sticky-element--hidden')
+  }
+
+  Modules.StickyElementContainer = StickyElementContainer
+})(window.GOVUK.Modules)

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

@@ -14,6 +14,7 @@
 @import "components/attachment";
 @import "components/attachment-link";
 @import "components/back-link";
+@import "components/back-to-top-link";
 @import "components/big-number";
 @import "components/breadcrumbs";
 @import "components/button";
@@ -21,6 +22,7 @@
 @import "components/character-count";
 @import "components/checkboxes";
 @import "components/contents-list";
+@import "components/contents-list-with-body";
 @import "components/contextual-guidance";
 @import "components/contextual-sidebar";
 @import "components/cookie-banner";
@@ -37,6 +39,7 @@
 @import "components/feedback";
 @import "components/fieldset";
 @import "components/file-upload";
+@import "components/figure";
 @import "components/glance-metric";
 @import "components/global-banner";
 @import "components/govspeak-html-publication";
@@ -65,6 +68,7 @@
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
 @import "components/print-link";
+@import "components/published-dates";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/reorderable-list";
@@ -80,6 +84,7 @@
 @import "components/step-by-step-nav";
 @import "components/subscription-links";
 @import "components/success-alert";
+@import "components/summary-banner";
 @import "components/summary-card";
 @import "components/summary-list";
 @import "components/tabs";

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

@@ -8,8 +8,7 @@
     display: table-cell;
     width: 60px;
     height: 45px;
-    background: url("govuk_publishing_components/action-link-arrow.png");
-    background: url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow.svg");
     background-repeat: no-repeat;
     background-position: 0 50%;
     background-size: 45px auto;
@@ -97,8 +96,7 @@
   &::before {
     width: 30px;
     height: 30px;
-    background: url("govuk_publishing_components/action-link-arrow--simple.png");
-    background: url("govuk_publishing_components/action-link-arrow--simple.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow--simple.svg");
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;
@@ -109,8 +107,7 @@
   &::before {
     width: 30px;
     height: 30px;
-    background: url("govuk_publishing_components/action-link-arrow--simple-light.png");
-    background: url("govuk_publishing_components/action-link-arrow--simple-light.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow--simple-light.svg");
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;
@@ -119,8 +116,7 @@
 
 .gem-c-action-link--dark-large-icon {
   &::before {
-    background: url("govuk_publishing_components/action-link-arrow--dark.png");
-    background: url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow--dark.svg");
     height: 34px;
     width: 40px;
     background-repeat: no-repeat;
@@ -137,8 +133,7 @@
   &::before {
     width: 36px;
     height: 28px;
-    background: url("govuk_publishing_components/action-link-arrow--light.png");
-    background: url("govuk_publishing_components/action-link-arrow--light.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow--light.svg");
     background-repeat: no-repeat;
     background-size: 28px auto;
     background-position: 0 0;
@@ -161,8 +156,7 @@
   &::before {
     height: 30px;
     width: 35px;
-    background: url("govuk_publishing_components/action-link-arrow--dark.png");
-    background: url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
+    background: url("govuk_publishing_components/action-link-arrow--dark.svg");
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;

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

@@ -13,17 +13,11 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
   position: relative;
   @include govuk-font(19);
   @include govuk-clearfix;
-
-  .govuk-details {
-    margin: govuk-spacing(3) 0;
-  }
 }
 
 .gem-c-attachment__thumbnail {
   position: relative;
   width: auto;
-  margin-right: govuk-spacing(5);
-  margin-bottom: govuk-spacing(3);
   padding: $thumbnail-border-width;
   float: left;
 }
@@ -31,20 +25,30 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
 .gem-c-attachment__thumbnail-image {
   display: block;
   width: auto; // for IE8
-  max-width: $thumbnail-width;
-  height: $thumbnail-height;
+  max-width: calc($thumbnail-width / 1.5);
+  height: calc($thumbnail-height / 1.5);
   border: $thumbnail-border-colour; // for IE9 & IE10
   outline: $thumbnail-border-width solid $thumbnail-border-colour;
   background: $thumbnail-background;
   box-shadow: $thumbnail-shadow-width $thumbnail-shadow-colour;
   fill: $thumbnail-icon-border-colour;
   stroke: $thumbnail-icon-border-colour;
+
+  @include govuk-media-query($from: tablet) {
+    max-width: $thumbnail-width;
+    height: $thumbnail-height;
+  }
 }
 
 .gem-c-attachment__details {
-  padding-left: $thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5);
+  padding-left: calc(($thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5)) / 1.5);
+
+  @include govuk-media-query($from: tablet) {
+    padding-left: $thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5);
+  }
 
   .gem-c-details {
+    margin-top: govuk-spacing(3);
     word-break: break-word;
     word-wrap: break-word;
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_back-to-top-link.scss

@@ -0,0 +1,15 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-back-to-top-link {
+  display: inline-block;
+  margin-bottom: govuk-spacing(2);
+  margin-left: govuk-spacing(3);
+  margin-right: govuk-spacing(3);
+}
+
+.gem-c-back-to-top-link__icon {
+  float: left;
+  margin-right: .3em;
+  width: .8em;
+  height: .968em;
+}

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

@@ -0,0 +1,58 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "helpers/sticky-element-container";
+
+.gem-c-contents-list-with-body__link-container {
+  margin: 0 auto;
+  padding: 0;
+
+  @include govuk-media-query($from: tablet) {
+    max-width: 1024px;
+  }
+
+  .gem-c-back-to-top-link {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.gem-c-contents-list-with-body__list-container {
+  margin-bottom: govuk-spacing(3);
+
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(8);
+  }
+}
+
+.gem-c-contents-list-with-body__link-wrapper {
+  padding-bottom: govuk-spacing(2);
+
+  .gem-c-back-to-top-link {
+    padding-bottom: govuk-spacing(2);
+  }
+}
+
+.gem-c-contents-list-with-body__link-wrapper.sticky-element--stuck-to-window {
+  background-color: govuk-colour("light-grey");
+  bottom: -1px; // 'Fix' for anomalous 1px margin which sporadically appears below this element.
+  left: 0;
+  margin: 0;
+  padding: 0;
+  padding-left: 0;
+  position: fixed;
+  width: 100%;
+  z-index: 10;
+
+  @include govuk-media-query($from: tablet) {
+    padding-left: govuk-spacing(2);
+  }
+
+  .gem-c-back-to-top-link {
+    margin-bottom: 0;
+    padding: govuk-spacing(3);
+    width: 66%;
+
+    @include govuk-media-query($from: tablet) {
+      padding: govuk-spacing(4);
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-figure {
+  border-top: 1px solid $govuk-border-colour;
+  padding-top: govuk-spacing(3);
+  margin: 0;
+  margin-bottom: govuk-spacing(8);
+  @include govuk-clearfix;
+
+  @include govuk-media-query($until: tablet) {
+    margin-bottom: govuk-spacing(6);
+  }
+}
+
+.gem-c-figure__image {
+  display: block;
+  width: 100%;
+
+  @include govuk-media-query($from: tablet) {
+    float: inline-start;
+    width: 50%;
+  }
+}
+
+.gem-c-figure__figcaption {
+  @include govuk-font(16);
+
+  @include govuk-media-query($from: tablet) {
+    display: block;
+    vertical-align: top;
+    box-sizing: border-box;
+    float: inline-end;
+    padding-inline-start: govuk-spacing(3);
+    width: 50%;
+  }
+
+  @include govuk-media-query($until: tablet) {
+    margin-top: govuk-spacing(2);
+  }
+}
+
+.gem-c-figure__figcaption-text {
+  margin: 0;
+  margin-bottom: govuk-spacing(2);
+  @include govuk-font(16);
+}

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

@@ -47,11 +47,6 @@
     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%;
@@ -59,10 +54,6 @@
   }
 
   @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;
     }
@@ -79,8 +70,7 @@
   }
 }
 
-.gem-c-layout-header__logo,
-.gem-c-layout-header__search {
+.gem-c-layout-header__logo {
   @include govuk-media-query($until: "tablet") {
     margin-bottom: govuk-spacing(3);
   }
@@ -147,16 +137,6 @@
   }
 }
 
-.gem-c-layout-header__search-form {
-  &.js-visible {
-    display: block;
-  }
-
-  @include govuk-media-query($from: tablet) {
-    display: block;
-  }
-}
-
 .govuk-header__menu-button.gem-c-header__menu-button {
   top: govuk-spacing(4);
   right: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_published-dates.scss

@@ -0,0 +1,57 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-published-dates {
+  direction: ltr;
+  line-height: 1.45em;
+  color: govuk-colour("black");
+
+  .direction-rtl & {
+    direction: rtl;
+  }
+}
+
+.gem-c-published-dates__toggle {
+  display: none;
+
+  .govuk-frontend-supported & {
+    display: inline-block;
+  }
+}
+
+.gem-c-published-dates__change-history {
+  margin: govuk-spacing(4) 0;
+}
+
+.gem-c-published-dates__list {
+  padding: 0;
+}
+
+.gem-c-published-dates__change-item {
+  list-style-type: none;
+  margin-bottom: govuk-spacing(2);
+}
+
+.gem-c-published-dates__change-date {
+  display: block;
+  @include govuk-font(16, $weight: bold);
+}
+
+.gem-c-published-dates__change-note {
+  white-space: pre-line;
+}
+
+.gem-c-published-dates--history {
+  padding-top: govuk-spacing(2);
+  border-top: 1px solid $govuk-border-colour;
+}
+
+.govuk-frontend-supported .gem-c-published-dates .js-hidden {
+  display: none;
+  visibility: hidden;
+}
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-published-dates {
+    margin-top: 10mm;
+  }
+}

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

@@ -232,37 +232,10 @@ $large-input-size: 50px;
   color: govuk-colour("white");
 }
 
-.gem-c-search--no-border {
-  .gem-c-search__label {
-    color: govuk-colour("white");
-  }
-
-  .gem-c-search__input[type="search"] {
-    border: 0;
-
-    &:focus {
-      @include gem-c-search-input-focus;
-      box-shadow: inset 0 0 0 4px;
-    }
-  }
-
-  .govuk-frontend-supported & {
-    .gem-c-search__label {
-      color: $govuk-secondary-text-colour;
-    }
-  }
-}
-
 .gem-c-search--large {
   @include large-mode;
 }
 
-.gem-c-search--large-on-mobile {
-  @include govuk-media-query($until: "tablet") {
-    @include large-mode;
-  }
-}
-
 .gem-c-search--separate-label {
   .gem-c-search__label {
     position: relative;
@@ -271,50 +244,3 @@ $large-input-size: 50px;
     padding-left: 0;
   }
 }
-
-.search-toggle {
-  display: none;
-  background-color: govuk-colour("blue");
-  background-image: url("govuk_publishing_components/search-button.png");
-  background-position: 0 50%;
-  background-repeat: no-repeat;
-  float: right;
-  height: 30px;
-  margin: -46px 0;
-  overflow: hidden;
-  padding: 0;
-  text-indent: -5000px;
-  width: 36px;
-  border: 0;
-
-  &:focus {
-    border-width: 0;
-    box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    outline-offset: 0;
-  }
-
-  &:focus,
-  &:hover {
-    background-color: lighten(govuk-colour("blue"), 5%);
-  }
-
-  &.js-hidden {
-    display: none;
-  }
-
-  @include govuk-device-pixel-ratio {
-    background-size: 52.5px 35px;
-    background-position: 100% 50%;
-  }
-
-  @include govuk-media-query($from: tablet) {
-    display: none;
-  }
-
-  @include govuk-media-query($until: tablet) {
-    .govuk-frontend-supported & {
-      display: block;
-    }
-  }
-}

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

@@ -0,0 +1,33 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-summary-banner {
+  direction: ltr;
+  background: $govuk-brand-colour;
+  color: govuk-colour("white");
+  padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(3);
+  clear: both;
+  @include govuk-font(19);
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(7) govuk-spacing(6) govuk-spacing(5);
+  }
+
+  a {
+    @include govuk-link-common;
+    @include govuk-link-style-inverse;
+  }
+}
+
+.gem-c-summary-banner__title {
+  margin-bottom: govuk-spacing(6);
+  color: govuk-colour("white");
+  @include govuk-font(27, $weight: bold);
+}
+
+.gem-c-summary-banner__text {
+  // Ensure the text has a line-length of around 60 characters
+  max-width: 30em;
+  padding: 0;
+  margin-bottom: govuk-spacing(4);
+  @include govuk-font(19);
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss

@@ -10,5 +10,10 @@
   .legislative-list {
     list-style: none;
     margin: 0 0 govuk-spacing(4) 0;
+
+    ol {
+      margin: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
+      list-style: none;
+    }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_sticky-element-container.scss

@@ -0,0 +1,23 @@
+.govuk-frontend-supported .sticky-element {
+  position: absolute;
+  bottom: 0;
+
+  &--stuck-to-window {
+    bottom: 0;
+    position: fixed;
+  }
+
+  &--enabled {
+    transition: opacity, .3s, ease;
+    opacity: 1;
+
+    @include govuk-media-query($until: tablet) {
+      position: static;
+    }
+  }
+
+  &--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -1,6 +1,6 @@
 module GovukPublishingComponents
   class ComponentGuideController < GovukPublishingComponents::ApplicationController
-    append_view_path File.join(Rails.root, "app", "views", GovukPublishingComponents::Config.component_directory_name)
+    append_view_path Rails.root.join("app", "views", GovukPublishingComponents::Config.component_directory_name).to_s
 
     MATCH_COMPONENTS = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/
 

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -118,7 +118,7 @@ module GovukPublishingComponents
           @gem_style_references << gem_style_references if gem_style_references
         end
       rescue StandardError => e
-        puts e.message
+        Rails.logger.debug e.message
       end
 
       components_found.flatten.uniq.sort