@ledgerhq/lumen-ui-rnative 0.1.11 → 0.1.13

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/ThemeProvider/ThemeProvider.test.tsx

@@ -1,30 +1,28 @@
 import { describe, expect, it } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
-import { Text } from 'react-native';
+import { ChevronBigLeft, Wallet } from '../../Symbols';
+import { Button } from '../Button';
+import { Spot } from '../Spot';
+import { Tile } from '../Tile/Tile';
+import { Box, Text } from '../Utility';
 import { ThemeProvider } from './ThemeProvider';
 
-const themes: any = {
-  light: {
-    typographies: {
-      xs: {},
-    },
-  },
-  dark: {
-    typographies: {
-      xs: {},
-    },
-  },
-};
-
 describe('ThemeProvider', () => {
   it('renders children correctly', () => {
     render(
-      <ThemeProvider themes={themes}>
-        <Text testID='child'>Hello World</Text>
+      <ThemeProvider themes={ledgerLiveThemes}>
+        <Button testID='child'>Hello World</Button>
+        <Tile>Tile</Tile>
+        <Spot appearance='icon' icon={Wallet} />
+        <Box>
+          <Text>Text</Text>
+        </Box>
+        <ChevronBigLeft />
       </ThemeProvider>,
     );
 
-    expect(screen.getByTestId('child'));
-    expect(screen.getByText('Hello World'));
+    expect(screen.getByTestId('child')).toBeTruthy();
+    expect(screen.getByText('Hello World')).toBeTruthy();
   });
 });

package/src/lib/Components/TriggerButton/TriggerButton.mdx

@@ -0,0 +1,44 @@
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TriggerButtonStories from './TriggerButton.stories';
+
+<Meta title='Action/TriggerButton' of={TriggerButtonStories} />
+
+<CustomTabs>
+  <Tab label="Overview ">
+  
+# TriggerButton
+
+## Introduction
+
+A specialized trigger button designed exclusively for select and dropdown patterns. It displays a label with an optional leading icon and a permanent trailing chevron indicator.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680&m=dev).
+
+> **Important**: This component should only be used as a trigger inside a Select or dropdown. For standalone actions, use [Button](/docs/action-button--docs) or [IconButton](/docs/action-iconbutton--docs) instead.
+
+## Properties
+
+<Canvas of={TriggerButtonStories.Base} />
+<Controls of={TriggerButtonStories.Base} />
+
+## Appearance
+
+Three appearances are available: `gray` (default), `transparent`, and `no-background`.
+
+<Canvas of={TriggerButtonStories.AppearanceShowcase} />
+
+## Sizes
+
+<Canvas of={TriggerButtonStories.SizeShowcase} />
+
+## Icon Types
+
+The `iconType` prop controls the padding scheme based on the leading icon's shape:
+
+- **`flat`**: Standard padding for interface icons (line icons without background).
+- **`rounded`**: Tighter left padding for circular icons with their own background (e.g., crypto icons).
+
+<Canvas of={TriggerButtonStories.IconTypeShowcase} />
+</Tab>
+</CustomTabs>