@ledgerhq/lumen-ui-rnative 0.1.22 → 0.1.24

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

@@ -2,11 +2,12 @@ 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 { createRef } from 'react';
-import { View, ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { View } from 'react-native';
 
 import { Settings } from '../../Symbols';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
-import { TriggerButton } from './TriggerButton';
+import { MediaButton } from './MediaButton';
 
 const renderWithProvider = (component: React.ReactElement) => {
   return render(
@@ -16,11 +17,11 @@ const renderWithProvider = (component: React.ReactElement) => {
   );
 };
 
-describe('TriggerButton', () => {
+describe('MediaButton', () => {
   describe('Rendering', () => {
     it('should render with label text and correct accessibility role', () => {
       renderWithProvider(
-        <TriggerButton testID='trigger'>All accounts</TriggerButton>,
+        <MediaButton testID='trigger'>All accounts</MediaButton>,
       );
       const trigger = screen.getByTestId('trigger');
       expect(trigger).toBeTruthy();
@@ -29,7 +30,7 @@ describe('TriggerButton', () => {
     });
 
     it('should always render a chevron icon', () => {
-      renderWithProvider(<TriggerButton testID='trigger'>Label</TriggerButton>);
+      renderWithProvider(<MediaButton testID='trigger'>Label</MediaButton>);
       expect(screen.getByTestId('button-trigger-chevron')).toBeTruthy();
     });
 
@@ -37,9 +38,9 @@ describe('TriggerButton', () => {
       'should render without errors for appearance "%s"',
       (appearance) => {
         renderWithProvider(
-          <TriggerButton testID='trigger' appearance={appearance}>
+          <MediaButton testID='trigger' appearance={appearance}>
             Label
-          </TriggerButton>,
+          </MediaButton>,
         );
         expect(screen.getByTestId('trigger')).toBeTruthy();
       },
@@ -49,9 +50,9 @@ describe('TriggerButton', () => {
       'should render without errors for size "%s"',
       (size) => {
         renderWithProvider(
-          <TriggerButton testID='trigger' size={size}>
+          <MediaButton testID='trigger' size={size}>
             Label
-          </TriggerButton>,
+          </MediaButton>,
         );
         expect(screen.getByTestId('trigger')).toBeTruthy();
       },
@@ -61,13 +62,13 @@ describe('TriggerButton', () => {
   describe('Icons', () => {
     it('should render with a flat interface icon', () => {
       renderWithProvider(
-        <TriggerButton
+        <MediaButton
           testID='trigger'
           icon={<Settings size={20} testID='icon' />}
           iconType='flat'
         >
           Network
-        </TriggerButton>,
+        </MediaButton>,
       );
       expect(screen.getByTestId('icon')).toBeTruthy();
       expect(screen.getByText('Network')).toBeTruthy();
@@ -75,13 +76,13 @@ describe('TriggerButton', () => {
 
     it('should render with a rounded icon', () => {
       renderWithProvider(
-        <TriggerButton
+        <MediaButton
           testID='trigger'
           icon={<View testID='crypto-icon' />}
           iconType='rounded'
         >
           Bitcoin
-        </TriggerButton>,
+        </MediaButton>,
       );
       expect(screen.getByTestId('crypto-icon')).toBeTruthy();
       expect(screen.getByText('Bitcoin')).toBeTruthy();
@@ -91,9 +92,9 @@ describe('TriggerButton', () => {
   describe('States', () => {
     it('should be disabled when disabled prop is true', () => {
       renderWithProvider(
-        <TriggerButton testID='trigger' disabled>
+        <MediaButton testID='trigger' disabled>
           Label
-        </TriggerButton>,
+        </MediaButton>,
       );
       const trigger = screen.getByTestId('trigger');
       expect(trigger.props.accessibilityState.disabled).toBe(true);
@@ -104,9 +105,9 @@ describe('TriggerButton', () => {
     it('should call onPress when pressed', () => {
       const handlePress = jest.fn();
       renderWithProvider(
-        <TriggerButton testID='trigger' onPress={handlePress}>
+        <MediaButton testID='trigger' onPress={handlePress}>
           Press me
-        </TriggerButton>,
+        </MediaButton>,
       );
 
       fireEvent.press(screen.getByTestId('trigger'));
@@ -116,9 +117,9 @@ describe('TriggerButton', () => {
     it('should not call onPress when disabled', () => {
       const handlePress = jest.fn();
       renderWithProvider(
-        <TriggerButton testID='trigger' onPress={handlePress} disabled>
+        <MediaButton testID='trigger' onPress={handlePress} disabled>
           Disabled
-        </TriggerButton>,
+        </MediaButton>,
       );
 
       fireEvent.press(screen.getByTestId('trigger'));
@@ -130,9 +131,9 @@ describe('TriggerButton', () => {
     it('should forward ref', () => {
       const ref = createRef<View>();
       renderWithProvider(
-        <TriggerButton ref={ref} testID='trigger'>
+        <MediaButton ref={ref} testID='trigger'>
           Label
-        </TriggerButton>,
+        </MediaButton>,
       );
       expect(ref.current).toBeTruthy();
     });
@@ -142,13 +143,13 @@ describe('TriggerButton', () => {
     it('should apply custom style and lx props', () => {
       const customStyle: ViewStyle = { marginTop: 16 };
       renderWithProvider(
-        <TriggerButton
+        <MediaButton
           testID='trigger'
           style={customStyle}
           lx={{ padding: 's8' }}
         >
           Styled
-        </TriggerButton>,
+        </MediaButton>,
       );
       const trigger = screen.getByTestId('trigger');
       expect(trigger.props.style).toBeDefined();

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

@@ -1,12 +1,12 @@
-import { PropsWithChildren } from 'react';
+import type { 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';
+import type { MediaButtonProps } from './types';
 
-type Appearance = NonNullable<TriggerButtonProps['appearance']>;
-type Size = NonNullable<TriggerButtonProps['size']>;
+type Appearance = NonNullable<MediaButtonProps['appearance']>;
+type Size = NonNullable<MediaButtonProps['size']>;
 type IconType = 'flat' | 'rounded' | 'none';
 
 const useStyles = ({
@@ -129,7 +129,7 @@ const useStyles = ({
 };
 
 /**
- * Trigger button for select/dropdown components. Displays a label with an optional
+ * Media 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
@@ -139,16 +139,16 @@ const useStyles = ({
  * @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 { MediaButton } from '@ledgerhq/lumen-ui-rnative';
  * import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
- * <TriggerButton icon={<Settings size={20} />} iconType="flat">
+ * <MediaButton icon={<Settings size={20} />} iconType="flat">
  *   Network
- * </TriggerButton>
+ * </MediaButton>
  *
- * <TriggerButton>All accounts</TriggerButton>
+ * <MediaButton>All accounts</MediaButton>
  */
-export const TriggerButton = ({
+export const MediaButton = ({
   lx,
   style,
   appearance = 'gray',
@@ -156,10 +156,11 @@ export const TriggerButton = ({
   disabled = false,
   icon,
   iconType = 'flat',
+  hideChevron = false,
   children: label,
   ref,
   ...props
-}: TriggerButtonProps) => {
+}: MediaButtonProps) => {
   const effectiveIconType: IconType = icon ? iconType : 'none';
 
   return (
@@ -173,39 +174,42 @@ export const TriggerButton = ({
       {...props}
     >
       {({ pressed }) => (
-        <TriggerButtonContent
+        <MediaButtonContent
           appearance={appearance}
           size={size}
           disabled={disabled}
           pressed={pressed}
           iconType={effectiveIconType}
           icon={icon}
+          hideChevron={hideChevron}
         >
           {label}
-        </TriggerButtonContent>
+        </MediaButtonContent>
       )}
     </Pressable>
   );
 };
 
-type TriggerButtonContentProps = PropsWithChildren<{
+type MediaButtonContentProps = PropsWithChildren<{
   appearance: Appearance;
   size: Size;
   disabled: boolean;
   pressed: boolean;
   iconType: IconType;
-  icon?: TriggerButtonProps['icon'];
+  icon?: MediaButtonProps['icon'];
+  hideChevron: boolean;
 }>;
 
-const TriggerButtonContent = ({
+const MediaButtonContent = ({
   appearance,
   size,
   disabled,
   pressed,
   iconType,
   icon,
+  hideChevron,
   children,
-}: TriggerButtonContentProps) => {
+}: MediaButtonContentProps) => {
   const styles = useStyles({ appearance, size, disabled, pressed, iconType });
 
   return (
@@ -215,11 +219,13 @@ const TriggerButtonContent = ({
         <Text style={styles.label} numberOfLines={1} ellipsizeMode='tail'>
           {children}
         </Text>
-        <ChevronDown
-          size={20}
-          style={styles.chevron}
-          testID='button-trigger-chevron'
-        />
+        {!hideChevron && (
+          <ChevronDown
+            size={20}
+            style={styles.chevron}
+            testID='button-trigger-chevron'
+          />
+        )}
       </View>
     </View>
   );

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

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

package/src/lib/Components/{TriggerButton → MediaButton}/types.ts

@@ -1,14 +1,14 @@
-import { ReactNode } from 'react';
-import { StyledPressableProps } from '../../../styles';
+import type { ReactNode } from 'react';
+import type { StyledPressableProps } from '../../../styles';
 
-export type TriggerButtonProps = {
+export type MediaButtonProps = {
   /**
-   * The visual style of the trigger button.
+   * The visual style of the media button.
    * @default 'gray'
    */
   appearance?: 'gray' | 'transparent' | 'no-background';
   /**
-   * The size variant of the trigger button.
+   * The size variant of the media button.
    * @default 'md'
    */
   size?: 'sm' | 'md';
@@ -27,12 +27,17 @@ export type TriggerButtonProps = {
    */
   iconType?: 'flat' | 'rounded';
   /**
-   * Whether the trigger button is disabled.
+   * When true, hides the trailing chevron indicator.
+   * @default false
+   */
+  hideChevron?: boolean;
+  /**
+   * Whether the media button is disabled.
    * @default false
    */
   disabled?: boolean;
   /**
-   * The label content of the trigger button.
+   * The label content of the media button.
    */
   children: ReactNode;
 } & Omit<StyledPressableProps, 'children'>;

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

@@ -5,7 +5,7 @@ import { useStyleSheet } from '../../../styles';
 import { Close } from '../../Symbols';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { LinearGradient, Pressable, Text } from '../Utility';
-import { MediaCardProps, MediaCardTitleProps } from './types';
+import type { MediaCardProps, MediaCardTitleProps } from './types';
 
 const CARD_HEIGHT = 164;
 

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { StyledPressableProps, StyledTextProps } from '../../../styles';
+import type { StyledPressableProps, StyledTextProps } from '../../../styles';
 
 /**
  * Props for the MediaCard root component

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { Box } from '../Utility';
-import { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
+import type { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
 
 type BorderRadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'full';
 

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

@@ -1,4 +1,4 @@
-import { StyledViewProps } from '../../../styles';
+import type { StyledViewProps } from '../../../styles';
 
 export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
 

package/src/lib/Components/NavBar/CoinCapsule.tsx

@@ -1,6 +1,6 @@
 import { useStyleSheet } from '../../../styles';
 import { Box, Text } from '../Utility';
-import { CoinCapsuleProps } from './types';
+import type { CoinCapsuleProps } from './types';
 
 export function CoinCapsule({ ticker, icon }: CoinCapsuleProps) {
   const styles = useStyles();

package/src/lib/Components/NavBar/NavBar.tsx

@@ -1,5 +1,7 @@
-import { createSafeContext, Density } from '@ledgerhq/lumen-utils-shared';
-import { Children, isValidElement, ReactNode } from 'react';
+import type { Density } from '@ledgerhq/lumen-utils-shared';
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+import type { ReactNode } from 'react';
+import { Children, isValidElement } from 'react';
 import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -7,7 +9,7 @@ import { ArrowLeft } from '../../Symbols';
 import { IconButton } from '../IconButton';
 import { Box, Text } from '../Utility';
 import { CoinCapsule } from './CoinCapsule';
-import {
+import type {
   NavBarBackButtonProps,
   NavBarCoinCapsuleProps,
   NavBarContentProps,

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

@@ -1,7 +1,7 @@
-import { Density } from '@ledgerhq/lumen-utils-shared';
-import { ReactElement, ReactNode } from 'react';
-import { StyledViewProps } from '../../../styles';
-import { IconButtonProps } from '../IconButton';
+import type { Density } from '@ledgerhq/lumen-utils-shared';
+import type { ReactElement, ReactNode } from 'react';
+import type { StyledViewProps } from '../../../styles';
+import type { IconButtonProps } from '../IconButton';
 
 export type NavBarProps = {
   /**

package/src/lib/Components/OptionList/OptionList.figma.tsx

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import {
+  OptionList,
+  OptionListContent,
+  OptionListEmptyState,
+  OptionListItem,
+  OptionListItemContent,
+  OptionListItemDescription,
+  OptionListItemText,
+} from './OptionList';
+
+figma.connect(
+  OptionList,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=15941-6709',
+  {
+    imports: [
+      "import { OptionList, OptionListContent, OptionListItem, OptionListItemContent, OptionListItemText, OptionListItemDescription, OptionListEmptyState } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    example: () => (
+      <OptionList items={[]} value={''} onValueChange={() => {}}>
+        <OptionListContent
+          renderItem={(item) => (
+            <OptionListItem value={item.value}>
+              <OptionListItemContent>
+                <OptionListItemText>{item.label}</OptionListItemText>
+                <OptionListItemDescription>
+                  {item.description}
+                </OptionListItemDescription>
+              </OptionListItemContent>
+            </OptionListItem>
+          )}
+        />
+        <OptionListEmptyState title='No options available' />
+      </OptionList>
+    ),
+  },
+);