[D]DLS-535-feat(ui-react): add MediaCard component (#575)

zel-kass · Copilot · aquelemiguel · web-flow · commit 5a164b303a49 · 2026-03-20T17:12:55.000+01:00
* feat: add MediaCard component with accessibility features and internationalization support * feat(ui-react): add MediaCard component with Figma integration, stories, and tests * feat(ui-react): enhance MediaCard with MediaCardTitle for improved content structure * fix(ui-react): rename 'text' prop to 'title' in MediaCard for clarity * nx release plan * fix onClick type to avoid confusion with getButtonA11yProps Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * chore(ui-react): fix lint error * feat(ui-react): enhance InteractiveIcon and MediaCard components with appearance variants and improved accessibility * fix(MediaCard): update error handling test to check for image removal instead of opacity * feat(MediaCard): add 'WithClose' story to demonstrate card visibility toggle functionality * refactor(InteractiveIcon): streamline Figma integration by consolidating shared properties and enhancing appearance options * chore: patch react-native-worklets@0.5.2 to fix Storybook for Reanimated v4 (#585) * Add figma plugin (#586) Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * feat(MediaCard): enhance interactivity by making onClick and onClose props optional, update documentation and tests accordingly --------- Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Miguel Mano <aquelemiguel@gmail.com> Co-authored-by: Simon.b <15988848+gamegee@users.noreply.github.com>
diff --git a/.nx/version-plans/version-plan-1773849812308.md b/.nx/version-plans/version-plan-1773849812308.md
@@ -0,0 +1,5 @@
+---
+'@ledgerhq/lumen-ui-react': patch
+---
+
+feat(MediaCard): introduce MediaCard for web with docs, tests, and figma code connect.
diff --git a/libs/ui-react/src/i18n/locales/de.json b/libs/ui-react/src/i18n/locales/de.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Schließen"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "QR-Code scannen"
diff --git a/libs/ui-react/src/i18n/locales/en.json b/libs/ui-react/src/i18n/locales/en.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Close"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Scan QR code"
diff --git a/libs/ui-react/src/i18n/locales/es.json b/libs/ui-react/src/i18n/locales/es.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Cerrar"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Escanear código QR"
diff --git a/libs/ui-react/src/i18n/locales/fr.json b/libs/ui-react/src/i18n/locales/fr.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Fermer"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Scanner le code QR"
diff --git a/libs/ui-react/src/i18n/locales/ja.json b/libs/ui-react/src/i18n/locales/ja.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "閉じる"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "QRコードをスキャン"
diff --git a/libs/ui-react/src/i18n/locales/ko.json b/libs/ui-react/src/i18n/locales/ko.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "닫기"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "QR 코드 스캔"
diff --git a/libs/ui-react/src/i18n/locales/pt.json b/libs/ui-react/src/i18n/locales/pt.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Fechar"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Escanear QR Code"
diff --git a/libs/ui-react/src/i18n/locales/ru.json b/libs/ui-react/src/i18n/locales/ru.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Закрыть"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Сканировать QR-код"
diff --git a/libs/ui-react/src/i18n/locales/th.json b/libs/ui-react/src/i18n/locales/th.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "ปิด"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "สแกน QR Code"
diff --git a/libs/ui-react/src/i18n/locales/tr.json b/libs/ui-react/src/i18n/locales/tr.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "Kapat"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "Karekodu okut"
diff --git a/libs/ui-react/src/i18n/locales/zh.json b/libs/ui-react/src/i18n/locales/zh.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "closeAriaLabel": "关闭"
+  },
   "components": {
     "addressInput": {
       "qrCodeAriaLabel": "扫描二维码"
diff --git a/libs/ui-react/src/lib/Components/InteractiveIcon/InteractiveIcon.figma.tsx b/libs/ui-react/src/lib/Components/InteractiveIcon/InteractiveIcon.figma.tsx
@@ -1,61 +1,47 @@
 import React from 'react';
-import { InteractiveIcon } from './InteractiveIcon';
-
 import figma from '@figma/code-connect';
+import { InteractiveIcon } from './InteractiveIcon';
 import { InteractiveIconProps } from './types';
 
-figma.connect(
-  InteractiveIcon,
-  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6975%3A2571',
-  {
-    variant: { appearance: 'filled' },
-    imports: ["import { InteractiveIcon } from '@ledgerhq/lumen-ui-react'"],
-    props: {
-      iconType: figma.enum('appearance', {
-        filled: 'filled',
-        stroked: 'stroked',
-      }),
-      disabled: figma.enum('state', {
-        disabled: true,
-      }),
-      children: figma.instance('icon-filled'),
-    },
-    example: (props: InteractiveIconProps) => (
-      <InteractiveIcon
-        iconType={props.iconType}
-        disabled={props.disabled}
-        aria-label='Interactive icon'
-      >
-        {props.children}
-      </InteractiveIcon>
-    ),
-  },
+const URL =
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6975-2571';
+
+const sharedProps = {
+  iconType: figma.enum('appearance', {
+    filled: 'filled',
+    stroked: 'stroked',
+  }),
+  appearance: figma.enum('color', {
+    muted: 'muted',
+    white: 'white',
+    base: 'base',
+  }),
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+};
+
+const example = (props: InteractiveIconProps) => (
+  <InteractiveIcon
+    iconType={props.iconType}
+    appearance={props.appearance}
+    disabled={props.disabled}
+    aria-label='Interactive icon'
+  >
+    {props.children}
+  </InteractiveIcon>
 );
 
-figma.connect(
-  InteractiveIcon,
-  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6975%3A2571',
-  {
-    variant: { appearance: 'stroked' },
-    imports: ["import { InteractiveIcon } from '@ledgerhq/lumen-ui-react'"],
-    props: {
-      iconType: figma.enum('appearance', {
-        filled: 'filled',
-        stroked: 'stroked',
-      }),
-      disabled: figma.enum('state', {
-        disabled: true,
-      }),
-      children: figma.instance('icon-stroked'),
-    },
-    example: (props: InteractiveIconProps) => (
-      <InteractiveIcon
-        iconType={props.iconType}
-        disabled={props.disabled}
-        aria-label='Interactive icon'
-      >
-        {props.children}
-      </InteractiveIcon>
-    ),
-  },
-);
+figma.connect(InteractiveIcon, URL, {
+  variant: { appearance: 'filled' },
+  imports: ["import { InteractiveIcon } from '@ledgerhq/lumen-ui-react'"],
+  props: { ...sharedProps, children: figma.instance('icon-filled') },
+  example,
+});
+
+figma.connect(InteractiveIcon, URL, {
+  variant: { appearance: 'stroked' },
+  imports: ["import { InteractiveIcon } from '@ledgerhq/lumen-ui-react'"],
+  props: { ...sharedProps, children: figma.instance('icon-stroked') },
+  example,
+});
diff --git a/libs/ui-react/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx b/libs/ui-react/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx
@@ -3,14 +3,24 @@ import { cva } from 'class-variance-authority';
 import { InteractiveIconProps } from './types';
 
 const buttonVariants = cva(
-  'inline-flex size-fit items-center justify-center rounded-full text-muted transition-colors hover:text-muted-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:text-muted-pressed disabled:text-disabled',
+  [
+    'inline-flex size-fit items-center justify-center rounded-full',
+    'transition-colors',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
+    'disabled:text-disabled',
+  ],
   {
     variants: {
       iconType: {
         filled: '',
         stroked:
           'bg-base-transparent hover:bg-base-transparent-hover active:bg-base-transparent-pressed disabled:bg-disabled',
       },
+      appearance: {
+        muted: 'text-muted hover:text-muted-hover active:text-muted-pressed',
+        white: 'text-white hover:text-white-hover active:text-white-pressed',
+        base: 'text-base hover:text-base-hover active:text-base-pressed',
+      },
       disabled: {
         true: 'cursor-default',
         false: 'cursor-pointer',
@@ -52,6 +62,7 @@ export const InteractiveIcon = ({
   ref,
   className,
   iconType,
+  appearance = 'muted',
   disabled: disabledProp = false,
   ...props
 }: InteractiveIconProps) => {
@@ -65,7 +76,10 @@ export const InteractiveIcon = ({
       {...props}
       ref={ref}
       disabled={disabled}
-      className={cn(className, buttonVariants({ disabled, iconType }))}
+      className={cn(
+        className,
+        buttonVariants({ disabled, iconType, appearance }),
+      )}
     />
   );
 };
diff --git a/libs/ui-react/src/lib/Components/InteractiveIcon/types.ts b/libs/ui-react/src/lib/Components/InteractiveIcon/types.ts
@@ -11,6 +11,14 @@ export type InteractiveIconProps = {
    * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
    */
   iconType: 'filled' | 'stroked';
+  /**
+   * The visual style of the icon button.
+   * - 'muted': with muted background
+   * - 'white': with white background
+   * - 'base': with base background
+   * @default 'muted'
+   */
+  appearance?: 'muted' | 'white' | 'base';
   /**
    * The icon component to display inside the button.
    * Should be a single icon element from the design system.
diff --git a/libs/ui-react/src/lib/Components/MediaCard/MediaCard.figma.tsx b/libs/ui-react/src/lib/Components/MediaCard/MediaCard.figma.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { MediaCard, MediaCardTitle } from './MediaCard';
+import { Tag } from '../Tag/Tag';
+
+import figma from '@figma/code-connect';
+
+figma.connect(
+  MediaCard,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=15160-2853',
+  {
+    imports: [
+      "import { MediaCard, MediaCardTitle } from '@ledgerhq/lumen-ui-react'",
+      "import { Tag } from '@ledgerhq/lumen-ui-react'",
+    ],
+    props: {
+      title: figma.string('title'),
+      tag: figma.boolean('show-tag', {
+        true: <Tag label='Label' appearance='base' />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <MediaCard
+        imageUrl='/image.jpg'
+        onClick={() => {}}
+        onClose={() => {}}
+      >
+        {props.tag}
+        <MediaCardTitle>{props.title}</MediaCardTitle>
+      </MediaCard>
+    ),
+  },
+);
diff --git a/libs/ui-react/src/lib/Components/MediaCard/MediaCard.mdx b/libs/ui-react/src/lib/Components/MediaCard/MediaCard.mdx
diff --git a/libs/ui-react/src/lib/Components/MediaCard/MediaCard.stories.tsx b/libs/ui-react/src/lib/Components/MediaCard/MediaCard.stories.tsx
diff --git a/libs/ui-react/src/lib/Components/MediaCard/MediaCard.test.tsx b/libs/ui-react/src/lib/Components/MediaCard/MediaCard.test.tsx
diff --git a/libs/ui-react/src/lib/Components/MediaCard/MediaCard.tsx b/libs/ui-react/src/lib/Components/MediaCard/MediaCard.tsx
diff --git a/libs/ui-react/src/lib/Components/MediaCard/index.ts b/libs/ui-react/src/lib/Components/MediaCard/index.ts
diff --git a/libs/ui-react/src/lib/Components/MediaCard/types.ts b/libs/ui-react/src/lib/Components/MediaCard/types.ts
diff --git a/libs/ui-react/src/lib/Components/index.ts b/libs/ui-react/src/lib/Components/index.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@ledgerhq/lumen-ui-react': patch
 +---
++
 +feat(MediaCard): introduce MediaCard for web 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 코드 스캔"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "common": {`
	`3`	`+ "closeAriaLabel": "Fechar"`
	`4`	`+ },`
`2`	`5`	`"components": {`
`3`	`6`	`"addressInput": {`
`4`	`7`	`"qrCodeAriaLabel": "Escanear QR Code"`
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 Code"`