add srcset to cards

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/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'> & {