SPL-464 - Update cookie banner

app/assets/sass/application.scss

@@ -11,3 +11,7 @@
 .get-help-group {
   margin-top: 30px;
 }
+
+.cookie-banner {
+  padding: 0px;
+}

app/constants.js

@@ -1,4 +1,4 @@
 module.exports = {
-  SERVICE_NAME: 'Check if you can get shared parental leave and pay',
+  SERVICE_NAME: 'Check if you can get Shared Parental Leave and Pay',
   MINIMUM_PAY_THRESHOLD: 390
 }

app/views/index.njk

@@ -8,7 +8,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds-from-desktop">
       <h1 class="govuk-heading-l">
-        Check if you can get shared parental leave and pay
+        Check if you can get Shared Parental Leave and Pay
       </h1>
       <p>
         Here you can check if you or your partner can get <a href="{{ mainstream_guidance_root_path }}">shared parental leave and pay</a>.

app/views/layout.njk

@@ -1,6 +1,7 @@
 {% from "footer/macro.njk" import govukFooter %}
 {% from "header/macro.njk" import govukHeader %}
 {% from "phase-banner/macro.njk" import govukPhaseBanner %}
+{% from "cookie-banner/macro.njk" import govukCookieBanner %}
 
 {% extends "template.njk" %}
 
@@ -10,22 +11,41 @@
 
 {% block header %}
 {% include "./includes/ga.njk" %}
