[M]DLS-535-feat(ui-rnative): add MediaCard component (#571)

zel-kass · github-actions[bot] · gamegee · web-flow · commit 8812a69a890c · 2026-03-20T18:36:08.000+01:00
* feat(MediaCard): add MediaCard component with leading and trailing content support - Introduced MediaCard component to display images with customizable content. - Added MediaCardLeadingContent and MediaCardTrailingContent for flexible layouts. - Updated App.tsx to include MediaCards in the sandbox. - Enhanced internationalization files with new close button labels in multiple languages. - Added tests and documentation for MediaCard component functionality. * feat(ui-rnative): implement MediaCard component with customizable content slots * refactor(MediaCard): simplify component structure by removing leading and trailing content slots * nx release plan * chore(dependencies): bump @ledgerhq/lumen-design-core to 0.1.5 and @ledgerhq/lumen-ui-rnative to 0.1.11 * refactor(MediaCard): replace RadialGradient with LinearGradient and adjust gradient colors for design fidelity * 💄 (figma): Sync Figma Design Tokens & Symbols (#579) * 💄 (figma): Sync Figma Design Tokens & Symbols * fix: remove is-utility: dark Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> --------- Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> Co-authored-by: gamegee <15988848+gamegee@users.noreply.github.com> Co-authored-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * test/add test for themeprovider (#576) * chore: update app-sandbox-rnative versions Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * test(ui-rnative): make sure to test the ThemeProvider with real components that consume the theme Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * feat(design-core): add whiteHover et whitePressed semantic tokens for theme JS (rn) (#580) Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * feat(InteractiveIcon): add appearance prop for customizable icon colors and replace Pressable in MediaCard with new InteractiveIcon * feat(MediaCard): spread props in MediaCardTitle for enhanced flexibility * feat(MediaCard): add interactive close functionality to MediaCard story * refactor(MediaCard): replace ReactNode import with type import for improved type clarity * Dls 634/fix amount display (#584) * fix(amount-display): fix ui-react AmountDisplay baseline issue + add 0.5px more width for each char Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * nx plan Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * fix(ui-react): fix amountdisplay failing test Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> --------- Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * feat(MediaCard): enhance documentation and update styles for improved layout * feat(MediaCard): update close button behavior and enhance accessibility features * refactor(MediaCard): update image rendering logic and enhance component structure * refactor(MediaCard): streamline component structure and update props handling --------- Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: gamegee <15988848+gamegee@users.noreply.github.com> Co-authored-by: Simon Bruneaud <simon.bruneaud@ledger.fr> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
diff --git a/.nx/version-plans/version-plan-1773849698407.md b/.nx/version-plans/version-plan-1773849698407.md
@@ -0,0 +1,5 @@
+---
+'@ledgerhq/lumen-ui-rnative': patch
+---
+
+feat(MediaCard): introduce MediaCard component with docs, tests, and figma code connect.
diff --git a/apps/app-sandbox-rnative/src/app/App.tsx b/apps/app-sandbox-rnative/src/app/App.tsx
@@ -46,6 +46,7 @@ import {
   Banners,
   CardButtons,
   ContentBanners,
+  MediaCards,
   Tooltips,
   ListItems,
   Gradients,
@@ -181,6 +182,9 @@ const AppContent = ({
                 <SandboxBlock title='ListItems'>
                   <ListItems />
                 </SandboxBlock>
+                <SandboxBlock title='MediaCards'>
+                  <MediaCards />
+                </SandboxBlock>
                 <SandboxBlock title='NavBars'>
                   <NavBars />
                 </SandboxBlock>
diff --git a/apps/app-sandbox-rnative/src/app/blocks/MediaCards.tsx b/apps/app-sandbox-rnative/src/app/blocks/MediaCards.tsx
@@ -0,0 +1,38 @@
+import {
+  Box,
+  Text,
+  MediaCard,
+  MediaCardTitle,
+  Tag,
+} from '@ledgerhq/lumen-ui-rnative';
+
+const EXAMPLE_SRC =
+  'https://ledger-wp-website-s3-prd.ledger.com/uploads/2026/03/hero_visual-1.webp';
+
+export const MediaCards = () => {
+  return (
+    <Box lx={{ flexDirection: 'column', gap: 's12', width: 'full' }}>
+      <MediaCard
+        imageUrl={EXAMPLE_SRC}
+        onPress={() => ({})}
+        onClose={() => ({})}
+      >
+        <Tag label='Promo' size='md' />
+        <MediaCardTitle>
+          Black Friday sale. 3 days with no fees on your transactions.
+        </MediaCardTitle>
+      </MediaCard>
+
+      <MediaCard
+        imageUrl={EXAMPLE_SRC}
+        onPress={() => ({})}
+        onClose={() => ({})}
+      >
+        <MediaCardTitle>Secure your crypto assets</MediaCardTitle>
+        <Text typography='body2' lx={{ color: 'white' }}>
+          Get started with Ledger and protect your digital assets today.
+        </Text>
+      </MediaCard>
+    </Box>
+  );
+};
diff --git a/apps/app-sandbox-rnative/src/app/blocks/index.ts b/apps/app-sandbox-rnative/src/app/blocks/index.ts
@@ -29,5 +29,6 @@ export * from './InteractiveIcons';
 export * from './Banners';
 export * from './CardButtons';
 export * from './ContentBanners';
+export * from './MediaCards';
 export * from './Tooltips';
 export * from './Gradients';
diff --git a/libs/ui-rnative/src/i18n/locales/de.json b/libs/ui-rnative/src/i18n/locales/de.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Schließen"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "QR-Code scannen"
diff --git a/libs/ui-rnative/src/i18n/locales/en.json b/libs/ui-rnative/src/i18n/locales/en.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Close"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Scan QR code"
diff --git a/libs/ui-rnative/src/i18n/locales/es.json b/libs/ui-rnative/src/i18n/locales/es.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Cerrar"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Escanear código QR"
diff --git a/libs/ui-rnative/src/i18n/locales/fr.json b/libs/ui-rnative/src/i18n/locales/fr.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Fermer"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Scanner le code QR"
diff --git a/libs/ui-rnative/src/i18n/locales/ja.json b/libs/ui-rnative/src/i18n/locales/ja.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "閉じる"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "QRコードをスキャン"
diff --git a/libs/ui-rnative/src/i18n/locales/ko.json b/libs/ui-rnative/src/i18n/locales/ko.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "닫기"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "QR 코드 스캔"
diff --git a/libs/ui-rnative/src/i18n/locales/pt.json b/libs/ui-rnative/src/i18n/locales/pt.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Fechar"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Escanear QR Code"
diff --git a/libs/ui-rnative/src/i18n/locales/ru.json b/libs/ui-rnative/src/i18n/locales/ru.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Закрыть"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Сканировать QR-код"
diff --git a/libs/ui-rnative/src/i18n/locales/th.json b/libs/ui-rnative/src/i18n/locales/th.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "ปิด"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "สแกน QR Code"
diff --git a/libs/ui-rnative/src/i18n/locales/tr.json b/libs/ui-rnative/src/i18n/locales/tr.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Kapat"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Karekodu okut"
diff --git a/libs/ui-rnative/src/i18n/locales/zh.json b/libs/ui-rnative/src/i18n/locales/zh.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "关闭"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "扫描二维码"
diff --git a/libs/ui-rnative/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx b/libs/ui-rnative/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx
@@ -9,13 +9,16 @@ import { Pressable } from '../Utility';
 import { HIT_SLOP_MAP, InteractiveIconProps } from './types';
 
 type IconType = InteractiveIconProps['iconType'];
+type Appearance = NonNullable<InteractiveIconProps['appearance']>;
 
 const useStyles = ({
   iconType,
+  appearance,
   pressed,
   disabled,
 }: {
   iconType: IconType;
+  appearance: Appearance;
   pressed: boolean;
   disabled: boolean;
 }) => {
@@ -25,6 +28,21 @@ const useStyles = ({
         filled: { backgroundColor: t.colors.bg.base },
         stroked: { backgroundColor: t.colors.bg.baseTransparent },
       };
+      const appearanceColors = {
+        base: {
+          default: t.colors.text.base,
+          pressed: t.colors.text.basePressed,
+        },
+        muted: {
+          default: t.colors.text.muted,
+          pressed: t.colors.text.mutedPressed,
+        },
+        white: {
+          default: t.colors.text.white,
+          pressed: t.colors.text.whitePressed,
+        },
+      };
+      const colorSet = appearanceColors[appearance];
 
       return {
         container: StyleSheet.flatten([
@@ -39,12 +57,12 @@ const useStyles = ({
           color: disabled
             ? t.colors.text.disabled
             : pressed
-              ? t.colors.text.mutedPressed
-              : t.colors.text.muted,
+              ? colorSet.pressed
+              : colorSet.default,
         },
       };
     },
-    [iconType, pressed, disabled],
+    [iconType, appearance, pressed, disabled],
   );
 };
 
@@ -83,6 +101,7 @@ export const InteractiveIcon = ({
   disabled: disabledProp = false,
   hitSlop: hitSlopProp,
   hitSlopType = 'comfortable',
+  appearance = 'muted',
   style,
   lx,
   ...props
@@ -113,6 +132,7 @@ export const InteractiveIcon = ({
       {({ pressed }) => (
         <InteractiveIconContent
           iconType={iconType}
+          appearance={appearance}
           pressed={pressed}
           disabled={disabled}
         >
@@ -125,15 +145,17 @@ export const InteractiveIcon = ({
 
 const InteractiveIconContent = ({
   iconType,
+  appearance,
   pressed,
   disabled,
   children,
 }: PropsWithChildren<{
   iconType: IconType;
+  appearance: Appearance;
   pressed: boolean;
   disabled: boolean;
 }>) => {
-  const styles = useStyles({ iconType, pressed, disabled });
+  const styles = useStyles({ iconType, appearance, pressed, disabled });
 
   return (
     <View style={styles.container}>
diff --git a/libs/ui-rnative/src/lib/Components/InteractiveIcon/types.ts b/libs/ui-rnative/src/lib/Components/InteractiveIcon/types.ts
@@ -52,6 +52,14 @@ export type InteractiveIconProps = {
    * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
    */
   iconType: 'filled' | 'stroked';
+  /**
+   * The color appearance of the icon.
+   * - `base`: Default high-contrast color.
+   * - `muted`: Subdued color for secondary actions.
+   * - `white`: White color for use on dark backgrounds.
+   * @default 'muted'
+   */
+  appearance?: 'base' | 'muted' | 'white';
   /**
    * Preset for the touchable area. Ignored if `hitSlop` is passed explicitly.
    * Automatically applies insets based on the child's icon size.
diff --git a/libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.mdx b/libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.mdx
@@ -0,0 +1,111 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaCardStories from './MediaCard.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Communication/MediaCard' of={MediaCardStories} />
+
+# MediaCard
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaCard is a promotional card component that displays a full-bleed background image with gradient overlays for text readability. It uses a simplified compound pattern with `MediaCardTitle` for the text and free-form children for leading content (e.g. tags, icons).
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=15160-2853).
+
+## Anatomy
+
+<Canvas of={MediaCardStories.Base} />
+
+- **MediaCard**: Root pressable container with background image and gradient overlays
+- **MediaCardTitle**: Styled title text (clamps at 3 lines)
+- **Leading content**: Any element rendered before `MediaCardTitle` (tags, badges, icons) — no wrapper needed
+- **Close button**: Rendered via the `onClose` prop (positioned absolute top-right) — only visible when `onClose` is provided
+
+## Properties
+
+<Canvas of={MediaCardStories.Base} />
+<Controls of={MediaCardStories.Base} />
+
+### Layout
+
+The card fills its parent width by default.
+
+<Canvas of={MediaCardStories.LayoutShowcase} />
+
+### Compositions
+
+Leading content is optional — just place any element before `MediaCardTitle` inside `MediaCard`.
+
+<Canvas of={MediaCardStories.CompositionShowcase} />
+
+## Accessibility
+
+- The root element uses `accessibilityRole='button'` when `onPress` is provided
+- The close button includes an `accessibilityLabel` (auto-translated via i18n) — only rendered when `onClose` is provided
+- The background image is not accessible (`accessible={false}`) since it is decorative
+- Components forward refs and spread props for accessibility support
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+Both `onPress` and `onClose` are optional. When `onClose` is omitted, the close button is hidden. When `onPress` is omitted, the card is non-interactive.
+
+```tsx
+import { MediaCard, MediaCardTitle, Tag } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <MediaCard
+      imageUrl='https://example.com/promo.jpg'
+      onPress={() => console.log('pressed')}
+      onClose={() => console.log('closed')}
+    >
+      <Tag label='New' size='md' />
+      <MediaCardTitle>Card title</MediaCardTitle>
+    </MediaCard>
+  );
+}
+```
+
+### Without Close Button
+
+Omit `onClose` to hide the close button — useful for non-dismissible promotions:
+
+```tsx
+<MediaCard
+  imageUrl='https://example.com/promo.jpg'
+  onPress={() => console.log('pressed')}
+>
+  <Tag label='New' size='md' />
+  <MediaCardTitle>Card title</MediaCardTitle>
+</MediaCard>
+```
+
+### Layout Adjustments with lx
+
+Use the `lx` prop for layout adjustments like margins or positioning:
+
+```tsx
+<MediaCard
+  imageUrl='https://example.com/promo.jpg'
+  onPress={() => console.log('pressed')}
+  lx={{ marginTop: 's16', marginBottom: 's8' }}
+>
+  <MediaCardTitle>With margin</MediaCardTitle>
+</MediaCard>
+```
+
+<CommonRulesDoAndDont />
+
+</Tab>
+</CustomTabs>
diff --git a/libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.stories.tsx b/libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.stories.tsx
diff --git a/libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.test.tsx b/libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.test.tsx
diff --git a/libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.tsx b/libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.tsx
diff --git a/libs/ui-rnative/src/lib/Components/MediaCard/index.ts b/libs/ui-rnative/src/lib/Components/MediaCard/index.ts
diff --git a/libs/ui-rnative/src/lib/Components/MediaCard/types.ts b/libs/ui-rnative/src/lib/Components/MediaCard/types.ts
diff --git a/libs/ui-rnative/src/lib/Components/index.ts b/libs/ui-rnative/src/lib/Components/index.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@ledgerhq/lumen-ui-rnative': patch
 +---
++
 +feat(MediaCard): introduce MediaCard component with docs, tests, and figma code connect.
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "common": {`
	`3`	`+ "closeAriaLabel": "Schließen"`
	`4`	`+ },`
`2`	`5`	`"components": {`
`3`	`6`	`"addressInput": {`
`4`	`7`	`"qrCodeAriaLabel": "QR-Code scannen"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "common": {`
	`3`	`+ "closeAriaLabel": "Close"`
	`4`	`+ },`
`2`	`5`	`"components": {`
`3`	`6`	`"addressInput": {`
`4`	`7`	`"qrCodeAriaLabel": "Scan QR code"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "common": {`
	`3`	`+ "closeAriaLabel": "Cerrar"`
	`4`	`+ },`
`2`	`5`	`"components": {`
`3`	`6`	`"addressInput": {`
`4`	`7`	`"qrCodeAriaLabel": "Escanear código QR"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "common": {`
	`3`	`+ "closeAriaLabel": "Fermer"`
	`4`	`+ },`
`2`	`5`	`"components": {`
`3`	`6`	`"addressInput": {`
`4`	`7`	`"qrCodeAriaLabel": "Scanner le code QR"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "common": {`
	`3`	`+ "closeAriaLabel": "閉じる"`
	`4`	`+ },`
`2`	`5`	`"components": {`
`3`	`6`	`"addressInput": {`
`4`	`7`	`"qrCodeAriaLabel": "QRコードをスキャン"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "common": {`
	`3`	`+ "closeAriaLabel": "닫기"`
	`4`	`+ },`
`2`	`5`	`"components": {`
`3`	`6`	`"addressInput": {`
`4`	`7`	`"qrCodeAriaLabel": "QR 코드 스캔"`