Update components to use `Component`

patrickpatrickpatrick commented 1 month ago

What

Make components in govuk-design-system extend Component. This means we can:

Rename this.$module to $this.$root in a given component
Remove initialisation checks that occur in Component in a given component
Use isSupported function to check component support in a given component

In addition, changes were needed to EmbedCard and Navigation in light of changes to how components are now initialised.

In this PR, we also add configuration for Typescript to look up .ts files, which allows us to be able to add a shorthand ambient module definition for govuk-frontend. This means Typescript/JSDoc will not throw any errors when calling this.$root in a class that extends Component.

Why

Component is now available as of v5.7.0 of govuk-frontend. We also have made changes to initialisation to prevent multi-initialisation occurring which means using body as a root module is now no longer supported.

netlify[bot] commented 1 month ago

You can preview this change here:

Name	Link
Latest commit	04a7ba2db6bad12fc5adb8f88766ca872fb3a687
Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/670907de3eddac0008fa1b51
Deploy Preview	https://deploy-preview-4205--govuk-design-system-preview.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

romaricpascal commented 1 month ago

Apologies for the push on this branch, that was meant for a separate PR for discussion 😬

alphagov / govuk-design-system