darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-27 09:29:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

Default the cookie banner to be hidden

Browse Source 
It should only be shown if JS is available and the
cookieMessage JS finds consent has not been set.
This commit is contained in:
Tom Byers
2020-01-14 12:11:40 +00:00
parent b6e37a6ac8
commit c18cb1e984
4 changed files with 11 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/cookieMessage.js
View File

@@ -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';
}
};

18
app/assets/stylesheets/components/cookie-message.scss
View File

@@ -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;

2
app/templates/components/cookie-banner.html
View File

@@ -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>

7
tests/javascripts/cookieMessage.test.js
View File

@@ -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');
});