Use govuk frontend v5

[patrickpatrickpatrick]

Trello

What

• Replace Uglifier with Terser, add patch which adds Sprockets support for Terser
• Update how JS modules are initialised in-line with changes in govuk-frontend and govuk_publishing_components
• Move components that rely on govuk-frontend modules to separate es6-components.js file
• Remove deprecated scss variables

Why

govuk_publishing_components uses v5 of govuk-frontend. There are several breaking changes in this release and so we need to update the applications that use govuk_publishing_components. Please read what has changed in govuk_publishing_components and govuk-frontend. This specific changes this PR addresses are:

• Replace Uglifier with Terser, add patch which adds Sprockets support for Terser
  • govuk-frontend v5 UMD component JS uses ES6 features which aren't supported by Uglifier, so we have to make the change to use Terser instead
  • Sprockets doesn't support Terser by default, need to add in a patch which adds Terser to list of supported JS compressors
• Update initialisation method of application JS modules
  • Initialisation is now called upon module creation, so init methods have been moved to the constructors to reflect this
• Move components that rely on govuk-frontend modules to seperate es6-components.js file
  • In the event that a browser below the target for govuk-frontend loads a page with JS on it, attempting to parse the JS from govuk-frontend will cause an error. To avoid this from happening, JS that contains govuk-frontend JS has been moved to seperate file which will be loaded in a script tag with type="module". This will prevent the JS from being parsed and so prevent the error
• Remove deprecated scss variables
  • In govuk-frontend v5 including $govuk-compatibility-govuktemplate (removed), $govuk-use-legacy-palette (deprecated) and $govuk-new-link-styles (now always default) in a file will have no effect

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

[patrickpatrickpatrick]

This is blocked by https://github.com/alphagov/govuk_publishing_components/pull/3700

[github-advanced-security[bot]]

This pull request sets up GitHub code scanning for this repository. Once the scans have completed and the checks have passed, the analysis results for this pull request branch will appear on this overview. Once you merge this pull request, the 'Security' tab will show more code scanning analysis results (for example, for the default branch). Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results. For more information about GitHub code scanning, check out the documentation.

[MartinJJones]

Closing as we have a new branch to upgrade to v5.1.0 - https://github.com/alphagov/smart-answers/pull/6806