govuk_publishing_components 24.1.1 → 24.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 664f19b71a4b1ec65f49a7a14fa21d4a2a64465b2f593a3c75e2de132474417a
-  data.tar.gz: 8e734701d0d66817548de5855938a6cdad1f9b2ce2fa96437075e9058331785a
+  metadata.gz: 9ce32a486835dfd2796501f4cf80d3403ad4074fa1a832678a221fb9b607f3d3
+  data.tar.gz: 3b67448789550b585b08a3aa96666ac4fdc7a18cd5c6c8621668aa8e5ed91506
 SHA512:
-  metadata.gz: 9073c4b0254a544f3a0f6da89889550786a3f0e7cc5611b6c89768be9c8d66ff27b8364d54525e677013c439e73acb7dd618289f2d72787d56b6f833d89df910
-  data.tar.gz: 2ed858269eee93ae2212110fd2aa4b4cee21106e5028a36508d3242982a8e60be387b1f31e8b7694f1b66b401707049865f4fda1338639d3b9ce5e702db99b05
+  metadata.gz: c3a19281a025aa4f0a0c51a14c06844d4ad67b2de6217fe57cf87bef328ed42a0bc7b959d0c07672d58e68b7e7995d7b2e02a47744723854ad7e3444ee3b748f
+  data.tar.gz: f866b24a0aa8c7cce2dfe1f3c4bab39aa977d1e40ded6abc218563c365fba0f743efe2a4d1ce47091beb5610b98f2c0acc367b18b11a533cfbe92f9eadb5ece9

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

@@ -9,10 +9,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.hideCookieMessage = this.hideCookieMessage.bind(this)
     this.$module.showConfirmationMessage = this.showConfirmationMessage.bind(this)
     this.$module.setCookieConsent = this.setCookieConsent.bind(this)
+    this.$module.rejectCookieConsent = this.rejectCookieConsent.bind(this)
 
     this.$module.cookieBanner = document.querySelector('.gem-c-cookie-banner')
     this.$module.cookieBannerConfirmationMessage = this.$module.querySelector('.gem-c-cookie-banner__confirmation')
-
+    this.$module.cookieBannerConfirmationMessageText = this.$module.querySelector('.gem-c-cookie-banner__confirmation-message')
     this.setupCookieMessage()
   }
 
@@ -24,9 +25,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       }
     }
 
