govuk_publishing_components 27.17.0 → 28.0.0

data/app/assets/javascripts/govuk_publishing_components/components/feedback.js

@@ -25,10 +25,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.setInitialAriaAttributes()
     this.setHiddenValues()
 
+    this.prompt.hidden = false
+    for (var k = 0; k < this.promptQuestions.length; k++) {
+      this.promptQuestions[k].hidden = false
+    }
+    this.surveyForm.hidden = true
+
     for (var j = 0; j < this.toggleForms.length; j++) {
       this.toggleForms[j].addEventListener('click', function (e) {
         e.preventDefault()
-        var el = e.target
+        var el = e.target.closest('button')
         this.toggleForm(el.getAttribute('aria-controls'))
         this.trackEvent(this.getTrackEventParams(el))
         this.updateAriaAttributes(el)
@@ -36,6 +42,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     for (var i = 0; i < this.closeForms.length; i++) {
+      this.closeForms[i].hidden = false
       this.closeForms[i].addEventListener('click', function (e) {
         e.preventDefault()
         var el = e.target
@@ -89,7 +96,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
               this.showFormSuccess(xhr.message)
               this.revealInitialPrompt()
               this.setInitialAriaAttributes()
-              this.activeForm.classList.toggle(this.jshiddenClass)
+              this.activeForm.hidden ? this.activeForm.hidden = false : this.activeForm.hidden = true
             } else {
               this.showError(xhr)
               this.enableSubmitFormButton($form)
@@ -114,9 +121,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Feedback.prototype.setInitialAriaAttributes = function () {
-    for (var i = 0; i < this.forms.length; i++) {
-      this.forms[i].setAttribute('aria-hidden', true)
-    }
     this.pageIsNotUsefulButton.setAttribute('aria-expanded', false)
     this.somethingIsWrongButton.setAttribute('aria-expanded', false)
   }
@@ -168,20 +172,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Feedback.prototype.updateAriaAttributes = function (linkClicked) {
     linkClicked.setAttribute('aria-expanded', true)
-    var controls = linkClicked.getAttribute('aria-controls')
-    var ariaControls = document.querySelector('#' + controls)
-    ariaControls.setAttribute('aria-hidden', false)
   }
 
   Feedback.prototype.toggleForm = function (formId) {
     this.activeForm = this.$module.querySelector('#' + formId)
-    this.activeForm.classList.toggle(this.jshiddenClass)
-    this.prompt.classList.toggle(this.jshiddenClass)
-
-    var formIsVisible = !this.activeForm.classList.contains(this.jshiddenClass)
+    this.activeForm.hidden ? this.activeForm.hidden = false : this.activeForm.hidden = true
+    this.prompt.hidden ? this.prompt.hidden = false : this.prompt.hidden = true
 
-    if (formIsVisible) {
-      this.activeForm.querySelector('.gem-c-input').focus()
+    if (!this.activeForm.hidden) {
+      this.activeForm.querySelectorAll('.gem-c-textarea .govuk-textarea, .gem-c-input.govuk-input')[0]
+        .focus()
     } else {
       this.activeForm = false
     }
@@ -223,20 +223,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
     var $errors = this.activeForm.querySelector('.js-errors')
     $errors.innerHTML = error
-    $errors.classList.remove(this.jshiddenClass)
+    $errors.hidden = false
     $errors.focus()
   }
 
   Feedback.prototype.showFormSuccess = function () {
     for (var i = 0; i < this.promptQuestions.length; i++) {
-      this.promptQuestions[i].classList.add(this.jshiddenClass)
+      this.promptQuestions[i].hidden = true
     }
-    this.promptSuccessMessage.classList.remove(this.jshiddenClass)
+    this.promptSuccessMessage.hidden = false
     this.promptSuccessMessage.focus()
   }
 
   Feedback.prototype.revealInitialPrompt = function () {
-    this.prompt.classList.remove(this.jshiddenClass)
+    this.prompt.hidden = false
     this.prompt.focus()
   }
 

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -7,6 +7,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module = $module
     this.basePath = this.$module.querySelector('input[name="base_path"]').value
     this.buttonLocation = this.$module.getAttribute('data-button-location')
+    this.buttonVisibleClass = 'gem-c-single-page-notification-button--visible'
 
     this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
     // This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
@@ -16,21 +17,30 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   SinglePageNotificationButton.prototype.init = function () {
     var xhr = new XMLHttpRequest()
     xhr.open('GET', this.personalisationEndpoint, true)
+    // if XHR to the personalisation endpoint is taking an incredibly long time to complete, we are better off leaving the button in its default unpersonalised state. Content changing before the user's eyes while they are browsing can be jarring and should be avoided.
+    xhr.timeout = 10000
+
+    xhr.ontimeout = function () {
+      this.makeVisible(this.$module)
+    }.bind(this)
 
     xhr.onreadystatechange = function () {
-      if (xhr.readyState === 4 && xhr.status === 200) {
-        var responseText = xhr.responseText
-        // if response text exists and is JSON parse-able, parse the response and get the button html
-        if (responseText && this.responseIsJSON(responseText)) {
-          var newButton = JSON.parse(responseText).button_html
-          var html = document.createElement('div')
-          html.innerHTML = newButton
-          // test that the html returned contains the button component; if yes, swap the button for the updated version
-          var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
-          if (responseButtonContainer) {
-            this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          var responseText = xhr.responseText
+          // if response text exists and is JSON parse-able, parse the response and get the button html
+          if (responseText && this.responseIsJSON(responseText)) {
+            var newButton = JSON.parse(responseText).button_html
+            var html = document.createElement('div')
+            html.innerHTML = newButton
+            // test that the html returned contains the button component; if yes, swap the button for the updated version
+            var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
+            if (responseButtonContainer) {
+              this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
+            }
           }
         }
+        this.makeVisible(this.$module)
       }
     }.bind(this)
     xhr.send()
@@ -44,5 +54,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
     return true
   }
+
+  SinglePageNotificationButton.prototype.makeVisible = function (target) {
+    target.classList.add(this.buttonVisibleClass)
+  }
   Modules.SinglePageNotificationButton = SinglePageNotificationButton
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/extend-object.js

@@ -0,0 +1,22 @@
+(function (root) {
+  'use strict'
+  window.GOVUK = window.GOVUK || {}
+
+  window.GOVUK.extendObject = function (obj) {
+    obj = obj || {}
+
+    for (var i = 1; i < arguments.length; i++) {
+      if (!arguments[i]) {
+        continue
+      }
+
+      for (var key in arguments[i]) {
+        if (Object.prototype.hasOwnProperty.call(arguments[i], key)) {
+          obj[key] = arguments[i][key]
+        }
+      }
+    }
+
+    return obj
+  }
+}(window))

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

@@ -39,7 +39,6 @@ $govuk-new-link-styles: true;
 @import "components/govspeak-html-publication";
 @import "components/govspeak";
 @import "components/heading";
-@import "components/highlight-boxes";
 @import "components/hint";
 @import "components/image-card";
 @import "components/input";
@@ -68,6 +67,7 @@ $govuk-new-link-styles: true;
 @import "components/select";
 @import "components/share-links";
 @import "components/show-password";
+@import "components/signup-link";
 @import "components/single-page-notification-button";
 @import "components/skip-link";
 @import "components/step-by-step-nav-header";
@@ -78,7 +78,6 @@ $govuk-new-link-styles: true;
 @import "components/summary-list";
 @import "components/tabs";
 @import "components/table";
-@import "components/taxonomy-list";
 @import "components/textarea";
 @import "components/title";
 @import "components/translation-nav";

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -1,31 +1,36 @@
 $transition-campaign-red: #ff003b;
+$covid-colour: $govuk-link-colour;
 
-.gem-c-contextual-sidebar__brexit-related-links {
+.gem-c-contextual-sidebar__related-links {
   border-top: 2px solid $govuk-brand-colour;
 }
 
-.gem-c-contextual-sidebar__brexit-heading {
+.gem-c-contextual-sidebar__heading {
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
+  color: $govuk-text-colour;
 }
 
-.gem-c-contextual-sidebar__brexit-cta {
+.gem-c-contextual-sidebar__text {
+  @include govuk-font(16);
+  margin-bottom: govuk-spacing(1);
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(2);
+  }
+}
+
+.gem-c-contextual-sidebar__cta {
   margin-bottom: govuk-spacing(6);
   background-color: govuk-colour('light-grey', $legacy: 'grey-4');
-  border-top: 2px solid $transition-campaign-red;
   display: block;
   padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;
+}
 
-  .gem-c-contextual-sidebar__brexit-heading {
-    color: $govuk-text-colour;
-  }
+.gem-c-contextual-sidebar__cta--brexit {
+  border-top: 2px solid $transition-campaign-red;
+}
 
-  .gem-c-contextual-sidebar__brexit-text {
-    @include govuk-font(16);
-    margin-bottom: govuk-spacing(1);
-    @include govuk-media-query($from: tablet) {
-      margin-bottom: govuk-spacing(2);
-    }
-  }
+.gem-c-contextual-sidebar__cta--covid {
+  border-top: 2px solid $covid-colour;
 }

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

@@ -6,6 +6,12 @@
     margin-top: govuk-spacing(9);
     border-bottom: 1px solid govuk-colour("white");
   }
+
+  // Scoped to the feedback component temporarily
+  [hidden] {
+    // stylelint-disable-next-line declaration-no-important
+    display: none !important;
+  }
 }
 
 .gem-c-feedback__prompt-questions {
@@ -238,38 +244,3 @@
     outline: $govuk-focus-width solid $govuk-focus-colour;
   }
 }
-
-// hide without js
-// show with js, unless also has the js-hidden class
-.gem-c-feedback__js-show,
-.gem-c-feedback__prompt-success,
-.gem-c-feedback__prompt-questions,
-.gem-c-feedback__error-summary {
-  display: none;
-
-  .js-enabled & {
-    display: block;
-
-    &.js-hidden {
-      display: none;
-    }
-  }
-}
-
-// maintain table display for prompt and prompt-questions
-.js-enabled .gem-c-feedback__prompt {
-  @include govuk-media-query($from: tablet) {
-    display: table;
-  }
-}
-
-.js-enabled .gem-c-feedback__prompt-questions {
-  @include govuk-media-query($from: tablet) {
-    display: table-cell;
-  }
-}
-
-// show the default feedback form without js
-.js-enabled .gem-c-feedback__form.js-hidden {
-  display: none;
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -45,17 +45,21 @@
   }
 
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: one-third, $at: mobile);
+    @include govuk-grid-column($width: one-half, $at: mobile);
   }
 
   .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: two-thirds, $at: mobile);
+    @include govuk-grid-column($width: one-half, $at: mobile);
   }
 }
 
 .gem-c-image-card__image {
   display: block;
   max-width: 100%;
+  border-top: 1px solid $govuk-border-colour;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
 }
 
 .gem-c-image-card__title {
@@ -100,7 +104,13 @@
 
 .gem-c-image-card__context,
 .gem-c-image-card__metadata {
-  @include govuk-font(14);
+  @include govuk-font($size: false);
+  font-size: 16px;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+
   margin: 0 0 (govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 
@@ -110,13 +120,13 @@
 }
 
 .gem-c-image-card__description {
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 19);
   padding-top: (govuk-spacing(3) / 2);
   word-wrap: break-word;
 }
 
 .gem-c-image-card__list {
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 19);
   position: relative;
   z-index: 2;
   padding: (govuk-spacing(3) / 2) 0 0 0;
@@ -160,7 +170,7 @@
 
 .gem-c-image-card--large {
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: two-thirds, $at: tablet);
+    @include govuk-grid-column($width: one-half, $at: tablet);
 
     margin-bottom: govuk-spacing(2);
     float: none;
@@ -175,7 +185,7 @@
   }
 
   .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: one-third, $at: tablet);
+    @include govuk-grid-column($width: one-half, $at: tablet);
 
     padding: 0;
     overflow: hidden;

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

@@ -1,102 +1,5 @@
 @import "mixins/prefixed-transform";
-
-/// Set grid row or column value using the fraction unit.
-///
-/// @param {Integer} $number - number of fractions that the grid row or column
-///   needs to be divided into.
-/// @returns {String} - the value
-///
-/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
-///  .container {
-///    grid-template-rows: fractions(5);
-///  }
-///
-@function fractions($number) {
-  $fractions: "1fr";
-
-  @for $i from 1 to $number {
-    $fractions: $fractions + " 1fr";
-  }
-
-  @return unquote($fractions);
-}
-
-/// Arrange items into vertical columns
-///
-/// @param {Integer} $items - number of items that need to be arranged
-/// @param {Integer} $columns - number of columns required
-/// @param {String} $selector - (optional) the inner element to be targeted.
-///
-/// @example scss - A 7 item 2 column layout.
-///  .container {
-///    @include columns(7, 2);
-///  }
-
-/// @example scss - A 9 item 3 column layout that has `div`s as the inner
-///   elements.
-///  .container {
-///    @include columns(9, 3, "div");
-///  }
-///
-@mixin columns($items, $columns, $selector: "*") {
-  $rows: ceil($items / $columns);
-
-  display: -ms-grid;
-  display: grid;
-  grid-auto-flow: column;
-  -ms-grid-columns: fractions($columns);
-  grid-template-columns: fractions($columns);
-  -ms-grid-rows: fractions($rows);
-  grid-template-rows: fractions($rows);
-}
-
-@mixin columns-children($items, $columns, $selector: "*") {
-  $rows: ceil($items / $columns);
-
-  // Internet Explorer 10-11 require each element to be placed in the grid -
-  // the `grid-auto-flow` property isn't supported. This means that both the
-  // column and row needs to be set for every element.
-
-  // This creates a list of lists to represent the columns and rows; for
-  // example, a 7 item 2 column list would create this:
-  //   [
-  //     [1, 2, 3, 4 ] // column one
-  //     [5, 6, 7] // column two
-  //   ]
-  $grid: ();
-  $counter: 0;
-
-  @for $column from 1 through $columns {
-    $this-row: ();
-
-    @for $row from 1 through $rows {
-      $counter: $counter + 1;
-
-      @if $counter <= $items {
-        $this-row: append($this-row, $counter);
-      }
-    }
-
-    $grid: append($grid, $this-row, "comma");
-  }
-
-  // Now we can loop through the list of lists to create the rules needed for
-  // the older grid syntax; fist looping through the list to get the number
-  // needed for the column, then looping again to get the number for the grid
-  // row:
-  @for $column_index from 1 through length($grid) {
-    $this-row: nth($grid, $column_index);
-
-    @for $item-index from 1 through length($this-row) {
-      $this-item: nth($this-row, $item-index);
-
-      & > #{$selector}:nth-child(#{$this-item}) {
-        -ms-grid-column: $column_index;
-        -ms-grid-row: $item-index;
-      }
-    }
-  }
-}
+@import "mixins/grid-helper";
 
 $icon-size: 20px;
 $chevron-indent-spacing: 7px;
