@ledgerhq/lumen-ui-rnative 0.1.10 → 0.1.12

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();
+  });
+});

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

@@ -0,0 +1,203 @@
+import { useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
+import { Close } from '../../Symbols';
+import { InteractiveIcon } from '../InteractiveIcon';
+import { LinearGradient, Pressable, Text } from '../Utility';
+import { MediaCardProps, MediaCardTitleProps } from './types';
+
+const CARD_HEIGHT = 164;
+
+const useStyles = () =>
+  useStyleSheet(
+    (t) => ({
+      root: {
+        position: 'relative',
+        width: t.sizes.full,
+        height: CARD_HEIGHT,
+        borderRadius: t.borderRadius.md,
+        overflow: 'hidden',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-end',
+        backgroundColor: t.colors.bg.muted,
+      },
+      content: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: t.spacings.s8,
+        width: t.sizes.full,
+        minWidth: 0,
+        padding: t.spacings.s12,
+      },
+      title: {
+        ...t.typographies.heading3SemiBold,
+        color: t.colors.text.white,
+      },
+      closeButton: {
+        position: 'absolute',
+        top: t.spacings.s12,
+        right: t.spacings.s12,
+      },
+      gradientOverlays: {
+        color: t.colors.text.black,
+      },
+      pressedOverlay: {
+        backgroundColor: t.colors.bg.mutedTransparentPressed,
+      },
+    }),
+    [],
+  );
+
+/**
+ * Title text for the card, styled with heading typography and white color.
+ */
+export const MediaCardTitle = ({
+  children,
+  lx = {},
+  style,
+  ref,
+  ...props
+}: MediaCardTitleProps) => {
+  const styles = useStyles();
+
+  return (
+    <Text
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.title, style])}
+      numberOfLines={3}
+      ellipsizeMode='tail'
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+MediaCardTitle.displayName = 'MediaCardTitle';
+
+const GradientOverlays = () => {
+  const styles = useStyles();
+
+  return (
+    <>
+      <LinearGradient
+        direction='to-top'
+        stops={[
+          { color: styles.gradientOverlays.color, opacity: 0.8, offset: 0 },
+          { color: styles.gradientOverlays.color, opacity: 0, offset: 0.75 },
+        ]}
+        style={StyleSheet.absoluteFill}
+        pointerEvents='none'
+        accessible={false}
+      />
+
+      <LinearGradient
+        direction={45}
+        stops={[
+          { color: styles.gradientOverlays.color, opacity: 0, offset: 0.6 },
+          { color: styles.gradientOverlays.color, opacity: 0.8 },
+        ]}
+        style={StyleSheet.absoluteFill}
+        pointerEvents='none'
+        accessible={false}
+      />
+    </>
+  );
+};
+
+/**
+ * A media card component for displaying a full-bleed background image with
+ * composable content and a close button, using gradient overlays to ensure
+ * readability.
+ *
+ * @example
+ * import { MediaCard, MediaCardTitle } from '@ledgerhq/lumen-ui-rnative';
+ * import { Tag } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <MediaCard imageUrl="/image.jpg" onPress={() => {}} onClose={() => {}}>
+ *   <Tag label="New" size="md" />
+ *   <MediaCardTitle>Card title</MediaCardTitle>
+ * </MediaCard>
+ *
+ * // Without close button
+ * <MediaCard imageUrl="/image.jpg" onPress={() => {}}>
+ *   <MediaCardTitle>Card title</MediaCardTitle>
+ * </MediaCard>
+ */
+export const MediaCard = ({
+  ref,
+  children,
+  imageUrl,
+  onPress,
+  onClose,
+  closeAccessibilityLabel,
+  lx = {},
+  style,
+  ...pressableProps
+}: MediaCardProps) => {
+  const { t } = useCommonTranslation();
+  const [imageLoadError, setImageLoadError] = useState(false);
+  const showImage = imageUrl && !imageLoadError;
+
+  const styles = useStyles();
+
+  return (
+    <Pressable
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.root, style])}
+      accessibilityRole={onPress ? 'button' : undefined}
+      onPress={onPress}
+      {...pressableProps}
+    >
+      {({ pressed }) => (
+        <>
+          {showImage && (
+            <Image
+              source={{ uri: imageUrl }}
+              style={[
+                StyleSheet.absoluteFill,
+                imageLoadError && { opacity: 0 },
+              ]}
+              accessible={false}
+              onError={() => setImageLoadError(true)}
+              testID='media-card-image'
+            />
+          )}
+
+          <GradientOverlays />
+
+          <View style={styles.content}>{children}</View>
+
+          {onClose && (
+            <InteractiveIcon
+              iconType='stroked'
+              appearance='white'
+              style={styles.closeButton}
+              onPress={onClose}
+              accessibilityLabel={
+                closeAccessibilityLabel || t('common.closeAriaLabel')
+              }
+              testID='media-card-close-button'
+            >
+              <Close size={20} />
+            </InteractiveIcon>
+          )}
+
+          {pressed && (
+            <View
+              style={[StyleSheet.absoluteFill, styles.pressedOverlay]}
+              pointerEvents='none'
+              accessible={false}
+            />
+          )}
+        </>
+      )}
+    </Pressable>
+  );
+};
+
+MediaCard.displayName = 'MediaCard';

package/src/lib/Components/MediaCard/index.ts

@@ -0,0 +1,2 @@
+export { MediaCard, MediaCardTitle } from './MediaCard';
+export * from './types';

package/src/lib/Components/MediaCard/types.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import { StyledPressableProps, StyledTextProps } from '../../../styles';
+
+/**
+ * Props for the MediaCard root component
+ */
+export type MediaCardProps = {
+  /**
+   * The source URL for the background image.
+   */
+  imageUrl: string;
+  /**
+   * Callback fired when the card is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Callback fired when the close button is pressed.
+   */
+  onClose?: () => void;
+  /**
+   * Optional accessibility label for the close button.
+   */
+  closeAccessibilityLabel?: string;
+  /**
+   * The card content — typically a `MediaCardTitle` and optional
+   * leading content such as tags or icons.
+   */
+  children: ReactNode;
+} & Omit<StyledPressableProps, 'children' | 'onPress'>;
+
+/**
+ * Props for the MediaCardTitle component
+ */
+export type MediaCardTitleProps = {
+  /**
+   * The title text or custom content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;

package/src/lib/Components/SegmentedControl/SegmentedControl.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
 import type { LumenTextStyle, LumenTypographyTokenName } from '../../../styles';
@@ -111,10 +112,14 @@ export function SegmentedControl({
   onSelectedChange,
   accessibilityLabel,
   children,
-  disabled,
+  disabled: disabledProp,
   appearance = 'background',
   ...props
 }: SegmentedControlProps) {
+  const disabled = useDisabledContext({
+    consumerName: 'SegmentedControl',
+    mergeWith: { disabled: disabledProp },
+  });
   const styles = useRootStyles({
     disabled: Boolean(disabled),
     appearance,

package/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx

@@ -3,7 +3,7 @@ import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 export type SegmentedControlContextValue = {
   selectedValue: string;
   onSelectedChange: (value: string) => void;
-  disabled?: boolean;
+  disabled: boolean;
 };
 
 const [SegmentedControlContextProvider, _useSegmentedControlSafeContext] =