@ledgerhq/lumen-ui-rnative 0.0.47 → 0.0.48

package/src/lib/Components/Tile/Tile.mdx

@@ -1,7 +1,13 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TileStories from './Tile.stories';
 import { Tile } from './Tile';
-import { CustomTabs, Tab } from '../../../../.storybook/components';
+import {
+  CustomTabs,
+  Tab,
+  DoVsDontRow,
+  DoBlockItem,
+  DontBlockItem,
+} from '../../../../.storybook/components';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
@@ -14,42 +20,47 @@ import { Box } from '../Utility';
 
 ## Introduction
 
-Tile components are compact, card-like interactive elements designed for horizontal lists, carousels, or grids. They feature a vertical layout with a required spot icon and title, as well as an optional description, tag, and a secondary action button visible on hover.
+Tile components are compact, card-like interactive elements designed for horizontal lists, carousels, or grids. They use a flexible composite pattern that allows you to compose tiles with spots, text content, tags, and custom elements in a vertical layout.
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=5783-1328).
 
 ## Anatomy
 
-<Canvas of={TileStories.Base} />
-
-- **Leading Content**: Visual icon or element at the top
-- **Title**: The main label of the item (required)
-- **Description (optional)**: Provides additional context
-- **Trailing Content (optional)**: Trailing custom content at the bottom of the tile
-- **Secondary Action (optional)**: Action button in the top right corner, visible on hover
+- **TileSpot**: Visual icon or element at the top
+- **TileContent**: Container for title and description
+  - **TileTitle**: The main label of the item (required)
+  - **TileDescription (optional)**: Provides additional context
+- **Custom Content (optional)**: Any ReactNode like Tag, View, etc.
 
 ## Properties
 
-### Overview
-
 <Canvas of={TileStories.Base} />
 <Controls of={TileStories.Base} />
 
-### Spot Variants
+### Appearance & States
+
+Two appearance variants are available with multiple interactive states:
 
-Tile components support various spot icons to categorize or visualize the content, including coin icons.
+**Appearances:**
+- **no-background** (default): Transparent background with pressed states
+- **card**: Surface background color with pressed states
 
-<Canvas of={TileStories.LeadingContentVariantsShowcase} />
+**States:**
+- **Default**: Base state with no interaction
+- **Pressed**: Darker background when pressed
+- **Disabled**: Non-interactive state with disabled styles
 
-### Trailing Content Variants
+<Canvas of={TileStories.AppearanceShowcase} />
 
-Optional trailing content can be added at the bottom of the tile.
+### Variants
 
-<Canvas of={TileStories.WithTrailingContent} />
+Tile components support various configurations including different spot icons, with/without description, and with/without trailing content (tags).
 
-### Secondary Action
+<Canvas of={TileStories.VariantsShowcase} />
 
-The secondary action is optional and can be omitted.
+### Secondary Action (Long Press)
+
+Use `onLongPress` for secondary actions on mobile devices. Try long pressing the tile below to see it in action.
 
 <Canvas of={TileStories.WithSecondaryAction} />
 
@@ -75,42 +86,124 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ## Basic Usage
 
 ```tsx
-import { Tile, Spot, Box } from '@ledgerhq/lumen-ui-rnative';
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+} from '@ledgerhq/lumen-ui-rnative';
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 function MyComponent() {
   return (
     <Tile
       lx={{ width: 's128' }}
-      title='Settings'
-      description='BTC'
-      leadingContent={<Spot appearance='icon' icon={Settings} />}
-      trailingContent={<Tag label='Active' appearance='success' size='sm' />}
       onPress={() => console.log('Primary action')}
       onLongPress={() => console.log('Secondary action')}
-    />
+    >
+      <TileSpot appearance='icon' icon={Settings} />
+      <TileContent>
+        <TileTitle>Settings</TileTitle>
+        <TileDescription>Manage preferences</TileDescription>
+      </TileContent>
+    </Tile>
   );
 }
 ```
 
+## Advanced Patterns
+
+### With Custom Content (Tags, etc.)
+
+```tsx
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+  Tag,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Tile appearance='card'>
+  <TileSpot appearance='icon' icon={Bitcoin} />
+  <TileContent>
+    <TileTitle>Bitcoin</TileTitle>
+    <TileDescription>BTC</TileDescription>
+  </TileContent>
+  <Tag label='Active' appearance='success' />
+</Tile>;
+```
+
+### Disabled State
+
+```tsx
+<Tile disabled>
+  <TileSpot appearance='icon' icon={Settings} />
+  <TileContent>
+    <TileTitle>Settings</TileTitle>
+    <TileDescription>Unavailable</TileDescription>
+  </TileContent>
+</Tile>
+```
+
 ### With Coin Icon
 
 ```tsx
-import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+<Tile onPress={() => console.log('Clicked!')}>
+  <TileSpot appearance='coin' icon='btc' />
+  <TileContent>
+    <TileTitle>Bitcoin</TileTitle>
+    <TileDescription>BTC</TileDescription>
+  </TileContent>
+</Tile>;
+```
 
