@ledgerhq/lumen-ui-rnative 0.1.33 → 0.1.34

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

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

@@ -13,7 +13,8 @@ export type TagProps = {
     | 'accent-subtle'
     | 'success'
     | 'error'
-    | 'warning';
+    | 'warning'
+    | 'white';
   /**
    * The icon of the tag.
    */

package/src/lib/Components/index.ts

@@ -23,6 +23,7 @@ export * from './MediaBanner';
 export * from './MediaButton';
 export * from './MediaCard';
 export * from './MediaImage';
+export * from './MediaTag';
 export * from './NavBar';
 export * from './OptionList';
 export * from './PageIndicator';