@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Close, Heart, Plus, Settings, Share } from '../../Symbols';
+import { Box } from '../Utility';
 import { IconButton } from './IconButton';
 
 const iconMap = {
@@ -13,9 +14,6 @@ const iconMap = {
 const meta: Meta<typeof IconButton> = {
   title: 'Action/IconButton',
   component: IconButton,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
     icon: {
       options: Object.keys(iconMap),
@@ -23,11 +21,11 @@ const meta: Meta<typeof IconButton> = {
       control: {
         type: 'select',
         labels: {
-          Heart: '❤️ Heart',
-          Plus: '➕ Plus',
-          Settings: '⚙️ Settings',
-          Share: '📤 Share',
-          Close: '✖️ Close',
+          Heart: 'Heart',
+          Plus: 'Plus',
+          Settings: 'Settings',
+          Share: 'Share',
+          Close: 'Close',
         },
       },
     },
@@ -70,7 +68,7 @@ export const Base: Story = {
 
 export const AppearanceShowcase: Story = {
   render: () => (
-    <div className='flex gap-8'>
+    <Box lx={{ flexDirection: 'row', gap: 's8' }}>
       <IconButton accessibilityLabel='Add' icon={Plus} appearance='accent' />
       <IconButton accessibilityLabel='Add' icon={Plus} appearance='base' />
       <IconButton accessibilityLabel='Add' icon={Plus} appearance='gray' />
@@ -85,13 +83,13 @@ export const AppearanceShowcase: Story = {
         appearance='no-background'
       />
       <IconButton accessibilityLabel='Add' icon={Plus} appearance='red' />
-    </div>
+    </Box>
   ),
 };
 
 export const SizesShowcase: Story = {
   render: () => (
-    <div className='flex items-center gap-8'>
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
       <IconButton
         accessibilityLabel='Add to favorites'
         icon={Heart}
@@ -112,7 +110,7 @@ export const SizesShowcase: Story = {
         icon={Heart}
         size='lg'
       />
-    </div>
+    </Box>
   ),
 };
 
@@ -121,7 +119,7 @@ export const StatesShowcase: Story = {
     appearance: 'base',
   },
   render: ({ appearance }) => (
-    <div className='flex items-center gap-8'>
+    <Box lx={{ flexDirection: 'row', alignItems: 'flex-start', gap: 's8' }}>
       <IconButton
         accessibilityLabel='Settings'
         appearance={appearance}
@@ -134,6 +132,6 @@ export const StatesShowcase: Story = {
         icon={Settings}
         loading
       />
-    </div>
+    </Box>
   ),
 };

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

@@ -1,9 +1,10 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as InteractiveIconStories from './InteractiveIcon.stories';
+import { Box } from '../Utility';
 import { InteractiveIcon } from './InteractiveIcon';
 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/InteractiveIcon' of={InteractiveIconStories} />
 
@@ -29,8 +30,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
 
@@ -54,7 +55,7 @@ Common sizes include:
 - **24px**: Prominent actions in toolbars
 - **40px**: Large touch targets for mobile interfaces
 
-> **⚠️ Important**: Icon sizes are controlled by the icon component itself, not through CSS classes. Always use the `size` prop on your icon component (e.g., `<Settings size={20} />`) to ensure proper scaling and visual consistency.
+> **⚠️ Important**: Icon sizes are controlled by the icon component itself, not through InteractiveIcon.
 
 ### Icon States
 
@@ -95,17 +96,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 +114,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 +137,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 +153,37 @@ 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>
+      
+      {/* Large touch target for mobile */}
+      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
+        <Settings size={64} />
+      </InteractiveIcon>
+    </Box>
   );
 }
 ```
@@ -188,7 +192,7 @@ function SizeExamples() {
 
 The following guidelines are based on our design system principles and accessibility best practices for icon-only interactive elements.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use appropriate icon types for variants'
@@ -200,12 +204,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 +225,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 +241,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 +249,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 +264,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 +283,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 +298,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>
 ```
@@ -304,7 +308,7 @@ import { MoreVertical } from '@ledgerhq/lumen-ui-rnative/symbols';
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>