Data card

[sgroi-l]

What's New

• DataCard component: New component for displaying data visualisations with
  stats, charts, and buttons
• Sparkline charts: Chart.js integration graphs
• Multiple story examples: Showing various DataCard configurations
• Landing page layout: New layout component for landing pages
• Masonry layout: CSS-based masonry layout for card grids

Chart.js installed with npm

[robredpath]

This looks brilliant, thank you @sgroi-l !

My only question is about how the layout is determined in the masonry layout (e.g. on /docs/layout-landing-page--docs ). It would be useful to have some documentation on that so that someone coming to use it can understand what to expect. Similarly, any controls that we have over how the layout is set up would be good to understand. For example, the bottom of this page in the Storybook looks a little messy and if I was using it in an application I'd be wondering how I could tweak it to make it look how I wanted it to, and how it would change for users at different screen sizes. In (almost) every case where we're going to be using this it's for pre-determined content rather than UGC so we can finesse if we have the controls

EDIT: I was so busy looking at the bottom I missed that the cards aren't aligned at the top!

(this is in Safari, btw - it's aligned in Chrome)

[sgroi-l]

Hi @robredpath

Good spot on the misalignment in Safari, I missed that in cross browser testing. The latest commit should have fixed that issue.

I've added some documentation at landing-page/Docs.mdx, but I'll share here as well and we can add more to the design system if needed. The cards flow sequentially down the columns and then across (to the right) to the next one. It uses column-fill: balance to get the browser to try to distribute the content evenly and have columns of similar height. The layout adapts to different screen sizes, wide screens show up to 4 columns while narrow screens show fewer (minimum column width is 16rem with 1.5rem gaps).

Depending on the exact order of the cards this can sometimes lead to a final column that looks like it is missing a card. The cards themselves can be reordered in the template by just moving them around in the masonry container to achieve an optimal layout, as shown in the screenshot below.

[robredpath]

Thanks for all of this, @sgroi-l - this is great. I've approved it because it's fundamentally fine, but I do want to make sure that we understand how to control this.

In the cases where I'm envisaging us using this, there will be a fairly clear order of precedence in terms of the cards that we want people to see first - either above the fold or first as they scroll down. Therefore, I want to make sure that we understand how to control that.

As I understand it, the default is that something that's at the top of the second column in four-column layout may be at the bottom of the first column in a three-column layout. That's fine in some cases, but where there are (for example) six items that it's important that people see first, I want to make sure that they're at the top regardless of the number of columns.

Is it possible to make the card ordering go left-to-right rather than top-to-bottom? Or, are we able to configure which cards are shown in which column in each of the 2/3/4 column layout?

Or, do we need to split cards up in those cases and have multiple masonries (if that's a word!) per page?

[codemacabre]

As mentioned on our call @sgroi-l, this is an awesome custom masonry layout before the official CSS spec is mainstream, and it certainly seems robust (at least in the four browsers I've tested it in). Thank you for providing documentation too, this will really help with future implementations. We just need to add a little documentation on the data cards themselves, but that'll come later as we put them into use. Approved!

[robredpath]

(rebased via GH UI)

[github-actions]

🎉 This PR is included in version 4.3.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