Hook up cookie banner

The buttons on the cookie banner will now set a couple of cookies
indicating that cookie preferences have been set and what the user's
preference is regarding usage tracking

The preference cookie "cookies_policy" follows the pattern of
govuk_publishing_components: a stringified object. We only set the
`usage` property on this object for now, but the approach provides some
extensibility in case there's later a use for other preference-tracking
properties like those included in govuk_publishing_components

https://github.com/alphagov/govuk_publishing_components/blob/a35e0852f02f1fcfc1036ec2e254477e65b44e17/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js#L7-L12

The cookie banner is now hidden by default and only shown if cookie
preferences haven't been set (in addition to the required config being
set, which is checked in the Ruby/ERB code)

Author: yndajas

lib/assets/javascripts/_modules/cookie-banner.js

@@ -0,0 +1,39 @@
+(function ($, Modules) {
+  'use strict'
+
+  Modules.CookieBanner = function () {
+    let $cookieBanner
+
+    this.start = function ($element) {
+      $cookieBanner = $('.govuk-cookie-banner')
+
+      if ($cookieBanner && getCookie('cookies_preferences_set') !== 'true') {
+        $('#cookie-banner__accept').on('click', acceptCookies)
+        $('#cookie-banner__reject').on('click', rejectCookies)
+
+        $cookieBanner.removeAttr('hidden')
+      }
+    }
+
+    function acceptCookies () {
+      document.cookie = 'cookies_preferences_set=true'
+      document.cookie = 'cookies_policy={"usage":true}'
+
+      $cookieBanner.attr('hidden', 'hidden')
+    }
+
+    function rejectCookies () {
+      document.cookie = 'cookies_preferences_set=true'
+      document.cookie = 'cookies_policy={"usage":false}'
+
+      $cookieBanner.attr('hidden', 'hidden')
+    }
+
+    function getCookie (name) {
+      return document.cookie
+        .split('; ')
+        .find(cookie => cookie.split('=')[0] === name)
+        ?.split('=')[1]
+    }
+  }
+})(jQuery, window.GOVUK.Modules)

lib/assets/javascripts/_start-modules.js

@@ -1,5 +1,6 @@
 //= require _govuk/modules
 //= require _modules/anchored-headings
+//= require _modules/cookie-banner
 //= require _modules/in-page-navigation
 //= require _modules/navigation
 //= require _modules/page-expiry

lib/source/layouts/core.erb

@@ -53,7 +53,7 @@
 
     <div class="app-pane">
       <% if config[:tech_docs][:ga4_gtm_tracking_id].is_a?(String) && !config[:tech_docs][:ga4_gtm_tracking_id].empty? %>
-        <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on <%= config[:tech_docs][:service_name] %>">
+        <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on <%= config[:tech_docs][:service_name] %>" hidden="hidden" data-module="cookie-banner">
           <div class="govuk-cookie-banner__message govuk-width-container">
             <div class="govuk-grid-row">
               <div class="govuk-grid-column-two-thirds">
@@ -66,10 +66,10 @@
               </div>
             </div>
             <div class="govuk-button-group">
-              <button type="button" class="govuk-button" data-module="govuk-button">
+              <button id="cookie-banner__accept" type="button" class="govuk-button" data-module="govuk-button">
                 Accept analytics cookies
               </button>
-              <button type="button" class="govuk-button" data-module="govuk-button">
+              <button id="cookie-banner__reject" type="button" class="govuk-button" data-module="govuk-button">
                 Reject analytics cookies
               </button>
               <a class="govuk-link" href="#">View cookies</a>