Hide buttons for non-js users

alphagov · Feb 12, 2021 · 7b2d261 · 7b2d261
1 parent 9a401c5
commit 7b2d261
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 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
@@ -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
@@ -46,25 +46,26 @@
             <%= 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",
                   "track-category": "cookieBanner",
                   "track-action": "Cookie banner rejected",
                 }
             } %>
-
             <a class="govuk-link" href="<%= cookie_preferences_href %>">View cookies</a>
           </div>
         <% end %>