@ledgerhq/lumen-ui-rnative 0.1.19 → 0.1.21

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

@@ -0,0 +1,161 @@
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { MediaImageSize } from '../MediaImage';
+import { SpotSize } from '../Spot';
+import { Box } from '../Utility';
+import { 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 offsetBySize: Record<DotSymbolSize, number> = {
+  8: -2,
+  10: -2,
+  12: -2,
+  16: -3,
+  20: -3,
+  24: -3,
+};
+
+export const mediaImageDotSizeMap: Record<MediaImageSize, DotSymbolSize> = {
+  12: 8,
+  16: 8,
+  20: 8,
+  24: 10,
+  32: 12,
+  40: 16,
+  48: 20,
+  56: 24,
+};
+
+export const spotDotSizeMap: Record<SpotSize, DotSymbolSize> = {
+  32: 12,
+  40: 16,
+  48: 20,
+  56: 24,
+  72: 24,
+};
+
+const pinAxisMap: Record<DotSymbolPin, [vertical: string, horizontal: string]> =
+  {
+    'top-start': ['top', 'left'],
+    'top-end': ['top', 'right'],
+    'bottom-start': ['bottom', 'left'],
+    'bottom-end': ['bottom', 'right'],
+  };
+
+const getPinOffset = (
+  pin: DotSymbolPin,
+  size: DotSymbolSize,
+): Record<string, number> => {
+  const [v, h] = pinAxisMap[pin];
+  const offset = offsetBySize[size];
+  return { [v]: offset, [h]: offset };
+};
+
+const useStyles = ({
+  size,
+  shape,
+  pin,
+}: {
+  size: DotSymbolSize;
+  shape: 'square' | 'circle';
+  pin: DotSymbolPin;
+}) => {
+  return useStyleSheet(
+    (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]];
+      const pinOffset = getPinOffset(pin, size);
+
+      return {
+        dot: {
+          position: 'absolute',
+          zIndex: 10,
+          width: sizeValue,
+          height: sizeValue,
+          borderRadius: radius,
+          borderWidth: 1,
+          backgroundColor: t.colors.bg.muted,
+          borderColor: t.colors.border.baseInverted,
+          overflow: 'hidden',
+          ...pinOffset,
+        },
+        image: {
+          width: '100%',
+          height: '100%',
+        },
+      };
+    },
+    [size, shape, pin],
+  );
+};
+
+/**
+ * A wrapper component that positions a small image indicator at a configurable
+ * corner of a child element like MediaImage or Spot.
+ *
+ * @example
+ * import { DotSymbol } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <DotSymbol src="https://example.com/eth.png" alt="Ethereum" pin="bottom-end">
+ *   <MediaImage src="https://example.com/usdc.png" alt="USDC" size={48} />
+ * </DotSymbol>
+ */
+export const DotSymbol = ({
+  children,
+  src,
+  alt,
+  pin = 'bottom-end',
+  size = 20,
+  shape = 'circle',
+  lx = {},
+  style,
+  ref,
+  ...rest
+}: DotSymbolProps) => {
+  const styles = useStyles({ size, shape, pin });
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    setError(false);
+  }, [src]);
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([{ position: 'relative' }, style])}
+      accessibilityRole='image'
+      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>
+    </Box>
+  );
+};
+
+DotSymbol.displayName = 'DotSymbol';

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