-<div class="govuk-width-container">
-    <header id="cookie_banner" class="cookie-banner govuk-visually-hidden">
-      <h1 class="govuk-heading-l">Tell us whether you accept cookies</h1>
-      <p>We use <a href="/cookies">cookies to collect information</a> about how you use the {{
-        service_name }} service. We use this information to make the website work as well as
-        possible and improve government services.</p>
-      <button type="submit" class="govuk-button">Accept all cookies</button>
-      <a class="govuk-button" href="/cookies">Set cookie preferences</a>
-    </header>
-    <header class="cookie-banner js-hide">
-      <h1 class="govuk-heading-l">We use cookies</h1>
-      <p>We use <a href="/cookies">cookies to collect information</a> about how you use the {{
-      service_name }} service. We use this information to make the website work as well as
-      possible and improve government services.</p>
-    </header>
-  </div>
+  <header id="cookie_banner" class="cookie-banner">
+    {% set html %}
+      <h1 class="govuk-heading-m">Cookies on {{ service_name }}</h1>
+      <p>We use some essential cookies to make this service work.</p>
+      <p>We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
+    {% endset %}
+    {{
+      govukCookieBanner({
+        ariaLabel: "Cookies on "+service_name,
+        messages: [
+          {
+            html: html,
+            actions: [
+              {
+                text: "Accept additional cookies",
+                type: "submit",
+                name: "cookies[additional]",
+                value: "accept"
+              },
+              {
+                text: "Reject additional cookies",
+                type: "submit",
+                name: "cookies[additional]",
+                value: "reject"
+              },
+              {
+                text: "View cookies",
+                href: "/cookies"
+              }
+            ]
+          }
+        ]
+      })
+    }}
+  </header>
   {{ govukHeader({
     serviceName: service_name,
     serviceUrl: "/"

common/browsered/index.js

@@ -4,7 +4,10 @@ window.GOVUKFrontend.initAll()
 const cookieManager = require('../../node_modules/@dvsa/cookie-manager/cookie-manager.js')
 cookieManager.init({
   'cookie-banner-id': 'cookie_banner',
-  'cookie-banner-visibility-class': 'govuk-visually-hidden',
+  'cookie-banner-saved-callback': function () {
+    const banner = document.querySelector('#cookie_banner')
+    banner.hidden = true
+  },
   'cookie-banner-visible-on-page-with-preference-form': false,
   'user-preference-configuration-form-id': 'cm_user_preference_form',
   'user-preference-saved-callback': function () {

common/spl-common-filters.js

@@ -5,8 +5,6 @@ const { SERVICE_NAME } = require('../app/constants')
 // Existing filters can be imported from env using env.getFilter(name)
 // See https://mozilla.github.io/nunjucks/api.html#getfilter
 module.exports = function (env) {
-  const capitalize = env.getFilter('capitalize')
-
   function otherParentName (data, currentParent) {
     return currentParent === 'primary' ? dataUtils.secondaryName(data) : dataUtils.primaryName(data)
   }
@@ -56,7 +54,7 @@ module.exports = function (env) {
   }
 
   function pageTitle (...pageSpecificParts) {
-    return [...pageSpecificParts, capitalize(SERVICE_NAME), 'GOV.UK'].filter(string => string).join(' - ')
+    return [...pageSpecificParts, SERVICE_NAME, 'GOV.UK'].filter(string => string).join(' - ')
   }
 
   return {

app/config.test.js → test/unit/app/config.test.js

@@ -5,8 +5,8 @@ describe('config.js', () => {
   let config
 
   const loadConfig = () => {
-    delete require.cache[require.resolve('./config')]
-    return require('./config')
+    delete require.cache[require.resolve('../../../app/config')]
+    return require('../../../app/config')
   }
 
   const expectEnvConfig = (env, isProd, isDev, isTest) => {

test/unit/emailjs.test.js → test/unit/app/emailjs.test.js

@@ -3,7 +3,7 @@ const sinon = require('sinon')
 const chai = require('chai')
 const expect = chai.expect
 const proxyquire = require('proxyquire')
-const logger = require('../../app/logger')
+const logger = require('../../../app/logger')
 
 describe('sendMail', function () {
   let emailjsSendStub
@@ -16,7 +16,7 @@ describe('sendMail', function () {
     loggerInfoStub = sinon.stub(logger, 'info')
     loggerErrorStub = sinon.stub(logger, 'error')
 
-    sendMail = proxyquire('../../app/emailjs-mailer', {
+    sendMail = proxyquire('../../../app/emailjs-mailer', {
       '@emailjs/nodejs': {
         send: emailjsSendStub
       }

app/filters.test.js → test/unit/app/filters.test.js

@@ -18,7 +18,7 @@ describe('filters', () => {
       sinon.stub(environment, 'getFilter')
         .withArgs('isBirth').returns(() => false)
         .withArgs('isAdoption').returns(() => true)
-      filters = require('./filters')(environment)
+      filters = require('../../../app/filters')(environment)
 
       const data = {
         'start-date-day': '01',
@@ -34,7 +34,7 @@ describe('filters', () => {
       sinon.stub(environment, 'getFilter')
         .withArgs('isBirth').returns(() => true)
         .withArgs('isAdoption').returns(() => false)
-      filters = require('./filters')(environment)
+      filters = require('../../../app/filters')(environment)
 
       const data = {
         'start-date-day': '01',
@@ -50,7 +50,7 @@ describe('filters', () => {
       sinon.stub(environment, 'getFilter')
         .withArgs('isBirth').returns(() => false)
         .withArgs('isAdoption').returns(() => true)
-      filters = require('./filters')(environment)
+      filters = require('../../../app/filters')(environment)
 
       const dataWithSunday = {
         'start-date-day': '29',

test/unit/lib/healthcheck.test.js → test/unit/app/lib/healthcheck.test.js

@@ -2,7 +2,7 @@ const express = require('express')
 const request = require('supertest')
 const { expect } = require('chai')
 const { describe, it } = require('mocha')
-const healthcheckRouter = require('../../../app/lib/healthcheck')
+const healthcheckRouter = require('../../../../app/lib/healthcheck')
 const app = express()
 app.use(healthcheckRouter)
 describe('Health Check Endpoint', () => {

test/unit/logger.test.js → test/unit/app/logger.test.js

@@ -43,7 +43,7 @@ describe('Logger transport check', () => {
     beforeEach(() => {
       stdMocks.use()
       process.env.NODE_ENV = 'production'
-      logger = require('../test-app')
+      logger = require('../../test-app')
     })
 
     it('should log info in JSON format', function () {
@@ -79,7 +79,7 @@ describe('Logger transport check', () => {
   describe('In non-production environment', () => {
     beforeEach(() => {
       process.env.NODE_ENV = 'development'
-      logger = require('../test-app')
+      logger = require('../../test-app')
       stdMocks.use()
     })
 

app/router.test.js → test/unit/app/router.test.js

@@ -4,8 +4,8 @@ const supertest = require('supertest')
 
 const { describe, it, beforeEach } = require('mocha')
 
-const paths = require('./paths')
-const getApp = require('../server').getApp
+const paths = require('../../../app/paths')
+const getApp = require('../../../server').getApp
 
 let app