@ledgerhq/lumen-ui-rnative 0.1.36 → 0.1.38

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -4,7 +4,7 @@ import {
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Pressable, StyleSheet, TextInput } from 'react-native';
+import { Pressable, StyleSheet, TextInput, View } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -13,9 +13,13 @@ import Animated, {
   withSequence,
   withTiming,
 } from 'react-native-reanimated';
-import { useStyleSheet } from '../../../styles';
+import { useStyleSheet, useTheme } from '../../../styles';
 import { Box } from '../Utility';
-import { type AmountInputProps } from './types';
+import {
+  type AmountInputAlign,
+  type AmountInputProps,
+  type AmountInputSize,
+} from './types';
 
 /**
  * AmountInput component for handling numeric input with currency display.
@@ -25,6 +29,8 @@ import { type AmountInputProps } from './types';
 export const AmountInput = ({
   lx = {},
   style,
+  size = 'md',
+  align = 'center',
   currencyText,
   currencyPosition = 'left',
   editable,
@@ -48,16 +54,20 @@ export const AmountInput = ({
   });
 
   const translateX = useSharedValue(0);
-  const animatedFontSize = useSharedValue(getFontSize(inputValue));
+  const animatedFontSize = useSharedValue(getFontSize(inputValue, size));
   const caretOpacity = useSharedValue(0);
 
   useImperativeHandle(ref, () => inputRef.current as TextInput, []);
 
+  const { theme } = useTheme();
   const styles = useStyles({
+    size,
+    align,
     hasValue: !!inputValue,
     isEditable: !disabled,
     isInvalid,
   });
+  const caretFixedHeight = size === 'sm' ? theme.sizes.s28 : 0;
 
   const animatedInputStyle = useAnimatedStyle(
     () => ({
@@ -79,13 +89,13 @@ export const AmountInput = ({
   const animatedCaretStyle = useAnimatedStyle(
     () => ({
       opacity: caretOpacity.value,
-      height: animatedFontSize.value,
+      height: size === 'sm' ? caretFixedHeight : animatedFontSize.value,
     }),
-    [caretOpacity, animatedFontSize],
+    [caretOpacity, animatedFontSize, size, caretFixedHeight],
   );
 
   useEffect(() => {
-    const newSize = getFontSize(inputValue);
+    const newSize = getFontSize(inputValue, size);
 
     translateX.value = withSequence(
       withTiming(4, { duration: 0 }),
@@ -99,7 +109,7 @@ export const AmountInput = ({
       duration: 250,
       easing: Easing.bezier(0.4, 0, 0.2, 1),
     });
-  }, [inputValue, animatedFontSize, translateX]);
+  }, [inputValue, size, animatedFontSize, translateX]);
 
   useEffect(() => {
     if (isFocused && !disabled) {
@@ -164,94 +174,127 @@ export const AmountInput = ({
         style={styles.hiddenInput}
         {...props}
       />
-      <Pressable
-        onPress={handlePress}
-        style={styles.pressable}
-        accessibilityLabel={props.accessibilityLabel || 'Amount input'}
-      >
-        {currencyPosition === 'left' && CurrencyText}
-
-        {/** display text that mirrors the hidden input's value */}
-        <Animated.Text
-          style={[styles.displayText, animatedInputStyle, style]}
-          allowFontScaling={false}
+      <View style={styles.alignRow}>
+        <Pressable
+          onPress={handlePress}
+          style={styles.pressable}
+          accessibilityLabel={props.accessibilityLabel || 'Amount input'}
         >
-          {inputValue || '0'}
-        </Animated.Text>
+          {currencyPosition === 'left' && CurrencyText}
+
+          {/** display text that mirrors the hidden input's value */}
+          <Animated.Text
+            style={[styles.displayText, animatedInputStyle, style]}
+            allowFontScaling={false}
+          >
+            {inputValue || '0'}
+          </Animated.Text>
 
-        {/** custom caret */}
-        <Animated.View style={[styles.caret, animatedCaretStyle]} />
+          {/** custom caret */}
+          <Animated.View style={[styles.caret, animatedCaretStyle]} />
 
