[EuiCard] Allow custom component for image prop

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `23.0.0`.
+- Added `ReactElement` to `EuiCard` `image` property to allow custom component
 
 ## [`23.0.0`](https://github.com/elastic/eui/tree/v23.0.0)
 

src-docs/src/views/card/card_example.js

@@ -153,6 +153,11 @@ export const CardExample = {
               <span>
                 Make sure that all images are the{' '}
                 <strong>same proportions</strong> when used in a singular row.
+                <br />
+                If custom component is passed to <EuiCode>image</EuiCode> prop
+                and it consists solely of inline elements and no{' '}
+                <EuiCode>{'<img />'}</EuiCode> elements, please make sure to
+                provide <EuiCode>{'{ width: 100%; }'}</EuiCode> styling.
               </span>
             }
           />

src/components/card/_card.scss

@@ -120,6 +120,10 @@
   .euiCard__image {
     // Without a border, the image should stand on it's own so it needs to have all corners rounded
     border-radius: $euiBorderRadius;
+
+    & img {
+      width: 100%;
+    }
   }
 }
 
@@ -149,6 +153,10 @@
     border-top-left-radius: $euiBorderRadius - 1px;
     border-top-right-radius: $euiBorderRadius - 1px;
 
+    & img {
+      width: 100%;
+    }
+
     // IF both exist, position the icon centered on top of image
     + .euiCard__icon {
       position: absolute;

src/components/card/card.tsx

@@ -17,7 +17,12 @@
  * under the License.
  */
 
-import React, { FunctionComponent, ReactElement, ReactNode } from 'react';
+import React, {
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  isValidElement,
+} from 'react';
 import classNames from 'classnames';
 
 import { CommonProps, keysOf } from '../common';
@@ -89,9 +94,9 @@ type EuiCardProps = Omit<CommonProps, 'aria-label'> & {
   icon?: ReactElement<EuiIconProps>;
 
   /**
-   * Accepts a url in string form
+   * Accepts a url in string form or ReactElement for custom image component
    */
-  image?: string;
+  image?: string | ReactElement;
 
   /**
    * Content to be rendered between the description and the footer
@@ -229,7 +234,15 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
 
   let imageNode;
   if (image && layout === 'vertical') {
-    imageNode = <img className="euiCard__image" src={image} alt="" />;
+    if (isValidElement(image) || typeof image === 'string') {
+      imageNode = (
+        <div className="euiCard__image">
+          {isValidElement(image) ? image : <img src={image} alt="" />}
+        </div>
+      );
+    } else {
+      imageNode = null;
+    }
   }
 
   let iconNode;