@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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,95 @@
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Text, Pressable, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } 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 useStyleSheet(
+    (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: StyleSheet.flatten([
+          {
+            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: StyleSheet.flatten([
+          t.typographies.body1SemiBold,
+          {
+            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+            minWidth: 0,
+            textAlign: 'left',
+          },
+        ]),
+        description: StyleSheet.flatten([
+          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 +100,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 +109,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 +127,9 @@ export const CardButton = React.forwardRef<
 >(
   (
     {
-      className,
-      appearance,
+      lx,
+      style,
+      appearance = 'base',
       icon,
       title,
       description,
@@ -120,53 +139,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={StyleSheet.flatten([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/BaseCheckbox.tsx

@@ -1,7 +1,12 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
 import React, { useCallback } from 'react';
-import { GestureResponderEvent, Pressable, View } from 'react-native';
+import {
+  GestureResponderEvent,
+  Pressable,
+  View,
+  StyleSheet,
+} from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import {
   ForceMountable,
   PressableRef,
@@ -9,7 +14,6 @@ import {
   SlottableViewProps,
   ViewRef,
 } from '../../types';
-import { cn } from '../../utils';
 import { SlotPressable, SlotView } from '../Slot';
 import { CheckboxProps } from './types';
 
@@ -17,50 +21,6 @@ const ROOT_COMPONENT_NAME = 'BaseCheckbox';
 const TRIGGER_COMPONENT_NAME = 'BaseCheckboxTrigger';
 const INDICATOR_COMPONENT_NAME = 'BaseCheckboxIndicator';
 
-const baseCheckboxVariants = {
-  trigger: cva(
-    [
-      'size-20 shrink-0 rounded-xs transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2',
-    ],
-    {
-      variants: {
-        checked: { true: '', false: 'border' },
-        disabled: { true: '', false: '' },
-      },
-      compoundVariants: [
-        {
-          checked: true,
-          disabled: false,
-          className:
-            'bg-active text-on-accent hover:bg-active-hover active:bg-active-pressed',
-        },
-        {
-          checked: false,
-          disabled: false,
-          className:
-            'border-muted bg-base hover:bg-base-hover active:bg-base-pressed',
-        },
-        {
-          checked: true,
-          disabled: true,
-          className: 'bg-disabled text-disabled',
-        },
-        {
-          checked: false,
-          disabled: true,
-          className: 'border-disabled bg-base',
-        },
-      ],
-      defaultVariants: {
-        checked: false,
-        disabled: false,
-      },
-    },
-  ),
-  indicator: cva(['flex size-full items-center justify-center']),
-};
-
 type BaseCheckboxRootProps = SlottablePressableProps & {
   checked?: CheckboxProps['checked'];
   onCheckedChange?: CheckboxProps['onCheckedChange'];
@@ -92,13 +52,15 @@ BaseCheckboxRoot.displayName = ROOT_COMPONENT_NAME;
 const BaseCheckboxTrigger = React.forwardRef<
   PressableRef,
   SlottablePressableProps
->(({ asChild, onPress: onPressProp, className, ...props }, ref) => {
+>(({ asChild, onPress: onPressProp, ...props }, ref) => {
   const { disabled, checked, onCheckedChange, nativeID } =
     useBaseCheckboxContext({
       consumerName: TRIGGER_COMPONENT_NAME,
       contextRequired: true,
     });
 
+  const styles = useStyles({ checked: !!checked, disabled: !!disabled });
+
   const onPress = useCallback(
     (ev: GestureResponderEvent) => {
       if (disabled) return;
@@ -118,10 +80,7 @@ const BaseCheckboxTrigger = React.forwardRef<
       role='checkbox'
       aria-checked={checked}
       onPress={onPress}
-      className={cn(
-        baseCheckboxVariants.trigger({ checked, disabled }),
-        className,
-      )}
+      style={styles.trigger}
       accessibilityState={{
         checked,
         disabled,
@@ -137,12 +96,14 @@ type BaseCheckboxIndicatorProps = ForceMountable & SlottableViewProps;
 const BaseCheckboxIndicator = React.forwardRef<
   ViewRef,
   BaseCheckboxIndicatorProps
->(({ asChild, forceMount, className, ...props }, ref) => {
+>(({ asChild, forceMount, ...props }, ref) => {
   const { checked, disabled } = useBaseCheckboxContext({
     consumerName: INDICATOR_COMPONENT_NAME,
     contextRequired: true,
   });
 
+  const styles = useStyles({ checked: !!checked, disabled: !!disabled });
+
   if (!forceMount) {
     if (!checked) {
       return null;
@@ -154,7 +115,7 @@ const BaseCheckboxIndicator = React.forwardRef<
   return (
     <Component
       ref={ref}
-      className={baseCheckboxVariants.indicator({ className })}
+      style={styles.indicator}
       aria-disabled={disabled}
       aria-hidden={!(forceMount || checked)}
       role={'presentation'}
@@ -162,6 +123,61 @@ const BaseCheckboxIndicator = React.forwardRef<
     />
   );
 });
+
+const useStyles = ({
+  checked,
+  disabled,
+}: {
+  checked: boolean;
+  disabled: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      return {
+        trigger: StyleSheet.flatten([
+          {
+            width: t.sizes.s20,
+            height: t.sizes.s20,
+            flexShrink: 0,
+            borderRadius: t.borderRadius.xs,
+          },
+          !checked && {
+            borderWidth: t.borderWidth.s1,
+          },
+          checked &&
+            !disabled && {
+              backgroundColor: t.colors.bg.active,
+              color: t.colors.text.onAccent,
+            },
+          !checked &&
+            !disabled && {
+              borderColor: t.colors.border.muted,
+              backgroundColor: t.colors.bg.base,
+            },
+          checked &&
+            disabled && {
+              backgroundColor: t.colors.bg.disabled,
+              color: t.colors.text.disabled,
+            },
+          !checked &&
+            disabled && {
+              borderColor: t.colors.border.disabled,
+              backgroundColor: t.colors.bg.base,
+            },
+        ]),
+        indicator: {
+          flex: 1,
+          width: t.sizes.full,
+          height: t.sizes.full,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      };
+    },
+    [checked, disabled],
+  );
+};
+
 BaseCheckboxIndicator.displayName = INDICATOR_COMPONENT_NAME;
 
 export { BaseCheckboxIndicator, BaseCheckboxRoot, type BaseCheckboxRootProps };