@ledgerhq/lumen-ui-rnative 0.1.16 → 0.1.18

package/src/lib/Components/ContentBanner/ContentBanner.tsx

@@ -46,8 +46,6 @@ export const ContentBannerContent = ({
   );
 };
 
-ContentBannerContent.displayName = 'ContentBannerContent';
-
 /**
  * The main title of the content banner.
  */
@@ -91,8 +89,6 @@ export const ContentBannerTitle = ({
   );
 };
 
-ContentBannerTitle.displayName = 'ContentBannerTitle';
-
 /**
  * Optional description text below the title.
  */
@@ -136,8 +132,6 @@ export const ContentBannerDescription = ({
   );
 };
 
-ContentBannerDescription.displayName = 'ContentBannerDescription';
-
 /**
  * A content banner component for displaying a composable banner with an optional
  * leading visual, title, description, and close button.
@@ -209,18 +203,16 @@ export const ContentBanner = ({
         <View style={styles.closeButton}>
           <InteractiveIcon
             iconType='stroked'
+            icon={Close}
+            size={16}
             testID='content-banner-close-button'
             onPress={() => onClose()}
             accessibilityLabel={
               closeAccessibilityLabel || t('components.banner.closeAriaLabel')
             }
-          >
-            <Close size={16} />
-          </InteractiveIcon>
+          />
         </View>
       )}
     </Box>
   );
 };
-
-ContentBanner.displayName = 'ContentBanner';

package/src/lib/Components/Divider/Divider.tsx

@@ -49,5 +49,3 @@ export const Divider = ({
     />
   );
 };
-
-Divider.displayName = 'Divider';

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

@@ -67,5 +67,3 @@ export const Icon = ({
     </Svg>
   );
 };
-
-Icon.displayName = 'Icon';

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

@@ -4,5 +4,3 @@ import { IconButtonProps } from './types';
 export const IconButton = (props: IconButtonProps) => {
   return <BaseButton {...props} />;
 };
-
-IconButton.displayName = 'IconButton';

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

@@ -44,19 +44,17 @@ InteractiveIcons come in two visual styles, each optimized for specific use case
 
 ### Icon Sizes
 
-InteractiveIcons support various icon sizes to accommodate different use cases and screen densities:
+InteractiveIcons support various icon sizes via the `size` prop:
 
 <Canvas of={InteractiveIconStories.SizesShowcase} />
 
 Common sizes include:
 
 - **16px**: Compact actions in dense interfaces
-- **20px**: Standard size for most interactive icons
+- **20px**: Standard size for most interactive icons (default)
 - **24px**: Prominent actions in toolbars
 - **40px**: Large touch targets for mobile interfaces
 
-> **⚠️ Important**: Icon sizes are controlled by the icon component itself, not through InteractiveIcon.
-
 ### Icon States
 
 InteractiveIcons have enabled or disabled states:
@@ -72,9 +70,12 @@ InteractiveIcons require special attention for accessibility since they contain
 **Always provide an `accessibilityLabel` or `aria-label` prop** that clearly describes the action:
 
 ```tsx
-<InteractiveIcon iconType='filled' accessibilityLabel='Delete item'>
-  <DeleteCircleFill size={20} />
-</InteractiveIcon>
+<InteractiveIcon
+  iconType='filled'
+  icon={DeleteCircleFill}
+  size={20}
+  accessibilityLabel='Delete item'
+/>
 ```
 
 ### Touch Interaction
@@ -105,20 +106,20 @@ function MyComponent() {
       {/* Stroked interactive icon */}
       <InteractiveIcon
         iconType='stroked'
+        icon={Settings}
+        size={20}
         accessibilityLabel='Open settings'
         onPress={handleSettings}
-      >
-        <Settings size={20} />
-      </InteractiveIcon>
+      />
 
       {/* Filled interactive icon */}
       <InteractiveIcon
         iconType='filled'
+        icon={DeleteCircleFill}
+        size={20}
         accessibilityLabel='Delete item'
         onPress={handleDelete}
-      >
-        <DeleteCircleFill size={20} />
-      </InteractiveIcon>
+      />
     </Box>
   );
 }
