@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
+import { useTheme } from '../../../styles';
 import * as Icons from '../../Symbols';
-import { Search } from '../Search/Search';
-import { IconSize } from './Icon.types';
+import { SearchInput } from '../SearchInput/SearchInput';
+import { Box, Text, Pressable } from '../Utility';
+import type { IconSize } from './types';
 
 const meta: Meta = {
   title: 'Symbols/Interface Icons',
@@ -18,22 +20,20 @@ const iconNames = Object.keys(Icons) as IconName[];
 type IconStoryProps = {
   size: IconSize;
   name: IconName;
-  className?: string;
+  color?: string;
 };
 
 type IconCardProps = {
   name: string;
   size?: IconSize;
-  className?: string;
+  color?: string;
 };
 
-const IconCard = ({
-  name,
-  size = 24,
-  className = 'text-base',
-}: IconCardProps) => {
+const IconCard = ({ name, size = 24, color }: IconCardProps) => {
+  const { theme } = useTheme();
   const [copied, setCopied] = useState(false);
   const IconComponent = Icons[name as keyof typeof Icons];
+  const iconColor = color ?? theme.colors.text.base;
 
   const handleClick = async () => {
     try {
@@ -46,19 +46,46 @@ const IconCard = ({
   };
 
   return (
-    <div
+    <Pressable
       key={name}
-      className='relative flex cursor-pointer flex-col items-center gap-2 rounded-lg p-4 transition-colors hover:bg-muted-pressed'
-      onClick={handleClick}
+      onPress={handleClick}
+      lx={{
+        position: 'relative',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 's8',
+        borderRadius: 'sm',
+        padding: 's16',
+        width: 's96',
+      }}
+      style={({ pressed }) => ({
+        backgroundColor: pressed ? theme.colors.bg.mutedPressed : 'transparent',
+      })}
     >
-      <IconComponent size={size} className={className} />
-      <span className='text-muted body-4'>{name}</span>
+      <IconComponent size={size} style={{ color: iconColor }} />
+      <Text typography='body4' lx={{ color: 'muted' }}>
+        {name}
+      </Text>
       {copied && (
-        <div className='absolute inset-0 flex items-center justify-center rounded-lg bg-muted'>
-          <span className='text-on-accent body-4'>Copied!</span>
-        </div>
+        <Box
+          lx={{
+            position: 'absolute',
+            top: 's0',
+            left: 's0',
+            right: 's0',
+            bottom: 's0',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 'sm',
+            backgroundColor: 'muted',
+          }}
+        >
+          <Text typography='body4' lx={{ color: 'onAccent' }}>
+            Copied!
+          </Text>
+        </Box>
       )}
-    </div>
+    </Pressable>
   );
 };
 
@@ -66,7 +93,6 @@ export const Icon: StoryObj<IconStoryProps> = {
   args: {
     size: 24,
     name: 'Home',
-    className: 'text-base',
   },
   argTypes: {
     size: {
@@ -79,27 +105,30 @@ export const Icon: StoryObj<IconStoryProps> = {
       options: iconNames,
       description: 'The name of the icon to display',
     },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes to apply (can be used for color)',
+    color: {
+      control: 'color',
+      description: 'The color of the icon',
     },
   },
   render: (args) => {
+    const { theme } = useTheme();
     const IconComponent = Icons[args.name];
+    const iconColor = args.color ?? theme.colors.text.base;
+
     return (
-      <div className='p-8'>
-        <div className='flex flex-col items-center gap-4'>
-          <IconComponent size={args.size} className={args.className} />
-          <span className='text-base'>{args.name}</span>
-        </div>
-      </div>
+      <Box lx={{ padding: 's8' }}>
+        <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
+          <IconComponent size={args.size} style={{ color: iconColor }} />
+          <Text lx={{ color: 'base' }}>{args.name}</Text>
+        </Box>
+      </Box>
     );
   },
   parameters: {
     docs: {
       source: {
         code: `
-        <Information size={24} className="text-base" />
+        <Information size={24} style={{ color: theme.colors.text.base }} />
       `,
       },
     },
@@ -107,29 +136,47 @@ export const Icon: StoryObj<IconStoryProps> = {
 };
 
 export const IconSizes: StoryObj = {
-  render: () => (
-    <div className='space-y-16 text-base'>
-      {sizes.map((size) => (
-        <div key={size}>
-          <h3 className='mb-16 heading-3'>Size {size}px</h3>
-          <div className='flex max-w-fit flex-wrap gap-16 rounded-lg border border-muted-subtle p-16'>
-            {[
-              'Home',
-              'Settings',
-              'Heart',
-              'Star',
-              'ArrowDown',
-              'ArrowLeft',
-              'ArrowRight',
-              'ArrowUp',
-            ].map((iconName) => (
-              <IconCard key={iconName} name={iconName} size={size} />
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
+  render: () => {
+    const { theme } = useTheme();
+
+    return (
+      <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+        {sizes.map((size) => (
+          <Box key={size} lx={{ flexDirection: 'column' }}>
+            <Text typography='heading3' lx={{ marginBottom: 's16' }}>
+              Size {size}px
+            </Text>
+            <Box
+              lx={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                gap: 's8',
+                borderRadius: 'sm',
+                padding: 's8',
+              }}
+              style={{
+                borderWidth: 1,
+                borderColor: theme.colors.border.mutedSubtle,
+              }}
+            >
+              {[
+                'Home',
+                'Settings',
+                'Heart',
+                'Star',
+                'ArrowDown',
+                'ArrowLeft',
+                'ArrowRight',
+                'ArrowUp',
+              ].map((iconName) => (
+                <IconCard key={iconName} name={iconName} size={size} />
+              ))}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    );
+  },
 };
 
 export const Gallery: StoryObj = {
@@ -137,6 +184,7 @@ export const Gallery: StoryObj = {
     layout: 'fullscreen',
   },
   render: () => {
+    const { theme } = useTheme();
     const [searchTerm, setSearchTerm] = useState('');
 
     // Filter icons based on search term
@@ -145,48 +193,69 @@ export const Gallery: StoryObj = {
     );
 
     return (
-      <div className='p-8'>
+      <Box
+        lx={{
+          width: 'full',
+          flexDirection: 'column',
+          alignItems: 'stretch',
+          padding: 's8',
+        }}
+      >
         {/* Search bar */}
-        <div className='mb-32'>
-          <div className='mb-8 max-w-md'>
-            <Search
+        <Box lx={{ marginBottom: 's32' }}>
+          <Box lx={{ marginBottom: 's8', maxWidth: 's320' }}>
+            <SearchInput
               placeholder='Search icons...'
               value={searchTerm}
               onChangeText={setSearchTerm}
             />
-          </div>
+          </Box>
 
           {/* Results count */}
-          <div className='mb-4'>
-            <span className='ml-8 text-muted body-3'>
+          <Box lx={{ marginBottom: 's4' }}>
+            <Text typography='body3' lx={{ marginLeft: 's8', color: 'muted' }}>
               {filteredIcons.length} of {Object.keys(Icons).length} icons
               {searchTerm && ` matching "${searchTerm}"`}
-            </span>
-          </div>
-        </div>
+            </Text>
+          </Box>
+        </Box>
 
-        {/* Icon grid */}
-        <div className='grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-8'>
+        {/* Icon grid - using flexWrap for RN compatibility */}
+        <Box lx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 's8' }}>
           {filteredIcons.map(([name]) => (
             <IconCard key={name} name={name} />
           ))}
-        </div>
+        </Box>
 
         {/* No results message */}
         {filteredIcons.length === 0 && searchTerm && (
-          <div className='flex flex-col items-center justify-center py-16'>
-            <p className='text-muted body-2'>
+          <Box
+            lx={{
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              paddingVertical: 's16',
+            }}
+          >
+            <Text typography='body2' lx={{ color: 'muted' }}>
               No icons found matching "{searchTerm}"
-            </p>
-            <button
-              onClick={() => setSearchTerm('')}
-              className='mt-4 text-interactive body-2 hover:text-interactive-hover'
+            </Text>
+            <Pressable
+              onPress={() => setSearchTerm('')}
+              style={({ pressed }) => ({
+                marginTop: 16,
+                color: pressed
+                  ? theme.colors.text.interactivePressed
+                  : theme.colors.text.interactive,
+              })}
             >
-              Clear search
-            </button>
-          </div>
+              <Text typography='body2' lx={{ color: 'interactive' }}>
+                Clear search
+              </Text>
+            </Pressable>
+          </Box>
         )}
-      </div>
+      </Box>
     );
   },
 };

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

@@ -0,0 +1,84 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { Icon } from './Icon';
+import type { IconSize } from './types';
+
+const { icon: iconTokens } = ledgerLiveThemes.dark;
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('Icon', () => {
+  it('should render children with default props', () => {
+    renderWithProvider(
+      <Icon viewBox='0 0 24 24' testID='icon'>
+        <Path d='M12 2L2 7l10 5 10-5-10-5z' testID='path' />
+      </Icon>,
+    );
+
+    const svg = screen.getByTestId('icon');
+    expect(screen.getByTestId('path')).toBeTruthy();
+    expect(svg.props.fill).toBe('none');
+    expect(svg.props.pointerEvents).toBe('none');
+    expect(svg.props.width).toBe(iconTokens.width.s24);
+    expect(svg.props.height).toBe(iconTokens.height.s24);
+    expect(svg.props.strokeWidth).toBe(iconTokens.borderWidth.s24);
+  });
+
+  it.each([12, 16, 20, 24, 40, 48, 56] as IconSize[])(
+    'should apply correct dimensions for size %i',
+    (size) => {
+      renderWithProvider(
+        <Icon viewBox='0 0 24 24' size={size} testID='icon'>
+          <Path d='M12 2L2 7l10 5 10-5-10-5z' />
+        </Icon>,
+      );
+
+      const sizeKey = `s${size}` as `s${typeof size}`;
+      const svg = screen.getByTestId('icon');
+
+      expect(svg.props.width).toBe(iconTokens.width[sizeKey]);
+      expect(svg.props.height).toBe(iconTokens.height[sizeKey]);
+      expect(svg.props.strokeWidth).toBe(iconTokens.borderWidth[sizeKey]);
+    },
+  );
+
+  it('should apply color from style prop', () => {
+    renderWithProvider(
+      <Icon viewBox='0 0 24 24' testID='icon' color='error'>
+        <Path d='M12 2L2 7l10 5 10-5-10-5z' />
+      </Icon>,
+    );
+
+    expect(screen.getByTestId('icon').props.color).toBe('#fca6a7');
+  });
+
+  it('should forward ref and spread additional props', () => {
+    const ref = { current: null };
+    renderWithProvider(
+      <Icon
+        viewBox='0 0 24 24'
+        ref={ref}
+        testID='icon'
+        accessibilityLabel='Test icon'
+        fill='currentColor'
+      >
+        <Path d='M12 2L2 7l10 5 10-5-10-5z' />
+      </Icon>,
+    );
+
+    const svg = screen.getByTestId('icon');
+    expect(ref.current).not.toBeNull();
+    expect(svg.props.accessibilityLabel).toBe('Test icon');
+    expect(svg.props.fill).toBe('currentColor');
+  });
+});

package/src/lib/Components/Icon/Icon.tsx

@@ -1,40 +1,54 @@
-import { cva } from 'class-variance-authority';
-import { cssInterop } from 'nativewind';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Svg } from 'react-native-svg';
-import { cn } from '../../utils';
-import { IconProps } from './Icon.types';
+import { useResolveTextStyle, useTheme } from '../../../styles';
+import { TextProps } from '../Utility';
+import { IconProps, IconSize } from './types';
 
-cssInterop(Svg, {
-  className: 'style',
-});
+const iconSizeMap = {
+  12: 's12',
+  16: 's16',
+  20: 's20',
+  24: 's24',
+  40: 's40',
+  48: 's48',
+  56: 's56',
+} as const;
 
-const iconVariants = cva('inline-block', {
-  variants: {
-    size: {
-      12: 'icon-w-12 icon-h-12 icon-stroke-12',
-      16: 'icon-w-16 icon-h-16 icon-stroke-16',
-      20: 'icon-w-20 icon-h-20 icon-stroke-20',
-      24: 'icon-w-24 icon-h-24 icon-stroke-24',
-      40: 'icon-w-40 icon-h-40 icon-stroke-40',
-      48: 'icon-w-48 icon-h-48 icon-stroke-48',
-      56: 'icon-w-56 icon-h-56 icon-stroke-56',
-    },
-  },
-  defaultVariants: {
-    size: 24,
-  },
-});
+const useStyles = (
+  lx: TextProps['lx'],
+  size: IconSize,
+  color: IconProps['color'],
+) => {
+  const { theme } = useTheme();
+  const resolvedStyle = useResolveTextStyle(lx || {});
+  const resolvedColor = useResolveTextStyle({ color });
+
+  return useMemo(() => {
+    return {
+      container: {
+        ...resolvedStyle,
+        width: theme.icon.width[iconSizeMap[size]],
+        height: theme.icon.height[iconSizeMap[size]],
+        strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
+      },
+      color:
+        resolvedColor.color || resolvedStyle.color || theme.colors.text.base,
+    };
+  }, [size, theme, resolvedStyle, resolvedColor.color]);
+};
 
 export const Icon = forwardRef<Svg, IconProps>(
-  ({ size = 24, className = '', children, viewBox, ...props }, ref) => {
+  ({ size = 24, color, lx = {}, children, viewBox, ...props }, ref) => {
+    const styles = useStyles(lx, size, color);
+
     return (
       <Svg
         ref={ref}
-        width={size}
-        height={size}
-        className={cn(className, iconVariants({ size }), 'inline-block')}
+        width={styles.container.width}
+        height={styles.container.height}
+        strokeWidth={styles.container.strokeWidth}
         viewBox={viewBox}
+        color={styles.color}
         fill='none'
         pointerEvents='none'
         {...props}

package/src/lib/Components/Icon/createIcon.ts

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { Svg, SvgProps } from 'react-native-svg';
 import { toPascalCase } from '../../utils';
 import { Icon } from './Icon';
-import { IconProps } from './Icon.types';
+import { IconProps } from './types';
 
 /**
  * Create an Icon component for React Native
@@ -15,10 +15,9 @@ const createIcon = (
   iconJsx: React.ReactElement<SvgProps>,
 ) => {
   const Component = forwardRef<Svg, Omit<IconProps, 'children'>>(
-    ({ className, ...props }, ref) =>
+    ({ ...props }, ref) =>
       React.createElement(Icon, {
         ref,
-        className,
         viewBox: iconJsx.props.viewBox,
         ...props,
         children: iconJsx.props.children,

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

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

package/src/lib/Components/Icon/{Icon.types.ts → types.ts}

@@ -1,4 +1,6 @@
 import { SvgProps } from 'react-native-svg';
+import { LumenTextStyle } from '../../../styles';
+import { TextProps } from '../Utility';
 
 export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
 
@@ -8,11 +10,12 @@ export type IconProps = {
    */
   size?: IconSize;
   /**
-   * Additional CSS classes to apply to the icon.
+   * The color of the icon.
    */
-  className?: string;
+  color?: LumenTextStyle['color'];
   /**
    * The children of the icon.
    */
-  children: React.ReactNode;
-} & SvgProps;
+  children?: React.ReactNode;
+} & TextProps &
+  Omit<SvgProps, 'style'>;

package/src/lib/Components/IconButton/IconButton.mdx

@@ -3,7 +3,8 @@ import * as IconButtonStories from './IconButton.stories';
 import { IconButton } from './IconButton';
 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';
+import { Box } from '../Utility';
 
 <Meta title='Action/IconButton' of={IconButtonStories} />
 
@@ -40,10 +41,12 @@ IconButton supports the same appearances as the standard Button:
 
 IconButtons come in four different sizes:
 
-- xs (32px)
-- sm (44px)
-- md (48px, default)
-- lg (56px)
+
+- `xs` (**32px**)
+- `sm` (**40px**)
+- `md` (**48px**, default)
+- `lg` (**56px**)
+
 
 <Canvas of={IconButtonStories.SizesShowcase} />
 
@@ -78,10 +81,10 @@ 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 token-based styling:
 
 ```tsx
-<IconButton accessibilityLabel='Close' icon={Close} className='mt-4' />
+<IconButton accessibilityLabel='Close' icon={Close} lx={{ marginTop: 's4' }} />
 ```
 
 ### Full Width
@@ -134,7 +137,7 @@ The Button component is built on React Native's `Pressable` and accepts all its
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use icon prop for consistent sizing'
@@ -151,14 +154,14 @@ import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
     </DoBlockItem>
     <DontBlockItem
       title="Don't modify icon size directly"
-      description='Avoid passing icon size prop or overriding dimensions through className'
+      description='Avoid passing icon size prop or overriding dimensions through lx'
     >
 
 {/* prettier-ignore */}
 ```tsx
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<IconButton accessibilityLabel='Settings' icon={Settings} className='w-8 h-8' />
+<IconButton accessibilityLabel='Settings' icon={Settings} lx={{ width: 's32', height: 's32' }} />
 ```
 
     </DontBlockItem>
@@ -196,7 +199,7 @@ import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
   </Tab>
 </CustomTabs>