@@ -0,0 +1,2 @@
+export { DotSymbol, mediaImageDotSizeMap, spotDotSizeMap } from './DotSymbol';
+export * from './types';

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

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { StyledViewProps } from '../../../styles';
+
+export type DotSymbolSize = 8 | 10 | 12 | 16 | 20 | 24;
+
+export type DotSymbolPin =
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end';
+
+export type DotSymbolProps = {
+  /**
+   * Image source URL for the dot indicator.
+   */
+  src: string;
+  /**
+   * Alternative text for the dot image.
+   */
+  alt?: string;
+  /**
+   * Corner placement of the dot indicator.
+   * @default 'bottom-end'
+   */
+  pin?: DotSymbolPin;
+  /**
+   * The size of the dot indicator in pixels.
+   * @default 20
+   */
+  size?: DotSymbolSize;
+  /**
+   * 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/ListItem/ListItem.tsx

@@ -265,12 +265,11 @@ export const ListItemTitle = ({
       title: StyleSheet.flatten([
         t.typographies.body2SemiBold,
         {
-          flex: 1,
           minWidth: 0,
           flexShrink: 1,
           textAlign: isInTrailing ? 'right' : 'left',
           color: disabled ? t.colors.text.disabled : t.colors.text.base,
-        } as const,
+        },
       ]),
     }),
     [disabled, isInTrailing],
@@ -283,6 +282,7 @@ export const ListItemTitle = ({
       style={StyleSheet.flatten([styles.title, style])}
       numberOfLines={1}
       ellipsizeMode='tail'
+      allowFontScaling={false}
       {...textProps}
     >
       {children}
@@ -315,12 +315,11 @@ export const ListItemDescription = ({
       description: StyleSheet.flatten([
         t.typographies.body3,
         {
-          flex: 1,
           minWidth: 0,
           flexShrink: 1,
           textAlign: isInTrailing ? 'right' : 'left',
           color: disabled ? t.colors.text.disabled : t.colors.text.muted,
-        } as const,
+        },
       ]),
     }),
     [disabled, isInTrailing],
@@ -333,6 +332,7 @@ export const ListItemDescription = ({
       style={StyleSheet.flatten([styles.description, style])}
       numberOfLines={1}
       ellipsizeMode='tail'
+      allowFontScaling={false}
       {...textProps}
     >
       {children}

package/src/lib/Components/MediaBanner/MediaBanner.tsx

@@ -42,7 +42,7 @@ export function MediaBanner({
         borderRadius: t.borderRadius.md,
         overflow: 'hidden',
         flexDirection: 'row',
-        height: t.sizes.s72,
+        minHeight: t.sizes.s72,
       },
       contentWrapper: {
         flex: 1,

package/src/lib/Components/MediaCard/MediaCard.tsx

@@ -15,7 +15,7 @@ const useStyles = () =>
       root: {
         position: 'relative',
         width: t.sizes.full,
-        height: CARD_HEIGHT,
+        minHeight: CARD_HEIGHT,
         borderRadius: t.borderRadius.md,
         overflow: 'hidden',
         flexDirection: 'column',

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -17,17 +17,6 @@ const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   56: 'lg',
 };
 
-export const mediaImageDotSizeMap: Record<MediaImageSize, number> = {
-  12: 8,
-  16: 8,
-  20: 8,
-  24: 10,
-  32: 12,
-  40: 16,
-  48: 20,
-  56: 24,
-} as const;
-
 const useStyles = ({
   size,
   shape,
@@ -48,14 +37,14 @@ const useStyles = ({
           width: sizeValue,
           height: sizeValue,
           borderRadius: radius,
-          overflow: 'hidden' as const,
-          alignItems: 'center' as const,
-          justifyContent: 'center' as const,
-          backgroundColor: t.colors.bg.mutedTransparent,
+          overflow: 'hidden',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: t.colors.bg.muted,
         },
         image: {
-          width: '100%' as const,
-          height: '100%' as const,
+          width: '100%',
+          height: '100%',
         },
       };
     },

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

@@ -1,2 +1,2 @@
-export { MediaImage, mediaImageDotSizeMap } from './MediaImage';
+export { MediaImage } from './MediaImage';
 export * from './types';

package/src/lib/Components/NavBar/NavBar.mdx

@@ -76,7 +76,7 @@ import {
   NavBarTitle,
 } from '@ledgerhq/lumen-ui-rnative';
 
-<NavBar appearance='compact'>
+<NavBar density='compact'>
   <NavBarBackButton onPress={() => navigation.goBack()} />
   <NavBarContent>
     <NavBarTitle>Page Title</NavBarTitle>
@@ -95,7 +95,7 @@ import {
   NavBarDescription,
 } from '@ledgerhq/lumen-ui-rnative';
 
-<NavBar appearance='expanded'>
+<NavBar density='expanded'>
   <NavBarBackButton onPress={() => navigation.goBack()} />
   <NavBarContent>
     <NavBarTitle>Account Details</NavBarTitle>
@@ -110,7 +110,7 @@ import {
 import { MoreHorizontal } from '@ledgerhq/lumen-ui-rnative/symbols';
 import { IconButton } from '@ledgerhq/lumen-ui-rnative';
 
-<NavBar appearance='compact'>
+<NavBar density='compact'>
   <NavBarBackButton onPress={() => navigation.goBack()} />
   <NavBarContent>
     <NavBarTitle>Settings</NavBarTitle>
@@ -131,7 +131,7 @@ import { IconButton } from '@ledgerhq/lumen-ui-rnative';
 import Icon from '@ledgerhq/crypto-icons/native';
 import { NavBarCoinCapsule } from '@ledgerhq/lumen-ui-rnative';
 
-<NavBar appearance='compact'>
+<NavBar density='compact'>
   <NavBarBackButton onPress={() => navigation.goBack()} />
   <NavBarContent>
     <NavBarCoinCapsule
@@ -163,7 +163,7 @@ function App() {
     <Stack.Navigator
       screenOptions={{
         header: ({ navigation, route }) => (
-          <NavBar appearance='compact'>
+          <NavBar density='compact'>
             <NavBarBackButton onPress={() => navigation.goBack()} />
             <NavBarContent>
               <NavBarTitle>{route.name}</NavBarTitle>
@@ -201,7 +201,7 @@ export default function Layout() {
     <Stack
       screenOptions={{
         header: ({ route }) => (
-          <NavBar appearance='compact'>
+          <NavBar density='compact'>
             <NavBarBackButton onPress={() => router.back()} />
             <NavBarContent>
               <NavBarTitle>{route.name}</NavBarTitle>
@@ -236,7 +236,7 @@ export default function DetailsScreen() {
       <Stack.Screen
         options={{
           header: () => (
-            <NavBar appearance='expanded'>
+            <NavBar density='expanded'>
               <NavBarBackButton onPress={() => router.back()} />
               <NavBarContent>
                 <NavBarTitle>Details</NavBarTitle>

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

@@ -35,10 +35,10 @@ const meta: Meta<typeof NavBar> = {
     },
   },
   argTypes: {
-    appearance: {
+    density: {
       control: 'select',
       options: ['compact', 'expanded'],
-      description: 'Controls the appearance/layout of the NavBar',
+      description: 'Controls the density/layout of the NavBar',
     },
   },
 };
@@ -48,7 +48,7 @@ type Story = StoryObj<typeof NavBar>;
 
 export const Base: Story = {
   args: {
-    appearance: 'compact',
+    density: 'compact',
     lx: {
       width: 's480',
     },
@@ -74,7 +74,7 @@ export const Base: Story = {
 
 export const Expanded: Story = {
   args: {
-    appearance: 'expanded',
+    density: 'expanded',
     lx: {
       width: 's480',
     },
@@ -100,7 +100,7 @@ export const Expanded: Story = {
 
 export const WithCoinCapsule: Story = {
   args: {
-    appearance: 'compact',
+    density: 'compact',
     lx: {
       width: 's480',
     },
@@ -128,7 +128,7 @@ export const WithCoinCapsule: Story = {
 
 export const WithMultipleTrailingActions: Story = {
   args: {
-    appearance: 'compact',
+    density: 'compact',
     lx: {
       width: 's480',
     },

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

@@ -26,7 +26,7 @@ describe('NavBar', () => {
   describe('Rendering', () => {
     it('should render with title', () => {
       renderWithProvider(
-        <NavBar testID='navbar' appearance='compact'>
+        <NavBar testID='navbar' density='compact'>
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
           </NavBarContent>
@@ -39,7 +39,7 @@ describe('NavBar', () => {
 
     it('should render with title and description', () => {
       renderWithProvider(
-        <NavBar testID='navbar' appearance='expanded'>
+        <NavBar testID='navbar' density='expanded'>
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
             <NavBarDescription>Test Description</NavBarDescription>
@@ -54,7 +54,7 @@ describe('NavBar', () => {
     it('should render with back button', () => {
       const onPress = jest.fn();
       renderWithProvider(
-        <NavBar testID='navbar' appearance='compact'>
+        <NavBar testID='navbar' density='compact'>
           <NavBarBackButton onPress={onPress} />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -67,7 +67,7 @@ describe('NavBar', () => {
 
     it('should render with coin capsule', () => {
       renderWithProvider(
-        <NavBar testID='navbar' appearance='compact'>
+        <NavBar testID='navbar' density='compact'>
           <NavBarContent>
             <NavBarCoinCapsule ticker='BTC' icon={<MockIcon />} />
           </NavBarContent>
@@ -80,7 +80,7 @@ describe('NavBar', () => {
     it('should render with all components', () => {
       const onPress = jest.fn();
       renderWithProvider(
-        <NavBar testID='navbar' appearance='expanded'>
+        <NavBar testID='navbar' density='expanded'>
           <NavBarBackButton onPress={onPress} />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -95,12 +95,12 @@ describe('NavBar', () => {
     });
   });
 
-  describe('Appearances', () => {
+  describe('Density', () => {
     it.each(['compact', 'expanded'] as const)(
-      'should render with %s appearance',
-      (appearance) => {
+      'should render with %s density',
+      (density) => {
         renderWithProvider(
-          <NavBar testID='navbar' appearance={appearance}>
+          <NavBar testID='navbar' density={density}>
             <NavBarContent>
               <NavBarTitle>Test Title</NavBarTitle>
             </NavBarContent>
@@ -115,7 +115,7 @@ describe('NavBar', () => {
   describe('NavBarTitle', () => {
     it('should truncate to 1 line in compact mode', () => {
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle testID='title'>Very long title text</NavBarTitle>
           </NavBarContent>
@@ -128,7 +128,7 @@ describe('NavBar', () => {
 
     it('should truncate to 2 lines in expanded mode', () => {
       renderWithProvider(
-        <NavBar appearance='expanded'>
+        <NavBar density='expanded'>
           <NavBarContent>
             <NavBarTitle testID='title'>Very long title text</NavBarTitle>
           </NavBarContent>
@@ -142,7 +142,7 @@ describe('NavBar', () => {
     it('should accept custom style prop', () => {
       const customStyle = { opacity: 0.5 };
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle testID='title' style={customStyle}>
               Test
@@ -164,7 +164,7 @@ describe('NavBar', () => {
   describe('NavBarDescription', () => {
     it('should truncate to 1 line in compact mode', () => {
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
             <NavBarDescription testID='description'>
@@ -180,7 +180,7 @@ describe('NavBar', () => {
 
     it('should truncate to 3 lines in expanded mode', () => {
       renderWithProvider(
-        <NavBar appearance='expanded'>
+        <NavBar density='expanded'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
             <NavBarDescription testID='description'>
@@ -197,7 +197,7 @@ describe('NavBar', () => {
     it('should accept custom style prop', () => {
       const customStyle = { opacity: 0.7 };
       renderWithProvider(
-        <NavBar appearance='expanded'>
+        <NavBar density='expanded'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
             <NavBarDescription testID='description' style={customStyle}>
@@ -221,7 +221,7 @@ describe('NavBar', () => {
     it('should call onPress when pressed', () => {
       const handlePress = jest.fn();
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarBackButton onPress={handlePress} />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -236,7 +236,7 @@ describe('NavBar', () => {
     it('should accept custom accessibilityLabel', () => {
       const handlePress = jest.fn();
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarBackButton
             onPress={handlePress}
             accessibilityLabel='Navigate back'
@@ -254,7 +254,7 @@ describe('NavBar', () => {
   describe('NavBarCoinCapsule', () => {
     it('should render ticker and icon', () => {
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarCoinCapsule ticker='ETH' icon={<MockIcon />} />
           </NavBarContent>
@@ -268,7 +268,7 @@ describe('NavBar', () => {
   describe('NavBarTrailing', () => {
     it('should render trailing content in compact mode', () => {
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarBackButton />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -284,7 +284,7 @@ describe('NavBar', () => {
 
     it('should render trailing content in expanded mode', () => {
       renderWithProvider(
-        <NavBar appearance='expanded'>
+        <NavBar density='expanded'>
           <NavBarBackButton />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -301,7 +301,7 @@ describe('NavBar', () => {
     it('should accept custom style prop', () => {
       const customStyle = { opacity: 0.8 };
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
           </NavBarContent>
@@ -324,7 +324,7 @@ describe('NavBar', () => {
   describe('NavBarContent', () => {
     it('should render content in both compact and expanded modes', () => {
       const { rerender } = renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
             <NavBarDescription>Description</NavBarDescription>
@@ -337,7 +337,7 @@ describe('NavBar', () => {
 
       rerender(
         <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
-          <NavBar appearance='expanded'>
+          <NavBar density='expanded'>
             <NavBarContent>
               <NavBarTitle>Title</NavBarTitle>
               <NavBarDescription>Description</NavBarDescription>
@@ -353,7 +353,7 @@ describe('NavBar', () => {
     it('should render back button in all modes', () => {
       const onPress = jest.fn();
       const { rerender } = renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarBackButton onPress={onPress} />
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
@@ -365,7 +365,7 @@ describe('NavBar', () => {
 
       rerender(
         <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
-          <NavBar appearance='expanded'>
+          <NavBar density='expanded'>
             <NavBarBackButton onPress={onPress} />
             <NavBarContent>
               <NavBarTitle>Title</NavBarTitle>