@ledgerhq/lumen-ui-rnative 0.0.42

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

@@ -0,0 +1,415 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { View, Text } from 'react-native';
+import { Settings, Information, ArrowRight } from '../../Symbols';
+import { Link } from './Link';
+
+const meta: Meta<typeof Link> = {
+  component: Link,
+  title: 'Action/Link',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: ['base', 'accent'],
+      description: 'The visual style appearance of the link',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'The size of the link',
+    },
+    underline: {
+      control: 'boolean',
+      description: 'Whether to underline the link text',
+    },
+    icon: {
+      control: 'select',
+      description: 'Optional icon component to display',
+      options: ['None', 'Information', 'Settings', 'ArrowRight'],
+      mapping: {
+        None: undefined,
+        Information: Information,
+        Settings: Settings,
+        ArrowRight: ArrowRight,
+      },
+    },
+    isExternal: {
+      control: 'boolean',
+      description: 'Whether to display external link icon',
+    },
+    children: {
+      control: 'text',
+      description: 'The content to be displayed inside the link',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Link>;
+type LinkAppearance = 'base' | 'accent';
+
+export const Base: Story = {
+  args: {
+    appearance: 'base',
+    size: 'md',
+    children: 'Base Link',
+    href: 'https://ledger.com',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Link appearance="base" href="https://ledger.com">
+  Base Link
+</Link>
+`,
+      },
+    },
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    appearance: 'base',
+    children: 'Link with Icon',
+    icon: Information,
+    href: 'https://ledger.com',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Link
+  appearance="base"
+  icon={Information}
+  href="https://ledger.com"
+>
+  Link with Icon
+</Link>
+`,
+      },
+    },
+  },
+};
+
+export const External: Story = {
+  args: {
+    appearance: 'base',
+    children: 'External Link',
+    isExternal: true,
+    href: 'https://ledger.com',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Link
+  appearance="base"
+  isExternal
+  href="https://ledger.com"
+>
+  External Link
+</Link>
+`,
+      },
+    },
+  },
+};
+
+export const ExternalLinkWithIcon: Story = {
+  args: {
+    appearance: 'base',
+    size: 'md',
+    children: 'External Link with Icon',
+    icon: Information,
+    isExternal: true,
+    href: 'https://ledger.com',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Link
+  appearance="base"
+  size="md"
+  icon={Information}
+  isExternal
+  href="https://ledger.com"
+>
+  External Link with Icon
+</Link>
+`,
+      },
+    },
+  },
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => {
+    const appearances: Array<{ name: string; appearance: LinkAppearance }> = [
+      { name: 'Base', appearance: 'base' },
+      { name: 'Accent', appearance: 'accent' },
+    ];
+
+    return (
+      <View className='flex-row gap-32 p-8'>
+        {appearances.map(({ name, appearance }) => (
+          <Link
+            key={appearance}
+            size='md'
+            appearance={appearance}
+            href='https://ledger.com'
+            icon={Information}
+            isExternal
+          >
+            {name}
+          </Link>
+        ))}
+      </View>
+    );
+  },
+};
+
+export const UnderlineShowcase: Story = {
+  render: () => (
+    <View className='flex-col gap-16 p-8'>
+      <Link appearance='accent' size='md' href='https://ledger.com'>
+        With underline
+      </Link>
+      <Link
+        appearance='accent'
+        size='md'
+        underline={false}
+        href='https://ledger.com'
+      >
+        Without underline
+      </Link>
+    </View>
+  ),
+};
+
+export const SizesShowcase: Story = {
+  render: () => (
+    <View className='flex-col gap-16'>
+      <View className='flex-row items-center gap-32 p-8'>
+        <Link
+          appearance='base'
+          size='sm'
+          href='https://ledger.com'
+          icon={Information}
+          isExternal
+        >
+          Small
+        </Link>
+        <Link
+          appearance='base'
+          size='md'
+          href='https://ledger.com'
+          icon={Information}
+          isExternal
+        >
+          Medium
+        </Link>
+      </View>
+      <View className='flex-row items-center gap-32 p-8'>
+        <Link
+          appearance='accent'
+          size='sm'
+          href='https://ledger.com'
+          icon={Information}
+          isExternal
+        >
+          Small Accent
+        </Link>
+        <Link
+          appearance='accent'
+          size='md'
+          href='https://ledger.com'
+          icon={Information}
+          isExternal
+        >
+          Medium Accent
+        </Link>
+      </View>
+    </View>
+  ),
+};
+
+export const StatesShowcase: Story = {
+  render: () => (
+    <View className='flex-row items-center gap-16 p-8'>
+      <Link appearance='base' href='https://ledger.com'>
+        Default
+      </Link>
+      <Link appearance='accent' href='https://ledger.com' icon={ArrowRight}>
+        With Icon
+      </Link>
+    </View>
+  ),
+};
+
+export const ResponsiveLayout: Story = {
+  render: () => (
+    <View className='w-256 flex-col gap-8 rounded-sm bg-muted p-8'>
+      <Link underline href='https://ledger.com'>
+        Short Link
+      </Link>
+      <Link appearance='base' href='https://ledger.com'>
+        This is a longer link text that will be truncated with ellipsis when it
+        exceeds the container width
+      </Link>
+      <Link
+        appearance='base'
+        href='https://ledger.com'
+        icon={Information}
+        isExternal
+      >
+        Base with long text that is cut off
+      </Link>
+    </View>
+  ),
+};
+
+export const WithCustomNavigation: Story = {
+  render: () => {
+    const handlePress = () => {
+      console.log('Custom navigation triggered');
+      // In a real app: navigation.navigate('Dashboard')
+    };
+
+    return (
+      <View className='flex-col gap-16 p-8'>
+        <Link appearance='base' size='md' onPress={handlePress}>
+          Navigate to Dashboard
+        </Link>
+        <Link
+          appearance='accent'
+          size='md'
+          icon={ArrowRight}
+          onPress={handlePress}
+        >
+          Continue to Next Screen
+        </Link>
+      </View>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+import { useNavigation } from '@react-navigation/native';
+
+function MyComponent() {
+  const navigation = useNavigation();
+  
+  return (
+    <>
+      <Link
+        appearance="base"
+        size="md"
+        onPress={() => navigation.navigate('Dashboard')}
+      >
+        Navigate to Dashboard
+      </Link>
+      
+      <Link
+        appearance="accent"
+        size="md"
+        icon={ArrowRight}
+        onPress={() => navigation.navigate('Next')}
+      >
+        Continue to Next Screen
+      </Link>
+    </>
+  );
+}
+`,
+      },
+    },
+  },
+};
+
+export const InTextUsage: Story = {
+  render: () => (
+    <View className='flex-col gap-32 p-8'>
+      <Text className='text-base body-2'>
+        By continuing, you agree to our{' '}
+        <Link appearance='base' size='sm' href='https://ledger.com/terms'>
+          Terms & Conditions
+        </Link>{' '}
+        and{' '}
+        <Link appearance='base' size='sm' href='https://ledger.com/privacy'>
+          Privacy Policy
+        </Link>
+        .
+      </Text>
+
+      <Text className='text-interactive body-1-semi-bold'>
+        Need help?{' '}
+        <Link appearance='accent' size='md' href='https://ledger.com/support'>
+          Contact Support
+        </Link>
+      </Text>
+
+      <Text className='text-base body-1-semi-bold'>
+        Already have an account?{' '}
+        <Link
+          appearance='accent'
+          size='md'
+          underline={false}
+          href='https://ledger.com/signin'
+        >
+          Sign in
+        </Link>
+      </Text>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+// Links within text content
+<Text className='text-base body-2'>
+  By continuing, you agree to our{' '}
+  <Link appearance='base' size='sm' href='https://ledger.com/terms'>
+    Terms & Conditions
+  </Link>{' '}
+  and{' '}
+  <Link appearance='base' size='sm' href='https://ledger.com/privacy'>
+    Privacy Policy
+  </Link>.
+</Text>
+
+// Heading with inline link
+<Text className='text-interactive body-1-semi-bold'>
+  Need help?{' '}
+  <Link appearance='accent' size='md' href='https://ledger.com/support'>
+    Contact Support
+  </Link>
+</Text>
+
+// Bold text with ununderlined link
+<Text className='text-base body-1-semi-bold'>
+  Already have an account?{' '}
+  <Link
+    appearance='accent'
+    size='md'
+    underline={false}
+    href='https://ledger.com/signin'
+  >
+    Sign in
+  </Link>
+</Text>
+`,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,81 @@
+import { describe, it, expect, jest, beforeEach } from '@jest/globals';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Linking } from 'react-native';
+import { Link } from './Link';
+
+jest.mock('react-native/Libraries/Linking/Linking', () => ({
+  openURL: jest.fn(() => Promise.resolve()),
+}));
+
+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();
+  });
+
+  it('should call Linking.openURL with href when pressed', async () => {
+    const { getByText } = render(
+      <Link href='https://example.com'>Click me</Link>,
+    );
+
+    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>,
+    );
+
+    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>,
+    );
+
+    const linkElement = getByTestId('accessible-link');
+    expect(linkElement.props.accessibilityRole).toBe('link');
+  });
+
+  it('should handle different URL protocols', () => {
+    const { getByText, rerender } = render(
+      <Link href='mailto:test@example.com'>Email Link</Link>,
+    );
+
+    fireEvent.press(getByText('Email Link'));
+    expect(Linking.openURL).toHaveBeenCalledWith('mailto:test@example.com');
+
+    rerender(<Link href='tel:+1234567890'>Phone Link</Link>);
+    fireEvent.press(getByText('Phone Link'));
+    expect(Linking.openURL).toHaveBeenCalledWith('tel:+1234567890');
+  });
+});

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

