@ledgerhq/lumen-ui-rnative 0.0.42

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

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

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { PressableProps } from 'react-native';
+
+export type InteractiveIconProps = {
+  /**
+   * The visual style of the icon button.
+   * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
+   */
+  iconType: 'filled' | 'stroked';
+  /**
+   * The icon component to display inside the button. Should be a single icon element from the design system.
+   */
+  children: ReactNode;
+} & PressableProps;

package/src/lib/Components/Label/Label.tsx

@@ -0,0 +1,42 @@
+import { cva } from 'class-variance-authority';
+import React, { forwardRef } from 'react';
+import { Text } from 'react-native';
+import { cn } from '../../utils';
+import { LabelProps } from './types';
+
+const labelVariants = cva(['body-2'], {
+  variants: {
+    disabled: {
+      true: 'text-disabled',
+      false: 'text-base',
+    },
+  },
+});
+
+/**
+ * A label that should be used to describe a form field.
+ *
+ * Either choices fields like checkbox, switch or radio.
+ * Or text fields like input, textarea, select, etc.
+ */
+export const Label = forwardRef<React.ElementRef<typeof Text>, LabelProps>(
+  (
+    { className, disabled = false, children, onPress, onLongPress, ...props },
+    ref,
+  ) => {
+    return (
+      <Text
+        ref={ref}
+        disabled={disabled}
+        onPress={disabled ? undefined : onPress}
+        onLongPress={disabled ? undefined : onLongPress}
+        className={cn(labelVariants({ disabled }), className)}
+        {...props}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+
+Label.displayName = 'Label';

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

@@ -0,0 +1 @@
+export * from './Label';

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

@@ -0,0 +1,8 @@
+import { TextProps } from 'react-native';
+
+export type LabelProps = {
+  /**
+   * The disabled state of the label.
+   */
+  disabled?: boolean;
+} & TextProps;

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

@@ -0,0 +1,357 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+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';
+
+<Meta title='Components/Link' of={LinkStories} />
+
+# 🔗 Link
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+Links are essential navigation elements that direct users to internal screens or external resources. This React Native implementation provides base and accent color appearances, optional underline decoration, and predefined sizing options. Links use React Native's Linking API to open URLs across mobile platforms.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=770-11743&p=f).
+
+## Anatomy
+
+<Canvas of={LinkStories.ExternalLinkWithIcon} />
+
+- **Label**: Describes the destination or action of the link
+- **Icon (optional)**: Leading icon to enhance visual communication
+- **External indicator (optional)**: Indicates that the link opens in an external browser
+
+## Properties
+
+### Overview
+
+<Canvas of={LinkStories.Base} />
+<Controls of={LinkStories.Base} />
+
+### Appearance
+
+There are two link appearance variants:
+
+- **base** (default): Standard link with base text color and pressed states
+- **accent**: Interactive accent color for emphasis
+
+<Canvas of={LinkStories.AppearanceShowcase} />
+
+### Underline
+
+The `underline` prop controls text decoration independently from appearance (default: `true`):
+
+<Canvas of={LinkStories.UnderlineShowcase} />
+
+### Size
+
+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
+
+<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:
+
+<Canvas of={LinkStories.StatesShowcase} />
+
+## Responsive Layout
+
+Links adapt to their container, truncating long text on a single line to prevent overflow:
+
+<Canvas of={LinkStories.ResponsiveLayout} />
+
+## Accessibility
+
+To be implemented:
+
+- Color contrast
+- Text zoom
+- Touch target sizing (minimum 44px)
+- Screen reader compatibility
+- Semantic labeling
+
+</Tab>
+  <Tab label="Implementation ">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+```tsx
+import { Link } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <Link href='https://example.com'>Go to Page</Link>;
+}
+```
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using NativeWind classes:
+
+```tsx
+<Link
+  href='https://example.com'
+  className='mt-4' // Custom margin top
+>
+  Custom Link
+</Link>
+```
+
+### With or Without Underline
+
+Links are underlined by default. Use `underline={false}` to remove the underline:
+
+```tsx
+// Default: with underline
+<Link href="https://example.com">
+  Underlined Link (default)
+</Link>
+
+// Explicitly without underline
+<Link underline={false} href="https://example.com">
+  Link without underline
+</Link>
+```
+
+### With Icons
+
+The Link component supports icons with automatic size adjustment based on the link size:
+
+```tsx
+import { Link } from '@ledgerhq/lumen-ui-rnative';
+import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <Link
+      appearance='accent'
+      size='sm'
+      href='https://example.com'
+      icon={ArrowRight}
+    >
+      Continue
+    </Link>
+  );
+}
+```
+
+### External Links
+
+Use the `isExternal` prop to automatically add an external link icon:
+
+```tsx
+<Link href='https://example.com' isExternal>
+  Visit External Site
+</Link>
+```
+
+### Custom Navigation
+
+For custom navigation (e.g., React Navigation), use the `onPress` prop which takes precedence over `href`:
+
+```tsx
+import { Link } from '@ledgerhq/lumen-ui-rnative';
+import { useNavigation } from '@react-navigation/native';
+
+function MyComponent() {
+  const navigation = useNavigation();
+
+  return (
+    <Link onPress={() => navigation.navigate('Dashboard')}>Dashboard</Link>
+  );
+}
+```
+
+### Pressable Integration
+
+The Link component is built on React Native's `Pressable` and accepts all its props:
+
+```tsx
+<Link
+  href='https://example.com'
+  onPressIn={() => console.log('Press started')}
+  onPressOut={() => console.log('Press ended')}
+>
+  Interactive Link
+</Link>
+```
+
+## Do's and Don'ts
+
+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'>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Keep underline for base appearance'
+      description='Base appearance links should keep underlines for accessibility'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Link appearance='base' href='https://example.com'>
+  Accessible Link
+</Link>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't remove underline from base appearance"
+      description='This makes links hard to distinguish from regular bold text, hurting accessibility'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Link appearance='base' underline={false} href='https://example.com'>
+  Hard to Distinguish
+</Link>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use icon prop for consistent sizing'
+      description='Pass icon as a component reference and let Link handle sizing'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Link icon={ArrowRight} size='sm' href='https://example.com'>
+  Next
+</Link>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't include icon in children"
+      description='Avoid placing icons inside children as this breaks automatic sizing'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Link size='sm' href='https://example.com'>
+  <ArrowRight /> Next
+</Link>
+```
+
+    </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>
+    <DoBlockItem
+      title='Provide href or onPress'
+      description='Always provide either href for URL navigation or onPress for custom navigation'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Link href='https://example.com'>
+  Visit External Site
+</Link>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't omit both href and onPress"
+      description='Links need either href or onPress to function properly'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Link>
+  Clickable Looking Link
+</Link>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</div>
+
+## Platform Considerations
+
+### iOS Specific
+
+- Links automatically adapt to iOS design guidelines
+- Touch feedback uses appropriate opacity transitions
+- Respects iOS accessibility settings like reduced motion
+- URLs open in Safari or the app specified by the system
+
+### Android Specific
+
+- Material Design touch feedback is supported through React Native
+- Handles Android back button interactions appropriately
+- Respects Android accessibility services
+- URLs open in Chrome or the user's default browser
+
+### Cross-Platform
+
+- Consistent visual appearance across platforms
+- Platform-appropriate touch feedback
+- Unified API regardless of platform
+- React Native's Linking API handles URL opening across platforms
+
+</Tab>
+</CustomTabs>