Add tag to example, and make link optional

[domoscargin]

Using tagText and tagColour, you can now specify a tag to appear in the example toolbar.

You can also set openLink to false to remove the 'Open this example in a new tab' link.

This is to enable visual differences between examples (ie: showing a rebranded example and a non-rebranded example).

With tag and link

With tag and no link

With default tag colour

With no tag and no link

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	3ab5e73
🔍 Latest deploy log	https://app.netlify.com/projects/govuk-design-system-preview/deploys/6852bd994d9dd20008505e68
😎 Deploy Preview	https://deploy-preview-4783--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 project configuration.

[CharlotteDowns]

I love this! Do we need another PR to turn it on in the four components affected?

[selfthinker]

I'm not sure if having a tag without any further context would be understood by people who cannot see its design.

It's generally okay in phase banners because the main content is the text afterwards. It's okay in task lists because it means something clearly by itself (for example, "incomplete").

But just the word "brand" next to a link for an example doesn't really mean anything. It misses the information that the design gives.

This is an example of how this solution would look without CSS on the Footer component page:

(I'm disabling CSS here to proxy/demo how something might look for someone who uses a screen reader, or to show the challenges for someone who uses their own styles.)

I'm not sure how to fix that. I wonder if simply adding the (visually hidden) word "example" behind the word "brand" would make it better? I also wonder if something should be added to the link as well.
Maybe we should ask a content designer what words they would write if we didn't have the design and then visually hide those additional words.

[domoscargin]

I'm also unsure whether we should tagging branded examples anyway, since that's now the default.