@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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

@@ -1,96 +1,97 @@
 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 { Switch } from './Switch';
 
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
 describe('Switch', () => {
   it('uncontrolled: toggles on press and reflects checked state', async () => {
-    const { getByTestId } = render(
-      <Switch defaultChecked={false} testID='switch' />,
+    const { getByRole } = render(
+      <TestWrapper>
+        <Switch defaultChecked={false} />
+      </TestWrapper>,
     );
 
-    expect(getByTestId('switch').props.accessibilityState?.checked).toBe(false);
+    const trigger = getByRole('switch');
+    expect(trigger.props.accessibilityState?.checked).toBe(false);
 
-    fireEvent.press(getByTestId('switch'));
+    fireEvent.press(trigger);
 
     await waitFor(() =>
-      expect(getByTestId('switch').props.accessibilityState?.checked).toBe(
-        true,
-      ),
+      expect(trigger.props.accessibilityState?.checked).toBe(true),
     );
   });
 
   it('controlled: calls onCheckedChange but state is controlled by parent', async () => {
     const onChange = jest.fn();
-    const { getByTestId, rerender } = render(
-      <Switch checked={false} onCheckedChange={onChange} testID='switch' />,
+    const { getByRole, rerender } = render(
+      <TestWrapper>
+        <Switch checked={false} onCheckedChange={onChange} />
+      </TestWrapper>,
     );
 
-    expect(getByTestId('switch').props.accessibilityState?.checked).toBe(false);
+    const trigger = getByRole('switch');
+    expect(trigger.props.accessibilityState?.checked).toBe(false);
 
-    fireEvent.press(getByTestId('switch'));
+    fireEvent.press(trigger);
 
     await waitFor(() => expect(onChange).toHaveBeenCalledWith(true));
     await waitFor(() =>
-      expect(getByTestId('switch').props.accessibilityState?.checked).toBe(
-        false,
-      ),
+      expect(trigger.props.accessibilityState?.checked).toBe(false),
     );
 
     rerender(
-      <Switch checked={true} onCheckedChange={onChange} testID='switch' />,
+      <TestWrapper>
+        <Switch checked={true} onCheckedChange={onChange} />
+      </TestWrapper>,
     );
 
     await waitFor(() =>
-      expect(getByTestId('switch').props.accessibilityState?.checked).toBe(
-        true,
-      ),
+      expect(getByRole('switch').props.accessibilityState?.checked).toBe(true),
     );
   });
 
   it('disabled: does not toggle on press', async () => {
     const onChange = jest.fn();
-    const { getByTestId } = render(
-      <Switch
-        disabled
-        defaultChecked={false}
-        onCheckedChange={onChange}
-        testID='switch'
-      />,
+    const { getByRole } = render(
+      <TestWrapper>
+        <Switch disabled defaultChecked={false} onCheckedChange={onChange} />
+      </TestWrapper>,
     );
 
-    const trigger = getByTestId('switch');
+    const trigger = getByRole('switch');
     expect(trigger.props.accessibilityState?.disabled).toBe(true);
 
     fireEvent.press(trigger);
 
     await waitFor(() => expect(onChange).not.toHaveBeenCalled());
     await waitFor(() =>
-      expect(getByTestId('switch').props.accessibilityState?.checked).toBe(
-        false,
-      ),
+      expect(trigger.props.accessibilityState?.checked).toBe(false),
     );
   });
 
-  it('supports aria-valuetext on/off through checked state or custom value if defined', () => {
+  it('passes aria-valuetext to container', () => {
     const { getByTestId, rerender } = render(
-      <Switch checked={false} testID='switch' />,
-    );
-    expect(getByTestId('switch').props['aria-valuetext']).toBe('off');
-
-    rerender(
-      <Switch checked={true} onCheckedChange={jest.fn()} testID='switch' />,
+      <TestWrapper>
+        <Switch aria-valuetext='custom' testID='switch' />
+      </TestWrapper>,
     );
-    expect(getByTestId('switch').props['aria-valuetext']).toBe('on');
 
-    rerender(<Switch testID='switch' aria-valuetext='custom' />);
     expect(getByTestId('switch').props['aria-valuetext']).toBe('custom');
-  });
 
-  it('supports custom aria-valuetext value', () => {
-    const { getByTestId } = render(
-      <Switch testID='switch' aria-valuetext='custom' />,
+    rerender(
+      <TestWrapper>
+        <Switch aria-valuetext='another value' testID='switch' />
+      </TestWrapper>,
     );
 
-    expect(getByTestId('switch').props['aria-valuetext']).toBe('custom');
+    expect(getByTestId('switch').props['aria-valuetext']).toBe('another value');
   });
 });

package/src/lib/Components/Switch/Switch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { useControllableState } from '../../utils';
+import { Pressable } from '../Utility';
 import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
 
 import { SwitchProps } from './types';
@@ -12,11 +13,11 @@ import { SwitchProps } from './types';
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-switch--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-switch--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 switch's core appearance.
  *
  * @example
- * import { Switch } from '@ledgerhq/lumen-ui-react';
+ * import { Switch } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic controlled switch
  * const [checked, setChecked] = useState(false);
@@ -29,16 +30,18 @@ import { SwitchProps } from './types';
  * <Switch defaultChecked={true} onCheckedChange={handleChange} />
  */
 export const Switch = React.forwardRef<
-  React.ElementRef<typeof BaseSwitchRoot>,
+  React.ElementRef<typeof Pressable>,
   SwitchProps
 >(
   (
     {
-      className,
+      lx,
+      style,
       checked: checkedProp,
       onCheckedChange: onCheckedChangeProp,
       defaultChecked = false,
       disabled,
+      size = 'md',
       ...props
     },
     ref,
@@ -50,15 +53,16 @@ export const Switch = React.forwardRef<
     });
 
     return (
-      <BaseSwitchRoot
-        ref={ref}
-        disabled={disabled}
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        {...props}
-      >
-        <BaseSwitchThumb />
-      </BaseSwitchRoot>
+      <Pressable ref={ref} lx={lx} style={style} {...props}>
+        <BaseSwitchRoot
+          disabled={disabled}
+          checked={checked}
+          onCheckedChange={onCheckedChange}
+          size={size}
+        >
+          <BaseSwitchThumb />
+        </BaseSwitchRoot>
+      </Pressable>
     );
   },
 );

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

@@ -1,4 +1,4 @@
-import { SlottablePressableProps } from '../../types';
+import { StyledPressableProps } from '../../../styles';
 
 export type SwitchProps = {
   /**
@@ -25,4 +25,4 @@ export type SwitchProps = {
    * @default false
    */
   defaultChecked?: boolean;
-} & SlottablePressableProps;
+} & Omit<StyledPressableProps, 'children'>;

package/src/lib/Components/Tag/Tag.mdx

@@ -2,7 +2,8 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TagStories from './Tag.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility/Box';
 
 <Meta title='Components/Tag' of={TagStories} />
 
@@ -22,12 +23,12 @@ View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Component
 
 ### Overview
 
-<Canvas of={TagStories.Default} />
-<Controls of={TagStories.Default} />
+<Canvas of={TagStories.Base} />
+<Controls of={TagStories.Base} />
 
 ### Appearance
 
-<Canvas of={TagStories.Showcase} />
+<Canvas of={TagStories.AppearanceShowcase} />
 
 ---
 
@@ -35,16 +36,16 @@ View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Component
 
 Tags come in two different sizes:
 
-- **lg** (default)
+- **md** (default)
 - **sm**
 
-<Canvas of={TagStories.SizesShowcase} />
+<Canvas of={TagStories.SizeShowcase} />
 
 ### Icon
 
 Tags can be displayed with or without an icon.
 
-<Canvas of={TagStories.ContentTypesShowcase} />
+<Canvas of={TagStories.ContentTypeShowcase} />
 
 ### Accessibility
 
@@ -69,20 +70,20 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 import { Tag } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
-  return <Tag size='lg' appearance='accent' label='My Tag' />;
+  return <Tag size="md" appearance="accent" label="My Tag" />;
 }
 ```
 
 ### Custom Styling
 
-While the component comes with predefined styles, you can extend them using NativeWind classes:
+While the component comes with predefined styles, you can extend them using the `lx` prop for layout adjustments:
 
 ```tsx
 <Tag
-  size='lg'
-  appearance='accent'
-  label='Custom Tag'
-  className='mt-4' // Custom margin
+  size="md"
+  appearance="accent"
+  label="Custom Tag"
+  lx={{ marginTop: 's4' }}
 />
 ```
 
@@ -95,24 +96,25 @@ import { Tag } from '@ledgerhq/lumen-ui-rnative';
 import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 function MyComponent() {
-  return <Tag size='lg' appearance='success' icon={Check} label='Success' />;
+  return <Tag size="md" appearance="success" icon={Check} label="Success" />;
 }
 ```
 
+
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use standard size variants'
-      description='Use the size prop with predefined variants (xs, sm, md, lg)'
+      description='Use the size prop with predefined variants (sm, md)'
     >
 
 {/* prettier-ignore */}
 ```tsx
 import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<Tag size='sm' icon={Check} label='Success' />
+<Tag size="sm" icon={Check} label="Success" />
 ```
 
     </DoBlockItem>
@@ -125,12 +127,11 @@ import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```tsx
 import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
 
-<Tag style={{ height: 52 }} icon={Check} label='Success' />
+<Tag style={{ height: 52 }} icon={Check} label="Success" />
 ```
 
     </DontBlockItem>
-
-  </DoVsDontRow>
+</DoVsDontRow>
 
   <DoVsDontRow>
     <DoBlockItem
@@ -141,9 +142,9 @@ import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
 {/* prettier-ignore */}
 ```tsx
 <Tag
-  label='Important'
+  label="Important"
   accessible={true}
-  accessibilityRole='text'
+  accessibilityRole="text"
 />
 ```
 
@@ -156,7 +157,7 @@ import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
 {/* prettier-ignore */}
 ```tsx
 <Tag
-  label='Important'
+  label="Important"
 />
 ```
 
@@ -165,7 +166,7 @@ import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { View } from 'react-native';
 import { Check } from '../../Symbols/Icons/Check';
+import { Box } from '../Utility/Box';
 import { Tag } from './Tag';
 
 const meta: Meta<typeof Tag> = {
@@ -13,7 +13,7 @@ const meta: Meta<typeof Tag> = {
     },
     size: {
       control: 'radio',
-      options: ['sm', 'lg'],
+      options: ['sm', 'md'],
     },
     label: {
       control: 'text',
@@ -31,19 +31,19 @@ export default meta;
 
 type Story = StoryObj<typeof Tag>;
 
-export const Default: Story = {
+export const Base: Story = {
   args: {
     label: 'Label',
     appearance: 'accent',
-    size: 'lg',
+    size: 'md',
   },
   render: (args) => <Tag {...args} icon={args.icon ? Check : undefined} />,
 };
 
-export const Showcase: Story = {
+export const AppearanceShowcase: Story = {
   render: () => (
-    <View className='flex flex-col gap-16'>
-      <View className='flex flex-row gap-4'>
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+      <Box lx={{ flexDirection: 'row', gap: 's4' }}>
         <Tag appearance='base' label='Base' />
         <Tag appearance='gray' label='Gray' />
         <Tag appearance='accent' label='Accent' />
@@ -51,8 +51,8 @@ export const Showcase: Story = {
         <Tag appearance='error' label='Error' />
         <Tag appearance='warning' label='Warning' />
         <Tag label='Disabled' disabled />
-      </View>
-      <View className='flex flex-row gap-4'>
+      </Box>
+      <Box lx={{ flexDirection: 'row', gap: 's4' }}>
         <Tag appearance='base' label='Base' icon={Check} />
         <Tag appearance='gray' label='Gray' icon={Check} />
         <Tag appearance='accent' label='Accent' icon={Check} />
@@ -60,25 +60,25 @@ export const Showcase: Story = {
         <Tag appearance='error' label='Error' icon={Check} />
         <Tag appearance='warning' label='Warning' icon={Check} />
         <Tag label='Disabled' icon={Check} disabled />
-      </View>
-    </View>
+      </Box>
+    </Box>
   ),
 };
 
-export const SizesShowcase: Story = {
+export const SizeShowcase: Story = {
   render: () => (
-    <View className='flex flex-row items-center gap-4'>
-      <Tag size='lg' label='Large Tag' />
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
+      <Tag size='md' label='Large Tag' />
       <Tag size='sm' label='Small Tag' />
-    </View>
+    </Box>
   ),
 };
 
-export const ContentTypesShowcase: Story = {
+export const ContentTypeShowcase: Story = {
   render: () => (
-    <View className='flex flex-row items-center gap-4'>
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
       <Tag label='Label only' />
       <Tag icon={Check} label='Icon and Label' />
-    </View>
+    </Box>
   ),
 };