From b5e9661f6b4052b4b1b6a286ce4b0d1476eef53a Mon Sep 17 00:00:00 2001
From: Nik Tverd <61203447+niktverd@users.noreply.github.com>
Date: Thu, 19 Sep 2024 14:17:27 +0500
Subject: [PATCH] feat: allow background for image-card with url (#1020)

---
 src/sub-blocks/ImageCard/ImageCard.tsx                     | 1 +
 src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx | 2 ++
 src/sub-blocks/ImageCard/__stories__/data.json             | 6 ++++++
 3 files changed, 9 insertions(+)

diff --git a/src/sub-blocks/ImageCard/ImageCard.tsx b/src/sub-blocks/ImageCard/ImageCard.tsx
index 7be7fe92b..43964ebce 100644
--- a/src/sub-blocks/ImageCard/ImageCard.tsx
+++ b/src/sub-blocks/ImageCard/ImageCard.tsx
@@ -80,6 +80,7 @@ const ImageCard = (props: ImageCardProps) => {
             rel={target === '_blank' ? 'noopener noreferrer' : undefined}
             className={b({border, 'with-content': hasContent, direction})}
             title={urlTitle}
+            style={{backgroundColor}}
             extraProps={{
                 draggable: false,
                 onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),
diff --git a/src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx b/src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx
index 43a09a5d5..30f4bc444 100644
--- a/src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx
+++ b/src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx
@@ -159,6 +159,7 @@ export const DirectionReverse = MultipleTemplate.bind({});
 export const Content = ContentTemplate.bind({});
 export const BackgroundColor = MultipleTemplate.bind({});
 export const WithUrl = MultipleTemplate.bind({});
+export const WithUrlAndBackgroundColor = BorderTemplate.bind({});
 export const Border = BorderTemplate.bind({});
 export const BorderRadius = BorderRadiusTemplate.bind({});
 export const ControlPosition = ControlPositionTemplate.bind({});
@@ -166,6 +167,7 @@ export const ControlPosition = ControlPositionTemplate.bind({});
 DirectionReverse.args = {direction: 'reverse'} as Partial<ImageCardProps>;
 BackgroundColor.args = {...data.backgroundColor.content};
 WithUrl.args = {...data.withUrl.content};
+WithUrlAndBackgroundColor.args = {...data.withUrlAndBackgroundColor.content};
 ControlPosition.args = undefined;
 ControlPosition.argTypes = {
     title: {table: {disable: true}},
diff --git a/src/sub-blocks/ImageCard/__stories__/data.json b/src/sub-blocks/ImageCard/__stories__/data.json
index 5f7e6ad47..a546aade5 100644
--- a/src/sub-blocks/ImageCard/__stories__/data.json
+++ b/src/sub-blocks/ImageCard/__stories__/data.json
@@ -53,6 +53,12 @@
       "url": "https://example.com"
     }
   },
+  "withUrlAndBackgroundColor": {
+    "content": {
+      "url": "https://example.com",
+      "backgroundColor": "#ccf0d2"
+    }
+  },
   "content": {
     "url": "https://example.com",
     "links": [