@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

package/src/lib/Components/Banner/Banner.mdx

@@ -1,9 +1,10 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as BannerStories from './Banner.stories';
 import { Banner } from './Banner';
+import { Box } from '../Utility';
 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/Banner' of={BannerStories} />
 
@@ -99,7 +100,7 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ### Basic Usage
 
 ```tsx
-import { Banner } from '@ledgerhq/lumen-ui-react';
+import { Banner } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
   return (
@@ -117,11 +118,11 @@ function MyComponent() {
 The Banner component supports four different appearances, each with its own semantic meaning and visual styling:
 
 ```tsx
-import { Banner } from '@ledgerhq/lumen-ui-react';
+import { Banner, Box } from '@ledgerhq/lumen-ui-rnative';
 
 function NotificationSystem() {
   return (
-    <View className='space-y-4'>
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
       {/* Info - Default informational messages */}
       <Banner
         appearance='info'
@@ -149,7 +150,7 @@ function NotificationSystem() {
         title='Error'
         description='Something went wrong, please try again'
       />
-    </View>
+    </Box>
   );
 }
 ```
@@ -159,7 +160,7 @@ function NotificationSystem() {
 Banners can include primary and secondary action buttons to allow user interaction:
 
 ```tsx
-import { Banner, Button } from '@ledgerhq/lumen-ui-react';
+import { Banner, Button } from '@ledgerhq/lumen-ui-rnative';
 
 function ActionableBanner() {
   const handleAccept = () => {
@@ -195,7 +196,7 @@ function ActionableBanner() {
 Add a close button to make banners dismissible by the user:
 
 ```tsx
-import { Banner } from '@ledgerhq/lumen-ui-react';
+import { Banner } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function DismissibleBanner() {
@@ -229,33 +230,31 @@ Banners automatically flow to fill their parent container width. No additional p
 />
 ```
 
-To control banner width, use container elements:
+To control banner width, use container elements with the `lx` prop:
 
 ```tsx
-{
-  /* Full viewport width */
-}
+import { Banner, Box } from '@ledgerhq/lumen-ui-rnative';
+
+{/* Full viewport width */}
 <Banner
   title='Full Width'
   description='This banner fills the viewport width'
-/>;
+/>
 
-{
-  /* Constrained width */
-}
-<View className='max-w-4xl mx-auto'>
+{/* Constrained width */}
+<Box lx={{ maxWidth: 's400' }}>
   <Banner
     title='Constrained'
     description='This banner is limited by its container'
   />
-</View>;
+</Box>
 
-{
-  /* Responsive width */
-}
-<View className='w-full lg:max-w-2xl'>
-  <Banner title='Responsive' description='Width adapts based on screen size' />
-</View>;
+{/* With margin */}
+<Banner
+  title='With Layout Adjustment'
+  description='Use lx prop for layout adjustments'
+  lx={{ marginTop: 's16' }}
+/>
 ```
 
 ### Complete Example
@@ -263,7 +262,7 @@ To control banner width, use container elements:
 Here's a comprehensive example showing all Banner features:
 
 ```tsx
-import { Banner, Button } from '@ledgerhq/lumen-ui-react';
+import { Banner, Button, Box } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function NotificationCenter() {
@@ -299,7 +298,7 @@ function NotificationCenter() {
   };
 
   return (
-    <View className='space-y-4'>
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
       {notifications.map((notification) => (
         <Banner
           key={notification.id}
@@ -332,20 +331,20 @@ function NotificationCenter() {
           }
         />
       ))}
-    </View>
+    </Box>
   );
 }
 ```
 
-### Custom Styling
+### Layout Adjustments with lx
 
-While the component comes with predefined styles, you can extend them using Tailwind classes for layout purposes:
+Use the `lx` prop for layout adjustments like margins or positioning:
 
 ```tsx
 <Banner
-  title='Mobile Alert'
-  description='This banner only shows on mobile devices'
-  className='md:hidden mb-4' // Custom responsive display and margin
+  title='With Margin'
+  description='This banner has a top margin'
+  lx={{ marginTop: 's16', marginBottom: 's8' }}
   appearance='info'
 />
 ```
@@ -354,40 +353,38 @@ While the component comes with predefined styles, you can extend them using Tail
 
 The following guidelines ensure consistent usage of the Banner component and maintain design system principles.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's16' }}>
+
   <DoVsDontRow>
     <DoBlockItem
-      title='Use container elements to control width'
-      description='Wrap Banner in container elements to control its width and layout'
+      title='Use lx for layout adjustments only'
+      description='Use the lx prop for margins, positioning, and other layout adjustments'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<View className='max-w-md'>
-  <Banner
-    title='System Notice'
-    description='Maintenance scheduled for tonight'
-    appearance='warning'
-  />
-</View>
+<Banner
+  title='System Notice'
+  description='Maintenance scheduled for tonight'
+  lx={{ marginTop: 's16' }}
+  appearance='warning'
+/>
 ```
 
     </DoBlockItem>
     <DontBlockItem
-      title="Don't use className for width control"
-      description='Avoid using className to set width directly on Banner'
+      title="Don't use lx for appearance changes"
+      description='Avoid using lx to modify colors, padding, or other core appearance styles'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<View className='max-w-md'>
-  <Banner
-    title='System Notice'
-    description='Maintenance scheduled for tonight'
-    className='w-80'
-    appearance='warning'
-  />
-</View>
+<Banner
+  title='System Notice'
+  description='Maintenance scheduled for tonight'
+  lx={{ backgroundColor: 'accent', padding: 's24' }}
+  appearance='warning'
+/>
 ```
 
     </DontBlockItem>
@@ -435,7 +432,7 @@ The following guidelines ensure consistent usage of the Banner component and mai
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import React from 'react';
 import { Button } from '../Button';
+import { Box, Text } from '../Utility';
 import { Banner } from './Banner';
 
 const meta: Meta<typeof Banner> = {
@@ -92,13 +93,13 @@ export const Base: Story = {
     secondaryAction: 'None',
   },
   render: (args) => (
-    // max-w-md container for visual presentation - not required for Banner component
-    <div className='max-w-md'>
+    // maxWidth container for visual presentation - not required for Banner component
+    <Box lx={{ maxWidth: 's400' }}>
       <Banner
         {...args}
         description={'This is additional information about the banner.'}
       />
-    </div>
+    </Box>
   ),
   parameters: {
     docs: {
@@ -123,9 +124,9 @@ export const WithDescription: Story = {
     description: 'This is additional information about the banner.',
   },
   render: (args) => (
-    <div className='max-w-md'>
+    <Box lx={{ maxWidth: 's400' }}>
       <Banner {...args} />
-    </div>
+    </Box>
   ),
   parameters: {
     docs: {
@@ -152,9 +153,9 @@ export const WithActions: Story = {
     secondaryAction: 'Button',
   },
   render: (args) => (
-    <div className='max-w-md'>
+    <Box lx={{ maxWidth: 's400' }}>
       <Banner {...args} />
-    </div>
+    </Box>
   ),
   parameters: {
     docs: {
@@ -218,9 +219,9 @@ export const WithFullFeatures: Story = {
     closeAriaLabel: 'Close banner',
   },
   render: (args) => (
-    <div className='max-w-md'>
+    <Box lx={{ maxWidth: 's400' }}>
       <Banner {...args} />
-    </div>
+    </Box>
   ),
   parameters: {
     docs: {
@@ -267,8 +268,15 @@ export const AppearanceShowcase: Story = {
     ] as const;
 
     return (
-      // max-w-md container for visual presentation - not required for Banner component
-      <div className='flex max-w-md flex-col gap-16 p-8'>
+      // maxWidth container for visual presentation - not required for Banner component
+      <Box
+        lx={{
+          flexDirection: 'column',
+          maxWidth: 's400',
+          gap: 's16',
+          padding: 's8',
+        }}
+      >
         {appearances.map(({ name, appearance }) => (
           <Banner
             key={appearance}
@@ -279,15 +287,21 @@ export const AppearanceShowcase: Story = {
             closeAriaLabel={`Close ${name} banner`}
           />
         ))}
-      </div>
+      </Box>
     );
   },
 };
 
 export const ContentVariations: Story = {
   render: () => (
-    // max-w-md container for visual presentation - not required for Banner component
-    <div className='flex max-w-md flex-col gap-16 p-8'>
+    <Box
+      lx={{
+        flexDirection: 'column',
+        maxWidth: 's400',
+        gap: 's16',
+        padding: 's8',
+      }}
+    >
       <Banner title='Title Only' />
       <Banner description='Description only without title' />
       <Banner title='With Description' description='Additional details here.' />
@@ -356,16 +370,16 @@ export const ContentVariations: Story = {
         onClose={() => console.log('Closed')}
         closeAriaLabel='Close banner'
       />
-    </div>
+    </Box>
   ),
 };
 
 export const NaturalWidth: Story = {
   render: () => (
-    <div className='space-y-4'>
-      <p className='text-muted body-3'>
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+      <Text typography='body3' lx={{ color: 'muted' }}>
         Banner without container constraints - takes full parent width:
-      </p>
+      </Text>
       <Banner
         title='Full Width Banner'
         description='This banner demonstrates natural width behavior - it fills the full width of its parent container.'
@@ -381,16 +395,24 @@ export const NaturalWidth: Story = {
         onClose={() => console.log('Closed')}
         closeAriaLabel='Close full width banner'
       />
-    </div>
+    </Box>
   ),
 };
 
 export const ResponsiveLayout: Story = {
   render: () => (
-    <div className='grid w-400 grid-cols-1 gap-16 bg-muted-pressed p-16'>
-      <div className='text-muted body-4-semi-bold'>
+    <Box
+      lx={{
+        width: 's400',
+        flexDirection: 'column',
+        gap: 's16',
+        backgroundColor: 'mutedPressed',
+        padding: 's16',
+      }}
+    >
+      <Text typography='body4SemiBold' lx={{ color: 'muted' }}>
         Container with a fixed width
-      </div>
+      </Text>
       <Banner
         title='Short Title'
         description='Short description'
@@ -409,7 +431,7 @@ export const ResponsiveLayout: Story = {
         onClose={() => console.log('Closed')}
         closeAriaLabel='Close overflow banner'
       />
-    </div>
+    </Box>
   ),
 };
 
@@ -417,17 +439,17 @@ export const InteractiveDismiss: Story = {
   render: (args) => {
     const [visible, setVisible] = React.useState(true);
 
-    if (!visible) return <p>Banner dismissed</p>;
+    if (!visible) return <Text typography='body2'>Banner dismissed</Text>;
 
     return (
-      <div className='max-w-md'>
+      <Box lx={{ maxWidth: 's400' }}>
         <Banner
           {...args}
           title='Click close to dismiss'
           onClose={() => setVisible(false)}
           closeAriaLabel='Dismiss interactive banner'
         />
-      </div>
+      </Box>
     );
   },
 };
@@ -445,7 +467,7 @@ export const InteractiveActions: Story = {
     };
 
     return (
-      <div className='max-w-md'>
+      <Box lx={{ maxWidth: 's400' }}>
         <Banner
           {...args}
           appearance={
@@ -483,7 +505,7 @@ export const InteractiveActions: Story = {
           onClose={() => setState('idle')}
           closeAriaLabel='Reset banner state'
         />
-      </div>
+      </Box>
     );
   },
 };

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

@@ -6,6 +6,8 @@ import { Button } from '../Button';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Banner } from './Banner';
 
+const { colors } = ledgerLiveThemes.dark;
+
 const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
     {children}
@@ -29,7 +31,9 @@ describe('Banner Component', () => {
         <Banner testID='banner-id' title='Info Banner' appearance='info' />
       </TestWrapper>,
     );
-    expect(getByTestId('banner-id').props.className).toContain('bg-surface');
+    expect(getByTestId('banner-id').props.style.backgroundColor).toBe(
+      colors.bg.surface,
+    );
 
     rerender(
       <TestWrapper>
@@ -40,7 +44,9 @@ describe('Banner Component', () => {
         />
       </TestWrapper>,
     );
-    expect(getByTestId('banner-id').props.className).toContain('bg-success');
+    expect(getByTestId('banner-id').props.style.backgroundColor).toBe(
+      colors.bg.success,
+    );
 
     rerender(
       <TestWrapper>
@@ -51,14 +57,18 @@ describe('Banner Component', () => {
         />
       </TestWrapper>,
     );
-    expect(getByTestId('banner-id').props.className).toContain('bg-warning');
+    expect(getByTestId('banner-id').props.style.backgroundColor).toBe(
+      colors.bg.warning,
+    );
 
     rerender(
       <TestWrapper>
         <Banner testID='banner-id' title='Error Banner' appearance='error' />
       </TestWrapper>,
     );
-    expect(getByTestId('banner-id').props.className).toContain('bg-error');
+    expect(getByTestId('banner-id').props.style.backgroundColor).toBe(
+      colors.bg.error,
+    );
   });
 
   it('should render primary and secondary actions', () => {

package/src/lib/Components/Banner/Banner.tsx

@@ -1,8 +1,8 @@
-import { cn, isTextChildren } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import React from 'react';
-import { Text, View } from 'react-native';
+import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
+import React, { ComponentType } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
 import {
   InformationFill,
   CheckmarkCircleFill,
@@ -11,31 +11,88 @@ import {
   Close,
 } from '../../Symbols';
 import { ViewRef } from '../../types';
+import { IconProps } from '../Icon';
 import { IconButton } from '../IconButton';
+import { Box } from '../Utility';
 import { Wrap } from '../Wrap';
 import { BannerProps } from './types';
 
-const iconMap = {
-  info: <InformationFill className='text-base' />,
-  success: <CheckmarkCircleFill className='text-success' />,
-  warning: <WarningFill className='text-warning' />,
-  error: <DeleteCircleFill className='text-error' />,
+type Appearance = NonNullable<BannerProps['appearance']>;
+
+const iconColorMap: Record<
+  Appearance,
+  'base' | 'success' | 'warning' | 'error'
+> = {
+  info: 'base',
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
 };
 
-const bannerVariants = {
-  root: cva(
-    'flex w-full flex-row items-start gap-8 rounded-md p-16 text-base',
-    {
-      variants: {
-        appearance: {
-          info: 'bg-surface',
-          success: 'bg-success',
-          warning: 'bg-warning',
-          error: 'bg-error',
+const useStyles = ({ appearance }: { appearance: Appearance }) => {
+  return useStyleSheet(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        info: t.colors.bg.surface,
+        success: t.colors.bg.success,
+        warning: t.colors.bg.warning,
+        error: t.colors.bg.error,
+      };
+
+      return {
+        root: {
+          flexDirection: 'row',
+          width: t.sizes.full,
+          alignItems: 'flex-start',
+          gap: t.spacings.s8,
+          borderRadius: t.borderRadius.md,
+          padding: t.spacings.s16,
+          backgroundColor: bgColors[appearance],
+        },
+        iconWrapper: {
+          flexShrink: 0,
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          paddingVertical: t.spacings.s4,
+        },
+        contentWrapper: {
+          marginRight: t.spacings.s8,
+          flex: 1,
+          flexDirection: 'column',
+          gap: t.spacings.s8,
+          paddingVertical: t.spacings.s4,
+        },
+        textWrapper: {
+          flexDirection: 'column',
+          gap: t.spacings.s4,
         },
-      },
+        title: StyleSheet.flatten([
+          t.typographies.body1SemiBold,
+          {
+            color: t.colors.text.base,
+          },
+        ]),
+        description: StyleSheet.flatten([
+          t.typographies.body2,
+          {
+            color: t.colors.text.base,
+          },
+        ]),
+        actionsWrapper: {
+          flexDirection: 'row',
+          gap: t.spacings.s4,
+        },
+      };
     },
-  ),
+    [appearance],
+  );
+};
+
+const iconsMap: Record<Appearance, ComponentType<IconProps>> = {
+  info: InformationFill,
+  success: CheckmarkCircleFill,
+  warning: WarningFill,
+  error: DeleteCircleFill,
 };
 
 /**
@@ -46,11 +103,11 @@ const bannerVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-implementation--docs#dos-and-donts Guidelines}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the banner's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
- * import { Banner } from '@ledgerhq/lumen-ui-react';
+ * import { Banner } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic info banner
  * <Banner title="Information" appearance="info" />
@@ -80,7 +137,8 @@ export const Banner = React.forwardRef<ViewRef, BannerProps>(
       description,
       primaryAction,
       secondaryAction,
-      className,
+      lx = {},
+      style,
       onClose,
       closeAriaLabel,
       ...props
@@ -88,28 +146,33 @@ export const Banner = React.forwardRef<ViewRef, BannerProps>(
     ref,
   ) => {
     const { t } = useCommonTranslation();
-    const icon = iconMap[appearance];
+    const styles = useStyles({ appearance });
+    const IconComponent = iconsMap[appearance];
+    const iconColor = iconColorMap[appearance];
 
     return (
-      <View
+      <Box
         ref={ref}
-        className={cn(className, bannerVariants.root({ appearance }))}
+        lx={lx}
+        style={StyleSheet.flatten([styles.root, style])}
         {...props}
       >
-        <View className='flex shrink-0 flex-row items-start py-4'>{icon}</View>
-        <View className='mr-8 flex flex-1 flex-col gap-8 py-4'>
-          <View className='flex flex-col gap-4'>
+        <View style={styles.iconWrapper}>
+          <IconComponent lx={{ color: iconColor }} />
+        </View>
+        <View style={styles.contentWrapper}>
+          <View style={styles.textWrapper}>
             {title && (
-              <Text className='line-clamp-2 text-base body-1-semi-bold'>
+              <Text style={styles.title} numberOfLines={2}>
                 {title}
               </Text>
             )}
             {description && (
-              <View className='line-clamp-5 body-2'>
+              <View>
                 <Wrap
                   if={isTextChildren(description)}
                   with={(children) => (
-                    <Text className='text-base'>{children}</Text>
+                    <Text style={styles.description}>{children}</Text>
                   )}
                 >
                   {description}
@@ -118,7 +181,7 @@ export const Banner = React.forwardRef<ViewRef, BannerProps>(
             )}
           </View>
           {(primaryAction || secondaryAction) && (
-            <View className='flex flex-row gap-4'>
+            <View style={styles.actionsWrapper}>
               {primaryAction}
               {secondaryAction}
             </View>
@@ -136,7 +199,9 @@ export const Banner = React.forwardRef<ViewRef, BannerProps>(
             }
           />
         )}
-      </View>
+      </Box>
     );
   },
 );
+
+Banner.displayName = 'Banner';