@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.26

package/src/lib/Components/DotCount/DotCount.tsx

@@ -0,0 +1,130 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Box, Text } from '../Utility';
+import type { DotCountProps } from './types';
+
+export function DotCount({
+  value,
+  size = 'md',
+  max = 99,
+  appearance = 'base',
+  disabled: disabledProp = false,
+  lx = {},
+  style,
+  children,
+  accessibilityLabel,
+  ref,
+  ...props
+}: DotCountProps) {
+  const disabled = useDisabledContext({
+    consumerName: 'DotCount',
+    mergeWith: { disabled: disabledProp },
+  });
+
+  const styles = useStyles({
+    size,
+    appearance,
+    disabled,
+    pinned: !!children,
+  });
+
+  const cappedMax = Math.max(1, Math.min(max, 99));
+
+  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'
+      >
+        {value > 0 && (
+          <Text style={styles.text} allowFontScaling={false}>
+            {value <= cappedMax ? value : `${cappedMax}+`}
+          </Text>
+        )}
+      </Box>
+      {children}
+    </Box>
+  );
+}
+
+const useStyles = ({
+  size,
+  appearance,
+  disabled,
+  pinned,
+}: {
+  size: NonNullable<DotCountProps['size']>;
+  appearance: NonNullable<DotCountProps['appearance']>;
+  disabled: boolean;
+  pinned: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const sizeMap = {
+        lg: {
+          minWidth: t.sizes.s24,
+          minHeight: t.sizes.s24,
+          paddingHorizontal: t.spacings.s8,
+          paddingVertical: t.spacings.s2,
+        },
+        md: {
+          minHeight: t.sizes.s16,
+          minWidth: t.sizes.s16,
+          paddingHorizontal: t.spacings.s4,
+        },
+      };
+
+      const bgColorMap = {
+        base: { backgroundColor: t.colors.bg.interactive },
+        red: { backgroundColor: t.colors.bg.errorStrong },
+      };
+
+      const textMap = {
+        lg: { ...t.typographies.body2SemiBold },
+        md: { ...t.typographies.body4SemiBold },
+      };
+
+      const textColorMap = {
+        base: { color: t.colors.text.onInteractive },
+        red: { color: t.colors.text.onErrorStrong },
+      };
+
+      return {
+        container: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: t.borderRadius.full,
+          ...(pinned && {
+            position: 'absolute',
+            top: t.spacings.s0,
+            right: t.spacings.s0,
+            zIndex: 1,
+          }),
+          ...sizeMap[size],
+          ...(disabled
+            ? { backgroundColor: t.colors.bg.disabled }
+            : { ...bgColorMap[appearance] }),
+        },
+        text: {
+          ...textMap[size],
+          ...(disabled
+            ? { color: t.colors.text.disabled }
+            : { ...textColorMap[appearance] }),
+        },
+      };
+    },
+    [size, appearance, disabled, pinned],
+  );
+};

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

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

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

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { StyledViewProps } from '../../../styles';
+
+export type DotCountProps = {
+  /**
+   * The size of the dot count.
+   * @default md
+   */
+  size?: 'lg' | 'md';
+  /**
+   * The amount to be displayed.
+   *
+   * If higher than `max`, the displayed value will be "[max]+".
+   */
+  value: number;
+  /**
+   * The max value shown.
+   *
+   * If `value` is higher than `max`, the displayed value will be "[max]+".
+   *
+   * By design, it will ignore values higher than 99.
+   * @default 99
+   */
+  max?: number;
+  /**
+   * The appearance of the dot count.
+   * @default base
+   */
+  appearance?: 'base' | 'red';
+  /**
+   * Whether the dot count 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 count on top of it.
+   * If provided, it'll pin the dot count to the top-right of the child component passed.
+   */
+  children?: ReactNode;
+} & Omit<StyledViewProps, 'children'>;

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

