@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

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

@@ -1,81 +1,171 @@
 import { describe, it, expect, jest, beforeEach } from '@jest/globals';
-import { render, fireEvent } from '@testing-library/react-native';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, fireEvent, screen } from '@testing-library/react-native';
+import React from 'react';
 import { Linking } from 'react-native';
+
+import { Information } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Link } from './Link';
+import { LinkProps } from './types';
 
 jest.mock('react-native/Libraries/Linking/Linking', () => ({
   openURL: jest.fn(() => Promise.resolve()),
 }));
 
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+const typographies = ledgerLiveThemes.dark.typographies.sm;
+const { colors, spacings } = ledgerLiveThemes.dark;
+
 describe('Link Component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('should render correctly with children text', () => {
-    const { getByText } = render(
-      <Link href='https://example.com'>Click me</Link>,
-    );
-
-    expect(getByText('Click me')).toBeTruthy();
+  describe('Rendering', () => {
+    it('should render children and have link accessibility role', () => {
+      renderWithProvider(
+        <Link href='https://example.com' testID='link'>
+          Click me
+        </Link>,
+      );
+
+      expect(screen.getByText('Click me').props.children).toBe('Click me');
+      expect(screen.getByTestId('link').props.accessibilityRole).toBe('link');
+    });
+
+    it('should truncate text to single line', () => {
+      renderWithProvider(<Link href='https://example.com'>Link</Link>);
+      expect(screen.getByText('Link').props.numberOfLines).toBe(1);
+    });
   });
 
-  it('should call Linking.openURL with href when pressed', async () => {
-    const { getByText } = render(
-      <Link href='https://example.com'>Click me</Link>,
+  describe('Appearances', () => {
+    it.each([
+      ['base', colors.text.base],
+      ['accent', colors.text.interactive],
+    ])(
+      'should apply %s appearance with correct text color',
+      (appearance, expectedColor) => {
+        renderWithProvider(
+          <Link
+            href='https://example.com'
+            appearance={appearance as LinkProps['appearance']}
+          >
+            Link
+          </Link>,
+        );
+        expect(screen.getByText('Link').props.style.color).toBe(expectedColor);
+      },
     );
-
-    fireEvent.press(getByText('Click me'));
-
-    expect(Linking.openURL).toHaveBeenCalledWith('https://example.com');
-    expect(Linking.openURL).toHaveBeenCalledTimes(1);
   });
 
-  it('should call custom onPress handler instead of Linking.openURL when provided', () => {
-    const onPress = jest.fn();
-    const { getByText } = render(
-      <Link href='https://example.com' onPress={onPress}>
-        Custom Press
-      </Link>,
+  describe('Sizes', () => {
+    it.each([
+      ['sm', typographies.body2SemiBold, spacings.s4],
+      ['md', typographies.body1SemiBold, spacings.s8],
+    ])(
+      'should apply %s size with correct typography and gap',
+      (size, typography, expectedGap) => {
+        renderWithProvider(
+          <Link href='https://example.com' size={size as LinkProps['size']}>
+            Link
+          </Link>,
+        );
+
+        const textStyle = screen.getByText('Link').props.style;
+        expect(textStyle.fontSize).toBe(typography.fontSize);
+        expect(textStyle.fontWeight).toBe(typography.fontWeight);
+        expect(screen.getByTestId('link-content').props.style.gap).toBe(
+          expectedGap,
+        );
+      },
     );
-
-    fireEvent.press(getByText('Custom Press'));
-
-    expect(onPress).toHaveBeenCalledTimes(1);
-    expect(Linking.openURL).not.toHaveBeenCalled();
   });
 
-  it('should call onPress handler when no href is provided', () => {
-    const onPress = jest.fn();
-    const { getByText } = render(<Link onPress={onPress}>No Href Link</Link>);
-
-    fireEvent.press(getByText('No Href Link'));
-
-    expect(onPress).toHaveBeenCalledTimes(1);
-    expect(Linking.openURL).not.toHaveBeenCalled();
-  });
-
-  it('should have link accessibility role', () => {
-    const { getByTestId } = render(
-      <Link href='https://example.com' testID='accessible-link'>
-        Accessible Link
-      </Link>,
+  describe('Underline', () => {
+    it.each([
+      [true, 'underline'],
+      [false, 'none'],
+    ])(
+      'should have textDecorationLine=%s when underline=%s',
+      (underline, expectedDecoration) => {
+        renderWithProvider(
+          <Link href='https://example.com' underline={underline}>
+            Link
+          </Link>,
+        );
+        expect(screen.getByText('Link').props.style.textDecorationLine).toBe(
+          expectedDecoration,
+        );
+      },
     );
+  });
 
-    const linkElement = getByTestId('accessible-link');
-    expect(linkElement.props.accessibilityRole).toBe('link');
+  describe('Icons', () => {
+    it('should render leading icon when provided', () => {
+      renderWithProvider(
+        <Link href='https://example.com' icon={Information}>
+          With Icon
+        </Link>,
+      );
+
+      const children = React.Children.toArray(
+        screen.getByTestId('link-content').props.children,
+      );
+      expect(children.length).toBe(2); // icon + text wrapper
+    });
+
+    it('should render external link icon when isExternal is true', () => {
+      renderWithProvider(
+        <Link href='https://example.com' isExternal>
+          External
+        </Link>,
+      );
+
+      const children = React.Children.toArray(
+        screen.getByTestId('link-content').props.children,
+      );
+      expect(children.length).toBe(2); // text wrapper + external icon
+    });
   });
 
-  it('should handle different URL protocols', () => {
-    const { getByText, rerender } = render(
-      <Link href='mailto:test@example.com'>Email Link</Link>,
+  describe('Interactions', () => {
+    it.each([
+      ['https://example.com', 'https://example.com'],
+      ['mailto:test@example.com', 'mailto:test@example.com'],
+      ['tel:+1234567890', 'tel:+1234567890'],
+    ])(
+      'should call Linking.openURL with %s when pressed',
+      (href, expectedUrl) => {
+        renderWithProvider(<Link href={href}>Link</Link>);
+
+        fireEvent.press(screen.getByText('Link'));
+
+        expect(Linking.openURL).toHaveBeenCalledTimes(1);
+        expect(Linking.openURL).toHaveBeenCalledWith(expectedUrl);
+      },
     );
 
-    fireEvent.press(getByText('Email Link'));
-    expect(Linking.openURL).toHaveBeenCalledWith('mailto:test@example.com');
+    it('should call custom onPress instead of Linking.openURL', () => {
+      const onPress = jest.fn();
+      renderWithProvider(
+        <Link href='https://example.com' onPress={onPress}>
+          Custom
+        </Link>,
+      );
+
+      fireEvent.press(screen.getByText('Custom'));
 
-    rerender(<Link href='tel:+1234567890'>Phone Link</Link>);
-    fireEvent.press(getByText('Phone Link'));
-    expect(Linking.openURL).toHaveBeenCalledWith('tel:+1234567890');
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(Linking.openURL).not.toHaveBeenCalled();
+    });
   });
 });

package/src/lib/Components/Link/Link.tsx

@@ -1,97 +1,70 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Linking, Pressable, PressableProps, Text, View } from 'react-native';
+import { Linking, Text, View } from 'react-native';
+import { LumenStyleSheet, mergeStyles } from '../../../styles';
 import { ExternalLink } from '../../Symbols';
 import { IconSize } from '../Icon';
+import { Pressable } from '../Utility';
+import { LinkProps } from './types';
 
-const linkTextVariants = cva('', {
-  variants: {
-    appearance: {
-      base: '',
-      accent: '',
-    },
-    underline: {
-      true: 'underline underline-offset-2',
-      false: '',
-    },
-    size: {
-      sm: 'body-2-semi-bold',
-      md: 'body-1-semi-bold',
-    },
-    pressed: {
-      true: '',
-      false: '',
-    },
-  },
-  compoundVariants: [
-    {
-      appearance: 'base',
-      pressed: false,
-      className: 'text-base',
-    },
-    {
-      appearance: 'base',
-      pressed: true,
-      className: 'text-base-pressed',
-    },
-    {
-      appearance: 'accent',
-      pressed: false,
-      className: 'text-interactive',
-    },
-    {
-      appearance: 'accent',
-      pressed: true,
-      className: 'text-interactive-pressed',
-    },
-  ],
-  defaultVariants: {
-    appearance: 'base',
-    size: 'md',
-    underline: true,
-    pressed: false,
-  },
-});
+const iconSizeMap: Record<Size, IconSize> = {
+  sm: 16,
+  md: 20,
+};
 
-export type LinkProps = Omit<PressableProps, 'onPress' | 'children'> & {
-  /**
-   * The visual style of the link.
-   * @default base
-   */
-  appearance?: 'base' | 'accent';
-  /**
-   * The size variant of the link.
-   * @default md
-   */
-  size?: 'sm' | 'md';
-  /**
-   * Whether to underline the link text.
-   * @default true
-   */
-  underline?: boolean;
-  /**
-   * An optional icon component to render inside the link.
-   * The icon styles are defined by the link. Please do not override them.
-   */
-  icon?: React.ComponentType<{ size?: IconSize; className?: string }>;
-  /**
-   * If true, displays an external link icon next to the link text.
-   * @default false
-   */
-  isExternal?: boolean;
-  /**
-   * The URL to navigate to
-   */
-  href?: string;
-  /**
-   * Custom press handler (overrides default href navigation)
-   */
-  onPress?: () => void;
-  /**
-   * The link's content, typically text.
-   */
-  children: React.ReactNode;
+type Appearance = NonNullable<LinkProps['appearance']>;
+type Size = NonNullable<LinkProps['size']>;
+
+type StyleParams = {
+  appearance: Appearance;
+  size: Size;
+  underline: boolean;
+  pressed: boolean;
+};
+
+const useStyles = ({ appearance, size, underline, pressed }: StyleParams) => {
+  return LumenStyleSheet.useCreate(
+    (t) => {
+      const textColors: Record<Appearance, string> = {
+        base: t.colors.text.base,
+        accent: t.colors.text.interactive,
+      };
+
+      const pressedTextColors: Record<Appearance, string> = {
+        base: t.colors.text.basePressed,
+        accent: t.colors.text.interactivePressed,
+      };
+
+      const typography =
+        size === 'sm'
+          ? t.typographies.body2SemiBold
+          : t.typographies.body1SemiBold;
+      const gap = size === 'sm' ? t.spacings.s4 : t.spacings.s8;
+
+      return {
+        container: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap,
+        },
+        textWrapper: {
+          flexShrink: 1,
+        },
+        text: mergeStyles(typography, {
+          color: pressed
+            ? pressedTextColors[appearance]
+            : textColors[appearance],
+          textDecorationLine: underline ? 'underline' : 'none',
+        }),
+        icon: {
+          flexShrink: 0,
+          color: pressed
+            ? pressedTextColors[appearance]
+            : textColors[appearance],
+        },
+      };
+    },
+    [appearance, size, underline, pressed],
+  );
 };
 
 /**
@@ -101,7 +74,7 @@ export type LinkProps = Omit<PressableProps, 'onPress' | 'children'> & {
  * @see {@link https://ldls.vercel.app/?path=/docs/components-link-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/components-link-implementation--docs#dos-and-donts Guidelines}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the link's core appearance (colors, padding, etc). Use the `appearance` and `underline` props instead.
  *
  * @example
@@ -135,10 +108,11 @@ export const Link = React.forwardRef<
 >(
   (
     {
-      className,
+      lx,
+      style,
       children,
-      appearance,
-      size,
+      appearance = 'base',
+      size = 'md',
       underline = true,
       icon,
       isExternal = false,
@@ -148,14 +122,6 @@ export const Link = React.forwardRef<
     },
     ref,
   ) => {
-    const iconSizeMap: { [key: string]: IconSize } = {
-      sm: 16,
-      md: 20,
-    };
-
-    const calculatedIconSize = size ? iconSizeMap[size] : 20;
-    const IconComponent = icon;
-
     const handlePress = async () => {
       if (onPress) {
         onPress();
@@ -167,64 +133,76 @@ export const Link = React.forwardRef<
     return (
       <Pressable
         ref={ref}
-        className={cn('shrink', className)}
+        lx={lx}
+        style={[style, { flexShrink: 1 }]}
         onPress={handlePress}
         accessibilityRole='link'
         {...props}
       >
         {({ pressed }) => (
-          <View
-            className={cn(
-              'flex-row items-center gap-8',
-              size === 'sm' && 'gap-4',
-            )}
+          <LinkContent
+            appearance={appearance}
+            size={size}
+            underline={underline}
+            pressed={pressed}
+            icon={icon}
+            isExternal={isExternal}
           >
-            {IconComponent && (
-              <IconComponent
-                className={cn(
-                  'flex-shrink-0',
-                  linkTextVariants({
-                    appearance,
-                    size,
-                    underline,
-                    pressed,
-                  }),
-                )}
-                size={calculatedIconSize}
-              />
-            )}
-            <View className='shrink'>
-              <Text
-                numberOfLines={1}
-                className={linkTextVariants({
-                  appearance,
-                  size,
-                  underline,
-                  pressed,
-                })}
-              >
-                {children}
-              </Text>
-            </View>
-            {isExternal && (
-              <ExternalLink
-                size={calculatedIconSize}
-                className={cn(
-                  'flex-shrink-0',
-                  linkTextVariants({
-                    appearance,
-                    size,
-                    underline,
-                    pressed,
-                  }),
-                )}
-                accessible={false}
-              />
-            )}
-          </View>
+            {children}
+          </LinkContent>
         )}
       </Pressable>
     );
   },
 );
+
+type LinkContentProps = {
+  appearance: Appearance;
+  size: Size;
+  underline: boolean;
+  pressed: boolean;
+  icon: LinkProps['icon'];
+  isExternal: boolean;
+  children: React.ReactNode;
+};
+
+const LinkContent: React.FC<LinkContentProps> = ({
+  appearance,
+  size,
+  underline,
+  pressed,
+  icon,
+  isExternal,
+  children,
+}) => {
+  const calculatedIconSize = iconSizeMap[size];
+  const IconComponent = icon;
+  const styles = useStyles({
+    appearance,
+    size,
+    underline,
+    pressed,
+  });
+
+  return (
+    <View style={styles.container} testID='link-content'>
+      {IconComponent && (
+        <IconComponent size={calculatedIconSize} style={styles.icon} />
+      )}
+      <View style={styles.textWrapper}>
+        <Text style={styles.text} numberOfLines={1}>
+          {children}
+        </Text>
+      </View>
+      {isExternal && (
+        <ExternalLink
+          size={calculatedIconSize}
+          style={styles.icon}
+          accessible={false}
+        />
+      )}
+    </View>
+  );
+};
+
 Link.displayName = 'Link';

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

@@ -1 +1,2 @@
 export * from './Link';
+export * from './types';

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

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+
+export type LinkProps = {
+  /**
+   * The visual style of the link.
+   * @default base
+   */
+  appearance?: 'base' | 'accent';
+  /**
+   * The size variant of the link.
+   * @default md
+   */
+  size?: 'sm' | 'md';
+  /**
+   * Whether to underline the link text.
+   * @default true
+   */
+  underline?: boolean;
+  /**
+   * An optional icon component to render inside the link.
+   * The icon styles are defined by the link. Please do not override them.
+   */
+  icon?: React.ComponentType<{
+    size?: IconSize;
+    style?: StyleProp<ViewStyle>;
+  }>;
+  /**
+   * If true, displays an external link icon next to the link text.
+   * @default false
+   */
+  isExternal?: boolean;
+  /**
+   * The URL to navigate to
+   */
+  href?: string;
+  /**
+   * Custom press handler (overrides default href navigation)
+   */
+  onPress?: () => void;
+} & PropsWithChildren &
+  Omit<StyledPressableProps, 'onPress' | 'children'>;

package/src/lib/Components/Search/Search.mdx

@@ -18,7 +18,10 @@ The Search component is a specialized input field designed specifically for sear
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=2248-3468&m=dev).
 
-<Canvas of={SearchStories.WebPreviewWarning} />
+> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
+
+<Canvas of={SearchStories.Base} />
+<Controls of={SearchStories.Base} />
 
 ## Anatomy
 
@@ -36,24 +39,34 @@ Uses placeholder text instead of floating labels for better search UX. Styled wi
 
 A clear button (×) appears **automatically** when input has content.
 
+<Canvas of={SearchStories.WithContent} />
+
 > **Note:** The clear button only clears the input content/value. It does not clear error states - you must handle error state clearing separately in your component logic.
 
 #### **Hiding the Clear Button**
 
 Use `hideClearButton` to prevent the clear button from appearing.
 
+<Canvas of={SearchStories.WithHiddenClearButton} />
+
 #### **Extending the Clear Behavior**
 
 Use `onClear` to extend the default clear behavior with custom logic.
 
+<Canvas of={SearchStories.WithClearCallback} />
+
 ### Disabled State
 
 The search input can be disabled using the `editable` prop set to `false`.
 
+<Canvas of={SearchStories.DisabledSearch} />
+
 ### Error State
 
 The search component supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
 
+<Canvas of={SearchStories.WithError} />
+
 The error message will be automatically:
 
 - Connected to the input