@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/src/lib/Components/AmountInput/AmountInput.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as AmountInputStories from './AmountInput.stories';
 import { AmountInput } from './AmountInput';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/AmountInput' of={AmountInputStories} />
 
@@ -277,194 +275,6 @@ Use the `editable` prop to disable the input:
 <AmountInput value='1000' currencyText='USD' editable={false} />
 ```
 
-## Do's and Don'ts
-
-<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use integer-only for whole number scenarios'
-      description='Disable decimals for quantities, counts, or other whole number inputs'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [quantity, setQuantity] = useState('');
-
-// Use integer-only for whole number scenarios (quantity, age, etc.)
-<AmountInput
-  value={quantity}
-  onChangeText={setQuantity}
-  currencyText='items'
-  allowDecimals={false}
-  maxIntegerLength={4}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't allow decimals for count-based inputs"
-      description='Items, quantities, and counts should always be whole numbers'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [quantity, setQuantity] = useState('');
-
-<AmountInput
-  value={quantity}
-  onChangeText={setQuantity}
-  currencyText='items'
-  allowDecimals={true}
-  maxIntegerLength={4}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Always use controlled input pattern'
-      description='AmountInput requires both value and onChangeText props'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use uncontrolled pattern"
-      description='AmountInput does not support defaultValue - always use controlled pattern'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<AmountInput
-  defaultValue='0.00'
-  currencyText='USD'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use isInvalid for error states'
-      description='Use the isInvalid prop to indicate validation errors'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-const [hasError, setHasError] = useState(false);
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-  isInvalid={hasError}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use custom error props"
-      description='Use the isInvalid prop for error styling. AmountInput does not accept ad-hoc validation props.'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-const [hasError, setHasError] = useState(false);
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-  status={hasError ? 'error' : undefined}
-  helperText={hasError ? 'Invalid amount' : undefined}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use appropriate length limits'
-      description='Set maxIntegerLength and maxDecimalLength based on your use case'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AmountInput
-  value={amount}
-  onChangeText={setAmount}
-  currencyText='$'
-  maxIntegerLength={9}
-  maxDecimalLength={2}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use overly restrictive or excessive limits"
-      description='Length limits should match real-world requirements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AmountInput
-  value={amount}
-  onChangeText={setAmount}
-  currencyText='$'
-  maxIntegerLength={1}
-  maxDecimalLength={25}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

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(