govuk_publishing_components 54.0.1 → 55.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86dda672f3ba9aab6652fe7a61262828fcbf325846d677dac46bf3acbee0288d
-  data.tar.gz: c6fdf3be956c6c65886324672be78cd312f3a2b89f8cc3707410dfa1404e7c8d
+  metadata.gz: 532966284434b5003c9404473e6c44aeaa7222f0a5d79a5b463ea20ea7afb420
+  data.tar.gz: 4db9c53579d833f627b2e32545a14fbd65defc5df96ac6f3af9c9111cd7e46dc
 SHA512:
-  metadata.gz: 4e72340ed40f1523cda2b245a131fb54c042af7d1f2968a5202e8416aef9cc7fa936582df26d4fbb6fa9f9bb422c46cf215cbc9078627a6f3b199f5b6d12d7e7
-  data.tar.gz: ecbe763dc4259ff481dccfedba4a08827b131f070cacddeab8bd429d3d5af40348906645c23f1a0ff7c6bb51d62f1e5dfeac67ea149375a7f3ee797382d0f171
+  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/_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/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/models/govuk_publishing_components/component_doc.rb

@@ -51,7 +51,7 @@ module GovukPublishingComponents
     end
 
     def display_preview?
-      component[:display_preview].nil? ? true : component[:display_preview]
+      component[:display_preview].nil? || component[:display_preview]
     end
 
     def uses_component_wrapper_helper?

data/app/views/govuk_publishing_components/components/_back_to_top_link.html.erb

@@ -0,0 +1,19 @@
+<%
+  add_gem_component_stylesheet("back-to-top-link")
+
+  text ||= t("components.back_to_top_link.contents", default: "Contents")
+
+  if href.blank? || text.blank?
+    raise ArgumentError, "The back_to_top_link component requires text and a href"
+  end
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("govuk-link gem-c-back-to-top-link govuk-!-display-none-print")
+%>
+
+<%= link_to href, **component_helper.all_attributes do %>
+    <svg class="gem-c-back-to-top-link__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17" aria-hidden="true" focusable="false">
+      <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"/>
+    </svg>
+    <%= text %>
+<% end %>

data/app/views/govuk_publishing_components/components/_contents_list_with_body.html.erb

@@ -0,0 +1,27 @@
+<% add_gem_component_stylesheet("contents-list-with-body") %>
+<% block = yield %>
+<% unless block.empty? %>
+  <%
+    contents ||= []
+    id ||= "contents"
+    component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+    component_helper.set_id(id)
+    component_helper.add_class("gem-c-contents-list-with-body")
+    component_helper.add_data_attribute({ module: "sticky-element-container" }) if contents.any?
+  %>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <% if contents.any? %>
+      <div class="gem-c-contents-list-with-body__list-container">
+        <%= render 'govuk_publishing_components/components/contents_list', contents: contents %>
+      </div>
+    <% end %>
+    <%= block %>
+    <% if contents.any? %>
+      <div data-sticky-element class="gem-c-contents-list-with-body__link-wrapper">
+        <div class="gem-c-contents-list-with-body__link-container">
+          <%= render 'govuk_publishing_components/components/back_to_top_link', href: "#contents" %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/govuk_publishing_components/components/_figure.html.erb

@@ -0,0 +1,28 @@
+<%
+  add_gem_component_stylesheet("figure")
+  alt ||= ""
+  caption ||= ""
+  credit ||= ""
+  local_assigns[:lang] ||= "en"
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-figure")
+%>
+<%= tag.figure(**component_helper.all_attributes) do %>
+  <% if src.present? %>
+    <img class="gem-c-figure__image" src="<%= src %>" alt="<%= alt %>">
+  <% end %>
+  <% if caption.present? || credit.present? %>
+    <figcaption class="gem-c-figure__figcaption">
+      <% if caption.present? %>
+        <p class="gem-c-figure__figcaption-text">
+          <%= caption %>
+        </p>
+      <% end %>
+      <% if credit.present? %>
+        <p class="gem-c-figure__figcaption-text">
+          <%= I18n.t("components.figure.image_credit", credit: credit) %>
+        </p>
+      <% end %>
+    </figcaption>
+  <% end %>
+<% end %>