@ledgerhq/lumen-ui-rnative 0.1.33 → 0.1.35

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

@@ -0,0 +1,137 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import type { ViewStyle } from 'react-native';
+import { Text } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { BaseTag } from './BaseTag';
+import type { BaseTagProps } from './types';
+
+const { colors } = ledgerLiveThemes.dark;
+
+const renderWithProvider = (component: React.ReactElement) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+
+const baseProps = {
+  consumerName: 'BaseTagTest',
+  variant: 'tag',
+  label: 'Label',
+  testID: 'base-tag',
+} satisfies BaseTagProps;
+
+describe('BaseTag Component', () => {
+  describe('Rendering', () => {
+    it('should render label text', () => {
+      renderWithProvider(<BaseTag {...baseProps} label='Bitcoin' />);
+      expect(screen.getByText('Bitcoin')).toBeTruthy();
+    });
+
+    it('should render testID on root element', () => {
+      renderWithProvider(<BaseTag {...baseProps} />);
+      expect(screen.getByTestId('base-tag')).toBeTruthy();
+    });
+
+    it('should not render any icon when renderIcon is not provided', () => {
+      renderWithProvider(<BaseTag {...baseProps} />);
+      expect(screen.queryByTestId('test-icon')).toBeNull();
+    });
+
+    it('should call renderIcon with the computed icon style', () => {
+      const renderIcon = jest.fn(() => (
+        <Text testID='test-icon'>icon</Text>
+      )) as BaseTagProps['renderIcon'];
+      renderWithProvider(<BaseTag {...baseProps} renderIcon={renderIcon} />);
+      expect(screen.getByTestId('test-icon')).toBeTruthy();
+      expect(renderIcon).toHaveBeenCalledWith(
+        expect.objectContaining({ color: expect.any(String) }),
+      );
+    });
+  });
+
+  describe('Appearances', () => {
+    const cases: [NonNullable<BaseTagProps['appearance']>, string][] = [
+      ['base', colors.bg.mutedTransparent],
+      ['gray', colors.bg.mutedTransparent],
+      ['accent', colors.bg.accent],
+      ['accent-subtle', colors.bg.activeSubtle],
+      ['success', colors.bg.success],
+      ['error', colors.bg.error],
+      ['warning', colors.bg.warning],
+      ['white', colors.bg.white],
+    ];
+
+    it.each(cases)(
+      'should render with %s background color',
+      (appearance, expected) => {
+        renderWithProvider(<BaseTag {...baseProps} appearance={appearance} />);
+        expect(screen.getByTestId('base-tag').props.style.backgroundColor).toBe(
+          expected,
+        );
+      },
+    );
+  });
+
+  describe('Sizes', () => {
+    it.each(['sm', 'md'] as const)('should render with %s size', (size) => {
+      renderWithProvider(<BaseTag {...baseProps} size={size} />);
+      expect(screen.getByTestId('base-tag')).toBeTruthy();
+    });
+
+    it('should use smaller padding for sm than md (tag variant)', () => {
+      const { rerender } = renderWithProvider(
+        <BaseTag {...baseProps} size='md' />,
+      );
+      const mdPadding =
+        screen.getByTestId('base-tag').props.style.paddingHorizontal;
+
+      rerender(
+        <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+          <BaseTag {...baseProps} size='sm' />
+        </ThemeProvider>,
+      );
+      const smPadding =
+        screen.getByTestId('base-tag').props.style.paddingHorizontal;
+
+      expect(smPadding).toBeLessThan(mdPadding);
+    });
+  });
+
+  describe('Variants', () => {
+    it('should use paddingHorizontal for tag variant', () => {
+      renderWithProvider(<BaseTag {...baseProps} variant='tag' />);
+      const style = screen.getByTestId('base-tag').props.style;
+      expect(style.paddingHorizontal).toBeDefined();
+      expect(style.paddingLeft).toBeUndefined();
+      expect(style.paddingRight).toBeUndefined();
+    });
+
+    it('should use asymmetric paddingLeft / paddingRight for media variant', () => {
+      renderWithProvider(<BaseTag {...baseProps} variant='media' />);
+      const style = screen.getByTestId('base-tag').props.style;
+      expect(style.paddingLeft).toBeDefined();
+      expect(style.paddingRight).toBeDefined();
+      expect(style.paddingHorizontal).toBeUndefined();
+    });
+  });
+
+  describe('Disabled', () => {
+    it('should apply disabled background when disabled', () => {
+      renderWithProvider(<BaseTag {...baseProps} disabled />);
+      expect(screen.getByTestId('base-tag').props.style.backgroundColor).toBe(
+        colors.bg.disabled,
+      );
+    });
+  });
+
+  describe('Styling', () => {
+    it('should merge custom style with computed root style', () => {
+      const custom: ViewStyle = { marginTop: 16 };
+      renderWithProvider(<BaseTag {...baseProps} style={custom} />);
+      expect(screen.getByTestId('base-tag').props.style.marginTop).toBe(16);
+    });
+  });
+});

