WIP drop JS support for Grade X browsers #4000
Closed
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
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
For govuk-frontend v5, there now needs to be additional class added to the `body` tag to indicate that the components are supported. This class is `govuk-frontend-supported` and is added if the browser supports JS of type `module` (which is the new browser target for govuk-frontend). The script tag is directly taken from the documentation.
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.
- relies on govuk frontend v5 - switches js to type="module" - removes polyfills - removes references to polyfills - uses ES6 for loop in accordion component Co-authored-by: Andy Sellick <[email protected]>
MartinJJones
force-pushed
the
try-to-update-govukfrontend
branch
from
e6e1c41 to
b1b6fc3
Compare
Apart from ones causing crashes
Because it was checking for use strict at funciton level instead of at script level
Looks like it just needed to be after the modules.js require statement
Included by mistake
|
@AshGDS is this PR still needed? |
|
@andysellick Nope, will close - thanks for flagging 👍 |
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.
What
Why
Visual Changes
Before
After