Add visual regression test for metadata and notice components combination

[hannalaakso]

What

Add an example test page that shows how the important metadata, metadata and notice components are being used together. Run a visual regression test against it which surfaces this visual dependency so that we get notified to check the visual if one of the components changes.

Why

There is an "invisible" undocumented visual dependency between these components, as seen on pages like Planning Inspectorate statistical release 19 December 2024. The blue box of the metadata and important metadata component uses the same blue and sits flush with the notice component on some pages.

The documentation for the components don't make this dependency clear in anyway and we don’t have any tests in place to ensure that the designs stay inline like this in the future if one of the component designs was to change.

Context

Instead of adding a visual regression test for this use case, we could have turned the combination of the components into a new component in the gem which would have automatically added a visual regression test for it. However, we know from reviewing pages like Planning Inspectorate statistical release 19 December 2024 with our designer and content designer that the information hierarchy isn't clear plus some of the information such as dates is repeated across the components. We should consider consolidating the components or otherwise changing how they present information together. Since we know that design improvements are needed, we didn't want to make the use case "official" in the gem and possibly encourage further instances of it. We've got some cards in our backlog to look at improving how these components present information together in the future.

Trello