@@ -137,15 +138,11 @@ function LikeButton({ isSelected, onToggle }) {
   return (
     <InteractiveIcon
       iconType={isSelected ? 'filled' : 'stroked'}
+      icon={isSelected ? CheckmarkCircleFill : CheckmarkCircle}
+      size={20}
       accessibilityLabel={isSelected ? 'Deselect' : 'Select'}
       onPress={onToggle}
-    >
-      {isSelected ? (
-        <CheckmarkCircleFill size={20} />
-      ) : (
-        <CheckmarkCircle size={20} />
-      )}
-    </InteractiveIcon>
+    />
   );
 }
 ```
@@ -160,29 +157,16 @@ function SizeExamples() {
   return (
     <Box lx={{ alignItems: 'center', gap: 's4' }}>
       {/* Compact size for dense interfaces */}
-      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
-        <Settings size={16} />
-      </InteractiveIcon>
+      <InteractiveIcon iconType='stroked' icon={Settings} size={16} accessibilityLabel='Settings' />
 
-      {/* Standard size */}
-      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
-        <Settings size={20} />
-      </InteractiveIcon>
+      {/* Standard size (default) */}
+      <InteractiveIcon iconType='stroked' icon={Settings} size={20} accessibilityLabel='Settings' />
 
       {/* Prominent size */}
-      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
-        <Settings size={24} />
-      </InteractiveIcon>
+      <InteractiveIcon iconType='stroked' icon={Settings} size={24} accessibilityLabel='Settings' />
 
       {/* Large touch target for mobile */}
-      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
-        <Settings size={40} />
-      </InteractiveIcon>
-      
-      {/* Large touch target for mobile */}
-      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
-        <Settings size={64} />
-      </InteractiveIcon>
+      <InteractiveIcon iconType='stroked' icon={Settings} size={40} accessibilityLabel='Settings' />
     </Box>
   );
 }
@@ -204,14 +188,20 @@ 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' accessibilityLabel='Delete'>
-  <DeleteCircleFill size={20} />
-</InteractiveIcon>
+<InteractiveIcon
+  iconType='filled'
+  icon={DeleteCircleFill}
+  size={20}
+  accessibilityLabel='Delete'
+/>
 
 // Outlined icon with stroked variant
-<InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
-  <Settings size={20} />
-</InteractiveIcon>
+<InteractiveIcon
+  iconType='stroked'
+  icon={Settings}
+  size={20}
+  accessibilityLabel='Settings'
+/>
 ```
 
     </DoBlockItem>
@@ -225,14 +215,20 @@ 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' accessibilityLabel='Delete'>
-  <DeleteCircleFill size={20} />
-</InteractiveIcon>
+<InteractiveIcon
+  iconType='stroked'
+  icon={DeleteCircleFill}
+  size={20}
+  accessibilityLabel='Delete'
+/>
 
 // Outlined icon with filled variant (wrong)
-<InteractiveIcon iconType='filled' accessibilityLabel='Settings'>
-  <Settings size={20} />
-</InteractiveIcon>
+<InteractiveIcon
+  iconType='filled'
+  icon={Settings}
+  size={20}
+  accessibilityLabel='Settings'
+/>
 ```
 
     </DontBlockItem>
@@ -249,9 +245,12 @@ import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```tsx
 import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<InteractiveIcon iconType='stroked' accessibilityLabel='Download PDF document'>
-  <Download size={20} />
-</InteractiveIcon>
+<InteractiveIcon
+  iconType='stroked'
+  icon={Download}
+  size={20}
+  accessibilityLabel='Download PDF document'
+/>
 ```
 
     </DoBlockItem>
@@ -264,43 +263,12 @@ import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```tsx
 import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<InteractiveIcon iconType='stroked' accessibilityLabel='Click here'>
