@ledgerhq/lumen-ui-rnative 0.1.21 → 0.1.23

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

@@ -0,0 +1,152 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, fireEvent, screen } from '@testing-library/react-native';
+import { Text as RNText } from 'react-native';
+
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import {
+  ListItem,
+  ListItemLeading,
+  ListItemContent,
+  ListItemContentRow,
+  ListItemTitle,
+  ListItemDescription,
+  ListItemTrailing,
+} from './ListItem';
+import { ListItemProps } from './types';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+const renderListItem = (props: Partial<ListItemProps> = {}) =>
+  render(
+    <TestWrapper>
+      <ListItem testID='list-item' {...props}>
+        <ListItemLeading testID='leading'>
+          <ListItemContent>
+            <ListItemTitle>Title</ListItemTitle>
+            <ListItemDescription>Description</ListItemDescription>
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing testID='trailing'>
+          <RNText>Trailing</RNText>
+        </ListItemTrailing>
+      </ListItem>
+    </TestWrapper>,
+  );
+
+describe('ListItem', () => {
+  it('renders all sub-components', () => {
+    renderListItem();
+
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.getByText('Description')).toBeTruthy();
+    expect(screen.getByText('Trailing')).toBeTruthy();
+  });
+
+  it('forwards testID', () => {
+    renderListItem();
+
+    expect(screen.getByTestId('list-item')).toBeTruthy();
+    expect(screen.getByTestId('leading')).toBeTruthy();
+    expect(screen.getByTestId('trailing')).toBeTruthy();
+  });
+
+  describe('density', () => {
+    it('defaults to expanded height', () => {
+      renderListItem();
+      const inner = screen.getByTestId('list-item-content');
+      expect(inner.props.style).toEqual(
+        expect.objectContaining({ height: 64 }),
+      );
+    });
+
+    it('applies expanded height explicitly', () => {
+      renderListItem({ density: 'expanded' });
+      const inner = screen.getByTestId('list-item-content');
+      expect(inner.props.style).toEqual(
+        expect.objectContaining({ height: 64 }),
+      );
+    });
+
+    it('applies compact height', () => {
+      renderListItem({ density: 'compact' });
+      const inner = screen.getByTestId('list-item-content');
+      expect(inner.props.style).toEqual(
+        expect.objectContaining({ height: 40 }),
+      );
+    });
+  });
+
+  describe('onPress', () => {
+    it('triggers onPress on press', () => {
+      const onPress = jest.fn();
+      renderListItem({ onPress });
+
+      fireEvent.press(screen.getByTestId('list-item'));
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('onLongPress', () => {
+    it('triggers onLongPress on long press', () => {
+      const onLongPress = jest.fn();
+      renderListItem({ onLongPress });
+
+      fireEvent(screen.getByTestId('list-item'), 'longPress');
+      expect(onLongPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not trigger onLongPress when disabled', () => {
+      const onLongPress = jest.fn();
+      renderListItem({ onLongPress, disabled: true });
+
+      fireEvent(screen.getByTestId('list-item'), 'longPress');
+      expect(onLongPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('disabled', () => {
+    it('sets disabled accessibility state', () => {
+      renderListItem({ disabled: true });
+      const item = screen.getByTestId('list-item');
+      expect(item.props.accessibilityState?.disabled).toBe(true);
+    });
+
+    it('does not trigger onPress when disabled', () => {
+      const onPress = jest.fn();
+      renderListItem({ onPress, disabled: true });
+
+      fireEvent.press(screen.getByTestId('list-item'));
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('ListItemContentRow', () => {
+    it('renders title alongside additional content in a row', () => {
+      render(
+        <TestWrapper>
+          <ListItem>
+            <ListItemLeading>
+              <ListItemContent>
+                <ListItemContentRow testID='content-row'>
+                  <ListItemTitle>Bitcoin</ListItemTitle>
+                  <RNText>Tag</RNText>
+                </ListItemContentRow>
+                <ListItemDescription>BTC</ListItemDescription>
+              </ListItemContent>
+            </ListItemLeading>
+          </ListItem>
+        </TestWrapper>,
+      );
+
+      expect(screen.getByTestId('content-row')).toBeTruthy();
+      expect(screen.getByText('Bitcoin')).toBeTruthy();
+      expect(screen.getByText('Tag')).toBeTruthy();
+      expect(screen.getByText('BTC')).toBeTruthy();
+    });
+  });
+});

package/src/lib/Components/ListItem/ListItem.tsx

@@ -1,18 +1,19 @@
 import {
   createSafeContext,
+  type Density,
   DisabledProvider,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
 import { ElementRef, ReactNode, Ref } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { Box, Pressable, Text } from '../Utility';
 import {
+  ListItemProps,
   ListItemContentProps,
   ListItemContentRowProps,
   ListItemDescriptionProps,
   ListItemLeadingProps,
-  ListItemProps,
   ListItemTitleProps,
   ListItemTrailingProps,
 } from './types';
@@ -22,27 +23,32 @@ const [ListItemTrailingProvider, useListItemTrailingContext] =
     isInTrailing: false,
   });
 
-const useRootStyles = ({ pressed }: { pressed: boolean }) => {
+const useRootStyles = ({
+  pressed,
+  density,
+}: {
+  pressed: boolean;
+  density: Density;
+}) => {
   return useStyleSheet(
     (t) => ({
       container: StyleSheet.flatten([
         {
           flexDirection: 'row',
           alignItems: 'center',
-          height: t.sizes.s64,
+          height: density === 'compact' ? t.sizes.s40 : t.sizes.s64,
           width: t.sizes.full,
           gap: t.spacings.s16,
           borderRadius: t.borderRadius.md,
           backgroundColor: 'transparent',
           paddingHorizontal: t.spacings.s8,
-          paddingVertical: t.spacings.s12,
         },
         pressed && {
           backgroundColor: t.colors.bg.baseTransparentPressed,
         },
       ]),
     }),
-    [pressed],
+    [pressed, density],
   );
 };
 
@@ -86,29 +92,56 @@ export const ListItem = ({
   lx = {},
   style,
   disabled: disabledProp = false,
+  density = 'expanded',
+  onPress,
+  onLongPress,
   ref,
-  ...pressableProps
+  ...props
 }: ListItemProps) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItem',
     mergeWith: { disabled: disabledProp },
   });
 
+  const isInteractive = !!onPress || !!onLongPress;
+
+  if (isInteractive) {
+    return (
+      <DisabledProvider value={{ disabled }}>
+        <Pressable
+          ref={ref}
+          lx={lx}
+          style={style as ViewStyle}
+          disabled={disabled}
+          onPress={onPress}
+          onLongPress={onLongPress}
+          accessibilityRole='button'
+          accessibilityState={{ disabled }}
+          {...props}
+        >
+          {({ pressed }) => (
+            <ListItemInner pressed={pressed} density={density}>
+              {children}
+            </ListItemInner>
+          )}
+        </Pressable>
+      </DisabledProvider>
+    );
+  }
+
   return (
     <DisabledProvider value={{ disabled }}>
-      <Pressable
+      <Box
         ref={ref}
         lx={lx}
         style={style}
-        disabled={disabled}
-        accessibilityRole='button'
         accessibilityState={{ disabled }}
-        {...pressableProps}
+        {...props}
       >
-        {({ pressed }) => (
-          <ListItemInner pressed={pressed}>{children}</ListItemInner>
-        )}
-      </Pressable>
+        <ListItemInner pressed={false} density={density}>
+          {children}
+        </ListItemInner>
+      </Box>
     </DisabledProvider>
   );
 };
@@ -118,12 +151,14 @@ export const ListItem = ({
  */
 const ListItemInner = ({
   pressed,
+  density,
   children,
 }: {
   pressed: boolean;
+  density: Density;
   children: ReactNode;
 }) => {
-  const styles = useRootStyles({ pressed });
+  const styles = useRootStyles({ pressed, density });
   return (
     <View style={styles.container} testID='list-item-content'>
       {children}
@@ -140,7 +175,7 @@ export const ListItemLeading = ({
   lx = {},
   style,
   ref,
-  ...viewProps
+  ...props
 }: ListItemLeadingProps & { ref?: Ref<View> }) => {
   const styles = useStyleSheet(
     (t) => ({
@@ -160,7 +195,7 @@ export const ListItemLeading = ({
       ref={ref}
       lx={lx}
       style={StyleSheet.flatten([styles.leading, style])}
-      {...viewProps}
+      {...props}
     >
       {children}
     </Box>
@@ -175,7 +210,7 @@ export const ListItemContent = ({
   lx = {},
   style,
   ref,
-  ...viewProps
+  ...props
 }: ListItemContentProps & { ref?: Ref<View> }) => {
   const { isInTrailing } = useListItemTrailingContext({
     consumerName: 'ListItemContent',
@@ -199,7 +234,7 @@ export const ListItemContent = ({
       ref={ref}
       lx={lx}
       style={StyleSheet.flatten([styles.content, style])}
-      {...viewProps}
+      {...props}
     >
       {children}
     </Box>
@@ -215,7 +250,7 @@ export const ListItemContentRow = ({
   lx = {},
   style,
   ref,
-  ...viewProps
+  ...props
 }: ListItemContentRowProps & { ref?: Ref<View> }) => {
   const styles = useStyleSheet(
     (t) => ({
@@ -234,7 +269,7 @@ export const ListItemContentRow = ({
       ref={ref}
       lx={lx}
       style={StyleSheet.flatten([styles.row, style])}
-      {...viewProps}
+      {...props}
     >
       {children}
     </Box>
@@ -249,7 +284,7 @@ export const ListItemTitle = ({
   lx = {},
   style,
   ref,
-  ...textProps
+  ...props
 }: ListItemTitleProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemTitle',
@@ -283,7 +318,7 @@ export const ListItemTitle = ({
       numberOfLines={1}
       ellipsizeMode='tail'
       allowFontScaling={false}
-      {...textProps}
+      {...props}
     >
       {children}
     </Text>
@@ -299,7 +334,7 @@ export const ListItemDescription = ({
   lx = {},
   style,
   ref,
-  ...textProps
+  ...props
 }: ListItemDescriptionProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemDescription',
@@ -333,7 +368,7 @@ export const ListItemDescription = ({
       numberOfLines={1}
       ellipsizeMode='tail'
       allowFontScaling={false}
-      {...textProps}
+      {...props}
     >
       {children}
     </Text>
@@ -349,7 +384,7 @@ export const ListItemTrailing = ({
   lx = {},
   style,
   ref,
-  ...viewProps
+  ...props
 }: ListItemTrailingProps & { ref?: Ref<View> }) => {
   const styles = useStyleSheet(
     () => ({
@@ -367,7 +402,7 @@ export const ListItemTrailing = ({
         ref={ref}
         lx={lx}
         style={StyleSheet.flatten([styles.trailing, style])}
-        {...viewProps}
+        {...props}
       >
         {children}
       </Box>

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

@@ -1,16 +1,10 @@
+import type { Density } from '@ledgerhq/lumen-utils-shared';
 import {
   StyledPressableProps,
   StyledTextProps,
   StyledViewProps,
 } from '../../../styles';
 
-/**
- * Context value for passing state to sub-components
- */
-export type ListItemContextValue = {
-  disabled?: boolean;
-};
-
 /**
  * Props for the ListItem root component
  */
@@ -19,6 +13,11 @@ export type ListItemProps = {
    * The content of the list item (ListItemLeading, ListItemTrailing)
    */
   children: React.ReactNode;
+  /**
+   * The density of the list item.
+   * @default 'expanded'
+   */
+  density?: Density;
   /**
    * Whether the list item is disabled.
    */
@@ -27,7 +26,11 @@ export type ListItemProps = {
    * Callback function when the list item is pressed.
    */
   onPress?: StyledPressableProps['onPress'];
-} & Omit<StyledPressableProps, 'disabled' | 'children'>;
+  /**
+   * Callback function when the list item is long pressed.
+   */
+  onLongPress?: StyledPressableProps['onLongPress'];
+} & Omit<StyledViewProps, 'disabled' | 'children'>;
 
 /**
  * Props for the ListItemLeading component

package/{dist/module/lib/Components/TriggerButton/TriggerButton.mdx → src/lib/Components/MediaButton/MediaButton.mdx}

@@ -1,17 +1,17 @@
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
-import * as TriggerButtonStories from './TriggerButton.stories';
+import * as MediaButtonStories from './MediaButton.stories';
 
-<Meta title='Action/TriggerButton' of={TriggerButtonStories} />
+<Meta title='Action/MediaButton' of={MediaButtonStories} />
 
 <CustomTabs>
   <Tab label="Overview ">
   
-# TriggerButton
+# MediaButton
 
 ## 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.
+A specialized media 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).
 
@@ -19,18 +19,18 @@ A specialized trigger button designed exclusively for select and dropdown patter
 
 ## Properties
 
-<Canvas of={TriggerButtonStories.Base} />
-<Controls of={TriggerButtonStories.Base} />
+<Canvas of={MediaButtonStories.Base} />
+<Controls of={MediaButtonStories.Base} />
 
 ## Appearance
 
 Three appearances are available: `gray` (default), `transparent`, and `no-background`.
 
-<Canvas of={TriggerButtonStories.AppearanceShowcase} />
+<Canvas of={MediaButtonStories.AppearanceShowcase} />
 
 ## Sizes
 
-<Canvas of={TriggerButtonStories.SizeShowcase} />
+<Canvas of={MediaButtonStories.SizeShowcase} />
 
 ## Icon Types
 
@@ -39,6 +39,6 @@ The `iconType` prop controls the padding scheme based on the leading icon's shap
 - **`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} />
+<Canvas of={MediaButtonStories.IconTypeShowcase} />
 </Tab>
-</CustomTabs>
+</CustomTabs>

package/src/lib/Components/{TriggerButton/TriggerButton.stories.tsx → MediaButton/MediaButton.stories.tsx}

@@ -2,11 +2,11 @@ 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';
+import { MediaButton } from './MediaButton';
 
-const meta: Meta<typeof TriggerButton> = {
-  component: TriggerButton,
-  title: 'Action/TriggerButton',
+const meta: Meta<typeof MediaButton> = {
+  component: MediaButton,
+  title: 'Action/MediaButton',
   parameters: {
     layout: 'centered',
     docs: {
@@ -20,21 +20,21 @@ const meta: Meta<typeof TriggerButton> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof TriggerButton>;
+type Story = StoryObj<typeof MediaButton>;
 
 export const Base: Story = {
   args: {
     children: 'All accounts',
     appearance: 'gray',
   },
-  render: (args) => <TriggerButton {...args} />,
+  render: (args) => <MediaButton {...args} />,
   parameters: {
     docs: {
       source: {
         code: `
-<TriggerButton appearance="gray">
+<MediaButton appearance="gray">
   All accounts
-</TriggerButton>
+</MediaButton>
 `,
       },
     },
@@ -44,12 +44,12 @@ export const Base: Story = {
 export const SizeShowcase: Story = {
   render: () => (
     <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
-      <TriggerButton size='sm' icon={<Star size={20} />} iconType='flat'>
+      <MediaButton size='sm' icon={<Star size={20} />} iconType='flat'>
         Small
-      </TriggerButton>
-      <TriggerButton size='md' icon={<Star size={20} />} iconType='flat'>
+      </MediaButton>
+      <MediaButton size='md' icon={<Star size={20} />} iconType='flat'>
         Medium
-      </TriggerButton>
+      </MediaButton>
     </Box>
   ),
 };
@@ -58,42 +58,42 @@ export const IconTypeShowcase: Story = {
   render: () => (
     <Box lx={{ flexDirection: 'column', gap: 's16' }}>
       <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
-        <TriggerButton
+        <MediaButton
           icon={<Settings size={20} />}
           iconType='flat'
           appearance='gray'
         >
           Flat icon (md)
-        </TriggerButton>
-        <TriggerButton
+        </MediaButton>
+        <MediaButton
           icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />}
           iconType='rounded'
           appearance='gray'
         >
           Rounded icon (md)
-        </TriggerButton>
-        <TriggerButton appearance='gray'>No icon (md)</TriggerButton>
+        </MediaButton>
+        <MediaButton appearance='gray'>No icon (md)</MediaButton>
       </Box>
       <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
-        <TriggerButton
+        <MediaButton
           icon={<Settings size={20} />}
           iconType='flat'
           appearance='gray'
           size='sm'
         >
           Flat icon (sm)
-        </TriggerButton>
-        <TriggerButton
+        </MediaButton>
+        <MediaButton
           icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='24px' />}
           iconType='rounded'
           appearance='gray'
           size='sm'
         >
           Rounded icon (sm)
-        </TriggerButton>
-        <TriggerButton appearance='gray' size='sm'>
+        </MediaButton>
+        <MediaButton appearance='gray' size='sm'>
           No icon (sm)
-        </TriggerButton>
+        </MediaButton>
       </Box>
     </Box>
   ),
@@ -109,21 +109,21 @@ export const AppearanceShowcase: Story = {
             key={appearance}
             lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}
           >
-            <TriggerButton appearance={appearance}>{appearance}</TriggerButton>
-            <TriggerButton
+            <MediaButton appearance={appearance}>{appearance}</MediaButton>
+            <MediaButton
               appearance={appearance}
               icon={<Settings size={20} />}
               iconType='flat'
             >
               {appearance}
-            </TriggerButton>
-            <TriggerButton
+            </MediaButton>
+            <MediaButton
               appearance={appearance}
               icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />}
               iconType='rounded'
             >
               {appearance}
-            </TriggerButton>
+            </MediaButton>
           </Box>
         ))}
       </Box>