govuk_publishing_components 54.0.1 → 55.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86dda672f3ba9aab6652fe7a61262828fcbf325846d677dac46bf3acbee0288d
-  data.tar.gz: c6fdf3be956c6c65886324672be78cd312f3a2b89f8cc3707410dfa1404e7c8d
+  metadata.gz: 00edb5d25e23e74f551a4e86904f15149be137d0792b8e2b066d7af747fedbc5
+  data.tar.gz: f674647263528f6eba8ef3549d710093947d6650fb6fb66722a94faaf33d24b7
 SHA512:
-  metadata.gz: 4e72340ed40f1523cda2b245a131fb54c042af7d1f2968a5202e8416aef9cc7fa936582df26d4fbb6fa9f9bb422c46cf215cbc9078627a6f3b199f5b6d12d7e7
-  data.tar.gz: ecbe763dc4259ff481dccfedba4a08827b131f070cacddeab8bd429d3d5af40348906645c23f1a0ff7c6bb51d62f1e5dfeac67ea149375a7f3ee797382d0f171
+  metadata.gz: 18b9cd1e21c514e57d5770348f4a9ce39a1e1a8282cd911666835f4818bd8cab79b8a3d8bbe5390346861870f3fcb3065cf028ed5952d2296099b24e3c51e452
+  data.tar.gz: a885507b322d134001ecc1e053af8dad5b224bf7553a222d474d728a4bb26824e550163bdc0a3ca3f757d8580328bfcb1b0778c38920334301c3a9205d97fefd

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/_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/_layout-super-navigation-header.scss

@@ -84,10 +84,6 @@ $after-button-padding-left: govuk-spacing(4);
   margin-top: -1px;
   position: relative;
 
-  .lte-ie8 & {
-    height: $black-bar-height;
-  }
-
   [hidden] {
     display: none;
   }
@@ -132,10 +128,6 @@ $after-button-padding-left: govuk-spacing(4);
   width: 100%;
 }
 
-.gem-c-layout-super-navigation-header__navigation-toggle-wrapper {
-  position: relative;
-}
-
 .gem-c-layout-super-navigation-header__navigation-item,
 .gem-c-layout-super-navigation-header__search-item {
   display: block;
@@ -379,17 +371,6 @@ $after-button-padding-left: govuk-spacing(4);
   display: none;
 }
 
-// Search and popular content dropdown.
-.gem-c-layout-super-navigation-header__search-and-popular {
-  display: none;
-  padding-bottom: govuk-spacing(4);
-  padding-top: govuk-spacing(4);
-
-  .js-module-initialised & {
-    display: block;
-  }
-}
-
 // Styles for top level navigation toggle button.
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button {
   font-size: 16px;
@@ -405,9 +386,7 @@ $after-button-padding-left: govuk-spacing(4);
   position: relative;
   margin: 0;
   vertical-align: top;
-  @include govuk-link-common;
-  @include govuk-link-style-no-visited-state;
-  @include govuk-link-style-no-underline;
+  @include govuk-typography-common($font-family: $govuk-font-family);
 
   &::after {
     @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right);
@@ -705,14 +684,6 @@ $after-button-padding-left: govuk-spacing(4);
       border-color: $govuk-focus-colour;
       box-shadow: none;
       color: $govuk-focus-colour;
-
-      // stylelint-disable max-nesting-depth
-      @include govuk-media-query($from: 360px) {
-        &::before {
-          @include chevron($govuk-focus-colour, true);
-        }
-      }
-      // stylelint-enable max-nesting-depth
     }
 
     @include focus-not-focus-visible {
@@ -780,16 +751,6 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-// Dropdown menu description.
-.gem-c-layout-super-navigation-header__menu-description {
-  display: none;
-
-  @include govuk-media-query($from: "desktop") {
-    display: block;
-    padding: govuk-spacing(7) 0 govuk-spacing(7) 0;
-  }
-}
-
 // Dropdown menu items.
 .gem-c-layout-super-navigation-header__dropdown-list-item {
   box-sizing: border-box;
@@ -890,25 +851,6 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-// Popular links.
-.gem-c-layout-super-navigation-header__popular-item {
-  position: relative;
-  padding: govuk-spacing(1) 0;
-}
-
-.gem-c-layout-super-navigation-header__width-container {
-  @include govuk-media-query($until: "desktop") {
-    margin: 0;
-    margin-top: govuk-spacing(6);
-  }
-
-  @include govuk-media-query($from: "desktop") {
-    margin: 0 auto;
-    max-width: 960px;
-    padding: govuk-spacing(5);
-  }
-}
-
 .gem-c-layout-super-navigation-header__column-header {
   font-size: 24px;
 }

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/_footnotes.scss

@@ -21,5 +21,13 @@
     a {
       overflow-wrap: break-word;
     }
+
+    ol li:nth-of-type(99) ~ li {
+      margin-left: 11px;
+    }
+
+    ol li:nth-of-type(999) ~ li {
+      margin-left: 22px;
+    }
   }
 }