@ledgerhq/lumen-ui-rnative 0.1.23 → 0.1.25

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

@@ -0,0 +1,224 @@
+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 type { View } from 'react-native';
+import { Text } from 'react-native';
+import { ArrowDown } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { DotIcon } from './DotIcon';
+
+const { colors, sizes, borderRadius } = ledgerLiveThemes.dark;
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('DotIcon Component', () => {
+  describe('Rendering', () => {
+    it('should render children', () => {
+      const { getByText } = render(
+        <TestWrapper>
+          <DotIcon testID='dot-icon' appearance='success' icon={ArrowDown}>
+            <Text>Child</Text>
+          </DotIcon>
+        </TestWrapper>,
+      );
+
+      expect(getByText('Child')).toBeTruthy();
+    });
+
+    it('should render without children', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon testID='dot-icon' appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('dot-icon')).toBeTruthy();
+    });
+
+    it('should have correct displayName', () => {
+      expect(DotIcon.displayName).toBe('DotIcon');
+    });
+  });
+
+  describe('Appearances', () => {
+    it.each([
+      {
+        appearance: 'success' as const,
+        expectedColor: colors.bg.successStrong,
+      },
+      { appearance: 'muted' as const, expectedColor: colors.bg.mutedStrong },
+      { appearance: 'error' as const, expectedColor: colors.bg.errorStrong },
+    ])(
+      'should apply $appearance background color to the dot',
+      ({ appearance, expectedColor }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance={appearance}
+              icon={ArrowDown}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.backgroundColor).toBe(expectedColor);
+      },
+    );
+  });
+
+  describe('Sizes', () => {
+    it.each([
+      { size: 16 as const, expectedSize: sizes.s16 },
+      { size: 20 as const, expectedSize: sizes.s20 },
+      { size: 24 as const, expectedSize: sizes.s24 },
+    ])(
+      'should apply correct width and height for size $size',
+      ({ size, expectedSize }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance='success'
+              icon={ArrowDown}
+              size={size}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.width).toBe(expectedSize);
+        expect(dotView.props.style.height).toBe(expectedSize);
+      },
+    );
+  });
+
+  describe('Pins', () => {
+    it.each([
+      {
+        pin: 'bottom-end' as const,
+        verticalKey: 'bottom',
+        horizontalKey: 'right',
+      },
+      {
+        pin: 'bottom-start' as const,
+        verticalKey: 'bottom',
+        horizontalKey: 'left',
+      },
+      {
+        pin: 'top-end' as const,
+        verticalKey: 'top',
+        horizontalKey: 'right',
+      },
+      {
+        pin: 'top-start' as const,
+        verticalKey: 'top',
+        horizontalKey: 'left',
+      },
+    ])('should position dot at $pin', ({ pin, verticalKey, horizontalKey }) => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            pin={pin}
+          />
+        </TestWrapper>,
+      );
+
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style[verticalKey]).toBe(-3);
+      expect(dotView.props.style[horizontalKey]).toBe(-3);
+    });
+  });
+
+  describe('Shapes', () => {
+    it('should apply full border radius for circle shape', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            shape='circle'
+          />
+        </TestWrapper>,
+      );
+
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style.borderRadius).toBe(borderRadius.full);
+    });
+
+    it.each([
+      { size: 16 as const, expectedRadius: 5 },
+      { size: 20 as const, expectedRadius: 6 },
+      { size: 24 as const, expectedRadius: 8 },
+    ])(
+      'should apply correct border radius for square shape at size $size',
+      ({ size, expectedRadius }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance='success'
+              icon={ArrowDown}
+              shape='square'
+              size={size}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.borderRadius).toBe(expectedRadius);
+      },
+    );
+  });
+
+  describe('Ref forwarding', () => {
+    it('should forward ref to the root element', () => {
+      const ref = createRef<View>();
+
+      render(
+        <TestWrapper>
+          <DotIcon ref={ref} appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(ref.current).not.toBeNull();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom styles', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            style={{ marginTop: 10 }}
+          />
+        </TestWrapper>,
+      );
+
+      const root = getByTestId('dot-icon');
+      expect(root.props.style.marginTop).toBe(10);
+    });
+
+    it('should pass additional props', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon testID='custom-dot' appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('custom-dot')).toBeTruthy();
+    });
+  });
+});

