darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-08 20:23:12 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
73c531f70df82975e91dcad44291a9ae1e5ac447
notifications-admin/app/templates/components/cookie-banner.html

34 lines
1.9 KiB
HTML
Raw Normal View History

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
2020-01-03 16:03:05 +00:00
{% macro cookie_banner(message, id='global-cookie-message') %}
Improvements based on frontend feedback Paired with @aliuk2012 on the implementation and with a view to making the component generic enough to be used on digital marketplace apps as well. These changes came from that session. They include: - removal of an unused `data-accept-cookies` attribute - removal of `govuk-!-padding-top-4` class and moving of associated styles into component CSS - swapping out the `aria-label` on the parent element for an `aria-describedby` linked to the h2 to have one thing labelling the banner region - removal of unused CSS and any already provided by the govuk-button class - inclusion of @import's for styles attached to govuk-body and govuk-button classes
2020-01-06 16:52:03 +00:00
<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">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>
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
2020-01-03 16:03:05 +00:00
<div class="notify-cookie-banner__buttons notify-cookie-banner__no-js">
<div class="notify-cookie-banner__button">
Improvements based on frontend feedback Paired with @aliuk2012 on the implementation and with a view to making the component generic enough to be used on digital marketplace apps as well. These changes came from that session. They include: - removal of an unused `data-accept-cookies` attribute - removal of `govuk-!-padding-top-4` class and moving of associated styles into component CSS - swapping out the `aria-label` on the parent element for an `aria-describedby` linked to the h2 to have one thing labelling the banner region - removal of unused CSS and any already provided by the govuk-button class - inclusion of @import's for styles attached to govuk-body and govuk-button classes
2020-01-06 16:52:03 +00:00
<a href="/cookies" class="notify-cookie-banner-button" role="button">Set cookie preferences</a>
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
2020-01-03 16:03:05 +00:00
</div>
</div>
<div class="notify-cookie-banner__with-js">
Improvements based on frontend feedback Paired with @aliuk2012 on the implementation and with a view to making the component generic enough to be used on digital marketplace apps as well. These changes came from that session. They include: - removal of an unused `data-accept-cookies` attribute - removal of `govuk-!-padding-top-4` class and moving of associated styles into component CSS - swapping out the `aria-label` on the parent element for an `aria-describedby` linked to the h2 to have one thing labelling the banner region - removal of unused CSS and any already provided by the govuk-button class - inclusion of @import's for styles attached to govuk-body and govuk-button classes
2020-01-06 16:52:03 +00:00
<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>
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
2020-01-03 16:03:05 +00:00
<div class="notify-cookie-banner__buttons">
<div class="notify-cookie-banner__button notify-cookie-banner__button-accept">
Improvements based on frontend feedback Paired with @aliuk2012 on the implementation and with a view to making the component generic enough to be used on digital marketplace apps as well. These changes came from that session. They include: - removal of an unused `data-accept-cookies` attribute - removal of `govuk-!-padding-top-4` class and moving of associated styles into component CSS - swapping out the `aria-label` on the parent element for an `aria-describedby` linked to the h2 to have one thing labelling the banner region - removal of unused CSS and any already provided by the govuk-button class - inclusion of @import's for styles attached to govuk-body and govuk-button classes
2020-01-06 16:52:03 +00:00
<button class="govuk-button notify-cookie-banner-button" type="submit" data-accept-cookies="true">Yes, I accept analytics cookies</button>
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
2020-01-03 16:03:05 +00:00
</div>
<div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
Improvements based on frontend feedback Paired with @aliuk2012 on the implementation and with a view to making the component generic enough to be used on digital marketplace apps as well. These changes came from that session. They include: - removal of an unused `data-accept-cookies` attribute - removal of `govuk-!-padding-top-4` class and moving of associated styles into component CSS - swapping out the `aria-label` on the parent element for an `aria-describedby` linked to the h2 to have one thing labelling the banner region - removal of unused CSS and any already provided by the govuk-button class - inclusion of @import's for styles attached to govuk-body and govuk-button classes
2020-01-06 16:52:03 +00:00
<button class="govuk-button notify-cookie-banner-button" type="submit" data-accept-cookies="false">No, do not use analytics cookies</button>
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
2020-01-03 16:03:05 +00:00
</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 %}
Reference in New Issue Copy Permalink