Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move cookieBanner to follow Design System guidance #125

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

colinrotherham
Copy link

Afternoon 👋

Hope this PR is useful!

A service I'm working on has recently been flagged for inserting the Skip link component before the Cookie banner. Until today, we hadn't realised the Design System guidance says to use the bodyStart block not the header block.

Problem is, we're extending hmpo-template.njk and using the cookieBanner block to insert the govukCookieBanner component (versus hmpoCookieBanner) BUT it uses the header block.

Here's the guidance we were shown. Makes sense!

Cookie banner
Position the cookie banner after the opening <body> tag and before the ’skip to main content‘ link. If you’re using the Nunjucks page template, use the bodyStart block.

Thanks again for the fab work

Follows the guidance to position “before the ’skip to main content‘ link” https://design-system.service.gov.uk/components/cookie-banner/#how-it-works
@colinrotherham colinrotherham changed the title Move cookieBanner block to bodyStart to follow Design System guidance Move cookieBanner to follow Design System guidance May 3, 2022
@colinrotherham
Copy link
Author

Appreciate that, without adding {{ super() }} in downstream projects, this might be a breaking change for others extending bodyStart, as their own bodyStart content will overwrite the cookie banner unintentionally.

{% block bodyStart %}
  {{ super() }}
{% endblock %}

@HughePaul
Copy link
Contributor

Yes, I think that is fine - it would be good to get a good idea of how the blocks are being used by projects. It could be released as a major/breaking release - but if the blocks are being used correctly it shouldn't be breaking and should be released as a minor/non-breaking

@colinrotherham
Copy link
Author

colinrotherham commented May 3, 2022

That's great thanks

Could take you a while to determine, but here's (essentially) how we set up our base.njk template:

{% extends "hmpo-template.njk" %}

{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
{% from "govuk/components/header/macro.njk" import govukHeader %}

{% block cookieBanner %}
  {{ govukCookieBanner() }}
{% endblock %}

{% block govukHeader %}
  {{ govukHeader() }}
{% endblock %}

All pages (non form-wizard) extend from this one so won't be a breaking change for us 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants