Use govuk-frontend v5 [DO NOT MERGE] #3700

patrickpatrickpatrick · 2023-11-06T12:10:58Z

Trello

What

Make changes in govuk_publishing_components to allow us to update to govuk-frontend v5.

Asset Changes

Update references to assets (config, Javascript, CSS, fonts, images) in govuk-frontend
Remove references to the crown fallback image
Remove references to
- assets/images/govuk-apple-touch-icon.png
- assets/images/govuk-apple-touch-icon-152x152.png
- assets/images/govuk-apple-touch-icon-167x167.png
- assets/images/govuk-apple-touch-icon-180x180.png
- assets/images/govuk-mask-icon.svg
Add references to
- assets/manifest.json
- assets/images/govuk-icon-180.png
- assets/images/govuk-icon-mask.svg
Change logo in-line svg to be the new svg that includes GOV.UK
- Rework how the logo is included in layout_super_navigation_header

Javascript Changes

Add necessary script to append new required class to body for govuk-frontend
Update initialisation method to be the same as the new govuk-frontend approach for any JS module that uses GOVUK.Modules
Update tests to use new initialisation method for any of the JS modules I had to update
Remove import of details.js from govuk-frontend as the details component no longer uses Javascript
Use Terser instead of Uglifier to compress Javascript

Stylesheet Changes

Remove $legacy from the govuk-colour mixin (this has been removed from govuk-frontend)
Remove $govuk-new-link-styles feature flag (new link styles now default, feature flag removed)

Component specific changes

Components using tag component now titleize the tag text to adopt the new tag design
- Update the header_logo and phase_banner components
- Update tests of layout_header and phase_banner
- Tweak text colour of gem-c-environment-tag to ensure contrast (default tag colour is now black).
warning_text component no longer uses the govuk-warning-text__assistive class
- Replaced all instances of govuk-warning-text__assistive with govuk-visually-hidden as specified in the release notes
- Update tests of warning_text component

Config changes

Add new configuration option use_es6_components
- If true then layout_for_public will try to load the ES6 (govuk-frontend) using components from the file es6-components.js

Doc updates

Add suggested way to include JS in Rails applications in light of the browser target change that has occurred in govuk-frontend v5.

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:

If a module isn't using the GOVUK.Modules object (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.
Opening the component guide in browsers that don't support 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:

Update package file paths
Remove Internet Explorer 8 stylesheets, settings and mixins
Remove the fallback GOV.UK crown logo from your HTML
Removal of Javascript polyfills for Internet Explorer (IE) 8-11
Update the <script> snippet at the top of your tag
Check your tags align with design changes to the Tag component
New link styles are now enabled by default
Update the HTML for warning text

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__logotype was 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.

Before	After

Phase Banner

The phase banner will now use the new design included in v5 of the govuk-frontend.

Before	After

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

Before	After

domoscargin · 2023-11-07T12:09:01Z

app/assets/javascripts/govuk_publishing_components/components/accordion.js

 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;


🐛 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).

Ah great, that makes sense!

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

@patrickpatrickpatrick Released today in beta.2

https://github.com/alphagov/govuk-frontend/releases/tag/v5.0.0-beta.2

Thanks, I have updated the code :)

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 · 2024-07-02T13:22:34Z

Closing as we have a new PR open to upgrade to 5.1.0 - #4041

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 12:11 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from 9a8bd56 to 608dad8 Compare November 6, 2023 13:16

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 13:16 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from 608dad8 to fa79422 Compare November 6, 2023 13:19

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 13:19 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from fa79422 to 219eacd Compare November 6, 2023 13:29

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 13:30 Inactive

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 13:52 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from c7e2bcf to 15fa517 Compare November 6, 2023 13:57

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 13:57 Inactive

patrickpatrickpatrick changed the title ~~try to update govukfrontend~~ Use govuk-frontend v5 Nov 6, 2023

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 14:17 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from 4679caa to ccae835 Compare November 6, 2023 14:45

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 14:45 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from ccae835 to cd92fd3 Compare November 6, 2023 14:58

govuk-ci temporarily deployed to components-gem-pr-3700 November 6, 2023 14:58 Inactive

govuk-ci temporarily deployed to components-gem-pr-3700 November 7, 2023 10:46 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from 28b0ca5 to 28b15e7 Compare November 7, 2023 11:01

