@ledgerhq/lumen-ui-rnative 0.1.14 → 0.1.16

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { Settings, ChevronRight, Wallet } from '../../Symbols';
+import { Spot } from '../Spot';
 import { Switch } from '../Switch/Switch';
 import { Tag } from '../Tag/Tag';
 import { Box } from '../Utility';
@@ -11,9 +12,7 @@ import {
   ListItemTitle,
   ListItemDescription,
   ListItemTrailing,
-  ListItemSpot,
-  ListItemIcon,
-  ListItemTruncate,
+  ListItemContentRow,
 } from './ListItem';
 
 const meta: Meta<typeof ListItem> = {
@@ -25,12 +24,10 @@ const meta: Meta<typeof ListItem> = {
     ListItemTitle,
     ListItemDescription,
     ListItemTrailing,
-    ListItemSpot,
-    ListItemIcon,
-    ListItemTruncate,
+    ListItemContentRow,
   },
   parameters: {
-    layout: 'padded',
+    layout: 'centered',
     backgrounds: { default: 'light' },
     docs: {
       source: {
@@ -62,7 +59,7 @@ export const Base: Story = {
   render: (args) => (
     <ListItem {...args}>
       <ListItemLeading>
-        <ListItemSpot appearance='icon' icon={Settings} />
+        <Spot appearance='icon' icon={Settings} />
         <ListItemContent>
           <ListItemTitle>Item with Icon and Description</ListItemTitle>
           <ListItemDescription>Additional information</ListItemDescription>
@@ -76,7 +73,7 @@ export const Base: Story = {
         code: `
 <ListItem>
   <ListItemLeading>
-    <ListItemSpot appearance="icon" icon={Settings} />
+    <Spot appearance="icon" icon={Settings} />
     <ListItemContent>
       <ListItemTitle>Item with Icon and Description</ListItemTitle>
       <ListItemDescription>Additional information</ListItemDescription>
@@ -97,7 +94,7 @@ export const VariantsShowcase: Story = {
       <Box lx={{ flexDirection: 'column', maxWidth: 's320', gap: 's8' }}>
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Settings} />
+            <Spot size={48} appearance='icon' icon={Settings} />
             <ListItemContent>
               <ListItemTitle>Simple composition</ListItemTitle>
               <ListItemDescription>With description</ListItemDescription>
@@ -107,7 +104,7 @@ export const VariantsShowcase: Story = {
 
         <ListItem onPress={() => setSelected(!selected)}>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Wallet} />
+            <Spot size={48} appearance='icon' icon={Wallet} />
             <ListItemContent>
               <ListItemTitle>Switch Variant</ListItemTitle>
               <ListItemDescription>With description</ListItemDescription>
@@ -120,7 +117,7 @@ export const VariantsShowcase: Story = {
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Wallet} />
+            <Spot size={48} appearance='icon' icon={Wallet} />
             <ListItemContent>
               <ListItemTitle>Content Variant</ListItemTitle>
               <ListItemDescription>With description</ListItemDescription>
@@ -136,7 +133,7 @@ export const VariantsShowcase: Story = {
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Wallet} />
+            <Spot size={48} appearance='icon' icon={Wallet} />
             <ListItemContent>
               <ListItemTitle>Content Variant</ListItemTitle>
               <ListItemDescription>Custom style</ListItemDescription>
@@ -154,7 +151,7 @@ export const VariantsShowcase: Story = {
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Wallet} />
+            <Spot size={48} appearance='icon' icon={Wallet} />
             <ListItemContent>
               <ListItemTitle>Content Variant</ListItemTitle>
               <ListItemDescription>Custom style</ListItemDescription>
@@ -172,10 +169,10 @@ export const VariantsShowcase: Story = {
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Settings} />
+            <Spot size={48} appearance='icon' icon={Settings} />
             <ListItemContent>
               <ListItemTitle>Tag Variant</ListItemTitle>
-              <ListItemDescription>Custom style</ListItemDescription>
+              <ListItemDescription>With description</ListItemDescription>
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
@@ -185,42 +182,42 @@ export const VariantsShowcase: Story = {
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Settings} />
+            <Spot size={48} appearance='icon' icon={Settings} />
             <ListItemContent>
               <ListItemTitle>Icon Variant</ListItemTitle>
               <ListItemDescription>With description</ListItemDescription>
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
-            <ListItemIcon color='muted' icon={ChevronRight} />
+            <ChevronRight size={24} />
           </ListItemTrailing>
         </ListItem>
 
         <ListItem>
           <ListItemLeading>
-            <ListItemIcon icon={Wallet} />
+            <Wallet size={24} />
             <ListItemContent>
               <ListItemTitle>Icon without Spot</ListItemTitle>
-              <ListItemDescription>Using ListItemIcon</ListItemDescription>
+              <ListItemDescription>With icon</ListItemDescription>
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
-            <ListItemIcon color='muted' icon={ChevronRight} />
+            <ChevronRight size={24} />
           </ListItemTrailing>
         </ListItem>
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Wallet} />
+            <Spot size={48} appearance='icon' icon={Wallet} />
             <ListItemContent>
-              <ListItemTitle>
-                <ListItemTruncate variant='title'>Complex 1</ListItemTruncate>
+              <ListItemContentRow>
+                <ListItemTitle>Complex 1</ListItemTitle>
                 <Tag size='sm' label='New' appearance='base' />
-              </ListItemTitle>
-              <ListItemDescription>
-                <ListItemTruncate>With description</ListItemTruncate>
+              </ListItemContentRow>
+              <ListItemContentRow>
+                <ListItemDescription>With description</ListItemDescription>
                 <Tag size='sm' label='Custom Tag' appearance='gray' />
-              </ListItemDescription>
+              </ListItemContentRow>
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
@@ -233,7 +230,7 @@ export const VariantsShowcase: Story = {
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Wallet} />
+            <Spot size={48} appearance='icon' icon={Wallet} />
             <ListItemContent>
               <ListItemTitle>Complex 2</ListItemTitle>
               <ListItemDescription>With description</ListItemDescription>
@@ -241,13 +238,13 @@ export const VariantsShowcase: Story = {
           </ListItemLeading>
           <ListItemTrailing>
             <ListItemContent>
-              <ListItemTitle>
+              <ListItemContentRow>
                 <Tag size='sm' label='New' appearance='base' />
-                <ListItemTruncate variant='title'>1200.12</ListItemTruncate>
-              </ListItemTitle>
-              <ListItemDescription>
+                <ListItemTitle>1200.12</ListItemTitle>
+              </ListItemContentRow>
+              <ListItemContentRow>
                 <Tag size='sm' label='BTC' appearance='gray' />
-              </ListItemDescription>
+              </ListItemContentRow>
             </ListItemContent>
           </ListItemTrailing>
         </ListItem>
@@ -264,7 +261,7 @@ export const DisabledState: Story = {
     <Box lx={{ flexDirection: 'column', width: 's320' }}>
       <ListItem {...args}>
         <ListItemLeading>
-          <ListItemSpot appearance='icon' icon={Settings} />
+          <Spot size={48} appearance='icon' icon={Settings} />
           <ListItemContent>
             <ListItemTitle>Disabled Item</ListItemTitle>
             <ListItemDescription>This item is disabled</ListItemDescription>
@@ -277,20 +274,20 @@ export const DisabledState: Story = {
 
       <ListItem {...args}>
         <ListItemLeading>
-          <ListItemSpot appearance='icon' icon={Settings} />
+          <Spot size={48} appearance='icon' icon={Settings} />
           <ListItemContent>
             <ListItemTitle>Disabled Item</ListItemTitle>
             <ListItemDescription>This item is disabled</ListItemDescription>
           </ListItemContent>
         </ListItemLeading>
         <ListItemTrailing>
-          <ListItemIcon color='muted' icon={ChevronRight} />
+          <ChevronRight size={24} />
         </ListItemTrailing>
       </ListItem>
 
       <ListItem {...args}>
         <ListItemLeading>
-          <ListItemSpot appearance='icon' icon={Wallet} />
+          <Spot size={48} appearance='icon' icon={Wallet} />
           <ListItemContent>
             <ListItemTitle>Content Variant</ListItemTitle>
             <ListItemDescription>With description</ListItemDescription>
@@ -306,10 +303,10 @@ export const DisabledState: Story = {
 
       <ListItem {...args}>
         <ListItemLeading>
-          <ListItemIcon icon={Wallet} />
+          <Wallet size={24} />
           <ListItemContent>
             <ListItemTitle>Icon without Spot</ListItemTitle>
-            <ListItemDescription>Using ListItemIcon</ListItemDescription>
+            <ListItemDescription>With icon</ListItemDescription>
           </ListItemContent>
         </ListItemLeading>
       </ListItem>
@@ -321,7 +318,7 @@ export const DisabledState: Story = {
         code: `
 <ListItem disabled>
   <ListItemLeading>
-    <ListItemSpot appearance="icon" icon={Settings} />
+    <Spot appearance="icon" icon={Settings} />
     <ListItemContent>
       <ListItemTitle>Disabled Item</ListItemTitle>
       <ListItemDescription>This item is disabled</ListItemDescription>
@@ -350,20 +347,20 @@ export const ResponsiveLayout: Story = {
       <Box lx={{ flexDirection: 'column' }}>
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Settings} />
+            <Spot size={48} appearance='icon' icon={Settings} />
             <ListItemContent>
               <ListItemTitle>Short Title</ListItemTitle>
               <ListItemDescription>Short description</ListItemDescription>
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
-            <ListItemIcon color='muted' icon={ChevronRight} />
+            <ChevronRight size={24} />
           </ListItemTrailing>
         </ListItem>
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Settings} />
+            <Spot size={48} appearance='icon' icon={Settings} />
             <ListItemContent>
               <ListItemTitle>
                 Long Title that should truncate appropriately
@@ -375,27 +372,27 @@ export const ResponsiveLayout: Story = {
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
-            <ListItemIcon color='muted' icon={ChevronRight} />
+            <ChevronRight size={24} />
           </ListItemTrailing>
         </ListItem>
 
         <ListItem>
           <ListItemLeading>
-            <ListItemSpot appearance='icon' icon={Wallet} />
+            <Spot size={48} appearance='icon' icon={Wallet} />
             <ListItemContent>
-              <ListItemTitle>
-                <ListItemTruncate variant='title'>
+              <ListItemContentRow>
+                <ListItemTitle>
                   Long Title that should truncate appropriately
-                </ListItemTruncate>
+                </ListItemTitle>
                 <Tag size='sm' label='New' appearance='base' />
-              </ListItemTitle>
-              <ListItemDescription>
-                <ListItemTruncate>
+              </ListItemContentRow>
+              <ListItemContentRow>
+                <ListItemDescription>
                   Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   Quisquam, quos.
-                </ListItemTruncate>
+                </ListItemDescription>
                 <Tag size='sm' label='Custom Tag' appearance='gray' />
-              </ListItemDescription>
+              </ListItemContentRow>
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>