feat(PosterCard, DisplayMediaCard): allow using srcSet for backgroundImage

src/__private_stories__/image-srcset-story.tsx

@@ -1,25 +1,46 @@
 import * as React from 'react';
-import {Image, Stack, Text3} from '..';
+import {DisplayMediaCard, Image, PosterCard, Stack, Text3} from '..';
 import usingVrImg from '../__stories__/images/using-vr.jpg';
 import beachImg from '../__stories__/images/beach.jpg';
 import laptopImg from '../__stories__/images/laptop.jpg';
+import {sprinkles} from '../sprinkles.css';
 
 export default {
     title: 'Private/Image/Image with srcSet attribute is responsive',
 };
 
 export const Default: StoryComponent = () => {
+    const src = usingVrImg;
+    const srcSet = `${usingVrImg} 600w, ${beachImg} 1300w, ${laptopImg} 3000w`;
+
     return (
         <Stack space={16}>
-            <Text3 medium>When using srcSet prop, Image src should be responsive</Text3>
+            <Text3 medium>
+                When using srcSet prop, Image src should be responsive. this attribute can also be used for
+                the backgroundImage in DisplayMediaCard and PosterCard components
+            </Text3>
+
+            <Stack
+                space={16}
+                className={sprinkles({display: 'inline-block'})}
+                dataAttributes={{testid: 'content'}}
+            >
+                <Image aspectRatio="16:9" width={300} src={src} srcSet={srcSet} />
+
+                <PosterCard
+                    aspectRatio="16:9"
+                    width={300}
+                    title="Poster Card"
+                    backgroundImage={{src, srcSet}}
+                />
 
-            <Image
-                src={usingVrImg}
-                aspectRatio="16:9"
-                width={400}
-                dataAttributes={{testid: 'image'}}
-                srcSet={`${usingVrImg} 600w, ${beachImg} 1300w, ${laptopImg} 3000w`}
-            />
+                <DisplayMediaCard
+                    aspectRatio="16:9"
+                    width={300}
+                    title="Display Media Card"
+                    backgroundImage={{src, srcSet}}
+                />
+            </Stack>
         </Stack>
     );
 };

src/__screenshot_tests__/private-image-srcset-screenshot-test.tsx

@@ -8,6 +8,6 @@ test.each(DEVICES)('Image with srcSet is responsive (%s)', async (device) => {
         device,
     });
 
-    const element = await screen.findByTestId('image');
+    const element = await screen.findByTestId('content');
     expect(await element.screenshot()).toMatchImageSnapshot();
 });

src/__type_tests__/card-type-test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {ButtonPrimary} from '../button';
 import {DisplayMediaCard, NakedCard, PosterCard, SmallNakedCard, SnapCard} from '../card';
-import HighlightedCard from '../highlighted-card';
 import Image from '../image';
 
 <SnapCard title="title" />;
@@ -18,8 +17,14 @@ import Image from '../image';
 // @ts-expect-error trackingEvent can't be used if the card is not touchable
 <SnapCard title="title" trackingEvent={{name: 'do-something'}} />;
 
+<DisplayMediaCard title="title" backgroundImage={{src: 'test', srcSet: 'test'}} />;
+<DisplayMediaCard title="title" backgroundImage={{src: undefined, srcSet: 'test'}} />;
+<DisplayMediaCard title="title" backgroundImage={{src: 'test', srcSet: undefined}} />;
+
 // @ts-expect-error backgroundImage and backgroundVideo can't be used together
 <DisplayMediaCard title="title" backgroundImage="" backgroundVideo="" />;
+// @ts-expect-error backgroundImage should have src or srcSet
+<DisplayMediaCard title="title" backgroundImage={{src: undefined, srcSet: undefined}} />;
 
 <PosterCard backgroundImage="background.png" title="title" />;
 <PosterCard backgroundVideo="background.mp4" title="title" />;
@@ -38,6 +43,9 @@ import Image from '../image';
 <PosterCard title="title" variant="alternative" />;
 <PosterCard title="title" isInverse backgroundColor="red" />;
 <PosterCard title="title" variant="inverse" backgroundColor="red" />;
+<PosterCard title="title" backgroundImage={{src: 'test', srcSet: 'test'}} />;
+<PosterCard title="title" backgroundImage={{src: undefined, srcSet: 'test'}} />;
+<PosterCard title="title" backgroundImage={{src: 'test', srcSet: undefined}} />;
 
 // @ts-expect-error onPress and href can't be used together
 <PosterCard title="title" onPress={() => {}} href="/" />;
@@ -57,6 +65,8 @@ import Image from '../image';
 <PosterCard title="title" />;
 // @ts-expect-error if you set a custom backgroundColor, you should specify the variant
 <PosterCard title="title" backgroundColor="red" />;
+// @ts-expect-error backgroundImage should have src or srcSet
+<PosterCard title="title" backgroundImage={{src: undefined, srcSet: undefined}} />;
 
 (isTouchable: boolean) => <SnapCard title="title" href={isTouchable ? '/' : undefined} />;
 (isTouchable: boolean) => <SnapCard title="title" to={isTouchable ? '/' : undefined} />;

src/card.tsx

@@ -230,8 +230,10 @@ const CardContainer = React.forwardRef<HTMLDivElement, CardContainerProps>(
     }
 );
 
-const renderBackgroundImage = (src?: string) => {
-    return <Image width="100%" height="100%" src={src || ''} />;
+const renderBackgroundImage = (backgroundImageProps?: string | {src?: string; srcSet?: string}) => {
+    const src = typeof backgroundImageProps === 'string' ? backgroundImageProps : backgroundImageProps?.src;
+    const srcSet = typeof backgroundImageProps === 'string' ? undefined : backgroundImageProps?.srcSet;
+    return <Image width="100%" height="100%" src={src || ''} srcSet={srcSet} />;
 };
 
 type VideoState = 'loading' | 'loadingTimeout' | 'playing' | 'paused' | 'error';
@@ -1186,7 +1188,7 @@ type DisplayMediaCardBaseProps = {
 };
 
 type DisplayMediaCardWithImageProps = CommonDisplayCardProps & {
-    backgroundImage: string;
+    backgroundImage: string | {src: string; srcSet?: string} | {src?: string; srcSet: string};
 };
 
 type DisplayMediaCardWithVideoProps = Omit<CommonDisplayCardProps, 'actions' | 'onClose'> & {
@@ -1476,7 +1478,7 @@ interface PosterCardBaseProps {
 }
 
 interface PosterCardWithImageProps extends PosterCardBaseProps {
-    backgroundImage: string;
+    backgroundImage: string | {src: string; srcSet?: string} | {src?: string; srcSet: string};
 }
 
 type PosterCardWithVideoProps = Omit<PosterCardBaseProps, 'actions' | 'onClose'> & {