@@ -0,0 +1,230 @@
+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 { ExternalLink } from '../../Symbols';
+import { IconSize } from '../Icon';
+
+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,
+  },
+});
+
+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;
+};
+
+/**
+ * A customizable link component that supports base and accent color appearances, optional underline, sizes, icons, and external link handling.
+ * Opens URLs using React Native's Linking API.
+ *
+ * @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.
+ * Do not use it to modify the link's core appearance (colors, padding, etc). Use the `appearance` and `underline` props instead.
+ *
+ * @example
+ * import { Link } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Default link with underline
+ * <Link href="https://example.com">
+ *   Go to Page
+ * </Link>
+ *
+ * // Accent link with icon and external indicator
+ * import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Link appearance="accent" size="sm" href="https://example.com" isExternal icon={ArrowRight}>
+ *   External Site
+ * </Link>
+ *
+ * // Small base link without underline
+ * <Link appearance="base" size="sm" underline={false} href="https://example.com">
+ *   Simple Link
+ * </Link>
+ *
+ * // Link with custom press handler
+ * <Link onPress={() => navigation.navigate('Dashboard')}>
+ *   Dashboard
+ * </Link>
+ */
+export const Link = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  LinkProps
+>(
+  (
+    {
+      className,
+      children,
+      appearance,
+      size,
+      underline = true,
+      icon,
+      isExternal = false,
+      href,
+      onPress,
+      ...props
+    },
+    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();
+      } else if (href) {
+        await Linking.openURL(href);
+      }
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        className={cn('shrink', className)}
+        onPress={handlePress}
+        accessibilityRole='link'
+        {...props}
+      >
+        {({ pressed }) => (
+          <View
+            className={cn(
+              'flex-row items-center gap-8',
+              size === 'sm' && 'gap-4',
+            )}
+          >
+            {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>
+        )}
+      </Pressable>
+    );
+  },
+);
+Link.displayName = 'Link';