govuk_publishing_components 21.14.0 → 21.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3b8b720833271b00598f634fa50424361c265ea3f4bf42cef01184a5b36af26
-  data.tar.gz: 6b4a2ae3ee350c4e4a45cbdac9ab04e9412a1c66fb361b05c706fdcca1ba6240
+  metadata.gz: a49f0b03464d55542eb09daf6d95f85059090ef2977fdd3e96b09b326c06fa52
+  data.tar.gz: 7856a1ec7759dee3ff52127cf836676777d2753593f49e2ba3692cd8e854c3e9
 SHA512:
-  metadata.gz: e7840cdd577f7307231fc74e67aa8e0e0d81e5929fecd0408297e79c82e268a916466633ea8efce01b8f8d0dd8c1f4a73965b761f9d08df9c720334733fd4fe8
-  data.tar.gz: 7ebb8a3c9a9442e323955a5b815e97d673e7fbb292da063dc0f14a513c6b91a49cfb418fc293c10149cd9c05002d9b46c5c3250044294b32ce75efd1b66d6d2d
+  metadata.gz: 1ef24d7b0418ef007e0871d405518c7666137d2b364b8660cfb16ce5930ddc56cc6061283bc459a4a44c15c97a252a57b35f9b406fd2fae87d924b8055213300
+  data.tar.gz: b8e911d17e93799b4fcc0bf46e3f50b20c96213bf97c8704a4d5ec9ab9771f3638c4c1461a8ba11429a4475c61ae081e3c66f2f8c7d451cff1456a7192d564c1

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

@@ -27,27 +27,19 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.$acceptCookiesLink.addEventListener('click', this.$module.setCookieConsent)
     }
 
