@ledgerhq/lumen-ui-rnative 0.1.35 → 0.1.37

package/src/lib/Components/DescriptionItem/DescriptionItem.mdx

@@ -0,0 +1,139 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DescriptionItemStories from './DescriptionItem.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+
+<Meta title='Containment/DescriptionItem' of={DescriptionItemStories} />
+
+# DescriptionItem
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10311-11837&m=dev).
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+DescriptionItem is a compound component for displaying key-value rows — typically used inside a summary panel, transaction detail, or settings screen. It composes a leading label side and a trailing value side, with the trailing always taking priority over the leading when space is constrained.
+
+## Anatomy
+
+<Canvas of={DescriptionItemStories.Base} />
+
+- **DescriptionItem**: Root row container. Accepts an optional `size` prop (`md` | `sm`).
+- **DescriptionItemLeading**: Left section holding the label and any optional sibling (e.g. a tooltip icon).
+- **DescriptionItemLabel**: Muted text label. Wraps to a second line before truncating (`numberOfLines={2}`).
+- **DescriptionItemTrailing**: Right section holding the value or any inline element (Tag, Link, etc.). Never shrinks — always has layout priority.
+- **DescriptionItemValue**: Semi-bold value text. Truncates to a single line (`numberOfLines={1}`).
+
+## Properties
+
+<Canvas of={DescriptionItemStories.Base} />
+<Controls of={DescriptionItemStories.Base} />
+
+### Trailing variants
+
+The trailing section accepts any content — a plain value, a `Tag`, multiple `Tag`s, or a custom element. Use `DescriptionItemValue` for plain text; place other components directly in `DescriptionItemTrailing`.
+
+<Canvas of={DescriptionItemStories.TrailingVariants} />
+
+### Size
+
+Two sizes are available — `md` (default) and `sm`.
+
+- The size of `DescriptionItemValue` is inherited from the parent `DescriptionItem`.
+- The size of additional trailing content (e.g. `Tag`) needs to be set explicitly.
+
+<Canvas of={DescriptionItemStories.SizeShowcase} />
+
+### With info tooltip
+
+Pair a `Tooltip` with an info icon inside `DescriptionItemLeading` to surface additional context without cluttering the label.
+
+<Canvas of={DescriptionItemStories.WithInfoIcon} />
+
+### Truncation
+
+The label can wrap to two lines before truncating. The trailing value truncates after one line. When both sides have long content, the trailing always gets layout priority.
+
+<Canvas of={DescriptionItemStories.TruncationBehavior} />
+
+</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 {
+  DescriptionItem,
+  DescriptionItemLabel,
+  DescriptionItemLeading,
+  DescriptionItemTrailing,
+  DescriptionItemValue,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <DescriptionItem size='md'>
+      <DescriptionItemLeading>
+        <DescriptionItemLabel>Fees</DescriptionItemLabel>
+      </DescriptionItemLeading>
+      <DescriptionItemTrailing>
+        <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+      </DescriptionItemTrailing>
+    </DescriptionItem>
+  );
+}
+```
+
+### With info tooltip
+
+Use a `Tooltip` alongside the label to add contextual information:
+
+```tsx
+import {
+  DescriptionItem,
+  DescriptionItemLabel,
+  DescriptionItemLeading,
+  DescriptionItemTrailing,
+  DescriptionItemValue,
+  InteractiveIcon,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Information } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { Text } from 'react-native';
+
+function MyComponent() {
+  return (
+    <DescriptionItem>
+      <DescriptionItemLeading>
+        <DescriptionItemLabel>Fees</DescriptionItemLabel>
+        <Tooltip>
+          <TooltipTrigger>
+            <InteractiveIcon
+              icon={Information}
+              size={16}
+              iconType='stroked'
+              accessibilityLabel='More information'
+            />
+          </TooltipTrigger>
+          <TooltipContent
+            content={<Text>Network fee paid to miners</Text>}
+          />
+        </Tooltip>
+      </DescriptionItemLeading>
+      <DescriptionItemTrailing>
+        <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+      </DescriptionItemTrailing>
+    </DescriptionItem>
+  );
+}
+```
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { Text, View } from 'react-native';
+import { Information } from '../../Symbols';
+import { InteractiveIcon } from '../InteractiveIcon';
+import { Tag } from '../Tag';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
+import {
+  DescriptionItem,
+  DescriptionItemLabel,
+  DescriptionItemLeading,
+  DescriptionItemTrailing,
+  DescriptionItemValue,
+} from './DescriptionItem';
+
+const Container = ({ children }: { children: React.ReactNode }) => (
+  <View style={{ padding: 8, backgroundColor: '#ffffff', width: 320 }}>
+    {children}
+  </View>
+);
+
+const meta: Meta<typeof DescriptionItem> = {
+  component: DescriptionItem,
+  title: 'Containment/DescriptionItem',
+  subcomponents: {
+    DescriptionItemLeading,
+    DescriptionItemLabel,
+    DescriptionItemTrailing,
+    DescriptionItemValue,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Container>
+        <Story />
+      </Container>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DescriptionItem>;
+
+export const Base: Story = {
+  args: {
+    size: 'md',
+  },
+  render: (args) => (
+    <DescriptionItem {...args}>
+      <DescriptionItemLeading>
+        <DescriptionItemLabel>Fees</DescriptionItemLabel>
+      </DescriptionItemLeading>
+      <DescriptionItemTrailing>
+        <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+      </DescriptionItemTrailing>
+    </DescriptionItem>
+  ),
+};
+
+export const SizeShowcase: Story = {
+  args: {
+    size: 'md',
+  },
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <DescriptionItem size='md'>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Network</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>Ethereum</DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+
+      <DescriptionItem size='md'>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Network</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <Tag size='md' label='Ethereum' appearance='base' />
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+      <br />
+      <DescriptionItem size='sm'>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Network</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>Ethereum</DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+
+      <DescriptionItem size='sm'>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Network</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <Tag size='sm' label='Ethereum' appearance='base' />
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+    </View>
+  ),
+};
+
+export const TrailingVariants: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <DescriptionItem>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Plain value</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>Ethereum</DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+
+      <DescriptionItem>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Tag</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <Tag size='md' label='Confirmed' appearance='success' />
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+
+      <DescriptionItem>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Multiple tags</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <Tag size='md' label='ERC-20' appearance='base' />
+          <Tag size='md' label='New' appearance='accent' />
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+    </View>
+  ),
+};
+
+export const WithInfoIcon: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <DescriptionItem>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Fees</DescriptionItemLabel>
+          <Tooltip>
+            <TooltipTrigger>
+              <InteractiveIcon
+                icon={Information}
+                size={16}
+                iconType='stroked'
+                accessibilityLabel='More information'
+              />
+            </TooltipTrigger>
+            <TooltipContent content={<Text>Network fee paid to miners</Text>} />
+          </Tooltip>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+
+      <DescriptionItem>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Estimated time</DescriptionItemLabel>
+          <Tooltip>
+            <TooltipTrigger>
+              <InteractiveIcon
+                icon={Information}
+                size={16}
+                iconType='stroked'
+                accessibilityLabel='More information'
+              />
+            </TooltipTrigger>
+            <TooltipContent
+              content={<Text>Time may vary based on network congestion</Text>}
+            />
+          </Tooltip>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>~30 min</DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+    </View>
+  ),
+};
+
+export const TruncationBehavior: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <DescriptionItem>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>
+            This is a very long label that should go to a second line.
+          </DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+
+      <DescriptionItem>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>Label</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>
+            0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045
+          </DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+
+      <DescriptionItem>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>
+            Destination address on network
+          </DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>
+            0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045
+          </DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+    </View>
+  ),
+};

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

@@ -0,0 +1,112 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import {
+  DescriptionItem,
+  DescriptionItemLabel,
+  DescriptionItemLeading,
+  DescriptionItemTrailing,
+  DescriptionItemValue,
+} from './DescriptionItem';
+import type { DescriptionItemProps, DescriptionItemSize } from './types';
+
+const typographyTokens = ledgerLiveThemes.dark.typographies.sm;
+const typographies = {
+  ...typographyTokens.heading,
+  ...typographyTokens.body,
+};
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+const renderDescriptionItem = (props: Partial<DescriptionItemProps> = {}) =>
+  render(
+    <TestWrapper>
+      <DescriptionItem testID='description-item' {...props}>
+        <DescriptionItemLeading testID='leading'>
+          <DescriptionItemLabel>Label</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing testID='trailing'>
+          <DescriptionItemValue>Value</DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+    </TestWrapper>,
+  );
+
+describe('DescriptionItem', () => {
+  describe('Rendering', () => {
+    it('renders label and value', () => {
+      renderDescriptionItem();
+
+      expect(screen.getByText('Label')).toBeTruthy();
+      expect(screen.getByText('Value')).toBeTruthy();
+    });
+
+    it('forwards testID to sub-components', () => {
+      renderDescriptionItem();
+
+      expect(screen.getByTestId('description-item')).toBeTruthy();
+      expect(screen.getByTestId('leading')).toBeTruthy();
+      expect(screen.getByTestId('trailing')).toBeTruthy();
+    });
+  });
+
+  describe('DescriptionItemLabel', () => {
+    it.each([
+      ['md', typographies.body2],
+      ['sm', typographies.body3],
+    ])('applies %s size typography', (size, expectedTypography) => {
+      renderDescriptionItem({ size: size as DescriptionItemSize });
+
+      const labelStyle = screen.getByText('Label').props.style;
+      expect(labelStyle.fontSize).toBe(expectedTypography.fontSize);
+      expect(labelStyle.fontWeight).toBe(expectedTypography.fontWeight);
+    });
+
+    it('defaults to md typography when no size is provided', () => {
+      renderDescriptionItem();
+
+      const labelStyle = screen.getByText('Label').props.style;
+      expect(labelStyle.fontSize).toBe(typographies.body2.fontSize);
+      expect(labelStyle.fontWeight).toBe(typographies.body2.fontWeight);
+    });
+
+    it('truncates label to two lines by default', () => {
+      renderDescriptionItem();
+
+      expect(screen.getByText('Label').props.numberOfLines).toBe(2);
+    });
+  });
+
+  describe('DescriptionItemValue', () => {
+    it.each([
+      ['md', typographies.body2SemiBold],
+      ['sm', typographies.body3SemiBold],
+    ])('applies %s size typography', (size, expectedTypography) => {
+      renderDescriptionItem({ size: size as DescriptionItemSize });
+
+      const valueStyle = screen.getByText('Value').props.style;
+      expect(valueStyle.fontSize).toBe(expectedTypography.fontSize);
+      expect(valueStyle.fontWeight).toBe(expectedTypography.fontWeight);
+    });
+
+    it('defaults to md typography when no size is provided', () => {
+      renderDescriptionItem();
+
+      const valueStyle = screen.getByText('Value').props.style;
+      expect(valueStyle.fontSize).toBe(typographies.body2SemiBold.fontSize);
+      expect(valueStyle.fontWeight).toBe(typographies.body2SemiBold.fontWeight);
+    });
+
+    it('truncates value to one line by default', () => {
+      renderDescriptionItem();
+
+      expect(screen.getByText('Value').props.numberOfLines).toBe(1);
+    });
+  });
+});

package/src/lib/Components/DescriptionItem/DescriptionItem.tsx

@@ -0,0 +1,224 @@
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Box, Text } from '../Utility';
+import type {
+  DescriptionItemLabelProps,
+  DescriptionItemLeadingProps,
+  DescriptionItemProps,
+  DescriptionItemSize,
+  DescriptionItemTrailingProps,
+  DescriptionItemValueProps,
+} from './types';
+
+type DescriptionItemSizeContextValue = {
+  size: DescriptionItemSize;
+};
+
+const [DescriptionItemSizeProvider, useDescriptionItemSizeContext] =
+  createSafeContext<DescriptionItemSizeContextValue>('DescriptionItemSize', {
+    size: 'md',
+  });
+
+/**
+ * A compound component for displaying a key-value description row.
+ * Composed with DescriptionItemLeading / DescriptionItemLabel (key side)
+ * and DescriptionItemTrailing / DescriptionItemValue (value side).
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/containment-descriptionitem--docs Storybook}
+ *
+ * @example
+ * <DescriptionItem size="md">
+ *   <DescriptionItemLeading>
+ *     <DescriptionItemLabel>Fees</DescriptionItemLabel>
+ *   </DescriptionItemLeading>
+ *   <DescriptionItemTrailing>
+ *     <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
+ *   </DescriptionItemTrailing>
+ * </DescriptionItem>
+ */
+export const DescriptionItem = ({
+  children,
+  lx = {},
+  style,
+  size = 'md',
+  ...props
+}: DescriptionItemProps) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      root: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: t.spacings.s12,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <DescriptionItemSizeProvider value={{ size }}>
+      <Box lx={lx} style={StyleSheet.flatten([styles.root, style])} {...props}>
+        {children}
+      </Box>
+    </DescriptionItemSizeProvider>
+  );
+};
+
+/**
+ * Layout container for the leading (left) side of the description item.
+ * Contains DescriptionItemLabel and an optional info icon sibling.
+ */
+export const DescriptionItemLeading = ({
+  children,
+  lx = {},
+  style,
+  ...props
+}: DescriptionItemLeadingProps) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      leading: {
+        flex: 1,
+        minWidth: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: t.spacings.s4,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box lx={lx} style={StyleSheet.flatten([styles.leading, style])} {...props}>
+      {children}
+    </Box>
+  );
+};
+
+/**
+ * Typography-bearing label for the leading side.
+ * Reads size from DescriptionItemSizeContext to apply the correct typography
+ * based on the size of the parent `DescriptionItem`.
+ */
+export const DescriptionItemLabel = ({
+  children,
+  lx = {},
+  style,
+  numberOfLines = 2,
+  ellipsizeMode = 'tail',
+  ...props
+}: DescriptionItemLabelProps) => {
+  const { size } = useDescriptionItemSizeContext({
+    consumerName: 'DescriptionItemLabel',
+    contextRequired: false,
+  });
+
+  const styles = useStyleSheet(
+    (t) => ({
+      label: StyleSheet.flatten([
+        size === 'md' ? t.typographies.body2 : t.typographies.body3,
+        {
+          flexShrink: 1,
+          minWidth: 0,
+          color: t.colors.text.muted,
+        },
+      ]),
+    }),
+    [size],
+  );
+
+  return (
+    <Text
+      lx={lx}
+      style={StyleSheet.flatten([styles.label, style])}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      allowFontScaling={false}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+/**
+ * Layout container for the trailing (right) side of the description item.
+ * Accepts DescriptionItemValue, Tag, Link, or any custom content.
+ */
+export const DescriptionItemTrailing = ({
+  children,
+  lx = {},
+  style,
+  ...props
+}: DescriptionItemTrailingProps) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      trailing: {
+        flexShrink: 0,
+        maxWidth: '80%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: t.spacings.s4,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box
+      lx={lx}
+      style={StyleSheet.flatten([styles.trailing, style])}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
+
+/**
+ * Typography-bearing value for the trailing side.
+ * Reads size from DescriptionItemSizeContext to apply the correct typography
+ * based on the size of the parent `DescriptionItem`.
+ */
+export const DescriptionItemValue = ({
+  children,
+  lx = {},
+  style,
+  numberOfLines = 1,
+  ellipsizeMode = 'tail',
+  ...props
+}: DescriptionItemValueProps) => {
+  const { size } = useDescriptionItemSizeContext({
+    consumerName: 'DescriptionItemValue',
+    contextRequired: false,
+  });
+
+  const styles = useStyleSheet(
+    (t) => ({
+      value: StyleSheet.flatten([
+        size === 'md'
+          ? t.typographies.body2SemiBold
+          : t.typographies.body3SemiBold,
+        {
+          flexShrink: 1,
+          minWidth: 0,
+          color: t.colors.text.base,
+        },
+      ]),
+    }),
+    [size],
+  );
+
+  return (
+    <Text
+      lx={lx}
+      style={StyleSheet.flatten([styles.value, style])}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      allowFontScaling={false}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};