darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-12 05:10:45 -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

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

@@ -2,12 +2,13 @@
// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
// sass-lint:disable mixins-before-declarations
.notify-cookie-banner__with-js {
display: none;
}
// component uses .govuk-body and .govuk-button classes from govuk-frontend
@import 'core/typography';
@import 'components/button/_button';
.notify-cookie-banner__no-js {
display: block;
.notify-cookie-banner__wrapper {
@include govuk-responsive-padding(4, "top");
@include govuk-responsive-padding(4, "bottom");
}
.notify-cookie-banner__with-js {
@@ -125,29 +126,16 @@
// GOV.UK Publishing components button styles (inherits from GOV.UK Frontend button)
// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_button.scss
.notify-cookie-banner-button--inline {
display: block;
width: 100%;
.notify-cookie-banner-button {
margin-bottom: govuk-spacing(1);
vertical-align: top;
@include govuk-media-query($from: desktop) {
display: inline-block;
width: auto;
vertical-align: baseline;
margin-right: govuk-spacing(2);
}
}
.notify-cookie-banner-button--secondary {
padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2); // s1
box-shadow: none;
&:before {
content: none;
}
}
// Additions
// Override margin-bottom, inherited from using .govuk-body class

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>