Data card variations

[codemacabre]

This update subtly amends the existing design of data cards to match the Figma and edits their structure to allow for headers and title background colours.

Primarily, this is to add a new 'summary' variant to match the Figma:

[robredpath]

Thanks @codemacabre . This is slightly different from the Figma - e.g. the organisation_name isn't an underlined link, and the labels are using a smaller (maybe just narrower?) font

vs

(figma screenshot for reference)

I suspect that's because of the difference between creating designs in Figma and actually implementing them in code with the real, live design system.

I don't think we need to copy the Figma pixel-for-pixel and any ambiguity should be resolved in favour of usability as long as it's broadly faithful to the original design. If we need to introduce another font that's not the end of the world; we deliberately punted the question of "small text" (labels, tags, etc) to a future time when we were scrambling to choose the current fonts, so this may be that future time.

[robredpath]

Actually, one other point: for the design system can we make the summary card more generic (sample labels, etc) and then make the dashboard one instance of the summary data card? I'm anticipating that fairly quickly we're going to be wanting to modify the dashboard summary so anything we can do to make our future lives easier in terms of flexibility is welcome.

[codemacabre]

the organisation_name isn't an underlined link

I don't think we should introduce a new link style just for this.

the labels are using a smaller (maybe just narrower?) font

This is a result of having to 'eyeball it' - the Figma is not inspectable so I've based the actual design on finding variables which approximate the style. I can make some tweaks if necessary.

However,

I don't think we need to copy the Figma pixel-for-pixel

...so perhaps it's fine as-is?

for the design system can we make the summary card more generic (sample labels, etc) and then make the dashboard one instance of the summary data card?

I can certainly make the story more generic; it doesn't really matter what the text inside a story is, whether "reporting org on registry" or "generic title (small)", or whatever. The resulting design is the important thing here. There isn't really a concept of instances within the design system, just an example design for each component, etc.

[codemacabre]

With generic information:

[github-actions]

🎉 This PR is included in version 4.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