package/src/lib/Components/DotIcon/DotIcon.tsx

@@ -0,0 +1,146 @@
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import type { IconSize } from '../Icon';
+import { Box } from '../Utility';
+import type {
+  DotIconAppearance,
+  DotIconPin,
+  DotIconProps,
+  DotIconSize,
+} from './types';
+
+const dotIconSizeMap: Record<DotIconSize, IconSize> = {
+  16: 12,
+  20: 12,
+  24: 16,
+};
+
+const dotSquareRadiusMap: Record<DotIconSize, number> = {
+  16: 5,
+  20: 6,
+  24: 8,
+};
+
+export const mediaImageDotIconSizeMap = {
+  40: 16,
+  48: 20,
+  56: 24,
+  64: 24,
+} as const satisfies Record<number, DotIconSize>;
+
+export const spotDotIconSizeMap = {
+  40: 16,
+  48: 20,
+  56: 24,
+  72: 24,
+} as const satisfies Record<number, DotIconSize>;
+
+const pinAxisMap: Record<DotIconPin, [vertical: string, horizontal: string]> = {
+  'top-start': ['top', 'left'],
+  'top-end': ['top', 'right'],
+  'bottom-start': ['bottom', 'left'],
+  'bottom-end': ['bottom', 'right'],
+};
+
+const DOT_OFFSET = -3;
+
+const getPinOffset = (pin: DotIconPin): Record<string, number> => {
+  const [v, h] = pinAxisMap[pin];
+  return { [v]: DOT_OFFSET, [h]: DOT_OFFSET };
+};
+
+const appearanceBgMap: Record<
+  DotIconAppearance,
+  'successStrong' | 'mutedStrong' | 'errorStrong'
+> = {
+  success: 'successStrong',
+  muted: 'mutedStrong',
+  error: 'errorStrong',
+};
+
+const useStyles = ({
+  size,
+  shape,
+  pin,
+  appearance,
+}: {
+  size: DotIconSize;
+  shape: 'square' | 'circle';
+  pin: DotIconPin;
+  appearance: DotIconAppearance;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const sizeValue = t.sizes[`s${size}` as keyof typeof t.sizes] as number;
+      const radius =
+        shape === 'circle' ? t.borderRadius.full : dotSquareRadiusMap[size];
+      const pinOffset = getPinOffset(pin);
+
+      return {
+        dot: {
+          position: 'absolute',
+          zIndex: 10,
+          width: sizeValue,
+          height: sizeValue,
+          borderRadius: radius,
+          borderWidth: 1,
+          backgroundColor: t.colors.bg[appearanceBgMap[appearance]],
+          borderColor: t.colors.border.baseInverted,
+          overflow: 'hidden',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...pinOffset,
+        },
+        icon: {
+          color: t.colors.text.onInteractive,
+        },
+      };
+    },
+    [size, shape, pin, appearance],
+  );
+};
+
+/**
+ * A wrapper component that positions a small icon indicator at a configurable
+ * corner of a child element like MediaImage or Spot. The dot background uses a
+ * semantic color (`success`, `muted`, or `error`).
+ *
+ * @example
+ * import { DotIcon } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <DotIcon appearance="success" icon={ArrowDown} pin="bottom-end">
+ *   <MediaImage src="https://example.com/usdc.png" alt="USDC" size={48} />
+ * </DotIcon>
+ */
+export const DotIcon = ({
+  children,
+  icon: Icon,
+  appearance,
+  pin = 'bottom-end',
+  size = 20,
+  shape = 'circle',
+  lx = {},
+  style,
+  ref,
+  ...rest
+}: DotIconProps) => {
+  const styles = useStyles({ size, shape, pin, appearance });
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([{ position: 'relative' }, style])}
+      {...rest}
+    >
+      <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
+        {children}
+        <Box testID='dot-icon-dot' style={styles.dot}>
+          <Icon size={dotIconSizeMap[size]} style={styles.icon} />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+DotIcon.displayName = 'DotIcon';

