From d3df03dbaea70afffeeb0b29cbb3a36c99365348 Mon Sep 17 00:00:00 2001 From: maxgds Date: Wed, 10 Feb 2021 15:50:20 +0000 Subject: [PATCH 1/2] Update cookie banner - Use HTML and classes from design system - Make "reject" button work in js - Update tests as required --- CHANGELOG.md | 4 + .../components/cookie-banner.js | 32 +++++-- .../components/_cookie-banner.scss | 94 ++----------------- .../components/_cookie_banner.html.erb | 83 +++++++++------- .../components/docs/cookie_banner.yml | 9 ++ spec/components/cookie_banner_spec.rb | 47 ++++++---- .../components/cookie-banner-spec.js | 45 +++++---- 7 files changed, 153 insertions(+), 161 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4251edd708..d130d97407 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ useful summary for people upgrading their application, not a replication of the commit log. +## Unreleased + +* Update cookies banner ([PR #1918](https://github.com/alphagov/govuk_publishing_components/pull/1918)) + ## 24.1.1 * Fix deprecation warnings when running tests ([PR #1899](https://github.com/alphagov/govuk_publishing_components/pull/1899)) diff --git a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js b/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js index d50f05cd94..63a952ce3a 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +++ b/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 () { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss b/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss index ab970e2e25..1d8718e247 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss +++ b/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); } } diff --git a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb b/app/views/govuk_publishing_components/components/_cookie_banner.html.erb index a796fff8fc..a35937b1fd 100644 --- a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb +++ b/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 cookies to collect information 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 += "

#{t}

" + end + text = newtext + else + text = "

#{text}

" + end + text = raw(text) + cookie_preferences_href ||= "/help/cookies" - confirmation_message ||= raw("You’ve accepted all cookies. You can change your cookie settings at any time.") + confirmation_message ||= raw("You can change your cookie settings 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 %> -
-
-
-
-
-

<%= title %>

-

<%= text %>

+
+
+
+
+

<%= title %>

