@ledgerhq/lumen-ui-rnative 0.1.11 → 0.1.12

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>

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

@@ -0,0 +1,132 @@
+import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Settings, Star } from '../../Symbols';
+import { Box } from '../Utility';
+import { TriggerButton } from './TriggerButton';
+
+const meta: Meta<typeof TriggerButton> = {
+  component: TriggerButton,
+  title: 'Action/TriggerButton',
+  parameters: {
+    layout: 'centered',
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TriggerButton>;
+
+export const Base: Story = {
+  args: {
+    children: 'All accounts',
+    appearance: 'gray',
+  },
+  render: (args) => <TriggerButton {...args} />,
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<TriggerButton appearance="gray">
+  All accounts
+</TriggerButton>
+`,
+      },
+    },
+  },
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+      <TriggerButton size='sm' icon={<Star size={20} />} iconType='flat'>
+        Small
+      </TriggerButton>
+      <TriggerButton size='md' icon={<Star size={20} />} iconType='flat'>
+        Medium
+      </TriggerButton>
+    </Box>
+  ),
+};
+
+export const IconTypeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+      <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+        <TriggerButton
+          icon={<Settings size={20} />}
+          iconType='flat'
+          appearance='gray'
+        >
+          Flat icon (md)
+        </TriggerButton>
+        <TriggerButton
+          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />}
+          iconType='rounded'
+          appearance='gray'
+        >
+          Rounded icon (md)
+        </TriggerButton>
+        <TriggerButton appearance='gray'>No icon (md)</TriggerButton>
+      </Box>
+      <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+        <TriggerButton
+          icon={<Settings size={20} />}
+          iconType='flat'
+          appearance='gray'
+          size='sm'
+        >
+          Flat icon (sm)
+        </TriggerButton>
+        <TriggerButton
+          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='24px' />}
+          iconType='rounded'
+          appearance='gray'
+          size='sm'
+        >
+          Rounded icon (sm)
+        </TriggerButton>
+        <TriggerButton appearance='gray' size='sm'>
+          No icon (sm)
+        </TriggerButton>
+      </Box>
+    </Box>
+  ),
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => {
+    const appearances = ['gray', 'transparent', 'no-background'] as const;
+    return (
+      <Box lx={{ flexDirection: 'column', gap: 's16', padding: 's16' }}>
+        {appearances.map((appearance) => (
+          <Box
+            key={appearance}
+            lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}
+          >
+            <TriggerButton appearance={appearance}>{appearance}</TriggerButton>
+            <TriggerButton
+              appearance={appearance}
+              icon={<Settings size={20} />}
+              iconType='flat'
+            >
+              {appearance}
+            </TriggerButton>
+            <TriggerButton
+              appearance={appearance}
+              icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />}
+              iconType='rounded'
+            >
+              {appearance}
+            </TriggerButton>
+          </Box>
+        ))}
+      </Box>
+    );
+  },
+};

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

@@ -0,0 +1,157 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import { Settings } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { TriggerButton } from './TriggerButton';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('TriggerButton', () => {
+  describe('Rendering', () => {
+    it('should render with label text and correct accessibility role', () => {
+      renderWithProvider(
+        <TriggerButton testID='trigger'>All accounts</TriggerButton>,
+      );
+      const trigger = screen.getByTestId('trigger');
+      expect(trigger).toBeTruthy();
+      expect(screen.getByText('All accounts')).toBeTruthy();
+      expect(trigger.props.accessibilityRole).toBe('button');
+    });
+
+    it('should always render a chevron icon', () => {
+      renderWithProvider(<TriggerButton testID='trigger'>Label</TriggerButton>);
+      expect(screen.getByTestId('button-trigger-chevron')).toBeTruthy();
+    });
+
+    it.each(['gray', 'transparent', 'no-background'] as const)(
+      'should render without errors for appearance "%s"',
+      (appearance) => {
+        renderWithProvider(
+          <TriggerButton testID='trigger' appearance={appearance}>
+            Label
+          </TriggerButton>,
+        );
+        expect(screen.getByTestId('trigger')).toBeTruthy();
+      },
+    );
+
+    it.each(['sm', 'md'] as const)(
+      'should render without errors for size "%s"',
+      (size) => {
+        renderWithProvider(
+          <TriggerButton testID='trigger' size={size}>
+            Label
+          </TriggerButton>,
+        );
+        expect(screen.getByTestId('trigger')).toBeTruthy();
+      },
+    );
+  });
+
+  describe('Icons', () => {
+    it('should render with a flat interface icon', () => {
+      renderWithProvider(
+        <TriggerButton
+          testID='trigger'
+          icon={<Settings size={20} testID='icon' />}
+          iconType='flat'
+        >
+          Network
+        </TriggerButton>,
+      );
+      expect(screen.getByTestId('icon')).toBeTruthy();
+      expect(screen.getByText('Network')).toBeTruthy();
+    });
+
+    it('should render with a rounded icon', () => {
+      renderWithProvider(
+        <TriggerButton
+          testID='trigger'
+          icon={<View testID='crypto-icon' />}
+          iconType='rounded'
+        >
+          Bitcoin
+        </TriggerButton>,
+      );
+      expect(screen.getByTestId('crypto-icon')).toBeTruthy();
+      expect(screen.getByText('Bitcoin')).toBeTruthy();
+    });
+  });
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      renderWithProvider(
+        <TriggerButton testID='trigger' disabled>
+          Label
+        </TriggerButton>,
+      );
+      const trigger = screen.getByTestId('trigger');
+      expect(trigger.props.accessibilityState.disabled).toBe(true);
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onPress when pressed', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <TriggerButton testID='trigger' onPress={handlePress}>
+          Press me
+        </TriggerButton>,
+      );
+
+      fireEvent.press(screen.getByTestId('trigger'));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onPress when disabled', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <TriggerButton testID='trigger' onPress={handlePress} disabled>
+          Disabled
+        </TriggerButton>,
+      );
+
+      fireEvent.press(screen.getByTestId('trigger'));
+      expect(handlePress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Ref Forwarding', () => {
+    it('should forward ref', () => {
+      const ref = createRef<View>();
+      renderWithProvider(
+        <TriggerButton ref={ref} testID='trigger'>
+          Label
+        </TriggerButton>,
+      );
+      expect(ref.current).toBeTruthy();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom style and lx props', () => {
+      const customStyle: ViewStyle = { marginTop: 16 };
+      renderWithProvider(
+        <TriggerButton
+          testID='trigger'
+          style={customStyle}
+          lx={{ padding: 's8' }}
+        >
+          Styled
+        </TriggerButton>,
+      );
+      const trigger = screen.getByTestId('trigger');
+      expect(trigger.props.style).toBeDefined();
+    });
+  });
+});