package/src/lib/Components/DotIcon/index.ts

@@ -0,0 +1,6 @@
+export {
+  DotIcon,
+  mediaImageDotIconSizeMap,
+  spotDotIconSizeMap,
+} from './DotIcon';
+export * from './types';

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

@@ -0,0 +1,44 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import type { StyledViewProps } from '../../../styles';
+import type { IconSize } from '../Icon';
+
+export type DotIconSize = 16 | 20 | 24;
+
+export type DotIconPin =
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end';
+
+export type DotIconAppearance = 'success' | 'muted' | 'error';
+
+export type DotIconProps = {
+  /**
+   * Icon component to render inside the dot.
+   */
+  icon: ComponentType<{ size?: IconSize; style?: StyleProp<TextStyle> }>;
+  /**
+   * Semantic color of the dot background.
+   */
+  appearance: DotIconAppearance;
+  /**
+   * Corner placement of the dot indicator.
+   * @default 'bottom-end'
+   */
+  pin?: DotIconPin;
+  /**
+   * The size of the dot indicator in pixels.
+   * @default 20
+   */
+  size?: DotIconSize;
+  /**
+   * The shape of the dot indicator.
+   * @default 'circle'
+   */
+  shape?: 'square' | 'circle';
+  /**
+   * The wrapped component (e.g. MediaImage or Spot).
+   */
+  children?: ReactNode;
+} & Omit<StyledViewProps, 'children'>;

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

@@ -32,8 +32,12 @@ export const Base: Story = {
     pin: 'bottom-end',
     size: 20,
     shape: 'circle',
-    children: <MediaImage src={parentSrc} alt='Cardano' shape='circle' />,
   },
+  render: (args) => (
+    <DotSymbol {...args}>
+      <MediaImage src={parentSrc} alt='Cardano' shape={args.shape} />
+    </DotSymbol>
+  ),
 };
 
 export const PinShowcase: Story = {
@@ -135,6 +139,13 @@ export const SizeShowcase: Story = {
         >
           <MediaImage src={parentSrc} size={56} shape='circle' />
         </DotSymbol>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[64]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={64} shape='circle' />
+        </DotSymbol>
       </Box>
       <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's24' }}>
         <DotSymbol
@@ -143,7 +154,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[20]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={20} shape='circle' />
+          <MediaImage src={parentSrc} size={20} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -151,7 +162,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[24]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={24} shape='circle' />
+          <MediaImage src={parentSrc} size={24} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -159,7 +170,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[32]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={32} shape='circle' />
+          <MediaImage src={parentSrc} size={32} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -167,7 +178,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[40]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={40} shape='circle' />
+          <MediaImage src={parentSrc} size={40} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -175,7 +186,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[48]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={48} shape='circle' />
+          <MediaImage src={parentSrc} size={48} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -183,7 +194,15 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[56]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={56} shape='circle' />
+          <MediaImage src={parentSrc} size={56} shape='square' />
+        </DotSymbol>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[64]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={64} shape='square' />
         </DotSymbol>
       </Box>
     </Box>

package/src/lib/Components/DotSymbol/DotSymbol.tsx

@@ -1,20 +1,18 @@
 import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { MediaImageSize } from '../MediaImage';
-import { SpotSize } from '../Spot';
+import type { MediaImageSize } from '../MediaImage';
+import type { SpotSize } from '../Spot';
 import { Box } from '../Utility';
-import { DotSymbolPin, DotSymbolProps, DotSymbolSize } from './types';
+import type { DotSymbolPin, DotSymbolProps, DotSymbolSize } from './types';
 
