@ledgerhq/lumen-ui-rnative 0.0.76 → 0.0.78

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

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import React from 'react';
+import { Settings, Wallet } from '../../Symbols';
+import { Button } from '../Button';
+import { Spot } from '../Spot';
+import { Stepper } from '../Stepper';
+import { Box, Text } from '../Utility';
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerDescription,
+  ContentBannerTitle,
+} from './ContentBanner';
+
+const meta: Meta<typeof ContentBanner> = {
+  component: ContentBanner,
+  title: 'Communication/ContentBanner',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    onClose: {
+      control: 'select',
+      description: 'Close action callback',
+      options: ['With Close', 'None'],
+      mapping: {
+        'With Close': () => {
+          console.log('Close clicked');
+        },
+        None: undefined,
+      },
+    },
+    closeAccessibilityLabel: {
+      control: 'text',
+      description: 'Accessibility label for the close button',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContentBanner>;
+
+export const Base: Story = {
+  args: {
+    closeAccessibilityLabel: 'Close content banner',
+  },
+  render: (args) => (
+    <Box lx={{ maxWidth: 's400' }}>
+      <ContentBanner {...args}>
+        <Spot appearance='icon' icon={Settings} size={48} />
+        <ContentBannerContent>
+          <ContentBannerTitle>Content Banner</ContentBannerTitle>
+          <ContentBannerDescription>
+            This is a description for the content banner.
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<ContentBanner>
+  <Spot appearance="icon" icon={Settings} size={48} />
+  <ContentBannerContent>
+    <ContentBannerTitle>Content Banner</ContentBannerTitle>
+    <ContentBannerDescription>
+      This is a description for the content banner.
+    </ContentBannerDescription>
+  </ContentBannerContent>
+</ContentBanner>
+`,
+      },
+    },
+  },
+};
+
+export const WithClose: Story = {
+  render: () => {
+    const [visible, setVisible] = React.useState(true);
+
+    if (!visible) {
+      return (
+        <Button
+          appearance='transparent'
+          size='sm'
+          onPress={() => setVisible(true)}
+        >
+          Show banner again
+        </Button>
+      );
+    }
+
+    return (
+      <Box lx={{ maxWidth: 's400' }}>
+        <ContentBanner
+          onClose={() => setVisible(false)}
+          closeAccessibilityLabel='Close content banner'
+        >
+          <Spot appearance='icon' icon={Settings} size={48} />
+          <ContentBannerContent>
+            <ContentBannerTitle>Dismissible Banner</ContentBannerTitle>
+            <ContentBannerDescription>
+              Press the close button to dismiss this banner.
+            </ContentBannerDescription>
+          </ContentBannerContent>
+        </ContentBanner>
+      </Box>
+    );
+  },
+};
+
+export const ContentVariationsShowcase: Story = {
+  render: () => (
+    <Box
+      lx={{
+        flexDirection: 'column',
+        maxWidth: 's400',
+        gap: 's16',
+        padding: 's8',
+      }}
+    >
+      <ContentBanner>
+        <Spot appearance='icon' icon={Settings} size={48} />
+        <ContentBannerContent>
+          <ContentBannerTitle>Title Only</ContentBannerTitle>
+        </ContentBannerContent>
+      </ContentBanner>
+
+      <ContentBanner>
+        <Spot appearance='icon' icon={Wallet} size={48} />
+        <ContentBannerContent>
+          <ContentBannerTitle>Title with Description</ContentBannerTitle>
+          <ContentBannerDescription>
+            This is a description for the content banner.
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+
+      <ContentBanner onClose={() => console.log('close')}>
+        <Spot appearance='icon' icon={Wallet} size={48} />
+        <ContentBannerContent>
+          <ContentBannerTitle>With Close Button</ContentBannerTitle>
+          <ContentBannerDescription>
+            A content banner with a leading icon and close button.
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+
+      <ContentBanner onClose={() => console.log('close')}>
+        <Spot appearance='icon' icon={Settings} size={48} />
+        <ContentBannerContent>
+          <ContentBannerTitle>
+            Longer Title That Demonstrates Clamping Behavior With a Long
+            Description
+          </ContentBannerTitle>
+          <ContentBannerDescription>
+            This is a longer description that demonstrates how the content
+            banner handles overflow. It should be clamped at two lines.
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+    </Box>
+  ),
+};
+
+export const WithStepper: Story = {
+  render: () => (
+    <Box lx={{ maxWidth: 's400' }}>
+      <ContentBanner onClose={() => console.log('close')}>
+        <Stepper currentStep={2} totalSteps={4} />
+        <ContentBannerContent>
+          <ContentBannerTitle>Setup your wallet</ContentBannerTitle>
+          <ContentBannerDescription>
+            Complete all steps to secure your wallet.
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+    </Box>
+  ),
+};
+
+export const ResponsiveLayout: Story = {
+  render: () => (
+    <Box
+      lx={{
+        width: 's400',
+        flexDirection: 'column',
+        gap: 's16',
+        backgroundColor: 'mutedPressed',
+        padding: 's16',
+      }}
+    >
+      <Text typography='body4SemiBold' lx={{ color: 'muted' }}>
+        Container with a fixed width
+      </Text>
+      <ContentBanner>
+        <Spot appearance='icon' icon={Settings} size={48} />
+        <ContentBannerContent>
+          <ContentBannerTitle>Short Title</ContentBannerTitle>
+          <ContentBannerDescription>Short description</ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+      <ContentBanner onClose={() => console.log('close')}>
+        <Spot appearance='icon' icon={Wallet} size={48} />
+        <ContentBannerContent>
+          <ContentBannerTitle>
+            Longer Title That Might Overflow When Container is Smaller
+          </ContentBannerTitle>
+          <ContentBannerDescription>
+            This is a longer description that demonstrates how the content
+            banner handles longer content within its constraints. It should be
+            clamped at two lines with an ellipsis.
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+    </Box>
+  ),
+};

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

@@ -0,0 +1,133 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+import { Settings } from '../../Symbols';
+import { Spot } from '../Spot';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerTitle,
+  ContentBannerDescription,
+} from './ContentBanner';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('ContentBanner', () => {
+  it('should render children', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <ContentBanner>
+          <ContentBannerContent>
+            <ContentBannerTitle>Title</ContentBannerTitle>
+          </ContentBannerContent>
+        </ContentBanner>
+      </TestWrapper>,
+    );
+
+    getByText('Title');
+  });
+
+  it('should render title and description', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <ContentBanner>
+          <ContentBannerContent>
+            <ContentBannerTitle>Banner Title</ContentBannerTitle>
+            <ContentBannerDescription>
+              Banner description
+            </ContentBannerDescription>
+          </ContentBannerContent>
+        </ContentBanner>
+      </TestWrapper>,
+    );
+
+    getByText('Banner Title');
+    getByText('Banner description');
+  });
+
+  it('should render close button when onClose is provided', () => {
+    const handleClose = jest.fn();
+    const { getByTestId } = render(
+      <TestWrapper>
+        <ContentBanner onClose={handleClose}>
+          <ContentBannerContent>
+            <ContentBannerTitle>Title</ContentBannerTitle>
+          </ContentBannerContent>
+        </ContentBanner>
+      </TestWrapper>,
+    );
+
+    const closeButton = getByTestId('content-banner-close-button');
+    expect(closeButton).toBeTruthy();
+    fireEvent.press(closeButton);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not render close button when onClose is not provided', () => {
+    const { queryByTestId } = render(
+      <TestWrapper>
+        <ContentBanner>
+          <ContentBannerContent>
+            <ContentBannerTitle>Title</ContentBannerTitle>
+          </ContentBannerContent>
+        </ContentBanner>
+      </TestWrapper>,
+    );
+
+    expect(queryByTestId('content-banner-close-button')).toBeNull();
+  });
+
+  it('should apply custom closeAccessibilityLabel', () => {
+    const handleClose = jest.fn();
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <ContentBanner onClose={handleClose} closeAccessibilityLabel='Dismiss'>
+          <ContentBannerContent>
+            <ContentBannerTitle>Title</ContentBannerTitle>
+          </ContentBannerContent>
+        </ContentBanner>
+      </TestWrapper>,
+    );
+
+    expect(getByLabelText('Dismiss')).toBeTruthy();
+  });
+
+  it('should render with a leading element', () => {
+    const { getByText, getByTestId } = render(
+      <TestWrapper>
+        <ContentBanner testID='content-banner'>
+          <Spot appearance='icon' icon={Settings} />
+          <ContentBannerContent>
+            <ContentBannerTitle>With Spot</ContentBannerTitle>
+          </ContentBannerContent>
+        </ContentBanner>
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('content-banner')).toBeTruthy();
+    getByText('With Spot');
+  });
+
+  it('should apply surface background color', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <ContentBanner testID='content-banner'>
+          <ContentBannerContent>
+            <ContentBannerTitle>Title</ContentBannerTitle>
+          </ContentBannerContent>
+        </ContentBanner>
+      </TestWrapper>,
+    );
+
+    const banner = getByTestId('content-banner');
+    expect(banner.props.style.backgroundColor).toBe(
+      ledgerLiveThemes.dark.colors.bg.surface,
+    );
+  });
+});

package/src/lib/Components/ContentBanner/ContentBanner.tsx

@@ -0,0 +1,226 @@
+import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet, View } from 'react-native';
+import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
+import { Close } from '../../Symbols';
+import { InteractiveIcon } from '../InteractiveIcon';
+import { Box, Text } from '../Utility';
+import {
+  ContentBannerContentProps,
+  ContentBannerDescriptionProps,
+  ContentBannerProps,
+  ContentBannerTitleProps,
+} from './types';
+
+/**
+ * Container for the text content (title and description) within the content banner.
+ */
+export const ContentBannerContent = ({
+  children,
+  lx = {},
+  style,
+  ref,
+  ...viewProps
+}: ContentBannerContentProps) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      content: {
+        flex: 1,
+        minWidth: 0,
+        flexDirection: 'column',
+        gap: t.spacings.s4,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.content, style])}
+      {...viewProps}
+    >
+      {children}
+    </Box>
+  );
+};
+
+ContentBannerContent.displayName = 'ContentBannerContent';
+
+/**
+ * The main title of the content banner.
+ */
+export const ContentBannerTitle = ({
+  children,
+  lx = {},
+  style,
+  ref,
+  ...textProps
+}: ContentBannerTitleProps) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      title: StyleSheet.flatten([
+        t.typographies.body2SemiBold,
+        {
+          color: t.colors.text.base,
+        },
+      ]),
+    }),
+    [],
+  );
+
+  if (isTextChildren(children)) {
+    return (
+      <Text
+        ref={ref}
+        lx={lx}
+        style={StyleSheet.flatten([styles.title, style])}
+        numberOfLines={1}
+        ellipsizeMode='tail'
+      >
+        {children}
+      </Text>
+    );
+  }
+
+  return (
+    <Box lx={lx} style={StyleSheet.flatten([style])} {...textProps}>
+      {children}
+    </Box>
+  );
+};
+
+ContentBannerTitle.displayName = 'ContentBannerTitle';
+
+/**
+ * Optional description text below the title.
+ */
+export const ContentBannerDescription = ({
+  children,
+  lx = {},
+  style,
+  ref,
+  ...textProps
+}: ContentBannerDescriptionProps) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      description: StyleSheet.flatten([
+        t.typographies.body3,
+        {
+          color: t.colors.text.muted,
+        },
+      ]),
+    }),
+    [],
+  );
+
+  if (isTextChildren(children)) {
+    return (
+      <Text
+        ref={ref}
+        lx={lx}
+        style={StyleSheet.flatten([styles.description, style])}
+        numberOfLines={2}
+        ellipsizeMode='tail'
+      >
+        {children}
+      </Text>
+    );
+  }
+
+  return (
+    <Box lx={lx} style={StyleSheet.flatten([style])} {...textProps}>
+      {children}
+    </Box>
+  );
+};
+
+ContentBannerDescription.displayName = 'ContentBannerDescription';
+
+/**
+ * A content banner component for displaying a composable banner with an optional
+ * leading visual, title, description, and close button.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-contentbanner-overview--docs Storybook}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the banner's core appearance (colors, padding, etc).
+ *
+ * @example
+ * import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot } from '@ledgerhq/lumen-ui-rnative';
+ * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <ContentBanner onClose={() => {}}>
+ *   <Spot appearance="icon" icon={Wallet} size={48} />
+ *   <ContentBannerContent>
+ *     <ContentBannerTitle>Title</ContentBannerTitle>
+ *     <ContentBannerDescription>Description text</ContentBannerDescription>
+ *   </ContentBannerContent>
+ * </ContentBanner>
+ */
+export const ContentBanner = ({
+  children,
+  lx = {},
+  style,
+  onClose,
+  closeAccessibilityLabel,
+  ref,
+  ...viewProps
+}: ContentBannerProps) => {
+  const { t } = useCommonTranslation();
+
+  const styles = useStyleSheet(
+    (t) => ({
+      root: {
+        flexDirection: 'row',
+        width: t.sizes.full,
+        alignItems: 'center',
+        gap: t.spacings.s12,
+        borderRadius: t.borderRadius.md,
+        padding: t.spacings.s12,
+        backgroundColor: t.colors.bg.surface,
+      },
+      rootWithClose: {
+        paddingRight: t.spacings.s48,
+      },
+      closeButton: {
+        position: 'absolute',
+        top: t.spacings.s8,
+        right: t.spacings.s8,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([
+        styles.root,
+        onClose && styles.rootWithClose,
+        style,
+      ])}
+      {...viewProps}
+    >
+      {children}
+      {onClose && (
+        <View style={styles.closeButton}>
+          <InteractiveIcon
+            iconType='stroked'
+            testID='content-banner-close-button'
+            onPress={() => onClose()}
+            accessibilityLabel={
+              closeAccessibilityLabel || t('components.banner.closeAriaLabel')
+            }
+          >
+            <Close size={16} />
+          </InteractiveIcon>
+        </View>
+      )}
+    </Box>
+  );
+};
+
+ContentBanner.displayName = 'ContentBanner';

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

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyledTextProps, StyledViewProps } from '../../../styles';
+
+/**
+ * Props for the ContentBanner root component
+ */
+export type ContentBannerProps = {
+  /**
+   * The content of the content banner (ContentBannerContent, ContentBannerTitle, ContentBannerDescription, or any leading element)
+   */
+  children: React.ReactNode;
+  /**
+   * Optional close action.
+   */
+  onClose?: () => void;
+  /**
+   * Optional accessibility label for the close button.
+   */
+  closeAccessibilityLabel?: string;
+} & Omit<StyledViewProps, 'children'>;
+
+/**
+ * Props for the ContentBannerContent component
+ */
+export type ContentBannerContentProps = {
+  /**
+   * The content (ContentBannerTitle, ContentBannerDescription)
+   */
+  children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+/**
+ * Props for the ContentBannerTitle component
+ */
+export type ContentBannerTitleProps = {
+  /**
+   * The title text or custom content
+   */
+  children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+/**
+ * Props for the ContentBannerDescription component
+ */
+export type ContentBannerDescriptionProps = {
+  /**
+   * The description text or custom content
+   */
+  children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;

package/src/lib/Components/index.ts

@@ -6,6 +6,7 @@ export * from './Banner';
 export * from './BottomSheet';
 export * from './Button';
 export * from './CardButton';
+export * from './ContentBanner';
 export * from './Checkbox';
 export * from './Divider';
 export * from './Icon';

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

@@ -0,0 +1,49 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * Csv 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 { Csv } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Csv />
+ *
+ * @example
+ * // With custom size and style
+ * <Csv size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Csv} size="md">
+ *   Click me
+ * </Button>
+ */
+export const Csv = createIcon(
+  'Csv',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M10.333 14h1a2 2 0 0 0 2-2V5.673a2 2 0 0 0-.585-1.414l-1.673-1.673A2 2 0 0 0 9.66 2H4.667a2 2 0 0 0-2 2v4.667m10.666-3H11a1.333 1.333 0 0 1-1.333-1.334V2M8 6v3.333m0 0L9.333 8M8 9.333 6.667 8'
+    />
+    <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'
+    />
+  </Svg>,
+);