@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

package/src/lib/Components/Button/Button.mdx

@@ -1,17 +1,14 @@
-import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Controls, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonStories from './Button.stories';
 import { Button } from './Button';
-import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
-import { Box } from '../Utility';
+import { CustomTabs, Tab, SetupNote } from '../../../../.storybook/components';
 
 <Meta title='Core/Button' of={ButtonStories} />
 
 # Button
 
 <CustomTabs>
-  <Tab label="Overview ">
+  <Tab label="Overview">
 
 ## Introduction
 
@@ -23,9 +20,11 @@ Buttons are key interactive elements that trigger actions and guide users throug
 
 <Canvas of={ButtonStories.IconText} />
 
-- **Label**: describes the action that occurs when the button is tapped
+- **Label(required)**: must be present and describe the action that occurs when the button is tapped
 - **Icon (optional)**: visually communicate the button's action, and helps draw attention
 
+> Note: For **icon-only buttons**, use the [IconButton](https://ldls-react-native.vercel.app/?path=/docs/rnative-iconbutton--docs) component instead. It's specifically designed for icon-only interactions with proper accessibility support.
+
 ## Properties
 
 ### Overview
@@ -53,8 +52,6 @@ Buttons' contents can be of two types:
 - text (default)
 - icon-text
 
-> Note: For `icon-only` buttons, use the [IconButton](https://ldls-react-native.vercel.app/?path=/docs/rnative-iconbutton--docs) component instead. It's specifically designed for icon-only interactions with proper accessibility support.
-
 <Canvas of={ButtonStories.ContentTypesShowcase} />
 
 ### Size
@@ -69,11 +66,12 @@ Buttons come in four different sizes:
 
 <Canvas of={ButtonStories.SizesShowcase} />
 
-
 ### States
 
 <Canvas of={ButtonStories.StatesShowcase} />
 
+> **Important Note:** The `loading` and `disabled` states are **not coupled**. When `disabled` is set, all event handlers are deactivated. When only `loading` is set (without `disabled`), the button remains pressable. Combine both props if you need to prevent interactions during loading.
+
 ## Responsive Layout
 
 Buttons dynamically adapt their width to the size of their content, while keeping the default paddings:
@@ -86,84 +84,23 @@ When a label is too long, it's truncated to 2 lines, with a maximum width of the
 
 > The Button must dynamically resize to its container constraints.
 
-## Accessibility
-
-To be implemented:
-
-- Color contrast
-- Text zoom
-- Touch target sizing (minimum 44px)
-- Screen reader compatibility
-- Semantic labeling
-
-### Interactive States
+## Interactive States
 
 <Canvas of={ButtonStories.InteractiveLoadingStates} />
 
-</Tab> <Tab label="Implementation ">
-
-## Setup
+</Tab> <Tab label="Implementation">
 
-Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+<SetupNote />
 
 ### Basic Usage
 
-```tsx
-import { Button } from '@ledgerhq/lumen-ui-rnative';
-
-function MyComponent() {
-  return (
-    <Button size='md' appearance='base' onPress={() => console.log('Pressed!')}>
-      Click me
-    </Button>
-  );
-}
-```
-
-### Custom Styling
-
-While the component comes with predefined styles, you can extend them using the `lx` prop for token-based styling:
-
-```tsx
-<Button
-  size='md'
-  appearance='base'
-  lx={{ marginTop: 's4' }} // Custom margin top using design tokens
-  onPress={() => {}}
->
-  Custom Button
-</Button>
-```
-
-You can also use the `style` prop for escape-hatch styling when needed:
-
-```tsx
-<Button
-  size='md'
-  appearance='base'
-  style={{ marginTop: 16 }} // Raw style values
-  onPress={() => {}}
->
-  Custom Button
-</Button>
-```
+<Source of={ButtonStories.Base} />
 
 ### With Icons
 
-The Button component supports icons with automatic size adjustment based on the button size:
+The Button supports icons with automatic size adjustment based on the button size.
 
-```tsx
-import { Button } from '@ledgerhq/lumen-ui-rnative';
-import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-function MyComponent() {
-  return (
-    <Button size='md' appearance='base' icon={ArrowRight} onPress={() => {}}>
-      Continue
-    </Button>
-  );
-}
-```
+<Source of={ButtonStories.IconText} />
 
 ### Full Width
 
@@ -175,173 +112,37 @@ Use the `isFull` prop to make the button take the full width of its container:
 </Button>
 ```
 
-### Loading State
+### States
+
+Use the `loading` and `disabled` props to reflect state. `loading` shows a spinner; combine it with `disabled` to block interaction while loading.
+
+<Source of={ButtonStories.StatesShowcase} />
 
-Use the `loading` prop to show a spinner and disable interaction:
+### Custom Styling
+
+Extend layout with the token-based `lx` prop, or the `style` prop as an escape hatch:
 
 ```tsx
-<Button
-  size='md'
-  appearance='base'
-  loading={isLoading}
-  disabled={isLoading}
-  onPress={() => {}}
->
-  {isLoading ? 'Loading...' : 'Submit'}
+<Button size='md' appearance='base' lx={{ marginTop: 's4' }} onPress={() => {}}>
+  Custom Button
 </Button>
 ```
 
 ### Pressable Integration
 
-The Button component is built on React Native's `Pressable` and accepts all its props:
+The Button is built on React Native's `Pressable` and accepts all its props:
 
 ```tsx
 <Button
-  size='md'
   appearance='base'
   onPress={() => console.log('Pressed!')}
   onPressIn={() => console.log('Press started')}
   onPressOut={() => console.log('Press ended')}
-  disabled={false}
 >
   Interactive Button
 </Button>
 ```
 
-## Do's and Don'ts
-
-The following guidelines are based on our [Button Component API Design ADR](https://ledgerhq.atlassian.net/wiki/spaces/DLS/pages/6003949581/ADR-001+Button+Component+API+Design). These decisions were made to ensure consistency, maintainability, and proper implementation of our design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-  <DoBlockItem
-    title='Use icon prop'
-    description='Pass icon as a component reference for proper sizing and alignment'
-  >
-
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Button icon={Plus} onPress={() => {}}>
-  Add Item
-</Button>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't include icon in children"
-      description='Avoid placing icons inside children as this breaks automatic sizing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Button onPress={() => {}}>
-  <Plus /> Add Item
-</Button>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Let Button handle icon sizing'
-      description='Icon size adjusts automatically based on button size'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Button icon={Settings} size='sm' onPress={() => {}}>
-  Settings
-</Button>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't modify icon size directly"
-      description='Avoid overriding icon dimensions in children'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Button size='sm' onPress={() => {}}>
-  <Settings size={24} /> Settings
-</Button>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use isFull for width'
-      description='Use the isFull prop for full-width buttons'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Button isFull onPress={() => {}}>
-  Full Width
-</Button>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use style for full width"
-      description='Avoid using style to control button width'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Button style={{ width: '100%' }} onPress={() => {}}>
-  Full Width
-</Button>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide proper onPress handlers'
-      description='Always provide an onPress handler for interactive buttons'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Button onPress={() => navigation.navigate('Details')}>
-  View Details
-</Button>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit onPress"
-      description='Avoid creating buttons without onPress handlers'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Button>
-  Clickable Looking Button
-</Button>
-```
-</DontBlockItem>
-</DoVsDontRow>
-<CommonRulesDoAndDont />
-</Box>
-
 ## Platform Considerations
 
 ### iOS Specific

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

@@ -13,7 +13,7 @@ const meta: Meta<typeof Button> = {
       source: {
         language: 'tsx',
         format: true,
-        type: 'code',
+        type: 'dynamic',
       },
     },
   },
@@ -50,17 +50,6 @@ export const Base: Story = {
     children: 'Base Button',
   },
   render: (args) => <Button {...args} />,
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Button appearance="base">
-  Base Button
-</Button>
-`,
-      },
-    },
-  },
 };
 
 export const IconText: Story = {
@@ -72,14 +61,7 @@ export const IconText: Story = {
   parameters: {
     docs: {
       source: {
-        code: `
-<Button
-  appearance="base"
-  icon={Plus}
->
-  Add Item
-</Button>
-`,
+        code: `<Button appearance="base" icon={Plus}>Add Item</Button>`,
       },
     },
   },
@@ -91,20 +73,6 @@ export const Loading: Story = {
     children: 'Loading...',
     loading: true,
   },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Button
-  appearance="base"
-  loading
->
-  Loading...
-</Button>
-`,
-      },
-    },
-  },
 };
 
 export const AppearanceShowcase: Story = {
@@ -168,7 +136,7 @@ export const StatesShowcase: Story = {
         Loading
       </Button>
       <Button appearance='base' loading disabled>
-        Loading
+        Disabled Loading
       </Button>
     </Box>
   ),

package/src/lib/Components/Card/Card.figma.tsx

@@ -0,0 +1,149 @@
+import figma from '@figma/code-connect';
+import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import { ChevronRight, Wallet } from '../../Symbols';
+import { Button } from '../Button';
+import { Spot } from '../Spot';
+import { Tag } from '../Tag';
+import {
+  Card,
+  CardContent,
+  CardContentDescription,
+  CardContentTitle,
+  CardHeader,
+  CardLeading,
+  CardTrailing,
+} from './Card';
+
+// —— Card root ——
+figma.connect(
+  Card,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11025-33000',
+  {
+    imports: ["import { Card, CardFooter } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      outlined: figma.boolean('is-selected', {
+        true: true,
+        false: undefined,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      header: figma.children('.card-header'),
+      footer: figma.boolean('show-footer', {
+        true: figma.children('.card-footer'),
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <Card outlined={props.outlined} disabled={props.disabled}>
+        {props.header}
+        {props.footer}
+      </Card>
+    ),
+  },
+);
+
+// —— CardHeader ——
+figma.connect(
+  CardHeader,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=10541-743',
+  {
+    imports: [
+      "import { CardHeader, CardLeading, CardContent, CardContentTitle, CardContentDescription, CardTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot, Button, Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import { CryptoIcon } from '@ledgerhq/crypto-icons'",
+    ],
+    props: {
+      title: figma.string('title'),
+      description: figma.string('description'),
+      leading: figma.enum('leading', {
+        spot: <Spot appearance='icon' icon={Wallet} />,
+        coin: <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />,
+        provider: (
+          <CryptoIcon
+            ledgerId='ethereum'
+            ticker='ETH'
+            size={48}
+            shape='square'
+          />
+        ),
+        'interface-icon': <Wallet size={20} />,
+        none: undefined,
+      }),
+      trailing: figma.enum('trailing', {
+        value: figma.boolean('show-subvalue', {
+          true: (
+            <CardContent>
+              <CardContentTitle>$43,210.00</CardContentTitle>
+              <CardContentDescription>0.5 BTC</CardContentDescription>
+            </CardContent>
+          ),
+          false: (
+            <CardContent>
+              <CardContentTitle>$43,210.00</CardContentTitle>
+            </CardContent>
+          ),
+        }),
+        button: (
+          <Button appearance='base' size='sm' onPress={() => {}}>
+            Action
+          </Button>
+        ),
+        tag: <Tag label='Label' appearance='gray' />,
+        'interface-icon': <Wallet size={20} />,
+        none: undefined,
+      }),
+    },
+    example: (props) => (
+      <CardHeader>
+        <CardLeading>
+          {props.leading}
+          <CardContent>
+            <CardContentTitle>{props.title}</CardContentTitle>
+            <CardContentDescription>{props.description}</CardContentDescription>
+          </CardContent>
+        </CardLeading>
+        <CardTrailing>{props.trailing}</CardTrailing>
+      </CardHeader>
+    ),
+  },
+);
+
+// —— Card (expandable/info variant) ——
+figma.connect(
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=14481-33979',
+  {
+    imports: [
+      "import { Card, CardHeader, CardLeading, CardContent, CardContentTitle, CardContentDescription, CardTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      title: figma.string('title'),
+      description: figma.string('value'),
+      type: figma.enum('type', {
+        display: 'info',
+        interactive: 'interactive',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: (props) => (
+      <Card type={props.type} disabled={props.disabled}>
+        <CardHeader>
+          <CardLeading>
+            <CardContent>
+              <CardContentDescription>
+                {props.description}
+              </CardContentDescription>
+              <CardContentTitle>{props.title}</CardContentTitle>
+            </CardContent>
+          </CardLeading>
+          <CardTrailing>
+            <ChevronRight size={20} />
+          </CardTrailing>
+        </CardHeader>
+      </Card>
+    ),
+  },
+);