@ledgerhq/lumen-ui-rnative 0.1.12 → 0.1.14

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

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { useState } from 'react';
+import { Button } from '../Button';
+import { Box } from '../Utility';
+import {
+  MediaBanner,
+  MediaBannerDescription,
+  MediaBannerTitle,
+} from './MediaBanner';
+
+const IMAGE_URL =
+  'https://images.unsplash.com/photo-1663741954108-d15d514529ef';
+
+const meta: Meta<typeof MediaBanner> = {
+  component: MediaBanner,
+  title: 'Communication/MediaBanner',
+  subcomponents: {
+    MediaBannerTitle,
+    MediaBannerDescription,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    imageUrl: {
+      control: 'text',
+      description: 'URL of the background image',
+    },
+    onClose: {
+      control: 'select',
+      description: 'Close action callback',
+      options: ['With Close', 'None'],
+      mapping: {
+        'With Close': () => {
+          console.log('Close clicked');
+        },
+        None: undefined,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MediaBanner>;
+
+export const Base: Story = {
+  args: {
+    imageUrl: IMAGE_URL,
+  },
+  render: (args) => (
+    <Box lx={{ width: 's400' }}>
+      <MediaBanner {...args}>
+        <MediaBannerTitle>Firmware Update</MediaBannerTitle>
+        <MediaBannerDescription>Keep your Nano updated!</MediaBannerDescription>
+      </MediaBanner>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<MediaBanner imageUrl="https://images.unsplash.com/photo-1663741954108-d15d514529ef">
+  <MediaBannerTitle>Firmware Update</MediaBannerTitle>
+  <MediaBannerDescription>
+    Keep your Nano updated!
+  </MediaBannerDescription>
+</MediaBanner>
+`,
+      },
+    },
+  },
+};
+
+export const Truncation: Story = {
+  render: () => (
+    <Box lx={{ width: 's400' }}>
+      <MediaBanner imageUrl={IMAGE_URL} onClose={() => console.log('close')}>
+        <MediaBannerTitle>
+          Earn Up to 12% APY With Staking Now And Much More Rewards Awaiting You
+        </MediaBannerTitle>
+        <MediaBannerDescription>
+          Put your idle crypto to work. Start staking SOL, ETH, ATOM and more
+          directly from Ledger Live. Maximize your returns with our secure
+          staking solutions.
+        </MediaBannerDescription>
+      </MediaBanner>
+    </Box>
+  ),
+};
+
+export const WithBrokenImage: Story = {
+  render: () => (
+    <Box lx={{ width: 's400' }}>
+      <MediaBanner
+        imageUrl='https://broken-url.invalid/image.jpg'
+        onClose={() => console.log('close')}
+      >
+        <MediaBannerTitle>Sorry!</MediaBannerTitle>
+        <MediaBannerDescription>
+          The image failed to load so the banner decided to gracefully hide it.
+        </MediaBannerDescription>
+      </MediaBanner>
+    </Box>
+  ),
+};
+
+export const WithClose: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+
+    if (!visible) {
+      return (
+        <Button
+          appearance='transparent'
+          size='sm'
+          onPress={() => setVisible(true)}
+        >
+          Show banner
+        </Button>
+      );
+    }
+
+    return (
+      <Box lx={{ width: 's400' }}>
+        <MediaBanner imageUrl={IMAGE_URL} onClose={() => setVisible(false)}>
+          <MediaBannerTitle>
+            Earn Up to 12% APY With Staking Now!
+          </MediaBannerTitle>
+          <MediaBannerDescription>
+            Put your idle crypto to work. Start staking SOL, ETH, ATOM and more
+            directly from Ledger Live
+          </MediaBannerDescription>
+        </MediaBanner>
+      </Box>
+    );
+  },
+};

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

@@ -0,0 +1,77 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render } from '@testing-library/react-native';
+import { type ReactNode } from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from './MediaBanner';
+
+const TestWrapper = ({ children }: { children: ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+const IMAGE_URL = 'https://example.com/image.jpg';
+
+describe('MediaBanner', () => {
+  it('should render title and description', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <MediaBanner imageUrl={IMAGE_URL}>
+          <MediaBannerTitle>Banner Title</MediaBannerTitle>
+          <MediaBannerDescription>Banner description</MediaBannerDescription>
+        </MediaBanner>
+      </TestWrapper>,
+    );
+
+    getByText('Banner Title');
+    getByText('Banner description');
+  });
+
+  it('should call onClose when close button is pressed', () => {
+    const handleClose = jest.fn();
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaBanner imageUrl={IMAGE_URL} onClose={handleClose}>
+          <MediaBannerTitle>Title</MediaBannerTitle>
+        </MediaBanner>
+      </TestWrapper>,
+    );
+
+    const closeButton = getByTestId('media-banner-close-button');
+    expect(closeButton).toBeTruthy();
+    fireEvent.press(closeButton);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should apply surface background color', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaBanner testID='media-banner' imageUrl={IMAGE_URL}>
+          <MediaBannerTitle>Title</MediaBannerTitle>
+        </MediaBanner>
+      </TestWrapper>,
+    );
+
+    const banner = getByTestId('media-banner');
+    expect(banner.props.style.backgroundColor).toBe(
+      ledgerLiveThemes.dark.colors.bg.surface,
+    );
+  });
+
+  it('should render with imageUrl prop', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaBanner testID='media-banner' imageUrl={IMAGE_URL}>
+          <MediaBannerTitle>Title</MediaBannerTitle>
+        </MediaBanner>
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('media-banner')).toBeTruthy();
+  });
+});

package/src/lib/Components/MediaBanner/MediaBanner.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet, useTheme } from '../../../styles';
+import { Close } from '../../Symbols';
+import { InteractiveIcon } from '../InteractiveIcon';
+import { Box, LinearGradient, Pressable, Text } from '../Utility';
+import {
+  MediaBannerDescriptionProps,
+  MediaBannerProps,
+  MediaBannerTitleProps,
+} from './types';
+
+/**
+ * A promotional banner with a background image, title, description, and an optional close button.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-mediabanner--docs Storybook}
+ */
+export function MediaBanner({
+  lx,
+  style,
+  imageUrl,
+  onClose,
+  closeAccessibilityLabel,
+  children,
+  ...props
+}: MediaBannerProps) {
+  const { t: translate } = useCommonTranslation();
+  const { theme: t } = useTheme();
+  const [imageLoadError, setImageLoadError] = useState(false);
+
+  useEffect(() => {
+    setImageLoadError(false);
+  }, [imageUrl]);
+
+  const showImage = imageUrl && !imageLoadError;
+
+  const styles = useStyleSheet(
+    (t) => ({
+      container: {
+        backgroundColor: t.colors.bg.surface,
+        borderRadius: t.borderRadius.md,
+        overflow: 'hidden',
+        flexDirection: 'row',
+        height: t.sizes.s72,
+      },
+      contentWrapper: {
+        flex: 1,
+        overflow: 'hidden',
+        justifyContent: 'center',
+        paddingHorizontal: t.spacings.s12,
+        paddingVertical: t.spacings.s2,
+      },
+      contentContainer: {
+        paddingVertical: t.spacings.s12,
+        gap: 4,
+      },
+      closeButton: {
+        position: 'absolute',
+        top: 8.5,
+        right: 8.5,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Pressable lx={lx} style={[styles.container, style]} {...props}>
+      <Box style={styles.contentWrapper}>
+        <Box style={styles.contentContainer}>{children}</Box>
+      </Box>
+      <Box style={{ width: 120 }}>
+        {showImage && (
+          <Image
+            source={{ uri: imageUrl }}
+            style={StyleSheet.absoluteFill}
+            resizeMode='cover'
+            onError={() => setImageLoadError(true)}
+            accessible={false}
+          />
+        )}
+        <LinearGradient
+          direction='to-topright'
+          stops={[
+            { color: t.colors.bg.black, opacity: 0, offset: 0.67 },
+            { color: t.colors.bg.black, opacity: 0.8 },
+          ]}
+          style={StyleSheet.absoluteFill}
+          accessible={false}
+          pointerEvents='none'
+        />
+      </Box>
+      {onClose && (
+        <Box style={styles.closeButton}>
+          <InteractiveIcon
+            testID='media-banner-close-button'
+            iconType='stroked'
+            appearance='white'
+            onPress={onClose}
+            accessibilityLabel={
+              closeAccessibilityLabel ||
+              translate('components.banner.closeAriaLabel')
+            }
+          >
+            <Close size={16} />
+          </InteractiveIcon>
+        </Box>
+      )}
+    </Pressable>
+  );
+}
+
+/**
+ * The title of the MediaBanner. Clamps at 1 line.
+ */
+export function MediaBannerTitle({
+  lx,
+  style,
+  children,
+  ...props
+}: MediaBannerTitleProps) {
+  const styles = useStyleSheet(
+    (t) => ({
+      title: StyleSheet.flatten([
+        t.typographies.body2SemiBold,
+        {
+          color: t.colors.text.base,
+        },
+      ]),
+    }),
+    [],
+  );
+
+  return (
+    <Text lx={lx} style={[styles.title, style]} numberOfLines={1} {...props}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * The description of the MediaBanner. Clamps at 2 lines.
+ */
+export function MediaBannerDescription({
+  lx,
+  style,
+  children,
+  ...props
+}: MediaBannerDescriptionProps) {
+  const styles = useStyleSheet(
+    (t) => ({
+      description: StyleSheet.flatten([
+        t.typographies.body3,
+        {
+          color: t.colors.text.muted,
+        },
+      ]),
+    }),
+    [],
+  );
+
+  return (
+    <Text
+      lx={lx}
+      style={[styles.description, style]}
+      numberOfLines={2}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}

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

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

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { StyledPressableProps, StyledTextProps } from '../../../styles';
+
+/**
+ * Props for the MediaBanner root component.
+ */
+export type MediaBannerProps = {
+  /**
+   * URL of the background image displayed on the right side.
+   */
+  imageUrl: string;
+  /**
+   * Optional close action callback.
+   */
+  onClose?: () => void;
+  /**
+   * Optional accessibility label for the close button.
+   */
+  closeAccessibilityLabel?: string;
+  /**
+   * The banner content (MediaBannerTitle, MediaBannerDescription).
+   */
+  children: ReactNode;
+} & Omit<StyledPressableProps, 'children'>;
+
+/**
+ * Props for the MediaBannerTitle component.
+ */
+export type MediaBannerTitleProps = {
+  /**
+   * The title text content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+/**
+ * Props for the MediaBannerDescription component.
+ */
+export type MediaBannerDescriptionProps = {
+  /**
+   * The description text content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;

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

@@ -47,6 +47,12 @@ Tags can be displayed with or without an icon.
 
 <Canvas of={TagStories.ContentTypeShowcase} />
 
+### Truncation
+
+When a tag's label exceeds the available space, the text is automatically truncated with an ellipsis.
+
+<Canvas of={TagStories.TruncateShowcase} />
+
 ### Accessibility
 
 To be implemented:

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

@@ -82,3 +82,11 @@ export const ContentTypeShowcase: Story = {
     </Box>
   ),
 };
+
+export const TruncateShowcase: Story = {
+  render: () => (
+    <Box lx={{ width: 's176' }}>
+      <Tag label='Very long custom Tag text that should truncate' />
+    </Box>
+  ),
+};

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

@@ -155,7 +155,9 @@ export const Tag = ({
       {...props}
     >
       {IconComponent && <IconComponent size={iconSize} style={styles.icon} />}
-      <Text style={styles.text}>{label}</Text>
+      <Text style={styles.text} numberOfLines={1}>
+        {label}
+      </Text>
     </Box>
   );
 };

package/src/lib/Components/index.ts

@@ -16,6 +16,7 @@ export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';
 export * from './ListItem';
+export * from './MediaBanner';
 export * from './MediaCard';
 export * from './NavBar';
 export * from './PageIndicator';

package/src/lib/Symbols/Icons/Csv.tsx

@@ -43,7 +43,7 @@ export const Csv = createIcon(
     />
     <Path
       fill='currentColor'
-      d='M1.86 13.656a.467.467 0 0 1 .641.156.13.13 0 0 0 .043.044q.015.01.04.01h.426a.08.08 0 0 0 .079-.078.08.08 0 0 0-.062-.078l-.728-.183a1.012 1.012 0 0 1 .247-1.994h.426c.39 0 .704.217.878.502a.467.467 0 0 1-.797.486.13.13 0 0 0-.042-.044.1.1 0 0 0-.039-.01h-.426a.079.079 0 0 0-.02.155l.73.183A1.012 1.012 0 0 1 3.01 14.8h-.426c-.391 0-.705-.217-.879-.503a.467.467 0 0 1 .156-.64m2.34.01v-1c0-.625.507-1.133 1.133-1.133H6a.467.467 0 0 1 0 .934h-.667a.2.2 0 0 0-.2.2v1c0 .11.09.2.2.2H6a.467.467 0 0 1 0 .933h-.667A1.134 1.134 0 0 1 4.2 13.667m5.01-2.115c.248.07.392.327.323.575l-.656 2.334a.47.47 0 0 1-.45.34H7.99a.47.47 0 0 1-.45-.34l-.656-2.334a.467.467 0 0 1 .899-.252l.425 1.514.426-1.514a.467.467 0 0 1 .576-.323'
+      d='M4.483 13.656a.467.467 0 0 1 .641.156q.022.034.043.044.015.01.04.01h.426a.08.08 0 0 0 .079-.078.08.08 0 0 0-.062-.078l-.728-.183a1.013 1.013 0 0 1 .247-1.994h.426c.39 0 .704.217.878.502a.467.467 0 0 1-.797.486.13.13 0 0 0-.042-.044.1.1 0 0 0-.039-.01H5.17a.079.079 0 0 0-.02.155l.73.183a1.012 1.012 0 0 1-.246 1.995h-.427c-.39 0-.705-.217-.878-.503a.467.467 0 0 1 .155-.64m4.727-2.105c.248.07.392.327.323.575l-.656 2.334a.47.47 0 0 1-.45.34H7.99a.47.47 0 0 1-.45-.34l-.656-2.334a.467.467 0 0 1 .899-.252l.425 1.514.426-1.514a.467.467 0 0 1 .576-.323M1.538 12.667v1c0 .626.508 1.133 1.134 1.133h.666a.467.467 0 0 0 0-.934h-.666a.2.2 0 0 1-.2-.2v-1c0-.11.09-.2.2-.2h.666a.467.467 0 0 0 0-.933h-.666c-.626 0-1.134.508-1.134 1.134'
     />
   </Svg>,
 );

package/src/lib/Symbols/Icons/TriangleDown.tsx

@@ -0,0 +1,42 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * TriangleDown icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { TriangleDown } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <TriangleDown />
+ *
+ * @example
+ * // With custom size and style
+ * <TriangleDown size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={TriangleDown} size="md">
+ *   Click me
+ * </Button>
+ */
+export const TriangleDown = createIcon(
+  'TriangleDown',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      fill='currentColor'
+      d='M13.038 5.347 8.82 12.06a1 1 0 0 1-1.696-.004L2.95 5.343a1 1 0 0 1 .85-1.528h8.39a1 1 0 0 1 .848 1.532'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/Icons/TriangleUp.tsx

@@ -0,0 +1,42 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * TriangleUp icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { TriangleUp } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <TriangleUp />
+ *
+ * @example
+ * // With custom size and style
+ * <TriangleUp size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={TriangleUp} size="md">
+ *   Click me
+ * </Button>
+ */
+export const TriangleUp = createIcon(
+  'TriangleUp',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      fill='currentColor'
+      d='M13.038 11.512 8.82 4.798a1 1 0 0 0-1.696.004L2.95 11.516a1 1 0 0 0 .85 1.528h8.39a1 1 0 0 0 .848-1.532'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/index.ts

@@ -238,6 +238,8 @@ export { Tools } from './Icons/Tools';
 export { TransferHorizontal } from './Icons/TransferHorizontal';
 export { TransferVertical } from './Icons/TransferVertical';
 export { Trash } from './Icons/Trash';
+export { TriangleDown } from './Icons/TriangleDown';
+export { TriangleUp } from './Icons/TriangleUp';
 export { Truck } from './Icons/Truck';
 export { Twitter } from './Icons/Twitter';
 export { Unlink } from './Icons/Unlink';