govuk_publishing_components 16.29.0 → 17.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e8047aceaeee07563168532b4770f4281f8fc0d0b3269ff8b42840b713c06a67
-  data.tar.gz: 16e3fd19901d80548760a58ef8859a09a421fcc1a2faa96664801deed8b9be9c
+  metadata.gz: ed1bcff194d6bc6a10597abb3bbe2124905ccc3ce57325fb6821428a5bab6146
+  data.tar.gz: 12ebe47472df27104c8b895c8b6508438aa1beefebe93ace51973406090a92ed
 SHA512:
-  metadata.gz: 1f17c20b503ad606df0ecc3ae95a685d28251c00350a6201d40821eaff8bc16f81638df34ecc3b8221a8d7954da2fbc7106088b25c2bc7ac32d275c088ef6c20
-  data.tar.gz: ca2fe0a8f76a04780e378abf896ae484b54c42010ca16295275d708ed59f0ce471ebd709af91b2933adc052ecc32caba07a7ba65042a7cfebeb97a07a58f00f1
+  metadata.gz: eddef82c2d0e79b00a3f67b51f4ad965b0c8a706fe9ea2494f528f5ca67e7ef36bb674f2c5ff07d9dff70f14438771eba2efe5a47e69eef4384bd15c37fb752e
+  data.tar.gz: c8df18bbdaad629df80e26201428186515fd1f9b93d8b28c47bc9ea7adb1d68b9e2a1b1ff4bb89a422a3d9d6dafb12340a94631f0989b9ea36c963c8888f0c87

data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -10,43 +10,66 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.showConfirmationMessage = this.showConfirmationMessage.bind(this)
     this.$module.setCookieConsent = this.setCookieConsent.bind(this)
 
-    var newCookieBanner = document.querySelector('.gem-c-cookie-banner--new')
+    this.$module.newCookieBanner = document.querySelector('.gem-c-cookie-banner--new')
 
-    // Hide the cookie banner on the cookie settings page, to avoid circular journeys
-    if (newCookieBanner && window.location.pathname === '/help/cookies') {
-      this.$module.style.display = 'none'
+    // Temporary check while we have 2 banners co-existing.
+    // Once the new banner has been deployed, we will be able to remove code relating to the old banner
+    // Separating the code out like this does mean some repetition, but will make it easier to remove later
+    if (this.$module.newCookieBanner) {
+      this.setupNewCookieMessage()
     } else {
-      this.$hideLink = this.$module.querySelector('a[data-hide-cookie-banner], button[data-hide-cookie-banner]')
-      if (this.$hideLink) {
-        this.$hideLink.addEventListener('click', this.$module.hideCookieMessage)
-      }
+      this.setupCookieMessage()
+    }
+  }
 
-      this.$acceptCookiesLink = this.$module.querySelector('button[data-accept-cookies]')
-      if (this.$acceptCookiesLink) {
-        this.$acceptCookiesLink.addEventListener('click', this.$module.setCookieConsent)
-      }
+  CookieBanner.prototype.setupCookieMessage = function () {
+    this.$hideLink = this.$module.querySelector('a[data-hide-cookie-banner]')
+    if (this.$hideLink) {
+      this.$hideLink.addEventListener('click', this.$module.hideCookieMessage)
+    }
+
+    this.showCookieMessage()
+  }
 
-      this.showCookieMessage()
+  CookieBanner.prototype.setupNewCookieMessage = function () {
+    this.$hideLink = this.$module.querySelector('button[data-hide-cookie-banner]')
+    if (this.$hideLink) {
+      this.$hideLink.addEventListener('click', this.$module.hideCookieMessage)
     }
+
+    this.$acceptCookiesLink = this.$module.querySelector('button[data-accept-cookies]')
+    if (this.$acceptCookiesLink) {
+      this.$acceptCookiesLink.addEventListener('click', this.$module.setCookieConsent)
+    }
+
+    this.showNewCookieMessage()
   }
 
   CookieBanner.prototype.showCookieMessage = function () {
-    var newCookieBanner = document.querySelector('.gem-c-cookie-banner--new')
-    var hasCookieMessage = (this.$module && window.GOVUK.cookie('seen_cookie_message') !== 'true')
-    if (hasCookieMessage) {
+    var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('seen_cookie_message') !== 'true')
+
+    if (shouldHaveCookieMessage) {
       this.$module.style.display = 'block'
     }
+  }
+
+  CookieBanner.prototype.showNewCookieMessage = function () {
+    var newCookieBanner = document.querySelector('.gem-c-cookie-banner--new')
+
+    // Hide the cookie banner on the cookie settings page, to avoid circular journeys
+    if (newCookieBanner && window.location.pathname === '/help/cookies') {
+      this.$module.style.display = 'none'
+    }
+
+    var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('seen_cookie_message') !== 'true')
 
