From e28b78395a1409c268c4be2df84212e914f1f4c7 Mon Sep 17 00:00:00 2001
From: Martin Rohrmeier <martin.ra.rohrmeier@bmw.de>
Date: Thu, 25 Jan 2024 04:48:22 +0100
Subject: [PATCH] feat(cards): optionally give image element as prop

---
 CHANGELOG.md                               | 4 ++++
 package.json                               | 2 +-
 src/components/content/Cards/Card.tsx      | 2 ++
 src/components/content/Cards/CardImage.tsx | 4 ++--
 src/components/content/Cards/index.tsx     | 2 --
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed010be6..fc742563 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.21
+
+- Add option to give an image element to Cards
+
 ## 2.1.20
 
 - Add accordion actions functionality in accordions
diff --git a/package.json b/package.json
index 9fff1e66..2ab0d726 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
diff --git a/src/components/content/Cards/Card.tsx b/src/components/content/Cards/Card.tsx
index 3f3ab4d4..be517e5f 100644
--- a/src/components/content/Cards/Card.tsx
+++ b/src/components/content/Cards/Card.tsx
@@ -85,6 +85,7 @@ export const Card = ({
   imageSize,
   imageShape,
   imageLoader,
+  imageElement,
   buttonText,
   onClick,
   onButtonClick,
@@ -243,6 +244,7 @@ export const Card = ({
             imageSize={imageSize}
             imageShape={imageShape}
             imageLoader={imageLoader}
+            imageElement={imageElement}
             preview={variant === 'preview'}
           />
           {subscriptionStatus && (
diff --git a/src/components/content/Cards/CardImage.tsx b/src/components/content/Cards/CardImage.tsx
index 2e54a278..1e10e92c 100644
--- a/src/components/content/Cards/CardImage.tsx
+++ b/src/components/content/Cards/CardImage.tsx
@@ -35,8 +35,8 @@ export interface CardImageProps {
   imageSize?: CardImageSize
   imageShape?: CardImageShape
   imageLoader?: (src: string) => Promise<ArrayBuffer>
-  preview?: boolean
   imageElement?: JSX.Element
+  preview?: boolean
 }
 
 export const CardImage = ({
@@ -44,8 +44,8 @@ export const CardImage = ({
   imageSize = 'normal',
   imageShape = 'round',
   imageLoader,
-  preview = false,
   imageElement,
+  preview = false,
 }: CardImageProps) => {
   const { transitions } = useTheme()
   const withPreview = (size: number) => (preview ? size + 18 : size)
diff --git a/src/components/content/Cards/index.tsx b/src/components/content/Cards/index.tsx
index 260c33e9..0c4041ad 100644
--- a/src/components/content/Cards/index.tsx
+++ b/src/components/content/Cards/index.tsx
@@ -69,7 +69,6 @@ export const Cards = ({
   imageSize,
   imageShape,
   imageLoader,
-  imageElement,
   columns = 6,
   expandOnHover,
   filledBackground,
@@ -97,7 +96,6 @@ export const Cards = ({
     imageSize,
     imageShape,
     imageLoader,
-    imageElement,
     expandOnHover,
     filledBackground,
     addButtonClicked,