-function MyComponent() {
-  return (
+### Horizontal List
+
+```tsx
+import { ScrollView } from 'react-native';
+
+<ScrollView horizontal>
+  {items.map((item) => (
+    <Tile key={item.id} lx={{ width: 's128', flexShrink: 0 }}>
+      <TileSpot appearance='icon' icon={item.icon} />
+      <TileContent>
+        <TileTitle>{item.title}</TileTitle>
+        <TileDescription>{item.description}</TileDescription>
+      </TileContent>
+    </Tile>
+  ))}
+</ScrollView>;
+```
+
+### With Secondary Action (Long Press)
+
+```tsx
     <Tile
-      title='Bitcoin'
-      description='BTC'
-      leadingContent={<Spot appearance='coin' icon='btc' />}
-      onPress={() => console.log('Clicked!')}
-    />
-  );
-}
+  onPress={() => console.log('Primary action')}
+  onLongPress={() => console.log('Secondary action - show menu')}
+>
+  <TileSpot appearance='icon' icon={Settings} />
+  <TileContent>
+    <TileTitle>Settings</TileTitle>
+    <TileDescription>Long press for options</TileDescription>
+  </TileContent>
+</Tile>
 ```
 
 ## Do's and Don'ts
+
 <Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <CommonRulesDoAndDont />
 </Box>

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

@@ -1,17 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import {
-  Settings,
-  Plus,
-  User,
-  Wallet,
-  Cart,
-  Apps,
-  Chart1,
-} from '../../Symbols';
-import { Spot } from '../Spot/Spot';
+import { Settings, Plus, User, Apps } from '../../Symbols';
 import { Tag } from '../Tag/Tag';
-import { Box } from '../Utility';
-import { Tile } from './Tile';
+import { Box, Text } from '../Utility';
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+} from './Tile';
 
 const meta: Meta<typeof Tile> = {
   component: Tile,
@@ -25,144 +22,109 @@ const meta: Meta<typeof Tile> = {
       },
     },
   },
