@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.26

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/DotIndicator/DotIndicator.mdx

@@ -0,0 +1,82 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DotIndicatorStories from './DotIndicator.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+
+<Meta title='Communication/DotIndicator' of={DotIndicatorStories} />
+
+# DotIndicator
+
+<CustomTabs>
+  <Tab label="Overview">
+
+    ## Introduction
+
+    DotIndicator is a small colored dot used to signal status or draw attention without displaying a number. It supports two appearances (`base` and `red`) and can be pinned to the top-right of a child element.
+
+    > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=16470-25597).
+
+    ## Properties
+
+    <Canvas of={DotIndicatorStories.Base} />
+    <Controls of={DotIndicatorStories.Base} />
+
+    ## Sizes
+
+    DotIndicator comes in three sizes:
+
+    - **xs** - compact dot for tight layouts.
+    - **sm** (default) - standard dot for most use cases.
+    - **md** - larger dot for prominent indicators.
+
+    <Canvas of={DotIndicatorStories.SizeShowcase} />
+
+    ## Appearances
+
+    Two color schemes are available:
+
+    - **base** (default) - neutral dot for general-purpose indicators.
+    - **red** - high-visibility dot, typically used for unread or alert states.
+
+    <Canvas of={DotIndicatorStories.AppearanceShowcase} />
+
+    ## With Children
+
+    When wrapping a child element, the dot pins itself to the top-right corner.
+
+    <Canvas of={DotIndicatorStories.WithChildren} />
+
+  </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 { DotIndicator } from '@ledgerhq/lumen-ui-rnative';
+
+    function MyComponent() {
+      return <DotIndicator appearance="red" />;
+    }
+    ```
+
+    ### Pinned to a child
+
+    ```tsx
+    <DotIndicator appearance="red">
+      <Button size="sm">Submit</Button>
+    </DotIndicator>
+    ```
+
+    ### Accessibility
+
+    Pass `accessibilityLabel` to provide screen reader context:
+
+    ```tsx
+    <DotIndicator accessibilityLabel="New notifications" />
+    ```
+
+  </Tab>
+</CustomTabs>

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Button } from '../Button/Button';
+import { Box } from '../Utility/Box';
+import { DotIndicator } from './DotIndicator';
+
+const meta = {
+  component: DotIndicator,
+  title: 'Communication/DotIndicator',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['xs', 'sm', 'md'],
+    },
+    appearance: {
+      control: 'radio',
+      options: ['base', 'red'],
+    },
+  },
+} satisfies Meta<typeof DotIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    appearance: 'base',
+  },
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotIndicator size='xs' />
+      <DotIndicator size='sm' />
+      <DotIndicator size='md' />
+    </Box>
+  ),
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotIndicator appearance='base' />
+      <DotIndicator appearance='red' />
+      <DotIndicator disabled />
+    </Box>
+  ),
+};
+
+export const WithChildren: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+      <DotIndicator appearance='red'>
+        <Button size='sm'>Submit</Button>
+      </DotIndicator>
+    </Box>
+  ),
+};

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

@@ -0,0 +1,132 @@
+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 { Text, type View } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { DotIndicator } from './DotIndicator';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('DotIndicator', () => {
+  it('should render without crashing', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render children', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <DotIndicator>
+          <Text>Child</Text>
+        </DotIndicator>
+      </TestWrapper>,
+    );
+
+    expect(getByText('Child')).toBeTruthy();
+  });
+
+  it('should apply accessibility label', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <DotIndicator accessibilityLabel='New notifications' />
+      </TestWrapper>,
+    );
+
+    expect(getByLabelText('New notifications')).toBeTruthy();
+  });
+
+  it('should forward testID to the outer wrapper', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotIndicator testID='dot-indicator' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-indicator')).toBeTruthy();
+  });
+
+  it('should forward pointerEvents to the outer wrapper', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <DotIndicator testID='dot-indicator' pointerEvents='none' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-indicator').props.pointerEvents).toBe('none');
+  });
+
+  it('should forward ref to the outer wrapper', () => {
+    const ref = createRef<View>();
+
+    render(
+      <TestWrapper>
+        <DotIndicator ref={ref} />
+      </TestWrapper>,
+    );
+
+    expect(ref.current).toBeTruthy();
+  });
+
+  it('should render in xs size', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator size='xs' />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render in md size', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator size='md' />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with red appearance', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator appearance='red' />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with disabled state', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator disabled />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render pinned overlay when children provided', () => {
+    const { getByTestId, getByText } = render(
+      <TestWrapper>
+        <DotIndicator testID='dot-indicator'>
+          <Text>Content</Text>
+        </DotIndicator>
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('dot-indicator')).toBeTruthy();
+    expect(getByText('Content')).toBeTruthy();
+  });
+});

package/src/lib/Components/DotIndicator/DotIndicator.tsx

@@ -0,0 +1,97 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
+import type { DotIndicatorProps } from './types';
+
+export function DotIndicator({
+  size = 'sm',
+  appearance = 'base',
+  disabled: disabledProp = false,
+  lx = {},
+  style,
+  children,
+  accessibilityLabel,
+  ref,
+  ...props
+}: DotIndicatorProps) {
+  const disabled = useDisabledContext({
+    consumerName: 'DotIndicator',
+    mergeWith: { disabled: disabledProp },
+  });
+
+  const styles = useStyles({
+    size,
+    appearance,
+    disabled,
+    pinned: !!children,
+  });
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([
+        children ? { position: 'relative' } : undefined,
+        style,
+      ])}
+      {...props}
+    >
+      <Box
+        style={styles.container}
+        accessibilityRole='image'
+        accessibilityLabel={accessibilityLabel}
+        accessible={!!accessibilityLabel}
+        pointerEvents='none'
+      />
+      {children}
+    </Box>
+  );
+}
+
+const useStyles = ({
+  size,
+  appearance,
+  disabled,
+  pinned,
+}: {
+  size: NonNullable<DotIndicatorProps['size']>;
+  appearance: NonNullable<DotIndicatorProps['appearance']>;
+  disabled: boolean;
+  pinned: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const sizeMap = {
+        xs: t.sizes.s10,
+        sm: t.sizes.s12,
+        md: t.sizes.s16,
+      };
+
+      const bgColorMap = {
+        base: { backgroundColor: t.colors.bg.interactive },
+        red: { backgroundColor: t.colors.bg.errorStrong },
+      };
+
+      return {
+        container: {
+          height: sizeMap[size],
+          aspectRatio: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: t.borderRadius.full,
+          ...(pinned && {
+            position: 'absolute',
+            top: t.spacings.s0,
+            right: t.spacings.s0,
+            zIndex: 1,
+          }),
+          ...(disabled
+            ? { backgroundColor: t.colors.bg.disabled }
+            : { ...bgColorMap[appearance] }),
+        },
+      };
+    },
+    [size, appearance, disabled, pinned],
+  );
+};

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

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

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { StyledViewProps } from '../../../styles';
+
+export type DotIndicatorProps = {
+  /**
+   * The size of the dot indicator.
+   * @default sm
+   */
+  size?: 'xs' | 'sm' | 'md';
+  /**
+   * The appearance of the dot indicator.
+   * @default base
+   */
+  appearance?: 'base' | 'red';
+  /**
+   * Whether the dot indicator should show a disabled appearance.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Can be used as a wrapper to any component in case you wish to overlay a dot indicator on top of it.
+   * If provided, it'll pin the dot indicator to the top-right of the child component passed.
+   */
+  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>