darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-16 20:49:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improvements based on frontend feedback

Browse Source 
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
This commit is contained in:
Tom Byers
2020-01-06 16:52:03 +00:00
parent 9a0d522964
commit 3e8ed578d0
2 changed files with 16 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,23 +1,23 @@
{% 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 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>
<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>
<a href="/cookies" class="notify-cookie-banner-button" role="button">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>
<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>
<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>
<button class="govuk-button notify-cookie-banner-button" 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>
<button class="govuk-button notify-cookie-banner-button" type="submit" data-accept-cookies="false">No, do not use analytics cookies</button>
</div>
</div>
</div>