govuk-ci temporarily deployed to components-gem-pr-3700 November 7, 2023 11:02 Inactive

patrickpatrickpatrick changed the title ~~Use govuk-frontend v5~~ Use govuk-frontend v5 (if you are in a user research test, do not open) Nov 7, 2023

domoscargin reviewed Nov 7, 2023

View reviewed changes

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from 28b15e7 to ce44f7d Compare November 7, 2023 14:34

govuk-ci temporarily deployed to components-gem-pr-3700 November 7, 2023 14:34 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from ce44f7d to 32bc07f Compare November 7, 2023 14:46

govuk-ci temporarily deployed to components-gem-pr-3700 November 7, 2023 14:46 Inactive

patrickpatrickpatrick force-pushed the try-to-update-govukfrontend branch from 32bc07f to 40de532 Compare November 7, 2023 15:33

govuk-ci temporarily deployed to components-gem-pr-3700 November 7, 2023 15:34 Inactive

govuk-ci temporarily deployed to components-gem-pr-3700 November 7, 2023 16:38 Inactive

govuk-ci temporarily deployed to components-gem-pr-3700 November 8, 2023 10:06 Inactive

govuk-ci temporarily deployed to components-gem-pr-3700 November 8, 2023 10:18 Inactive

patrickpatrickpatrick and others added 24 commits May 17, 2024 10:00

Remove references to the crown fallback

f0115a3

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.

Remove references to govuk-frontend JS polyfills

465fb4d

In govuk-frontend v5.0.0, JS polyfills have been removed so therefore we need to remove all references to these in the gem.

Update govuk-frontend .js file names

e5398c7

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.

Remove $govuk-new-link-styles feature flag

d6a8995

In govuk-frontend v5, the new link styles are default and this feature flag has been removed.

Replace govuk-warning-text__assistive class

cf980a5

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.

Update install-and-use docs with new JS guidance

269edc6

Update app icon paths from govuk-frontend

cd519da

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`.

Update .svg used in header component

ce7b8b2

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

Update header logos

d189785

Ensure font-size is 19px checkboxes and warning-text

5606c91

Remove aria-labelledby from accordion sections

9b2c5a6

Update lib modules to use init

3dab7a2

Update cross-service-header.js to use init

62110c5

Fix toggle specs

b1b6fc3

MartinJJones force-pushed the try-to-update-govukfrontend branch from e6e1c41 to b1b6fc3 Compare May 17, 2024 09:04

Update feedback.js

4c3b470

This was referenced Jun 5, 2024

Upgrade to govuk frontend 5.1 alphagov/feedback#1889

Merged

Upgrade to govuk frontend 5.1 alphagov/government-frontend#3206

Merged

MartinJJones closed this Jul 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use govuk-frontend v5 [DO NOT MERGE] #3700

Use govuk-frontend v5 [DO NOT MERGE] #3700

patrickpatrickpatrick commented Nov 6, 2023 •

edited by MartinJJones

Loading

domoscargin Nov 7, 2023 •

edited

Loading

patrickpatrickpatrick Nov 7, 2023

colinrotherham Nov 8, 2023

colinrotherham Nov 24, 2023

patrickpatrickpatrick Nov 29, 2023

MartinJJones commented Jul 2, 2024

Use govuk-frontend v5 [DO NOT MERGE] #3700

Use govuk-frontend v5 [DO NOT MERGE] #3700

Conversation

patrickpatrickpatrick commented Nov 6, 2023 • edited by MartinJJones Loading

What

Asset Changes

Javascript Changes

Stylesheet Changes

Component specific changes

Config changes

Doc updates

What I Haven't Changed

Why

Visual Differences

Layout Header

Before

After

Public Layout

Phase Banner

Form inputs

domoscargin Nov 7, 2023 • edited Loading

Choose a reason for hiding this comment

patrickpatrickpatrick Nov 7, 2023

Choose a reason for hiding this comment

colinrotherham Nov 8, 2023

Choose a reason for hiding this comment

colinrotherham Nov 24, 2023

Choose a reason for hiding this comment

patrickpatrickpatrick Nov 29, 2023

Choose a reason for hiding this comment

MartinJJones commented Jul 2, 2024

patrickpatrickpatrick commented Nov 6, 2023 •

edited by MartinJJones

Loading

domoscargin Nov 7, 2023 •

edited

Loading