@ledgerhq/lumen-ui-rnative 0.1.11 → 0.1.12

package/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}>

package/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.

package/src/lib/Components/Link/Link.mdx

@@ -1,6 +1,7 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as LinkStories from './Link.stories';
 import { Link } from './Link';
+import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';

package/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>

package/src/lib/Components/MediaCard/MediaCard.stories.tsx

@@ -0,0 +1,190 @@
+import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { useState } from 'react';
+import { Button } from '../Button';
+import { Tag } from '../Tag';
+import { Box, Text } from '../Utility';
+import { MediaCard, MediaCardTitle } from './MediaCard';
+
+const meta = {
+  component: MediaCard,
+  subcomponents: { MediaCardTitle },
+  title: 'Communication/MediaCard',
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+} satisfies Meta<typeof MediaCard>;
+
+export default meta;
+type Story = StoryObj<typeof MediaCard>;
+
+const EXAMPLE_SRC =
+  'https://ledger-wp-website-s3-prd.ledger.com/uploads/2026/03/hero_visual-1.webp';
+
+const baseArgs = {
+  imageUrl: EXAMPLE_SRC,
+  onPress: () => ({}),
+  onClose: () => ({}),
+};
+
+export const Base: Story = {
+  args: baseArgs,
+  render: (args) => (
+    <Box lx={{ width: 's320' }}>
+      <MediaCard {...args}>
+        <Tag label='Label' size='md' />
+        <MediaCardTitle>
+          Black Friday sale.
+          <Text typography='heading3SemiBold' lx={{ color: 'active' }}>
+            {' '}
+            3 days with no fees{' '}
+          </Text>
+          on your transactions.
+        </MediaCardTitle>
+      </MediaCard>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<MediaCard imageUrl="/promo.jpg" onPress={() => {}} onClose={() => {}}>
+  <Tag label='Label' size='md' />
+  <MediaCardTitle>
+    Black Friday sale.
+    <Text typography='heading3SemiBold' lx={{ color: 'active' }}>
+      {' '}
+      3 days with no fees{' '}
+    </Text>
+    on your transactions.
+  </MediaCardTitle>
+</MediaCard>`,
+      },
+    },
+  },
+};
+
+export const LayoutShowcase: Story = {
+  render: () => (
+    <Box
+      lx={{
+        flexDirection: 'column',
+        width: 's320',
+        gap: 's16',
+        padding: 's8',
+      }}
+    >
+      <MediaCard {...baseArgs}>
+        <Tag label='Label' size='md' />
+        <MediaCardTitle>Full width card</MediaCardTitle>
+      </MediaCard>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<MediaCard imageUrl="/promo.jpg" onPress={() => {}} onClose={() => {}}>
+  <Tag label="Label" size="md" />
+  <MediaCardTitle>Full width card</MediaCardTitle>
+</MediaCard>`,
+      },
+    },
+  },
+};
+
+export const CompositionShowcase: Story = {
+  render: () => (
+    <Box
+      lx={{
+        flexDirection: 'column',
+        width: 's320',
+        gap: 's16',
+        padding: 's8',
+      }}
+    >
+      <MediaCard {...baseArgs}>
+        <MediaCardTitle>Title only</MediaCardTitle>
+      </MediaCard>
+
+      <MediaCard {...baseArgs}>
+        <Tag label='Promo' size='md' />
+        <MediaCardTitle>With tag and title</MediaCardTitle>
+      </MediaCard>
+
+      <MediaCard {...baseArgs}>
+        <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />
+        <MediaCardTitle>With crypto icon</MediaCardTitle>
+      </MediaCard>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+{/* Title only */}
+<MediaCard imageUrl="/promo.jpg" onPress={() => {}} onClose={() => {}}>
+  <MediaCardTitle>Title only</MediaCardTitle>
+</MediaCard>
+
+{/* With tag */}
+<MediaCard imageUrl="/promo.jpg" onPress={() => {}} onClose={() => {}}>
+  <Tag label="Promo" size="md" />
+  <MediaCardTitle>With tag and title</MediaCardTitle>
+</MediaCard>
+
+{/* With crypto icon */}
+<MediaCard imageUrl="/promo.jpg" onPress={() => {}} onClose={() => {}}>
+  <CryptoIcon ledgerId="bitcoin" ticker="BTC" size="32px" />
+  <MediaCardTitle>With crypto icon</MediaCardTitle>
+</MediaCard>`,
+      },
+    },
+  },
+};
+
+export const WithClose: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+
+    if (!visible) {
+      return (
+        <Button
+          appearance='transparent'
+          size='sm'
+          onPress={() => setVisible(true)}
+        >
+          Show card again
+        </Button>
+      );
+    }
+
+    return (
+      <Box lx={{ width: 's320' }}>
+        <MediaCard
+          imageUrl={EXAMPLE_SRC}
+          onPress={() => ({})}
+          onClose={() => setVisible(false)}
+        >
+          <Tag label='Label' size='md' />
+          <MediaCardTitle>
+            Black Friday sale.
+            <Text typography='heading3SemiBold' lx={{ color: 'active' }}>
+              {' '}
+              3 days with no fees{' '}
+            </Text>
+            on your transactions.
+          </MediaCardTitle>
+        </MediaCard>
+      </Box>
+    );
+  },
+};

package/src/lib/Components/MediaCard/MediaCard.test.tsx

@@ -0,0 +1,125 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render } from '@testing-library/react-native';
+import type { ReactNode } from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { MediaCard, MediaCardTitle } from './MediaCard';
+
+const TestWrapper = ({ children }: { children: ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+const makeProps = () => ({
+  imageUrl: 'https://example.com/image.jpg',
+  onPress: jest.fn(),
+  onClose: jest.fn(),
+});
+
+describe('MediaCard', () => {
+  it('should render title', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <MediaCard {...makeProps()}>
+          <MediaCardTitle>Title</MediaCardTitle>
+        </MediaCard>
+      </TestWrapper>,
+    );
+
+    getByText('Title');
+  });
+
+  it('should render leading content and title', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <MediaCard {...makeProps()}>
+          <MediaCardTitle>Tag</MediaCardTitle>
+          <MediaCardTitle>Title</MediaCardTitle>
+        </MediaCard>
+      </TestWrapper>,
+    );
+
+    getByText('Tag');
+    getByText('Title');
+  });
+
+  it('should fire onPress on press', () => {
+    const props = makeProps();
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaCard {...props} testID='media-card'>
+          <MediaCardTitle>Title</MediaCardTitle>
+        </MediaCard>
+      </TestWrapper>,
+    );
+
+    fireEvent.press(getByTestId('media-card'));
+    expect(props.onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render image when imageUrl is provided', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaCard {...makeProps()}>
+          <MediaCardTitle>Title</MediaCardTitle>
+        </MediaCard>
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('media-card-image')).toBeTruthy();
+  });
+
+  it('should hide image on error', () => {
+    const { getByTestId, queryByTestId } = render(
+      <TestWrapper>
+        <MediaCard {...makeProps()}>
+          <MediaCardTitle>Title</MediaCardTitle>
+        </MediaCard>
+      </TestWrapper>,
+    );
+
+    const img = getByTestId('media-card-image');
+    fireEvent(img, 'onError');
+
+    expect(queryByTestId('media-card-image')).toBeNull();
+  });
+
+  it('should fire onClose on close button press', () => {
+    const props = makeProps();
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaCard {...props}>
+          <MediaCardTitle>Title</MediaCardTitle>
+        </MediaCard>
+      </TestWrapper>,
+    );
+
+    fireEvent.press(getByTestId('media-card-close-button'));
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not render close button when onClose is not provided', () => {
+    const { queryByTestId } = render(
+      <TestWrapper>
+        <MediaCard imageUrl='https://example.com/image.jpg'>
+          <MediaCardTitle>Title</MediaCardTitle>
+        </MediaCard>
+      </TestWrapper>,
+    );
+
+    expect(queryByTestId('media-card-close-button')).toBeNull();
+  });
+
+  it('should not have button role when onPress is not provided', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaCard imageUrl='https://example.com/image.jpg' testID='media-card'>
+          <MediaCardTitle>Title</MediaCardTitle>
+        </MediaCard>
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('media-card').props.accessibilityRole).toBeUndefined();
+  });
+});