@ledgerhq/lumen-ui-rnative 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/module/lib/Components/ListItem/ListItem.js +57 -27
  2. package/dist/module/lib/Components/ListItem/ListItem.js.map +1 -1
  3. package/dist/module/lib/Components/ListItem/ListItem.mdx +15 -7
  4. package/dist/module/lib/Components/ListItem/ListItem.stories.js +497 -283
  5. package/dist/module/lib/Components/ListItem/ListItem.stories.js.map +1 -1
  6. package/dist/module/lib/Components/ListItem/ListItem.test.js +153 -0
  7. package/dist/module/lib/Components/ListItem/ListItem.test.js.map +1 -0
  8. package/dist/module/lib/Components/{TriggerButton/TriggerButton.js → MediaButton/MediaButton.js} +13 -10
  9. package/dist/module/lib/Components/MediaButton/MediaButton.js.map +1 -0
  10. package/{src/lib/Components/TriggerButton/TriggerButton.mdx → dist/module/lib/Components/MediaButton/MediaButton.mdx} +10 -10
  11. package/dist/module/lib/Components/{TriggerButton/TriggerButton.stories.js → MediaButton/MediaButton.stories.js} +18 -18
  12. package/dist/module/lib/Components/MediaButton/MediaButton.stories.js.map +1 -0
  13. package/dist/module/lib/Components/{TriggerButton/TriggerButton.test.js → MediaButton/MediaButton.test.js} +14 -14
  14. package/dist/module/lib/Components/MediaButton/MediaButton.test.js.map +1 -0
  15. package/dist/module/lib/Components/MediaButton/index.js +5 -0
  16. package/dist/module/lib/Components/MediaButton/index.js.map +1 -0
  17. package/dist/module/lib/Components/MediaButton/types.js.map +1 -0
  18. package/dist/module/lib/Components/NavBar/NavBar.js +0 -2
  19. package/dist/module/lib/Components/NavBar/NavBar.js.map +1 -1
  20. package/dist/module/lib/Components/OptionList/OptionList.figma.js +28 -0
  21. package/dist/module/lib/Components/OptionList/OptionList.figma.js.map +1 -0
  22. package/dist/module/lib/Components/OptionList/OptionList.js +452 -0
  23. package/dist/module/lib/Components/OptionList/OptionList.js.map +1 -0
  24. package/dist/module/lib/Components/OptionList/OptionList.mdx +304 -0
  25. package/dist/module/lib/Components/OptionList/OptionList.stories.js +735 -0
  26. package/dist/module/lib/Components/OptionList/OptionList.stories.js.map +1 -0
  27. package/dist/module/lib/Components/OptionList/OptionList.test.js +443 -0
  28. package/dist/module/lib/Components/OptionList/OptionList.test.js.map +1 -0
  29. package/dist/module/lib/Components/OptionList/index.js +5 -0
  30. package/dist/module/lib/Components/OptionList/index.js.map +1 -0
  31. package/dist/module/lib/Components/OptionList/types.js +4 -0
  32. package/dist/module/lib/Components/OptionList/types.js.map +1 -0
  33. package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.js +36 -0
  34. package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.js.map +1 -0
  35. package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.test.js +84 -0
  36. package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.test.js.map +1 -0
  37. package/dist/module/lib/Components/index.js +2 -1
  38. package/dist/module/lib/Components/index.js.map +1 -1
  39. package/dist/typescript/src/lib/Components/ListItem/ListItem.d.ts +8 -8
  40. package/dist/typescript/src/lib/Components/ListItem/ListItem.d.ts.map +1 -1
  41. package/dist/typescript/src/lib/Components/ListItem/types.d.ts +11 -7
  42. package/dist/typescript/src/lib/Components/ListItem/types.d.ts.map +1 -1
  43. package/dist/typescript/src/lib/Components/MediaButton/MediaButton.d.ts +23 -0
  44. package/dist/typescript/src/lib/Components/MediaButton/MediaButton.d.ts.map +1 -0
  45. package/dist/typescript/src/lib/Components/MediaButton/index.d.ts +3 -0
  46. package/dist/typescript/src/lib/Components/MediaButton/index.d.ts.map +1 -0
  47. package/dist/typescript/src/lib/Components/{TriggerButton → MediaButton}/types.d.ts +10 -5
  48. package/dist/typescript/src/lib/Components/MediaButton/types.d.ts.map +1 -0
  49. package/dist/typescript/src/lib/Components/OptionList/OptionList.d.ts +12 -0
  50. package/dist/typescript/src/lib/Components/OptionList/OptionList.d.ts.map +1 -0
  51. package/dist/typescript/src/lib/Components/OptionList/OptionList.figma.d.ts +2 -0
  52. package/dist/typescript/src/lib/Components/OptionList/OptionList.figma.d.ts.map +1 -0
  53. package/dist/typescript/src/lib/Components/OptionList/index.d.ts +3 -0
  54. package/dist/typescript/src/lib/Components/OptionList/index.d.ts.map +1 -0
  55. package/dist/typescript/src/lib/Components/OptionList/types.d.ts +97 -0
  56. package/dist/typescript/src/lib/Components/OptionList/types.d.ts.map +1 -0
  57. package/dist/typescript/src/lib/Components/OptionList/useOptionList/useOptionListItems.d.ts +12 -0
  58. package/dist/typescript/src/lib/Components/OptionList/useOptionList/useOptionListItems.d.ts.map +1 -0
  59. package/dist/typescript/src/lib/Components/index.d.ts +2 -1
  60. package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
  61. package/dist/typescript/src/styles/types/theme.types.d.ts +7 -6
  62. package/dist/typescript/src/styles/types/theme.types.d.ts.map +1 -1
  63. package/package.json +1 -1
  64. package/src/lib/Components/ListItem/ListItem.mdx +15 -7
  65. package/src/lib/Components/ListItem/ListItem.stories.tsx +354 -220
  66. package/src/lib/Components/ListItem/ListItem.test.tsx +152 -0
  67. package/src/lib/Components/ListItem/ListItem.tsx +63 -28
  68. package/src/lib/Components/ListItem/types.ts +11 -8
  69. package/{dist/module/lib/Components/TriggerButton/TriggerButton.mdx → src/lib/Components/MediaButton/MediaButton.mdx} +10 -10
  70. package/src/lib/Components/{TriggerButton/TriggerButton.stories.tsx → MediaButton/MediaButton.stories.tsx} +28 -28
  71. package/src/lib/Components/{TriggerButton/TriggerButton.test.tsx → MediaButton/MediaButton.test.tsx} +22 -22
  72. package/src/lib/Components/{TriggerButton/TriggerButton.tsx → MediaButton/MediaButton.tsx} +27 -21
  73. package/src/lib/Components/MediaButton/index.ts +2 -0
  74. package/src/lib/Components/{TriggerButton → MediaButton}/types.ts +10 -5
  75. package/src/lib/Components/NavBar/NavBar.tsx +0 -3
  76. package/src/lib/Components/OptionList/OptionList.figma.tsx +37 -0
  77. package/src/lib/Components/OptionList/OptionList.mdx +304 -0
  78. package/src/lib/Components/OptionList/OptionList.stories.tsx +755 -0
  79. package/src/lib/Components/OptionList/OptionList.test.tsx +412 -0
  80. package/src/lib/Components/OptionList/OptionList.tsx +532 -0
  81. package/src/lib/Components/OptionList/index.ts +2 -0
  82. package/src/lib/Components/OptionList/types.ts +115 -0
  83. package/src/lib/Components/OptionList/useOptionList/useOptionListItems.test.ts +73 -0
  84. package/src/lib/Components/OptionList/useOptionList/useOptionListItems.ts +49 -0
  85. package/src/lib/Components/index.ts +2 -1
  86. package/src/styles/types/theme.types.ts +8 -6
  87. package/dist/module/lib/Components/TriggerButton/TriggerButton.js.map +0 -1
  88. package/dist/module/lib/Components/TriggerButton/TriggerButton.stories.js.map +0 -1
  89. package/dist/module/lib/Components/TriggerButton/TriggerButton.test.js.map +0 -1
  90. package/dist/module/lib/Components/TriggerButton/index.js +0 -5
  91. package/dist/module/lib/Components/TriggerButton/index.js.map +0 -1
  92. package/dist/module/lib/Components/TriggerButton/types.js.map +0 -1
  93. package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts +0 -23
  94. package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts.map +0 -1
  95. package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts +0 -3
  96. package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts.map +0 -1
  97. package/dist/typescript/src/lib/Components/TriggerButton/types.d.ts.map +0 -1
  98. package/src/lib/Components/TriggerButton/index.ts +0 -2
  99. /package/dist/module/lib/Components/{TriggerButton → MediaButton}/types.js +0 -0