-    this.$acceptCookiesLink = this.$module.querySelector('button[data-accept-cookies]')
-    if (this.$acceptCookiesLink) {
-      this.$acceptCookiesLink.addEventListener('click', this.$module.setCookieConsent)
+    this.$acceptCookiesButton = this.$module.querySelector('button[data-accept-cookies]')
+    if (this.$acceptCookiesButton) {
+      this.$acceptCookiesButton.style.display = 'block'
+      this.$acceptCookiesButton.addEventListener('click', this.$module.setCookieConsent)
+    }
+
+    this.$rejectCookiesButton = this.$module.querySelector('button[data-reject-cookies]')
+    if (this.$rejectCookiesButton) {
+      this.$rejectCookiesButton.style.display = 'block'
+      this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
     }
 
     this.showCookieMessage()
@@ -56,6 +64,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
+      this.$module.hidden = true
       this.$module.style.display = 'none'
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
@@ -66,6 +75,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   CookieBanner.prototype.setCookieConsent = function () {
+    if (this.$acceptCookiesButton.getAttribute('data-cookie-types') === 'all') {
+      this.$module.cookieBannerConfirmationMessageText.insertAdjacentHTML('afterbegin', 'You have accepted additional cookies. ')
+    }
     window.GOVUK.approveAllCookieTypes()
     this.$module.showConfirmationMessage()
     this.$module.cookieBannerConfirmationMessage.focus()
@@ -78,11 +90,19 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  CookieBanner.prototype.rejectCookieConsent = function () {
+    this.$module.cookieBannerConfirmationMessageText.insertAdjacentHTML('afterbegin', 'You have rejected additional cookies. ')
+    this.$module.showConfirmationMessage()
+    this.$module.cookieBannerConfirmationMessage.focus()
+    window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+  }
+
   CookieBanner.prototype.showConfirmationMessage = function () {
-    this.$cookieBannerMainContent = document.querySelector('.gem-c-cookie-banner__wrapper')
+    this.$cookieBannerMainContent = document.querySelector('.js-banner-wrapper')
 
-    this.$cookieBannerMainContent.style.display = 'none'
+    this.$cookieBannerMainContent.hidden = true
     this.$module.cookieBannerConfirmationMessage.style.display = 'block'
+    this.$module.cookieBannerConfirmationMessage.hidden = false
   }
 
   CookieBanner.prototype.isInCookiesPage = function () {

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

@@ -1,3 +1,4 @@
+@import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
 .js-enabled {
@@ -7,50 +8,14 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 }
 
 .gem-c-cookie-banner {
-  @include govuk-font($size: 16);
-  padding: govuk-spacing(2) 0;
   background-color: $govuk-cookie-banner-background;
 }
 
-.gem-c-cookie-banner--services {
+// can't be used without js so implement there
+.gem-c-cookie-banner .gem-c-button {
   display: none;
 }
 
-.gem-c-cookie-banner__message {
-  display: inline-block;
-  padding-bottom: govuk-spacing(2);
-
-  @include govuk-font($size: 16);
-  @include govuk-media-query($from: desktop) {
-    padding-right: govuk-spacing(4);
-  }
-}
-
-.gem-c-cookie-banner__button {
-  &.govuk-grid-column-one-half-from-desktop {
-    padding: 0;
-  }
-
-  .govuk-button {
-    @include govuk-media-query($from: desktop) {
-      width: 90%;
-    }
-
-    @include govuk-media-query($until: desktop) {
-      margin-bottom: govuk-spacing(4);
-    }
-  }
-}
-
-// Only show accept button if users have js and can accept
-.gem-c-cookie-banner__button-accept {
-  display: none;
-}
-
-.js-enabled .gem-c-cookie-banner__button-accept {
-  display: inline-block;
-}
-
 .gem-c-cookie-banner__confirmation {
   display: none;
   position: relative;
@@ -81,51 +46,11 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
   }
 }
 
-.gem-c-cookie-banner__hide-button {
-  @include govuk-font($size: 19);
-  outline: 0;
-  border: 0;
-  background: none;
-  text-decoration: underline;
-  color: $govuk-link-colour;
-  padding: govuk-spacing(0);
-  margin-top: govuk-spacing(2);
-
-  &:hover {
-    color: $govuk-link-hover-colour;
-    cursor: pointer;
-  }
-
-  &:focus {
-    @include govuk-focused-text;
-  }
-
-  @include govuk-media-query($from: desktop) {
-    margin-top: govuk-spacing(0);
-    position: absolute;
-    right: govuk-spacing(1);
-  }
-}
-
-.gem-c-cookie-banner__buttons--flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-
-  .govuk-button,
-  .gem-c-cookie-banner__link {
-    flex-grow: 1;
-    flex-basis: 10rem;
-    margin-right: govuk-spacing(3);
-    margin-bottom: govuk-spacing(3);
-  }
-}
-
 // Override the styles from govuk_template
 // stylelint-disable selector-max-id
 .gem-c-cookie-banner#global-cookie-message {
   background-color: $govuk-cookie-banner-background;
-  padding: govuk-spacing(4) 0;
+  padding: 0;
   box-sizing: border-box;
 
   .gem-c-cookie-banner__message,
@@ -135,18 +60,13 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
     @include govuk-font($size: 19);
   }
 
-  .gem-c-cookie-banner__message {
-    margin-bottom: 0;
-  }
-
   p {
     @include govuk-font($size: 19);
     margin: 0 0 govuk-spacing(2) 0;
   }
 
-  .gem-c-cookie-banner__confirmation-message {
-    @include govuk-media-query($from: desktop) {
-      margin-bottom: 0;
-    }
+  .gem-c-cookie-banner__message,
+  .gem-c-cookie-banner__confirmation {
+    margin-bottom: - govuk-spacing(2);
   }
 }

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

@@ -1,72 +1,83 @@
 <%
   id ||= 'global-cookie-message'
-  title ||= "Tell us whether you accept cookies"
-  text ||= raw("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.")
+  title ||= "Cookies on GOV.UK"
+  text ||= ["We use some essential cookies to make this website work.", "We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.", "We also use cookies set by other sites to help us deliver content from their services."]
+  if text.kind_of?(Array)
+    newtext = ""
+    text.each do |t|
+      newtext += "<p class='govuk-body'>#{t}</p>"
+    end
+    text = newtext
+  else
+    text = "<p class='govuk-body'>#{text}</p>"
+  end
+  text = raw(text)
+
   cookie_preferences_href ||= "/help/cookies"
-  confirmation_message ||= raw("You’ve accepted all cookies. You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
+  confirmation_message ||= raw("You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
   services_cookies ||= nil
   css_classes = %w(gem-c-cookie-banner govuk-clearfix)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
-
 <div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
-  <div class="gem-c-cookie-banner__wrapper govuk-width-container">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <div class="gem-c-cookie-banner__message">
-          <h2 class="govuk-heading-m"><%= title %></h2>
-          <p class="govuk-body"><%= text %></p>
+  <div class="govuk-cookie-banner js-banner-wrapper" role="region" aria-label="<%= title %>">
+    <div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m"><%= title %></h2>
+          <div class="govuk-cookie-banner__content">
+            <%= text %>
+          </div>
         </div>
-        <% if services_cookies %>
-          <div class="gem-c-cookie-banner__buttons gem-c-cookie-banner__buttons--flex">
+      </div>
+      <% if services_cookies %>
+          <div class="govuk-button-group">
             <%= render "govuk_publishing_components/components/button", {
+              name: "cookies",
               text: services_cookies.dig(:yes, :text) || "Yes",
-              inline_layout: true,
               data_attributes: { module: "track-click", "accept-cookies": "true", }.merge(services_cookies.dig(:yes, :data_attributes) || {})
             } %>
             <%= render "govuk_publishing_components/components/button", {
+              name: "cookies",
               text: services_cookies.dig(:no, :text) || "No",
-              inline_layout: true,
-              data_attributes: { module: "track-click", "hide-cookie-banner": "true", }.merge(services_cookies.dig(:no, :data_attributes) || {})
+              data_attributes: { module: "track-click", "reject-cookies": "true", }.merge(services_cookies.dig(:no, :data_attributes) || {})
             } %>
             <% if services_cookies[:cookie_preferences] %>
-              <%= link_to services_cookies.dig(:cookie_preferences, :text), services_cookies.dig(:cookie_preferences, :href), class: "gem-c-cookie-banner__link govuk-link" %>
+              <%= link_to services_cookies.dig(:cookie_preferences, :text), services_cookies.dig(:cookie_preferences, :href), class: "govuk-link" %>
             <% end %>
           </div>
         <% else %>
-          <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,
+          <div class="govuk-button-group">
+            <%= render "govuk_publishing_components/components/button", {
+                name: "cookies",
+                text: "Accept additional cookies",
                 data_attributes: {
                   module: "track-click",
                   "accept-cookies": "true",
                   "track-category": "cookieBanner",
-                  "track-action": "Cookie banner accepted"
+                  "track-action": "Cookie banner accepted",
+                  "cookie-types": "all",
                 }
-              } %>
-            </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: cookie_preferences_href,
-                inline_layout: true,
+            } %>
+            <%= render "govuk_publishing_components/components/button", {
+                name: "cookies",
+                text: "Reject additional cookies",
                 data_attributes: {
                   module: "track-click",
+                  "reject-cookies": "true",
                   "track-category": "cookieBanner",
-                  "track-action": "Cookie banner settings clicked"
+                  "track-action": "Cookie banner rejected",
                 }
-              } %>
-            </div>
+            } %>
+            <a class="govuk-link" href="<%= cookie_preferences_href %>">View cookies</a>
           </div>
         <% end %>
-      </div>
     </div>
   </div>
-
-  <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1">
+  <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1" hidden>
     <p class="gem-c-cookie-banner__confirmation-message" role="alert"><%= confirmation_message %></p>
-    <button class="gem-c-cookie-banner__hide-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide</button>
+    <div class="govuk-button-group">
+      <button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide this message</button>
+    </div>
   </div>
 </div>

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

@@ -1,6 +1,8 @@
 name: Cookie banner
 description: Help users manage their personal data by telling them when you store cookies on their device.
 body: |
+  By default the cookie banner is shown to all users with just a link to the settings page. If JS is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
+
   Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
 
   If the examples below are not showing the banner, make sure the `cookies_preferences_set` cookie is not present or is set to false.
@@ -18,6 +20,13 @@ examples:
       title: "Can we store analytics cookies on your device?"
       text: "This is some custom text in my cookie banner which lets users know what we're using cookies for. I can also include a link to the <a class='govuk-link' href='/cookies'>cookies page</a>"
       confirmation_message: "You’ve accepted all cookies."
+
+  with_multi_paragraph_custom_content:
+    data:
+      title: "Can we store analytics cookies on your device?"
+      text: ["This is some custom text in my cookie banner.","There are three paragraphs.","They are passed as an array"]
+      confirmation_message: "You’ve accepted all cookies."
+
   with_custom_cookie_preferences_href:
     data:
       cookie_preferences_href: "/cookies"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.1.1".freeze
+  VERSION = "24.2.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.1.1
+  version: 24.2.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-02-15 00:00:00.000000000 Z
+date: 2021-02-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config