@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

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

@@ -0,0 +1,141 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+import { Settings, Plus } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { CardButton } from './CardButton';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('CardButton Component', () => {
+  describe('Rendering', () => {
+    it('should render with required props', () => {
+      renderWithProvider(
+        <CardButton testID='card-button' title='Test Card Button' />,
+      );
+      expect(screen.getByTestId('card-button')).toBeTruthy();
+    });
+
+    it('should render the title', () => {
+      renderWithProvider(<CardButton title='Test Title' />);
+      expect(screen.getByText('Test Title')).toBeTruthy();
+    });
+
+    it('should render description when provided', () => {
+      renderWithProvider(
+        <CardButton title='Test Title' description='Test Description' />,
+      );
+      expect(screen.getByText('Test Description')).toBeTruthy();
+    });
+
+    it('should have correct accessibility role', () => {
+      renderWithProvider(
+        <CardButton testID='card-button' title='Test Card Button' />,
+      );
+      const button = screen.getByTestId('card-button');
+      expect(button.props.accessibilityRole).toBe('button');
+    });
+  });
+
+  describe('Appearances', () => {
+    it.each(['base', 'outline'] as const)(
+      'should render with %s appearance',
+      (appearance) => {
+        renderWithProvider(
+          <CardButton
+            testID='card-button'
+            title='Test Card Button'
+            appearance={appearance}
+          />,
+        );
+        expect(screen.getByTestId('card-button')).toBeTruthy();
+      },
+    );
+  });
+
+  describe('Icon', () => {
+    it('should render with icon when provided', () => {
+      renderWithProvider(
+        <CardButton testID='card-button' title='Settings' icon={Settings} />,
+      );
+      expect(screen.getByTestId('card-button')).toBeTruthy();
+    });
+
+    it('should render different icons', () => {
+      renderWithProvider(
+        <CardButton testID='card-button' title='Add' icon={Plus} />,
+      );
+      expect(screen.getByTestId('card-button')).toBeTruthy();
+    });
+  });
+
+  describe('Chevron', () => {
+    it('should render chevron by default', () => {
+      renderWithProvider(
+        <CardButton testID='card-button' title='Test Card Button' />,
+      );
+      // The chevron is rendered inside card-button-content
+      expect(screen.getByTestId('card-button-content')).toBeTruthy();
+    });
+
+    it('should hide chevron when hideChevron is true', () => {
+      renderWithProvider(
+        <CardButton
+          testID='card-button'
+          title='Test Card Button'
+          hideChevron
+        />,
+      );
+      expect(screen.getByTestId('card-button')).toBeTruthy();
+    });
+  });
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      renderWithProvider(
+        <CardButton testID='card-button' title='Test Card Button' disabled />,
+      );
+      const button = screen.getByTestId('card-button');
+      expect(button.props.accessibilityState.disabled).toBe(true);
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onPress when pressed', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <CardButton
+          testID='card-button'
+          title='Test Card Button'
+          onPress={handlePress}
+        />,
+      );
+
+      fireEvent.press(screen.getByTestId('card-button'));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onPress when disabled', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <CardButton
+          testID='card-button'
+          title='Test Card Button'
+          onPress={handlePress}
+          disabled
+        />,
+      );
+
+      fireEvent.press(screen.getByTestId('card-button'));
+      expect(handlePress).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/Components/CardButton/CardButton.tsx

@@ -1,78 +1,89 @@
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Text, Pressable, View } from 'react-native';
+import { Text, View } from 'react-native';
+import { LumenStyleSheet, mergeStyles } from '../../../styles';
 import { ChevronRight } from '../../Symbols';
-import { cn } from '../../utils';
+import { Pressable } from '../Utility';
 
-import { CardButtonProps } from './CardButton.types';
+import { CardButtonProps } from './types';
 
