From 7b2d261696c5abd8fa2a4477662967e256ecca6f Mon Sep 17 00:00:00 2001
From: maxgds <max.harden@digital.cabinet-office.gov.uk>
Date: Fri, 12 Feb 2021 09:05:46 +0000
Subject: [PATCH] Hide buttons for non-js users

---
 .../components/_cookie-banner.scss                     | 10 ++++------
 .../components/_cookie_banner.html.erb                 |  5 +++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss b/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
index 8383409b6a..f8f610d8d7 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
@@ -8,18 +8,16 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 }
 
 .gem-c-cookie-banner {
-  @include govuk-font($size: 16);
-  padding: govuk-spacing(2) 0;
   background-color: $govuk-cookie-banner-background;
 }
 
-// Only show accept button if users have js and can accept
-.gem-c-cookie-banner__button-accept {
+// Only show buttons if users have js and can accept
+.gem-c-button.js-visible {
   display: none;
 }
 
-.js-enabled .gem-c-cookie-banner__button-accept {
-  display: inline-block;
+.js-enabled .gem-c-button.js-visible {
+  display: block;
 }
 
 .gem-c-cookie-banner__confirmation {
diff --git a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb b/app/views/govuk_publishing_components/components/_cookie_banner.html.erb
index f37a4fab5e..e166f6c3c5 100644
--- a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb
+++ b/app/views/govuk_publishing_components/components/_cookie_banner.html.erb
@@ -46,17 +46,19 @@
             <%= render "govuk_publishing_components/components/button", {
                 name: "cookies",
                 text: "Accept additional cookies",
+                classes: "js-visible",
                 data_attributes: {
                   module: "track-click",
                   "accept-cookies": "true",
                   "track-category": "cookieBanner",
                   "track-action": "Cookie banner accepted",
-                  "cookie-types": "all"
+                  "cookie-types": "all",
                 }
             } %>
             <%= render "govuk_publishing_components/components/button", {
                 name: "cookies",
                 text: "Reject additional cookies",
+                classes: "js-visible",
                 data_attributes: {
                   module: "track-click",
                   "reject-cookies": "true",
@@ -64,7 +66,6 @@
                   "track-action": "Cookie banner rejected",
                 }
             } %>
-
             <a class="govuk-link" href="<%= cookie_preferences_href %>">View cookies</a>
           </div>
         <% end %>