feat(NakedCard): add support for top icon

src/__screenshot_tests__/display-media-card-screenshot-test.tsx

@@ -47,3 +47,16 @@ test('DisplayMediaCard with video', async () => {
 
     expect(image).toMatchImageSnapshot();
 });
+
+test('DisplayMediaCard with asset', async () => {
+    await openStoryPage({
+        id: 'components-cards-display-media-card--default',
+        args: {asset: 'circle with icon'},
+    });
+
+    const displayMediaCard = await screen.findByTestId('display-media-card');
+
+    const image = await displayMediaCard.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});

src/__screenshot_tests__/media-card-screenshot-test.tsx

@@ -88,3 +88,17 @@ test('MediaCard with top actions', async () => {
 
     expect(image).toMatchImageSnapshot();
 });
+
+test.each(TESTABLE_DEVICES)('MediaCard with asset in %s', async (device) => {
+    const page = await openStoryPage({
+        id: 'components-cards-media-card--default',
+        device,
+        args: {
+            asset: 'circle with icon',
+        },
+    });
+
+    const image = await page.screenshot({fullPage: true});
+
+    expect(image).toMatchImageSnapshot();
+});

src/__screenshot_tests__/naked-card-screenshot-test.tsx

@@ -103,6 +103,21 @@ test('NakedCard with top actions', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(TESTABLE_DEVICES)('NakedCard with asset in %s', async (device) => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--default',
+        device,
+        args: {
+            asset: 'circle with icon',
+        },
+    });
+
+    const nakedCard = await screen.findByTestId('naked-card');
+    const image = await nakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test.each(TESTABLE_DEVICES)('SmallNakedCard in %s', async (device) => {
     await openStoryPage({
         id: 'components-cards-nakedcard--small',

src/__screenshot_tests__/poster-card-screenshot-test.tsx

@@ -111,3 +111,17 @@ test('PosterCard with video', async () => {
 
     expect(image).toMatchImageSnapshot();
 });
+
+test.each(TESTABLE_DEVICES)('PosterCard with asset in %s', async (device) => {
+    await openStoryPage({
+        id: 'components-cards-poster-card--default',
+        device,
+        args: {asset: 'circle with icon'},
+    });
+
+    const posterCard = await screen.findByTestId('poster-card');
+
+    const image = await posterCard.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});

src/__stories__/display-media-card-story.tsx

@@ -32,7 +32,7 @@ const BACKGROUND_VIDEO_SRC = beachVideo;
 const BACKGROUND_VIDEO_POSTER_SRC = beachImg;
 
 type DisplayMediaCardArgs = {
-    asset: 'icon' | 'circle + icon' | 'image' | 'circle + image';
+    asset: 'circle with icon' | 'circle with image' | 'none';
     headlineType: TagType;
     background: 'image' | 'video';
     headline: string;
@@ -47,7 +47,7 @@ type DisplayMediaCardArgs = {
 };
 
 export const Default: StoryComponent<DisplayMediaCardArgs> = ({
-    asset = 'icon',
+    asset,
     headline,
     headlineType,
     background,
@@ -61,13 +61,13 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
     aspectRatio,
 }) => {
     let icon;
-    if (asset === 'circle + icon') {
+    if (asset === 'circle with icon') {
         icon = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
             </Circle>
         );
-    } else if (asset === 'circle + image') {
+    } else if (asset === 'circle with image') {
         icon = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
@@ -186,7 +186,7 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
 
 Default.storyName = 'Display Media card';
 Default.args = {
-    asset: 'icon',
+    asset: 'none',
     headlineType: 'promo',
     background: 'image',
     headline: 'Priority',
@@ -201,7 +201,7 @@ Default.args = {
 };
 Default.argTypes = {
     asset: {
-        options: ['circle + icon', 'circle + image', 'none'],
+        options: ['circle with icon', 'circle with image', 'none'],
         control: {type: 'select'},
     },
     headlineType: {

src/__stories__/media-card-story.tsx

@@ -29,7 +29,7 @@ const VIDEO_SRC = confettiVideo;
 const IMAGE_SRC = tennisImg;
 
 type Args = {
-    asset: 'icon' | 'circle + icon' | 'image' | 'circle + image';
+    asset: 'circle with icon' | 'circle with image' | 'none';
     media: 'image' | 'video';
     headlineType: TagType;
     headline: string;
@@ -58,13 +58,13 @@ export const Default: StoryComponent<Args> = ({
     asset,
 }) => {
     let icon;
-    if (asset === 'circle + icon') {
+    if (asset === 'circle with icon') {
         icon = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconMobileDeviceRegular color={skinVars.colors.brand} />
             </Circle>
         );
-    } else if (asset === 'circle + image') {
+    } else if (asset === 'circle with image') {
         icon = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
@@ -125,7 +125,7 @@ export const Default: StoryComponent<Args> = ({
 
 Default.storyName = 'Media card';
 Default.args = {
-    asset: 'icon',
+    asset: 'none',
     media: 'image',
     headlineType: 'promo',
     headline: 'Priority',
@@ -140,7 +140,7 @@ Default.args = {
 };
 Default.argTypes = {
     asset: {
-        options: ['circle + icon', 'circle + image', 'none'],
+        options: ['circle with icon', 'circle with image', 'none'],
         control: {type: 'select'},
     },
     media: {

src/__stories__/naked-card-story.tsx

@@ -12,11 +12,14 @@ import {
     Stack,
     Text2,
     Inline,
+    Circle,
+    skinVars,
 } from '..';
 import {Placeholder} from '../placeholder';
 import tennisImg from './images/tennis.jpg';
 import confettiVideo from './videos/confetti.mp4';
 import {SmallNakedCard} from '../card';
+import avatarImg from './images/avatar.jpg';
 
 import type {TagType} from '..';
 
@@ -31,6 +34,7 @@ const VIDEO_SRC = confettiVideo;
 const IMAGE_SRC = tennisImg;
 
 type Args = {
+    asset: 'circle with icon' | 'circle with image' | 'none';
     media: 'image' | 'circular image' | 'video';
     headlineType: TagType;
     headline: string;
@@ -56,7 +60,19 @@ export const Default: StoryComponent<Args> = ({
     closable,
     withTopAction,
     media,
+    asset,
 }) => {
+    let icon;
+    if (asset === 'circle with icon') {
+        icon = (
+            <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
+                <IconMobileDeviceRegular color={skinVars.colors.brand} />
+            </Circle>
+        );
+    } else if (asset === 'circle with image') {
+        icon = <Circle size={40} backgroundImage={avatarImg} />;
+    }
+
     const button = actions.includes('button') ? (
         <ButtonPrimary small href="https://google.com">
             Action
@@ -95,6 +111,7 @@ export const Default: StoryComponent<Args> = ({
                             <Image circular src={IMAGE_SRC} />
                         )
                     }
+                    icon={icon}
                     {...interactiveActions}
                     extra={withExtra ? <Placeholder /> : undefined}
                     onClose={closable ? () => {} : undefined}
@@ -119,6 +136,7 @@ export const Default: StoryComponent<Args> = ({
 
 Default.storyName = 'NakedCard';
 Default.args = {
+    asset: 'none',
     media: 'image',
     headlineType: 'promo',
     headline: 'Priority',
@@ -132,6 +150,10 @@ Default.args = {
     withTopAction: false,
 };
 Default.argTypes = {
+    asset: {
+        options: ['circle with icon', 'circle with image', 'none'],
+        control: {type: 'select'},
+    },
     media: {
         options: ['image', 'circular image', 'video'],
         control: {type: 'select'},

src/__stories__/poster-card-story.tsx

@@ -29,7 +29,7 @@ const BACKGROUND_VIDEO_SRC = beachVideo;
 const BACKGROUND_VIDEO_POSTER_SRC = beachImg;
 
 type PosterCardArgs = {
-    asset: 'icon' | 'circle + icon' | 'image' | 'circle + image';
+    asset: 'circle with icon' | 'circle with image' | 'none';
     background: 'image' | 'video';
     headlineType: TagType;
     headline: string;
@@ -45,7 +45,7 @@ type PosterCardArgs = {
 };
 
 export const Default: StoryComponent<PosterCardArgs> = ({
-    asset = 'icon',
+    asset,
     background,
     headline,
     headlineType,
@@ -60,13 +60,13 @@ export const Default: StoryComponent<PosterCardArgs> = ({
     aspectRatio,
 }) => {
     let icon;
-    if (asset === 'circle + icon') {
+    if (asset === 'circle with icon') {
         icon = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
             </Circle>
         );
-    } else if (asset === 'circle + image') {
+    } else if (asset === 'circle with image') {
         icon = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
@@ -165,7 +165,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
 
 Default.storyName = 'Poster card';
 Default.args = {
-    asset: 'icon',
+    asset: 'none',
     headlineType: 'promo',
     background: 'image',
     headline: 'Priority',
@@ -181,7 +181,7 @@ Default.args = {
 };
 Default.argTypes = {
     asset: {
-        options: ['circle + icon', 'circle + image', 'none'],
+        options: ['circle with icon', 'circle with image', 'none'],
         control: {type: 'select'},
     },
     headlineType: {

src/card.tsx

@@ -427,6 +427,7 @@ type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
 
 interface MediaCardBaseProps {
     media: RendersElement<typeof Image> | RendersElement<typeof Video>;
+    icon?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
     pretitleLinesMax?: number;
@@ -435,7 +436,6 @@ interface MediaCardBaseProps {
     subtitle?: string;
     subtitleLinesMax?: number;
     description?: string;
-    icon?: React.ReactElement;
     descriptionLinesMax?: number;
     extra?: React.ReactNode;
     actions?: Array<CardAction>;
@@ -458,6 +458,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
     (
         {
             media,
+            icon,
             headline,
             pretitle,
             pretitleLinesMax,
@@ -466,7 +467,6 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
             title,
             titleLinesMax,
             description,
-            icon,
             descriptionLinesMax,
             extra,
             actions,
@@ -536,6 +536,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
     (
         {
             media,
+            icon,
             headline,
             pretitle,
             pretitleLinesMax,
@@ -594,6 +595,15 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                 buttonLink={buttonLink}
                             />
                         </div>
+                        {icon && (
+                            <Box
+                                className={styles.mediaCardIcon}
+                                paddingLeft={{mobile: 16, desktop: 24}}
+                                paddingTop={{mobile: 16, desktop: 24}}
+                            >
+                                {icon}
+                            </Box>
+                        )}
                     </div>
                 </BaseTouchable>
                 <CardActionsGroup onClose={onClose} actions={actions} type="media" />
@@ -1271,15 +1281,19 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                 </div>
                             </ThemeVariant>
 
-                            <div
+                            <Box
                                 className={styles.displayCardContent}
-                                style={{
-                                    paddingTop:
-                                        withGradient && !icon && !hasTopActions && !backgroundVideo ? 0 : 24,
-                                }}
+                                paddingTop={
+                                    withGradient && !icon && !hasTopActions && !backgroundVideo
+                                        ? 0
+                                        : {mobile: icon ? 16 : 24, desktop: 24}
+                                }
                             >
                                 {icon ? (
-                                    <Box paddingBottom={withGradient ? 0 : 40} paddingX={24}>
+                                    <Box
+                                        paddingBottom={withGradient ? 0 : 40}
+                                        paddingX={{mobile: 16, desktop: 24}}
+                                    >
                                         {icon}
                                     </Box>
                                 ) : (
@@ -1290,7 +1304,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                     />
                                 )}
                                 <Box
-                                    paddingX={16}
+                                    paddingX={{mobile: 16, desktop: 24}}
                                     paddingTop={withGradient ? 40 : 0}
                                     paddingBottom={24}
                                     className={withGradient ? styles.displayCardGradient : undefined}
@@ -1347,7 +1361,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                         </div>
                                     </Stack>
                                 </Box>
-                            </div>
+                            </Box>
                         </div>
                     </BaseTouchable>
                 </InternalBoxed>