+
+ <%= text %> +
- <% if services_cookies %> -
+
+ <% if services_cookies %> +
<%= 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 %>
<% else %> -
-
- <%= render "govuk_publishing_components/components/button", { - text: "Accept all cookies", - inline_layout: true, +
+ <%= 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", } - } %> -
-
- <%= 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", } - } %> -
+ } %> + View cookies
<% end %> -
- -
+
diff --git a/app/views/govuk_publishing_components/components/docs/cookie_banner.yml b/app/views/govuk_publishing_components/components/docs/cookie_banner.yml index dd300f788a..da6a4b7d72 100644 --- a/app/views/govuk_publishing_components/components/docs/cookie_banner.yml +++ b/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 cookies page" 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" diff --git a/spec/components/cookie_banner_spec.rb b/spec/components/cookie_banner_spec.rb index fc1da28480..13a4d74dda 100644 --- a/spec/components/cookie_banner_spec.rb +++ b/spec/components/cookie_banner_spec.rb @@ -8,27 +8,33 @@ def component_name it "renders with default values" do render_component({}) assert_select '.gem-c-cookie-banner[id="global-cookie-message"][data-module="cookie-banner"]' - assert_select ".govuk-width-container .gem-c-cookie-banner__message", - text: "Tell us whether you accept cookies - We use cookies to collect information about how you use GOV.UK. We use this information to make the website work as well as possible and improve government services." + assert_select ".govuk-cookie-banner__heading", text: "Cookies on GOV.UK" + assert_select ".govuk-cookie-banner__content p:nth-child(1)", text: "We use some essential cookies to make this website work." + assert_select ".govuk-cookie-banner__content p:nth-child(2)", text: "We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services." + assert_select ".govuk-cookie-banner__content p:nth-child(3)", text: "We also use cookies set by other sites to help us deliver content from their services." assert_select 'button[data-hide-cookie-banner="true"]' end it "renders a button for accepting cookies" do render_component({}) - assert_select ".gem-c-cookie-banner__buttons .gem-c-button", text: "Accept all cookies" - assert_select '.gem-c-cookie-banner__buttons .gem-c-button[data-module=track-click][data-track-category=cookieBanner][data-track-action="Cookie banner accepted"]' + assert_select ".govuk-button-group .gem-c-button", text: "Accept additional cookies" + assert_select '.govuk-button-group .gem-c-button[data-module=track-click][data-track-category=cookieBanner][data-track-action="Cookie banner accepted"]' end - it "renders a button for viewing cookie settings" do + it "renders a button for rejecting cookies" do render_component({}) - assert_select ".gem-c-cookie-banner__buttons .gem-c-button", text: "Set cookie preferences" - assert_select '.gem-c-cookie-banner__buttons .gem-c-button[data-module=track-click][data-track-category=cookieBanner][data-track-action="Cookie banner settings clicked"]' + assert_select ".govuk-button-group .gem-c-button", text: "Reject additional cookies" + assert_select '.govuk-button-group .gem-c-button[data-module=track-click][data-track-category=cookieBanner][data-track-action="Cookie banner rejected"]' + end + + it "renders a link for viewing cookie settings" do + render_component({}) + assert_select ".govuk-button-group .govuk-link", text: "View cookies" end it "renders a confirmation message" do render_component({}) - assert_select ".gem-c-cookie-banner__confirmation-message", text: "You’ve accepted all cookies. You can change your cookie settings at any time." + assert_select ".gem-c-cookie-banner__confirmation-message", text: "You can change your cookie settings at any time." end it "renders a link to the settings page within the confirmation message" do @@ -40,7 +46,7 @@ def component_name it "renders a hide link within the confirmation banner" do render_component({}) - assert_select ".gem-c-cookie-banner__confirmation .gem-c-cookie-banner__hide-button", text: "Hide" + assert_select ".gem-c-cookie-banner__confirmation .gem-c-cookie-banner__hide-button", text: "Hide this message" assert_select '.gem-c-cookie-banner__hide-button[data-module=track-click][data-track-category=cookieBanner][data-track-action="Hide cookie banner"]' end @@ -51,15 +57,24 @@ def component_name confirmation_message: "You’ve accepted all cookies.", ) assert_select ".gem-c-cookie-banner__message .govuk-heading-m", text: "Can we store analytics cookies on your device?" - assert_select ".gem-c-cookie-banner__message .govuk-body", text: "This is some custom text with a link to the cookies page" + assert_select ".govuk-cookie-banner__content", text: "This is some custom text with a link to the cookies page" assert_select ".govuk-link[href='/cookies']", text: "cookies page" assert_select ".gem-c-cookie-banner__confirmation-message", text: "You’ve accepted all cookies." end + it "renders with multi paragraph content" do + render_component( + title: "Can we store analytics cookies on your device?", + text: ["Paragraph 1", "Paragraph 2"], + confirmation_message: "You’ve accepted all cookies.", + ) + assert_select "p.govuk-body", text: "Paragraph 1" + assert_select "p.govuk-body", text: "Paragraph 2" + end + it "renders with a custom preferences page link" do render_component(cookie_preferences_href: "/cookies") - assert_select ".gem-c-cookie-banner__button-settings a[href='/cookies']", text: "Set cookie preferences" - assert_select '.gem-c-cookie-banner__button-settings a[data-module=track-click][data-track-category=cookieBanner][data-track-action="Cookie banner settings clicked"]' + assert_select ".govuk-button-group a[href='/cookies']", text: "View cookies" # Check that the confirmation message also includes the custom URL assert_select ".gem-c-cookie-banner__confirmation-message a[href='/cookies']", text: "change your cookie settings" @@ -91,8 +106,8 @@ def component_name ) assert_select ".gem-c-cookie-banner.gem-c-cookie-banner--services" - assert_select ".gem-c-cookie-banner__buttons--flex button[data-module=track-click][data-track-category=cookieBanner][data-accept-cookies=true]", text: "Yes" - assert_select ".gem-c-cookie-banner__buttons--flex button[data-module=track-click][data-track-category=cookieBanner][data-hide-cookie-banner=true]", text: "No" - assert_select ".gem-c-cookie-banner__buttons--flex .gem-c-cookie-banner__link[href='/cookies']", text: "How we use cookies" + assert_select ".govuk-button-group button[data-module=track-click][data-track-category=cookieBanner][data-accept-cookies=true]", text: "Yes" + assert_select ".govuk-button-group button[data-module=track-click][data-track-category=cookieBanner][data-reject-cookies=true]", text: "No" + assert_select ".govuk-button-group .govuk-link[href='/cookies']", text: "How we use cookies" end end diff --git a/spec/javascripts/components/cookie-banner-spec.js b/spec/javascripts/components/cookie-banner-spec.js index 4221665f33..c603cfbeac 100644 --- a/spec/javascripts/components/cookie-banner-spec.js +++ b/spec/javascripts/components/cookie-banner-spec.js @@ -12,22 +12,35 @@ describe('Cookie banner', function () { beforeEach(function () { container = document.createElement('div') + container.innerHTML = - '