@@ -866,15 +769,13 @@ $pseudo-underline-height: 3px;
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns(17, 2, "li");
-    @include columns-children(17, 2, "li");
+    @include columns($items: 17, $columns: 2, $selector: "li", $flow: column);
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
   @include govuk-media-query($from: "desktop") {
-    @include columns(6, 2, "li");
-    @include columns-children(6, 2, "li");
+    @include columns($items: 6, $columns: 2, $selector: "li", $flow: column);
     padding-bottom: 0;
 
     & > li {
@@ -924,8 +825,7 @@ $pseudo-underline-height: 3px;
   padding: 0 0 govuk-spacing(8) govuk-spacing(4);
 
   @include govuk-media-query($from: "desktop") {
-    @include columns(2, 2, "li");
-    @include columns-children(2, 2, "li");
+    @include columns($items: 2, $columns: 2, $selector: "li");
     margin: 0 (0 - govuk-spacing(3));
     padding: govuk-spacing(6) 0 govuk-spacing(7) 0;
   }
@@ -963,6 +863,7 @@ $pseudo-underline-height: 3px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
+  @include govuk-typography-common;
   font-size: 16px;
   @if $govuk-typography-use-rem {
     font-size: govuk-px-to-rem(16px);

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

@@ -1,6 +1,25 @@
 $input-size: 40px;
 $large-input-size: 50px;
 
+@mixin large-mode {
+  .gem-c-search__label {
+    @include govuk-font($size: 19, $line-height: $large-input-size);
+  }
+
+  .gem-c-search__input[type="search"] {
+    height: $large-input-size;
+  }
+
+  .gem-c-search__submit {
+    width: $large-input-size;
+    height: $large-input-size;
+
+    .gem-c-search__icon {
+      @include icon-positioning($large-input-size);
+    }
+  }
+}
+
 .gem-c-search {
   position: relative;
   margin-bottom: 30px;
@@ -220,21 +239,12 @@ $large-input-size: 50px;
 }
 
 .gem-c-search--large {
-  .gem-c-search__label {
-    @include govuk-font($size: 19, $line-height: $large-input-size);
-  }
-
-  .gem-c-search__input[type="search"] {
-    height: $large-input-size;
-  }
-
-  .gem-c-search__submit {
-    width: $large-input-size;
-    height: $large-input-size;
+  @include large-mode;
+}
 
-    .gem-c-search__icon {
-      @include icon-positioning($large-input-size);
-    }
+.gem-c-search--large-on-mobile {
+  @include govuk-media-query($until: "tablet") {
+    @include large-mode;
   }
 }
 

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

@@ -0,0 +1,34 @@
+.gem-c-signup-link__link {
+  @include govuk-font($size: 19);
+}
+
+.gem-c-signup-link__inner {
+  position: relative;
+}
+
+.gem-c-signup-link__icon {
+  position: absolute;
+
+  @include govuk-media-query($from: tablet) {
+    top: 2px;
+  }
+}
+
+.gem-c-signup-link__title {
+  margin-bottom: govuk-spacing(2);
+  margin-left: govuk-spacing(5);
+}
+
+.gem-c-signup-link--with-background-and-border {
+  padding: govuk-spacing(6);
+  background-color: govuk-colour("light-grey");
+  border: 1px solid $govuk-border-colour;
+}
+
+.gem-c-signup-link--link-only .gem-c-signup-link__link {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: bold;
+  margin-left: govuk-spacing(5);
+  margin-bottom: 0;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss

@@ -28,3 +28,11 @@
   vertical-align: top;
   margin-right: govuk-spacing(1);
 }
+
+.js-enabled .gem-c-single-page-notification-button.js-personalisation-enhancement {
+  opacity: 0;
+
+  &.gem-c-single-page-notification-button--visible {
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -34,4 +34,11 @@
       margin-left: 1em;
     }
   }
+
+  // Prevent excessive spacing when placed in a call-to-action block
+  .call-to-action {
+    .help-notice:first-child {
+      margin-top: 0;
+    }
+  }
 }