package/src/lib/Components/ListItem/ListItem.stories.tsx CHANGED
@@ -1,10 +1,12 @@
1
+ import { CryptoIcon } from '@ledgerhq/crypto-icons';
1
2
  import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
2
3
  import { useState } from 'react';
3
4
  import { Settings, ChevronRight, Wallet } from '../../Symbols';
5
+ import { MediaImage } from '../MediaImage';
4
6
  import { Spot } from '../Spot';
5
7
  import { Switch } from '../Switch/Switch';
6
8
  import { Tag } from '../Tag/Tag';
7
- import { Box } from '../Utility';
9
+ import { Box, Text } from '../Utility';
8
10
  import {
9
11
  ListItem,
10
12
  ListItemLeading,
@@ -15,7 +17,7 @@ import {
15
17
  ListItemContentRow,
16
18
  } from './ListItem';
17
19
 
18
- const meta: Meta<typeof ListItem> = {
20
+ const meta = {
19
21
  component: ListItem,
20
22
  title: 'Containment/ListItem',
21
23
  subcomponents: {
@@ -47,22 +49,29 @@ const meta: Meta<typeof ListItem> = {
47
49
  description: 'The function to be called when the list item is pressed',
48
50
  },
49
51
  },
50
- };
52
+ } satisfies Meta<typeof ListItem>;
51
53
 
52
54
  export default meta;
53
55
  type Story = StoryObj<typeof ListItem>;
54
56
 
55
57
  export const Base: Story = {
56
58
  args: {
59
+ density: 'expanded',
57
60
  lx: { maxWidth: 's320' },
58
61
  },
59
62
  render: (args) => (
60
63
  <ListItem {...args}>
61
64
  <ListItemLeading>
62
- <Spot appearance='icon' icon={Settings} />
65
+ <Spot
66
+ appearance='icon'
67
+ icon={Settings}
68
+ size={args.density === 'compact' ? 32 : 48}
69
+ />
63
70
  <ListItemContent>
64
71
  <ListItemTitle>Item with Icon and Description</ListItemTitle>
65
- <ListItemDescription>Additional information</ListItemDescription>
72
+ {args.density === 'expanded' && (
73
+ <ListItemDescription>Additional information</ListItemDescription>
74
+ )}
66
75
  </ListItemContent>
67
76
  </ListItemLeading>
68
77
  </ListItem>
@@ -73,10 +82,12 @@ export const Base: Story = {
73
82
  code: `
74
83
  <ListItem>
75
84
  <ListItemLeading>
76
- <Spot appearance="icon" icon={Settings} />
85
+ <Spot appearance="icon" icon={Settings} size={density === 'compact' ? 32 : 48} />
77
86
  <ListItemContent>
78
87
  <ListItemTitle>Item with Icon and Description</ListItemTitle>
79
- <ListItemDescription>Additional information</ListItemDescription>
88
+ {density === 'expanded' && (
89
+ <ListItemDescription>Additional information</ListItemDescription>
90
+ )}
80
91
  </ListItemContent>
81
92
  </ListItemLeading>
82
93
  </ListItem>
@@ -86,168 +97,145 @@ export const Base: Story = {
86
97
  },
87
98
  };
88
99
 
89
- export const VariantsShowcase: Story = {
90
- render: () => {
91
- const [selected, setSelected] = useState(false);
92
-
93
- return (
94
- <Box lx={{ flexDirection: 'column', maxWidth: 's320', gap: 's8' }}>
95
- <ListItem>
96
- <ListItemLeading>
97
- <Spot size={48} appearance='icon' icon={Settings} />
98
- <ListItemContent>
99
- <ListItemTitle>Simple composition</ListItemTitle>
100
- <ListItemDescription>With description</ListItemDescription>
101
- </ListItemContent>
102
- </ListItemLeading>
103
- </ListItem>
100
+ export const DensityShowcase: Story = {
101
+ render: () => (
102
+ <Box lx={{ flexDirection: 'column', maxWidth: 's320', gap: 's8' }}>
103
+ <ListItem density='compact' onPress={() => {}}>
104
+ <ListItemLeading>
105
+ <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='24px' />
106
+ <ListItemContent>
107
+ <ListItemTitle>Compact with icon</ListItemTitle>
108
+ </ListItemContent>
109
+ </ListItemLeading>
110
+ <ListItemTrailing>
111
+ <ChevronRight size={24} />
112
+ </ListItemTrailing>
113
+ </ListItem>
104
114
 
105
- <ListItem onPress={() => setSelected(!selected)}>
106
- <ListItemLeading>
107
- <Spot size={48} appearance='icon' icon={Wallet} />
108
- <ListItemContent>
109
- <ListItemTitle>Switch Variant</ListItemTitle>
110
- <ListItemDescription>With description</ListItemDescription>
111
- </ListItemContent>
112
- </ListItemLeading>
113
- <ListItemTrailing>
114
- <Switch checked={selected} onCheckedChange={setSelected} />
115
- </ListItemTrailing>
116
- </ListItem>
115
+ <ListItem density='compact'>
116
+ <ListItemLeading>
117
+ <Spot size={32} appearance='icon' icon={Wallet} />
118
+ <ListItemContent>
119
+ <ListItemTitle>Compact with value</ListItemTitle>
120
+ </ListItemContent>
121
+ </ListItemLeading>
122
+ <ListItemTrailing>
123
+ <ListItemTitle>$3,000</ListItemTitle>
124
+ </ListItemTrailing>
125
+ </ListItem>
117
126
 
118
- <ListItem>
119
- <ListItemLeading>
120
- <Spot size={48} appearance='icon' icon={Wallet} />
121
- <ListItemContent>
122
- <ListItemTitle>Content Variant</ListItemTitle>
123
- <ListItemDescription>With description</ListItemDescription>
124
- </ListItemContent>
125
- </ListItemLeading>
126
- <ListItemTrailing>
127
- <ListItemContent>
128
- <ListItemTitle>42.10</ListItemTitle>
129
- <ListItemDescription>USD</ListItemDescription>
130
- </ListItemContent>
131
- </ListItemTrailing>
132
- </ListItem>
127
+ <ListItem density='expanded' onPress={() => {}}>
128
+ <ListItemLeading>
129
+ <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
130
+ <ListItemContent>
131
+ <ListItemTitle>Expanded with icon</ListItemTitle>
132
+ <ListItemDescription>Additional information</ListItemDescription>
133
+ </ListItemContent>
134
+ </ListItemLeading>
135
+ <ListItemTrailing>
136
+ <ChevronRight size={24} />
137
+ </ListItemTrailing>
138
+ </ListItem>
133
139
 
134
- <ListItem>
135
- <ListItemLeading>
136
- <Spot size={48} appearance='icon' icon={Wallet} />
137
- <ListItemContent>
138
- <ListItemTitle>Content Variant</ListItemTitle>
139
- <ListItemDescription>Custom style</ListItemDescription>
140
- </ListItemContent>
141
- </ListItemLeading>
142
- <ListItemTrailing>
143
- <ListItemContent>
144
- <ListItemTitle>USD</ListItemTitle>
145
- <ListItemDescription lx={{ color: 'error' }}>
146
- -7.53%
147
- </ListItemDescription>
148
- </ListItemContent>
149
- </ListItemTrailing>
150
- </ListItem>
140
+ <ListItem density='expanded'>
141
+ <ListItemLeading>
142
+ <Spot size={48} appearance='icon' icon={Wallet} />
143
+ <ListItemContent>
144
+ <ListItemTitle>Expanded with value</ListItemTitle>
145
+ <ListItemDescription>With description</ListItemDescription>
146
+ </ListItemContent>
147
+ </ListItemLeading>
148
+ <ListItemTrailing>
149
+ <ListItemTitle>$3,000</ListItemTitle>
150
+ </ListItemTrailing>
151
+ </ListItem>
152
+ </Box>
153
+ ),
154
+ };
151
155
 
152
- <ListItem>
153
- <ListItemLeading>
154
- <Spot size={48} appearance='icon' icon={Wallet} />
155
- <ListItemContent>
156
- <ListItemTitle>Content Variant</ListItemTitle>
157
- <ListItemDescription>Custom style</ListItemDescription>
158
- </ListItemContent>
159
- </ListItemLeading>
160
- <ListItemTrailing>
161
- <ListItemContent>
162
- <ListItemTitle>USD</ListItemTitle>
163
- <ListItemDescription lx={{ color: 'success' }}>
164
- +7.53%
165
- </ListItemDescription>
166
- </ListItemContent>
167
- </ListItemTrailing>
168
- </ListItem>
156
+ export const InteractiveShowcase: Story = {
157
+ render: () => {
158
+ const [selected, setSelected] = useState(false);
169
159
 
170
- <ListItem>
171
- <ListItemLeading>
172
- <Spot size={48} appearance='icon' icon={Settings} />
173
- <ListItemContent>
174
- <ListItemTitle>Tag Variant</ListItemTitle>
175
- <ListItemDescription>With description</ListItemDescription>
176
- </ListItemContent>
177
- </ListItemLeading>
178
- <ListItemTrailing>
179
- <Tag size='sm' label='New' appearance='accent' />
180
- </ListItemTrailing>
181
- </ListItem>
160
+ return (
161
+ <Box lx={{ flexDirection: 'column', maxWidth: 's320', gap: 's16' }}>
162
+ <Box lx={{ flexDirection: 'column', gap: 's8' }}>
163
+ <Text typography='body4SemiBold' lx={{ color: 'muted' }}>
164
+ Info
165
+ </Text>
166
+ <ListItem>
167
+ <ListItemLeading>
168
+ <Spot size={48} appearance='icon' icon={Settings} />
169
+ <ListItemContent>
170
+ <ListItemTitle>Display only</ListItemTitle>
171
+ <ListItemDescription>No press feedback</ListItemDescription>
172
+ </ListItemContent>
173
+ </ListItemLeading>
174
+ <ListItemTrailing>
175
+ <ListItemContent>
176
+ <ListItemTitle>42.10</ListItemTitle>
177
+ <ListItemDescription>USD</ListItemDescription>
178
+ </ListItemContent>
179
+ </ListItemTrailing>
180
+ </ListItem>
182
181
 
183
- <ListItem>
184
- <ListItemLeading>
185
- <Spot size={48} appearance='icon' icon={Settings} />
186
- <ListItemContent>
187
- <ListItemTitle>Icon Variant</ListItemTitle>
188
- <ListItemDescription>With description</ListItemDescription>
189
- </ListItemContent>
190
- </ListItemLeading>
191
- <ListItemTrailing>
192
- <ChevronRight size={24} />
193
- </ListItemTrailing>
194
- </ListItem>
182
+ <ListItem>
183
+ <ListItemLeading>
184
+ <Spot size={48} appearance='icon' icon={Wallet} />
185
+ <ListItemContent>
186
+ <ListItemTitle>Static item</ListItemTitle>
187
+ <ListItemDescription>Not pressable</ListItemDescription>
188
+ </ListItemContent>
189
+ </ListItemLeading>
190
+ <ListItemTrailing>
191
+ <Tag size='sm' label='New' appearance='accent' />
192
+ </ListItemTrailing>
193
+ </ListItem>
194
+ </Box>
195
195
 
196
- <ListItem>
197
- <ListItemLeading>
198
- <Wallet size={24} />
199
- <ListItemContent>
200
- <ListItemTitle>Icon without Spot</ListItemTitle>
201
- <ListItemDescription>With icon</ListItemDescription>
202
- </ListItemContent>
203
- </ListItemLeading>
204
- <ListItemTrailing>
205
- <ChevronRight size={24} />
206
- </ListItemTrailing>
207
- </ListItem>
196
+ <Box lx={{ flexDirection: 'column', gap: 's8' }}>
197
+ <Text typography='body4SemiBold' lx={{ color: 'muted' }}>
198
+ Interactive
199
+ </Text>
200
+ <ListItem onPress={() => {}}>
201
+ <ListItemLeading>
202
+ <Spot size={48} appearance='icon' icon={Settings} />
203
+ <ListItemContent>
204
+ <ListItemTitle>Navigation</ListItemTitle>
205
+ <ListItemDescription>Press feedback styles</ListItemDescription>
206
+ </ListItemContent>
207
+ </ListItemLeading>
208
+ <ListItemTrailing>
209
+ <ChevronRight size={24} />
210
+ </ListItemTrailing>
211
+ </ListItem>
208
212
 
209
- <ListItem>
210
- <ListItemLeading>
211
- <Spot size={48} appearance='icon' icon={Wallet} />
212
- <ListItemContent>
213
- <ListItemContentRow>
214
- <ListItemTitle>Complex 1</ListItemTitle>
215
- <Tag size='sm' label='New' appearance='base' />
216
- </ListItemContentRow>
217
- <ListItemContentRow>
218
- <ListItemDescription>With description</ListItemDescription>
219
- <Tag size='sm' label='Custom Tag' appearance='gray' />
220
- </ListItemContentRow>
221
- </ListItemContent>
222
- </ListItemLeading>
223
- <ListItemTrailing>
224
- <ListItemContent>
225
- <ListItemTitle>42.10</ListItemTitle>
226
- <ListItemDescription>USD</ListItemDescription>
227
- </ListItemContent>
228
- </ListItemTrailing>
229
- </ListItem>
213
+ <ListItem onPress={() => setSelected(!selected)}>
214
+ <ListItemLeading>
215
+ <Spot size={48} appearance='icon' icon={Wallet} />
216
+ <ListItemContent>
217
+ <ListItemTitle>Toggle</ListItemTitle>
218
+ <ListItemDescription>Press to toggle</ListItemDescription>
219
+ </ListItemContent>
220
+ </ListItemLeading>
221
+ <ListItemTrailing>
222
+ <Switch checked={selected} onCheckedChange={setSelected} />
223
+ </ListItemTrailing>
224
+ </ListItem>
230
225
 
231
- <ListItem>
232
- <ListItemLeading>
233
- <Spot size={48} appearance='icon' icon={Wallet} />
234
- <ListItemContent>
235
- <ListItemTitle>Complex 2</ListItemTitle>
236
- <ListItemDescription>With description</ListItemDescription>
237
- </ListItemContent>
238
- </ListItemLeading>
239
- <ListItemTrailing>
240
- <ListItemContent>
241
- <ListItemContentRow>
242
- <Tag size='sm' label='New' appearance='base' />
243
- <ListItemTitle>1200.12</ListItemTitle>
244
- </ListItemContentRow>
245
- <ListItemContentRow>
246
- <Tag size='sm' label='BTC' appearance='gray' />
247
- </ListItemContentRow>
248
- </ListItemContent>
249
- </ListItemTrailing>
250
- </ListItem>
226
+ <ListItem onPress={() => {}}>
227
+ <ListItemLeading>
228
+ <Wallet size={24} />
229
+ <ListItemContent>
230
+ <ListItemTitle>Icon without Spot</ListItemTitle>
231
+ <ListItemDescription>With icon</ListItemDescription>
232
+ </ListItemContent>
233
+ </ListItemLeading>
234
+ <ListItemTrailing>
235
+ <ChevronRight size={24} />
236
+ </ListItemTrailing>
237
+ </ListItem>
238
+ </Box>
251
239
  </Box>
252
240
  );
253
241
  },
@@ -272,7 +260,7 @@ export const DisabledState: Story = {
272
260
  </ListItemTrailing>
273
261
  </ListItem>
274
262
 
275
- <ListItem {...args}>
263
+ <ListItem {...args} onPress={() => {}}>
276
264
  <ListItemLeading>
277
265
  <Spot size={48} appearance='icon' icon={Settings} />
278
266
  <ListItemContent>
@@ -336,73 +324,219 @@ export const DisabledState: Story = {
336
324
 
337
325
  export const ResponsiveLayout: Story = {
338
326
  render: () => (
339
- <Box
340
- lx={{
341
- width: 's400',
342
- borderWidth: 's1',
343
- borderColor: 'mutedSubtle',
344
- padding: 's16',
345
- }}
346
- >
347
- <Box lx={{ flexDirection: 'column' }}>
348
- <ListItem>
349
- <ListItemLeading>
350
- <Spot size={48} appearance='icon' icon={Settings} />
351
- <ListItemContent>
352
- <ListItemTitle>Short Title</ListItemTitle>
353
- <ListItemDescription>Short description</ListItemDescription>
354
- </ListItemContent>
355
- </ListItemLeading>
356
- <ListItemTrailing>
357
- <ChevronRight size={24} />
358
- </ListItemTrailing>
359
- </ListItem>
327
+ <Box lx={{ flexDirection: 'column', width: 's480', gap: 's32' }}>
328
+ <ListItem lx={{ alignSelf: 'flex-start' }} onPress={() => {}}>
329
+ <ListItemLeading>
330
+ <Spot size={48} appearance='icon' icon={Settings} />
331
+ <ListItemContent>
332
+ <ListItemTitle>Fit content</ListItemTitle>
333
+ <ListItemDescription>Short</ListItemDescription>
334
+ </ListItemContent>
335
+ </ListItemLeading>
336
+ <ListItemTrailing>
337
+ <ChevronRight size={24} />
338
+ </ListItemTrailing>
339
+ </ListItem>
360
340
 
361
- <ListItem>
362
- <ListItemLeading>
363
- <Spot size={48} appearance='icon' icon={Settings} />
364
- <ListItemContent>
341
+ <ListItem lx={{ width: 's320' }} onPress={() => {}}>
342
+ <ListItemLeading>
343
+ <Spot size={48} appearance='icon' icon={Settings} />
344
+ <ListItemContent>
345
+ <ListItemTitle>
346
+ Defined width (320px) with a long title that truncates
347
+ </ListItemTitle>
348
+ <ListItemDescription>
349
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
350
+ quos.
351
+ </ListItemDescription>
352
+ </ListItemContent>
353
+ </ListItemLeading>
354
+ <ListItemTrailing>
355
+ <ChevronRight size={24} />
356
+ </ListItemTrailing>
357
+ </ListItem>
358
+
359
+ <ListItem lx={{ width: 's320' }}>
360
+ <ListItemLeading>
361
+ <Spot size={48} appearance='icon' icon={Wallet} />
362
+ <ListItemContent>
363
+ <ListItemContentRow>
365
364
  <ListItemTitle>
366
- Long Title that should truncate appropriately
365
+ Defined width (320px) with ContentRow
367
366
  </ListItemTitle>
367
+ <Tag size='sm' label='New' appearance='base' />
368
+ </ListItemContentRow>
369
+ <ListItemContentRow>
368
370
  <ListItemDescription>
369
371
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
370
372
  Quisquam, quos.
371
373
  </ListItemDescription>
372
- </ListItemContent>
373
- </ListItemLeading>
374
- <ListItemTrailing>
375
- <ChevronRight size={24} />
376
- </ListItemTrailing>
377
- </ListItem>
374
+ <Tag size='sm' label='Custom Tag' appearance='gray' />
375
+ </ListItemContentRow>
376
+ </ListItemContent>
377
+ </ListItemLeading>
378
+ <ListItemTrailing>
379
+ <ListItemContent>
380
+ <ListItemTitle>42.10</ListItemTitle>
381
+ <ListItemDescription>USD</ListItemDescription>
382
+ </ListItemContent>
383
+ </ListItemTrailing>
384
+ </ListItem>
378
385
 
379
- <ListItem>
380
- <ListItemLeading>
381
- <Spot size={48} appearance='icon' icon={Wallet} />
382
- <ListItemContent>
383
- <ListItemContentRow>
384
- <ListItemTitle>
385
- Long Title that should truncate appropriately
386
- </ListItemTitle>
387
- <Tag size='sm' label='New' appearance='base' />
388
- </ListItemContentRow>
389
- <ListItemContentRow>
390
- <ListItemDescription>
391
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
392
- Quisquam, quos.
393
- </ListItemDescription>
394
- <Tag size='sm' label='Custom Tag' appearance='gray' />
395
- </ListItemContentRow>
396
- </ListItemContent>
397
- </ListItemLeading>
398
- <ListItemTrailing>
399
- <ListItemContent>
400
- <ListItemTitle>42.10</ListItemTitle>
401
- <ListItemDescription>USD</ListItemDescription>
402
- </ListItemContent>
403
- </ListItemTrailing>
404
- </ListItem>
405
- </Box>
386
+ <ListItem lx={{ width: 'full' }} onPress={() => {}}>
387
+ <ListItemLeading>
388
+ <Spot size={48} appearance='icon' icon={Settings} />
389
+ <ListItemContent>
390
+ <ListItemTitle>Full width (fills parent)</ListItemTitle>
391
+ <ListItemDescription>
392
+ Stretches to container width
393
+ </ListItemDescription>
394
+ </ListItemContent>
395
+ </ListItemLeading>
396
+ <ListItemTrailing>
397
+ <ChevronRight size={24} />
398
+ </ListItemTrailing>
399
+ </ListItem>
400
+ </Box>
401
+ ),
402
+ };
403
+
404
+ export const CompositionShowcase: Story = {
405
+ render: () => (
406
+ <Box lx={{ flexDirection: 'column', maxWidth: 's320', gap: 's8' }}>
407
+ <ListItem>
408
+ <ListItemLeading>
409
+ <Spot size={48} appearance='icon' icon={Settings} />
410
+ <ListItemContent>
411
+ <ListItemTitle>Simple composition</ListItemTitle>
412
+ </ListItemContent>
413
+ </ListItemLeading>
414
+ </ListItem>
415
+
416
+ <ListItem>
417
+ <ListItemLeading>
418
+ <Spot size={48} appearance='icon' icon={Settings} />
419
+ <ListItemContent>
420
+ <ListItemTitle>Crypto icon</ListItemTitle>
421
+ <ListItemContentRow>
422
+ <ListItemDescription>Inline with description</ListItemDescription>
423
+ <MediaImage
424
+ src='https://crypto-icons.ledger.com/ALGO.png'
425
+ alt='Algorand'
426
+ size={20}
427
+ />
428
+ </ListItemContentRow>
429
+ </ListItemContent>
430
+ </ListItemLeading>
431
+ </ListItem>
432
+
433
+ <ListItem>
434
+ <ListItemLeading>
435
+ <Spot size={48} appearance='icon' icon={Wallet} />
436
+ <ListItemContent>
437
+ <ListItemTitle>Content Variant</ListItemTitle>
438
+ <ListItemDescription>With description</ListItemDescription>
439
+ </ListItemContent>
440
+ </ListItemLeading>
441
+ <ListItemTrailing>
442
+ <ListItemContent>
443
+ <ListItemTitle>42.10</ListItemTitle>
444
+ <ListItemDescription>USD</ListItemDescription>
445
+ </ListItemContent>
446
+ </ListItemTrailing>
447
+ </ListItem>
448
+
449
+ <ListItem>
450
+ <ListItemLeading>
451
+ <Spot size={48} appearance='icon' icon={Wallet} />
452
+ <ListItemContent>
453
+ <ListItemTitle>Content Variant</ListItemTitle>
454
+ <ListItemDescription>Custom style</ListItemDescription>
455
+ </ListItemContent>
456
+ </ListItemLeading>
457
+ <ListItemTrailing>
458
+ <ListItemContent>
459
+ <ListItemTitle>USD</ListItemTitle>
460
+ <ListItemDescription lx={{ color: 'error' }}>
461
+ -7.53%
462
+ </ListItemDescription>
463
+ </ListItemContent>
464
+ </ListItemTrailing>
465
+ </ListItem>
466
+
467
+ <ListItem>
468
+ <ListItemLeading>
469
+ <Spot size={48} appearance='icon' icon={Wallet} />
470
+ <ListItemContent>
471
+ <ListItemTitle>Content Variant</ListItemTitle>
472
+ <ListItemDescription>Custom style</ListItemDescription>
473
+ </ListItemContent>
474
+ </ListItemLeading>
475
+ <ListItemTrailing>
476
+ <ListItemContent>
477
+ <ListItemTitle>USD</ListItemTitle>
478
+ <ListItemDescription lx={{ color: 'success' }}>
479
+ +7.53%
480
+ </ListItemDescription>
481
+ </ListItemContent>
482
+ </ListItemTrailing>
483
+ </ListItem>
484
+
485
+ <ListItem>
486
+ <ListItemLeading>
487
+ <Spot size={48} appearance='icon' icon={Settings} />
488
+ <ListItemContent>
489
+ <ListItemTitle>Tag Variant</ListItemTitle>
490
+ <ListItemDescription>With description</ListItemDescription>
491
+ </ListItemContent>
492
+ </ListItemLeading>
493
+ <ListItemTrailing>
494
+ <Tag size='sm' label='New' appearance='accent' />
495
+ </ListItemTrailing>
496
+ </ListItem>
497
+
498
+ <ListItem>
499
+ <ListItemLeading>
500
+ <Spot size={48} appearance='icon' icon={Wallet} />
501
+ <ListItemContent>
502
+ <ListItemContentRow>
503
+ <ListItemTitle>Complex 1</ListItemTitle>
504
+ <Tag size='sm' label='New' appearance='base' />
505
+ </ListItemContentRow>
506
+ <ListItemContentRow>
507
+ <ListItemDescription>With description</ListItemDescription>
508
+ <Tag size='sm' label='Custom Tag' appearance='gray' />
509
+ </ListItemContentRow>
510
+ </ListItemContent>
511
+ </ListItemLeading>
512
+ <ListItemTrailing>
513
+ <ListItemContent>
514
+ <ListItemTitle>42.10</ListItemTitle>
515
+ <ListItemDescription>USD</ListItemDescription>
516
+ </ListItemContent>
517
+ </ListItemTrailing>
518
+ </ListItem>
519
+
520
+ <ListItem>
521
+ <ListItemLeading>
522
+ <Spot size={48} appearance='icon' icon={Wallet} />
523
+ <ListItemContent>
524
+ <ListItemTitle>Complex 2</ListItemTitle>
525
+ <ListItemDescription>With description</ListItemDescription>
526
+ </ListItemContent>
527
+ </ListItemLeading>
528
+ <ListItemTrailing>
529
+ <ListItemContent>
530
+ <ListItemContentRow>
531
+ <Tag size='sm' label='New' appearance='base' />
532
+ <ListItemTitle>1200.12</ListItemTitle>
533
+ </ListItemContentRow>
534
+ <ListItemContentRow>
535
+ <Tag size='sm' label='BTC' appearance='gray' />
536
+ </ListItemContentRow>
537
+ </ListItemContent>
538
+ </ListItemTrailing>
539
+ </ListItem>
406
540
  </Box>
407
541
  ),
408
542
  };