@ledgerhq/lumen-ui-rnative 0.1.10 → 0.1.12

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

@@ -1,25 +1,20 @@
 import {
-  createSafeContext,
+  DisabledProvider,
   isTextChildren,
+  useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
 import { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { Spot } from '../Spot';
 import { Box, Pressable, Text } from '../Utility';
 import {
   TileContentProps,
-  TileContextValue,
   TileDescriptionProps,
   TileProps,
-  TileSpotProps,
   TileTitleProps,
   TileTrailingContentProps,
 } from './types';
 
-const [TileProvider, useTileContext] =
-  createSafeContext<TileContextValue>('Tile');
-
 type Appearance = NonNullable<TileProps['appearance']>;
 
 const useRootStyles = ({
@@ -85,12 +80,13 @@ const useRootStyles = ({
  * Do not use it to modify the tile's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
- * // Basic tile with spot and content
- * import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
+ * // Basic tile with icon and content
+ * import { Tile, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative';
+ * import { Spot } from '@ledgerhq/lumen-ui-rnative';
  * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * <Tile appearance="card" onPress={() => console.log('Pressed!')}>
- *   <TileSpot appearance="icon" icon={Wallet} />
+ *   <Spot appearance="icon" icon={Wallet} />
  *   <TileContent>
  *     <TileTitle>My Wallet</TileTitle>
  *     <TileDescription>Description</TileDescription>
@@ -98,30 +94,37 @@ const useRootStyles = ({
  * </Tile>
  *
  * @example
- * // With custom content and long press
- * import { Tile, TileSpot, TileContent, TileTitle, Tag } from '@ledgerhq/lumen-ui-rnative';
+ * // With trailing content (Tags)
+ * import { Tile, TileContent, TileTitle, TileTrailingContent, Tag } from '@ledgerhq/lumen-ui-rnative';
  * import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * <Tile appearance="card" onLongPress={() => console.log('Long pressed')}>
- *   <TileSpot appearance="icon" icon={Bitcoin} />
+ *   <Spot appearance="icon" icon={Bitcoin} />
  *   <TileContent>
  *     <TileTitle>Bitcoin</TileTitle>
+ *     <TileTrailingContent>
+ *       <Tag label="Active" />
+ *     </TileTrailingContent>
  *   </TileContent>
- *   <Tag label="Active" />
  * </Tile>
  */
 export const Tile = ({
   lx = {},
   style,
   appearance = 'no-background',
-  disabled = false,
+  disabled: disabledProp = false,
   centered = false,
   children,
   ref,
   ...props
 }: TileProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'Tile',
+    mergeWith: { disabled: disabledProp },
+  });
+
   return (
-    <TileProvider value={{ disabled }}>
+    <DisabledProvider value={{ disabled }}>
       <Pressable
         ref={ref}
         lx={lx}
@@ -137,7 +140,7 @@ export const Tile = ({
         {({ pressed }) => (
           <TilePressableContent
             appearance={appearance}
-            disabled={disabled}
+            disabled={!!disabled}
             pressed={pressed}
             centered={centered}
           >
@@ -145,7 +148,7 @@ export const Tile = ({
           </TilePressableContent>
         )}
       </Pressable>
-    </TileProvider>
+    </DisabledProvider>
   );
 };
 
@@ -168,22 +171,6 @@ const TilePressableContent = ({
   return <View style={styles.container}>{children}</View>;
 };
 
-/**
- * A spot adapter for use within Tile. Automatically inherits the disabled state from the parent Tile.
- *
- * @example
- * <Tile>
- *   <TileSpot appearance="icon" icon={Settings} />
- * </Tile>
- */
-export const TileSpot = ({ size = 48, ...props }: TileSpotProps) => {
-  const { disabled } = useTileContext({
-    consumerName: 'TileSpot',
-    contextRequired: true,
-  });
-  return <Spot {...props} size={size} disabled={disabled} />;
-};
-
 const useContentStyles = () => {
   return useStyleSheet(
     (t) => ({
@@ -195,17 +182,18 @@ const useContentStyles = () => {
     [],
   );
 };
-TileSpot.displayName = 'TileSpot';
-
 /**
- * A container for grouping TileTitle and TileDescription with consistent spacing.
+ * A container for grouping TileTitle, TileDescription and TileTrailingContent with consistent spacing.
  * Use this to wrap text content within a Tile.
  *
  * @example
  * <Tile>
  *   <TileContent>
  *     <TileTitle>My Title</TileTitle>
- *     <TileDescription>My Description</TileDescription>
+ *     <TileDescription>Description</TileDescription>
+ *     <TileTrailingContent>
+ *       <Tag label="Active" />
+ *     </TileTrailingContent>
  *   </TileContent>
  * </Tile>
  */
@@ -250,7 +238,7 @@ const useTitleStyles = ({ disabled }: { disabled: boolean }) => {
  * If children is a string, it will be automatically wrapped in a Text component.
  */
 export const TileTitle = ({ children, lx, style }: TileTitleProps) => {
-  const { disabled } = useTileContext({
+  const disabled = useDisabledContext({
     consumerName: 'TileTitle',
     contextRequired: true,
   });
@@ -320,7 +308,7 @@ export const TileDescription = ({
   lx,
   style,
 }: TileDescriptionProps) => {
-  const { disabled } = useTileContext({
+  const disabled = useDisabledContext({
     consumerName: 'TileDescription',
     contextRequired: true,
   });

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

@@ -1,6 +1,5 @@
 export {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,

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

@@ -4,14 +4,11 @@ import {
   StyledTextProps,
   StyledViewProps,
 } from '../../../styles';
-import { DiscriminatedSpotProps, SpotSize } from '../Spot/types';
 
 export type TileContextValue = {
   disabled: boolean;
 };
 
-export type TileSpotSize = Extract<SpotSize, 40 | 48>;
-
 export type TileProps = {
   /**
    * The visual style of the tile.
@@ -47,14 +44,6 @@ export type TileProps = {
   children: ReactNode;
 } & Omit<StyledPressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
 
-export type TileSpotProps = {
-  /**
-   * The size of the spot.
-   * @default 48
-   */
-  size?: 40 | 48;
-} & DiscriminatedSpotProps;
-
 export type TileContentProps = {
   /**
    * The children to display inside the tile content area.

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

@@ -1,4 +1,7 @@
-import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
+import {
+  isTextChildren,
+  useDisabledContext,
+} from '@ledgerhq/lumen-utils-shared';
 import { FC, PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -79,11 +82,15 @@ export const TileButton = ({
   style,
   icon: IconProp,
   children,
-  disabled = false,
+  disabled: disabledProp = false,
   isFull = false,
   numberOfLines = 2,
   ...props
 }: TileButtonProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'TileButton',
+    mergeWith: { disabled: disabledProp },
+  });
   const rootStyles = useRootStyles({ isFull });
 
   return (

package/src/lib/Components/TriggerButton/TriggerButton.mdx

@@ -0,0 +1,44 @@
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TriggerButtonStories from './TriggerButton.stories';
+
+<Meta title='Action/TriggerButton' of={TriggerButtonStories} />
+
+<CustomTabs>
+  <Tab label="Overview ">
+  
+# TriggerButton
+
+## Introduction
+
+A specialized trigger button designed exclusively for select and dropdown patterns. It displays a label with an optional leading icon and a permanent trailing chevron indicator.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680&m=dev).
+
+> **Important**: This component should only be used as a trigger inside a Select or dropdown. For standalone actions, use [Button](/docs/action-button--docs) or [IconButton](/docs/action-iconbutton--docs) instead.
+
+## Properties
+
+<Canvas of={TriggerButtonStories.Base} />
+<Controls of={TriggerButtonStories.Base} />
+
+## Appearance
+
+Three appearances are available: `gray` (default), `transparent`, and `no-background`.
+
+<Canvas of={TriggerButtonStories.AppearanceShowcase} />
+
+## Sizes
+
+<Canvas of={TriggerButtonStories.SizeShowcase} />
+
+## Icon Types
+
+The `iconType` prop controls the padding scheme based on the leading icon's shape:
+
+- **`flat`**: Standard padding for interface icons (line icons without background).
+- **`rounded`**: Tighter left padding for circular icons with their own background (e.g., crypto icons).
+
+<Canvas of={TriggerButtonStories.IconTypeShowcase} />
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,132 @@
+import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Settings, Star } from '../../Symbols';
+import { Box } from '../Utility';
+import { TriggerButton } from './TriggerButton';
+
+const meta: Meta<typeof TriggerButton> = {
+  component: TriggerButton,
+  title: 'Action/TriggerButton',
+  parameters: {
+    layout: 'centered',
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TriggerButton>;
+
+export const Base: Story = {
+  args: {
+    children: 'All accounts',
+    appearance: 'gray',
+  },
+  render: (args) => <TriggerButton {...args} />,
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<TriggerButton appearance="gray">
+  All accounts
+</TriggerButton>
+`,
+      },
+    },
+  },
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+      <TriggerButton size='sm' icon={<Star size={20} />} iconType='flat'>
+        Small
+      </TriggerButton>
+      <TriggerButton size='md' icon={<Star size={20} />} iconType='flat'>
+        Medium
+      </TriggerButton>
+    </Box>
+  ),
+};
+
+export const IconTypeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+      <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+        <TriggerButton
+          icon={<Settings size={20} />}
+          iconType='flat'
+          appearance='gray'
+        >
+          Flat icon (md)
+        </TriggerButton>
+        <TriggerButton
+          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />}
+          iconType='rounded'
+          appearance='gray'
+        >
+          Rounded icon (md)
+        </TriggerButton>
+        <TriggerButton appearance='gray'>No icon (md)</TriggerButton>
+      </Box>
+      <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+        <TriggerButton
+          icon={<Settings size={20} />}
+          iconType='flat'
+          appearance='gray'
+          size='sm'
+        >
+          Flat icon (sm)
+        </TriggerButton>
+        <TriggerButton
+          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='24px' />}
+          iconType='rounded'
+          appearance='gray'
+          size='sm'
+        >
+          Rounded icon (sm)
+        </TriggerButton>
+        <TriggerButton appearance='gray' size='sm'>
+          No icon (sm)
+        </TriggerButton>
+      </Box>
+    </Box>
+  ),
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => {
+    const appearances = ['gray', 'transparent', 'no-background'] as const;
+    return (
+      <Box lx={{ flexDirection: 'column', gap: 's16', padding: 's16' }}>
+        {appearances.map((appearance) => (
+          <Box
+            key={appearance}
+            lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}
+          >
+            <TriggerButton appearance={appearance}>{appearance}</TriggerButton>
+            <TriggerButton
+              appearance={appearance}
+              icon={<Settings size={20} />}
+              iconType='flat'
+            >
+              {appearance}
+            </TriggerButton>
+            <TriggerButton
+              appearance={appearance}
+              icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />}
+              iconType='rounded'
+            >
+              {appearance}
+            </TriggerButton>
+          </Box>
+        ))}
+      </Box>
+    );
+  },
+};

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

@@ -0,0 +1,157 @@
+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, { createRef } from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import { Settings } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { TriggerButton } from './TriggerButton';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('TriggerButton', () => {
+  describe('Rendering', () => {
+    it('should render with label text and correct accessibility role', () => {
+      renderWithProvider(
+        <TriggerButton testID='trigger'>All accounts</TriggerButton>,
+      );
+      const trigger = screen.getByTestId('trigger');
+      expect(trigger).toBeTruthy();
+      expect(screen.getByText('All accounts')).toBeTruthy();
+      expect(trigger.props.accessibilityRole).toBe('button');
+    });
+
+    it('should always render a chevron icon', () => {
+      renderWithProvider(<TriggerButton testID='trigger'>Label</TriggerButton>);
+      expect(screen.getByTestId('button-trigger-chevron')).toBeTruthy();
+    });
+
+    it.each(['gray', 'transparent', 'no-background'] as const)(
+      'should render without errors for appearance "%s"',
+      (appearance) => {
+        renderWithProvider(
+          <TriggerButton testID='trigger' appearance={appearance}>
+            Label
+          </TriggerButton>,
+        );
+        expect(screen.getByTestId('trigger')).toBeTruthy();
+      },
+    );
+
+    it.each(['sm', 'md'] as const)(
+      'should render without errors for size "%s"',
+      (size) => {
+        renderWithProvider(
+          <TriggerButton testID='trigger' size={size}>
+            Label
+          </TriggerButton>,
+        );
+        expect(screen.getByTestId('trigger')).toBeTruthy();
+      },
+    );
+  });
+
+  describe('Icons', () => {
+    it('should render with a flat interface icon', () => {
+      renderWithProvider(
+        <TriggerButton
+          testID='trigger'
+          icon={<Settings size={20} testID='icon' />}
+          iconType='flat'
+        >
+          Network
+        </TriggerButton>,
+      );
+      expect(screen.getByTestId('icon')).toBeTruthy();
+      expect(screen.getByText('Network')).toBeTruthy();
+    });
+
+    it('should render with a rounded icon', () => {
+      renderWithProvider(
+        <TriggerButton
+          testID='trigger'
+          icon={<View testID='crypto-icon' />}
+          iconType='rounded'
+        >
+          Bitcoin
+        </TriggerButton>,
+      );
+      expect(screen.getByTestId('crypto-icon')).toBeTruthy();
+      expect(screen.getByText('Bitcoin')).toBeTruthy();
+    });
+  });
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      renderWithProvider(
+        <TriggerButton testID='trigger' disabled>
+          Label
+        </TriggerButton>,
+      );
+      const trigger = screen.getByTestId('trigger');
+      expect(trigger.props.accessibilityState.disabled).toBe(true);
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onPress when pressed', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <TriggerButton testID='trigger' onPress={handlePress}>
+          Press me
+        </TriggerButton>,
+      );
+
+      fireEvent.press(screen.getByTestId('trigger'));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onPress when disabled', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <TriggerButton testID='trigger' onPress={handlePress} disabled>
+          Disabled
+        </TriggerButton>,
+      );
+
+      fireEvent.press(screen.getByTestId('trigger'));
+      expect(handlePress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Ref Forwarding', () => {
+    it('should forward ref', () => {
+      const ref = createRef<View>();
+      renderWithProvider(
+        <TriggerButton ref={ref} testID='trigger'>
+          Label
+        </TriggerButton>,
+      );
+      expect(ref.current).toBeTruthy();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom style and lx props', () => {
+      const customStyle: ViewStyle = { marginTop: 16 };
+      renderWithProvider(
+        <TriggerButton
+          testID='trigger'
+          style={customStyle}
+          lx={{ padding: 's8' }}
+        >
+          Styled
+        </TriggerButton>,
+      );
+      const trigger = screen.getByTestId('trigger');
+      expect(trigger.props.style).toBeDefined();
+    });
+  });
+});