@ledgerhq/lumen-ui-rnative 0.1.32 → 0.1.34

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import type { LumenStyleSheetTheme } from '../../../styles';
+import { RuntimeConstants } from '../../utils';
 import { Skeleton } from '../Skeleton';
 import { Box, Text } from '../Utility';
 import type { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
@@ -119,7 +120,10 @@ export const MediaImage = ({
       {loading && <Skeleton style={StyleSheet.absoluteFillObject} />}
       {!loading && shouldFallback && fallback && (
         <Text
-          style={{ fontSize: fontSizeMap[size] }}
+          style={{
+            fontSize: fontSizeMap[size],
+            ...(RuntimeConstants.isIOS && { lineHeight: 0 }),
+          }}
           lx={{ color: 'base' }}
           accessible={false}
         >

package/src/lib/Components/MediaTag/MediaTag.mdx

@@ -0,0 +1,161 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaTagStories from './MediaTag.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility/Box';
+
+<Meta title='Components/MediaTag' of={MediaTagStories} />
+
+# MediaTag
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaTag is a compact label used to categorize, classify, or highlight information alongside a required media element such as an image or crypto icon. Like [Tag](/docs/communication-tag--docs), it supports multiple appearances and sizes, but is designed for cases where the icon is richer than a Symbol.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=16793-36383&m=dev).
+
+## Anatomy
+
+<Canvas of={MediaTagStories.Base} />
+
+- **Label:** The text content of the tag.
+- **Leading content:** A required media element (image, crypto icon, etc.) displayed before the label. Passed via the `leadingContent` prop.
+
+## Properties
+
+<Canvas of={MediaTagStories.Base} />
+<Controls of={MediaTagStories.Base} />
+
+### Appearance
+
+<Canvas of={MediaTagStories.AppearanceShowcase} />
+
+---
+
+### Size
+
+MediaTags come in two different sizes:
+
+- **md** (default) — the `leadingContent` media should be rendered at **16px**.
+- **sm** — the `leadingContent` media should be rendered at **12px**.
+
+The MediaTag does not resize its `leadingContent`; consumers are responsible for passing a media element sized to match the tag's `size`.
+
+<Canvas of={MediaTagStories.SizeShowcase} />
+
+### Truncation
+
+When a MediaTag's label exceeds the available space, the text is automatically truncated with an ellipsis.
+
+<Canvas of={MediaTagStories.TruncateShowcase} />
+
+### Accessibility
+
+To be implemented:
+
+- **Color contrast**
+- **Text zoom**
+- **Touch targets**
+- **Screen reader support**
+- **Semantic labeling**
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+Match the media element size to the MediaTag `size`: **16px** for `md`, **12px** for `sm`.
+
+```tsx
+import { MediaTag, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <>
+      {/* md → image size 16 */}
+      <MediaTag
+        size="md"
+        appearance="accent"
+        label="Ethereum"
+        leadingContent={
+          <MediaImage
+            src="https://crypto-icons.ledger.com/ETH.png"
+            alt="Ethereum"
+            size={16}
+            shape="square"
+          />
+        }
+      />
+
+      {/* sm → image size 12 */}
+      <MediaTag
+        size="sm"
+        appearance="accent"
+        label="Ethereum"
+        leadingContent={
+          <MediaImage
+            src="https://crypto-icons.ledger.com/ETH.png"
+            alt="Ethereum"
+            size={12}
+            shape="square"
+          />
+        }
+      />
+    </>
+  );
+}
+```
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using the `lx` prop for layout adjustments:
+
+```tsx
+<MediaTag
+  size="md"
+  appearance="accent"
+  label="Custom MediaTag"
+  leadingContent={myIcon}
+  lx={{ marginTop: 's4' }}
+/>
+```
+
+### With Crypto Icons
+
+The MediaTag accepts any `ReactNode` as its `leadingContent`, including crypto icons. Use **16px** for `md` and **12px** for `sm`:
+
+```tsx
+import { MediaTag } from '@ledgerhq/lumen-ui-rnative';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+
+function MyComponent() {
+  return (
+    <>
+      {/* md → leadingContent size 16 */}
+      <MediaTag
+        size="md"
+        label="Bitcoin"
+        leadingContent={<CryptoIcon ledgerId="bitcoin" ticker="BTC" size={16} />}
+      />
+
+      {/* sm → leadingContent size 12 */}
+      <MediaTag
+        size="sm"
+        label="Bitcoin"
+        leadingContent={<CryptoIcon ledgerId="bitcoin" ticker="BTC" size={12} />}
+      />
+    </>
+  );
+}
+```
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { MediaImage } from '../MediaImage';
+import { Box } from '../Utility/Box';
+import { MediaTag } from './MediaTag';
+
+const ETH_ICON = (
+  <MediaImage
+    src='https://crypto-icons.ledger.com/ETH.png'
+    alt='Ethereum'
+    size={16}
+    shape='square'
+  />
+);
+
+const meta: Meta<typeof MediaTag> = {
+  component: MediaTag,
+  title: 'Communication/MediaTag',
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: [
+        'base',
+        'gray',
+        'accent',
+        'accent-subtle',
+        'success',
+        'error',
+        'warning',
+        'white',
+      ],
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md'],
+    },
+    label: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MediaTag>;
+
+export const Base: Story = {
+  args: {
+    label: 'Ethereum',
+    appearance: 'accent',
+    size: 'md',
+  },
+  render: (args) => <MediaTag {...args} leadingContent={ETH_ICON} />,
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 's4' }}>
+      <MediaTag appearance='base' label='Base' leadingContent={ETH_ICON} />
+      <MediaTag appearance='gray' label='Gray' leadingContent={ETH_ICON} />
+      <MediaTag appearance='accent' label='Accent' leadingContent={ETH_ICON} />
+      <MediaTag
+        appearance='accent-subtle'
+        label='Accent subtle'
+        leadingContent={ETH_ICON}
+      />
+      <MediaTag
+        appearance='success'
+        label='Success'
+        leadingContent={ETH_ICON}
+      />
+      <MediaTag appearance='error' label='Error' leadingContent={ETH_ICON} />
+      <MediaTag
+        appearance='warning'
+        label='Warning'
+        leadingContent={ETH_ICON}
+      />
+      <MediaTag appearance='white' label='White' leadingContent={ETH_ICON} />
+      <MediaTag label='Disabled' leadingContent={ETH_ICON} disabled />
+    </Box>
+  ),
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
+      <MediaTag size='md' label='Medium' leadingContent={ETH_ICON} />
+      <MediaTag
+        size='sm'
+        label='Small'
+        leadingContent={
+          <MediaImage
+            src='https://crypto-icons.ledger.com/ETH.png'
+            alt='Ethereum'
+            size={12}
+            shape='square'
+          />
+        }
+      />
+    </Box>
+  ),
+};
+
+export const TruncateShowcase: Story = {
+  render: () => (
+    <Box lx={{ width: 's176' }}>
+      <MediaTag
+        label='Very long text that truncates'
+        leadingContent={ETH_ICON}
+      />
+    </Box>
+  ),
+};

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

