@ledgerhq/lumen-ui-rnative 0.1.35 → 0.1.36

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>
+  );
+};

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

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

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

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import type { StyledTextProps, StyledViewProps } from '../../../styles';
+
+export type DescriptionItemSize = 'sm' | 'md';
+
+export type DescriptionItemProps = {
+  /**
+   * The content of the description item (DescriptionItemLeading, DescriptionItemTrailing).
+   */
+  children: ReactNode;
+  /**
+   * The size of the description item.
+   * @default 'md'
+   */
+  size?: DescriptionItemSize;
+} & Omit<StyledViewProps, 'children'>;
+
+export type DescriptionItemLeadingProps = {
+  /**
+   * The leading content (DescriptionItemLabel + optional info icon sibling).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type DescriptionItemLabelProps = {
+  /**
+   * The label text or custom content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+export type DescriptionItemTrailingProps = {
+  /**
+   * The trailing content (DescriptionItemValue, Tag, Link, etc.).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type DescriptionItemValueProps = {
+  /**
+   * The value text or custom content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;

package/src/lib/Components/NavBar/CoinCapsule.tsx

@@ -20,6 +20,7 @@ const useStyles = () =>
         flexDirection: 'row',
         gap: t.spacings.s8,
         padding: t.spacings.s8,
+        paddingRight: t.spacings.s12,
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: t.borderRadius.full,

package/src/lib/Components/index.ts

@@ -9,6 +9,7 @@ export * from './Card';
 export * from './CardButton';
 export * from './Checkbox';
 export * from './ContentBanner';
+export * from './DescriptionItem';
 export * from './Divider';
 export * from './DotCount';
 export * from './DotIcon';