[EuiCard] Allow custom component for image prop (#3370)

* Updated image prop to allow ReactElement

* Updated documentation for the EuiCard image prop

* Updated CHANGELOG.md

* Updated card to remove unnecessary styling

* [Docs] Updated EuiCard image prop usage guideline

* [Docs] Added custom element example for the EuiCard image prop

* Adjusting callout text and display

* Update CHANGELOG.md

* Update src/components/card/card.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 - Added `download` glyph to `EuiIcon` ([#3364](https://github.com/elastic/eui/pull/3364))
 - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers  ([#3375](https://github.com/elastic/eui/pull/3375))
+- Added `ReactElement` to `EuiCard` `image` prop type to allow custom component ([#3370](https://github.com/elastic/eui/pull/3370))
+
 
 ## [`23.1.0`](https://github.com/elastic/eui/tree/v23.1.0)
 

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

@@ -154,8 +154,15 @@ export const CardExample = {
                 Make sure that all images are the{' '}
                 <strong>same proportions</strong> when used in a singular row.
               </span>
-            }
-          />
+            }>
+            <p>
+              Also, when passing an <strong>element</strong> to the{' '}
+              <EuiCode>image</EuiCode> prop that consists solely of inline
+              elements or does not contain an
+              <EuiCode>{'<img />'}</EuiCode> element, each element will require
+              a style of <EuiCode>width: 100%</EuiCode>.
+            </p>
+          </EuiCallOut>
         </div>
       ),
       props: { EuiCard },

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

@@ -21,7 +21,14 @@ export default () => (
     <EuiFlexItem>
       <EuiCard
         textAlign="left"
-        image="https://source.unsplash.com/400x200/?Nature"
+        image={
+          <div>
+            <img
+              src="https://source.unsplash.com/400x200/?Nature"
+              alt="Nature"
+            />
+          </div>
+        }
         title="Elastic in Nature"
         description="Example of a card's description. Stick to one or two sentences."
         footer={cardFooterContent}

src/components/card/_card.scss

@@ -149,6 +149,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 a 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;