@ledgerhq/lumen-ui-rnative 0.1.11 → 0.1.13

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

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

@@ -0,0 +1,228 @@
+import { PropsWithChildren } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { ChevronDown } from '../../Symbols';
+import { Pressable } from '../Utility';
+import type { TriggerButtonProps } from './types';
+
+type Appearance = NonNullable<TriggerButtonProps['appearance']>;
+type Size = NonNullable<TriggerButtonProps['size']>;
+type IconType = 'flat' | 'rounded' | 'none';
+
+const useStyles = ({
+  appearance,
+  size,
+  disabled,
+  pressed,
+  iconType,
+}: {
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+  pressed: boolean;
+  iconType: IconType;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        gray: t.colors.bg.muted,
+        transparent: t.colors.bg.mutedTransparent,
+        'no-background': 'transparent',
+      };
+
+      const pressedBgColors: Record<Appearance, string> = {
+        gray: t.colors.bg.mutedPressed,
+        transparent: t.colors.bg.mutedTransparentPressed,
+        'no-background': t.colors.bg.baseTransparentPressed,
+      };
+
+      const textColor = disabled ? t.colors.text.disabled : t.colors.text.base;
+
+      type PaddingStyle = {
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+      };
+
+      const paddingMap: Record<Size, Record<IconType, PaddingStyle>> = {
+        md: {
+          flat: {
+            paddingTop: t.spacings.s12,
+            paddingBottom: t.spacings.s12,
+            paddingLeft: t.spacings.s16,
+            paddingRight: t.spacings.s16,
+          },
+          rounded: {
+            paddingTop: t.spacings.s8,
+            paddingBottom: t.spacings.s8,
+            paddingLeft: t.spacings.s8,
+            paddingRight: t.spacings.s16,
+          },
+          none: {
+            paddingTop: t.spacings.s14,
+            paddingBottom: t.spacings.s14,
+            paddingLeft: t.spacings.s16,
+            paddingRight: t.spacings.s16,
+          },
+        },
+        sm: {
+          flat: {
+            paddingTop: t.spacings.s10,
+            paddingBottom: t.spacings.s10,
+            paddingLeft: t.spacings.s12,
+            paddingRight: t.spacings.s12,
+          },
+          rounded: {
+            paddingTop: t.spacings.s8,
+            paddingBottom: t.spacings.s8,
+            paddingLeft: t.spacings.s8,
+            paddingRight: t.spacings.s10,
+          },
+          none: {
+            paddingTop: t.spacings.s10,
+            paddingBottom: t.spacings.s10,
+            paddingLeft: t.spacings.s12,
+            paddingRight: t.spacings.s12,
+          },
+        },
+      };
+
+      return {
+        container: StyleSheet.flatten([
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderRadius: t.borderRadius.full,
+            backgroundColor: bgColors[appearance],
+            gap: t.spacings.s8,
+          },
+          paddingMap[size][iconType],
+          pressed && { backgroundColor: pressedBgColors[appearance] },
+          disabled && { backgroundColor: t.colors.bg.disabled },
+          appearance === 'no-background' &&
+            disabled && { backgroundColor: 'transparent' },
+        ]),
+        label: StyleSheet.flatten([
+          t.typographies.body2SemiBold,
+          {
+            color: textColor,
+            textAlign: 'left',
+          },
+        ]),
+        labelWrapper: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: t.spacings.s2,
+        },
+        icon: {
+          flexShrink: 0,
+        },
+        chevron: {
+          flexShrink: 0,
+          color: textColor,
+        },
+      };
+    },
+    [appearance, size, disabled, pressed, iconType],
+  );
+};
+
+/**
+ * Trigger button for select/dropdown components. Displays a label with an optional
+ * leading icon and a trailing chevron indicator.
+ *
+ * This component is intended to be used exclusively as the trigger inside a Select or
+ * dropdown pattern. It should not be used as a standalone action button — use `Button`
+ * or `IconButton` instead.
+ *
+ * @see {@link https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680 Figma}
+ *
+ * @example
+ * import { TriggerButton } from '@ledgerhq/lumen-ui-rnative';
+ * import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <TriggerButton icon={<Settings size={20} />} iconType="flat">
+ *   Network
+ * </TriggerButton>
+ *
+ * <TriggerButton>All accounts</TriggerButton>
+ */
+export const TriggerButton = ({
+  lx,
+  style,
+  appearance = 'gray',
+  size = 'md',
+  disabled = false,
+  icon,
+  iconType = 'flat',
+  children: label,
+  ref,
+  ...props
+}: TriggerButtonProps) => {
+  const effectiveIconType: IconType = icon ? iconType : 'none';
+
+  return (
+    <Pressable
+      ref={ref}
+      lx={lx}
+      style={style}
+      disabled={disabled}
+      accessibilityRole='button'
+      accessibilityState={{ disabled }}
+      {...props}
+    >
+      {({ pressed }) => (
+        <TriggerButtonContent
+          appearance={appearance}
+          size={size}
+          disabled={disabled}
+          pressed={pressed}
+          iconType={effectiveIconType}
+          icon={icon}
+        >
+          {label}
+        </TriggerButtonContent>
+      )}
+    </Pressable>
+  );
+};
+
+type TriggerButtonContentProps = PropsWithChildren<{
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+  pressed: boolean;
+  iconType: IconType;
+  icon?: TriggerButtonProps['icon'];
+}>;
+
+const TriggerButtonContent = ({
+  appearance,
+  size,
+  disabled,
+  pressed,
+  iconType,
+  icon,
+  children,
+}: TriggerButtonContentProps) => {
+  const styles = useStyles({ appearance, size, disabled, pressed, iconType });
+
+  return (
+    <View style={styles.container} testID='button-trigger-content'>
+      {icon && <View style={styles.icon}>{icon}</View>}
+      <View style={styles.labelWrapper}>
+        <Text style={styles.label} numberOfLines={1} ellipsizeMode='tail'>
+          {children}
+        </Text>
+        <ChevronDown
+          size={20}
+          style={styles.chevron}
+          testID='button-trigger-chevron'
+        />
+      </View>
+    </View>
+  );
+};
+
+TriggerButton.displayName = 'TriggerButton';

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

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

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { StyledPressableProps } from '../../../styles';
+
+export type TriggerButtonProps = {
+  /**
+   * The visual style of the trigger button.
+   * @default 'gray'
+   */
+  appearance?: 'gray' | 'transparent' | 'no-background';
+  /**
+   * The size variant of the trigger button.
+   * @default 'md'
+   */
+  size?: 'sm' | 'md';
+  /**
+   * An optional pre-rendered icon element to display as leading content.
+   * Consumer is responsible for sizing the icon.
+   */
+  icon?: ReactNode;
+  /**
+   * Determines the padding scheme when an icon is present.
+   * - `'flat'`: Standard padding for line/interface icons.
+   * - `'rounded'`: Tighter left padding for circular icons with their own background (e.g., crypto icons).
+   *
+   * Only relevant when `icon` is provided.
+   * @default 'flat'
+   */
+  iconType?: 'flat' | 'rounded';
+  /**
+   * Whether the trigger button is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The label content of the trigger button.
+   */
+  children: ReactNode;
+} & Omit<StyledPressableProps, 'children'>;

