Add cookie banner component

Avoid using JavaScript by using server side cookie setting.

JavaScript is only necessary for www.GOV.UK since it can't easily set cookies.

app/assets/sass/application.scss

@@ -9,4 +9,7 @@ $govuk-global-styles: true;
 @import "patterns/task-list";
 @import "patterns/related-items";
 
+// Components that aren't in Frontend
+@import "components/cookie-banner";
+
 // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you

app/assets/sass/components/_cookie-banner.scss

@@ -0,0 +1,24 @@
+.app-cookie-banner {
+  @include govuk-font(16);
+  @include govuk-text-colour;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  padding-top: govuk-spacing(3);
+  padding-right: govuk-spacing(3);
+  padding-bottom: govuk-spacing(3);
+  padding-left: govuk-spacing(3);
+  background-color: lighten(desaturate(govuk-colour("light-blue"), 8.46), 42.55);
+}
+
+.app-cookie-banner__message {
+  margin: 0;
+  @include govuk-width-container;
+}
+
+@include govuk-media-query($media-type: print) {
+  .app-cookie-banner {
+    display: none !important;
+  }
+}

app/views/includes/cookie-banner.html

@@ -0,0 +1,7 @@
+{% if shouldShowCookieMessage %}
+  <div class="app-cookie-banner">
+    <p class="app-cookie-banner__message">
+      {{cookieText | safe }}
+    </p>
+  </div>
+{% endif %}

app/views/layout.html

@@ -31,6 +31,7 @@
 {% endblock %}
 
 {% block header %}
+  {% include "includes/cookie-banner.html" %}
   {# Set serviceName in config.js. #}
   {{ govukHeader({
     homepageUrl: "/",

docs/assets/sass/docs.scss

@@ -1,6 +1,7 @@
 @import "node_modules/govuk-frontend/all";
 
 // Add Sass specific to /docs here
+@import "../../../app/assets/sass/components/cookie-banner";
 
 // adjust code block font-size to 19px
 .hljs {

docs/views/includes/cookie-banner.html

@@ -0,0 +1,7 @@
+{% if shouldShowCookieMessage %}
+  <div class="app-cookie-banner">
+    <p class="app-cookie-banner__message">
+      {{cookieText | safe }}
+    </p>
+  </div>
+{% endif %}

docs/views/layout.html

@@ -37,6 +37,7 @@
 {% endblock %}
 
 {% block header %}
+  {% include "includes/cookie-banner.html" %}
   {# Set serviceName in config.js. #}
   {{ govukHeader({
     "homepageUrl": "/",

lib/utils.js

@@ -284,3 +284,25 @@ exports.autoStoreData = function (req, res, next) {
 
   next()
 }
+
+exports.handleCookies = function (app) {
+  return function handleCookies (req, res, next) {
+    const COOKIE_NAME = 'seen_cookie_message'
+    let cookie = req.cookies[COOKIE_NAME]
+
+    if (cookie === 'yes') {
+      app.locals.shouldShowCookieMessage = false
+      return next()
+    }
+
+    let maxAgeInDays = 28
+    res.cookie(COOKIE_NAME, 'yes', {
+      maxAge: maxAgeInDays * 24 * 60 * 60 * 1000,
+      httpOnly: true
+    })
+
+    app.locals.shouldShowCookieMessage = true
+
+    next()
+  }
+}

package.json

@@ -46,5 +46,8 @@
     "ignore": [
       "nunjucks"
     ]
+  },
+  "devDependencies": {
+    "cookie-parser": "^1.4.3"
   }
 }

server.js

@@ -9,6 +9,7 @@ const dotenv = require('dotenv')
 const express = require('express')
 const nunjucks = require('nunjucks')
 const session = require('express-session')
+const cookieParser = require('cookie-parser')
 
 // Local dependencies
 const config = require('./app/config.js')
@@ -21,6 +22,13 @@ const app = express()
 const documentationApp = express()
 dotenv.config()
 
+// Set cookies for use in cookie banner.
+app.use(cookieParser())
+documentationApp.use(cookieParser())
+const handleCookies = utils.handleCookies(app)
+app.use(handleCookies)
+documentationApp.use(handleCookies)
+
 // Set up configuration variables
 var releaseVersion = packageJson.version
 var username = process.env.USERNAME