@ledgerhq/lumen-ui-rnative 0.1.19 → 0.1.21

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

@@ -129,7 +129,7 @@ export const Base: Story = {
           <BottomSheetView>
             <BottomSheetHeader
               title='Title'
-              appearance='compact'
+              density='compact'
               description='Description'
             />
             <Box lx={{ flexDirection: 'column', gap: 's12' }}>
@@ -179,7 +179,7 @@ export const TitleExpanded: Story = {
           <BottomSheetView>
             <BottomSheetHeader
               title='Expanded title'
-              appearance='expanded'
+              density='expanded'
               description='Expanded description.'
             />
             <Box lx={{ flexDirection: 'column', gap: 's12' }}>
@@ -224,7 +224,7 @@ export const DynamicSizingWithoutSnapPoints: Story = {
           <BottomSheetScrollView>
             <BottomSheetHeader
               title='Dynamic Sizing'
-              appearance='compact'
+              density='compact'
               description='This bottom sheet adapts to its content height'
             />
             <Box lx={{ flexDirection: 'column', gap: 's12' }}>
@@ -266,7 +266,7 @@ export const DynamicSizingWithSnapPoints: Story = {
           <BottomSheetScrollView>
             <BottomSheetHeader
               title='Dynamic Sizing'
-              appearance='compact'
+              density='compact'
               description='This bottom sheet adapts to its content height and has snap points'
             />
             <Box lx={{ flexDirection: 'column', gap: 's12' }}>
@@ -311,7 +311,7 @@ export const PreventClose: Story = {
           <BottomSheetView>
             <BottomSheetHeader
               title='Hidden Close Button'
-              appearance='compact'
+              density='compact'
               description='This bottom sheet cannot be closed by dragging or button'
             />
             <Box lx={{ flexDirection: 'column', gap: 's12' }}>
@@ -355,7 +355,7 @@ export const ScrollView: Story = {
           <BottomSheetScrollView>
             <BottomSheetHeader
               title='Scrollable Content'
-              appearance='compact'
+              density='compact'
               description='This bottom sheet contains a scrollable view'
             />
             <Box lx={{ flexDirection: 'column', gap: 's12' }}>
@@ -411,7 +411,7 @@ export const VirtualList: Story = {
           <BottomSheetHeader
             spacing
             title='Virtual List'
-            appearance='compact'
+            density='compact'
             description='This bottom sheet contains a virtualized list'
           />
           <BottomSheetFlatList
@@ -491,7 +491,7 @@ export const StickyHeaderContent: Story = {
           <BottomSheetHeader
             spacing
             title='BottomSheetFlatList'
-            appearance='compact'
+            density='compact'
             description='The search input is rendered as a sticky list header'
           />
           <BottomSheetFlatList
@@ -543,7 +543,7 @@ export const StickyHeaderContent: Story = {
             <BottomSheetHeader
               spacing
               title='BottomSheetScrollView'
-              appearance='compact'
+              density='compact'
               description='The search input is rendered as a sticky list header'
             />
             {data.map((item) => (
@@ -613,7 +613,7 @@ export const VirtualizedList: Story = {
           <BottomSheetHeader
             spacing
             title='Virtualized List'
-            appearance='compact'
+            density='compact'
             description='This bottom sheet uses a VirtualizedList with custom getItem/getItemCount'
           />
           <BottomSheetVirtualizedList

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

@@ -9,16 +9,16 @@ import { Box, Text } from '../Utility';
 import { useBottomSheetContext } from './BottomSheet';
 import { BottomSheetHeaderProps } from './types';
 
-type Appearance = NonNullable<BottomSheetHeaderProps['appearance']>;
+type DensityValue = NonNullable<BottomSheetHeaderProps['density']>;
 
 const Z_INDEX_DIALOG_CONTENT = 1000;
 
 const useStyles = ({
-  appearance,
+  density,
   spacing,
   hidden,
 }: {
-  appearance: Appearance;
+  density: DensityValue;
   spacing: boolean;
   hidden: boolean;
 }) => {
@@ -42,7 +42,7 @@ const useStyles = ({
           justifyContent: 'space-between',
           gap: t.spacings.s16,
         },
-        appearance === 'expanded' && {
+        density === 'expanded' && {
           marginBottom: t.spacings.s16,
         },
         hidden && {
@@ -53,7 +53,7 @@ const useStyles = ({
         {
           flex: 1,
         },
-        appearance === 'expanded' && {
+        density === 'expanded' && {
           gap: t.spacings.s4,
           flex: 0,
         },
@@ -62,10 +62,10 @@ const useStyles = ({
         {
           color: t.colors.text.base,
         },
-        appearance === 'expanded' && {
+        density === 'expanded' && {
           ...t.typographies.heading3SemiBold,
         },
-        appearance === 'compact' && {
+        density === 'compact' && {
           textAlign: 'center',
           ...t.typographies.heading5SemiBold,
         },
@@ -74,7 +74,7 @@ const useStyles = ({
         t.typographies.body2,
         {
           color: t.colors.text.muted,
-          textAlign: appearance === 'compact' ? 'center' : 'left',
+          textAlign: density === 'compact' ? 'center' : 'left',
         },
       ]),
       iconPlaceholder: {
@@ -82,7 +82,7 @@ const useStyles = ({
         height: t.sizes.s32,
       },
     }),
-    [appearance, spacing, hidden],
+    [density, spacing, hidden],
   );
 };
 
@@ -91,7 +91,7 @@ export const BottomSheetHeader = ({
   style,
   title,
   description,
-  appearance = 'compact',
+  density = 'compact',
   spacing = false,
   ...props
 }: BottomSheetHeaderProps) => {
@@ -110,9 +110,9 @@ export const BottomSheetHeader = ({
   const hasIcons = Boolean(onBack || !hideCloseButton);
 
   const styles = useStyles({
-    appearance,
+    density,
     spacing,
-    hidden: !hasIcons && appearance !== 'compact',
+    hidden: !hasIcons && density !== 'compact',
   });
 
   if (!title && !description && !onBack && hideCloseButton) {
@@ -154,7 +154,7 @@ export const BottomSheetHeader = ({
             />
           )}
         </Box>
-        {appearance === 'compact' && titleComponent}
+        {density === 'compact' && titleComponent}
         <Box style={styles.iconPlaceholder}>
           {!hideCloseButton && (
             <IconButton
@@ -170,7 +170,7 @@ export const BottomSheetHeader = ({
           )}
         </Box>
       </Box>
-      {appearance === 'expanded' && titleComponent}
+      {density === 'expanded' && titleComponent}
     </Box>
   );
 };

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

@@ -7,6 +7,7 @@ import {
   BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
 } from '@gorhom/bottom-sheet';
 
+import { Density } from '@ledgerhq/lumen-utils-shared';
 import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { StyledViewProps } from '../../../styles';
 export type BottomSheetProps = PropsWithChildren & {
@@ -134,10 +135,10 @@ export type BottomSheetProps = PropsWithChildren & {
 
 export type BottomSheetHeaderProps = {
   /**
-   * The appearance of the header.
+   * The density of the header.
    * @default 'compact'
    */
-  appearance?: 'compact' | 'expanded';
+  density?: Density;
   /**
    * The title of the header.
    */

package/src/lib/Components/Button/BaseButton.tsx

@@ -35,6 +35,7 @@ const useStyles = ({
   size,
   disabled,
   pressed,
+  hasIcon,
   iconOnly,
   isFull,
 }: {
@@ -42,6 +43,7 @@ const useStyles = ({
   size: Size;
   disabled: boolean;
   pressed: boolean;
+  hasIcon: boolean;
   iconOnly: boolean;
   isFull: boolean;
 }) => {
@@ -121,7 +123,7 @@ const useStyles = ({
           typography,
           {
             color: disabled ? t.colors.text.disabled : textColors[appearance],
-            textAlign: 'left',
+            textAlign: hasIcon ? 'left' : 'center',
           },
         ]),
         icon: {
@@ -212,6 +214,7 @@ const BaseButtonContent = ({
     size,
     disabled,
     pressed,
+    hasIcon: !!IconProp,
     iconOnly,
     isFull,
   });

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

@@ -472,6 +472,7 @@ export const CardContentTitle = ({
       asText: StyleSheet.flatten([
         t.typographies.body2SemiBold,
         {
+          flexShrink: 1,
           color: disabled ? t.colors.text.disabled : t.colors.text.base,
           textAlign: align === 'right' ? 'right' : 'left',
         },
@@ -538,6 +539,7 @@ export const CardContentDescription = ({
       asText: StyleSheet.flatten([
         t.typographies.body3,
         {
+          flexShrink: 1,
           color: disabled ? t.colors.text.disabled : t.colors.text.muted,
           textAlign: align === 'right' ? 'right' : 'left',
         },

package/src/lib/Components/DotSymbol/DotSymbol.mdx

@@ -0,0 +1,54 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DotSymbolStories from './DotSymbol.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+
+<Meta title='Communication/DotSymbol' of={DotSymbolStories} />
+
+<CustomTabs>
+  <Tab label="Overview">
+# DotSymbol
+
+## Introduction
+
+DotSymbol positions a small image indicator at a configurable corner of a child element such as MediaImage or Spot. It is commonly used to show a network badge or secondary icon overlapping a primary symbol.
+
+## Anatomy
+
+<Canvas of={DotSymbolStories.Base} />
+
+- **Wrapper**: Relative container that preserves the child's layout
+- **Child**: The primary element (e.g. MediaImage, Spot)
+- **Dot**: Absolutely-positioned image indicator with border and configurable shape
+
+## Properties
+
+### Overview
+
+<Canvas of={DotSymbolStories.Base} />
+<Controls of={DotSymbolStories.Base} />
+
+### Pin
+
+Four corner placements are available: `bottom-end` (default), `top-end`, `bottom-start`, and `top-start`.
+
+<Canvas of={DotSymbolStories.PinShowcase} />
+
+### Shapes
+
+<Canvas of={DotSymbolStories.ShapeShowcase} />
+
+- **circle** (default): Fully rounded dot
+- **square**: Rounded corners that scale with size
+
+### Sizes
+
+The dot size is driven by the parent MediaImage or Spot size via the mapping helpers `mediaImageDotSizeMap` and `spotDotSizeMap`.
+
+<Canvas of={DotSymbolStories.SizeShowcase} />
+
+## Accessibility
+
+- Always provide a meaningful `alt` prop on the DotSymbol so the indicator image is announced by screen readers.
+- The child element should carry its own accessibility label independently.
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { CoinAlert } from '../../Symbols';
+import { MediaImage } from '../MediaImage';
+import { Spot } from '../Spot';
+import { Box } from '../Utility';
+import { DotSymbol, mediaImageDotSizeMap } from './DotSymbol';
+
+const meta = {
+  component: DotSymbol,
+  title: 'Communication/DotSymbol',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+} satisfies Meta<typeof DotSymbol>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const parentSrc = 'https://crypto-icons.ledger.com/ADA.png';
+const dotSrc = 'https://crypto-icons.ledger.com/BTC.png';
+
+export const Base: Story = {
+  args: {
+    src: dotSrc,
+    alt: 'Ethereum network',
+    pin: 'bottom-end',
+    size: 20,
+    shape: 'circle',
+    children: <MediaImage src={parentSrc} alt='Cardano' shape='circle' />,
+  },
+};
+
+export const PinShowcase: Story = {
+  args: { src: dotSrc, alt: 'Pin showcase' },
+  render: () => (
+    <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's24' }}>
+      <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+        <DotSymbol src={dotSrc} pin='bottom-end'>
+          <MediaImage src={parentSrc} shape='circle' />
+        </DotSymbol>
+        <DotSymbol src={dotSrc} pin='top-end'>
+          <MediaImage src={parentSrc} shape='circle' />
+        </DotSymbol>
+        <DotSymbol src={dotSrc} pin='bottom-start'>
+          <MediaImage src={parentSrc} shape='circle' />
+        </DotSymbol>
+        <DotSymbol src={dotSrc} pin='top-start'>
+          <MediaImage src={parentSrc} shape='circle' />
+        </DotSymbol>
+      </Box>
+      <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+        <DotSymbol src={dotSrc} pin='bottom-end'>
+          <Spot appearance='icon' icon={CoinAlert} />
+        </DotSymbol>
+        <DotSymbol src={dotSrc} pin='top-end'>
+          <Spot appearance='icon' icon={CoinAlert} />
+        </DotSymbol>
+        <DotSymbol src={dotSrc} pin='bottom-start'>
+          <Spot appearance='icon' icon={CoinAlert} />
+        </DotSymbol>
+        <DotSymbol src={dotSrc} pin='top-start'>
+          <Spot appearance='icon' icon={CoinAlert} />
+        </DotSymbol>
+      </Box>
+    </Box>
+  ),
+};
+
+export const ShapeShowcase: Story = {
+  args: { src: dotSrc, alt: 'Shape showcase' },
+  render: () => (
+    <Box lx={{ flexDirection: 'column', alignItems: 'center', gap: 's48' }}>
+      <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's48' }}>
+        <DotSymbol shape='square' src={dotSrc} pin='bottom-end'>
+          <MediaImage src={parentSrc} shape='circle' />
+        </DotSymbol>
+        <DotSymbol shape='circle' src={dotSrc} pin='bottom-end'>
+          <MediaImage src={parentSrc} shape='circle' />
+        </DotSymbol>
+      </Box>
+    </Box>
+  ),
+};
+
+export const SizeShowcase: Story = {
+  args: { src: dotSrc, alt: 'Size showcase' },
+  render: () => (
+    <Box lx={{ flexDirection: 'column', gap: 's40' }}>
+      <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's24' }}>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[20]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={20} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[24]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={24} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[32]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={32} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[40]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={40} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[48]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={48} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[56]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={56} shape='circle' />
+        </DotSymbol>
+      </Box>
+      <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's24' }}>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[20]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={20} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[24]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={24} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[32]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={32} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[40]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={40} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[48]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={48} shape='circle' />
+        </DotSymbol>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[56]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={56} shape='circle' />
+        </DotSymbol>
+      </Box>
+    </Box>
+  ),
+};

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

@@ -0,0 +1,119 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, waitFor } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { DotSymbol } from './DotSymbol';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('DotSymbol Component', () => {
+  const dotSrc = 'https://crypto-icons.ledger.com/BTC.png';
+
+  it('should render children and dot image', () => {
+    const { getByText, getByTestId } = render(
+      <TestWrapper>
+        <DotSymbol src={dotSrc} alt='Bitcoin'>
+          <Text>Child</Text>
+        </DotSymbol>
+      </TestWrapper>,
+    );
+
+    expect(getByText('Child')).toBeTruthy();
+
+    const img = getByTestId('dot-symbol-img');
+    expect(img.props.source).toEqual({ uri: dotSrc });
+  });
+
+  it('should render without children', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotSymbol src={dotSrc} />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-symbol-img')).toBeTruthy();
+  });
+
+  it('should render fallback when image fails to load', async () => {
+    const { getByTestId, queryByTestId, rerender } = render(
+      <TestWrapper>
+        <DotSymbol src='https://broken-link.com/404.png' />
+      </TestWrapper>,
+    );
+
+    const img = getByTestId('dot-symbol-img');
+    img.props.onError();
+
+    rerender(
+      <TestWrapper>
+        <DotSymbol src='https://broken-link.com/404.png' />
+      </TestWrapper>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('dot-symbol-img')).toBeNull();
+    });
+  });
+
+  it('should reset error state when src changes', async () => {
+    const { getByTestId, rerender } = render(
+      <TestWrapper>
+        <DotSymbol src='https://broken-link.com/404.png' />
+      </TestWrapper>,
+    );
+
+    const img = getByTestId('dot-symbol-img');
+    img.props.onError();
+
+    rerender(
+      <TestWrapper>
+        <DotSymbol src={dotSrc} />
+      </TestWrapper>,
+    );
+
+    await waitFor(() => {
+      const newImg = getByTestId('dot-symbol-img');
+      expect(newImg.props.source).toEqual({ uri: dotSrc });
+    });
+  });
+
+  it('should set accessibility label from alt prop', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <DotSymbol src={dotSrc} alt='Bitcoin network' />
+      </TestWrapper>,
+    );
+
+    expect(getByLabelText('Bitcoin network')).toBeTruthy();
+  });
+
+  it('should apply custom styles', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotSymbol testID='ds' src={dotSrc} style={{ marginTop: 10 }} />
+      </TestWrapper>,
+    );
+
+    const root = getByTestId('ds');
+    expect(root.props.style.marginTop).toBe(10);
+  });
+
+  it('should pass additional props', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotSymbol testID='custom-dot' src={dotSrc} />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('custom-dot')).toBeTruthy();
+  });
+
+  it('should have correct displayName', () => {
+    expect(DotSymbol.displayName).toBe('DotSymbol');
+  });
+});