@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/src/lib/Components/Link/Link.mdx

@@ -3,7 +3,7 @@ import * as LinkStories from './Link.stories';
 import { Link } from './Link';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Components/Link' of={LinkStories} />
 
@@ -52,21 +52,11 @@ The `underline` prop controls text decoration independently from appearance (def
 
 Links come in two size options:
 
-- **sm**: Small size with **body-2-semi-bold** typography
-- **md** (default): Medium size with **body-1-semi-bold** typography
+- **sm**: Small size
+- **md** (default): Medium size
 
 <Canvas of={LinkStories.SizesShowcase} />
 
-> **⚠️ Important**: Icon sizes are automatically managed by the Link component based on the selected size. Never override the icon size using className or style props, as this will break the visual consistency of the design system. The Link component ensures proper scaling and alignment of icons across all sizes.
->
-> ```tsx
-> // ✅ Correct: Let Link handle icon sizing
-> <Link size="sm" icon={ArrowRight} href="https://example.com">Continue</Link>
->
-> // ❌ Wrong: Don't override icon size [it's not gonna work even if you try]
-> <Link size="sm" icon={ArrowRight} className="w-6 h-6" href="https://example.com">Continue</Link>
-> ```
-
 ### States
 
 Links respond to press interactions with visual feedback:
@@ -108,12 +98,12 @@ function MyComponent() {
 
 ### Custom Styling
 
-While the component comes with predefined styles, you can extend them using NativeWind classes:
+While the component comes with predefined styles, you can extend them using the `lx` prop for layout purposes:
 
 ```tsx
 <Link
   href='https://example.com'
-  className='mt-4' // Custom margin top
+  lx={{ marginTop: 's4' }}
 >
   Custom Link
 </Link>
@@ -202,7 +192,7 @@ The Link component is built on React Native's `Pressable` and accepts all its pr
 
 The following guidelines are based on our design system principles. These decisions were made to ensure consistency, maintainability, and proper implementation of our design system principles.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Keep underline for base appearance'
@@ -264,37 +254,6 @@ import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```
 
     </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use underline prop to control text decoration'
-      description='Use the underline prop instead of className for text decoration'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Link underline={false} href='https://example.com'>
-  Link without underline
-</Link>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use className for underline"
-      description='Avoid using className to control underline decoration'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Link className='underline' href='https://example.com'>
-  Link without underline
-</Link>
-```
-
-    </DontBlockItem>
-
   </DoVsDontRow>
 
   <DoVsDontRow>
@@ -328,7 +287,7 @@ import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 ## Platform Considerations
 

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { View, Text } from 'react-native';
 import { Settings, Information, ArrowRight } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { Link } from './Link';
 
 const meta: Meta<typeof Link> = {
@@ -160,7 +160,7 @@ export const AppearanceShowcase: Story = {
     ];
 
     return (
-      <View className='flex-row gap-32 p-8'>
+      <Box lx={{ flexDirection: 'row', gap: 's32', padding: 's8' }}>
         {appearances.map(({ name, appearance }) => (
           <Link
             key={appearance}
@@ -173,14 +173,14 @@ export const AppearanceShowcase: Story = {
             {name}
           </Link>
         ))}
-      </View>
+      </Box>
     );
   },
 };
 
 export const UnderlineShowcase: Story = {
   render: () => (
-    <View className='flex-col gap-16 p-8'>
+    <Box lx={{ flexDirection: 'column', gap: 's16', padding: 's8' }}>
       <Link appearance='accent' size='md' href='https://ledger.com'>
         With underline
       </Link>
@@ -192,14 +192,21 @@ export const UnderlineShowcase: Story = {
       >
         Without underline
       </Link>
-    </View>
+    </Box>
   ),
 };
 
 export const SizesShowcase: Story = {
   render: () => (
-    <View className='flex-col gap-16'>
-      <View className='flex-row items-center gap-32 p-8'>
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+      <Box
+        lx={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 's32',
+          padding: 's8',
+        }}
+      >
         <Link
           appearance='base'
           size='sm'
@@ -218,8 +225,15 @@ export const SizesShowcase: Story = {
         >
           Medium
         </Link>
-      </View>
-      <View className='flex-row items-center gap-32 p-8'>
+      </Box>
+      <Box
+        lx={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 's32',
+          padding: 's8',
+        }}
+      >
         <Link
           appearance='accent'
           size='sm'
@@ -238,27 +252,44 @@ export const SizesShowcase: Story = {
         >
           Medium Accent
         </Link>
-      </View>
-    </View>
+      </Box>
+    </Box>
   ),
 };
 
 export const StatesShowcase: Story = {
   render: () => (
-    <View className='flex-row items-center gap-16 p-8'>
+    <Box
+      lx={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 's16',
+        padding: 's8',
+      }}
+    >
       <Link appearance='base' href='https://ledger.com'>
         Default
       </Link>
       <Link appearance='accent' href='https://ledger.com' icon={ArrowRight}>
         With Icon
       </Link>
-    </View>
+    </Box>
   ),
 };
 
 export const ResponsiveLayout: Story = {
   render: () => (
-    <View className='w-256 flex-col gap-8 rounded-sm bg-muted p-8'>
+    <Box
+      lx={{
+        width: 's256',
+        flexDirection: 'column',
+        gap: 's8',
+        borderRadius: 'sm',
+        borderColor: 'mutedSubtle',
+        borderWidth: 's1',
+        padding: 's8',
+      }}
+    >
       <Link underline href='https://ledger.com'>
         Short Link
       </Link>
@@ -274,7 +305,7 @@ export const ResponsiveLayout: Story = {
       >
         Base with long text that is cut off
       </Link>
-    </View>
+    </Box>
   ),
 };
 
@@ -286,7 +317,7 @@ export const WithCustomNavigation: Story = {
     };
 
     return (
-      <View className='flex-col gap-16 p-8'>
+      <Box lx={{ flexDirection: 'column', gap: 's16', padding: 's8' }}>
         <Link appearance='base' size='md' onPress={handlePress}>
           Navigate to Dashboard
         </Link>
@@ -298,7 +329,7 @@ export const WithCustomNavigation: Story = {
         >
           Continue to Next Screen
         </Link>
-      </View>
+      </Box>
     );
   },
   parameters: {
@@ -339,8 +370,8 @@ function MyComponent() {
 
 export const InTextUsage: Story = {
   render: () => (
-    <View className='flex-col gap-32 p-8'>
-      <Text className='text-base body-2'>
+    <Box lx={{ flexDirection: 'column', gap: 's32', padding: 's8' }}>
+      <Text typography='body2' lx={{ color: 'base' }}>
         By continuing, you agree to our{' '}
         <Link appearance='base' size='sm' href='https://ledger.com/terms'>
           Terms & Conditions
@@ -352,14 +383,14 @@ export const InTextUsage: Story = {
         .
       </Text>
 
-      <Text className='text-interactive body-1-semi-bold'>
+      <Text typography='body1SemiBold' lx={{ color: 'interactive' }}>
         Need help?{' '}
         <Link appearance='accent' size='md' href='https://ledger.com/support'>
           Contact Support
         </Link>
       </Text>
 
-      <Text className='text-base body-1-semi-bold'>
+      <Text typography='body1SemiBold' lx={{ color: 'base' }}>
         Already have an account?{' '}
         <Link
           appearance='accent'
@@ -370,14 +401,14 @@ export const InTextUsage: Story = {
           Sign in
         </Link>
       </Text>
-    </View>
+    </Box>
   ),
   parameters: {
     docs: {
       source: {
         code: `
 // Links within text content
-<Text className='text-base body-2'>
+<Text typography='body2' lx={{ color: 'base' }}>
   By continuing, you agree to our{' '}
   <Link appearance='base' size='sm' href='https://ledger.com/terms'>
     Terms & Conditions
@@ -389,7 +420,7 @@ export const InTextUsage: Story = {
 </Text>
 
 // Heading with inline link
-<Text className='text-interactive body-1-semi-bold'>
+<Text typography='body1SemiBold' lx={{ color: 'interactive' }}>
   Need help?{' '}
   <Link appearance='accent' size='md' href='https://ledger.com/support'>
     Contact Support
@@ -397,7 +428,7 @@ export const InTextUsage: Story = {
 </Text>
 
 // Bold text with ununderlined link
-<Text className='text-base body-1-semi-bold'>
+<Text typography='body1SemiBold' lx={{ color: 'base' }}>
   Already have an account?{' '}
   <Link
     appearance='accent'

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