@ledgerhq/lumen-ui-rnative 0.0.75 → 0.0.77

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/TabBar/TabBar.tsx

@@ -15,7 +15,7 @@ import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
 import { TabBarItemProps, TabBarProps } from './types';
 
-export const TAB_BAR_HEIGHT = 56;
+export const TAB_BAR_HEIGHT = 60;
 const PILL_INSET = 4;
 
 /**

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';