govuk-design-system
govuk-design-system copied to clipboard
alphagov
Add tag to example, and make link optional
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
You can preview this change here:
| Name | Link |
|---|---|
| Latest commit | 3ab5e73a5485ba8f9c8ba4d425d6844deea4f8a6 |
| 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.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
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.
I'm also unsure whether we should tagging branded examples anyway, since that's now the default.