@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.ts

@@ -6,6 +6,7 @@ type FormatOptions = {
   thousandsSeparator: boolean;
   maxIntegerLength: number;
   maxDecimalLength: number;
+  decimalSeparator: '.' | ',';
 };
 
 type UseAmountInputFormattingArgs = {
@@ -32,6 +33,7 @@ export const useAmountInputFormatting = ({
       formatOptions.thousandsSeparator,
       formatOptions.maxIntegerLength,
       formatOptions.maxDecimalLength,
+      formatOptions.decimalSeparator,
     ],
   );
 

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

@@ -1,11 +1,14 @@
 import figma from '@figma/code-connect';
+import { DotIndicator, getDotIndicatorProps } from '../DotIndicator';
 import { Avatar } from './Avatar';
 
 figma.connect(
   Avatar,
   'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11097-8',
   {
-    imports: ["import { Avatar } from '@ledgerhq/lumen-ui-rnative'"],
+    imports: [
+      "import { Avatar, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative'",
+    ],
     props: {
       appearance: figma.enum('appearance', {
         gray: 'gray',
@@ -17,19 +20,26 @@ figma.connect(
         lg: 'lg',
         xl: 'xl',
       }),
-      showNotification: figma.boolean('show-notification', {
-        true: true,
-        false: false,
-      }),
+      showNotification: figma.boolean('show-notification'),
+    },
+    example: (props) => {
+      const avatar = (
+        <Avatar
+          src='https://example-image.com'
+          appearance={props.appearance}
+          size={props.size}
+          alt="John Doe's Avatar"
+        />
+      );
+
+      return props.showNotification &&
+        (props.size === 'sm' || props.size === 'md') ? (
+        <DotIndicator {...getDotIndicatorProps('avatar', props.size)}>
+          {avatar}
+        </DotIndicator>
+      ) : (
+        avatar
+      );
     },
-    example: (props) => (
-      <Avatar
-        src='https://example-image.com'
-        appearance={props.appearance}
-        size={props.size}
-        alt="John Doe's Avatar"
-        showNotification={props.showNotification}
-      />
-    ),
   },
 );

package/src/lib/Components/Avatar/Avatar.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as AvatarStories from './Avatar.stories';
 import { Avatar } from './Avatar';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
 <Meta title='Core/Avatar' of={AvatarStories} />
@@ -60,11 +58,22 @@ The Avatar component handles two primary states automatically:
 
 ### Notification Indicator
 
-An optional notification indicator can be displayed to show status or alerts:
+To show a status or alert dot, wrap the Avatar in a `DotIndicator` and derive the dot props from the avatar size with the `getDotIndicatorProps` helper:
 
-- **showNotification**: Boolean prop to toggle the notification dot (default: false)
+```tsx
+import { Avatar, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative';
+
+<DotIndicator
+  {...getDotIndicatorProps('avatar', 'md')}
+  accessibilityLabel="New notifications"
+>
+  <Avatar src="https://example.com/photo.jpg" size="md" />
+</DotIndicator>;
+```
+
+> The notification dot is only supported on the `sm` and `md` sizes.
 
-> The notification dot is only rendered on the `sm` and `md` sizes. It is suppressed on `lg` and `xl` even when `showNotification` is `true`.
+> When the dot conveys state to the user, pass an `accessibilityLabel` to `DotIndicator`.
 
 <Canvas of={AvatarStories.NotificationShowcase} />
 
@@ -116,21 +125,23 @@ function MyComponent() {
 
 ### With Notification
 
-Display a notification indicator to show status or alerts:
+Wrap the Avatar in a `DotIndicator` to show a status or alert dot, using `getDotIndicatorProps` to match the dot to the avatar size:
 
 ```tsx
-import { Avatar } from '@ledgerhq/lumen-ui-rnative';
+import { Avatar, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
-  const hasNotifications = true;
-  
   return (
-    <Avatar 
-      src="https://example.com/photo.jpg" 
-      showNotification={hasNotifications}
-      size="md" 
-      alt="User profile"
-    />
+    <DotIndicator
+      {...getDotIndicatorProps('avatar', 'md')}
+      accessibilityLabel="New notifications"
+    >
+      <Avatar
+        src="https://example.com/photo.jpg"
+        size="md"
+        alt="User profile"
+      />
+    </DotIndicator>
   );
 }
 ```
@@ -159,7 +170,7 @@ function MyComponent() {
 Avatars are commonly used as interactive triggers for navigation or actions. Wrap the Avatar in a `Pressable` component:
 
 ```tsx
-import { Avatar } from '@ledgerhq/lumen-ui-rnative';
+import { Avatar, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative';
 import { Pressable, Linking } from 'react-native';
 
 function UserProfile() {
@@ -177,12 +188,12 @@ function UserProfile() {
         backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
       })}
     >
-      <Avatar 
-        src="https://example.com/photo.jpg"
-        size="md" 
-        alt="User menu" 
-        showNotification 
-      />
+      <DotIndicator
+        {...getDotIndicatorProps('avatar', 'md')}
+        accessibilityLabel="New notifications"
+      >
+        <Avatar src="https://example.com/photo.jpg" size="md" alt="User menu" />
+      </DotIndicator>
     </Pressable>
   );
 }
@@ -193,6 +204,7 @@ function UserProfile() {
 - Use `borderRadius: 9999` to maintain circular touch area
 - Add opacity changes for visual feedback on press
 - Provide appropriate `alt` text for accessibility
+- Pass an `accessibilityLabel` to `DotIndicator` so the notification state is announced by screen readers
 
 ### Custom Styling
 
@@ -221,7 +233,7 @@ You can also use the `style` prop for escape-hatch styling when needed:
 Here's a comprehensive example showing all Avatar features in a user profile context:
 
 ```tsx
-import { Avatar, Box, Text } from '@ledgerhq/lumen-ui-rnative';
+import { Avatar, Box, Text, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative';
 import { Pressable } from 'react-native';
 import { useState } from 'react';
 
@@ -237,6 +249,14 @@ function UserProfileHeader() {
     // Navigate to profile or show menu
   };
 
+  const avatar = (
+    <Avatar
+      src={user.avatar}
+      size="md"
+      alt={`${user.name} profile picture`}
+    />
+  );
+
   return (
     <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12', padding: 's16' }}>
       <Pressable
@@ -247,12 +267,16 @@ function UserProfileHeader() {
           backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
         })}
       >
-        <Avatar
-          src={user.avatar}
-          size="md"
-          showNotification={user.hasNotifications}
-          alt={`${user.name} profile picture`}
-        />
+        {user.hasNotifications ? (
+          <DotIndicator
+            {...getDotIndicatorProps('avatar', 'md')}
+            accessibilityLabel="You have new notifications"
+          >
+            {avatar}
+          </DotIndicator>
+        ) : (
+          avatar
+        )}
       </Pressable>
       <Box lx={{ flexDirection: 'column' }}>
         <Text>{user.name}</Text>
@@ -267,46 +291,6 @@ function UserProfileHeader() {
 }
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Avatar component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide descriptive alt text'
-      description='Use meaningful alt text for better accessibility and screen reader support'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Avatar 
-  src="https://example.com/photo.jpg" 
-  alt="John Doe profile picture" 
-  size="md"
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit alt text"
-      description='Missing alt text reduces accessibility for screen reader users'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Avatar 
-  src="https://example.com/photo.jpg" 
-  size="md"
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 ## Platform Considerations
 

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { View, Text, Pressable, Linking } from 'react-native';
 
+import { DotIndicator, getDotIndicatorProps } from '../DotIndicator';
 import { Box } from '../Utility';
 import { Avatar } from './Avatar';
 
@@ -30,13 +31,12 @@ export const Base: Story = {
     src: exampleSrc,
     alt: 'avatar',
     size: 'md',
-    showNotification: false,
   },
   render: (args) => <Avatar {...args} />,
   parameters: {
     docs: {
       source: {
-        code: `<Avatar src="https://example.com" size="md" alt="avatar" showNotification={false} />`,
+        code: `<Avatar src="https://example.com" size="md" alt="avatar" />`,
       },
     },
   },
@@ -52,39 +52,19 @@ export const SizeShowcase: Story = {
       }}
     >
       <View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
-        <Avatar
-          src={exampleSrc}
-          alt='avatar'
-          size='sm'
-          showNotification={false}
-        />
+        <Avatar src={exampleSrc} alt='avatar' size='sm' />
         <Text style={{ marginTop: 4 }}>sm</Text>
       </View>
       <View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
-        <Avatar
-          src={exampleSrc}
-          alt='avatar'
-          size='md'
-          showNotification={false}
-        />
+        <Avatar src={exampleSrc} alt='avatar' size='md' />
         <Text style={{ marginTop: 4 }}>md</Text>
       </View>
       <View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
-        <Avatar
-          src={exampleSrc}
-          alt='avatar'
-          size='lg'
-          showNotification={false}
-        />
+        <Avatar src={exampleSrc} alt='avatar' size='lg' />
         <Text style={{ marginTop: 4 }}>lg</Text>
       </View>
       <View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
-        <Avatar
-          src={exampleSrc}
-          alt='avatar'
-          size='xl'
-          showNotification={false}
-        />
+        <Avatar src={exampleSrc} alt='avatar' size='xl' />
         <Text style={{ marginTop: 4 }}>xl</Text>
       </View>
     </Box>
@@ -95,18 +75,8 @@ const AppearanceShowcaseRender = () => {
   return (
     <Box lx={{ gap: 's8' }}>
       <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
-        <Avatar
-          alt='gray fallback'
-          size='md'
-          appearance='gray'
-          showNotification={false}
-        />
-        <Avatar
-          alt='transparent fallback'
-          size='md'
-          appearance='transparent'
-          showNotification={false}
-        />
+        <Avatar alt='gray fallback' size='md' appearance='gray' />
+        <Avatar alt='transparent fallback' size='md' appearance='transparent' />
       </Box>
       <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
         <Avatar
@@ -114,14 +84,12 @@ const AppearanceShowcaseRender = () => {
           alt='gray with image'
           size='md'
           appearance='gray'
-          showNotification={false}
         />
         <Avatar
           src={exampleSrc}
           alt='transparent with image'
           size='md'
           appearance='transparent'
-          showNotification={false}
         />
       </Box>
     </Box>
@@ -137,13 +105,12 @@ export const FallbackShowcase: Story = {
     src: 'https://brokenLink.random',
     size: 'md',
     alt: 'Fallback example',
-    showNotification: false,
   },
   render: (args) => <Avatar {...args} />,
   parameters: {
     docs: {
       source: {
-        code: `<Avatar src="https://brokenLink.random" size="md" alt="Fallback example" showNotification={false} />`,
+        code: `<Avatar src="https://brokenLink.random" size="md" alt="Fallback example" />`,
       },
     },
   },
@@ -157,13 +124,10 @@ export const NotificationShowcase: Story = {
         gap: 's16',
       }}
     >
-      <Avatar
-        src={exampleSrc}
-        alt='avatar'
-        size='md'
-        showNotification={false}
-      />
-      <Avatar src={exampleSrc} alt='avatar' size='md' showNotification={true} />
+      <Avatar src={exampleSrc} alt='avatar' size='md' />
+      <DotIndicator {...getDotIndicatorProps('avatar', 'md')}>
+        <Avatar src={exampleSrc} alt='avatar' size='md' />
+      </DotIndicator>
     </Box>
   ),
 };
@@ -181,7 +145,9 @@ export const InteractiveShowcase: Story = {
         backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
       })}
     >
-      <Avatar src={exampleSrc} size='md' showNotification />
+      <DotIndicator {...getDotIndicatorProps('avatar', 'md')}>
+        <Avatar src={exampleSrc} size='md' />
+      </DotIndicator>
     </Pressable>
   ),
 };

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

