@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

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

@@ -0,0 +1,141 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+import { Settings, Plus } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { IconButton } from './IconButton';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('IconButton Component', () => {
+  describe('Rendering', () => {
+    it('should render with required props', () => {
+      renderWithProvider(
+        <IconButton
+          testID='icon-button'
+          accessibilityLabel='Settings'
+          icon={Settings}
+        />,
+      );
+      expect(screen.getByTestId('icon-button')).toBeTruthy();
+    });
+
+    it('should have correct accessibility role', () => {
+      renderWithProvider(
+        <IconButton
+          testID='icon-button'
+          accessibilityLabel='Settings'
+          icon={Settings}
+        />,
+      );
+      const button = screen.getByTestId('icon-button');
+      expect(button.props.accessibilityRole).toBe('button');
+    });
+  });
+
+  describe('Appearances', () => {
+    it.each([
+      'base',
+      'accent',
+      'gray',
+      'transparent',
+      'no-background',
+      'red',
+    ] as const)('should render with %s appearance', (appearance) => {
+      renderWithProvider(
+        <IconButton
+          testID='icon-button'
+          accessibilityLabel='Add'
+          icon={Plus}
+          appearance={appearance}
+        />,
+      );
+      expect(screen.getByTestId('icon-button')).toBeTruthy();
+    });
+  });
+
+  describe('Sizes', () => {
+    it.each(['xs', 'sm', 'md', 'lg'] as const)(
+      'should render with %s size',
+      (size) => {
+        renderWithProvider(
+          <IconButton
+            testID='icon-button'
+            accessibilityLabel='Settings'
+            icon={Settings}
+            size={size}
+          />,
+        );
+        expect(screen.getByTestId('icon-button')).toBeTruthy();
+      },
+    );
+  });
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      renderWithProvider(
+        <IconButton
+          testID='icon-button'
+          accessibilityLabel='Settings'
+          icon={Settings}
+          disabled
+        />,
+      );
+      const button = screen.getByTestId('icon-button');
+      expect(button.props.accessibilityState.disabled).toBe(true);
+    });
+
+    it('should render loading state', () => {
+      renderWithProvider(
+        <IconButton
+          testID='icon-button'
+          accessibilityLabel='Settings'
+          icon={Settings}
+          loading
+        />,
+      );
+      expect(screen.getByTestId('icon-button')).toBeTruthy();
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onPress when pressed', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <IconButton
+          testID='icon-button'
+          accessibilityLabel='Settings'
+          icon={Settings}
+          onPress={handlePress}
+        />,
+      );
+
+      fireEvent.press(screen.getByTestId('icon-button'));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onPress when disabled', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <IconButton
+          testID='icon-button'
+          accessibilityLabel='Settings'
+          icon={Settings}
+          onPress={handlePress}
+          disabled
+        />,
+      );
+
+      fireEvent.press(screen.getByTestId('icon-button'));
+      expect(handlePress).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/Components/IconButton/IconButton.tsx

@@ -1,21 +1,11 @@
 import React from 'react';
 
-import { BaseButtonProps } from '../Button';
 import { BaseButton } from '../Button/BaseButton';
-
-export type IconButtonProps = {
-  /**
-   * Accessible label for the IconButton
-   */
-  accessibilityLabel: string;
-  /**
-   * The icon to display in the button
-   */
-  icon: NonNullable<BaseButtonProps['icon']>;
-} & Omit<BaseButtonProps, 'isFull'>;
+import { Pressable } from '../Utility';
+import { IconButtonProps } from './types';
 
 export const IconButton = React.forwardRef<
