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

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.

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

Commits on May 17, 2024