-    // Force the new cookie banner to show if we don't think the user has seen it before
-    // This involves resetting the seen_cookie_message cookie, which may be set to true if they've seen the old cookie banner
-    if (!window.GOVUK.cookie('cookie_policy')) {
-      if (window.GOVUK.cookie('seen_cookie_message') === 'true') {
-        window.GOVUK.cookie('seen_cookie_message', false, { days: 365 })
-      }
-    }
-
     this.showCookieMessage()
   }
 
   CookieBanner.prototype.showCookieMessage = function () {
     // Show the cookie banner if not in the cookie settings page or in an iframe
     if (!this.isInCookiesPage() && !this.isInIframe()) {
-      var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('seen_cookie_message') !== 'true')
+      var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')
 
       if (shouldHaveCookieMessage) {
         this.$module.style.display = 'block'
 
         // Set the default consent cookie if it isn't already present
-        if (!window.GOVUK.cookie('cookie_policy')) {
+        if (!window.GOVUK.cookie('cookies_policy')) {
           window.GOVUK.setDefaultConsentCookie()
         }
       } else {
@@ -61,7 +53,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
       this.$module.style.display = 'none'
-      window.GOVUK.cookie('seen_cookie_message', 'true', { days: 365 })
+      window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
 
     if (event.target) {
@@ -73,7 +65,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     window.GOVUK.approveAllCookieTypes()
     this.$module.showConfirmationMessage()
     this.$module.cookieBannerConfirmationMessage.focus()
-    window.GOVUK.cookie('seen_cookie_message', 'true', { days: 365 })
+    window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
   }
 
   CookieBanner.prototype.showConfirmationMessage = function () {

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

@@ -6,29 +6,30 @@
 
   var DEFAULT_COOKIE_CONSENT = {
     'essential': true,
-    'settings': true,
-    'usage': true,
-    'campaigns': true
+    'settings': false,
+    'usage': false,
+    'campaigns': false
   }
 
   var COOKIE_CATEGORIES = {
-    'TLSversion': 'usage',
-    'cookie_policy': 'essential',
-    'govuk_not_first_visit': 'essential',
-    'govuk_browser_upgrade_dismisssed': 'essential',
+    'cookies_policy': 'essential',
     'seen_cookie_message': 'essential',
     'cookie_preferences_set': 'essential',
-    'govuk_surveySeenUserSatisfactionSurvey': 'essential',
-    'govuk_takenUserSatisfactionSurvey': 'essential',
+    'cookies_preferences_set': 'essential',
     '_email-alert-frontend_session': 'essential',
-    'global_bar_seen': 'essential',
     'licensing_session': 'essential',
     'govuk_contact_referrer': 'essential',
-    'JS-Detection': 'usage',
+    'global_bar_seen': 'settings',
+    'govuk_browser_upgrade_dismisssed': 'settings',
+    'govuk_not_first_visit': 'settings',
+    'govuk_surveySeenUserSatisfactionSurvey': 'settings',
+    'govuk_takenUserSatisfactionSurvey': 'settings',
+    'analytics_next_page_call': 'usage',
     '_ga': 'usage',
     '_gid': 'usage',
     '_gat': 'usage',
-    'analytics_next_page_call': 'usage'
+    'JS-Detection': 'usage',
+    'TLSversion': 'usage'
   }
 
   /*
@@ -63,7 +64,7 @@
   }
 
   window.GOVUK.setDefaultConsentCookie = function () {
-    window.GOVUK.setCookie('cookie_policy', JSON.stringify(DEFAULT_COOKIE_CONSENT), { days: 365 })
+    window.GOVUK.setConsentCookie(DEFAULT_COOKIE_CONSENT)
   }
 
   window.GOVUK.approveAllCookieTypes = function () {
@@ -74,11 +75,11 @@
       'campaigns': true
     }
 
-    window.GOVUK.setCookie('cookie_policy', JSON.stringify(approvedConsent), { days: 365 })
+    window.GOVUK.setCookie('cookies_policy', JSON.stringify(approvedConsent), { days: 365 })
   }
 
   window.GOVUK.getConsentCookie = function () {
-    var consentCookie = window.GOVUK.cookie('cookie_policy')
+    var consentCookie = window.GOVUK.cookie('cookies_policy')
     var consentCookieObj
 
     if (consentCookie) {
@@ -122,7 +123,7 @@
       }
     }
 
-    window.GOVUK.setCookie('cookie_policy', JSON.stringify(cookieConsent), { days: 365 })
+    window.GOVUK.setCookie('cookies_policy', JSON.stringify(cookieConsent), { days: 365 })
   }
 
   window.GOVUK.checkConsentCookieCategory = function (cookieName, cookieCategory) {
@@ -146,7 +147,7 @@
 
   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)) {
+    if (cookieName === 'cookies_policy' || (cookieValue === null || cookieValue === false)) {
       return true
     }
 

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

@@ -1,5 +1,4 @@
-$govuk-cookie-banner-background: govuk-colour("white");
-$govuk-cookie-banner-text-green: #00823b;
+$govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
 .js-enabled {
   .gem-c-cookie-banner {
@@ -11,60 +10,41 @@ $govuk-cookie-banner-text-green: #00823b;
   @include govuk-font($size: 16);
   padding: govuk-spacing(2) 0;
   background-color: $govuk-cookie-banner-background;
-  border: 2px solid govuk-colour("black");
 }
 
 .gem-c-cookie-banner__message {
   display: inline-block;
-  margin-bottom: govuk-spacing(1);
+  @include govuk-font($size: 16);
   padding-right: govuk-spacing(4);
   padding-bottom: govuk-spacing(2);
-  color: $govuk-cookie-banner-text-green;
 }
 
-.gem-c-cookie-banner__buttons {
-  @include govuk-clearfix;
+.gem-c-cookie-banner__button {
 
-  @include govuk-media-query($from: desktop) {
-    display: inline-block;
+  &.govuk-grid-column-one-half-from-desktop {
+    padding: 0;
   }
-}
 
-.gem-c-cookie-banner__button {
-  display: inline-block;
-  width: 100%;
+  .govuk-button {
+    width: 90%;
 
-  @include govuk-media-query($from: mobile, $until: desktop) {
-    &.gem-c-cookie-banner__button-accept {
-      float: left;
-      width: 49%;
+    @include govuk-media-query($until: desktop) {
+      margin-bottom: govuk-spacing(4);
     }
 
-    &.gem-c-cookie-banner__button-settings {
-      .js-enabled & {
-        float: right;
-        width: 49%;
-      }
-    }
-  }
-
-  @include govuk-media-query($from: desktop) {
-    width: auto;
-  }
-
-  @include govuk-media-query($until: 455px) {
-    width: 100%;
   }
 }
 
+// Only show accept button if users have js and can accept
 .gem-c-cookie-banner__button-accept {
   display: none;
+}
 
-  .js-enabled & {
-    display: inline-block;
-  }
+.js-enabled .gem-c-cookie-banner__button-accept {
+  display: inline-block;
 }
 
+
 .gem-c-cookie-banner__confirmation {
   display: none;
   position: relative;
@@ -137,8 +117,10 @@ $govuk-cookie-banner-text-green: #00823b;
   }
 
   p {
-    margin: 0;
+    @include govuk-font($size: 19);
+    margin: 0 0 govuk-spacing(2) 0;
   }
+
 }
 // sass-lint:enable no-ids
 // scss-lint:enable IdSelector

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

@@ -4,6 +4,7 @@
   content ||= nil
   data_attributes ||= {}
   data_attributes[:module] = "contextual-guidance"
+  guidance_id ||= nil
 %>
 
 <%= tag.div class: "gem-c-contextual-guidance", id: id, data: data_attributes do %>
@@ -14,7 +15,7 @@
       <% end %>
     <% end %>
     <%= tag.div class: "govuk-grid-column-one-third" do %>
-      <%= tag.div class: "gem-c-contextual-guidance__wrapper", for: html_for do %>
+      <%= tag.div class: "gem-c-contextual-guidance__wrapper", for: html_for, id: guidance_id do %>
         <%= tag.div class: "gem-c-contextual-guidance__guidance" do %>
           <%= tag.h2 title, class: "govuk-heading-s" %>
           <%= content %>

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

@@ -1,37 +1,41 @@
 <%
   id ||= 'global-cookie-message'
-  message ||= "GOV.UK uses cookies which are essential for the site to work. We also use non-essential cookies to help us improve government digital services. Any data collected is anonymised. By continuing to use this site, you agree to our use of cookies."
 %>
 
-<div id="<%= id %>" class="gem-c-cookie-banner" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
+<div id="<%= id %>" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
   <div class="gem-c-cookie-banner__wrapper govuk-width-container">
-    <p class="gem-c-cookie-banner__message"><%= message %></p>
-    <div class="gem-c-cookie-banner__buttons">
-      <div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-accept">
-        <%= render "govuk_publishing_components/components/button", {
-          text: "Accept cookies",
-          secondary: true,
-          inline_layout: true,
-          data_attributes: {
-            module: "track-click",
-            "accept-cookies": "true",
-            "track-category": "cookieBanner",
-            "track-action": "Cookie banner accepted"
-          }
-        } %>
-      </div>
-      <div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-settings">
-        <%= render "govuk_publishing_components/components/button", {
-          text: "Cookie settings",
-          href: "/help/cookies",
-          secondary: true,
-          inline_layout: true,
-          data_attributes: {
-            module: "track-click",
-            "track-category": "cookieBanner",
-            "track-action": "Cookie banner settings clicked"
-          }
-        } %>
+    <div class="govuk-row">
+      <div class=" govuk-grid-column-two-thirds">
+        <div class="gem-c-cookie-banner__message">
+          <span class="govuk-heading-m">Tell us whether you accept cookies</span>
+          <p class="govuk-body">We use <a class="govuk-link" href="help/cookies">cookies to collect information</a> about how you use GOV.UK. We use this information to make the website work as well as possible and improve government services.</p>
+        </div>
+        <div class="gem-c-cookie-banner__buttons">
+          <div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-accept govuk-grid-column-full govuk-grid-column-one-half-from-desktop">
+            <%= render "govuk_publishing_components/components/button", {
+              text: "Accept all cookies",
+              inline_layout: true,
+              data_attributes: {
+                module: "track-click",
+                "accept-cookies": "true",
+                "track-category": "cookieBanner",
+                "track-action": "Cookie banner accepted"
+              }
+            } %>
+          </div>
+          <div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-settings govuk-grid-column-full govuk-grid-column-one-half-from-desktop">
+            <%= render "govuk_publishing_components/components/button", {
+              text: "Set cookie preferences",
+              href: "/help/cookies",
+              inline_layout: true,
+              data_attributes: {
+                module: "track-click",
+                "track-category": "cookieBanner",
+                "track-action": "Cookie banner settings clicked"
+              }
+            } %>
+          </div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -2,6 +2,7 @@
   id ||= "textarea-#{SecureRandom.hex(4)}"
   value ||= nil
   rows ||= 5
+  describedby ||= nil
   data ||= nil
   spellcheck ||= "true"
 
@@ -27,10 +28,11 @@
   form_group_css_classes << (shared_helper.get_margin_bottom)
 
   aria_described_by ||= nil
-  if hint || has_error
+  if hint || has_error || describedby
     aria_described_by = []
     aria_described_by << hint_id if hint
     aria_described_by << error_id if has_error
+    aria_described_by << describedby if describedby
     aria_described_by = aria_described_by.join(" ")
   end
 %>

data/app/views/govuk_publishing_components/components/docs/contextual_guidance.yml

@@ -19,10 +19,11 @@ examples:
     data:
       html_for: news-title
       title: Writing a news title
+      guidance_id: news-title-guidance
       content: |
         <p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
       block: |
         <div class="govuk-form-group">
           <label class="gem-c-label govuk-label" for="news-title">News title</label>
-          <input id="news-title" type="text" class="gem-c-input govuk-input">
+          <input id="news-title" type="text" class="gem-c-input govuk-input" aria-describedby="news-title-guidance">
         </div>

data/app/views/govuk_publishing_components/components/docs/cookie_banner.yml

@@ -17,7 +17,3 @@ accessibility_excluded_rules:
 examples:
   default:
     data: {}
-  custom_message:
-    data:
-      id: custom-message
-      message: GOV.UK uses cookies to make the site simpler. <a class="govuk-link" href="/help/cookies">Find out more about cookies</a>

data/app/views/govuk_publishing_components/components/docs/textarea.yml

@@ -76,3 +76,15 @@ examples:
       name: "maxlength"
       value: "You can't type more"
       maxlength: 19
+  with_aria_attributes:
+    description: Use `describedby` when the textarea is described by an element outside the component; for example, when used in conjunction with a [contextual guidance](/component-guide/contextual_guidance).
+    embed: |
+      <%= component %>
+      <p class="govuk-body" id="contextual-guidance">The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
+    data:
+      label:
+        text: "Title"
+        bold: true
+      name: "described"
+      rows: 2
+      describedby: "contextual-guidance"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '21.14.0'.freeze
+  VERSION = '21.15.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.14.0
+  version: 21.15.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-12-13 00:00:00.000000000 Z
+date: 2019-12-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: gds-api-adapters