@@ -0,0 +1,27 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { MediaTag } from './MediaTag';
+
+const renderWithProvider = (component: React.ReactElement) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+
+describe('MediaTag Component', () => {
+  it('should render label and the provided ReactNode icon as-is', () => {
+    renderWithProvider(
+      <MediaTag
+        label='Bitcoin'
+        leadingContent={<Text testID='media-icon'>bitcoin-icon</Text>}
+      />,
+    );
+    expect(screen.getByText('Bitcoin')).toBeTruthy();
+    expect(screen.getByTestId('media-icon')).toBeTruthy();
+    expect(screen.getByText('bitcoin-icon')).toBeTruthy();
+  });
+});

package/src/lib/Components/MediaTag/MediaTag.tsx

@@ -0,0 +1,36 @@
+import { BaseTag } from '../BaseTag';
+import type { MediaTagProps } from './types';
+
+/**
+ * A compact label used to categorize, classify, or highlight information with a required media element (image, crypto icon, etc.).
+ *
+ * The appearance determines the color scheme used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-mediatag-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-mediatag-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { MediaTag, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // MediaTag with image
+ * <MediaTag
+ *   label='Ethereum'
+ *   leadingContent={<MediaImage src='https://crypto-icons.ledger.com/ETH.png' alt='Ethereum' size={16} shape='square' />}
+ * />
+ *
+ * // Small MediaTag
+ * <MediaTag label='Bitcoin' size='sm' leadingContent={myIcon} />
+ */
+export const MediaTag = ({ leadingContent, ...props }: MediaTagProps) => {
+  return (
+    <BaseTag
+      {...props}
+      variant='media'
+      consumerName='MediaTag'
+      renderIcon={() => leadingContent}
+    />
+  );
+};

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

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

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { TagProps } from '../Tag';
+
+export type MediaTagProps = Omit<TagProps, 'icon'> & {
+  /**
+   * The media element rendered before the label (e.g. an image or a crypto icon).
+   * Should be sized to match the tag's `size`: 16px for `md`, 12px for `sm`.
+   */
+  leadingContent: ReactNode;
+};

