This may be a useful utility to use from our friend Cameron:

http://cameronbourke.github.io/react-cardstack/

mneale though ours cards don't have anything like that interaction (yet) – perhaps add a Design task to explore?

true - perhaps this is better done after (they just seemed so close...

A couple questions here:

1. michaelneale I haven't seen an example of a JDL component exposing a EP. I'm not sure it quite jives in my brain right. I could see building a generic card component, then wrapping it with a high-order component that decorates in an EP. Although, my gut instinct is to build a "Card" component in the new plugin and embed the EP directly... and if we find this to be applicable more broadly in Jenkins, then promote it up to the JDL. Is that reasonable?
2. For jamesdumay
   1. Are all of the image assets from the React / Material stuff, or should I be sourcing them from another spot?
   2. How does this card change if the project is not multi-branch? What do we display in place of the branch name?
   3. What does the gear icon do?
   4. For which states does the "Run Again" icon display?

cliffmeyers the cards don't have to go into the JDL - you can keep them local to your new plugin. We don't use the cards outside of personalization but when we do we can consider making them a shared pattern.

I believe all the icons are either pre-existing status glyphs or present in react material icons.

If a card represents a non-multibranch then don't show the branch on the card.

Gear icon is supposed to go to the editor. Leave it out for now.

Run again shows for all "failing" states. We are working on a new API for that use case now so it can be left out for the time being.

The stop button isn't nessecary for v1 of personalization. We can add it in much later

cliffmeyers like James says, in own plugin, no need to have it in JDL (maybe it becomes so popular websites and other things want to re-use it, but even then probably could be its own npm module at that point...)

We know EP works in plugins, as we use it all the time, so that should be all good.

Great, thanks for all the answers. Plugin and first draft of Card component PR's will land tomorrow.

Nice one

jamesdumay this is mostly ready but I do have a few notes / questions:

1. Note: need to round corners.
2. Could not find the glyphs from the original design file, so I quickly subbed in some things from material icons that are close-ish, but I am sure they are terrible It'd be nice if we could avoid too many one-off icons - maybe there's something else in Material you think fits better?
3. Could you give me some direction as to what the queued, running and not-built status indicators should look like? These are the default styles the indicator is giving. Guessing we want things a bit more white.
4. The selected favorite unfortunately blends in with the Unstable color. Thoughts?

PR's:
https://github.com/jenkinsci/jenkins-design-language/pull/68
https://github.com/jenkinsci/blueocean-plugin/pull/310

cliffmeyers for the icons for commit and branch we are using https://octicons.github.com

cliffmeyers when something is favourited in the card could we make the full star color white? That should make it work with any background colour

cliffmeyers oh the indicators should be white