-        {currencyPosition === 'right' && CurrencyText}
-      </Pressable>
+          {currencyPosition === 'right' && CurrencyText}
+        </Pressable>
+      </View>
     </Box>
   );
 };
 
+const SIZE_TYPOGRAPHY = {
+  md: 'heading0SemiBold',
+  sm: 'heading2SemiBold',
+} as const satisfies Record<
+  AmountInputSize,
+  'heading0SemiBold' | 'heading2SemiBold'
+>;
+
+const ALIGN_ROW_JUSTIFY = {
+  center: 'center',
+  start: 'flex-start',
+  end: 'flex-end',
+} as const satisfies Record<
+  AmountInputAlign,
+  'center' | 'flex-start' | 'flex-end'
+>;
+
 const useStyles = ({
+  size,
+  align,
   hasValue,
   isEditable,
   isInvalid,
 }: {
+  size: AmountInputSize;
+  align: AmountInputAlign;
   hasValue: boolean;
   isEditable: boolean;
   isInvalid: boolean;
 }) => {
   return useStyleSheet(
-    (t) => ({
-      container: {
-        position: 'relative',
-      },
-      hiddenInput: {
-        position: 'absolute',
-        width: t.sizes.full,
-        height: t.sizes.full,
-        opacity: 0,
-      },
-      pressable: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      displayText: StyleSheet.flatten([
-        {
-          height: t.sizes.s56,
-          backgroundColor: 'transparent',
-          color: t.colors.text.base,
-          alignItems: 'flex-start',
-          ...t.typographies.heading0SemiBold,
-        },
-        !hasValue && {
-          color: t.colors.text.mutedSubtle,
-        },
-        !isEditable && {
-          color: t.colors.text.disabled,
-        },
-        isInvalid && {
-          color: t.colors.text.error,
+    (t) => {
+      const typography = t.typographies[SIZE_TYPOGRAPHY[size]];
+      const displayHeight = size === 'md' ? t.sizes.s56 : t.sizes.s36;
+
+      return {
+        container: {
+          position: 'relative',
+          width: t.sizes.full,
         },
-      ]),
-      currency: StyleSheet.flatten([
-        {
-          color: t.colors.text.base,
-          ...t.typographies.heading0SemiBold,
+        hiddenInput: {
+          position: 'absolute',
+          width: t.sizes.full,
+          height: t.sizes.full,
+          opacity: 0,
         },
-        !hasValue && {
-          color: t.colors.text.mutedSubtle,
+        alignRow: {
+          width: t.sizes.full,
+          flexDirection: 'row',
+          justifyContent: ALIGN_ROW_JUSTIFY[align],
         },
-        !isEditable && {
-          color: t.colors.text.disabled,
+        pressable: {
+          flexDirection: 'row',
+          alignItems: 'center',
         },
-        isInvalid && {
-          color: t.colors.text.error,
+        displayText: StyleSheet.flatten([
+          {
+            height: displayHeight,
+            backgroundColor: 'transparent',
+            color: t.colors.text.base,
+            alignItems: 'flex-start',
+            ...typography,
+          },
+          !hasValue && {
+            color: t.colors.text.mutedSubtle,
+          },
+          !isEditable && {
+            color: t.colors.text.disabled,
+          },
+          isInvalid && {
+            color: t.colors.text.error,
+          },
+        ]),
+        currency: StyleSheet.flatten([
+          {
+            color: t.colors.text.base,
+            ...typography,
+          },
+          !hasValue && {
+            color: t.colors.text.mutedSubtle,
+          },
+          !isEditable && {
+            color: t.colors.text.disabled,
+          },
+          isInvalid && {
+            color: t.colors.text.error,
+          },
+        ]),
+        caret: {
+          marginHorizontal: t.spacings.s2,
+          width: t.sizes.s2,
+          backgroundColor: t.colors.text.active,
         },
-      ]),
-      caret: {
-        marginHorizontal: t.spacings.s2,
-        width: t.sizes.s2,
-        backgroundColor: t.colors.text.active,
-      },
-    }),
-    [hasValue, isEditable, isInvalid],
+      };
+    },
+    [size, align, hasValue, isEditable, isInvalid],
   );
 };

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

@@ -1,6 +1,10 @@
 import type { TextInputProps, ViewStyle } from 'react-native';
 import type { BoxProps } from '../Utility';
 
+export type AmountInputSize = 'md' | 'sm';
+
+export type AmountInputAlign = 'center' | 'start' | 'end';
+
 export type AmountInputProps = Omit<
   TextInputProps,
   'value' | 'onChangeText'
@@ -15,6 +19,16 @@ export type AmountInputProps = Omit<
    * @required
    */
   onChangeText: (text: string) => void;
+  /**
+   * Visual size of the amount input.
+   * @default 'md'
+   */
+  size?: AmountInputSize;
+  /**
+   * Horizontal alignment of the amount and currency.
+   * @default 'center'
+   */
+  align?: AmountInputAlign;
   /**
    * The currency text (e.g. USD, EUR)
    */

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

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title='Communication/Avatar' of={AvatarStories} />
 
-# 👤 Avatar
+# Avatar
 
 <CustomTabs>
   <Tab label="Overview">
@@ -55,6 +55,8 @@ An optional notification indicator can be displayed to show status or alerts:
 
 - **showNotification**: Boolean prop to toggle the notification dot (default: false)
 
+> The notification dot is only rendered on the `sm` and `md` sizes. It is suppressed on `lg` and `xl` even when `showNotification` is `true`.
+
 <Canvas of={AvatarStories.NotificationShowcase} />
 
 ### As Interactive Trigger

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

@@ -195,26 +195,24 @@ describe('Avatar Component', () => {
 
     dot = toJSON().children[0];
     expect(dot.props.style.height).toBe(sizes.s12);
-
-    rerender(
-      <TestWrapper>
-        <Avatar testID='avatar-id' size='lg' showNotification />
-      </TestWrapper>,
-    );
-
-    dot = toJSON().children[0];
-    expect(dot.props.style.height).toBe(sizes.s14);
-
-    rerender(
-      <TestWrapper>
-        <Avatar testID='avatar-id' size='xl' showNotification />
-      </TestWrapper>,
-    );
-
-    dot = toJSON().children[0];
-    expect(dot.props.style.height).toBe(sizes.s16);
   });
 
+  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

@@ -16,14 +16,11 @@ const fallbackSizes = {
   xl: 40,
 } as const;
 
-const dotSizeMap: Record<
-  Size,
-  NonNullable<React.ComponentProps<typeof DotIndicator>['size']>
+const dotSizeMap: Partial<
+  Record<Size, NonNullable<React.ComponentProps<typeof DotIndicator>['size']>>
 > = {
-  sm: 'xs',
-  md: 'sm',
-  lg: 'md',
-  xl: 'lg',
+  sm: 'lg',
+  md: 'xl',
 };
 
 const useStyles = ({ size }: { size: Size }) => {
@@ -81,7 +78,7 @@ export const Avatar = ({
   src,
   alt = 'avatar',
   size = 'md',
-  showNotification = false,
+  showNotification: showNotificationProp = false,
   testID,
   ref,
   ...props
@@ -93,6 +90,10 @@ export const Avatar = ({
 
   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;

package/src/lib/Components/Banner/Banner.mdx

@@ -8,7 +8,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Components/Banner' of={BannerStories} />
 
-# 🃏 Banner
+# Banner
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/BottomSheet/BottomSheet.mdx

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title="Components/BottomSheet" of={BottomSheetStories} />
 
-# 📋 BottomSheet
+# BottomSheet
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Button/Button.mdx

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title='Action/Button' of={ButtonStories} />
 
-# 🔘 Button
+# Button
 
 <CustomTabs>
   <Tab label="Overview ">

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

@@ -196,9 +196,7 @@ export const StatesShowcase: Story = {
       <Card {...args} lx={{ width: 's320' }} disabled>
         <CardHeader>
           <CardLeading>
-            <Box lx={{ opacity: 0.3 }}>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
-            </Box>
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentTitle>Disabled</CardContentTitle>
               <CardContentDescription>Non-interactive</CardContentDescription>

package/src/lib/Components/CardButton/CardButton.mdx

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title='Action/CardButton' of={CardButtonStories} />
 
-# 🃏 CardButton
+# CardButton
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Checkbox/Checkbox.mdx

@@ -8,7 +8,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title="Components/Checkbox" of={CheckboxStories} />
 
-# ☑️ Checkbox
+# Checkbox
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Divider/Divider.mdx

@@ -9,7 +9,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Layout/Divider' of={DividerStories} />
 
-# ➖ Divider
+# Divider
 
 <CustomTabs>
   <Tab label="Overview ">

package/src/lib/Components/DotIcon/DotIcon.mdx

@@ -1,13 +1,18 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DotIconStories from './DotIcon.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
 
 <Meta title='Communication/DotIcon' of={DotIconStories} />
 
 # DotIcon
 
+<CustomTabs>
+  <Tab label="Overview">
+
 ## Introduction
 
 DotIcon positions a small icon indicator at a configurable corner of a child element such as MediaImage or Spot. The dot background uses a semantic color (`success`, `muted`, or `error`) to convey meaning at a glance.
+
 > View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
 
 ## Anatomy
@@ -50,7 +55,94 @@ The dot size is driven by the parent MediaImage or Spot size via the mapping hel
 
 <Canvas of={DotIconStories.SizeShowcase} />
 
+### Disabled
+
+Only set `disabled` on `DotIcon`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+<Canvas of={DotIconStories.DisabledShowcase} />
+
 ## Accessibility
 
 - The icon is purely decorative; the child element should carry its own accessibility label.
 - Pair semantic appearances with meaningful icons so the state can be understood without relying on color alone.
+
+</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 { DotIcon, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+import { ArrowDown } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <DotIcon appearance='success' icon={ArrowDown}>
+      <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+    </DotIcon>
+  );
+}
+```
+
+### Pin Placement
+
+Position the dot at any of the four corners of the child:
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown} pin='top-end'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>
+```
+
+### Shapes
+
+Use `shape='square'` to match a square child element:
+
+```tsx
+<DotIcon appearance='muted' icon={ArrowDown} shape='square'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} shape='square' />
+</DotIcon>
+```
+
+### Appearances
+
+Pick a semantic color via `appearance`:
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown}>...</DotIcon>
+<DotIcon appearance='muted' icon={ArrowUp}>...</DotIcon>
+<DotIcon appearance='error' icon={Close}>...</DotIcon>
+```
+
+### Sizing
+
+The dot size is driven by the parent's size via the mapping helpers:
+
+```tsx
+import { DotIcon, mediaImageDotIconSizeMap, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+<DotIcon
+  appearance='success'
+  icon={ArrowDown}
+  size={mediaImageDotIconSizeMap[48]}
+>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>;
+```
+
+### Disabled State
+
+Only set `disabled` on `DotIcon`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown} disabled>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>
+```
+
+</Tab>
+</CustomTabs>

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

@@ -113,6 +113,41 @@ export const AppearanceShowcase: Story = {
   ),
 };
 
+export const DisabledShowcase: Story = {
+  args: { appearance: 'success', icon: ArrowDown },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+      <DotIcon
+        appearance='success'
+        icon={ArrowDown}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowUp}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='error'
+        icon={Close}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
 export const SizeShowcase: Story = {
   args: { appearance: 'muted', icon: Link },
   render: () => (
@@ -149,6 +184,14 @@ export const SizeShowcase: Story = {
       >
         <MediaImage src={parentSrc} size={64} shape='circle' />
       </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={Spinner}
+        size={mediaImageDotIconSizeMap[72]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={72} shape='circle' />
+      </DotIcon>
     </Box>
   ),
 };