@@ -1,6 +1,7 @@
 import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, waitFor } from '@testing-library/react-native';
+import { DotIndicator, getDotIndicatorProps } from '../DotIndicator';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Avatar } from './Avatar';
 
@@ -182,10 +183,12 @@ describe('Avatar Component', () => {
     });
   });
 
-  it('should show notification indicator when showNotification is true', () => {
+  it('should render a notification indicator when wrapped in DotIndicator', () => {
     const { getByTestId, toJSON } = render(
       <TestWrapper>
-        <Avatar testID='avatar-id' showNotification />
+        <DotIndicator {...getDotIndicatorProps('avatar', 'md')}>
+          <Avatar testID='avatar-id' size='md' />
+        </DotIndicator>
       </TestWrapper>,
     );
 
@@ -196,21 +199,12 @@ describe('Avatar Component', () => {
     expect(getByTestId('avatar-id')).toBeTruthy();
   });
 
-  it('should not show notification indicator by default', () => {
-    const { toJSON } = render(
-      <TestWrapper>
-        <Avatar testID='avatar-id' />
-      </TestWrapper>,
-    );
-
-    const tree = toJSON();
-    expect(tree.props.testID).toBe('avatar-id');
-  });
-
-  it('should apply correct notification indicator size based on avatar size', () => {
+  it('should style the notification indicator based on the avatar size', () => {
     const { toJSON, rerender } = render(
       <TestWrapper>
-        <Avatar testID='avatar-id' size='sm' showNotification />
+        <DotIndicator {...getDotIndicatorProps('avatar', 'sm')}>
+          <Avatar testID='avatar-id' size='sm' />
+        </DotIndicator>
       </TestWrapper>,
     );
 
@@ -219,7 +213,9 @@ describe('Avatar Component', () => {
 
     rerender(
       <TestWrapper>
-        <Avatar testID='avatar-id' size='md' showNotification />
+        <DotIndicator {...getDotIndicatorProps('avatar', 'md')}>
+          <Avatar testID='avatar-id' size='md' />
+        </DotIndicator>
       </TestWrapper>,
     );
 
@@ -227,22 +223,6 @@ describe('Avatar Component', () => {
     expect(dot.props.style.height).toBe(sizes.s12);
   });
 
-  it.each(['lg', 'xl'] as const)(
-    'should not render the notification indicator on size=%s even when showNotification is true',
-    (size) => {
-      const { toJSON } = render(
-        <TestWrapper>
-          <Avatar testID='avatar-id' size={size} showNotification />
-        </TestWrapper>,
-      );
-
-      const tree = toJSON();
-      expect(tree.props.testID).toBe('avatar-id');
-      expect(tree.props.accessibilityRole).toBe('image');
-      expect(tree.props.accessibilityLabel).toBe('avatar');
-    },
-  );
-
   it('should apply custom styles', () => {
     const customStyle = { borderWidth: 2 };
     const { getByTestId } = render(

package/src/lib/Components/Avatar/Avatar.tsx

@@ -1,9 +1,8 @@
-import { useState, useEffect } from 'react';
-import { StyleSheet, Image } from 'react-native';
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { User } from '../../Symbols';
-import { DotIndicator } from '../DotIndicator';
 import { Box } from '../Utility';
 import type { AvatarProps } from './types';
 
@@ -17,13 +16,6 @@ const fallbackSizes = {
   xl: 40,
 } as const;
 
-const dotSizeMap: Partial<
-  Record<Size, NonNullable<React.ComponentProps<typeof DotIndicator>['size']>>
-> = {
-  sm: 'lg',
-  md: 'xl',
-};
-
 const useStyles = ({
   appearance,
   size,
@@ -80,9 +72,6 @@ const useStyles = ({
  * import { Avatar } from '@ledgerhq/lumen-ui-rnative';
  *
  * <Avatar src="https://example.com/photo.jpg" size="md" />
- *
- * // With notification indicator
- * <Avatar src="https://example.com/photo.jpg" showNotification />
  */
 export const Avatar = ({
   lx,
@@ -91,8 +80,6 @@ export const Avatar = ({
   alt = 'avatar',
   appearance = 'transparent',
   size = 'md',
-  showNotification: showNotificationProp = false,
-  testID,
   ref,
   ...props
 }: AvatarProps) => {
@@ -101,15 +88,7 @@ export const Avatar = ({
   const shouldFallback = !src || error;
   const styles = useStyles({ appearance, size });
 
-  const resolvedAlt = alt || t('components.avatar.defaultAlt');
-
-  // dot indicator is not visible on larger sizes, regardless of the `showNotification` prop
-  const showNotification =
-    showNotificationProp && (size === 'sm' || size === 'md');
-
-  const accessibilityLabel = showNotification
-    ? `${resolvedAlt}, ${t('components.avatar.notificationAriaLabel')}`
-    : resolvedAlt;
+  const resolvedAlt = alt || t('components.avatar.defaultAriaLabel');
 
   useEffect(() => {
     setError(false);
@@ -121,8 +100,7 @@ export const Avatar = ({
       lx={lx}
       style={StyleSheet.flatten([styles.root, style])}
       accessibilityRole='image'
-      accessibilityLabel={accessibilityLabel}
-      testID={showNotification ? undefined : testID}
+      accessibilityLabel={resolvedAlt}
       {...props}
     >
       {shouldFallback ? (
@@ -143,13 +121,5 @@ export const Avatar = ({
     </Box>
   );
 
-  if (showNotification) {
-    return (
-      <DotIndicator size={dotSizeMap[size]} appearance='red' testID={testID}>
-        {avatarContent}
-      </DotIndicator>
-    );
-  }
-
   return avatarContent;
 };

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

@@ -23,10 +23,4 @@ export type AvatarProps = {
    * @default md
    */
   size?: 'sm' | 'md' | 'lg' | 'xl';
-  /**
-   * Whether to show the notifications indicator.
-   * @optional
-   * @default false
-   */
-  showNotification?: boolean;
 } & Omit<StyledViewProps, 'children'>;