Add new cookie banner code.

Copies HTML and Sass from GOV.UK Pubishing
components cookie-banner with changes to content
and functionality to better suit Notify.

Changes are:
- adds a 'reject' button which the GOV.UK
  code doesn't have
- adds Sass from the GOV.UK Frontend button
  component which the GOV.UK version used so
  is included here
- removed click tracking from cookie banner

app/assets/javascripts/cookieMessage.js

@@ -1,16 +1,90 @@
-(function () {
+window.GOVUK = window.GOVUK || {};
-  "use strict";
+window.GOVUK.Modules = window.GOVUK.Modules || {};
 
-  var root = this;
+(function (Modules) {
-  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+  function CookieBanner () { }
 
-  GOVUK.addCookieMessage = function () {
+  CookieBanner.prototype.start = function ($module) {
-    var message = document.getElementById('global-cookie-message'),
+    this.$module = $module[0];
-        hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null);
+    this.$module.hideCookieMessage = this.hideCookieMessage.bind(this);
+    this.$module.showConfirmationMessage = this.showConfirmationMessage.bind(this);
+    this.$module.setCookieConsent = this.setCookieConsent.bind(this);
 
-    if (hasCookieMessage) {
+    this.$module.cookieBanner = document.querySelector('.notify-cookie-banner');
-      message.style.display = 'block';
+    this.$module.cookieBannerConfirmationMessage = this.$module.querySelector('.notify-cookie-banner__confirmation');
-      GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 });
+
+    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);
+

app/assets/stylesheets/components/cookie-message.scss

@@ -1,8 +1,156 @@
-.notify-cookie-message {
+// GOV.UK Publishing components cookie banner styles
-  @include govuk-font($size: 16);
+// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
-  padding: govuk-spacing(3) 0;
+// sass-lint:disable mixins-before-declarations
 
-  .js-enabled & {
+.notify-cookie-banner__with-js {
-    display: none;
+  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;
+}

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";

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 %}
   <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
@@ -30,12 +31,7 @@
 
 {% block bodyStart %}
   {% block cookie_message %}
-    <div class="notify-cookie-message" id="global-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.") }}
-      <p class="govuk-width-container">
-        GOV.UK Notify uses cookies to make the site simpler.
-        <a href="{{ url_for("main.cookies") }}">Find out more about cookies</a>
-      </p>
-    </div>
   {% endblock %}
 {% endblock %}
 

app/templates/components/cookie-banner.html

@@ -0,0 +1,33 @@
+{% macro cookie_banner(message, id='global-cookie-message') %}
+
+<div id="{{ id }}" class="notify-cookie-banner" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
+  <div class="notify-cookie-banner__wrapper govuk-width-container govuk-!-padding-4">
+    <h2 class="notify-cookie-banner__heading govuk-heading-m">Cookies on GOV.UK Notify</h2>
+    <p class="notify-cookie-banner__message govuk-body">We use <a class="govuk-link" href="/cookies">small files called cookies</a> to make GOV.UK Notify work.</p>
+    <div class="notify-cookie-banner__buttons notify-cookie-banner__no-js">
+      <div class="notify-cookie-banner__button">
+        <a href="/cookies" class="govuk-button notify-cookie-banner-button--inline" role="button" data-accept-cookies="true">Set cookie preferences</a>
+      </div>
+    </div>
+    <div class="notify-cookie-banner__with-js">
+      <p class="notify-cookie-banner__message govuk-body">We'd also like to use analytics cookies to help us improve our service.</p>
+      <p class="notify-cookie-banner__message govuk-body">Please let us know if this is OK.</p>
+      <div class="notify-cookie-banner__buttons">
+        <div class="notify-cookie-banner__button notify-cookie-banner__button-accept">
+          <button class="govuk-button notify-cookie-banner-button--secondary notify-cookie-banner-button--inline" type="submit" data-accept-cookies="true">Yes, I accept analytics cookies</button>
+        </div>
+        <div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
+          <button class="govuk-button notify-cookie-banner-button--secondary notify-cookie-banner-button--inline" type="submit" data-accept-cookies="false">No, do not use analytics cookies</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="notify-cookie-banner__confirmation govuk-width-container" tabindex="-1">
+    <p class="notify-cookie-banner__confirmation-message govuk-body">
+      You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.
+    </p>
+    <button class="notify-cookie-banner__hide-button" data-hide-cookie-banner="true">Hide</button>
+  </div>
+</div>
+{% endmacro %}