-const cardButtonVariants = {
-  root: cva(
-    'inline-flex h-fit w-full flex-row items-center gap-12 rounded-sm p-12 transition-colors',
-    {
-      variants: {
-        appearance: {
-          base: '',
-          outline: 'outline-dashed outline-1',
-        },
-        disabled: {
-          true: 'text-disabled',
-          false: 'text-base',
-        },
-      },
-      compoundVariants: [
-        {
-          appearance: 'base',
-          disabled: true,
-          className: 'bg-disabled',
-        },
-        {
-          appearance: 'base',
-          disabled: false,
-          className: 'bg-muted active:bg-muted-pressed',
-        },
-        {
-          appearance: 'outline',
-          disabled: true,
-          className: 'bg-base-transparent outline-disabled',
+type Appearance = NonNullable<CardButtonProps['appearance']>;
+
+const useStyles = ({
+  appearance,
+  disabled,
+  pressed,
+}: {
+  appearance: Appearance;
+  disabled: boolean;
+  pressed: boolean;
+}) => {
+  return LumenStyleSheet.useCreate(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        base: t.colors.bg.muted,
+        outline: 'transparent',
+      };
+
+      const pressedBgColors: Record<Appearance, string> = {
+        base: t.colors.bg.mutedPressed,
+        outline: t.colors.bg.baseTransparentPressed,
+      };
+
+      return {
+        container: mergeStyles(
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: t.sizes.full,
+            gap: t.spacings.s12,
+            padding: t.spacings.s12,
+            borderRadius: t.borderRadius.sm,
+            backgroundColor: bgColors[appearance],
+          },
+          appearance === 'outline' && {
+            borderStyle: 'dashed',
+            borderWidth: t.borderWidth.s1,
+            borderColor: t.colors.border.mutedSubtle,
+          },
+          pressed && {
+            backgroundColor: pressedBgColors[appearance],
+          },
+          pressed &&
+            appearance === 'outline' && {
+              borderColor: t.colors.border.mutedSubtlePressed,
+            },
+          disabled && {
+            backgroundColor:
+              appearance === 'outline' ? 'transparent' : t.colors.bg.disabled,
+          },
+          disabled &&
+            appearance === 'outline' && {
+              borderColor: t.colors.border.disabled,
+            },
+        ),
+        contentWrapper: {
+          flex: 1,
+          minWidth: 0,
+          flexDirection: 'column',
+          gap: t.spacings.s4,
         },
-        {
-          appearance: 'outline',
-          disabled: false,
-          className:
-            'bg-base-transparent outline-muted-subtle active:bg-base-transparent-pressed active:outline-muted-subtle-pressed',
+        title: mergeStyles(t.typographies.body1SemiBold, {
+          color: disabled ? t.colors.text.disabled : t.colors.text.base,
+          minWidth: 0,
+          textAlign: 'left',
+        }),
+        description: mergeStyles(t.typographies.body2, {
+          color: disabled ? t.colors.text.disabled : t.colors.text.base,
+          minWidth: 0,
+        }),
+        icon: {
+          flexShrink: 0,
+          color: disabled ? t.colors.text.disabled : t.colors.text.base,
         },
-      ],
-      defaultVariants: {
-        appearance: 'base',
-        disabled: false,
-      },
+      };
     },
-  ),
-  title: cva('min-w-0 body-1-semi-bold', {
-    variants: {
-      disabled: {
-        true: 'text-disabled',
-        false: 'text-base',
-      },
-    },
-  }),
-  description: cva('min-w-0 body-2', {
-    variants: {
-      disabled: {
-        true: 'text-disabled',
-        false: 'text-base',
-      },
-    },
-  }),
-  icon: cva('shrink-0', {
-    variants: {
-      disabled: {
-        true: 'text-disabled',
-        false: 'text-base',
-      },
-    },
-  }),
+    [appearance, disabled, pressed],
+  );
 };
 
 /**
@@ -83,7 +94,7 @@ const cardButtonVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-cardbutton--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-cardbutton--docs#dos-and-donts Guidelines}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the card button's core appearance (colors, padding, etc). Use the `appearance` prop instead.
  *
  * @example
@@ -92,6 +103,7 @@ const cardButtonVariants = {
  *
  * <CardButton title="Click Me" onPress={() => console.log('Clicked!')} />
  *
+ * @example
  * // Card button with icon and description
  * import { CardButton } from '@ledgerhq/lumen-ui-rnative';
  * import { Info } from '@ledgerhq/lumen-ui-rnative/symbols';
@@ -109,8 +121,9 @@ export const CardButton = React.forwardRef<
 >(
   (
     {
-      className,
-      appearance,
+      lx,
+      style,
+      appearance = 'base',
       icon,
       title,
       description,
@@ -120,53 +133,74 @@ export const CardButton = React.forwardRef<
     },
     ref,
   ) => {
-    const IconComponent = icon;
-
     return (
       <Pressable
         ref={ref}
-        className={cn(
-          className,
-          cardButtonVariants.root({
-            appearance,
-            disabled,
-          }),
-        )}
-        disabled={disabled ?? false}
+        lx={lx}
+        style={[style, { flex: 1 }]}
+        disabled={disabled}
+        accessibilityRole='button'
+        accessibilityState={{ disabled }}
         {...props}
       >
-        {IconComponent && (
-          <IconComponent
-            size={24}
-            className={cardButtonVariants.icon({ disabled })}
+        {({ pressed }) => (
+          <CardButtonContent
+            appearance={appearance}
+            disabled={disabled}
+            pressed={pressed}
+            icon={icon}
+            title={title}
+            description={description}
+            hideChevron={hideChevron}
           />
         )}
-        <View className='flex min-w-0 flex-1 flex-col gap-4 text-left body-1-semi-bold'>
+      </Pressable>
+    );
+  },
+);
+
+type CardButtonContentProps = {
+  appearance: Appearance;
+  disabled: boolean;
+  pressed: boolean;
+  icon: CardButtonProps['icon'];
+  title: string;
+  description?: string;
+  hideChevron?: boolean;
+};
+
+const CardButtonContent: React.FC<CardButtonContentProps> = ({
+  appearance,
+  disabled,
+  pressed,
+  icon,
+  title,
+  description,
+  hideChevron,
+}) => {
+  const IconComponent = icon;
+  const styles = useStyles({ appearance, disabled, pressed });
+
+  return (
+    <View style={styles.container} testID='card-button-content'>
+      {IconComponent && <IconComponent size={24} style={styles.icon} />}
+      <View style={styles.contentWrapper}>
+        <Text style={styles.title} numberOfLines={1} ellipsizeMode='tail'>
+          {title}
+        </Text>
+        {description && (
           <Text
-            className={cardButtonVariants.title({ disabled })}
-            numberOfLines={1}
+            style={styles.description}
+            numberOfLines={2}
             ellipsizeMode='tail'
           >
-            {title}
+            {description}
           </Text>
-          {description && (
-            <Text
-              className={cardButtonVariants.description({ disabled })}
-              numberOfLines={2}
-              ellipsizeMode='tail'
-            >
-              {description}
-            </Text>
-          )}
-        </View>
-        {!hideChevron && (
-          <ChevronRight
-            size={24}
-            className={cardButtonVariants.icon({ disabled })}
-          />
         )}
-      </Pressable>
-    );
-  },
-);
+      </View>
+      {!hideChevron && <ChevronRight size={24} style={styles.icon} />}
+    </View>
+  );
+};
+
 CardButton.displayName = 'CardButton';

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

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

package/src/lib/Components/CardButton/{CardButton.types.ts → types.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
-import { PressableProps } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 import { IconSize } from '../Icon';
 
 export type CardButtonProps = {
@@ -14,7 +15,7 @@ export type CardButtonProps = {
   /**
    * An optional icon component to render on the left side.
    */
-  icon?: React.ComponentType<{ size?: IconSize; className?: string }>;
+  icon?: React.ComponentType<{ size?: IconSize; style?: StyleProp<ViewStyle> }>;
   /**
    * The main title of the card button.
    */
@@ -27,4 +28,4 @@ export type CardButtonProps = {
    * If true, hides the chevron arrow on the right side.
    */
   hideChevron?: boolean;
-} & Omit<PressableProps, 'disabled'>;
+} & Omit<StyledPressableProps, 'disabled'>;

