diff --git a/app/assets/javascripts/cookieMessage.js b/app/assets/javascripts/cookieMessage.js index 4e17cbec7..2818a57df 100644 --- a/app/assets/javascripts/cookieMessage.js +++ b/app/assets/javascripts/cookieMessage.js @@ -1,16 +1,90 @@ -(function () { - "use strict"; +window.GOVUK = window.GOVUK || {}; +window.GOVUK.Modules = window.GOVUK.Modules || {}; - var root = this; - if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; } +(function (Modules) { + function CookieBanner () { } - GOVUK.addCookieMessage = function () { - var message = document.getElementById('global-cookie-message'), - hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null); + CookieBanner.prototype.start = function ($module) { + this.$module = $module[0]; + this.$module.hideCookieMessage = this.hideCookieMessage.bind(this); + this.$module.showConfirmationMessage = this.showConfirmationMessage.bind(this); + this.$module.setCookieConsent = this.setCookieConsent.bind(this); - if (hasCookieMessage) { - message.style.display = 'block'; - GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 }); + this.$module.cookieBanner = document.querySelector('.notify-cookie-banner'); + this.$module.cookieBannerConfirmationMessage = this.$module.querySelector('.notify-cookie-banner__confirmation'); + + this.setupCookieMessage(); + }; + + CookieBanner.prototype.setupCookieMessage = 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=true]'); + if (this.$acceptCookiesLink) { + this.$acceptCookiesLink.addEventListener('click', () => this.$module.setCookieConsent(true)); + } + + this.$rejectCookiesLink = this.$module.querySelector('button[data-accept-cookies=false]'); + if (this.$rejectCookiesLink) { + this.$rejectCookiesLink.addEventListener('click', () => this.$module.setCookieConsent(false)); + } + + this.showCookieMessage(); + }; + + CookieBanner.prototype.showCookieMessage = function () { + // Show the cookie banner if not in the cookie settings page + if (!this.isInCookiesPage()) { + var hasCookiesPolicy = window.GOVUK.cookie('cookies_policy'); + var shouldHaveCookieMessage = (this.$module && !hasCookiesPolicy); + + if (shouldHaveCookieMessage) { + this.$module.style.display = 'block'; + } else { + this.$module.style.display = 'none'; + } + } else { + this.$module.style.display = 'none'; } }; -}).call(this); + + CookieBanner.prototype.hideCookieMessage = function (event) { + if (this.$module) { + this.$module.style.display = 'none'; + } + + if (event.target) { + event.preventDefault(); + } + }; + + CookieBanner.prototype.setCookieConsent = function (analyticsConsent) { + window.GOVUK.setConsentCookie({ 'analytics': analyticsConsent }); + + this.$module.showConfirmationMessage(analyticsConsent); + this.$module.cookieBannerConfirmationMessage.focus(); + + if (analyticsConsent) { window.GOVUK.initAnalytics(); } + }; + + CookieBanner.prototype.showConfirmationMessage = function (analyticsConsent) { + var messagePrefix = analyticsConsent ? 'You’ve accepted analytics cookies.' : 'You told us not to use analytics cookies.'; + + this.$cookieBannerMainContent = document.querySelector('.notify-cookie-banner__wrapper'); + this.$cookieBannerConfirmationMessage = document.querySelector('.notify-cookie-banner__confirmation-message'); + + this.$cookieBannerConfirmationMessage.insertAdjacentText('afterbegin', messagePrefix); + this.$cookieBannerMainContent.style.display = 'none'; + this.$module.cookieBannerConfirmationMessage.style.display = 'block'; + }; + + CookieBanner.prototype.isInCookiesPage = function () { + return window.location.pathname === '/cookies'; + }; + + Modules.CookieBanner = CookieBanner; +})(window.GOVUK.Modules); + diff --git a/app/assets/stylesheets/components/cookie-message.scss b/app/assets/stylesheets/components/cookie-message.scss index 559e07bbf..39d57e2c8 100644 --- a/app/assets/stylesheets/components/cookie-message.scss +++ b/app/assets/stylesheets/components/cookie-message.scss @@ -1,8 +1,156 @@ -.notify-cookie-message { - @include govuk-font($size: 16); - padding: govuk-spacing(3) 0; +// GOV.UK Publishing components cookie banner styles +// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss +// sass-lint:disable mixins-before-declarations - .js-enabled & { - display: none; +.notify-cookie-banner__with-js { + display: none; +} + +.notify-cookie-banner__no-js { + display: block; +} + +.notify-cookie-banner__with-js { + display: none; +} + +.notify-cookie-banner__no-js { + display: block; +} + +.js-enabled { + .notify-cookie-banner__no-js, + .notify-cookie-banner { + display: none; // shown with JS, always on for non-JS + } + + .notify-cookie-banner__with-js { + display: block; } } + +.notify-cookie-banner__buttons { + @include govuk-clearfix; + + @include govuk-media-query($from: desktop) { + display: inline-block; + } +} + +.notify-cookie-banner__button { + display: inline-block; + width: 100%; + + @include govuk-media-query($from: mobile, $until: desktop) { + &.notify-cookie-banner__button-accept { + float: left; + width: 49%; + } + + &.notify-cookie-banner__button-reject { + .js-enabled & { + float: right; + width: 49%; + } + } + } + + @include govuk-media-query($from: desktop) { + width: auto; + } + + @include govuk-media-query($until: 455px) { + width: 100%; + } +} + +.notify-cookie-banner__button-accept { + display: none; + + .js-enabled & { + display: inline-block; + } +} + +.notify-cookie-banner__confirmation { + display: none; + position: relative; + padding: govuk-spacing(4) 0; + + @include govuk-media-query($from: desktop) { + padding: govuk-spacing(4); + } + + // This element is focused using JavaScript so that it's being read out by screen readers + // for this reason we don't want to show the default outline or emphasise it visually using `govuk-focused-text` + &:focus { + outline: none; + } +} + +.notify-cookie-banner__confirmation-message, +.notify-cookie-banner__hide-button { + display: block; + + @include govuk-media-query($from: desktop) { + display: inline-block; + } +} + +.notify-cookie-banner__confirmation-message { + margin-right: govuk-spacing(4); + + @include govuk-media-query($from: desktop) { + max-width: 90%; + } +} + +.notify-cookie-banner__hide-button { + @include govuk-font($size: 19); + outline: 0; + border: 0; + background: none; + text-decoration: underline; + padding: govuk-spacing(0); + margin-top: govuk-spacing(2); + right: govuk-spacing(3); + + @include govuk-media-query($from: desktop) { + margin-top: govuk-spacing(0); + position: absolute; + right: govuk-spacing(4); + } +} + +// GOV.UK Publishing components button styles (inherits from GOV.UK Frontend button) +// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_button.scss + +.notify-cookie-banner-button--inline { + display: block; + width: 100%; + margin-bottom: govuk-spacing(1); + vertical-align: top; + + @include govuk-media-query($from: desktop) { + display: inline-block; + width: auto; + vertical-align: baseline; + margin-right: govuk-spacing(2); + } +} + +.notify-cookie-banner-button--secondary { + padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2); // s1 + box-shadow: none; + + &:before { + content: none; + } +} + +// Additions + +// Override margin-bottom, inherited from using .govuk-body class +.notify-cookie-banner__confirmation-message { + margin-bottom: 0; +} diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss index 1f013e2c6..c1609b511 100644 --- a/app/assets/stylesheets/govuk-frontend/_all.scss +++ b/app/assets/stylesheets/govuk-frontend/_all.scss @@ -23,6 +23,7 @@ $govuk-assets-path: "/static/"; @import 'components/header/_header'; @import 'components/footer/_footer'; @import 'components/back-link/_back-link'; +@import 'components/button/_button'; @import 'components/details/_details'; @import "utilities/all"; diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html index 59fcc33a1..7c9c2adcc 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -1,5 +1,6 @@ {% extends "template.njk" %} {% from "components/banner.html" import banner %} +{% from "components/cookie-banner.html" import cookie_banner %} {% block headIcons %} @@ -30,12 +31,7 @@ {% block bodyStart %} {% block cookie_message %} - + {{ cookie_banner("GOV.UK Notify uses cookies which are essential for the site to work. We also use non-essential cookies to help us improve the service. Any data collected is anonymised. By continuing to use this site, you agree to our use of cookies.") }} {% endblock %} {% endblock %} diff --git a/app/templates/components/cookie-banner.html b/app/templates/components/cookie-banner.html new file mode 100644 index 000000000..5f0f722a1 --- /dev/null +++ b/app/templates/components/cookie-banner.html @@ -0,0 +1,33 @@ +{% macro cookie_banner(message, id='global-cookie-message') %} + + +{% endmacro %}