Use govuk-frontend v5 [DO NOT MERGE] #3700
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
9a8bd56
to
608dad8
Compare
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
608dad8
to
fa79422
Compare
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
fa79422
to
219eacd
Compare
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
c7e2bcf
to
15fa517
Compare
patrickpatrickpatrick
changed the title
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
4679caa
to
ccae835
Compare
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
ccae835
to
cd92fd3
Compare
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
28b0ca5
to
28b15e7
Compare
patrickpatrickpatrick
changed the title
domoscargin
reviewed
Nov 7, 2023
| window.GOVUK = window.GOVUK || {} | ||
| window.GOVUK.Modules = window.GOVUK.Modules || {} | ||
| window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion; | ||
| window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion.Accordion; |
There was a problem hiding this comment.
🐛 Hi @patrickpatrickpatrick - you've helped us uncover a bug here with our named exports. We'll hopefully patch this shortly to get rid of this odd duplication (so this import will just be window.GOVUKFrontend.Accordion).
There was a problem hiding this comment.
Ah great, that makes sense!
There was a problem hiding this comment.
Thanks again for this
We hadn't realised that Rollup handles naming for us now
Fixed in alphagov/govuk-frontend#4444 and will be in the next beta
There was a problem hiding this comment.
@patrickpatrickpatrick Released today in beta.2
There was a problem hiding this comment.
Thanks, I have updated the code :)
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
28b15e7
to
ce44f7d
Compare
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
ce44f7d
to
32bc07f
Compare
patrickpatrickpatrick
force-pushed
the
try-to-update-govukfrontend
branch
from
32bc07f
to
40de532
Compare
This was referenced Apr 26, 2024
In govuk-frontend v5 the asset path has changed from: `govuk-frontend/govuk/` to `govuk-frontend/govuk/dist` so we have to change references to the old path.
In govuk-frontend v5.0.0, the crown fallback image for IE8 has been removed so we need to remove all references to this asset in the gem.
In govuk-frontend v5.0.0, JS polyfills have been removed so therefore we need to remove all references to these in the gem.
In the govuk-frontend v5, the .js of UMD files has been changed to use the "*.bundle.js" suffix. This means we have to update references to those UMD files in the JS of the components.
As of govuk-frontend v5, the details component does not use JS and the .js file has been removed from the package. Remove the `data-module="govuk-details"` attribute See 'Remove references to the JavaScript for the Details component' from https://github.com/alphagov/govuk-frontend/releases/tag/v5.0.0
govuk-frontend v5 deprecates the `$legacy` param in the `govuk-colour` mixin. Continuing to use it produces warnings for each instance of it in the CSS. It can be safely removed as alphagov/govuk-frontend#3576 notes that `it is non-operational and the parameter is only maintained to prevent compilation errors`.
govuk-frontend v5 introduces some changes to the tag component. The one that has the most impact, is that the tag is now designed not to use ALL CAPS text anymore. Instead it is to be titlecase. In addition there are new background colours introduced which means that the styling for some tags in govuk_publishing_components has to be changed to maintain sufficient contrast. Tests have been updated to anticipate titlecase tag text instead of ALL CAPS text.
In govuk-frontend v5, the new link styles are default and this feature flag has been removed.
In govuk-frontend v5, the `govuk-warning-text__assistive` has been removed. Instead `govuk-visually-hidden` is to be used. Tests that look for `govuk-warning-text__assistive` have been updated.
govuk-frontend v5 now targets browsers that support ES6. This means that the UMD modules used in govuk_publishing_components from govuk-frontend use features of ES6 and so it means that Uglifier can't be used anymore because it only supports ES5. As well as installing Terser and updating the config, this commit also contains a patch for getting Terser working. Sprockets doesn't have an built-in loader for Terser so we need to add this functionality.
Add new config to state if application is loading ES6 components in 'es6-components.js'. If set to true `layout_for_public` will include a script tag with type `module` that points to `es6-components.js`. If this config is set to true and there is no `es6-components.js` then an error will occur.
In govuk-frontend v5, the names of the app icons have changed and need to be updated. In addition a manifest.json file is provided for specifying the correct file at different sizes. These references have been updated in `layout_for_public`.
In govuk-frontend v5, the crown .svg has been updated to also include the "GOV.UK" text. This has been updated in the header component. Removed the `.gem-c-header__logotype` class in `_layout-header.scss` as it is not longer required
In govuk-frontend v5, the crown .svg has been updated to also include the "GOV.UK" text. This has to be updated in the layout_super_navigation_header component. A partial has been created so that a variant of the .svg without "GOV.UK" can be used for the homepage.
In govuk-frontend v5, initialisation has been moved to creation of component JS module. This means that `init()` does not need to be called to initialise a component, it is instead called in the constructor. To ensure that modules from govuk-frontend and modules from the gem can be initialised easily in the same `initAll()` method, the modules of the gem have been changed to use the new initialisation method. This means moving `init()` to the constructor of each module. It also means updating the `initAll()` method to not call 'init()' of each module.
The modules in govuk_publishing_components have been updated to use the new method of initialisation. To get tests to work correctly, we also need to update how the modules are initialised in the tests themselves as they are individually initialised instead of using `initAll()`
Some of the Analytics modules use window.GOVUK.Modules and so the way they initialise needs to be updated in-line with how other JS modules are initialised. Tests for the modules that are effected have been updated to take into account the new initialisation method.
Some of the GA4 modules use window.GOVUK.Modules and so the way they initialise needs to be updated in-line with how other JS modules are initialised. Tests for the GA4 modules that are effected have been updated to take into account the new initialisation method.
MartinJJones
force-pushed
the
try-to-update-govukfrontend
branch
from
e6e1c41
to
b1b6fc3
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Trello
What
Make changes in govuk_publishing_components to allow us to update to govuk-frontend v5.
Asset Changes
assets/images/govuk-apple-touch-icon.pngassets/images/govuk-apple-touch-icon-152x152.pngassets/images/govuk-apple-touch-icon-167x167.pngassets/images/govuk-apple-touch-icon-180x180.pngassets/images/govuk-mask-icon.svgassets/manifest.jsonassets/images/govuk-icon-180.pngassets/images/govuk-icon-mask.svglayout_super_navigation_headerJavascript Changes
GOVUK.Modulesdetails.jsfrom govuk-frontend as thedetailscomponent no longer uses JavascriptStylesheet Changes
$legacyfrom thegovuk-colourmixin (this has been removed from govuk-frontend)$govuk-new-link-stylesfeature flag (new link styles now default, feature flag removed)Component specific changes
tagcomponent nowtitleizethe tag text to adopt the new tag designheader_logoandphase_bannercomponentslayout_headerandphase_bannergem-c-environment-tagto ensure contrast (default tag colour is now black).warning_textcomponent no longer uses thegovuk-warning-text__assistiveclassgovuk-warning-text__assistivewithgovuk-visually-hiddenas specified in the release notesConfig changes
use_es6_componentslayout_for_publicwill try to load the ES6 (govuk-frontend) using components from the filees6-components.jsDoc updates
What I Haven't Changed
This PR is for things that have to change. To keep the PR size as manageable as possible (sorry, it is still very long) there are pieces of work that I think should be separate PRs:
GOVUK.Modulesobject (i.e. most of the analytics modules and most of the Ga4 modules) then it haven't been updated to use the new initialisation method introduced by govuk-frontend v5.type="module"will result in some ungraceful erroring. This is because in this PR there isn't a way to individually load the JS that contains ES6 code. In frontend rendering applications I have established a pattern to follow to do this and it could be implemented in them gem also (but in a separate PR).Why
There are several breaking changes in the latest version of gouk-frontend which requires us to update govuk_publishing_components. Please read the full release notes. The changes that are specifically being addressed here are:
Visual Differences
Percy: https://percy.io/55ba5e1a/govuk_publishing_components/builds/33548508/changed/1838427854?browser=firefox&browser_ids=57&subcategories=unreviewed%2Cchanges_requested&viewLayout=overlay&viewMode=new&width=1280&widths=375%2C1280
Layout Header
The reason for the visual change here is that
.gem-c-header__logotypewas causing the line-height to increase, now this class is removed, the total height of the layout header has decreased from 72.66px to exactly 70px.Before
After
Public Layout
Percy is also showing a visual change in public layout wherever the layout header component is used, this is to be expected following the change mentioned above.
Phase Banner
The phase banner will now use the new design included in v5 of the govuk-frontend.
Form inputs
The visual change show in Percy for the form input component is coming from a fix in version 5.1.0 of govuk-frontend - https://github.com/alphagov/govuk-frontend/blob/main/CHANGELOG.md#510-feature-release