-  argTypes: {
-    leadingContent: {
-      control: 'select',
-      options: ['None', 'Settings', 'Plus'],
-      mapping: {
-        None: undefined,
-        Settings: <Spot appearance='icon' icon={Settings} />,
-        Plus: <Spot appearance='icon' icon={Plus} />,
-      },
-    },
-    trailingContent: {
-      control: 'select',
-      options: ['None', 'Tag', 'Text'],
-      mapping: {
-        None: undefined,
-        Tag: <Tag label='Tag' appearance='base' />,
-        Text: <span>Text</span>,
-      },
-    },
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Tile>;
 
 export const Base: Story = {
-  args: {
-    title: 'Item with Spot and Description',
-    description: 'Additional information',
-    leadingContent: <Spot appearance='icon' icon={Settings} />,
-    lx: { maxWidth: 's256' },
-  },
+  render: () => (
+    <Tile lx={{ maxWidth: 's112' }}>
+      <TileSpot appearance='icon' icon={Settings} />
+      <TileContent>
+        <TileTitle>Item with Spot and Description</TileTitle>
+        <TileDescription>Additional information</TileDescription>
+      </TileContent>
+    </Tile>
+  ),
   parameters: {
     docs: {
       source: {
         code: `
-<Tile
-  title="Item with Spot and Description"
-  description="Additional information"
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  onLongPress={() => console.log('Secondary action')}
-  onPress={() => console.log('Primary action')}
-  lx={{ maxWidth: 's256' }}
-/>
+<Tile lx={{ maxWidth: 's112' }}>
+  <TileSpot appearance="icon" icon={Settings} />
+  <TileContent>
+    <TileTitle>Item with Spot and Description</TileTitle>
+    <TileDescription>Additional information</TileDescription>
+  </TileContent>
+</Tile>
 `,
       },
     },
   },
 };
 
-export const WithTrailingContent: Story = {
-  args: {
-    title: 'Item with Trailing Content',
-    description: 'Additional information',
-    leadingContent: <Spot appearance='icon' icon={Settings} />,
-    trailingContent: <Tag label='New' appearance='base' />,
-    lx: { maxWidth: 's256' },
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<Tile
-  title="Item with Trailing Content"
-  description="Additional information"
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  trailingContent={<Tag label="New" appearance="base" />}
-  onLongPress={() => console.log('Long press - secondary action')}
-  lx={{ maxWidth: 's256' }}
-/>
-`,
-      },
-    },
-  },
+export const VariantsShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+      <Tile lx={{ maxWidth: 's176' }}>
+        <TileSpot appearance='icon' icon={User} />
+        <TileContent>
+          <TileTitle>User</TileTitle>
+          <TileDescription>With description</TileDescription>
+        </TileContent>
+      </Tile>
+      <Tile lx={{ maxWidth: 's176' }}>
+        <TileSpot appearance='icon' icon={Plus} />
+        <TileContent>
+          <TileTitle>Without Description</TileTitle>
+        </TileContent>
+      </Tile>
+      <Tile lx={{ maxWidth: 's176' }}>
+        <TileSpot appearance='icon' icon={Settings} />
+        <TileContent>
+          <TileTitle>With Trailing Content</TileTitle>
+          <TileDescription>Additional information</TileDescription>
+        </TileContent>
+        <Tag label='Custom' appearance='base' />
+      </Tile>
+      <Tile lx={{ maxWidth: 's176' }}>
+        <TileSpot appearance='icon' icon={Settings} />
+        <TileContent>
+          <TileTitle>With Trailing Content</TileTitle>
+          <TileDescription>Additional information</TileDescription>
+        </TileContent>
+        <Text typography='body2SemiBold' lx={{ color: 'success' }}>
+          +7.87%
+        </Text>
+      </Tile>
+    </Box>
+  ),
 };
 
 export const WithSecondaryAction: Story = {
-  args: {
-    title: 'Item with secondary action',
-    description: 'LongPress to trigger secondary action',
-    leadingContent: <Spot appearance='icon' icon={Settings} />,
-    onLongPress: () => alert('Long press - secondary action'),
-    lx: { maxWidth: 's256' },
-  },
+  render: () => (
+    <Tile
+      onLongPress={() => alert('Long press - secondary action triggered!')}
+      lx={{ maxWidth: 's176' }}
+    >
+      <TileSpot appearance='icon' icon={Settings} />
+      <TileContent>
+        <TileTitle>Long Press Me</TileTitle>
+        <TileDescription>Try long pressing this tile</TileDescription>
+      </TileContent>
+    </Tile>
+  ),
   parameters: {
     docs: {
       source: {
         code: `
 <Tile
-  title="Item secondary action"
-  description="Additional information"
-  onLongPress={() => // do stuff}
-  leadingContent={<Spot appearance="icon" icon={Settings} />}
-  lx={{ maxWidth: 's256' }}
-/>
+  onLongPress={() => alert('Long press - secondary action triggered!')}
+  lx={{ maxWidth: 's160' }}
+>
+  <TileSpot appearance="icon" icon={Settings} />
+  <TileContent>
+    <TileTitle>Long Press Me</TileTitle>
+    <TileDescription>Try long pressing this tile</TileDescription>
+  </TileContent>
+</Tile>
 `,
       },
     },
   },
 };
 
-export const LeadingContentVariantsShowcase: Story = {
-  render: () => (
-    <Box lx={{ flexDirection: 'row' }}>
-      <Tile
-        title='User'
-        description='With description'
-        leadingContent={<Spot appearance='icon' icon={User} />}
-        lx={{ maxWidth: 's128' }}
-      />
-      <Tile
-        title='Wallet'
-        description='With description'
-        leadingContent={<Spot appearance='icon' icon={Wallet} />}
-        lx={{ maxWidth: 's128' }}
-      />
-      <Tile
-        title='Cart'
-        description='With description'
-        leadingContent={<Spot appearance='icon' icon={Cart} />}
-        lx={{ maxWidth: 's128' }}
-      />
-      <Tile
-        title='Apps'
-        description='With description'
-        leadingContent={<Spot appearance='icon' icon={Apps} />}
-        lx={{ maxWidth: 's128' }}
-      />
-      <Tile
-        title='Chart'
-        description='With description'
-        leadingContent={<Spot appearance='icon' icon={Chart1} />}
-        lx={{ maxWidth: 's128' }}
-      />
-    </Box>
-  ),
-};
-
 export const HorizontalList: Story = {
   render: () => (
     <Box lx={{ flexDirection: 'column', gap: 's16' }}>
@@ -174,13 +136,14 @@ export const HorizontalList: Story = {
           backgroundColor: 'base',
         }}
       >
-        {Array.from({ length: 12 }).map((_, i) => (
-          <Tile
-            key={`list-1-${i}`}
-            title={`Item ${i + 1}`}
-            description={`Description ${i + 1}`}
-            leadingContent={<Spot appearance='icon' icon={Apps} />}
-          />
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Tile key={`list-1-${i}`}>
+            <TileSpot appearance='icon' icon={Apps} />
+            <TileContent>
+              <TileTitle>Item {i + 1}</TileTitle>
+              <TileDescription>Description {i + 1}</TileDescription>
+            </TileContent>
+          </Tile>
         ))}
       </Box>
       <Box
@@ -189,16 +152,19 @@ export const HorizontalList: Story = {
           width: 's480',
           position: 'relative',
           backgroundColor: 'base',
+          overflow: 'scroll',
         }}
       >
-        {Array.from({ length: 8 }).map((_, i) => (
-          <Tile
-            key={`list-2-${i}`}
-            title='Long Title that should truncate appropriately'
-            description='Long description that should truncate appropriately'
-            leadingContent={<Spot appearance='icon' icon={Apps} />}
-            lx={{ width: 's176', flexShrink: 0 }}
-          />
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Tile key={`list-2-${i}`} lx={{ width: 's128', flexShrink: 0 }}>
+            <TileSpot appearance='icon' icon={Apps} />
+            <TileContent>
+              <TileTitle>Item {i + 1}</TileTitle>
+              <TileDescription>
+                Long description that should truncate appropriately
+              </TileDescription>
+            </TileContent>
+          </Tile>
         ))}
       </Box>
     </Box>
@@ -209,19 +175,74 @@ export const ResponsiveLayout: Story = {
   render: () => (
     <Box lx={{ width: 'full', flexDirection: 'column', gap: 's16' }}>
       <Box>
-        <Tile
-          title='Item fill width'
-          description='Description fill width'
-          leadingContent={<Spot appearance='icon' icon={Apps} />}
-        />
+        <Tile>
+          <TileSpot appearance='icon' icon={Apps} />
+          <TileContent>
+            <TileTitle>Item fill width</TileTitle>
+            <TileDescription>Description fill width</TileDescription>
+          </TileContent>
+        </Tile>
       </Box>
       <Box lx={{ alignItems: 'center', justifyContent: 'center' }}>
-        <Tile
-          lx={{ width: 's224' }}
-          title='Long Item with fixed width'
-          description='lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.'
-          leadingContent={<Spot appearance='icon' icon={Plus} />}
-        />
+        <Tile lx={{ width: 's224' }}>
+          <TileSpot appearance='icon' icon={Plus} />
+          <TileContent>
+            <TileTitle>Long Item with fixed width</TileTitle>
+            <TileDescription>
+              lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+              quos.
+            </TileDescription>
+          </TileContent>
+        </Tile>
+      </Box>
+    </Box>
+  ),
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'column', gap: 's24' }}>
+      <Box>
+        <Box lx={{ marginBottom: 's8' }}>
+          <Text typography='body2SemiBold'>No Background</Text>
+        </Box>
+        <Box lx={{ flexDirection: 'row', gap: 's16' }}>
+          <Tile appearance='no-background' lx={{ width: 's112' }}>
+            <TileSpot appearance='icon' icon={Settings} />
+            <TileContent>
+              <TileTitle>Press me</TileTitle>
+              <TileDescription>Press state</TileDescription>
+            </TileContent>
+          </Tile>
+          <Tile appearance='no-background' disabled lx={{ width: 's112' }}>
+            <TileSpot appearance='icon' icon={Settings} />
+            <TileContent>
+              <TileTitle>Disabled</TileTitle>
+              <TileDescription>Disabled state</TileDescription>
+            </TileContent>
+          </Tile>
+        </Box>
+      </Box>
+      <Box>
+        <Box lx={{ marginBottom: 's8' }}>
+          <Text typography='body2SemiBold'>Card</Text>
+        </Box>
+        <Box lx={{ flexDirection: 'row', gap: 's16' }}>
+          <Tile appearance='card' lx={{ width: 's112' }}>
+            <TileSpot appearance='icon' icon={User} />
+            <TileContent>
+              <TileTitle>Press me</TileTitle>
+              <TileDescription>Press state</TileDescription>
+            </TileContent>
+          </Tile>
+          <Tile appearance='card' disabled lx={{ width: 's112' }}>
+            <TileSpot appearance='icon' icon={User} />
+            <TileContent>
+              <TileTitle>Disabled</TileTitle>
+              <TileDescription>Disabled state</TileDescription>
+            </TileContent>
+          </Tile>
+        </Box>
       </Box>
     </Box>
   ),