From d37379fc689cb4a2e29b0a89bd5736d5ebcf548d Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 8 Jan 2020 14:00:09 +0000
Subject: [PATCH] Change banner content to just cover analytics

Follows discussions with @quis, @yahoopete and
@karlchillmaid.
---
 .../components/cookie-message.scss            | 57 +++++++------------
 .../govuk-frontend/extensions.scss            | 10 ++++
 app/templates/components/cookie-banner.html   | 11 ++--
 3 files changed, 34 insertions(+), 44 deletions(-)

diff --git a/app/assets/stylesheets/components/cookie-message.scss b/app/assets/stylesheets/components/cookie-message.scss
index 8313bb2c6..c1a3a8863 100644
--- a/app/assets/stylesheets/components/cookie-message.scss
+++ b/app/assets/stylesheets/components/cookie-message.scss
@@ -8,7 +8,7 @@
 
 .notify-cookie-banner__wrapper {
   @include govuk-responsive-padding(4, "top");
-  @include govuk-responsive-padding(4, "bottom");
+  @include govuk-responsive-padding(5, "bottom");
 }
 
 .notify-cookie-banner__with-js {
@@ -33,43 +33,35 @@
 .notify-cookie-banner__buttons {
   @include govuk-clearfix;
 
-  @include govuk-media-query($from: desktop) {
+  @include govuk-media-query($from: tablet) {
     display: inline-block;
   }
 }
 
 .notify-cookie-banner__button {
-  display: inline-block;
-  width: 100%;
+  float: left;
+  width: 50%;
+  box-sizing: border-box;
 
-  @include govuk-media-query($from: mobile, $until: desktop) {
-    &.notify-cookie-banner__button-accept {
-      float: left;
-      width: 49%;
-    }
-
-    &.notify-cookie-banner__button-reject {
-      .js-enabled & {
-        float: right;
-        width: 49%;
-      }
-    }
-  }
-
-  @include govuk-media-query($from: desktop) {
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+    float: none;
     width: auto;
   }
-
-  @include govuk-media-query($until: 455px) {
-    width: 100%;
-  }
 }
 
 .notify-cookie-banner__button-accept {
-  display: none;
+  padding-right: govuk-spacing(4);
+}
 
-  .js-enabled & {
+.notify-cookie-banner__link {
+  @include govuk-font(19);
+  display: block;
+  clear: both;
+
+  @include govuk-media-query($from: tablet) {
     display: inline-block;
+    margin-left: govuk-spacing(6);
   }
 }
 
@@ -108,6 +100,7 @@
 
 .notify-cookie-banner__hide-button {
   @include govuk-font($size: 19);
+  color: $govuk-link-colour;
   outline: 0;
   border: 0;
   background: none;
@@ -115,6 +108,7 @@
   padding: govuk-spacing(0);
   margin-top: govuk-spacing(2);
   right: govuk-spacing(3);
+  cursor: pointer;
 
   @include govuk-media-query($from: desktop) {
     margin-top: govuk-spacing(0);
@@ -123,19 +117,6 @@
   }
 }
 
-// GOV.UK Publishing components button styles (inherits from GOV.UK Frontend button)
-// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_button.scss
-
-.notify-cookie-banner-button {
-  margin-bottom: govuk-spacing(1);
-  vertical-align: top;
-
-  @include govuk-media-query($from: desktop) {
-    vertical-align: baseline;
-    margin-right: govuk-spacing(2);
-  }
-}
-
 // Additions
 
 // Override margin-bottom, inherited from using .govuk-body class
diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss
index e28474b05..f2dc7fa1f 100644
--- a/app/assets/stylesheets/govuk-frontend/extensions.scss
+++ b/app/assets/stylesheets/govuk-frontend/extensions.scss
@@ -7,3 +7,13 @@
     column-count: 4;
   }
 }
+
+// Class to extend govuk-button to allow it to sit alongside other inline content
+.govuk-button__inline {
+  vertical-align: top;
+  margin-bottom: 0;
+
+  @include govuk-media-query($from: tablet) {
+    vertical-align: baseline;
+  }
+}
diff --git a/app/templates/components/cookie-banner.html b/app/templates/components/cookie-banner.html
index 0bd269b68..7505818cd 100644
--- a/app/templates/components/cookie-banner.html
+++ b/app/templates/components/cookie-banner.html
@@ -2,17 +2,16 @@
 
 <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 class="notify-cookie-banner__wrapper govuk-width-container">
-    <h2 class="notify-cookie-banner__heading govuk-heading-m" id="notify-cookie-banner__heading">Cookies on GOV.UK Notify</h2>
-    <p class="govuk-body">We use <a class="govuk-link" href="/cookies">small files called cookies</a> to make GOV.UK Notify work.</p>
-    <p class="govuk-body">We'd also like to use analytics cookies to help us improve our service.</p>
-    <p class="govuk-body">Please let us know if this is OK.</p>
+    <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>
     <div class="notify-cookie-banner__buttons">
       <div class="notify-cookie-banner__button notify-cookie-banner__button-accept">
-        <button class="govuk-button notify-cookie-banner-button" type="submit" data-accept-cookies="true">Yes, I accept analytics cookies</button>
+        <button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">Yes</button>
       </div>
       <div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
-        <button class="govuk-button notify-cookie-banner-button" type="submit" data-accept-cookies="false">No, do not use analytics cookies</button>
+        <button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">No</button>
       </div>
+      <a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a>
     </div>
   </div>