@@ -0,0 +1,56 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DotIconStories from './DotIcon.stories';
+
+<Meta title='Communication/DotIcon' of={DotIconStories} />
+
+# DotIcon
+
+## 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
+
+<Canvas of={DotIconStories.Base} />
+
+- **Wrapper**: Relative container that preserves the child's layout
+- **Child**: The primary element (e.g. MediaImage, Spot)
+- **Dot**: Absolutely-positioned indicator with a semantic background and an icon inside
+
+## Properties
+
+### Overview
+
+<Canvas of={DotIconStories.Base} />
+<Controls of={DotIconStories.Base} />
+
+### Pin
+
+Four corner placements are available: `bottom-end` (default), `top-end`, `bottom-start`, and `top-start`.
+
+<Canvas of={DotIconStories.PinShowcase} />
+
+### Shapes
+
+<Canvas of={DotIconStories.ShapeShowcase} />
+
+- **circle** (default): Fully rounded dot
+- **square**: Rounded corners that scale with size
+
+### Appearances
+
+The `appearance` prop controls the semantic background color of the dot: `success`, `muted`, or `error`.
+
+<Canvas of={DotIconStories.AppearanceShowcase} />
+
+### Sizes
+
+The dot size is driven by the parent MediaImage or Spot size via the mapping helpers `mediaImageDotIconSizeMap` and `spotDotIconSizeMap`. Allowed sizes are `16`, `20`, and `24`. The icon size is handled internally by the component.
+
+<Canvas of={DotIconStories.SizeShowcase} />
+
+## 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.

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

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { ArrowDown, ArrowUp, Close, Link, Star } from '../../Symbols';
+import { MediaImage } from '../MediaImage';
+import { Spinner } from '../Spinner';
+import { Box } from '../Utility';
+import { DotIcon, mediaImageDotIconSizeMap } from './DotIcon';
+
+const meta = {
+  component: DotIcon,
+  title: 'Communication/DotIcon',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+} satisfies Meta<typeof DotIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const parentSrc = 'https://crypto-icons.ledger.com/ADA.png';
+
+export const Base: Story = {
+  args: {
+    appearance: 'success',
+    icon: ArrowDown,
+    pin: 'bottom-end',
+    size: mediaImageDotIconSizeMap[48],
+    shape: 'circle',
+    children: (
+      <MediaImage src={parentSrc} alt='Cardano' size={48} shape='circle' />
+    ),
+  },
+};
+
+export const PinShowcase: Story = {
+  args: { appearance: 'success', icon: ArrowDown },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+      <DotIcon appearance='success' icon={ArrowDown} pin='bottom-end'>
+        <MediaImage src={parentSrc} shape='circle' />
+      </DotIcon>
+      <DotIcon appearance='success' icon={ArrowDown} pin='top-end'>
+        <MediaImage src={parentSrc} shape='circle' />
+      </DotIcon>
+      <DotIcon appearance='success' icon={ArrowDown} pin='bottom-start'>
+        <MediaImage src={parentSrc} shape='circle' />
+      </DotIcon>
+      <DotIcon appearance='success' icon={ArrowDown} pin='top-start'>
+        <MediaImage src={parentSrc} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
+export const ShapeShowcase: Story = {
+  args: { appearance: 'muted', icon: ArrowDown },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's48' }}>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowDown}
+        shape='circle'
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowDown}
+        shape='square'
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='square' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
+export const AppearanceShowcase: 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'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowUp}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='error'
+        icon={Close}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
+export const SizeShowcase: Story = {
+  args: { appearance: 'muted', icon: Link },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's24' }}>
+      <DotIcon
+        appearance='muted'
+        icon={Link}
+        size={mediaImageDotIconSizeMap[40]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={40} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='success'
+        icon={Star}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='success'
+        icon={ArrowDown}
+        size={mediaImageDotIconSizeMap[56]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={56} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={Spinner}
+        size={mediaImageDotIconSizeMap[64]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={64} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};

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

@@ -0,0 +1,224 @@
+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 type { View } from 'react-native';
+import { Text } from 'react-native';
+import { ArrowDown } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { DotIcon } from './DotIcon';
+
+const { colors, sizes, borderRadius } = ledgerLiveThemes.dark;
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('DotIcon Component', () => {
+  describe('Rendering', () => {
+    it('should render children', () => {
+      const { getByText } = render(
+        <TestWrapper>
+          <DotIcon testID='dot-icon' appearance='success' icon={ArrowDown}>
+            <Text>Child</Text>
+          </DotIcon>
+        </TestWrapper>,
+      );
+
+      expect(getByText('Child')).toBeTruthy();
+    });
+
+    it('should render without children', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon testID='dot-icon' appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('dot-icon')).toBeTruthy();
+    });
+
+    it('should have correct displayName', () => {
+      expect(DotIcon.displayName).toBe('DotIcon');
+    });
+  });
+
+  describe('Appearances', () => {
+    it.each([
+      {
+        appearance: 'success' as const,
+        expectedColor: colors.bg.successStrong,
+      },
+      { appearance: 'muted' as const, expectedColor: colors.bg.mutedStrong },
+      { appearance: 'error' as const, expectedColor: colors.bg.errorStrong },
+    ])(
+      'should apply $appearance background color to the dot',
+      ({ appearance, expectedColor }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance={appearance}
+              icon={ArrowDown}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.backgroundColor).toBe(expectedColor);
+      },
+    );
+  });
+
+  describe('Sizes', () => {
+    it.each([
+      { size: 16 as const, expectedSize: sizes.s16 },
+      { size: 20 as const, expectedSize: sizes.s20 },
+      { size: 24 as const, expectedSize: sizes.s24 },
+    ])(
+      'should apply correct width and height for size $size',
+      ({ size, expectedSize }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance='success'
+              icon={ArrowDown}
+              size={size}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.width).toBe(expectedSize);
+        expect(dotView.props.style.height).toBe(expectedSize);
+      },
+    );
+  });
+
+  describe('Pins', () => {
+    it.each([
+      {
+        pin: 'bottom-end' as const,
+        verticalKey: 'bottom',
+        horizontalKey: 'right',
+      },
+      {
+        pin: 'bottom-start' as const,
+        verticalKey: 'bottom',
+        horizontalKey: 'left',
+      },
+      {
+        pin: 'top-end' as const,
+        verticalKey: 'top',
+        horizontalKey: 'right',
+      },
+      {
+        pin: 'top-start' as const,
+        verticalKey: 'top',
+        horizontalKey: 'left',
+      },
+    ])('should position dot at $pin', ({ pin, verticalKey, horizontalKey }) => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            pin={pin}
+          />
+        </TestWrapper>,
+      );
+
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style[verticalKey]).toBe(-3);
+      expect(dotView.props.style[horizontalKey]).toBe(-3);
+    });
+  });
+
+  describe('Shapes', () => {
+    it('should apply full border radius for circle shape', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            shape='circle'
+          />
+        </TestWrapper>,
+      );
+
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style.borderRadius).toBe(borderRadius.full);
+    });
+
+    it.each([
+      { size: 16 as const, expectedRadius: 5 },
+      { size: 20 as const, expectedRadius: 6 },
+      { size: 24 as const, expectedRadius: 8 },
+    ])(
+      'should apply correct border radius for square shape at size $size',
+      ({ size, expectedRadius }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance='success'
+              icon={ArrowDown}
+              shape='square'
+              size={size}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.borderRadius).toBe(expectedRadius);
+      },
+    );
+  });
+
+  describe('Ref forwarding', () => {
+    it('should forward ref to the root element', () => {
+      const ref = createRef<View>();
+
+      render(
+        <TestWrapper>
+          <DotIcon ref={ref} appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(ref.current).not.toBeNull();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom styles', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            style={{ marginTop: 10 }}
+          />
+        </TestWrapper>,
+      );
+
+      const root = getByTestId('dot-icon');
+      expect(root.props.style.marginTop).toBe(10);
+    });
+
+    it('should pass additional props', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon testID='custom-dot' appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('custom-dot')).toBeTruthy();
+    });
+  });
+});