Add card graphics

[ryankeairns]

Fixes #1334

Summary

In preparation for Kibana home page changes, this PR add an optional svg graphic to cards.
An example card using this prop has been intentionally left off the EuiCard docs page as it should only be used in select cases.

Light theme

Dark theme

Kibana home sample

Checklist

• This was checked in mobile
• This was checked in IE11 - So far unable to load EUI in IE :/
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[chandlerprall]

What do you think about moving the SVG-specific code out into a new component (card_svg.js ?) and letting that component be passed in to EuiCard? It will help bundle size in the future when we have efficient splitting, and is more flexible in what can be used at the footer of the card.

[ryankeairns]

@chandlerprall This PR is ready for a fresh review. I've moved the svg to its own component, as suggested.

[ryankeairns]

@chandlerprall I've made the requested changes for future code splitting concerns. Ready for another look, thanks.

[cchaos]

Looking good. Had a few suggestions around naming and SASS.

Also, do you think the graphic should crop or scale?

Examples of it now (cropping):

Example of scaling it to always be 100% the width of the card (though I cropped it at 300px wide too):

[chandlerprall]

Code LGTM

[cchaos]

One more thought is that I really like how in dark mode, the gray shape has a defined shape.

Can you do the same for light mode?

I know it's hard to get one value looking great for both....

[ryankeairns]

@cchaos This is ready for a fresh review. I've also tweaked the colors a bit to better see the second wave on the light theme. Ideally, we would use different color values on that particular path in the svg depending upon the active theme, but Dave noted that while there is a ticket for such a detection mechanism, it does not yet exist. I think, after this latest tweaking, it's a good balance between the two themes for now.

[cchaos]

Now I'm just being nit picky, so feel free to disregard. But what do you think about changing the light shape to just be a solid color?

<path fill="#bbb" fillOpacity=".13" fillRule="evenodd" d={graphicSVGPathLight} />