package/src/lib/Components/BaseTag/BaseTag.tsx

@@ -0,0 +1,152 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import type { TagProps } from '../Tag/types';
+import { Box } from '../Utility';
+import type { BaseTagProps, BaseTagVariant } from './types';
+
+type Appearance = NonNullable<TagProps['appearance']>;
+type Size = NonNullable<TagProps['size']>;
+
+const useBaseTagStyles = ({
+  appearance,
+  size,
+  disabled,
+  variant,
+}: {
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+  variant: BaseTagVariant;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        base: t.colors.bg.mutedTransparent,
+        gray: t.colors.bg.mutedTransparent,
+        accent: t.colors.bg.accent,
+        'accent-subtle': t.colors.bg.activeSubtle,
+        success: t.colors.bg.success,
+        error: t.colors.bg.error,
+        warning: t.colors.bg.warning,
+        white: t.colors.bg.white,
+      };
+
+      const textColors: Record<Appearance, string> = {
+        base: t.colors.text.base,
+        gray: t.colors.text.muted,
+        accent: t.colors.text.onAccent,
+        'accent-subtle': t.colors.text.active,
+        success: t.colors.text.success,
+        error: t.colors.text.error,
+        warning: t.colors.text.warning,
+        white: t.colors.text.black,
+      };
+
+      const tagPadding = {
+        md: {
+          paddingHorizontal: t.spacings.s8,
+          paddingVertical: t.spacings.s4,
+        },
+        sm: {
+          paddingHorizontal: t.spacings.s4,
+          paddingVertical: t.spacings.s2,
+        },
+      } satisfies Record<Size, object>;
+
+      const mediaPadding = {
+        md: {
+          paddingLeft: t.spacings.s4,
+          paddingRight: t.spacings.s8,
+          paddingVertical: t.spacings.s4,
+        },
+        sm: {
+          paddingLeft: t.spacings.s4,
+          paddingRight: t.spacings.s4,
+          paddingVertical: t.spacings.s2,
+        },
+      } satisfies Record<Size, object>;
+
+      const padding =
+        variant === 'media' ? mediaPadding[size] : tagPadding[size];
+
+      const textTypography =
+        size === 'md' ? t.typographies.body3 : t.typographies.body4;
+
+      return {
+        root: StyleSheet.flatten([
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: t.spacings.s4,
+            borderRadius: t.borderRadius.xs,
+            backgroundColor: bgColors[appearance],
+            ...padding,
+          },
+          disabled && {
+            backgroundColor: t.colors.bg.disabled,
+          },
+        ]),
+        text: StyleSheet.flatten([
+          textTypography,
+          {
+            color: textColors[appearance],
+          },
+          disabled && {
+            color: t.colors.text.disabled,
+          },
+        ]),
+        icon: StyleSheet.flatten([
+          {
+            flexShrink: 0,
+            color: textColors[appearance],
+          },
+          disabled && {
+            color: t.colors.text.disabled,
+          },
+        ]),
+      };
+    },
+    [appearance, size, disabled, variant],
+  );
+};
+
+export const BaseTag = ({
+  appearance = 'accent',
+  size = 'md',
+  variant,
+  consumerName,
+  label,
+  renderIcon,
+  disabled: disabledProp = false,
+  lx = {},
+  style,
+  ref,
+  ...props
+}: BaseTagProps) => {
+  const disabled = useDisabledContext({
+    consumerName,
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useBaseTagStyles({
+    appearance,
+    size,
+    disabled: !!disabled,
+    variant,
+  });
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.root, style])}
+      {...props}
+    >
+      {renderIcon?.(styles.icon)}
+      <Text style={styles.text} numberOfLines={1}>
+        {label}
+      </Text>
+    </Box>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './BaseTag';
+export * from './types';

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import type { TagProps } from '../Tag/types';
+
+export type BaseTagVariant = 'tag' | 'media';
+
+export type BaseTagProps = Omit<TagProps, 'icon'> & {
+  variant: BaseTagVariant;
+  consumerName: string;
+  renderIcon?: (style: StyleProp<TextStyle>) => ReactNode;
+};

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

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { FC } from 'react';
 import { useState } from 'react';
 import { Button } from '../Button';
 import { SearchInput } from '../SearchInput';