-  <Download size={20} />
-</InteractiveIcon>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Only render icon components as children'
-      description='InteractiveIcon expects icon components as children'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { MoreVertical } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<InteractiveIcon iconType='stroked' accessibilityLabel='More actions'>
-  <MoreVertical size={20} />
-</InteractiveIcon>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't render arbitrary content as children"
-      description='Avoid using text, views, or other non-icon content as children'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { MoreVertical } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<InteractiveIcon iconType='stroked' accessibilityLabel='More actions'>
-  Settings
-</InteractiveIcon>
+<InteractiveIcon
+  iconType='stroked'
+  icon={Download}
+  size={20}
+  accessibilityLabel='Click here'
+/>
 ```
 
     </DontBlockItem>

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

@@ -21,13 +21,13 @@ const meta: Meta<typeof InteractiveIcon> = {
     },
   },
   argTypes: {
-    children: {
+    icon: {
       control: 'select',
       options: ['Settings', 'PenEdit', 'DeleteCircleFill'],
       mapping: {
-        Settings: <Settings />,
-        PenEdit: <PenEdit />,
-        DeleteCircleFill: <DeleteCircleFill />,
+        Settings,
+        PenEdit,
+        DeleteCircleFill,
       },
     },
   },
@@ -39,16 +39,14 @@ type Story = StoryObj<typeof InteractiveIcon>;
 export const Base: Story = {
   args: {
     iconType: 'filled',
-    children: <DeleteCircleFill />,
+    icon: DeleteCircleFill,
     accessibilityLabel: 'Delete',
   },
   parameters: {
     docs: {
       source: {
         code: `
-<InteractiveIcon iconType="filled" accessibilityLabel="Delete">
-  <DeleteCircleFill />
-</InteractiveIcon>
+<InteractiveIcon iconType="filled" icon={DeleteCircleFill} accessibilityLabel="Delete" />
 `,
       },
     },
@@ -58,16 +56,14 @@ export const Base: Story = {
 export const Stroked: Story = {
   args: {
     iconType: 'stroked',
-    children: <MoreVertical />,
+    icon: MoreVertical,
     accessibilityLabel: 'More actions',
   },
   parameters: {
     docs: {
       source: {
         code: `
