feat: allow background for image-card with url (#1020)

Author: niktverd

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(),

src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx

@@ -159,13 +159,15 @@ 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({});
 
 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}},

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": [