Put cookies message back in

The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.

This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).

app/assets/javascripts/cookieMessage.js

@@ -0,0 +1,16 @@
+(function () {
+  "use strict";
+
+  var root = this;
+  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  GOVUK.addCookieMessage = function () {
+    var message = document.getElementById('global-cookie-message'),
+        hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null);
+
+    if (hasCookieMessage) {
+      message.style.display = 'block';
+      GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 });
+    }
+  };
+}).call(this);

app/assets/javascripts/govuk/cookie-functions.js

@@ -0,0 +1,62 @@
+(function () {
+  "use strict";
+
+  var root = this;
+  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  /*
+    Cookie methods
+    ==============
+
+    Usage:
+
+      Setting a cookie:
+      GOVUK.cookie('hobnob', 'tasty', { days: 30 });
+
+      Reading a cookie:
+      GOVUK.cookie('hobnob');
+
+      Deleting a cookie:
+      GOVUK.cookie('hobnob', null);
+  */
+  GOVUK.cookie = function (name, value, options) {
+    if(typeof value !== 'undefined'){
+      if(value === false || value === null) {
+        return GOVUK.setCookie(name, '', { days: -1 });
+      } else {
+        return GOVUK.setCookie(name, value, options);
+      }
+    } else {
+      return GOVUK.getCookie(name);
+    }
+  };
+  GOVUK.setCookie = function (name, value, options) {
+    if(typeof options === 'undefined') {
+      options = {};
+    }
+    var cookieString = name + "=" + value + "; path=/";
+    if (options.days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000));
+      cookieString = cookieString + "; expires=" + date.toGMTString();
+    }
+    if (document.location.protocol == 'https:'){
+      cookieString = cookieString + "; Secure";
+    }
+    document.cookie = cookieString;
+  };
+  GOVUK.getCookie = function (name) {
+    var nameEQ = name + "=";
+    var cookies = document.cookie.split(';');
+    for(var i = 0, len = cookies.length; i < len; i++) {
+      var cookie = cookies[i];
+      while (cookie.charAt(0) == ' ') {
+        cookie = cookie.substring(1, cookie.length);
+      }
+      if (cookie.indexOf(nameEQ) === 0) {
+        return decodeURIComponent(cookie.substring(nameEQ.length));
+      }
+    }
+    return null;
+  };
+}).call(this);

app/assets/javascripts/main.js

@@ -1,5 +1,7 @@
 window.GOVUKFrontend.initAll();
 
+$(() => GOVUK.addCookieMessage());
+
 $(() => $("time.timeago").timeago());
 
 $(() => GOVUK.stickAtTopWhenScrolling.init());

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

@@ -0,0 +1,8 @@
+.notify-cookie-message {
+  @include govuk-font($size: 16);
+  padding: govuk-spacing(3) 0;
+
+  .js-enabled & {
+    display: none;
+  }
+}

app/assets/stylesheets/main.scss

@@ -37,6 +37,7 @@ $path: '/static/images/';
 // Specific to this application
 @import 'globals';
 @import 'grids';
+@import 'components/cookie-message';
 @import 'components/site-footer';
 @import 'components/placeholder';
 @import 'components/sms-message';

app/templates/admin_template.html

@@ -25,11 +25,15 @@
    {% block per_page_title %}{% endblock %} – GOV.UK Notify
 {% endblock %}
 
-{% block cookie_message %}
+{% block bodyStart %}
-  <p>
+  {% block cookie_message %}
-    GOV.UK Notify uses cookies to make the site simpler.
+    <div class="notify-cookie-message">
-    <a href="{{ url_for("main.cookies") }}">Find out more about cookies</a>
+      <p class="govuk-width-container">
-  </p>
+        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 %}
 
 {% block header %}

gulpfile.js

@@ -85,6 +85,8 @@ const javascripts = () => {
   return src([
       paths.toolkit + 'javascripts/govuk/modules.js',
       paths.toolkit + 'javascripts/govuk/show-hide-content.js',
+      paths.src + 'javascripts/govuk/cookie-functions.js',
+      paths.src + 'javascripts/cookieMessage.js',
       paths.src + 'javascripts/stick-to-window-when-scrolling.js',
       paths.src + 'javascripts/detailsPolyfill.js',
       paths.src + 'javascripts/apiKey.js',