package/src/lib/Components/Tag/Tag.mdx

@@ -7,7 +7,7 @@ import { Box } from '../Utility/Box';
 
 <Meta title='Components/Tag' of={TagStories} />
 
-# 🏷️ Tag
+# Tag
 
 <CustomTabs>
   <Tab label="Overview">
@@ -53,16 +53,6 @@ When a tag's label exceeds the available space, the text is automatically trunca
 
 <Canvas of={TagStories.TruncateShowcase} />
 
-### Accessibility
-
-To be implemented:
-
-- **Color contrast**
-- **Text zoom**
-- **Touch targets**
-- **Screen reader support**
-- **Semantic labeling**
-
 </Tab>
 <Tab label="Implementation">
 
@@ -106,73 +96,5 @@ function MyComponent() {
 }
 ```
 
-
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use standard size variants'
-      description='Use the size prop with predefined variants (sm, md)'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Tag size="sm" icon={Check} label="Success" />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use custom sizes"
-      description='Avoid using style prop to override standard sizes'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Tag style={{ height: 52 }} icon={Check} label="Success" />
-```
-
-    </DontBlockItem>
-</DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide proper accessibility props'
-      description='Use accessible and accessibilityRole props for screen reader support'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Tag
-  label="Important"
-  accessible={true}
-  accessibilityRole="text"
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit accessibility props"
-      description='Avoid creating tags without accessibility support for screen readers'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Tag
-  label="Important"
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
-
 </Tab>
 </CustomTabs>

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

