From d38782bea243c0b711a256b9bf62aee949be9afc Mon Sep 17 00:00:00 2001
From: TAY TS <taytzushieh@gmail.com>
Date: Thu, 23 Apr 2020 23:40:44 +0800
Subject: [PATCH] [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 ++
 src-docs/src/views/card/card_example.js | 11 +++++++++--
 src-docs/src/views/card/card_image.js   |  9 ++++++++-
 src/components/card/_card.scss          |  4 ++++
 src/components/card/card.tsx            | 21 +++++++++++++++++----
 5 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6760a15f7a1..ab24926aedf 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js
index b6df5d1eed2..3fa5564c6e3 100644
--- a/src-docs/src/views/card/card_example.js
+++ b/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 },
diff --git a/src-docs/src/views/card/card_image.js b/src-docs/src/views/card/card_image.js
index 34f20c7c6da..641de21b175 100644
--- a/src-docs/src/views/card/card_image.js
+++ b/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}
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index bd5ab8b0c82..0b61001a0d7 100644
--- a/src/components/card/_card.scss
+++ b/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;
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 03cae710e98..d435a4e9eea 100644
--- a/src/components/card/card.tsx
+++ b/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;