Implement the new link and hover styles in the Design System website

[hannalaakso]

What

We need to do a bit of extra work to make the new link and hover state styles, due to be released in GOV.UK Frontend 3.12.0, work in the Design System website: alphagov/govuk-frontend#2183 (epic: alphagov/govuk-frontend#2197).

The new styles will work "out of the box" in general contexts. However, as we currently set some custom link/hover styles in the navigation bar links and the sidebar subnav (both components are specific to the Design System website), we will need to use the new no-underline mixin or class and inverse mixin or class for links to make those components work correctly with the new link and hover styles.

Why

The new link and hover styles will be opt-in until the next major release of GOV.UK Frontend. However, we'd like the Design System website itself to take advantage of the new styles when 3.12.0 is released in order to present the most up-to-date version of GOV.UK Frontend.

Who needs to know about this

Developers

Further detail

We'll also be documenting the new mixins and classes to help teams using GOV.UK Frontend link styles in custom components to make them work with the new styles. The changes will be behind a feature flag in 3.12.0 so teams won't need to make these changes in their projects until the next breaking release.

Done when

• We've temporarily installed the new styles through a pre-release of Updates to link styles and link hover states govuk-frontend#2183 in order to preview them
• We've made the navigation bar custom hover/link styles work with the new styles
• We've made the sidebar subnav custom hover/link styles work with the new styles
• We've removed the pre-release from the PR