@@ -17,6 +17,7 @@ const meta: Meta<typeof Tag> = {
         'success',
         'error',
         'warning',
+        'white',
       ],
     },
     size: {
@@ -59,6 +60,7 @@ export const AppearanceShowcase: Story = {
         <Tag appearance='success' label='Success' />
         <Tag appearance='error' label='Error' />
         <Tag appearance='warning' label='Warning' />
+        <Tag appearance='white' label='White' />
         <Tag label='Disabled' disabled />
       </Box>
       <Box lx={{ flexDirection: 'row', gap: 's4' }}>
@@ -69,6 +71,7 @@ export const AppearanceShowcase: Story = {
         <Tag appearance='success' label='Success' icon={Check} />
         <Tag appearance='error' label='Error' icon={Check} />
         <Tag appearance='warning' label='Warning' icon={Check} />
+        <Tag appearance='white' label='White' icon={Check} />
         <Tag label='Disabled' icon={Check} disabled />
       </Box>
     </Box>

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

@@ -0,0 +1,51 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import type { IconProps } from '../Icon';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { Tag } from './Tag';
+
+const renderWithProvider = (component: React.ReactElement) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+
+describe('Tag Component', () => {
+  it('should render without icon', () => {
+    renderWithProvider(<Tag label='Label' />);
+    expect(screen.getByText('Label')).toBeTruthy();
+  });
+
+  it('should render the icon component when icon prop is provided', () => {
+    const Icon = jest.fn(({ size }: IconProps) => (
+      <Text testID='tag-icon'>icon-{size}</Text>
+    ));
+    renderWithProvider(<Tag label='Label' icon={Icon} />);
+    expect(screen.getByTestId('tag-icon')).toBeTruthy();
+  });
+
+  it('should inject size=16 into the icon when tag size is md', () => {
+    const Icon = jest.fn(({ size }: IconProps) => (
+      <Text testID='tag-icon'>icon-{size}</Text>
+    ));
+    renderWithProvider(<Tag label='Label' size='md' icon={Icon} />);
+    expect(Icon).toHaveBeenCalledWith(
+      expect.objectContaining({ size: 16 }),
+      undefined,
+    );
+  });
+
+  it('should inject size=12 into the icon when tag size is sm', () => {
+    const Icon = jest.fn(({ size }: IconProps) => (
+      <Text testID='tag-icon'>icon-{size}</Text>
+    ));
+    renderWithProvider(<Tag label='Label' size='sm' icon={Icon} />);
+    expect(Icon).toHaveBeenCalledWith(
+      expect.objectContaining({ size: 12 }),
+      undefined,
+    );
+  });
+});

package/src/lib/Components/Tag/Tag.tsx

@@ -1,100 +1,9 @@
-import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
-import { StyleSheet, Text } from 'react-native';
-import { useStyleSheet } from '../../../styles';
+import { BaseTag } from '../BaseTag';
 import type { IconSize } from '../Icon';
-import { Box } from '../Utility';
 import type { TagProps } from './types';
 
-type Appearance = NonNullable<TagProps['appearance']>;
 type Size = NonNullable<TagProps['size']>;
 
-const useStyles = ({
-  appearance,
-  size,
-  disabled,
-}: {
-  appearance: Appearance;
-  size: Size;
-  disabled: boolean;
-}) => {
-  return useStyleSheet(
-    (t) => {
-      const bgColors: Record<Appearance, string> = {
-        base: t.colors.bg.mutedTransparent,
-        gray: t.colors.bg.mutedTransparent,
-        accent: t.colors.bg.accent,
-        'accent-subtle': t.colors.bg.activeSubtle,
-        success: t.colors.bg.success,
-        error: t.colors.bg.error,
-        warning: t.colors.bg.warning,
-      };
-
-      const textColors: Record<Appearance, string> = {
-        base: t.colors.text.base,
-        gray: t.colors.text.muted,
-        accent: t.colors.text.onAccent,
-        'accent-subtle': t.colors.text.active,
-        success: t.colors.text.success,
-        error: t.colors.text.error,
-        warning: t.colors.text.warning,
-      };
-
-      const sizeStyles: Record<
-        Size,
-        { paddingHorizontal: number; paddingVertical: number }
-      > = {
-        md: {
-          paddingHorizontal: t.spacings.s8,
-          paddingVertical: t.spacings.s4,
-        },
-        sm: {
-          paddingHorizontal: t.spacings.s4,
-          paddingVertical: t.spacings.s2,
-        },
-      };
-
-      const textTypography =
-        size === 'md' ? t.typographies.body3 : t.typographies.body4;
-
-      return {
-        root: StyleSheet.flatten([
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: t.spacings.s4,
-            borderRadius: t.borderRadius.xs,
-            backgroundColor: bgColors[appearance],
-            ...sizeStyles[size],
-          },
-          disabled && {
-            backgroundColor: t.colors.bg.disabled,
-          },
-        ]),
-        text: StyleSheet.flatten([
-          textTypography,
-          {
-            color: textColors[appearance],
-          },
-          disabled && {
-            color: t.colors.text.disabled,
-          },
-        ]),
-        icon: StyleSheet.flatten([
-          {
-            flexShrink: 0,
-            color: textColors[appearance],
-          },
-          disabled && {
-            color: t.colors.text.disabled,
-          },
-        ]),
-      };
-    },
-    [appearance, size, disabled],
-  );
-};
-
 const iconSizeMap: Record<Size, IconSize> = {
   md: 16,
   sm: 12,
@@ -127,37 +36,21 @@ const iconSizeMap: Record<Size, IconSize> = {
  * // Small tag
  * <Tag label="Small" size="sm" />
  */
-export const Tag = ({
-  appearance = 'accent',
-  size = 'md',
-  icon,
-  label,
-  disabled: disabledProp = false,
-  lx = {},
-  style,
-  ref,
-  ...props
-}: TagProps) => {
-  const disabled = useDisabledContext({
-    consumerName: 'Tag',
-    mergeWith: { disabled: disabledProp },
-  });
-  const styles = useStyles({ appearance, size, disabled: !!disabled });
-
+export const Tag = ({ icon, size = 'md', ...props }: TagProps) => {
   const IconComponent = icon;
   const iconSize = iconSizeMap[size];
 
   return (
-    <Box
-      ref={ref}
-      lx={lx}
-      style={StyleSheet.flatten([styles.root, style])}
+    <BaseTag
       {...props}
-    >
-      {IconComponent && <IconComponent size={iconSize} style={styles.icon} />}
-      <Text style={styles.text} numberOfLines={1}>
-        {label}
-      </Text>
-    </Box>
+      size={size}
+      variant='tag'
+      consumerName='Tag'
+      renderIcon={
+        IconComponent
+          ? (iconStyle) => <IconComponent size={iconSize} style={iconStyle} />
+          : undefined
+      }
+    />
   );
 };