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

Upgrade to govuk-frontend v5 #214

Merged
merged 1 commit into from
Dec 11, 2023
Merged

Upgrade to govuk-frontend v5 #214

merged 1 commit into from
Dec 11, 2023

Conversation

paulrobertlloyd
Copy link
Collaborator

@paulrobertlloyd paulrobertlloyd commented Dec 8, 2023

BREAKING CHANGE

Upgrades the plugin to use govuk-frontend v5. This requires the following changes:

  • Updating eleventyConfig.addPassthroughCopy to copy assets from the dist subfolder
  • Importing SCSS styles from the dist folder
  • Remove $govuk-new-link-styles: true; setting
  • Updating Nunjucks search paths to look in the dist folder
  • Updating the base template to change how JavaScript support classes are added
  • Changing the options around header logotype

Changing the header logotype

Currently, you can set header.organisationLogo (replaces the crown with one of 3 options: royal-arms, x-govuk or false) and header.organisationName (replaces GOV.UK text).

Version 5 of govuk-frontend combines both the logo and logotype into one image meaning a new approach is needed. This is my proposal:

Option Value Preview
header.logotype false Header with GOV.UK logotype.
header.logotype x-govuk Header with X-GOVUK logotype.
header.logotype.text DoSAC Header with DoSAC text.
header.logotype.html <mark>Do<em>SAC</em></mark> Header with highlighted DoSAC text.

This means a textual logo can be used in place of ‘GOV.UK’ without need for creating an SVG image, but one can be supplied via the HTML option.

@paulrobertlloyd paulrobertlloyd added documentation Improvements or additions to documentation dependencies Pull requests that update a dependency file labels Dec 8, 2023
@paulrobertlloyd paulrobertlloyd added this to the 6.0 milestone Dec 8, 2023
@@ -28,7 +28,7 @@ module.exports = (eleventyConfig) => {

const searchPaths = [
'./node_modules/@x-govuk/govuk-eleventy-plugin',
resolveNpmModule('govuk-frontend'),
'./node_modules/govuk-frontend/dist',
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This removes the use of resolveModule as not quite sure how I can make this work with a sub-directory.

Copy link
Contributor

@frankieroberto frankieroberto left a comment

Choose a reason for hiding this comment

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

Looks good and works locally for me.

The changes to the header seem sensible.

components/header/_govuk.svg Outdated Show resolved Hide resolved
components/header/_header.scss Outdated Show resolved Hide resolved
components/header/template.njk Outdated Show resolved Hide resolved
layouts/base.njk Outdated Show resolved Hide resolved
layouts/base.njk Outdated Show resolved Hide resolved
@paulrobertlloyd paulrobertlloyd merged commit 381eaa3 into main Dec 11, 2023
2 checks passed
@paulrobertlloyd paulrobertlloyd deleted the govuk-frontend-5 branch December 11, 2023 21:38
@paulrobertlloyd paulrobertlloyd self-assigned this Dec 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file documentation Improvements or additions to documentation
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

2 participants