Add new cookie banner code.

Copies HTML and Sass from GOV.UK Pubishing
components cookie-banner with changes to content
and functionality to better suit Notify.

Changes are:
- adds a 'reject' button which the GOV.UK
  code doesn't have
- adds Sass from the GOV.UK Frontend button
  component which the GOV.UK version used so
  is included here
- removed click tracking from cookie banner
This commit is contained in:
Tom Byers
2020-01-03 16:03:05 +00:00
parent 6ef77cfff3
commit fa7104d6c8
5 changed files with 274 additions and 22 deletions

View File

@@ -1,5 +1,6 @@
{% extends "template.njk" %}
{% from "components/banner.html" import banner %}
{% from "components/cookie-banner.html" import cookie_banner %}
{% block headIcons %}
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
@@ -30,12 +31,7 @@
{% block bodyStart %}
{% block cookie_message %}
<div class="notify-cookie-message" id="global-cookie-message">
<p class="govuk-width-container">
GOV.UK Notify uses cookies to make the site simpler.
<a href="{{ url_for("main.cookies") }}">Find out more about cookies</a>
</p>
</div>
{{ cookie_banner("GOV.UK Notify uses cookies which are essential for the site to work. We also use non-essential cookies to help us improve the service. Any data collected is anonymised. By continuing to use this site, you agree to our use of cookies.") }}
{% endblock %}
{% endblock %}

View File

@@ -0,0 +1,33 @@
{% macro cookie_banner(message, id='global-cookie-message') %}
<div id="{{ id }}" class="notify-cookie-banner" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
<div class="notify-cookie-banner__wrapper govuk-width-container govuk-!-padding-4">
<h2 class="notify-cookie-banner__heading govuk-heading-m">Cookies on GOV.UK Notify</h2>
<p class="notify-cookie-banner__message govuk-body">We use <a class="govuk-link" href="/cookies">small files called cookies</a> to make GOV.UK Notify work.</p>
<div class="notify-cookie-banner__buttons notify-cookie-banner__no-js">
<div class="notify-cookie-banner__button">
<a href="/cookies" class="govuk-button notify-cookie-banner-button--inline" role="button" data-accept-cookies="true">Set cookie preferences</a>
</div>
</div>
<div class="notify-cookie-banner__with-js">
<p class="notify-cookie-banner__message govuk-body">We'd also like to use analytics cookies to help us improve our service.</p>
<p class="notify-cookie-banner__message govuk-body">Please let us know if this is OK.</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--secondary notify-cookie-banner-button--inline" type="submit" data-accept-cookies="true">Yes, I accept analytics cookies</button>
</div>
<div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
<button class="govuk-button notify-cookie-banner-button--secondary notify-cookie-banner-button--inline" type="submit" data-accept-cookies="false">No, do not use analytics cookies</button>
</div>
</div>
</div>
</div>
<div class="notify-cookie-banner__confirmation govuk-width-container" tabindex="-1">
<p class="notify-cookie-banner__confirmation-message govuk-body">
You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.
</p>
<button class="notify-cookie-banner__hide-button" data-hide-cookie-banner="true">Hide</button>
</div>
</div>
{% endmacro %}