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

Update page template descriptions #2033

Closed
wants to merge 36 commits into from

Conversation

frankieroberto
Copy link
Contributor

⚠️ Do not merge and deploy until the breaking change release of NHS.UK Frontend has been released ⚠️

Description

This updates the way that the page template is set up.

Previously there were 2 blocks defined: outerContent and beforeContent, with the former recommended for back links and the latter for breadcrumbs.

This merges the two blocks together as one named beforeContent which is placed within the <div class="nhsuk-width-container"> but before the <main> element.

This is recommended for both breadcrumbs and back links - and any other components which should appear within the width of the page, but before the main element.

These components are:

  • skipped when using the "skip to main content" link
  • not included when printing the page
  • generally not shown when using "reader mode" in browsers (although this varies by browser)

In addition, the margins on the back links are no longer specified, as the back link now has margin above it by default.

Before After
Screenshot of page template before, showing both a beforeContent and outerContent block Screenshot of page template after, showing only a beforeContent block

This change aligns the page template block naming conventions with the GOV.UK Design System page template.

Note: in both, the main block is confusingly named as that block appears outside of both the <main> tag and the beforeContent block, rather than being within the <main> tag.

Related issue

Checklist

edwardhorsford and others added 30 commits May 27, 2024 13:39
This merges these two blocks into a single one named `beforeContent`, which appears within the `<div class="nhsuk-width-container">` container but before the `<main>` tag.

This should be used for components like the breadcrumb or back link, or any other component which should be within the same width as the rest of the page, but be skipped by the "skip to main content" link, not included when printing the page, and generally not considered part of the main content of the page.
This is no longer be needed as the back link contains its own default margins.
Copy link
Contributor

@edwardhorsford edwardhorsford left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good so far - will you be adding content for the changelog to cover this breaking change? I imagine it could end up affecting a lot of templates.

@frankieroberto
Copy link
Contributor Author

Looking good so far - will you be adding content for the changelog to cover this breaking change? I imagine it could end up affecting a lot of templates.

Do you mean the changelog for nhsuk-frontend? I’ve not mentioned it there, as the frontend package doesn’t actually contain the template at all (unlike the govuk one).

We should definitely describe the changes in the What’s new page in the service manual though. Will do that in a separate PR!

@anandamaryon1
Copy link
Contributor

@frankieroberto Thanks for this, I'd done some of this already on this branch: main...review/1-release-7-0-0, so I've merged this work into work that branch. I've also updated the whats new and changelog on that branch.

@frankieroberto
Copy link
Contributor Author

@anandamaryon1 ah thanks! shall I close this PR now in favour of #2035?

@anandamaryon1
Copy link
Contributor

@frankieroberto I'll come back and tidy once the release is out

@anandamaryon1
Copy link
Contributor

Released as part of v7.0.0: #2040

@anandamaryon1 anandamaryon1 deleted the update-page-template-descriptions branch November 11, 2024 11:25
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.

4 participants