-import { Box, Text } from '../Utility';
+import { Spot } from '../Spot';
+import { Box, RadialGradient, Text } from '../Utility';
 import { BottomSheet } from './BottomSheet';
 import { BottomSheetHeader } from './BottomSheetHeader';
 import {
@@ -11,6 +13,7 @@ import {
   BottomSheetView,
   BottomSheetVirtualizedList,
 } from './Scrollables';
+import type { BottomSheetBackgroundProps } from './types';
 import { useBottomSheetRef } from './useBottomSheetRef';
 
 const meta = {
@@ -654,3 +657,173 @@ export const VirtualizedList: Story = {
     );
   },
 };
+
+type StrongBackgroundColor = 'errorStrong' | 'successStrong' | 'mutedStrong';
+
+const createGradientBackground =
+  (color: StrongBackgroundColor): FC<BottomSheetBackgroundProps> =>
+  ({ style }) => (
+    <Box
+      style={style}
+      lx={{ backgroundColor: 'canvasSheet', overflow: 'hidden' }}
+    >
+      <RadialGradient
+        center={{ x: 0.5, y: 0 }}
+        stops={[
+          { color, offset: 0, opacity: 0.3 },
+          { color, offset: 1, opacity: 0 },
+        ]}
+        lx={{
+          position: 'absolute',
+          top: 's0',
+          left: 's0',
+          right: 's0',
+          height: 's320',
+        }}
+      />
+    </Box>
+  );
+
+const ErrorBackground = createGradientBackground('errorStrong');
+const SuccessBackground = createGradientBackground('successStrong');
+const MutedBackground = createGradientBackground('mutedStrong');
+
+export const InfoStateVariants: Story = {
+  args: {
+    snapPoints: 'full',
+    hideCloseButton: false,
+    onBack: undefined,
+    onClose: undefined,
+    enableHandlePanningGesture: true,
+    enablePanDownToClose: true,
+    enableBlurKeyboardOnGesture: true,
+    enableDynamicSizing: false,
+    detached: false,
+    backdropPressBehavior: 'close',
+    hideHandle: true,
+  },
+  render: (args) => {
+    const errorBottomSheetRef = useBottomSheetRef();
+    const successBottomSheetRef = useBottomSheetRef();
+    const mutedBottomSheetRef = useBottomSheetRef();
+
+    return (
+      <Box
+        lx={{
+          height: 's320',
+          width: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingTop: 's32',
+          gap: 's12',
+        }}
+      >
+        <Button
+          size='sm'
+          onPress={() => errorBottomSheetRef.current?.present()}
+        >
+          Error
+        </Button>
+        <Button
+          size='sm'
+          onPress={() => successBottomSheetRef.current?.present()}
+        >
+          Success
+        </Button>
+        <Button
+          size='sm'
+          onPress={() => mutedBottomSheetRef.current?.present()}
+        >
+          Muted
+        </Button>
+
+        <BottomSheet
+          {...args}
+          ref={errorBottomSheetRef}
+          backgroundComponent={ErrorBackground}
+        >
+          <BottomSheetView>
+            <BottomSheetHeader density='compact' />
+            <Box lx={{ alignItems: 'center', gap: 's24' }}>
+              <Spot appearance='error' size={72} />
+              <Box lx={{ alignItems: 'center', gap: 's12' }}>
+                <Text typography='heading4SemiBold' lx={{ color: 'base' }}>
+                  Title
+                </Text>
+                <Text
+                  typography='body2'
+                  lx={{ color: 'muted', textAlign: 'center' }}
+                >
+                  Description
+                </Text>
+              </Box>
+            </Box>
+            <Box lx={{ marginTop: 's24' }}>
+              <Button appearance='base' size='lg' isFull>
+                Label
+              </Button>
+            </Box>
+          </BottomSheetView>
+        </BottomSheet>
+
+        <BottomSheet
+          {...args}
+          ref={successBottomSheetRef}
+          backgroundComponent={SuccessBackground}
+        >
+          <BottomSheetView>
+            <BottomSheetHeader density='compact' />
+            <Box lx={{ alignItems: 'center', gap: 's24' }}>
+              <Spot appearance='check' size={72} />
+              <Box lx={{ alignItems: 'center', gap: 's12' }}>
+                <Text typography='heading4SemiBold' lx={{ color: 'base' }}>
+                  Title
+                </Text>
+                <Text
+                  typography='body2'
+                  lx={{ color: 'muted', textAlign: 'center' }}
+                >
+                  Description
+                </Text>
+              </Box>
+            </Box>
+            <Box lx={{ marginTop: 's24' }}>
+              <Button appearance='base' size='lg' isFull>
+                Label
+              </Button>
+            </Box>
+          </BottomSheetView>
+        </BottomSheet>
+
+        <BottomSheet
+          {...args}
+          ref={mutedBottomSheetRef}
+          backgroundComponent={MutedBackground}
+        >
+          <BottomSheetView>
+            <BottomSheetHeader density='compact' />
+            <Box lx={{ alignItems: 'center', gap: 's24' }}>
+              <Spot appearance='info' size={72} />
+              <Box lx={{ alignItems: 'center', gap: 's12' }}>
+                <Text typography='heading4SemiBold' lx={{ color: 'base' }}>
+                  Title
+                </Text>
+                <Text
+                  typography='body2'
+                  lx={{ color: 'muted', textAlign: 'center' }}
+                >
+                  Description
+                </Text>
+              </Box>
+            </Box>
+            <Box lx={{ marginTop: 's24' }}>
+              <Button appearance='base' size='lg' isFull>
+                Label
+              </Button>
+            </Box>
+          </BottomSheetView>
+        </BottomSheet>
+      </Box>
+    );
+  },
+};

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