-type BorderRadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'full';
-
-const shapeRadiusMap: Record<DotSymbolSize, BorderRadiusKey> = {
-  8: 'xs',
-  10: 'xs',
-  12: 'xs',
-  16: 'sm',
-  20: 'sm',
-  24: 'md',
+const dotSquareRadiusMap: Record<DotSymbolSize, number> = {
+  8: 2,
+  10: 3,
+  12: 4,
+  16: 5,
+  20: 6,
+  24: 8,
 };
 
 const offsetBySize: Record<DotSymbolSize, number> = {
@@ -35,6 +33,7 @@ export const mediaImageDotSizeMap: Record<MediaImageSize, DotSymbolSize> = {
   40: 16,
   48: 20,
   56: 24,
+  64: 24,
 };
 
 export const spotDotSizeMap: Record<SpotSize, DotSymbolSize> = {
@@ -75,9 +74,7 @@ const useStyles = ({
     (t) => {
       const sizeValue = t.sizes[`s${size}` as keyof typeof t.sizes] as number;
       const radius =
-        shape === 'circle'
-          ? t.borderRadius.full
-          : t.borderRadius[shapeRadiusMap[size]];
+        shape === 'circle' ? t.borderRadius.full : dotSquareRadiusMap[size];
       const pinOffset = getPinOffset(pin, size);
 
       return {
@@ -142,17 +139,19 @@ export const DotSymbol = ({
       accessibilityLabel={alt}
       {...rest}
     >
-      {children}
-      <Box style={styles.dot}>
-        {!error && (
-          <Image
-            source={{ uri: src }}
-            style={styles.image}
-            accessible={false}
-            onError={() => setError(true)}
-            testID='dot-symbol-img'
-          />
-        )}
+      <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
+        {children}
+        <Box style={styles.dot}>
+          {!error && (
+            <Image
+              source={{ uri: src }}
+              style={styles.image}
+              accessible={false}
+              onError={() => setError(true)}
+              testID='dot-symbol-img'
+            />
+          )}
+        </Box>
       </Box>
     </Box>
   );

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { StyledViewProps } from '../../../styles';
+import type { StyledViewProps } from '../../../styles';
 
 export type DotSymbolSize = 8 | 10 | 12 | 16 | 20 | 24;
 

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

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { Svg } from 'react-native-svg';
 import { useResolveTextStyle, useTheme } from '../../../styles';
-import { TextProps } from '../Utility';
-import { IconProps, IconSize } from './types';
+import type { TextProps } from '../Utility';
+import type { IconProps, IconSize } from './types';
 
 const iconSizeMap = {
   12: 's12',

package/src/lib/Components/Icon/createIcon.ts

@@ -1,9 +1,9 @@
 import { toPascalCase, useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { createElement } from 'react';
-import { SvgProps } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
 import { useTheme } from '../../../styles';
 import { Icon } from './Icon';
-import { IconProps } from './types';
+import type { IconProps } from './types';
 
 /**
  * Create an Icon component for React Native

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

@@ -1,7 +1,7 @@
-import { Ref } from 'react';
-import { Svg, SvgProps } from 'react-native-svg';
-import { LumenTextStyle } from '../../../styles';
-import { TextProps } from '../Utility';
+import type { Ref } from 'react';
+import type { Svg, SvgProps } from 'react-native-svg';
+import type { LumenTextStyle } from '../../../styles';
+import type { TextProps } from '../Utility';
 
 export type IconSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
 

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

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

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

@@ -1,4 +1,4 @@
-import { BaseButtonProps } from '../Button';
+import type { BaseButtonProps } from '../Button';
 
 export type IconButtonProps = {
   /**

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

@@ -1,11 +1,12 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
-import { IconProps, IconSize } from '../Icon';
+import type { IconProps, IconSize } from '../Icon';
 import { Pressable } from '../Utility';
-import { HIT_SLOP_MAP, InteractiveIconProps } from './types';
+import type { InteractiveIconProps } from './types';
+import { HIT_SLOP_MAP } from './types';
 
 type IconType = InteractiveIconProps['iconType'];
 type Appearance = NonNullable<InteractiveIconProps['appearance']>;

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

@@ -1,7 +1,7 @@
-import { ComponentType } from 'react';
-import { Insets } from 'react-native';
-import { StyledPressableProps } from '../../../styles';
-import { IconProps, IconSize } from '../Icon';
+import type { ComponentType } from 'react';
+import type { Insets } from 'react-native';
+import type { StyledPressableProps } from '../../../styles';
+import type { IconProps, IconSize } from '../Icon';
 
 export const HIT_SLOP_MAP: Partial<
   Record<HitSlopType, Partial<Record<IconSize, Insets>>>