-<InteractiveIcon iconType="stroked" accessibilityLabel="More actions">
-  <MoreVertical />
-</InteractiveIcon>
+<InteractiveIcon iconType="stroked" icon={MoreVertical} accessibilityLabel="More actions" />
 `,
       },
     },
@@ -82,17 +78,21 @@ export const IconTypeShowcase: Story = {
           <Text lx={{ color: 'muted' }} typography='body3'>
             Filled
           </Text>
-          <InteractiveIcon iconType='filled' accessibilityLabel='Delete'>
-            <DeleteCircleFill />
-          </InteractiveIcon>
+          <InteractiveIcon
+            iconType='filled'
+            icon={DeleteCircleFill}
+            accessibilityLabel='Delete'
+          />
         </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>
+          <InteractiveIcon
+            iconType='stroked'
+            icon={MoreVertical}
+            accessibilityLabel='More actions'
+          />
         </Box>
       </Box>
     );
@@ -114,12 +114,11 @@ export const SizesShowcase: Story = {
               }}
             >
               <InteractiveIcon
-                key={size}
                 iconType='stroked'
+                icon={DeleteCircleFill}
+                size={size}
                 accessibilityLabel='More'
-              >
-                <DeleteCircleFill size={size} />
-              </InteractiveIcon>
+              />
             </Box>
             <Text lx={{ textAlign: 'center' }} typography='body3'>
               {size}px
@@ -146,17 +145,21 @@ export const StatesShowcase: Story = {
           <Text lx={{ color: 'muted' }} typography='body3'>
             Filled enabled
           </Text>
-          <InteractiveIcon iconType='filled' accessibilityLabel='Delete'>
-            <DeleteCircleFill />
-          </InteractiveIcon>
+          <InteractiveIcon
+            iconType='filled'
+            icon={DeleteCircleFill}
+            accessibilityLabel='Delete'
+          />
         </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>
+          <InteractiveIcon
+            iconType='stroked'
+            icon={MoreVertical}
+            accessibilityLabel='More actions'
+          />
         </Box>
         <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
           <Text lx={{ color: 'muted' }} typography='body3'>
@@ -164,11 +167,10 @@ export const StatesShowcase: Story = {
           </Text>
           <InteractiveIcon
             iconType='filled'
+            icon={DeleteCircleFill}
             accessibilityLabel='Delete'
             disabled
-          >
-            <DeleteCircleFill />
-          </InteractiveIcon>
+          />
         </Box>
         <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's4' }}>
           <Text lx={{ color: 'muted' }} typography='body3'>
@@ -176,11 +178,10 @@ export const StatesShowcase: Story = {
           </Text>
           <InteractiveIcon
             iconType='stroked'
+            icon={MoreVertical}
             accessibilityLabel='More actions'
             disabled
-          >
-            <MoreVertical />
-          </InteractiveIcon>
+          />
         </Box>
       </Box>
     );

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

@@ -15,15 +15,14 @@ const renderWithProvider = (component: React.ReactElement) => {
 };
 
 describe('InteractiveIcon Component', () => {
-  it('should render correctly with children icon', () => {
+  it('should render correctly with icon prop', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='filled'
+        icon={Settings}
         accessibilityLabel='Settings'
         testID='icon-button'
-      >
-        <Settings size={20} />
-      </InteractiveIcon>,
+      />,
     );
     const buttonElement = screen.getByTestId('icon-button');
     expect(buttonElement).toBeTruthy();
@@ -33,11 +32,10 @@ describe('InteractiveIcon Component', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='filled'
+        icon={Plus}
         accessibilityLabel='Add item'
         testID='filled-icon'
-      >
-        <Plus size={20} />
-      </InteractiveIcon>,
+      />,
     );
     const buttonElement = screen.getByTestId('filled-icon');
     expect(buttonElement).toBeTruthy();
@@ -48,11 +46,10 @@ describe('InteractiveIcon Component', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='stroked'
+        icon={Settings}
         accessibilityLabel='Settings'
         testID='stroked-icon'
-      >
-        <Settings size={20} />
-      </InteractiveIcon>,
+      />,
     );
     const buttonElement = screen.getByTestId('stroked-icon');
     expect(buttonElement).toBeTruthy();
@@ -63,11 +60,10 @@ describe('InteractiveIcon Component', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='filled'
+        icon={Settings}
         accessibilityLabel='Open menu'
         testID='menu-icon'
-      >
-        <Settings size={20} />
-      </InteractiveIcon>,
+      />,
     );
     const buttonElement = screen.getByTestId('menu-icon');
     expect(buttonElement.props.accessibilityLabel).toBe('Open menu');
@@ -77,12 +73,11 @@ describe('InteractiveIcon Component', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='filled'
+        icon={Settings}
         accessibilityLabel='Disabled button'
         disabled
         testID='disabled-icon'
-      >
-        <Settings size={20} />
-      </InteractiveIcon>,
+      />,
     );
     const buttonElement = screen.getByTestId('disabled-icon');
     expect(buttonElement.props.accessibilityState.disabled).toBe(true);
@@ -93,12 +88,11 @@ describe('InteractiveIcon Component', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='filled'
+        icon={Plus}
         accessibilityLabel='Pressable'
         onPress={handlePress}
         testID='pressable-icon'
-      >
-        <Plus size={20} />
-      </InteractiveIcon>,
+      />,
     );
 
     const buttonElement = screen.getByTestId('pressable-icon');
@@ -112,13 +106,12 @@ describe('InteractiveIcon Component', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='filled'
+        icon={Settings}
         accessibilityLabel='Disabled'
         onPress={handlePress}
         disabled
         testID='disabled-pressable'
-      >
-        <Settings size={20} />
-      </InteractiveIcon>,
+      />,
     );
 
     const buttonElement = screen.getByTestId('disabled-pressable');
@@ -132,12 +125,11 @@ describe('InteractiveIcon Component', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='stroked'
+        icon={Plus}
         accessibilityLabel='Long pressable'
         onLongPress={handleLongPress}
         testID='long-pressable-icon'
-      >
-        <Plus size={20} />
-      </InteractiveIcon>,
+      />,
     );
 
     const buttonElement = screen.getByTestId('long-pressable-icon');
@@ -151,15 +143,27 @@ describe('InteractiveIcon Component', () => {
     renderWithProvider(
       <InteractiveIcon
         iconType='filled'
+        icon={Settings}
         accessibilityLabel='Custom'
         style={customStyle}
         testID='custom-icon'
-      >
-        <Settings size={20} />
-      </InteractiveIcon>,
+      />,
     );
     const buttonElement = screen.getByTestId('custom-icon');
-    // Style is merged as an array [resolvedStyle, customStyle]
     expect(buttonElement.props.style).toMatchObject(customStyle);
   });
+
+  it('should render with custom size', () => {
+    renderWithProvider(
+      <InteractiveIcon
+        iconType='filled'
+        icon={Settings}
+        size={24}
+        accessibilityLabel='Custom size'
+        testID='custom-size-icon'
+      />,
+    );
+    const buttonElement = screen.getByTestId('custom-size-icon');
+    expect(buttonElement).toBeTruthy();
+  });
 });