@ledgerhq/lumen-ui-rnative 0.1.11 → 0.1.13

package/src/lib/Components/MediaBanner/MediaBanner.mdx

@@ -0,0 +1,150 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaBannerStories from './MediaBanner.stories';
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from './MediaBanner';
+import { Box } from '../Utility';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Components/MediaBanner' of={MediaBannerStories} />
+
+# 🖼️ MediaBanner
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaBanner is a promotional banner component that displays a background image alongside a title and description. It is designed for marketing or informational content and supports an optional close action for dismissibility.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11235-5982&m=dev).
+
+## Anatomy
+
+<Canvas of={MediaBannerStories.Base} />
+
+- **MediaBanner**: Root pressable container with surface background, rounded corners, and a fixed height
+- **MediaBannerTitle**: The main label of the banner (clamps at 1 line)
+- **MediaBannerDescription**: Additional context below the title (clamps at 2 lines)
+- **Image**: Background image displayed on the right side with a gradient overlay
+- **Close button**: Optional InteractiveIcon rendered in the top-right corner via the `onClose` prop
+
+## Properties
+
+### Overview
+
+<Canvas of={MediaBannerStories.Base} />
+<Controls of={MediaBannerStories.Base} />
+
+### Truncation
+
+Title clamps at 1 line and description clamps at 2 lines when content overflows.
+
+<Canvas of={MediaBannerStories.Truncation} />
+
+### Broken Image
+
+When the `imageUrl` fails to load, the broken image is hidden while the gradient overlay and image space are preserved. The banner remains functional and visually consistent.
+
+<Canvas of={MediaBannerStories.WithBrokenImage} />
+
+### Dismissible
+
+When `onClose` is provided, the close button allows the user to dismiss the banner.
+
+<Canvas of={MediaBannerStories.WithClose} />
+
+## Accessibility
+
+- The close button uses `InteractiveIcon` with proper press states
+- The root element is a `Pressable` for interactive use cases
+- Title and description use semantic `Text` elements
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+MediaBanner uses a composite component pattern with `MediaBannerTitle` and `MediaBannerDescription`:
+
+```tsx
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <MediaBanner imageUrl='https://example.com/promo.jpg'>
+      <MediaBannerTitle>Firmware Update</MediaBannerTitle>
+      <MediaBannerDescription>
+        Keep your Nano updated!
+      </MediaBannerDescription>
+    </MediaBanner>
+  );
+}
+```
+
+### With Close Button
+
+Add an `onClose` callback to make the banner dismissible:
+
+```tsx
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+import { useState } from 'react';
+
+function DismissibleBanner() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <MediaBanner
+      imageUrl='https://example.com/promo.jpg'
+      onClose={() => setIsVisible(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>
+  );
+}
+```
+
+### Layout Adjustments with lx
+
+Use the `lx` prop for layout adjustments like margins or positioning:
+
+```tsx
+<MediaBanner
+  imageUrl='https://example.com/promo.jpg'
+  lx={{ marginTop: 's16', marginBottom: 's8' }}
+>
+  <MediaBannerTitle>With Margin</MediaBannerTitle>
+  <MediaBannerDescription>
+    This banner has layout adjustments via lx.
+  </MediaBannerDescription>
+</MediaBanner>
+```
+
+<CommonRulesDoAndDont />
+
+</Tab>
+</CustomTabs>

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/MediaCard/MediaCard.mdx

@@ -0,0 +1,111 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaCardStories from './MediaCard.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Communication/MediaCard' of={MediaCardStories} />
+
+# MediaCard
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaCard is a promotional card component that displays a full-bleed background image with gradient overlays for text readability. It uses a simplified compound pattern with `MediaCardTitle` for the text and free-form children for leading content (e.g. tags, icons).
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=15160-2853).
+
+## Anatomy
+
+<Canvas of={MediaCardStories.Base} />
+
+- **MediaCard**: Root pressable container with background image and gradient overlays
+- **MediaCardTitle**: Styled title text (clamps at 3 lines)
+- **Leading content**: Any element rendered before `MediaCardTitle` (tags, badges, icons) — no wrapper needed
+- **Close button**: Rendered via the `onClose` prop (positioned absolute top-right) — only visible when `onClose` is provided
+
+## Properties
+
+<Canvas of={MediaCardStories.Base} />
+<Controls of={MediaCardStories.Base} />
+
+### Layout
+
+The card fills its parent width by default.
+
+<Canvas of={MediaCardStories.LayoutShowcase} />
+
+### Compositions
+
+Leading content is optional — just place any element before `MediaCardTitle` inside `MediaCard`.
+
+<Canvas of={MediaCardStories.CompositionShowcase} />
+
+## Accessibility
+
+- The root element uses `accessibilityRole='button'` when `onPress` is provided
+- The close button includes an `accessibilityLabel` (auto-translated via i18n) — only rendered when `onClose` is provided
+- The background image is not accessible (`accessible={false}`) since it is decorative
+- Components forward refs and spread props for accessibility support
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+Both `onPress` and `onClose` are optional. When `onClose` is omitted, the close button is hidden. When `onPress` is omitted, the card is non-interactive.
+
+```tsx
+import { MediaCard, MediaCardTitle, Tag } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <MediaCard
+      imageUrl='https://example.com/promo.jpg'
+      onPress={() => console.log('pressed')}
+      onClose={() => console.log('closed')}
+    >
+      <Tag label='New' size='md' />
+      <MediaCardTitle>Card title</MediaCardTitle>
+    </MediaCard>
+  );
+}
+```
+
+### Without Close Button
+
+Omit `onClose` to hide the close button — useful for non-dismissible promotions:
+
+```tsx
+<MediaCard
+  imageUrl='https://example.com/promo.jpg'
+  onPress={() => console.log('pressed')}
+>
+  <Tag label='New' size='md' />
+  <MediaCardTitle>Card title</MediaCardTitle>
+</MediaCard>
+```
+
+### Layout Adjustments with lx
+
+Use the `lx` prop for layout adjustments like margins or positioning:
+
+```tsx
+<MediaCard
+  imageUrl='https://example.com/promo.jpg'
+  onPress={() => console.log('pressed')}
+  lx={{ marginTop: 's16', marginBottom: 's8' }}
+>
+  <MediaCardTitle>With margin</MediaCardTitle>
+</MediaCard>
+```
+
+<CommonRulesDoAndDont />
+
+</Tab>
+</CustomTabs>