package/src/lib/Components/Checkbox/Checkbox.mdx

@@ -119,7 +119,7 @@ Use `defaultChecked` for simple cases:
 </div>
 
 // ✅ ARIA label for standalone checkbox
-<Checkbox aria-label="Select all items" />
+<Checkbox accessibilityLabel="Select all items" />
 
 // ✅ ARIA described by for complex descriptions
 <div>

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

@@ -1,11 +1,22 @@
 import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import React from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Checkbox } from './Checkbox';
 
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
 describe('Checkbox', () => {
   it('uncontrolled: toggles on press and reflects checked state', async () => {
     const { getByTestId } = render(
-      <Checkbox defaultChecked={false} testID='checkbox' />,
+      <TestWrapper>
+        <Checkbox defaultChecked={false} testID='checkbox' />
+      </TestWrapper>,
     );
 
     expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
@@ -24,7 +35,13 @@ describe('Checkbox', () => {
   it('controlled: calls onCheckedChange but state is controlled by parent', async () => {
     const onChange = jest.fn();
     const { getByTestId, rerender } = render(
-      <Checkbox checked={false} onCheckedChange={onChange} testID='checkbox' />,
+      <TestWrapper>
+        <Checkbox
+          checked={false}
+          onCheckedChange={onChange}
+          testID='checkbox'
+        />
+      </TestWrapper>,
     );
 
     expect(getByTestId('checkbox').props.accessibilityState?.checked).toBe(
@@ -41,7 +58,9 @@ describe('Checkbox', () => {
     );
 
     rerender(
-      <Checkbox checked={true} onCheckedChange={onChange} testID='checkbox' />,
+      <TestWrapper>
+        <Checkbox checked={true} onCheckedChange={onChange} testID='checkbox' />
+      </TestWrapper>,
     );
 
     await waitFor(() =>
@@ -54,12 +73,14 @@ describe('Checkbox', () => {
   it('label: renders and toggles when pressed', async () => {
     const onChange = jest.fn();
     const { getByText, getByTestId } = render(
-      <Checkbox
-        defaultChecked={false}
-        label='Accept'
-        onCheckedChange={onChange}
-        testID='checkbox'
-      />,
+      <TestWrapper>
+        <Checkbox
+          defaultChecked={false}
+          label='Accept'
+          onCheckedChange={onChange}
+          testID='checkbox'
+        />
+      </TestWrapper>,
     );
 
     fireEvent.press(getByText('Accept'));
@@ -75,13 +96,15 @@ describe('Checkbox', () => {
   it('disabled: does not toggle on trigger or label press', async () => {
     const onChange = jest.fn();
     const { getByText, getByTestId } = render(
-      <Checkbox
-        disabled
-        defaultChecked={false}
-        label='Terms'
-        onCheckedChange={onChange}
-        testID='checkbox'
-      />,
+      <TestWrapper>
+        <Checkbox
+          disabled
+          defaultChecked={false}
+          label='Terms'
+          onCheckedChange={onChange}
+          testID='checkbox'
+        />
+      </TestWrapper>,
     );
 
     const trigger = getByTestId('checkbox');
@@ -95,7 +118,9 @@ describe('Checkbox', () => {
 
   it('passes through nativeID to trigger for a11y mapping', () => {
     const { getByTestId } = render(
-      <Checkbox defaultChecked={false} nativeID='check-1' testID='checkbox' />,
+      <TestWrapper>
+        <Checkbox defaultChecked={false} nativeID='check-1' testID='checkbox' />
+      </TestWrapper>,
     );
 
     expect(getByTestId('checkbox').props.nativeID).toBe('check-1');