-  React.ElementRef<typeof BaseButton>,
+  React.ElementRef<typeof Pressable>,
   IconButtonProps
 >((props, ref) => {
   return <BaseButton ref={ref} {...props} />;

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

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

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

@@ -0,0 +1,12 @@
+import { BaseButtonProps } from '../Button';
+
+export type IconButtonProps = {
+  /**
+   * Accessible label for the IconButton
+   */
+  accessibilityLabel: string;
+  /**
+   * The icon to display in the button
+   */
+  icon: NonNullable<BaseButtonProps['icon']>;
+} & Omit<BaseButtonProps, 'isFull'>;

package/src/lib/Components/InteractiveIcon/InteractiveIcon.figma.tsx

@@ -33,7 +33,7 @@ figma.connect(
       <InteractiveIcon
         iconType={props.iconType}
         disabled={props.disabled}
-        aria-label='Interactive icon'
+        accessibilityLabel='Interactive icon'
       >
         {props.children}
       </InteractiveIcon>

package/src/lib/Components/InteractiveIcon/InteractiveIcon.mdx

@@ -29,8 +29,8 @@ InteractiveIcons are specialized interactive elements designed exclusively for i
 
 ### Overview
 
-<Canvas of={InteractiveIconStories.Filled} />
-<Controls of={InteractiveIconStories.Filled} />
+<Canvas of={InteractiveIconStories.Base} />
+<Controls of={InteractiveIconStories.Base} />
 
 ### Icon Types
 
@@ -95,17 +95,16 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ### Basic usage
 
 ```tsx
-import { InteractiveIcon } from '@ledgerhq/lumen-ui-rnative';
+import { InteractiveIcon, Box } from '@ledgerhq/lumen-ui-rnative';
 import { Settings, DeleteCircleFill } from '@ledgerhq/lumen-ui-rnative/symbols';
-import { View } from 'react-native';
 
 function MyComponent() {
   return (
-    <View>
+    <Box lx={{ gap: 's8' }}>
       {/* Stroked interactive icon */}
       <InteractiveIcon
         iconType='stroked'
-        aria-label='Open settings'
+        accessibilityLabel='Open settings'
         onPress={handleSettings}
       >
         <Settings size={20} />
@@ -114,12 +113,12 @@ function MyComponent() {
       {/* Filled interactive icon */}
       <InteractiveIcon
         iconType='filled'
-        aria-label='Delete item'
+        accessibilityLabel='Delete item'
         onPress={handleDelete}
       >
         <DeleteCircleFill size={20} />
       </InteractiveIcon>
-    </View>
+    </Box>
   );
 }
 ```
@@ -137,7 +136,7 @@ function LikeButton({ isSelected, onToggle }) {
   return (
     <InteractiveIcon
       iconType={isSelected ? 'filled' : 'stroked'}
-      aria-label={isSelected ? 'Deselect' : 'Select'}
+      accessibilityLabel={isSelected ? 'Deselect' : 'Select'}
       onPress={onToggle}
     >
       {isSelected ? (
@@ -153,33 +152,32 @@ function LikeButton({ isSelected, onToggle }) {
 ### Different Icon Sizes
 
 ```tsx
-import { InteractiveIcon } from '@ledgerhq/lumen-ui-rnative';
+import { InteractiveIcon, Box } from '@ledgerhq/lumen-ui-rnative';
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-import { View } from 'react-native';
 
 function SizeExamples() {
   return (
-    <View className='flex items-center gap-4'>
+    <Box lx={{ alignItems: 'center', gap: 's4' }}>
       {/* Compact size for dense interfaces */}
-      <InteractiveIcon iconType='stroked' aria-label='Settings'>
+      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
         <Settings size={16} />
       </InteractiveIcon>
 
       {/* Standard size */}
-      <InteractiveIcon iconType='stroked' aria-label='Settings'>
+      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
         <Settings size={20} />
       </InteractiveIcon>
 
       {/* Prominent size */}
-      <InteractiveIcon iconType='stroked' aria-label='Settings'>
+      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
         <Settings size={24} />
       </InteractiveIcon>
 
       {/* Large touch target for mobile */}
-      <InteractiveIcon iconType='stroked' aria-label='Settings'>
+      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
         <Settings size={40} />
       </InteractiveIcon>
-    </View>
+    </Box>
   );
 }
 ```
@@ -200,12 +198,12 @@ The following guidelines are based on our design system principles and accessibi
 import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 // Filled icon with filled variant
-<InteractiveIcon iconType='filled' aria-label='Delete'>
+<InteractiveIcon iconType='filled' accessibilityLabel='Delete'>
   <DeleteCircleFill size={20} />
 </InteractiveIcon>
 
 // Outlined icon with stroked variant
-<InteractiveIcon iconType='stroked' aria-label='Settings'>
+<InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
   <Settings size={20} />
 </InteractiveIcon>
 ```
@@ -221,12 +219,12 @@ import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 // Filled icon with stroked variant (wrong)
-<InteractiveIcon iconType='stroked' aria-label='Delete'>
+<InteractiveIcon iconType='stroked' accessibilityLabel='Delete'>
   <DeleteCircleFill size={20} />
 </InteractiveIcon>
 
 // Outlined icon with filled variant (wrong)
-<InteractiveIcon iconType='filled' aria-label='Settings'>
+<InteractiveIcon iconType='filled' accessibilityLabel='Settings'>
   <Settings size={20} />
 </InteractiveIcon>
 ```
@@ -237,7 +235,7 @@ import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
   <DoVsDontRow>
     <DoBlockItem
-      title='Always provide descriptive aria-label'
+      title='Always provide descriptive accessibilityLabel'
       description='Use clear, action-oriented labels that describe what the icon does'
     >
 
@@ -245,14 +243,14 @@ import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```tsx
 import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<InteractiveIcon iconType='stroked' aria-label='Download PDF document'>
+<InteractiveIcon iconType='stroked' accessibilityLabel='Download PDF document'>
   <Download size={20} />
 </InteractiveIcon>
 ```
 
     </DoBlockItem>
     <DontBlockItem
-      title="Don't omit or use generic aria-label"
+      title="Don't omit or use generic accessibilityLabel"
       description='Avoid missing labels, generic labels like "Click here", or icon names as labels'
     >
 
@@ -260,7 +258,7 @@ import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```tsx
 import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<InteractiveIcon iconType='stroked' aria-label='Click here'>
+<InteractiveIcon iconType='stroked' accessibilityLabel='Click here'>
   <Download size={20} />
 </InteractiveIcon>
 ```
@@ -279,7 +277,7 @@ import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```tsx
 import { MoreVertical } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<InteractiveIcon iconType='stroked' aria-label='More actions'>
+<InteractiveIcon iconType='stroked' accessibilityLabel='More actions'>
   <MoreVertical size={20} />
 </InteractiveIcon>
 ```
@@ -294,7 +292,7 @@ import { MoreVertical } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```tsx
 import { MoreVertical } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<InteractiveIcon iconType='stroked' aria-label='More actions'>
+<InteractiveIcon iconType='stroked' accessibilityLabel='More actions'>
   Settings
 </InteractiveIcon>
 ```

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

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-native';
-import { View, Text } from 'react-native';
+import { LUMEN_VIEW_STYLE_PROPS } from '../../../styles/resolveStyle/resolveConfig';
 import {
   Settings,
   PenEdit,
   DeleteCircleFill,
   MoreVertical,
 } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { InteractiveIcon } from './InteractiveIcon';
 
 const meta: Meta<typeof InteractiveIcon> = {
@@ -19,6 +20,9 @@ const meta: Meta<typeof InteractiveIcon> = {
         type: 'code',
       },
     },
+    controls: {
+      exclude: Array.from(LUMEN_VIEW_STYLE_PROPS),
+    },
   },
   argTypes: {
     children: {
@@ -36,17 +40,17 @@ const meta: Meta<typeof InteractiveIcon> = {
 export default meta;
 type Story = StoryObj<typeof InteractiveIcon>;
 
-export const Filled: Story = {
+export const Base: Story = {
   args: {
     iconType: 'filled',
     children: <DeleteCircleFill />,
-    'aria-label': 'Delete',
+    accessibilityLabel: 'Delete',
   },
   parameters: {
     docs: {
       source: {
         code: `
-<InteractiveIcon iconType="filled" aria-label="Delete">
+<InteractiveIcon iconType="filled" accessibilityLabel="Delete">
   <DeleteCircleFill />
 </InteractiveIcon>
 `,
@@ -59,13 +63,13 @@ export const Stroked: Story = {
   args: {
     iconType: 'stroked',
     children: <MoreVertical />,
-    'aria-label': 'More actions',
+    accessibilityLabel: 'More actions',
   },
   parameters: {
     docs: {
       source: {
         code: `
-<InteractiveIcon iconType="stroked" aria-label="More actions">
+<InteractiveIcon iconType="stroked" accessibilityLabel="More actions">
   <MoreVertical />
 </InteractiveIcon>
 `,
@@ -77,20 +81,24 @@ export const Stroked: Story = {
 export const IconTypeShowcase: Story = {
   render: () => {
     return (
-      <View className='flex flex-row gap-16 p-8'>
-        <View className='flex flex-col items-center gap-4'>
-          <Text className='text-muted body-3'>Filled</Text>
-          <InteractiveIcon iconType='filled' aria-label='Delete'>
+      <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
+        <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
+          <Text lx={{ color: 'muted' }} typography='body3'>
+            Filled
+          </Text>
+          <InteractiveIcon iconType='filled' accessibilityLabel='Delete'>
             <DeleteCircleFill />
           </InteractiveIcon>
-        </View>
-        <View className='flex flex-col items-center gap-4'>
-          <Text className='text-muted body-3'>Stroked</Text>
-          <InteractiveIcon iconType='stroked' aria-label='More actions'>
+        </Box>
+        <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
+          <Text lx={{ color: 'muted' }} typography='body3'>
+            Stroked
+          </Text>
+          <InteractiveIcon iconType='stroked' accessibilityLabel='More actions'>
             <MoreVertical />
           </InteractiveIcon>
-        </View>
-      </View>
+        </Box>
+      </Box>
     );
   },
 };
@@ -99,18 +107,30 @@ export const SizesShowcase: Story = {
   render: () => {
     const iconSizes = [16, 20, 24, 40] as const;
     return (
-      <View className='flex flex-col gap-16 p-8'>
+      <Box lx={{ flexDirection: 'row', gap: 's12', padding: 's8' }}>
         {iconSizes.map((size) => (
-          <View className='flex flex-row gap-16' key={size}>
-            <View className='flex w-72 items-center justify-center'>
-              <InteractiveIcon key={size} iconType='stroked' aria-label='More'>
-                <MoreVertical size={size} />
+          <Box key={size} lx={{ flexDirection: 'column', gap: 's16' }}>
+            <Box
+              lx={{
+                width: 's72',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <InteractiveIcon
+                key={size}
+                iconType='stroked'
+                accessibilityLabel='More'
+              >
+                <DeleteCircleFill size={size} />
               </InteractiveIcon>
-            </View>
-            <Text className='body-3'>{size}px</Text>
-          </View>
+            </Box>
+            <Text lx={{ textAlign: 'center' }} typography='body3'>
+              {size}px
+            </Text>
+          </Box>
         ))}
-      </View>
+      </Box>
     );
   },
 };
@@ -118,36 +138,55 @@ export const SizesShowcase: Story = {
 export const StatesShowcase: Story = {
   render: () => {
     return (
-      <View className='flex flex-row gap-16 bg-base p-8'>
-        <View className='flex flex-col items-center gap-4'>
-          <Text className='text-muted body-3'>Filled enabled</Text>
-          <InteractiveIcon iconType='filled' aria-label='Delete'>
+      <Box
+        lx={{
+          flexDirection: 'row',
+          gap: 's16',
+          backgroundColor: 'base',
+          padding: 's8',
+        }}
+      >
+        <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
+          <Text lx={{ color: 'muted' }} typography='body3'>
+            Filled enabled
+          </Text>
+          <InteractiveIcon iconType='filled' accessibilityLabel='Delete'>
             <DeleteCircleFill />
           </InteractiveIcon>
-        </View>
-        <View className='flex flex-col items-center gap-4'>
-          <Text className='text-muted body-3'>Stroked enabled</Text>
-          <InteractiveIcon iconType='stroked' aria-label='More actions'>
+        </Box>
+        <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
+          <Text lx={{ color: 'muted' }} typography='body3'>
+            Stroked enabled
+          </Text>
+          <InteractiveIcon iconType='stroked' accessibilityLabel='More actions'>
             <MoreVertical />
           </InteractiveIcon>
-        </View>
-        <View className='flex flex-col items-center gap-4'>
-          <Text className='text-muted body-3'>Filled disabled</Text>
-          <InteractiveIcon iconType='filled' aria-label='Delete' disabled>
+        </Box>
+        <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
+          <Text lx={{ color: 'muted' }} typography='body3'>
+            Filled disabled
+          </Text>
+          <InteractiveIcon
+            iconType='filled'
+            accessibilityLabel='Delete'
+            disabled
+          >
             <DeleteCircleFill />
           </InteractiveIcon>
-        </View>
-        <View className='flex flex-col items-center gap-4'>
-          <Text className='text-muted body-3'>Stroked disabled</Text>
+        </Box>
+        <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
+          <Text lx={{ color: 'muted' }} typography='body3'>
+            Stroked disabled
+          </Text>
           <InteractiveIcon
             iconType='stroked'
-            aria-label='More actions'
+            accessibilityLabel='More actions'
             disabled
           >
             <MoreVertical />
           </InteractiveIcon>
-        </View>
-      </View>
+        </Box>
+      </Box>
     );
   },
 };