-    if (newCookieBanner && hasCookieMessage) {
+    if (shouldHaveCookieMessage) {
+      this.$module.style.display = 'block'
+
+      // Set the default consent cookie if it isn't already present
       if (!window.GOVUK.cookie('cookie_policy')) {
         window.GOVUK.setDefaultConsentCookie()
       }
-    } else if (!newCookieBanner) {
-      // Remove the consent cookie if we're using the old cookie banner
-      // TODO: this can be removed later when we switch to the new banner
-      if (window.GOVUK.cookie('cookie_policy')) {
-        window.GOVUK.cookie('cookie_policy', null)
-      }
     }
   }
 

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

@@ -123,7 +123,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       }
 
       function showError (error) {
-        error = [
+        var genericError = [
           '<h2 class="gem-c-feedback__heading">',
           '  Sorry, we’re unable to receive your message right now. ',
           '</h2>',
@@ -131,8 +131,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           ' feedback on the <a href="/contact/govuk">contact page</a>.</p>'
         ].join('')
 
+        // if the response is not a 404 or 500, show the error message if it exists
+        // otherwise show the generic message
+        // this covers the 422 status the feedback application return for empty fields
+        // for all other, show generic error
         if (typeof (error.responseJSON) !== 'undefined') {
-          error = typeof (error.responseJSON.message) === 'undefined' ? error : error.responseJSON.message
+          error = typeof (error.responseJSON.message) === 'undefined' ? genericError : error.responseJSON.message
+        } else {
+          error = genericError
         }
         var $errors = that.$activeForm.find('.js-errors')
         $errors.html(error).removeClass(jshiddenClass).focus()

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -3,13 +3,33 @@
 (function () {
   'use strict'
   var root = this
-  var defaultCookieConsent = {
+
+  var DEFAULT_COOKIE_CONSENT = {
     'essential': true,
     'settings': true,
     'usage': true,
     'campaigns': true
   }
 
+  var COOKIE_CATEGORIES = {
+    'TLSversion': 'usage',
+    'cookie_policy': 'essential',
+    'govuk_not_first_visit': 'essential',
+    'govuk_browser_upgrade_dismisssed': 'essential',
+    'seen_cookie_message': 'essential',
+    'govuk_surveySeenUserSatisfactionSurvey': 'essential',
+    'govuk_takenUserSatisfactionSurvey': 'essential',
+    '_email-alert-frontend_session': 'essential',
+    'global_bar_seen': 'essential',
+    'licensing_session': 'essential',
+    'govuk_contact_referrer': 'essential',
+    'JS-Detection': 'usage',
+    '_ga': 'usage',
+    '_gid': 'usage',
+    '_gat': 'usage',
+    'analytics_next_page_call': 'usage'
+  }
+
   if (typeof root.GOVUK === 'undefined') { root.GOVUK = {} }
 
   /*
@@ -40,7 +60,7 @@
   }
 
   window.GOVUK.setDefaultConsentCookie = function () {
-    window.GOVUK.setCookie('cookie_policy', JSON.stringify(defaultCookieConsent))
+    window.GOVUK.setCookie('cookie_policy', JSON.stringify(DEFAULT_COOKIE_CONSENT))
   }
 
   window.GOVUK.approveAllCookieTypes = function () {
@@ -65,37 +85,97 @@
     window.GOVUK.setCookie('cookie_policy', JSON.stringify(deniedConsent))
   }
 
-  window.GOVUK.setConsentCookie = function (options) {
-    var currentConsentCookie = window.GOVUK.getCookie('cookie_policy')
-    var cookieConsentJSON
+  window.GOVUK.getConsentCookie = function () {
+    var consentCookie = window.GOVUK.cookie('cookie_policy')
+    var consentCookieObj
 
-    if (currentConsentCookie) {
-      cookieConsentJSON = JSON.parse(currentConsentCookie)
+    if (consentCookie) {
+      try {
+        consentCookieObj = JSON.parse(consentCookie)
+      } catch (err) {
+        return null
+      }
+
+      if (typeof consentCookieObj !== 'object' && consentCookieObj !== null) {
+        consentCookieObj = JSON.parse(consentCookieObj)
+      }
     } else {
-      cookieConsentJSON = defaultCookieConsent
+      return null
+    }
+
+    return consentCookieObj
+  }
+
+  window.GOVUK.setConsentCookie = function (options) {
+    var cookieConsent = window.GOVUK.getConsentCookie()
+
+    if (!cookieConsent) {
+      cookieConsent = DEFAULT_COOKIE_CONSENT
     }
 
     for (var cookieType in options) {
-      cookieConsentJSON[cookieType] = options[cookieType]
+      cookieConsent[cookieType] = options[cookieType]
     }
 
-    window.GOVUK.setCookie('cookie_policy', JSON.stringify(cookieConsentJSON))
+    window.GOVUK.setCookie('cookie_policy', JSON.stringify(cookieConsent))
   }
 
-  window.GOVUK.setCookie = function (name, value, options) {
-    if (typeof options === 'undefined') {
-      options = {}
+  window.GOVUK.checkConsentCookieCategory = function (cookieCategory) {
+    var currentConsentCookie = window.GOVUK.getConsentCookie()
+
+    // If the consent cookie doesn't exist, set the default consent cookie
+    if (!currentConsentCookie) {
+      window.GOVUK.setDefaultConsentCookie()
+    }
+
+    currentConsentCookie = window.GOVUK.getConsentCookie()
+
+    // Sometimes currentConsentCookie is malformed in some of the tests, so we need to handle these
+    try {
+      return currentConsentCookie[cookieCategory]
+    } catch (e) {
+      console.error(e)
+      return false
+    }
+  }
+
+  window.GOVUK.checkConsentCookie = function (cookieName, cookieValue) {
+    // If we're setting the consent cookie OR deleting a cookie, allow by default
+    if (cookieName === 'cookie_policy' || (cookieValue === null || cookieValue === false)) {
+      return true
+    }
+
+    // Survey cookies are dynamically generated, so we need to check for these separately
+    if (cookieName.match('^govuk_surveySeen') || cookieName.match('^govuk_taken')) {
+      return window.GOVUK.checkConsentCookieCategory('essential')
     }
-    var cookieString = name + '=' + value + '; path=/'
-    if (options.days) {
-      var date = new Date()
-      date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000))
-      cookieString = cookieString + '; expires=' + date.toGMTString()
+
+    if (COOKIE_CATEGORIES[cookieName]) {
+      var cookieCategory = COOKIE_CATEGORIES[cookieName]
+
+      return window.GOVUK.checkConsentCookieCategory(cookieCategory)
+    } else {
+      // Deny the cookie if it is not known to us
+      return false
     }
-    if (document.location.protocol === 'https:') {
-      cookieString = cookieString + '; Secure'
+  }
+
+  window.GOVUK.setCookie = function (name, value, options) {
+    if (window.GOVUK.checkConsentCookie(name, value)) {
+      if (typeof options === 'undefined') {
+        options = {}
+      }
+      var cookieString = name + '=' + value + '; path=/'
+      if (options.days) {
+        var date = new Date()
+        date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000))
+        cookieString = cookieString + '; expires=' + date.toGMTString()
+      }
+      if (document.location.protocol === 'https:') {
+        cookieString = cookieString + '; Secure'
+      }
+      document.cookie = cookieString
     }
-    document.cookie = cookieString
   }
 
   window.GOVUK.getCookie = function (name) {

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -13,10 +13,12 @@ window.GOVUK = window.GOVUK || {};
   YoutubeLinkEnhancement.prototype.init = function () {
     var $youtubeLinks = this.$element.find('a[href*="youtube.com"], a[href*="youtu.be"]')
     var _this = this
+
     $youtubeLinks.each(function () {
       var $link = $(this)
-
-      if (_this.hasDisabledEmbed($link)) {
+      // if users have disabled 'campaigns' cookie in the new cookie page settings
+      // we also need to disable the youtube video embed
+      if (_this.hasDisabledEmbed($link) || !YoutubeLinkEnhancement.campaignCookies()) {
         return true
       }
 
@@ -61,6 +63,11 @@ window.GOVUK = window.GOVUK || {};
     }
   }
 
+  YoutubeLinkEnhancement.campaignCookies = function () {
+    var cookiePolicy = window.GOVUK.getCookie('cookie_policy') ? JSON.parse(window.GOVUK.getCookie('cookie_policy')) : 'undefined'
+    return cookiePolicy !== 'undefined' ? cookiePolicy.campaigns : true
+  }
+
   YoutubeLinkEnhancement.nextId = function () {
     this.embedCount = this.embedCount || 0
     this.embedCount += 1

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

@@ -78,7 +78,6 @@
 @import "components/tabs";
 @import "components/table";
 @import "components/taxonomy-list";
-@import "components/taxonomy-navigation";
 @import "components/textarea";
 @import "components/title";
 @import "components/translation-nav";

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

@@ -24,16 +24,14 @@ $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
 .gem-c-button--inline {
   display: block;
+  width: 100%;
   margin-bottom: govuk-spacing(1);
-
-  @include govuk-media-query($from: mobile) {
-    @include box-sizing(border-box);
-    display: inline-block;
-    width: 48%;
-  }
+  vertical-align: top;
 
   @include govuk-media-query($from: desktop) {
+    display: inline-block;
     width: auto;
+    vertical-align: baseline;
   }
 }
 

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

@@ -1,5 +1,6 @@
 $govuk-cookie-banner-background: #d5e8f3;
 $govuk-cookie-banner-background-new: govuk-colour("white");
+$govuk-cookie-banner-text-green: #00823b;
 
 .js-enabled {
   .gem-c-cookie-banner,
@@ -38,33 +39,63 @@ $govuk-cookie-banner-background-new: govuk-colour("white");
   margin-bottom: govuk-spacing(1);
   padding-right: govuk-spacing(4);
   padding-bottom: govuk-spacing(2);
+  color: $govuk-cookie-banner-text-green;
 }
 
 .gem-c-cookie-banner__buttons {
-  vertical-align: middle;
+  @include govuk-clearfix;
 
   @include govuk-media-query($from: desktop) {
     display: inline-block;
   }
 }
 
+.gem-c-cookie-banner__button {
+  display: inline-block;
+  width: 100%;
+
+  @include govuk-media-query($from: mobile, $until: desktop) {
+    width: 49%;
+
+    &.gem-c-cookie-banner__button-accept {
+      float: left;
+    }
+
+    &.gem-c-cookie-banner__button-settings {
+      float: right;
+    }
+  }
+
+  @include govuk-media-query($from: desktop) {
+    width: auto;
+  }
+
+  @include govuk-media-query($until: 455px) {
+    width: 100%;
+  }
+}
+
 .gem-c-cookie-banner__confirmation {
   display: none;
   position: relative;
-  padding: 0 govuk-spacing(2);
+  padding: govuk-spacing(1);
 }
 
 .gem-c-cookie-banner__confirmation-message,
 .gem-c-cookie-banner__hide-button {
   display: block;
 
-  @include govuk-media-query($from: tablet) {
+  @include govuk-media-query($from: desktop) {
     display: inline-block;
   }
 }
 
 .gem-c-cookie-banner__confirmation-message {
   margin-right: govuk-spacing(4);
+
+  @include govuk-media-query($from: desktop) {
+    max-width: 90%;
+  }
 }
 
 .gem-c-cookie-banner__hide-button {
@@ -83,10 +114,10 @@ $govuk-cookie-banner-background-new: govuk-colour("white");
     cursor: pointer;
   }
 
-  @include govuk-media-query($from: tablet) {
+  @include govuk-media-query($from: desktop) {
     margin-top: govuk-spacing(0);
     position: absolute;
-    right: 0;
+    right: govuk-spacing(1);
   }
 }
 

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

@@ -1,46 +1,46 @@
 .gem-c-heading {
   @include govuk-text-colour;
-  @include bold-27;
+  @include govuk-font(27, $weight: bold);
   margin: 0;
 }
 
 .gem-c-heading--font-size-24 {
-  @include bold-24;
+  @include govuk-font(24, $weight: bold);
 }
 
 .gem-c-heading--font-size-19 {
-  @include bold-19;
+  @include govuk-font(19, $weight: bold);
 }
 
 // special case for publications and consultations pages
 // separated to allow normalisation of the component for wider use
 .gem-c-heading--mobile-top-margin {
-  margin-top: $gutter;
-  margin-bottom: $gutter-half;
+  margin-top: govuk-spacing(6);
+  margin-bottom: govuk-spacing(3);
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-top: 0;
-    margin-bottom: $gutter;
+    margin-bottom: govuk-spacing(6);
   }
 }
 
 .gem-c-heading--padding {
-  padding: $gutter-half 0;
+  padding: govuk-spacing(3) 0;
 }
 
 // margins would ideally be handled by a general model for all components
 // but we don't have one yet, so this is in anticipation of that
 // suggested scale is as follows, not fully implemented
-// $gutter = 4
-// $gutter-two-thirds = 3
-// $gutter-half = 2
-// $gutter-one-third = 1
+// govuk-spacing(6)= 4
+// govuk-spacing(4) = 3
+// govuk-spacing(3) = 2
+// govuk-spacing(2) = 1
 .gem-c-heading--margin-bottom-4 {
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
 }
 
 .gem-c-heading--margin-bottom-2 {
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 }
 
 // border color will default to black