From c18cb1e9846ea0a7e3163de2dd056f898ff472a4 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 14 Jan 2020 12:11:40 +0000
Subject: [PATCH] Default the cookie banner to be hidden

It should only be shown if JS is available and the
cookieMessage JS finds consent has not been set.
---
 app/assets/javascripts/cookieMessage.js        |  7 +------
 .../stylesheets/components/cookie-message.scss | 18 ++----------------
 app/templates/components/cookie-banner.html    |  2 +-
 tests/javascripts/cookieMessage.test.js        |  7 +++++++
 4 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/cookieMessage.js b/app/assets/javascripts/cookieMessage.js
index 37174d89b..1ad26681d 100644
--- a/app/assets/javascripts/cookieMessage.js
+++ b/app/assets/javascripts/cookieMessage.js
@@ -51,15 +51,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // 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) {
+      if (this.$module && !hasCookiesPolicy) {
         this.$module.style.display = 'block';
-      } else {
-        this.$module.style.display = 'none';
       }
-    } else {
-      this.$module.style.display = 'none';
     }
   };
 
diff --git a/app/assets/stylesheets/components/cookie-message.scss b/app/assets/stylesheets/components/cookie-message.scss
index 0c9b9192b..f72132ab5 100644
--- a/app/assets/stylesheets/components/cookie-message.scss
+++ b/app/assets/stylesheets/components/cookie-message.scss
@@ -11,25 +11,11 @@
   @include govuk-responsive-padding(5, "bottom");
 }
 
-.notify-cookie-banner__with-js {
+// component should only be shown if JS is available, by the cookieMessage JS, so hide by default
+.notify-cookie-banner {
   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 {
   display: flex;
   flex-wrap: wrap;
diff --git a/app/templates/components/cookie-banner.html b/app/templates/components/cookie-banner.html
index 2c1369745..0a80091a1 100644
--- a/app/templates/components/cookie-banner.html
+++ b/app/templates/components/cookie-banner.html
@@ -1,6 +1,6 @@
 {% macro cookie_banner(id='global-cookie-message') %}
 
-<div id="{{ id }}" class="notify-cookie-banner notify-cookie-banner__with-js" data-module="cookie-banner" role="region" aria-describedby="notify-cookie-banner__heading">
+<div id="{{ id }}" class="notify-cookie-banner" data-module="cookie-banner" role="region" aria-describedby="notify-cookie-banner__heading">
   <div class="notify-cookie-banner__wrapper govuk-width-container">
     <h2 class="notify-cookie-banner__heading govuk-heading-m" id="notify-cookie-banner__heading">Can we store analytics cookies on your device?</h2>
     <p class="govuk-body">Analytics cookies help us understand how our website is being used.</p>
diff --git a/tests/javascripts/cookieMessage.test.js b/tests/javascripts/cookieMessage.test.js
index 6e9e992b6..1d5b47154 100644
--- a/tests/javascripts/cookieMessage.test.js
+++ b/tests/javascripts/cookieMessage.test.js
@@ -21,6 +21,13 @@ describe("Cookie message", () => {
 
   beforeAll(() => {
 
+    const cookieMessageStyles = document.createElement('style');
+
+    // add the CSS that hides the cookie message by default
+    cookieMessageStyles.textContent = '.notify-cookie-banner { display: none; }';
+    document.getElementsByTagName('head')[0].appendChild(cookieMessageStyles);
+
+    // protect against any previous tests setting a cookies-policy cookie
     helpers.deleteCookie('cookies-policy');
 
   });