@ledgerhq/lumen-ui-rnative 0.0.55 → 0.0.57-0

package/src/lib/Components/Tile/Tile.tsx

@@ -2,7 +2,7 @@ import {
   createSafeContext,
   isTextChildren,
 } from '@ledgerhq/lumen-utils-shared';
-import React, { forwardRef, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { Spot } from '../Spot';
@@ -25,10 +25,12 @@ const useRootStyles = ({
   appearance,
   disabled,
   pressed,
+  centered,
 }: {
   appearance: Appearance;
   disabled: boolean;
   pressed: boolean;
+  centered: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -60,10 +62,13 @@ const useRootStyles = ({
             !disabled && {
               backgroundColor: pressedBgColors[appearance],
             },
+          centered && {
+            justifyContent: 'center',
+          },
         ]),
       };
     },
-    [appearance, disabled, pressed],
+    [appearance, disabled, pressed, centered],
   );
 };
 
@@ -103,57 +108,58 @@ const useRootStyles = ({
  *   <Tag label="Active" />
  * </Tile>
  */
-export const Tile = forwardRef<React.ElementRef<typeof Pressable>, TileProps>(
-  (
-    {
-      lx = {},
-      style,
-      appearance = 'no-background',
-      disabled = false,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <TileProvider value={{ disabled }}>
-        <Pressable
-          ref={ref}
-          lx={lx}
-          style={StyleSheet.flatten([{ width: '100%' }, style])}
-          disabled={disabled}
-          accessibilityRole='button'
-          accessibilityState={{ disabled }}
-          {...props}
-        >
-          {({ pressed }) => (
-            <TilePressableContent
-              appearance={appearance}
-              disabled={disabled}
-              pressed={pressed}
-            >
-              {children}
-            </TilePressableContent>
-          )}
-        </Pressable>
-      </TileProvider>
-    );
-  },
-);
+export const Tile = ({
+  lx = {},
+  style,
+  appearance = 'no-background',
+  disabled = false,
+  centered = false,
+  children,
+  ref,
+  ...props
+}: TileProps) => {
+  return (
+    <TileProvider value={{ disabled }}>
+      <Pressable
+        ref={ref}
+        lx={lx}
+        style={StyleSheet.flatten([{ width: '100%' }, style])}
+        disabled={disabled}
+        accessibilityRole='button'
+        accessibilityState={{ disabled }}
+        {...props}
+      >
+        {({ pressed }) => (
+          <TilePressableContent
+            appearance={appearance}
+            disabled={disabled}
+            pressed={pressed}
+            centered={centered}
+          >
+            {children}
+          </TilePressableContent>
+        )}
+      </Pressable>
+    </TileProvider>
+  );
+};
+
 Tile.displayName = 'Tile';
 
 const TilePressableContent = ({
   appearance,
   disabled,
   pressed,
+  centered,
   children,
 }: {
   appearance: Appearance;
   disabled: boolean;
   pressed: boolean;
+  centered: boolean;
   children: ReactNode;
 }) => {
-  const styles = useRootStyles({ appearance, disabled, pressed });
+  const styles = useRootStyles({ appearance, disabled, pressed, centered });
   return <View style={styles.container}>{children}</View>;
 };
 

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

@@ -24,6 +24,12 @@ export type TileProps = {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Whether the tile content should be centered vertically.
+   * Useful when the tile has a fixed height and you want the content centered.
+   * @default false
+   */
+  centered?: boolean;
   /**
    * Callback function when the tile is pressed.
    */

package/src/lib/Components/TileButton/TileButton.mdx

@@ -0,0 +1,215 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TileButtonStories from './TileButton.stories';
+import { TileButton } from './TileButton';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Action/TileButton' of={TileButtonStories} />
+
+# TileButton
+
+<CustomTabs>
+  <Tab label="Overview ">
+
+## Introduction
+
+TileButton is a compact interactive component that displays an icon above a label in a vertical layout. It's designed for quick actions in grids, toolbars, or action menus where space efficiency is important. This React Native implementation ensures consistent behavior across mobile platforms.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10547-591&m=dev).
+
+## Anatomy
+
+<Canvas of={TileButtonStories.Base} />
+
+- **[Icon](/docs/symbols-icons--docs) (required)**: A visual indicator of the action, rendered at 20px
+- **Children (required)**: The label text describing the action
+
+## Properties
+
+### Overview
+
+<Canvas of={TileButtonStories.Base} />
+<Controls of={TileButtonStories.Base} />
+
+### States
+
+TileButton supports default, pressed, and disabled states:
+
+<Canvas of={TileButtonStories.DisabledShowcase} />
+
+### Icons
+
+TileButton works with any [icon](/docs/symbols-icons--docs) from the design system:
+
+<Canvas of={TileButtonStories.IconsShowcase} />
+
+### Text Truncation
+
+Labels are truncated to 2 lines by default. Use the `numberOfLines` prop to customize:
+
+<Canvas of={TileButtonStories.TruncationShowcase} />
+
+## Responsive Layout
+
+TileButton adapts to its content by default. Use the `isFull` prop for full-width buttons:
+
+<Canvas of={TileButtonStories.WidthShowcase} />
+
+## Grid Usage
+
+TileButton is ideal for grid-based action menus:
+
+<Canvas of={TileButtonStories.GridLayout} />
+
+## Accessibility
+
+- Supports all standard React Native accessibility props
+- Touch targets meet minimum size requirements
+
+</Tab>
+<Tab label="Implementation ">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+```tsx
+import { TileButton } from '@ledgerhq/lumen-ui-rnative';
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <TileButton icon={Settings} onPress={() => console.log('pressed')}>
+      Settings
+    </TileButton>
+  );
+}
+```
+
+## Grid Layout Example
+
+```tsx
+import { View } from 'react-native';
+import { TileButton } from '@ledgerhq/lumen-ui-rnative';
+import { Settings, Plus, User, Apps } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function ActionGrid() {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+      <TileButton icon={Plus} onPress={() => {}}>Buy</TileButton>
+      <TileButton icon={Settings} onPress={() => {}}>Settings</TileButton>
+      <TileButton icon={User} onPress={() => {}}>Profile</TileButton>
+      <TileButton icon={Apps} onPress={() => {}}>Apps</TileButton>
+    </View>
+  );
+}
+```
+
+## Full Width
+
+Use the `isFull` prop to make the button take the full width of its container:
+
+```tsx
+<TileButton icon={Settings} isFull onPress={() => {}}>
+  Full Width
+</TileButton>
+```
+
+## Text Truncation
+
+Labels are truncated to 2 lines by default. Use the `numberOfLines` prop to customize:
+
+```tsx
+<TileButton icon={Settings} numberOfLines={1} onPress={() => {}}>
+  Single line truncation
+</TileButton>
+```
+
+## Custom Styling
+
+Use the `lx` prop for token-based styling:
+
+```tsx
+<TileButton
+  icon={Settings}
+  lx={{ marginTop: 's8' }}
+  onPress={() => {}}
+>
+  Styled
+</TileButton>
+```
+
+Or use the `style` prop for escape-hatch styling:
+
+```tsx
+<TileButton
+  icon={Settings}
+  style={{ marginTop: 16 }}
+  onPress={() => {}}
+>
+  Styled
+</TileButton>
+```
+
+## Do's and Don'ts
+
+<div className='flex flex-col gap-24'>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use the icon prop'
+      description='Pass icon as a component reference'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<TileButton icon={Plus} onPress={() => {}}>
+  Add
+</TileButton>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't include icon in children"
+      description='The icon and children are separate'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<TileButton icon={Plus} onPress={() => {}}>
+  <Plus /> Add
+</TileButton>
+```
+
+    </DontBlockItem>
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</div>
+
+## Platform Considerations
+
+### iOS Specific
+
+- Touch feedback uses appropriate opacity transitions
+- Respects iOS accessibility settings like reduced motion
+
+### Android Specific
+
+- Material Design touch feedback is supported
+- Respects Android accessibility services
+
+### Cross-Platform
+
+- Consistent visual appearance across platforms
+- Platform-appropriate touch feedback
+- Unified API regardless of platform
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { View } from 'react-native';
+import { Settings, Plus, User, Apps, Home, Bell, Cart } from '../../Symbols';
+import { TileButton } from './TileButton';
+
+const iconOptions = {
+  Settings,
+  Plus,
+  User,
+  Apps,
+  Home,
+  Bell,
+  Cart,
+};
+
+const meta: Meta<typeof TileButton> = {
+  component: TileButton,
+  title: 'Action/TileButton',
+  argTypes: {
+    icon: {
+      options: Object.keys(iconOptions),
+      mapping: iconOptions,
+      control: { type: 'select' },
+    },
+    onPress: {
+      action: 'pressed',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TileButton>;
+
+export const Base: Story = {
+  args: {
+    icon: Settings,
+    children: 'Settings',
+  },
+  render: (args) => <TileButton {...args} />,
+  parameters: {
+    docs: {
+      source: {
+        code: `<TileButton icon={Settings} onPress={() => {}}>Settings</TileButton>`,
+      },
+    },
+  },
+};
+
+export const DisabledShowcase: Story = {
+  render: (args) => (
+    <View style={{ flexDirection: 'row', gap: 16 }}>
+      <TileButton icon={Settings} onPress={args.onPress}>
+        Enabled
+      </TileButton>
+      <TileButton icon={Settings} onPress={args.onPress} disabled>
+        Disabled
+      </TileButton>
+    </View>
+  ),
+};
+
+export const IconsShowcase: Story = {
+  render: (args) => (
+    <View style={{ flexDirection: 'row', gap: 16 }}>
+      <TileButton icon={Settings} onPress={args.onPress}>
+        Settings
+      </TileButton>
+      <TileButton icon={User} onPress={args.onPress}>
+        Profile
+      </TileButton>
+      <TileButton icon={Plus} onPress={args.onPress}>
+        Add
+      </TileButton>
+      <TileButton icon={Apps} onPress={args.onPress}>
+        Apps
+      </TileButton>
+    </View>
+  ),
+};
+
+export const GridLayout: Story = {
+  render: (args) => (
+    <View style={{ width: 343, gap: 8 }}>
+      {/* 2-button row */}
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <View style={{ flex: 1 }}>
+          <TileButton icon={Plus} isFull onPress={args.onPress}>
+            Buy
+          </TileButton>
+        </View>
+        <View style={{ flex: 1 }}>
+          <TileButton icon={Settings} isFull onPress={args.onPress}>
+            Settings
+          </TileButton>
+        </View>
+      </View>
+      {/* 3-button row */}
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <View style={{ flex: 1 }}>
+          <TileButton icon={User} isFull onPress={args.onPress}>
+            Profile
+          </TileButton>
+        </View>
+        <View style={{ flex: 1 }}>
+          <TileButton icon={Apps} isFull onPress={args.onPress}>
+            Apps
+          </TileButton>
+        </View>
+        <View style={{ flex: 1 }}>
+          <TileButton icon={Home} isFull onPress={args.onPress}>
+            Home
+          </TileButton>
+        </View>
+      </View>
+    </View>
+  ),
+};
+
+export const WidthShowcase: Story = {
+  render: (args) => (
+    <View
+      style={{
+        width: 320,
+        gap: 8,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+      }}
+    >
+      <TileButton icon={Settings} onPress={args.onPress}>
+        Default width
+      </TileButton>
+      <TileButton icon={Settings} isFull onPress={args.onPress}>
+        Full width (isFull)
+      </TileButton>
+    </View>
+  ),
+};
+
+export const TruncationShowcase: Story = {
+  render: (args) => (
+    <View style={{ flexDirection: 'row', gap: 16 }}>
+      <View style={{ width: 80 }}>
+        <TileButton icon={Settings} isFull onPress={args.onPress}>
+          Very long label text
+        </TileButton>
+      </View>
+    </View>
+  ),
+};

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

@@ -0,0 +1,104 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+import { Settings } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { TileButton } from './TileButton';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('TileButton Component', () => {
+  describe('Rendering', () => {
+    it('should render with icon and text content', () => {
+      renderWithProvider(
+        <TileButton testID='tile-button' icon={Settings}>
+          Settings
+        </TileButton>,
+      );
+      const button = screen.getByTestId('tile-button');
+      expect(button).toBeTruthy();
+      expect(screen.getByText('Settings')).toBeTruthy();
+      expect(button.props.accessibilityRole).toBe('button');
+    });
+  });
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      renderWithProvider(
+        <TileButton testID='tile-button' icon={Settings} disabled>
+          Disabled
+        </TileButton>,
+      );
+      const button = screen.getByTestId('tile-button');
+      expect(button.props.accessibilityState.disabled).toBe(true);
+    });
+
+    it('should render correctly with isFull prop', () => {
+      renderWithProvider(
+        <TileButton testID='tile-button' icon={Settings} isFull>
+          Full Width
+        </TileButton>,
+      );
+      const content = screen.getByTestId('tile-button-content');
+      expect(content.props.style.width).toBe('100%');
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onPress when pressed', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <TileButton testID='tile-button' icon={Settings} onPress={handlePress}>
+          Press me
+        </TileButton>,
+      );
+
+      fireEvent.press(screen.getByTestId('tile-button'));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onPress when disabled', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <TileButton
+          testID='tile-button'
+          icon={Settings}
+          onPress={handlePress}
+          disabled
+        >
+          Disabled
+        </TileButton>,
+      );
+
+      fireEvent.press(screen.getByTestId('tile-button'));
+      expect(handlePress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom style and lx props', () => {
+      const customStyle: ViewStyle = { marginTop: 16 };
+      renderWithProvider(
+        <TileButton
+          testID='tile-button'
+          icon={Settings}
+          style={customStyle}
+          lx={{ padding: 's8' }}
+        >
+          Styled
+        </TileButton>,
+      );
+      const button = screen.getByTestId('tile-button');
+      expect(button.props.style).toBeDefined();
+    });
+  });
+});