@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.
- package/dist/module/lib/Components/ListItem/ListItem.js +57 -27
- package/dist/module/lib/Components/ListItem/ListItem.js.map +1 -1
- package/dist/module/lib/Components/ListItem/ListItem.mdx +15 -7
- package/dist/module/lib/Components/ListItem/ListItem.stories.js +497 -283
- package/dist/module/lib/Components/ListItem/ListItem.stories.js.map +1 -1
- package/dist/module/lib/Components/ListItem/ListItem.test.js +153 -0
- package/dist/module/lib/Components/ListItem/ListItem.test.js.map +1 -0
- package/dist/module/lib/Components/{TriggerButton/TriggerButton.js → MediaButton/MediaButton.js} +13 -10
- package/dist/module/lib/Components/MediaButton/MediaButton.js.map +1 -0
- package/{src/lib/Components/TriggerButton/TriggerButton.mdx → dist/module/lib/Components/MediaButton/MediaButton.mdx} +10 -10
- package/dist/module/lib/Components/{TriggerButton/TriggerButton.stories.js → MediaButton/MediaButton.stories.js} +18 -18
- package/dist/module/lib/Components/MediaButton/MediaButton.stories.js.map +1 -0
- package/dist/module/lib/Components/{TriggerButton/TriggerButton.test.js → MediaButton/MediaButton.test.js} +14 -14
- package/dist/module/lib/Components/MediaButton/MediaButton.test.js.map +1 -0
- package/dist/module/lib/Components/MediaButton/index.js +5 -0
- package/dist/module/lib/Components/MediaButton/index.js.map +1 -0
- package/dist/module/lib/Components/MediaButton/types.js.map +1 -0
- package/dist/module/lib/Components/NavBar/NavBar.js +0 -2
- package/dist/module/lib/Components/NavBar/NavBar.js.map +1 -1
- package/dist/module/lib/Components/OptionList/OptionList.figma.js +28 -0
- package/dist/module/lib/Components/OptionList/OptionList.figma.js.map +1 -0
- package/dist/module/lib/Components/OptionList/OptionList.js +452 -0
- package/dist/module/lib/Components/OptionList/OptionList.js.map +1 -0
- package/dist/module/lib/Components/OptionList/OptionList.mdx +304 -0
- package/dist/module/lib/Components/OptionList/OptionList.stories.js +735 -0
- package/dist/module/lib/Components/OptionList/OptionList.stories.js.map +1 -0
- package/dist/module/lib/Components/OptionList/OptionList.test.js +443 -0
- package/dist/module/lib/Components/OptionList/OptionList.test.js.map +1 -0
- package/dist/module/lib/Components/OptionList/index.js +5 -0
- package/dist/module/lib/Components/OptionList/index.js.map +1 -0
- package/dist/module/lib/Components/OptionList/types.js +4 -0
- package/dist/module/lib/Components/OptionList/types.js.map +1 -0
- package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.js +36 -0
- package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.js.map +1 -0
- package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.test.js +84 -0
- package/dist/module/lib/Components/OptionList/useOptionList/useOptionListItems.test.js.map +1 -0
- package/dist/module/lib/Components/index.js +2 -1
- package/dist/module/lib/Components/index.js.map +1 -1
- package/dist/typescript/src/lib/Components/ListItem/ListItem.d.ts +8 -8
- package/dist/typescript/src/lib/Components/ListItem/ListItem.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/ListItem/types.d.ts +11 -7
- package/dist/typescript/src/lib/Components/ListItem/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaButton/MediaButton.d.ts +23 -0
- package/dist/typescript/src/lib/Components/MediaButton/MediaButton.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaButton/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/MediaButton/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/{TriggerButton → MediaButton}/types.d.ts +10 -5
- package/dist/typescript/src/lib/Components/MediaButton/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/OptionList/OptionList.d.ts +12 -0
- package/dist/typescript/src/lib/Components/OptionList/OptionList.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/OptionList/OptionList.figma.d.ts +2 -0
- package/dist/typescript/src/lib/Components/OptionList/OptionList.figma.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/OptionList/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/OptionList/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/OptionList/types.d.ts +97 -0
- package/dist/typescript/src/lib/Components/OptionList/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/OptionList/useOptionList/useOptionListItems.d.ts +12 -0
- package/dist/typescript/src/lib/Components/OptionList/useOptionList/useOptionListItems.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/index.d.ts +2 -1
- package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
- package/dist/typescript/src/styles/types/theme.types.d.ts +7 -6
- package/dist/typescript/src/styles/types/theme.types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/lib/Components/ListItem/ListItem.mdx +15 -7
- package/src/lib/Components/ListItem/ListItem.stories.tsx +354 -220
- package/src/lib/Components/ListItem/ListItem.test.tsx +152 -0
- package/src/lib/Components/ListItem/ListItem.tsx +63 -28
- package/src/lib/Components/ListItem/types.ts +11 -8
- package/{dist/module/lib/Components/TriggerButton/TriggerButton.mdx → src/lib/Components/MediaButton/MediaButton.mdx} +10 -10
- package/src/lib/Components/{TriggerButton/TriggerButton.stories.tsx → MediaButton/MediaButton.stories.tsx} +28 -28
- package/src/lib/Components/{TriggerButton/TriggerButton.test.tsx → MediaButton/MediaButton.test.tsx} +22 -22
- package/src/lib/Components/{TriggerButton/TriggerButton.tsx → MediaButton/MediaButton.tsx} +27 -21
- package/src/lib/Components/MediaButton/index.ts +2 -0
- package/src/lib/Components/{TriggerButton → MediaButton}/types.ts +10 -5
- package/src/lib/Components/NavBar/NavBar.tsx +0 -3
- package/src/lib/Components/OptionList/OptionList.figma.tsx +37 -0
- package/src/lib/Components/OptionList/OptionList.mdx +304 -0
- package/src/lib/Components/OptionList/OptionList.stories.tsx +755 -0
- package/src/lib/Components/OptionList/OptionList.test.tsx +412 -0
- package/src/lib/Components/OptionList/OptionList.tsx +532 -0
- package/src/lib/Components/OptionList/index.ts +2 -0
- package/src/lib/Components/OptionList/types.ts +115 -0
- package/src/lib/Components/OptionList/useOptionList/useOptionListItems.test.ts +73 -0
- package/src/lib/Components/OptionList/useOptionList/useOptionListItems.ts +49 -0
- package/src/lib/Components/index.ts +2 -1
- package/src/styles/types/theme.types.ts +8 -6
- package/dist/module/lib/Components/TriggerButton/TriggerButton.js.map +0 -1
- package/dist/module/lib/Components/TriggerButton/TriggerButton.stories.js.map +0 -1
- package/dist/module/lib/Components/TriggerButton/TriggerButton.test.js.map +0 -1
- package/dist/module/lib/Components/TriggerButton/index.js +0 -5
- package/dist/module/lib/Components/TriggerButton/index.js.map +0 -1
- package/dist/module/lib/Components/TriggerButton/types.js.map +0 -1
- package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts +0 -23
- package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts.map +0 -1
- package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts +0 -3
- package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts.map +0 -1
- package/dist/typescript/src/lib/Components/TriggerButton/types.d.ts.map +0 -1
- package/src/lib/Components/TriggerButton/index.ts +0 -2
- /package/dist/module/lib/Components/{TriggerButton → MediaButton}/types.js +0 -0
|
@@ -9,23 +9,23 @@ const [ListItemTrailingProvider, useListItemTrailingContext] = createSafeContext
|
|
|
9
9
|
isInTrailing: false
|
|
10
10
|
});
|
|
11
11
|
const useRootStyles = ({
|
|
12
|
-
pressed
|
|
12
|
+
pressed,
|
|
13
|
+
density
|
|
13
14
|
}) => {
|
|
14
15
|
return useStyleSheet(t => ({
|
|
15
16
|
container: StyleSheet.flatten([{
|
|
16
17
|
flexDirection: 'row',
|
|
17
18
|
alignItems: 'center',
|
|
18
|
-
height: t.sizes.s64,
|
|
19
|
+
height: density === 'compact' ? t.sizes.s40 : t.sizes.s64,
|
|
19
20
|
width: t.sizes.full,
|
|
20
21
|
gap: t.spacings.s16,
|
|
21
22
|
borderRadius: t.borderRadius.md,
|
|
22
23
|
backgroundColor: 'transparent',
|
|
23
|
-
paddingHorizontal: t.spacings.s8
|
|
24
|
-
paddingVertical: t.spacings.s12
|
|
24
|
+
paddingHorizontal: t.spacings.s8
|
|
25
25
|
}, pressed && {
|
|
26
26
|
backgroundColor: t.colors.bg.baseTransparentPressed
|
|
27
27
|
}])
|
|
28
|
-
}), [pressed]);
|
|
28
|
+
}), [pressed, density]);
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
/**
|
|
@@ -68,8 +68,11 @@ export const ListItem = ({
|
|
|
68
68
|
lx = {},
|
|
69
69
|
style,
|
|
70
70
|
disabled: disabledProp = false,
|
|
71
|
+
density = 'expanded',
|
|
72
|
+
onPress,
|
|
73
|
+
onLongPress,
|
|
71
74
|
ref,
|
|
72
|
-
...
|
|
75
|
+
...props
|
|
73
76
|
}) => {
|
|
74
77
|
const disabled = useDisabledContext({
|
|
75
78
|
consumerName: 'ListItem',
|
|
@@ -77,24 +80,49 @@ export const ListItem = ({
|
|
|
77
80
|
disabled: disabledProp
|
|
78
81
|
}
|
|
79
82
|
});
|
|
83
|
+
const isInteractive = !!onPress || !!onLongPress;
|
|
84
|
+
if (isInteractive) {
|
|
85
|
+
return /*#__PURE__*/_jsx(DisabledProvider, {
|
|
86
|
+
value: {
|
|
87
|
+
disabled
|
|
88
|
+
},
|
|
89
|
+
children: /*#__PURE__*/_jsx(Pressable, {
|
|
90
|
+
ref: ref,
|
|
91
|
+
lx: lx,
|
|
92
|
+
style: style,
|
|
93
|
+
disabled: disabled,
|
|
94
|
+
onPress: onPress,
|
|
95
|
+
onLongPress: onLongPress,
|
|
96
|
+
accessibilityRole: "button",
|
|
97
|
+
accessibilityState: {
|
|
98
|
+
disabled
|
|
99
|
+
},
|
|
100
|
+
...props,
|
|
101
|
+
children: ({
|
|
102
|
+
pressed
|
|
103
|
+
}) => /*#__PURE__*/_jsx(ListItemInner, {
|
|
104
|
+
pressed: pressed,
|
|
105
|
+
density: density,
|
|
106
|
+
children: children
|
|
107
|
+
})
|
|
108
|
+
})
|
|
109
|
+
});
|
|
110
|
+
}
|
|
80
111
|
return /*#__PURE__*/_jsx(DisabledProvider, {
|
|
81
112
|
value: {
|
|
82
113
|
disabled
|
|
83
114
|
},
|
|
84
|
-
children: /*#__PURE__*/_jsx(
|
|
115
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
85
116
|
ref: ref,
|
|
86
117
|
lx: lx,
|
|
87
118
|
style: style,
|
|
88
|
-
disabled: disabled,
|
|
89
|
-
accessibilityRole: "button",
|
|
90
119
|
accessibilityState: {
|
|
91
120
|
disabled
|
|
92
121
|
},
|
|
93
|
-
...
|
|
94
|
-
children: ({
|
|
95
|
-
pressed
|
|
96
|
-
|
|
97
|
-
pressed: pressed,
|
|
122
|
+
...props,
|
|
123
|
+
children: /*#__PURE__*/_jsx(ListItemInner, {
|
|
124
|
+
pressed: false,
|
|
125
|
+
density: density,
|
|
98
126
|
children: children
|
|
99
127
|
})
|
|
100
128
|
})
|
|
@@ -106,10 +134,12 @@ export const ListItem = ({
|
|
|
106
134
|
*/
|
|
107
135
|
const ListItemInner = ({
|
|
108
136
|
pressed,
|
|
137
|
+
density,
|
|
109
138
|
children
|
|
110
139
|
}) => {
|
|
111
140
|
const styles = useRootStyles({
|
|
112
|
-
pressed
|
|
141
|
+
pressed,
|
|
142
|
+
density
|
|
113
143
|
});
|
|
114
144
|
return /*#__PURE__*/_jsx(View, {
|
|
115
145
|
style: styles.container,
|
|
@@ -127,7 +157,7 @@ export const ListItemLeading = ({
|
|
|
127
157
|
lx = {},
|
|
128
158
|
style,
|
|
129
159
|
ref,
|
|
130
|
-
...
|
|
160
|
+
...props
|
|
131
161
|
}) => {
|
|
132
162
|
const styles = useStyleSheet(t => ({
|
|
133
163
|
leading: {
|
|
@@ -142,7 +172,7 @@ export const ListItemLeading = ({
|
|
|
142
172
|
ref: ref,
|
|
143
173
|
lx: lx,
|
|
144
174
|
style: StyleSheet.flatten([styles.leading, style]),
|
|
145
|
-
...
|
|
175
|
+
...props,
|
|
146
176
|
children: children
|
|
147
177
|
});
|
|
148
178
|
};
|
|
@@ -155,7 +185,7 @@ export const ListItemContent = ({
|
|
|
155
185
|
lx = {},
|
|
156
186
|
style,
|
|
157
187
|
ref,
|
|
158
|
-
...
|
|
188
|
+
...props
|
|
159
189
|
}) => {
|
|
160
190
|
const {
|
|
161
191
|
isInTrailing
|
|
@@ -175,7 +205,7 @@ export const ListItemContent = ({
|
|
|
175
205
|
ref: ref,
|
|
176
206
|
lx: lx,
|
|
177
207
|
style: StyleSheet.flatten([styles.content, style]),
|
|
178
|
-
...
|
|
208
|
+
...props,
|
|
179
209
|
children: children
|
|
180
210
|
});
|
|
181
211
|
};
|
|
@@ -189,7 +219,7 @@ export const ListItemContentRow = ({
|
|
|
189
219
|
lx = {},
|
|
190
220
|
style,
|
|
191
221
|
ref,
|
|
192
|
-
...
|
|
222
|
+
...props
|
|
193
223
|
}) => {
|
|
194
224
|
const styles = useStyleSheet(t => ({
|
|
195
225
|
row: {
|
|
@@ -203,7 +233,7 @@ export const ListItemContentRow = ({
|
|
|
203
233
|
ref: ref,
|
|
204
234
|
lx: lx,
|
|
205
235
|
style: StyleSheet.flatten([styles.row, style]),
|
|
206
|
-
...
|
|
236
|
+
...props,
|
|
207
237
|
children: children
|
|
208
238
|
});
|
|
209
239
|
};
|
|
@@ -216,7 +246,7 @@ export const ListItemTitle = ({
|
|
|
216
246
|
lx = {},
|
|
217
247
|
style,
|
|
218
248
|
ref,
|
|
219
|
-
...
|
|
249
|
+
...props
|
|
220
250
|
}) => {
|
|
221
251
|
const disabled = useDisabledContext({
|
|
222
252
|
consumerName: 'ListItemTitle',
|
|
@@ -243,7 +273,7 @@ export const ListItemTitle = ({
|
|
|
243
273
|
numberOfLines: 1,
|
|
244
274
|
ellipsizeMode: "tail",
|
|
245
275
|
allowFontScaling: false,
|
|
246
|
-
...
|
|
276
|
+
...props,
|
|
247
277
|
children: children
|
|
248
278
|
});
|
|
249
279
|
};
|
|
@@ -257,7 +287,7 @@ export const ListItemDescription = ({
|
|
|
257
287
|
lx = {},
|
|
258
288
|
style,
|
|
259
289
|
ref,
|
|
260
|
-
...
|
|
290
|
+
...props
|
|
261
291
|
}) => {
|
|
262
292
|
const disabled = useDisabledContext({
|
|
263
293
|
consumerName: 'ListItemDescription',
|
|
@@ -284,7 +314,7 @@ export const ListItemDescription = ({
|
|
|
284
314
|
numberOfLines: 1,
|
|
285
315
|
ellipsizeMode: "tail",
|
|
286
316
|
allowFontScaling: false,
|
|
287
|
-
...
|
|
317
|
+
...props,
|
|
288
318
|
children: children
|
|
289
319
|
});
|
|
290
320
|
};
|
|
@@ -298,7 +328,7 @@ export const ListItemTrailing = ({
|
|
|
298
328
|
lx = {},
|
|
299
329
|
style,
|
|
300
330
|
ref,
|
|
301
|
-
...
|
|
331
|
+
...props
|
|
302
332
|
}) => {
|
|
303
333
|
const styles = useStyleSheet(() => ({
|
|
304
334
|
trailing: {
|
|
@@ -314,7 +344,7 @@ export const ListItemTrailing = ({
|
|
|
314
344
|
ref: ref,
|
|
315
345
|
lx: lx,
|
|
316
346
|
style: StyleSheet.flatten([styles.trailing, style]),
|
|
317
|
-
...
|
|
347
|
+
...props,
|
|
318
348
|
children: children
|
|
319
349
|
})
|
|
320
350
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createSafeContext","DisabledProvider","useDisabledContext","StyleSheet","View","useStyleSheet","Box","Pressable","Text","jsx","_jsx","ListItemTrailingProvider","useListItemTrailingContext","isInTrailing","useRootStyles","pressed","t","container","flatten","flexDirection","alignItems","height","sizes","s64","width","full","gap","spacings","s16","borderRadius","md","backgroundColor","paddingHorizontal","s8","
|
|
1
|
+
{"version":3,"names":["createSafeContext","DisabledProvider","useDisabledContext","StyleSheet","View","useStyleSheet","Box","Pressable","Text","jsx","_jsx","ListItemTrailingProvider","useListItemTrailingContext","isInTrailing","useRootStyles","pressed","density","t","container","flatten","flexDirection","alignItems","height","sizes","s40","s64","width","full","gap","spacings","s16","borderRadius","md","backgroundColor","paddingHorizontal","s8","colors","bg","baseTransparentPressed","ListItem","children","lx","style","disabled","disabledProp","onPress","onLongPress","ref","props","consumerName","mergeWith","isInteractive","value","accessibilityRole","accessibilityState","ListItemInner","styles","testID","ListItemLeading","leading","flex","minWidth","s12","ListItemContent","contextRequired","content","s4","ListItemContentRow","row","ListItemTitle","title","typographies","body2SemiBold","flexShrink","textAlign","color","text","base","numberOfLines","ellipsizeMode","allowFontScaling","ListItemDescription","description","body3","muted","ListItemTrailing","trailing"],"sourceRoot":"../../../../../src","sources":["lib/Components/ListItem/ListItem.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -36,7 +36,7 @@ ListItems are flexible interactive elements designed for lists. They use a compo
|
|
|
36
36
|
|
|
37
37
|
<Canvas of={ListItemStories.Base} />
|
|
38
38
|
|
|
39
|
-
- **ListItem**: Root
|
|
39
|
+
- **ListItem**: Root container (View or Pressable based on interactivity)
|
|
40
40
|
- **ListItemLeading**: Left section containing visual element and content
|
|
41
41
|
- **ListItemContent**: Container for title and description
|
|
42
42
|
- **ListItemContentRow**: Horizontal row within ListItemContent for placing a title or description alongside inline elements like Tag
|
|
@@ -46,16 +46,18 @@ ListItems are flexible interactive elements designed for lists. They use a compo
|
|
|
46
46
|
|
|
47
47
|
## Properties
|
|
48
48
|
|
|
49
|
-
### Overview
|
|
50
|
-
|
|
51
49
|
<Canvas of={ListItemStories.Base} />
|
|
52
50
|
<Controls of={ListItemStories.Base} />
|
|
53
51
|
|
|
54
|
-
###
|
|
52
|
+
### Density
|
|
53
|
+
|
|
54
|
+
<Canvas of={ListItemStories.DensityShowcase} />
|
|
55
55
|
|
|
56
|
-
|
|
56
|
+
### Interactivity
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
The ListItem can be interactive or non-interactive. By default, the ListItem is non-interactive. To make it interactive, you need to pass an `onPress` prop.
|
|
59
|
+
|
|
60
|
+
<Canvas of={ListItemStories.InteractiveShowcase} />
|
|
59
61
|
|
|
60
62
|
### Disabled State
|
|
61
63
|
|
|
@@ -63,12 +65,18 @@ When disabled, the ListItem becomes non-interactive. The disabled state is autom
|
|
|
63
65
|
|
|
64
66
|
<Canvas of={ListItemStories.DisabledState} />
|
|
65
67
|
|
|
66
|
-
|
|
68
|
+
### Responsive Layout
|
|
67
69
|
|
|
68
70
|
ListItems adapt to their container width, truncating long titles and descriptions as needed.
|
|
69
71
|
|
|
70
72
|
<Canvas of={ListItemStories.ResponsiveLayout} />
|
|
71
73
|
|
|
74
|
+
### Composition
|
|
75
|
+
|
|
76
|
+
ListItems follow a composite component pattern to allow for maximum flexibility over layout and content through composable sub-components.
|
|
77
|
+
|
|
78
|
+
<Canvas of={ListItemStories.CompositionShowcase} />
|
|
79
|
+
|
|
72
80
|
> **Key behaviors:**
|
|
73
81
|
>
|
|
74
82
|
> - Automatically fits container width
|