package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.tsx

@@ -64,7 +64,7 @@ export const CenterPositionShowcase: Story = {
           { center: { x: 0.8, y: 0.2 }, label: '{x: 0.8, y: 0.2}' },
         ],
       },
-    ] as const;
+    ];
 
     return (
       <Box lx={{ flexDirection: 'column', gap: 's40' }}>

package/src/lib/Components/index.ts

@@ -5,6 +5,7 @@ export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
 export * from './Button';
+export * from './TriggerButton';
 export * from './Card';
 export * from './CardButton';
 export * from './ContentBanner';
@@ -15,6 +16,8 @@ export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';
 export * from './ListItem';
+export * from './MediaBanner';
+export * from './MediaCard';
 export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';

package/src/lib/Symbols/Icons/NanoGen5.tsx

@@ -0,0 +1,44 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * NanoGen5 icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { NanoGen5 } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <NanoGen5 />
+ *
+ * @example
+ * // With custom size and style
+ * <NanoGen5 size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={NanoGen5} size="md">
+ *   Click me
+ * </Button>
+ */
+export const NanoGen5 = createIcon(
+  'NanoGen5',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      fill='currentColor'
+      fillRule='evenodd'
+      d='M11 1.333c.92 0 1.667.747 1.667 1.667v.333c.184 0 .333.15.333.334v1.666a.334.334 0 0 1-.266.327l-.067.007V13c0 .92-.746 1.667-1.667 1.667H5c-.92 0-1.667-.746-1.667-1.667V3c0-.92.747-1.667 1.667-1.667zM9.667 12.667a.667.667 0 0 0 0 1.333H11a.667.667 0 0 0 0-1.333zM5 2.333A.667.667 0 0 0 4.333 3v8c0 .368.299.667.667.667h6a.667.667 0 0 0 .667-.667V3A.667.667 0 0 0 11 2.333z'
+      clipRule='evenodd'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/index.ts

@@ -164,6 +164,7 @@ export { Moon } from './Icons/Moon';
 export { MoreHorizontal } from './Icons/MoreHorizontal';
 export { MoreVertical } from './Icons/MoreVertical';
 export { Nano } from './Icons/Nano';
+export { NanoGen5 } from './Icons/NanoGen5';
 export { NetworkWarning } from './Icons/NetworkWarning';
 export { Nfc } from './Icons/Nfc';
 export { Nft } from './Icons/Nft';