@@ -184,6 +184,65 @@ describe('BottomSheet', () => {
       expect(element.props['data-detached']).toBe('true');
     });
 
+    it('uses default background style when no backgroundComponent is provided', () => {
+      const { BottomSheet } = require('./BottomSheet');
+      const { getByTestId } = renderWithTheme(
+        <BottomSheet testID='bottom-sheet'>
+          <Text>Content</Text>
+        </BottomSheet>,
+      );
+
+      const element = getByTestId('bottom-sheet');
+      expect(element.props['data-has-background-component']).toBe('false');
+      expect(element.props['data-has-background-style']).toBe('true');
+    });
+
+    it('renders the default handle when hideHandle is not set', () => {
+      const { BottomSheet } = require('./BottomSheet');
+      const { getByTestId, queryByTestId } = renderWithTheme(
+        <BottomSheet testID='bottom-sheet'>
+          <Text>Content</Text>
+        </BottomSheet>,
+      );
+
+      expect(getByTestId('bottom-sheet-handle')).toBeTruthy();
+      expect(queryByTestId('bottom-sheet-handle-hidden')).toBeNull();
+    });
+
+    it('renders the hidden handle placeholder when hideHandle is true', () => {
+      const { BottomSheet } = require('./BottomSheet');
+      const { getByTestId, queryByTestId } = renderWithTheme(
+        <BottomSheet hideHandle testID='bottom-sheet'>
+          <Text>Content</Text>
+        </BottomSheet>,
+      );
+
+      expect(getByTestId('bottom-sheet-handle-hidden')).toBeTruthy();
+      expect(queryByTestId('bottom-sheet-handle')).toBeNull();
+    });
+
+    it('forwards backgroundComponent and skips default background style', () => {
+      const { BottomSheet } = require('./BottomSheet');
+      const CustomBackground = () => (
+        <View testID='custom-bg'>
+          <Text>BG</Text>
+        </View>
+      );
+      const { getByTestId } = renderWithTheme(
+        <BottomSheet
+          backgroundComponent={CustomBackground}
+          testID='bottom-sheet'
+        >
+          <Text>Content</Text>
+        </BottomSheet>,
+      );
+
+      const element = getByTestId('bottom-sheet');
+      expect(element.props['data-has-background-component']).toBe('true');
+      expect(element.props['data-has-background-style']).toBe('false');
+      expect(getByTestId('custom-bg')).toBeTruthy();
+    });
+
     it('respects enableHandlePanningGesture prop', () => {
       const { BottomSheet } = require('./BottomSheet');
       const { getByTestId } = renderWithTheme(

package/src/lib/Components/BottomSheet/BottomSheet.tsx

@@ -6,7 +6,7 @@ import { StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { RuntimeConstants } from '../../utils';
 import { CustomBackdrop } from './CustomBackdrop';
-import { CustomHandle } from './CustomHandle';
+import { CustomHandle, HiddenHandle } from './CustomHandle';
 import type { BottomSheetProps } from './types';
 
 const OFFSET_TOP = 25;
@@ -25,7 +25,13 @@ const MAX_DYNAMIC_CONTENT_SIZE = {
   fullWithOffset: FULL_WITH_OFFSET,
 };
 
-const useStyles = ({ shadow }: { shadow: boolean }) => {
+const useStyles = ({
+  shadow,
+  hasCustomBackground,
+}: {
+  shadow: boolean;
+  hasCustomBackground: boolean;
+}) => {
   return useStyleSheet(
     (t) => ({
       root: StyleSheet.flatten([
@@ -35,7 +41,7 @@ const useStyles = ({ shadow }: { shadow: boolean }) => {
           flex: 1,
           borderTopLeftRadius: t.borderRadius.xl,
           borderTopRightRadius: t.borderRadius.xl,
-          backgroundColor: t.colors.bg.canvasSheet,
+          overflow: 'hidden',
         },
         shadow && {
           boxShadow: t.shadows.lg,
@@ -46,7 +52,7 @@ const useStyles = ({ shadow }: { shadow: boolean }) => {
         backgroundColor: t.colors.bg.canvasSheet,
       },
     }),
-    [shadow],
+    [shadow, hasCustomBackground],
   );
 };
 
@@ -74,6 +80,8 @@ export const BottomSheet = ({
   onBackdropPress,
   onChange,
   snapPoints = 'fullWithOffset',
+  backgroundComponent,
+  hideHandle = false,
   ref,
   ...props
 }: BottomSheetProps) => {
@@ -82,7 +90,10 @@ export const BottomSheet = ({
   const mergedRefs = useMergedRef<GorhomBottomSheetModal>(ref, innerRef);
   const [isOpen, setIsOpen] = useState(false);
 
-  const styles = useStyles({ shadow: hideBackdrop && isOpen });
+  const styles = useStyles({
+    shadow: hideBackdrop && isOpen,
+    hasCustomBackground: Boolean(backgroundComponent),
+  });
 
   /**
    * Match the snap points to the preset or the custom snap points array
@@ -163,7 +174,8 @@ export const BottomSheet = ({
       {...props}
       ref={mergedRefs}
       style={styles.root}
-      backgroundStyle={styles.background}
+      backgroundStyle={backgroundComponent ? undefined : styles.background}
+      backgroundComponent={backgroundComponent}
       onChange={handleChange}
       onAnimate={handleAnimate}
       /**
@@ -188,7 +200,7 @@ export const BottomSheet = ({
       /**
        * Components
        */
-      handleComponent={CustomHandle}
+      handleComponent={hideHandle ? HiddenHandle : CustomHandle}
       backdropComponent={hideBackdrop ? undefined : renderBackdrop}
     >
       <BottomSheetProvider value={{ onBack, hideCloseButton }}>

package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx

@@ -28,7 +28,7 @@ const useStyles = ({
         {
           position: 'relative',
           zIndex: Z_INDEX_DIALOG_CONTENT,
-          backgroundColor: t.colors.bg.canvasSheet,
+          backgroundColor: 'transparent',
           paddingBottom: t.spacings.s12,
         },
         spacing && {