@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.26

package/dist/typescript/src/lib/Components/index.d.ts

@@ -4,12 +4,15 @@ export * from './AmountInput';
 export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
+export * from './DotCount';
+export * from './DotIndicator';
 export * from './Button';
 export * from './Card';
 export * from './CardButton';
 export * from './ContentBanner';
 export * from './Checkbox';
 export * from './Divider';
+export * from './DotIcon';
 export * from './DotSymbol';
 export * from './Icon';
 export * from './IconButton';

package/dist/typescript/src/lib/Components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/src/index.ts

@@ -1,4 +1,5 @@
 export { type SupportedLocale, Languages } from './i18n';
+export { useTheme, useStyleSheet } from './styles';
 export * from './lib/Components';
 export * from './lib/Animations';
 export * from './lib/Haptics';

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

@@ -4,7 +4,7 @@ import { render, waitFor } from '@testing-library/react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Avatar } from './Avatar';
 
-const { colors, sizes } = ledgerLiveThemes.dark;
+const { sizes } = ledgerLiveThemes.dark;
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
@@ -145,45 +145,39 @@ describe('Avatar Component', () => {
   });
 
   it('should show notification indicator when showNotification is true', () => {
-    const { getByTestId } = render(
+    const { getByTestId, toJSON } = render(
       <TestWrapper>
         <Avatar testID='avatar-id' showNotification />
       </TestWrapper>,
     );
 
-    const avatar = getByTestId('avatar-id');
-    const notificationIndicator = avatar.props.children[0];
-
-    expect(notificationIndicator).toBeTruthy();
-    expect(notificationIndicator.props.style.backgroundColor).toBe(
-      colors.bg.errorStrong,
-    );
+    const tree = toJSON();
+    expect(tree.children).toHaveLength(2);
+    expect(tree.children[0].props.accessibilityRole).toBe('image');
+    expect(tree.children[0].props.pointerEvents).toBe('none');
+    expect(getByTestId('avatar-id')).toBeTruthy();
   });
 
   it('should not show notification indicator by default', () => {
-    const { getByTestId } = render(
+    const { toJSON } = render(
       <TestWrapper>
         <Avatar testID='avatar-id' />
       </TestWrapper>,
     );
 
-    const avatar = getByTestId('avatar-id');
-    const notificationIndicator = avatar.props.children[0];
-
-    expect(notificationIndicator).toBe(false);
+    const tree = toJSON();
+    expect(tree.props.testID).toBe('avatar-id');
   });
 
   it('should apply correct notification indicator size based on avatar size', () => {
-    const { getByTestId, rerender } = render(
+    const { toJSON, rerender } = render(
       <TestWrapper>
         <Avatar testID='avatar-id' size='sm' showNotification />
       </TestWrapper>,
     );
 
-    let avatar = getByTestId('avatar-id');
-    let notificationIndicator = avatar.props.children[0];
-    expect(notificationIndicator.props.style.width).toBe(sizes.s10);
-    expect(notificationIndicator.props.style.height).toBe(sizes.s10);
+    let dot = toJSON().children[0];
+    expect(dot.props.style.height).toBe(sizes.s10);
 
     rerender(
       <TestWrapper>
@@ -191,10 +185,8 @@ describe('Avatar Component', () => {
       </TestWrapper>,
     );
 
-    avatar = getByTestId('avatar-id');
-    notificationIndicator = avatar.props.children[0];
-    expect(notificationIndicator.props.style.width).toBe(sizes.s12);
-    expect(notificationIndicator.props.style.height).toBe(sizes.s12);
+    dot = toJSON().children[0];
+    expect(dot.props.style.height).toBe(sizes.s12);
 
     rerender(
       <TestWrapper>
@@ -202,10 +194,8 @@ describe('Avatar Component', () => {
       </TestWrapper>,
     );
 
-    avatar = getByTestId('avatar-id');
-    notificationIndicator = avatar.props.children[0];
-    expect(notificationIndicator.props.style.width).toBe(sizes.s16);
-    expect(notificationIndicator.props.style.height).toBe(sizes.s16);
+    dot = toJSON().children[0];
+    expect(dot.props.style.height).toBe(sizes.s16);
   });
 
   it('should apply custom styles', () => {

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

@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
-import { StyleSheet, Image, View } from 'react-native';
+import { StyleSheet, Image } 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';
 
@@ -14,6 +15,15 @@ const fallbackSizes = {
   lg: 32,
 } as const;
 
+const dotSizeMap: Record<
+  Size,
+  NonNullable<React.ComponentProps<typeof DotIndicator>['size']>
+> = {
+  sm: 'xs',
+  md: 'sm',
+  lg: 'md',
+};
+
 const useStyles = ({ size }: { size: Size }) => {
   return useStyleSheet(
     (t) => {
@@ -23,12 +33,6 @@ const useStyles = ({ size }: { size: Size }) => {
         lg: { size: t.sizes.s72, padding: t.spacings.s4 },
       };
 
-      const notificationsMap = {
-        sm: t.sizes.s10,
-        md: t.sizes.s12,
-        lg: t.sizes.s16,
-      };
-
       return {
         root: {
           position: 'relative',
@@ -40,16 +44,6 @@ const useStyles = ({ size }: { size: Size }) => {
           justifyContent: 'center',
           padding: sizeMap[size].padding,
         },
-        notification: {
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          width: notificationsMap[size],
-          height: notificationsMap[size],
-          borderRadius: 9999,
-          backgroundColor: t.colors.bg.errorStrong,
-          zIndex: 1,
-        },
         image: {
           width: '100%',
           height: '100%',
@@ -85,6 +79,7 @@ export const Avatar = ({
   alt = 'avatar',
   size = 'md',
   showNotification = false,
+  testID,
   ref,
   ...props
 }: AvatarProps) => {
@@ -103,18 +98,16 @@ export const Avatar = ({
     setError(false);
   }, [src]);
 
-  return (
+  const avatarContent = (
     <Box
       ref={ref}
       lx={lx}
       style={StyleSheet.flatten([styles.root, style])}
       accessibilityRole='image'
       accessibilityLabel={accessibilityLabel}
+      testID={showNotification ? undefined : testID}
       {...props}
     >
-      {showNotification && (
-        <View style={styles.notification} accessible={false} />
-      )}
       {shouldFallback ? (
         <User
           size={fallbackSizes[size]}
@@ -132,4 +125,14 @@ export const Avatar = ({
       )}
     </Box>
   );
+
+  if (showNotification) {
+    return (
+      <DotIndicator size={dotSizeMap[size]} appearance='red' testID={testID}>
+        {avatarContent}
+      </DotIndicator>
+    );
+  }
+
+  return avatarContent;
 };

package/src/lib/Components/DotCount/DotCount.mdx

@@ -0,0 +1,86 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DotCountStories from './DotCount.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+
+<Meta title='Communication/DotCount' of={DotCountStories} />
+
+# DotCount
+
+<CustomTabs>
+  <Tab label="Overview">
+
+    ## Introduction
+
+    DotCount displays a numeric count inside a colored pill. It supports two sizes (`lg` and `md`), two appearances (`base` and `red`), and can be pinned to the top-right of a child element.
+
+    > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=38-998).
+
+    ## Properties
+
+    <Canvas of={DotCountStories.Base} />
+    <Controls of={DotCountStories.Base} />
+
+    ## Sizes
+
+    DotCount comes in two sizes:
+
+    - **lg** - large pill size for prominent counters.
+    - **md** (default) - standard pill size, suitable for most use cases.
+
+    <Canvas of={DotCountStories.SizeShowcase} />
+
+    ## Appearances
+
+    Two color schemes are available:
+
+    - **base** (default) - neutral tone for general-purpose counters.
+    - **red** - attention-grabbing, typically used for unread counts or alerts.
+
+    <Canvas of={DotCountStories.AppearanceShowcase} />
+
+    ## Overflow & Max
+
+    When `value` exceeds `max`, the display shows `[max]+`. Values of `0` or below hide the text. If you need a DotCount-like component but without the count, consider the DotIndicator instead.
+
+    <Canvas of={DotCountStories.OverflowShowcase} />
+
+    ## With Children
+
+    When wrapping a child element, the count pill pins itself to the top-right corner.
+
+    <Canvas of={DotCountStories.WithChildren} />
+
+  </Tab>
+  <Tab label="Implementation">
+
+    ## Setup
+
+    Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+    ## Basic Usage
+
+    ```tsx
+    import { DotCount } from '@ledgerhq/lumen-ui-rnative';
+
+    function MyComponent() {
+      return <DotCount value={5} size="lg" />;
+    }
+    ```
+
+    ### Pinned to a child
+
+    ```tsx
+    <DotCount value={3} size="md">
+      <Avatar src="..." size="md" />
+    </DotCount>
+    ```
+
+    ### Custom max
+
+    ```tsx
+    <DotCount value={150} max={50} size="lg" />
+    {/* Renders "50+" */}
+    ```
+
+  </Tab>
+</CustomTabs>

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

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { useState } from 'react';
+import { Avatar } from '../Avatar/Avatar';
+import { MediaImage } from '../MediaImage/MediaImage';
+import {
+  SegmentedControl,
+  SegmentedControlButton,
+} from '../SegmentedControl/SegmentedControl';
+import { Box } from '../Utility/Box';
+import { DotCount } from './DotCount';
+
+const meta = {
+  component: DotCount,
+  title: 'Communication/DotCount',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['lg', 'md'],
+    },
+    appearance: {
+      control: 'radio',
+      options: ['base', 'red'],
+    },
+    value: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+  },
+} satisfies Meta<typeof DotCount>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    value: 3,
+    size: 'lg',
+    appearance: 'base',
+  },
+};
+
+export const SizeShowcase: Story = {
+  args: { value: 5 },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotCount value={5} size='lg' />
+      <DotCount value={5} size='md' />
+    </Box>
+  ),
+};
+
+export const AppearanceShowcase: Story = {
+  args: { value: 3 },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotCount value={3} size='lg' appearance='base' />
+      <DotCount value={3} size='lg' appearance='red' />
+      <DotCount value={3} size='lg' disabled />
+    </Box>
+  ),
+};
+
+export const OverflowShowcase: Story = {
+  args: { value: 100 },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotCount value={100} size='lg' />
+      <DotCount value={100} max={50} size='lg' />
+      <DotCount value={0} size='lg' />
+    </Box>
+  ),
+};
+
+export const WithChildren: Story = {
+  args: { value: 5 },
+  render: () => {
+    const [fitState, setFitState] = useState('preview');
+
+    return (
+      <Box lx={{ gap: 's24' }}>
+        <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+          <DotCount value={5} size='md'>
+            <MediaImage
+              src='https://crypto-icons.ledger.com/BTC.png'
+              alt='Bitcoin'
+              size={40}
+              shape='circle'
+            />
+          </DotCount>
+          <DotCount value={100} size='md'>
+            <Avatar
+              src='https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?q=80&w=774&auto=format&fit=crop'
+              size='md'
+            />
+          </DotCount>
+        </Box>
+        <SegmentedControl
+          selectedValue={fitState}
+          onSelectedChange={setFitState}
+          tabLayout='fit'
+          accessibilityLabel='Fit layout'
+        >
+          <SegmentedControlButton value='preview'>
+            Preview
+            <DotCount value={3} size='md' style={{ marginLeft: 6 }} />
+          </SegmentedControlButton>
+          <SegmentedControlButton value='raw'>Raw</SegmentedControlButton>
+          <SegmentedControlButton value='blame'>Blame</SegmentedControlButton>
+        </SegmentedControl>
+      </Box>
+    );
+  },
+};

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

@@ -0,0 +1,150 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import { createRef } from 'react';
+import { Text, type View } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { DotCount } from './DotCount';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('DotCount', () => {
+  it('should render the value', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={5} size='lg' />
+      </TestWrapper>,
+    );
+
+    expect(getByText('5')).toBeTruthy();
+  });
+
+  it('should hide text when value is 0', () => {
+    const { queryByText } = render(
+      <TestWrapper>
+        <DotCount value={0} size='lg' />
+      </TestWrapper>,
+    );
+
+    expect(queryByText('0')).toBeNull();
+  });
+
+  it('should cap value at max and show overflow indicator', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={100} max={50} size='lg' />
+      </TestWrapper>,
+    );
+
+    expect(getByText('50+')).toBeTruthy();
+  });
+
+  it('should default max to 99', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={150} size='lg' />
+      </TestWrapper>,
+    );
+
+    expect(getByText('99+')).toBeTruthy();
+  });
+
+  it('should clamp max to 1 when given zero or negative', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={5} max={0} size='lg' />
+      </TestWrapper>,
+    );
+
+    expect(getByText('1+')).toBeTruthy();
+  });
+
+  it('should render children alongside the count', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={3} size='md'>
+          <Text>Child</Text>
+        </DotCount>
+      </TestWrapper>,
+    );
+
+    expect(getByText('3')).toBeTruthy();
+    expect(getByText('Child')).toBeTruthy();
+  });
+
+  it('should forward testID to the outer wrapper', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotCount testID='dot-count' value={3} size='lg' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-count')).toBeTruthy();
+  });
+
+  it('should forward pointerEvents to the outer wrapper', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotCount testID='dot-count' value={3} size='lg' pointerEvents='none' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-count').props.pointerEvents).toBe('none');
+  });
+
+  it('should forward ref to the outer wrapper', () => {
+    const ref = createRef<View>();
+
+    render(
+      <TestWrapper>
+        <DotCount ref={ref} value={3} size='lg' />
+      </TestWrapper>,
+    );
+
+    expect(ref.current).toBeTruthy();
+  });
+
+  it('should render with red appearance', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={5} size='lg' appearance='red' />
+      </TestWrapper>,
+    );
+
+    expect(getByText('5')).toBeTruthy();
+  });
+
+  it('should render with disabled state', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={5} size='lg' disabled />
+      </TestWrapper>,
+    );
+
+    expect(getByText('5')).toBeTruthy();
+  });
+
+  it('should render in md size', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={5} size='md' />
+      </TestWrapper>,
+    );
+
+    expect(getByText('5')).toBeTruthy();
+  });
+
+  it('should default size to md when omitted', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotCount value={5} />
+      </TestWrapper>,
+    );
+
+    expect(getByText('5')).toBeTruthy();
+  });
+});