@ledgerhq/lumen-ui-rnative 0.1.35 → 0.1.36
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/Animations/Pulse/Pulse.js +2 -2
- package/dist/module/lib/Animations/Pulse/Pulse.js.map +1 -1
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.js +184 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.js.map +1 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.mdx +139 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.stories.js +258 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.stories.js.map +1 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.test.js +94 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.test.js.map +1 -0
- package/dist/module/lib/Components/DescriptionItem/index.js +5 -0
- package/dist/module/lib/Components/DescriptionItem/index.js.map +1 -0
- package/dist/module/lib/Components/DescriptionItem/types.js +4 -0
- package/dist/module/lib/Components/DescriptionItem/types.js.map +1 -0
- package/dist/module/lib/Components/NavBar/CoinCapsule.js +1 -0
- package/dist/module/lib/Components/NavBar/CoinCapsule.js.map +1 -1
- package/dist/module/lib/Components/index.js +1 -0
- package/dist/module/lib/Components/index.js.map +1 -1
- package/dist/typescript/src/lib/Animations/Pulse/Pulse.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/DescriptionItem/DescriptionItem.d.ts +42 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/DescriptionItem.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/types.d.ts +39 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/index.d.ts +1 -0
- package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/lib/Animations/Pulse/Pulse.tsx +6 -3
- package/src/lib/Components/DescriptionItem/DescriptionItem.mdx +139 -0
- package/src/lib/Components/DescriptionItem/DescriptionItem.stories.tsx +234 -0
- package/src/lib/Components/DescriptionItem/DescriptionItem.test.tsx +112 -0
- package/src/lib/Components/DescriptionItem/DescriptionItem.tsx +224 -0
- package/src/lib/Components/DescriptionItem/index.ts +2 -0
- package/src/lib/Components/DescriptionItem/types.ts +44 -0
- package/src/lib/Components/NavBar/CoinCapsule.tsx +1 -0
- package/src/lib/Components/index.ts +1 -0
|
@@ -13,7 +13,7 @@ const TIMING_DEFAULTS = {
|
|
|
13
13
|
const _worklet_14803833854110_init_data = {
|
|
14
14
|
code: "function PulseTsx1(){const{sv}=this.__closure;return{opacity:sv.value};}",
|
|
15
15
|
location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Animations/Pulse/Pulse.tsx",
|
|
16
|
-
sourceMap: "{\"version\":3,\"names\":[\"PulseTsx1\",\"sv\",\"__closure\",\"opacity\",\"value\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Animations/Pulse/Pulse.tsx\"],\"mappings\":\"
|
|
16
|
+
sourceMap: "{\"version\":3,\"names\":[\"PulseTsx1\",\"sv\",\"__closure\",\"opacity\",\"value\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Animations/Pulse/Pulse.tsx\"],\"mappings\":\"AA4CM,SAAAA,UAAA,QAAAC,EAAA,OAAAC,SAAA,OAAO,CACLC,OAAO,CAAEF,EAAE,CAACG,KACd,CAAC\",\"ignoreList\":[]}"
|
|
17
17
|
};
|
|
18
18
|
export const Pulse = /*#__PURE__*/memo(({
|
|
19
19
|
children,
|
|
@@ -60,7 +60,7 @@ export const Pulse = /*#__PURE__*/memo(({
|
|
|
60
60
|
}({
|
|
61
61
|
_worklet_14803833854110_init_data,
|
|
62
62
|
sv
|
|
63
|
-
}));
|
|
63
|
+
}), [sv]);
|
|
64
64
|
return /*#__PURE__*/_jsx(Animated.View, {
|
|
65
65
|
...props,
|
|
66
66
|
collapsable: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","memo","Animated","cancelAnimation","useAnimatedStyle","useSharedValue","withRepeat","withTiming","useResolveViewStyle","useTimingConfig","jsx","_jsx","MIN_OPACITY","TIMING_DEFAULTS","duration","easing","_worklet_14803833854110_init_data","code","location","sourceMap","Pulse","children","timing","animate","style","lx","props","sv","resolvedLxStyle","timingConfig","value","animatedStyle","PulseTsx1Factory","_e","global","Error","PulseTsx1","opacity","__closure","__workletHash","__pluginVersion","__initData","__stackDetails","View","collapsable","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Animations/Pulse/Pulse.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,IAAI,QAAQ,OAAO;AACvC,OAAOC,QAAQ,IACbC,eAAe,EACfC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAChC,SAASC,mBAAmB,QAAQ,0BAAiB;AAErD,SAASC,eAAe,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrD,MAAMC,WAAW,GAAG,IAAI;AAExB,MAAMC,eAA6B,GAAG;EACpCC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE;AACV,CAAC;AAAC,MAAAC,iCAAA;EAAAC,IAAA;EAAAC,QAAA;EAAAC,SAAA;AAAA;AACF,OAAO,MAAMC,KAAK,gBAAGnB,IAAI,CACvB,CAAC;EAAEoB,QAAQ;EAAEC,MAAM;EAAEC,OAAO;EAAEC,KAAK;EAAEC,EAAE,GAAG,CAAC,CAAC;EAAE,GAAGC;AAAkB,CAAC,KAAK;EACvE,MAAMC,EAAE,GAAGtB,cAAc,CAAS,CAAC,CAAC;EACpC,MAAMuB,eAAe,GAAGpB,mBAAmB,CAACiB,EAAE,EAAED,KAAK,CAAC;EAEtD,MAAMK,YAAY,GAAGpB,eAAe,CAAC;IACnCK,QAAQ,EAAEQ,MAAM,EAAER,QAAQ,IAAID,eAAe,CAACC,QAAQ;IACtDC,MAAM,EAAEO,MAAM,EAAEP,MAAM,IAAIF,eAAe,CAACE;EAC5C,CAAC,CAAC;EAEFf,SAAS,CAAC,MAAM;IACd,IAAIuB,OAAO,EAAE;MACXI,EAAE,CAACG,KAAK,GAAGxB,UAAU,CAACC,UAAU,CAACK,WAAW,EAAEiB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;IACxE,CAAC,MAAM;MACL1B,eAAe,CAACwB,EAAE,CAAC;MACnBA,EAAE,CAACG,KAAK,GAAGvB,UAAU,CAAC,CAAC,EAAEsB,YAAY,CAAC;IACxC;IAEA,OAAO,MAAM;MACX1B,eAAe,CAACwB,EAAE,CAAC;MACnBA,EAAE,CAACG,KAAK,GAAG,CAAC;IACd,CAAC;EACH,CAAC,EAAE,CAACH,EAAE,EAAEJ,OAAO,EAAEM,YAAY,CAAC,CAAC;EAE/B,MAAME,aAAa,GAAG3B,gBAAgB,
|
|
1
|
+
{"version":3,"names":["useEffect","memo","Animated","cancelAnimation","useAnimatedStyle","useSharedValue","withRepeat","withTiming","useResolveViewStyle","useTimingConfig","jsx","_jsx","MIN_OPACITY","TIMING_DEFAULTS","duration","easing","_worklet_14803833854110_init_data","code","location","sourceMap","Pulse","children","timing","animate","style","lx","props","sv","resolvedLxStyle","timingConfig","value","animatedStyle","PulseTsx1Factory","_e","global","Error","PulseTsx1","opacity","__closure","__workletHash","__pluginVersion","__initData","__stackDetails","View","collapsable","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Animations/Pulse/Pulse.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,IAAI,QAAQ,OAAO;AACvC,OAAOC,QAAQ,IACbC,eAAe,EACfC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAChC,SAASC,mBAAmB,QAAQ,0BAAiB;AAErD,SAASC,eAAe,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrD,MAAMC,WAAW,GAAG,IAAI;AAExB,MAAMC,eAA6B,GAAG;EACpCC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE;AACV,CAAC;AAAC,MAAAC,iCAAA;EAAAC,IAAA;EAAAC,QAAA;EAAAC,SAAA;AAAA;AACF,OAAO,MAAMC,KAAK,gBAAGnB,IAAI,CACvB,CAAC;EAAEoB,QAAQ;EAAEC,MAAM;EAAEC,OAAO;EAAEC,KAAK;EAAEC,EAAE,GAAG,CAAC,CAAC;EAAE,GAAGC;AAAkB,CAAC,KAAK;EACvE,MAAMC,EAAE,GAAGtB,cAAc,CAAS,CAAC,CAAC;EACpC,MAAMuB,eAAe,GAAGpB,mBAAmB,CAACiB,EAAE,EAAED,KAAK,CAAC;EAEtD,MAAMK,YAAY,GAAGpB,eAAe,CAAC;IACnCK,QAAQ,EAAEQ,MAAM,EAAER,QAAQ,IAAID,eAAe,CAACC,QAAQ;IACtDC,MAAM,EAAEO,MAAM,EAAEP,MAAM,IAAIF,eAAe,CAACE;EAC5C,CAAC,CAAC;EAEFf,SAAS,CAAC,MAAM;IACd,IAAIuB,OAAO,EAAE;MACXI,EAAE,CAACG,KAAK,GAAGxB,UAAU,CAACC,UAAU,CAACK,WAAW,EAAEiB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;IACxE,CAAC,MAAM;MACL1B,eAAe,CAACwB,EAAE,CAAC;MACnBA,EAAE,CAACG,KAAK,GAAGvB,UAAU,CAAC,CAAC,EAAEsB,YAAY,CAAC;IACxC;IAEA,OAAO,MAAM;MACX1B,eAAe,CAACwB,EAAE,CAAC;MACnBA,EAAE,CAACG,KAAK,GAAG,CAAC;IACd,CAAC;EACH,CAAC,EAAE,CAACH,EAAE,EAAEJ,OAAO,EAAEM,YAAY,CAAC,CAAC;EAE/B,MAAME,aAAa,GAAG3B,gBAAgB,CACpC,SAAA4B,iBAAA;IAAAhB,iCAAA;IACWW;EAAE;IAAA,MAAAM,EAAA,QAAAC,MAAA,CAAAC,KAAA;IAAA,MAAAC,SAAA,GADbA,CAAA,MAAO;MACLC,OAAO,EAAEV,EAAE,CAACG;IACd,CAAC,CAAC;IAAAM,SAAA,CAAAE,SAAA;MADSX;IAAE;IAAAS,SAAA,CAAAG,aAAA;IAAAH,SAAA,CAAAI,eAAA;IAAAJ,SAAA,CAAAK,UAAA,GAAAzB,iCAAA;IAAAoB,SAAA,CAAAM,cAAA,GAAAT,EAAA;IAAA,OAAAG,SAAA;EAAA,CADb;IAAApB,iCAAA;IACWW;EAAE,IAEb,CAACA,EAAE,CACL,CAAC;EAED,oBACEhB,IAAA,CAACT,QAAQ,CAACyC,IAAI;IAAA,GACRjB,KAAK;IACTkB,WAAW,EAAE,KAAM;IACnBpB,KAAK,EAAE,CAACI,eAAe,EAAEG,aAAa,CAAE;IAAAV,QAAA,EAEvCA;EAAQ,CACI,CAAC;AAEpB,CACF,CAAC;AACDD,KAAK,CAACyB,WAAW,GAAG,OAAO","ignoreList":[]}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
|
|
4
|
+
import { StyleSheet } from 'react-native';
|
|
5
|
+
import { useStyleSheet } from "../../../styles/index.js";
|
|
6
|
+
import { Box, Text } from "../Utility/index.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
const [DescriptionItemSizeProvider, useDescriptionItemSizeContext] = createSafeContext('DescriptionItemSize', {
|
|
9
|
+
size: 'md'
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* A compound component for displaying a key-value description row.
|
|
14
|
+
* Composed with DescriptionItemLeading / DescriptionItemLabel (key side)
|
|
15
|
+
* and DescriptionItemTrailing / DescriptionItemValue (value side).
|
|
16
|
+
*
|
|
17
|
+
* @see {@link https://ldls.vercel.app/?path=/docs/containment-descriptionitem--docs Storybook}
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* <DescriptionItem size="md">
|
|
21
|
+
* <DescriptionItemLeading>
|
|
22
|
+
* <DescriptionItemLabel>Fees</DescriptionItemLabel>
|
|
23
|
+
* </DescriptionItemLeading>
|
|
24
|
+
* <DescriptionItemTrailing>
|
|
25
|
+
* <DescriptionItemValue>0.001 BTC</DescriptionItemValue>
|
|
26
|
+
* </DescriptionItemTrailing>
|
|
27
|
+
* </DescriptionItem>
|
|
28
|
+
*/
|
|
29
|
+
export const DescriptionItem = ({
|
|
30
|
+
children,
|
|
31
|
+
lx = {},
|
|
32
|
+
style,
|
|
33
|
+
size = 'md',
|
|
34
|
+
...props
|
|
35
|
+
}) => {
|
|
36
|
+
const styles = useStyleSheet(t => ({
|
|
37
|
+
root: {
|
|
38
|
+
width: '100%',
|
|
39
|
+
flexDirection: 'row',
|
|
40
|
+
alignItems: 'flex-start',
|
|
41
|
+
gap: t.spacings.s12
|
|
42
|
+
}
|
|
43
|
+
}), []);
|
|
44
|
+
return /*#__PURE__*/_jsx(DescriptionItemSizeProvider, {
|
|
45
|
+
value: {
|
|
46
|
+
size
|
|
47
|
+
},
|
|
48
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
49
|
+
lx: lx,
|
|
50
|
+
style: StyleSheet.flatten([styles.root, style]),
|
|
51
|
+
...props,
|
|
52
|
+
children: children
|
|
53
|
+
})
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Layout container for the leading (left) side of the description item.
|
|
59
|
+
* Contains DescriptionItemLabel and an optional info icon sibling.
|
|
60
|
+
*/
|
|
61
|
+
export const DescriptionItemLeading = ({
|
|
62
|
+
children,
|
|
63
|
+
lx = {},
|
|
64
|
+
style,
|
|
65
|
+
...props
|
|
66
|
+
}) => {
|
|
67
|
+
const styles = useStyleSheet(t => ({
|
|
68
|
+
leading: {
|
|
69
|
+
flex: 1,
|
|
70
|
+
minWidth: 0,
|
|
71
|
+
flexDirection: 'row',
|
|
72
|
+
alignItems: 'center',
|
|
73
|
+
gap: t.spacings.s4
|
|
74
|
+
}
|
|
75
|
+
}), []);
|
|
76
|
+
return /*#__PURE__*/_jsx(Box, {
|
|
77
|
+
lx: lx,
|
|
78
|
+
style: StyleSheet.flatten([styles.leading, style]),
|
|
79
|
+
...props,
|
|
80
|
+
children: children
|
|
81
|
+
});
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Typography-bearing label for the leading side.
|
|
86
|
+
* Reads size from DescriptionItemSizeContext to apply the correct typography
|
|
87
|
+
* based on the size of the parent `DescriptionItem`.
|
|
88
|
+
*/
|
|
89
|
+
export const DescriptionItemLabel = ({
|
|
90
|
+
children,
|
|
91
|
+
lx = {},
|
|
92
|
+
style,
|
|
93
|
+
numberOfLines = 2,
|
|
94
|
+
ellipsizeMode = 'tail',
|
|
95
|
+
...props
|
|
96
|
+
}) => {
|
|
97
|
+
const {
|
|
98
|
+
size
|
|
99
|
+
} = useDescriptionItemSizeContext({
|
|
100
|
+
consumerName: 'DescriptionItemLabel',
|
|
101
|
+
contextRequired: false
|
|
102
|
+
});
|
|
103
|
+
const styles = useStyleSheet(t => ({
|
|
104
|
+
label: StyleSheet.flatten([size === 'md' ? t.typographies.body2 : t.typographies.body3, {
|
|
105
|
+
flexShrink: 1,
|
|
106
|
+
minWidth: 0,
|
|
107
|
+
color: t.colors.text.muted
|
|
108
|
+
}])
|
|
109
|
+
}), [size]);
|
|
110
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
111
|
+
lx: lx,
|
|
112
|
+
style: StyleSheet.flatten([styles.label, style]),
|
|
113
|
+
numberOfLines: numberOfLines,
|
|
114
|
+
ellipsizeMode: ellipsizeMode,
|
|
115
|
+
allowFontScaling: false,
|
|
116
|
+
...props,
|
|
117
|
+
children: children
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* Layout container for the trailing (right) side of the description item.
|
|
123
|
+
* Accepts DescriptionItemValue, Tag, Link, or any custom content.
|
|
124
|
+
*/
|
|
125
|
+
export const DescriptionItemTrailing = ({
|
|
126
|
+
children,
|
|
127
|
+
lx = {},
|
|
128
|
+
style,
|
|
129
|
+
...props
|
|
130
|
+
}) => {
|
|
131
|
+
const styles = useStyleSheet(t => ({
|
|
132
|
+
trailing: {
|
|
133
|
+
flexShrink: 0,
|
|
134
|
+
maxWidth: '80%',
|
|
135
|
+
flexDirection: 'row',
|
|
136
|
+
alignItems: 'center',
|
|
137
|
+
gap: t.spacings.s4
|
|
138
|
+
}
|
|
139
|
+
}), []);
|
|
140
|
+
return /*#__PURE__*/_jsx(Box, {
|
|
141
|
+
lx: lx,
|
|
142
|
+
style: StyleSheet.flatten([styles.trailing, style]),
|
|
143
|
+
...props,
|
|
144
|
+
children: children
|
|
145
|
+
});
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Typography-bearing value for the trailing side.
|
|
150
|
+
* Reads size from DescriptionItemSizeContext to apply the correct typography
|
|
151
|
+
* based on the size of the parent `DescriptionItem`.
|
|
152
|
+
*/
|
|
153
|
+
export const DescriptionItemValue = ({
|
|
154
|
+
children,
|
|
155
|
+
lx = {},
|
|
156
|
+
style,
|
|
157
|
+
numberOfLines = 1,
|
|
158
|
+
ellipsizeMode = 'tail',
|
|
159
|
+
...props
|
|
160
|
+
}) => {
|
|
161
|
+
const {
|
|
162
|
+
size
|
|
163
|
+
} = useDescriptionItemSizeContext({
|
|
164
|
+
consumerName: 'DescriptionItemValue',
|
|
165
|
+
contextRequired: false
|
|
166
|
+
});
|
|
167
|
+
const styles = useStyleSheet(t => ({
|
|
168
|
+
value: StyleSheet.flatten([size === 'md' ? t.typographies.body2SemiBold : t.typographies.body3SemiBold, {
|
|
169
|
+
flexShrink: 1,
|
|
170
|
+
minWidth: 0,
|
|
171
|
+
color: t.colors.text.base
|
|
172
|
+
}])
|
|
173
|
+
}), [size]);
|
|
174
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
175
|
+
lx: lx,
|
|
176
|
+
style: StyleSheet.flatten([styles.value, style]),
|
|
177
|
+
numberOfLines: numberOfLines,
|
|
178
|
+
ellipsizeMode: ellipsizeMode,
|
|
179
|
+
allowFontScaling: false,
|
|
180
|
+
...props,
|
|
181
|
+
children: children
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
//# sourceMappingURL=DescriptionItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createSafeContext","StyleSheet","useStyleSheet","Box","Text","jsx","_jsx","DescriptionItemSizeProvider","useDescriptionItemSizeContext","size","DescriptionItem","children","lx","style","props","styles","t","root","width","flexDirection","alignItems","gap","spacings","s12","value","flatten","DescriptionItemLeading","leading","flex","minWidth","s4","DescriptionItemLabel","numberOfLines","ellipsizeMode","consumerName","contextRequired","label","typographies","body2","body3","flexShrink","color","colors","text","muted","allowFontScaling","DescriptionItemTrailing","trailing","maxWidth","DescriptionItemValue","body2SemiBold","body3SemiBold","base"],"sourceRoot":"../../../../../src","sources":["lib/Components/DescriptionItem/DescriptionItem.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import * as DescriptionItemStories from './DescriptionItem.stories';
|
|
3
|
+
import { CustomTabs, Tab } from '../../../../.storybook/components';
|
|
4
|
+
|
|
5
|
+
<Meta title='Containment/DescriptionItem' of={DescriptionItemStories} />
|
|
6
|
+
|
|
7
|
+
# DescriptionItem
|
|
8
|
+
|
|
9
|
+
> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10311-11837&m=dev).
|
|
10
|
+
|
|
11
|
+
<CustomTabs>
|
|
12
|
+
<Tab label="Overview">
|
|
13
|
+
|
|
14
|
+
## Introduction
|
|
15
|
+
|
|
16
|
+
DescriptionItem is a compound component for displaying key-value rows — typically used inside a summary panel, transaction detail, or settings screen. It composes a leading label side and a trailing value side, with the trailing always taking priority over the leading when space is constrained.
|
|
17
|
+
|
|
18
|
+
## Anatomy
|
|
19
|
+
|
|
20
|
+
<Canvas of={DescriptionItemStories.Base} />
|
|
21
|
+
|
|
22
|
+
- **DescriptionItem**: Root row container. Accepts an optional `size` prop (`md` | `sm`).
|
|
23
|
+
- **DescriptionItemLeading**: Left section holding the label and any optional sibling (e.g. a tooltip icon).
|
|
24
|
+
- **DescriptionItemLabel**: Muted text label. Wraps to a second line before truncating (`numberOfLines={2}`).
|
|
25
|
+
- **DescriptionItemTrailing**: Right section holding the value or any inline element (Tag, Link, etc.). Never shrinks — always has layout priority.
|
|
26
|
+
- **DescriptionItemValue**: Semi-bold value text. Truncates to a single line (`numberOfLines={1}`).
|
|
27
|
+
|
|
28
|
+
## Properties
|
|
29
|
+
|
|
30
|
+
<Canvas of={DescriptionItemStories.Base} />
|
|
31
|
+
<Controls of={DescriptionItemStories.Base} />
|
|
32
|
+
|
|
33
|
+
### Trailing variants
|
|
34
|
+
|
|
35
|
+
The trailing section accepts any content — a plain value, a `Tag`, multiple `Tag`s, or a custom element. Use `DescriptionItemValue` for plain text; place other components directly in `DescriptionItemTrailing`.
|
|
36
|
+
|
|
37
|
+
<Canvas of={DescriptionItemStories.TrailingVariants} />
|
|
38
|
+
|
|
39
|
+
### Size
|
|
40
|
+
|
|
41
|
+
Two sizes are available — `md` (default) and `sm`.
|
|
42
|
+
|
|
43
|
+
- The size of `DescriptionItemValue` is inherited from the parent `DescriptionItem`.
|
|
44
|
+
- The size of additional trailing content (e.g. `Tag`) needs to be set explicitly.
|
|
45
|
+
|
|
46
|
+
<Canvas of={DescriptionItemStories.SizeShowcase} />
|
|
47
|
+
|
|
48
|
+
### With info tooltip
|
|
49
|
+
|
|
50
|
+
Pair a `Tooltip` with an info icon inside `DescriptionItemLeading` to surface additional context without cluttering the label.
|
|
51
|
+
|
|
52
|
+
<Canvas of={DescriptionItemStories.WithInfoIcon} />
|
|
53
|
+
|
|
54
|
+
### Truncation
|
|
55
|
+
|
|
56
|
+
The label can wrap to two lines before truncating. The trailing value truncates after one line. When both sides have long content, the trailing always gets layout priority.
|
|
57
|
+
|
|
58
|
+
<Canvas of={DescriptionItemStories.TruncationBehavior} />
|
|
59
|
+
|
|
60
|
+
</Tab>
|
|
61
|
+
<Tab label="Implementation">
|
|
62
|
+
|
|
63
|
+
## Setup
|
|
64
|
+
|
|
65
|
+
Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
|
|
66
|
+
|
|
67
|
+
## Basic Usage
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import {
|
|
71
|
+
DescriptionItem,
|
|
72
|
+
DescriptionItemLabel,
|
|
73
|
+
DescriptionItemLeading,
|
|
74
|
+
DescriptionItemTrailing,
|
|
75
|
+
DescriptionItemValue,
|
|
76
|
+
} from '@ledgerhq/lumen-ui-rnative';
|
|
77
|
+
|
|
78
|
+
function MyComponent() {
|
|
79
|
+
return (
|
|
80
|
+
<DescriptionItem size='md'>
|
|
81
|
+
<DescriptionItemLeading>
|
|
82
|
+
<DescriptionItemLabel>Fees</DescriptionItemLabel>
|
|
83
|
+
</DescriptionItemLeading>
|
|
84
|
+
<DescriptionItemTrailing>
|
|
85
|
+
<DescriptionItemValue>0.001 BTC</DescriptionItemValue>
|
|
86
|
+
</DescriptionItemTrailing>
|
|
87
|
+
</DescriptionItem>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### With info tooltip
|
|
93
|
+
|
|
94
|
+
Use a `Tooltip` alongside the label to add contextual information:
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import {
|
|
98
|
+
DescriptionItem,
|
|
99
|
+
DescriptionItemLabel,
|
|
100
|
+
DescriptionItemLeading,
|
|
101
|
+
DescriptionItemTrailing,
|
|
102
|
+
DescriptionItemValue,
|
|
103
|
+
InteractiveIcon,
|
|
104
|
+
Tooltip,
|
|
105
|
+
TooltipTrigger,
|
|
106
|
+
TooltipContent,
|
|
107
|
+
} from '@ledgerhq/lumen-ui-rnative';
|
|
108
|
+
import { Information } from '@ledgerhq/lumen-ui-rnative/symbols';
|
|
109
|
+
import { Text } from 'react-native';
|
|
110
|
+
|
|
111
|
+
function MyComponent() {
|
|
112
|
+
return (
|
|
113
|
+
<DescriptionItem>
|
|
114
|
+
<DescriptionItemLeading>
|
|
115
|
+
<DescriptionItemLabel>Fees</DescriptionItemLabel>
|
|
116
|
+
<Tooltip>
|
|
117
|
+
<TooltipTrigger>
|
|
118
|
+
<InteractiveIcon
|
|
119
|
+
icon={Information}
|
|
120
|
+
size={16}
|
|
121
|
+
iconType='stroked'
|
|
122
|
+
accessibilityLabel='More information'
|
|
123
|
+
/>
|
|
124
|
+
</TooltipTrigger>
|
|
125
|
+
<TooltipContent
|
|
126
|
+
content={<Text>Network fee paid to miners</Text>}
|
|
127
|
+
/>
|
|
128
|
+
</Tooltip>
|
|
129
|
+
</DescriptionItemLeading>
|
|
130
|
+
<DescriptionItemTrailing>
|
|
131
|
+
<DescriptionItemValue>0.001 BTC</DescriptionItemValue>
|
|
132
|
+
</DescriptionItemTrailing>
|
|
133
|
+
</DescriptionItem>
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
</Tab>
|
|
139
|
+
</CustomTabs>
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Text, View } from 'react-native';
|
|
4
|
+
import { Information } from "../../Symbols/index.js";
|
|
5
|
+
import { InteractiveIcon } from "../InteractiveIcon/index.js";
|
|
6
|
+
import { Tag } from "../Tag/index.js";
|
|
7
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
|
|
8
|
+
import { DescriptionItem, DescriptionItemLabel, DescriptionItemLeading, DescriptionItemTrailing, DescriptionItemValue } from "./DescriptionItem.js";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
const Container = ({
|
|
11
|
+
children
|
|
12
|
+
}) => /*#__PURE__*/_jsx(View, {
|
|
13
|
+
style: {
|
|
14
|
+
padding: 8,
|
|
15
|
+
backgroundColor: '#ffffff',
|
|
16
|
+
width: 320
|
|
17
|
+
},
|
|
18
|
+
children: children
|
|
19
|
+
});
|
|
20
|
+
const meta = {
|
|
21
|
+
component: DescriptionItem,
|
|
22
|
+
title: 'Containment/DescriptionItem',
|
|
23
|
+
subcomponents: {
|
|
24
|
+
DescriptionItemLeading,
|
|
25
|
+
DescriptionItemLabel,
|
|
26
|
+
DescriptionItemTrailing,
|
|
27
|
+
DescriptionItemValue
|
|
28
|
+
},
|
|
29
|
+
parameters: {
|
|
30
|
+
layout: 'centered',
|
|
31
|
+
docs: {
|
|
32
|
+
source: {
|
|
33
|
+
language: 'tsx',
|
|
34
|
+
format: true,
|
|
35
|
+
type: 'code'
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
decorators: [Story => /*#__PURE__*/_jsx(Container, {
|
|
40
|
+
children: /*#__PURE__*/_jsx(Story, {})
|
|
41
|
+
})]
|
|
42
|
+
};
|
|
43
|
+
export default meta;
|
|
44
|
+
export const Base = {
|
|
45
|
+
args: {
|
|
46
|
+
size: 'md'
|
|
47
|
+
},
|
|
48
|
+
render: args => /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
49
|
+
...args,
|
|
50
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
51
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
52
|
+
children: "Fees"
|
|
53
|
+
})
|
|
54
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
55
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
56
|
+
children: "0.001 BTC"
|
|
57
|
+
})
|
|
58
|
+
})]
|
|
59
|
+
})
|
|
60
|
+
};
|
|
61
|
+
export const SizeShowcase = {
|
|
62
|
+
args: {
|
|
63
|
+
size: 'md'
|
|
64
|
+
},
|
|
65
|
+
render: () => /*#__PURE__*/_jsxs(View, {
|
|
66
|
+
style: {
|
|
67
|
+
gap: 16
|
|
68
|
+
},
|
|
69
|
+
children: [/*#__PURE__*/_jsxs(DescriptionItem, {
|
|
70
|
+
size: "md",
|
|
71
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
72
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
73
|
+
children: "Network"
|
|
74
|
+
})
|
|
75
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
76
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
77
|
+
children: "Ethereum"
|
|
78
|
+
})
|
|
79
|
+
})]
|
|
80
|
+
}), /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
81
|
+
size: "md",
|
|
82
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
83
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
84
|
+
children: "Network"
|
|
85
|
+
})
|
|
86
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
87
|
+
children: /*#__PURE__*/_jsx(Tag, {
|
|
88
|
+
size: "md",
|
|
89
|
+
label: "Ethereum",
|
|
90
|
+
appearance: "base"
|
|
91
|
+
})
|
|
92
|
+
})]
|
|
93
|
+
}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
94
|
+
size: "sm",
|
|
95
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
96
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
97
|
+
children: "Network"
|
|
98
|
+
})
|
|
99
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
100
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
101
|
+
children: "Ethereum"
|
|
102
|
+
})
|
|
103
|
+
})]
|
|
104
|
+
}), /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
105
|
+
size: "sm",
|
|
106
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
107
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
108
|
+
children: "Network"
|
|
109
|
+
})
|
|
110
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
111
|
+
children: /*#__PURE__*/_jsx(Tag, {
|
|
112
|
+
size: "sm",
|
|
113
|
+
label: "Ethereum",
|
|
114
|
+
appearance: "base"
|
|
115
|
+
})
|
|
116
|
+
})]
|
|
117
|
+
})]
|
|
118
|
+
})
|
|
119
|
+
};
|
|
120
|
+
export const TrailingVariants = {
|
|
121
|
+
render: () => /*#__PURE__*/_jsxs(View, {
|
|
122
|
+
style: {
|
|
123
|
+
gap: 16
|
|
124
|
+
},
|
|
125
|
+
children: [/*#__PURE__*/_jsxs(DescriptionItem, {
|
|
126
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
127
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
128
|
+
children: "Plain value"
|
|
129
|
+
})
|
|
130
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
131
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
132
|
+
children: "Ethereum"
|
|
133
|
+
})
|
|
134
|
+
})]
|
|
135
|
+
}), /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
136
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
137
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
138
|
+
children: "Tag"
|
|
139
|
+
})
|
|
140
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
141
|
+
children: /*#__PURE__*/_jsx(Tag, {
|
|
142
|
+
size: "md",
|
|
143
|
+
label: "Confirmed",
|
|
144
|
+
appearance: "success"
|
|
145
|
+
})
|
|
146
|
+
})]
|
|
147
|
+
}), /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
148
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
149
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
150
|
+
children: "Multiple tags"
|
|
151
|
+
})
|
|
152
|
+
}), /*#__PURE__*/_jsxs(DescriptionItemTrailing, {
|
|
153
|
+
children: [/*#__PURE__*/_jsx(Tag, {
|
|
154
|
+
size: "md",
|
|
155
|
+
label: "ERC-20",
|
|
156
|
+
appearance: "base"
|
|
157
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
158
|
+
size: "md",
|
|
159
|
+
label: "New",
|
|
160
|
+
appearance: "accent"
|
|
161
|
+
})]
|
|
162
|
+
})]
|
|
163
|
+
})]
|
|
164
|
+
})
|
|
165
|
+
};
|
|
166
|
+
export const WithInfoIcon = {
|
|
167
|
+
render: () => /*#__PURE__*/_jsxs(View, {
|
|
168
|
+
style: {
|
|
169
|
+
gap: 16
|
|
170
|
+
},
|
|
171
|
+
children: [/*#__PURE__*/_jsxs(DescriptionItem, {
|
|
172
|
+
children: [/*#__PURE__*/_jsxs(DescriptionItemLeading, {
|
|
173
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
174
|
+
children: "Fees"
|
|
175
|
+
}), /*#__PURE__*/_jsxs(Tooltip, {
|
|
176
|
+
children: [/*#__PURE__*/_jsx(TooltipTrigger, {
|
|
177
|
+
children: /*#__PURE__*/_jsx(InteractiveIcon, {
|
|
178
|
+
icon: Information,
|
|
179
|
+
size: 16,
|
|
180
|
+
iconType: "stroked",
|
|
181
|
+
accessibilityLabel: "More information"
|
|
182
|
+
})
|
|
183
|
+
}), /*#__PURE__*/_jsx(TooltipContent, {
|
|
184
|
+
content: /*#__PURE__*/_jsx(Text, {
|
|
185
|
+
children: "Network fee paid to miners"
|
|
186
|
+
})
|
|
187
|
+
})]
|
|
188
|
+
})]
|
|
189
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
190
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
191
|
+
children: "0.001 BTC"
|
|
192
|
+
})
|
|
193
|
+
})]
|
|
194
|
+
}), /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
195
|
+
children: [/*#__PURE__*/_jsxs(DescriptionItemLeading, {
|
|
196
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
197
|
+
children: "Estimated time"
|
|
198
|
+
}), /*#__PURE__*/_jsxs(Tooltip, {
|
|
199
|
+
children: [/*#__PURE__*/_jsx(TooltipTrigger, {
|
|
200
|
+
children: /*#__PURE__*/_jsx(InteractiveIcon, {
|
|
201
|
+
icon: Information,
|
|
202
|
+
size: 16,
|
|
203
|
+
iconType: "stroked",
|
|
204
|
+
accessibilityLabel: "More information"
|
|
205
|
+
})
|
|
206
|
+
}), /*#__PURE__*/_jsx(TooltipContent, {
|
|
207
|
+
content: /*#__PURE__*/_jsx(Text, {
|
|
208
|
+
children: "Time may vary based on network congestion"
|
|
209
|
+
})
|
|
210
|
+
})]
|
|
211
|
+
})]
|
|
212
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
213
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
214
|
+
children: "~30 min"
|
|
215
|
+
})
|
|
216
|
+
})]
|
|
217
|
+
})]
|
|
218
|
+
})
|
|
219
|
+
};
|
|
220
|
+
export const TruncationBehavior = {
|
|
221
|
+
render: () => /*#__PURE__*/_jsxs(View, {
|
|
222
|
+
style: {
|
|
223
|
+
gap: 16
|
|
224
|
+
},
|
|
225
|
+
children: [/*#__PURE__*/_jsxs(DescriptionItem, {
|
|
226
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
227
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
228
|
+
children: "This is a very long label that should go to a second line."
|
|
229
|
+
})
|
|
230
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
231
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
232
|
+
children: "0.001 BTC"
|
|
233
|
+
})
|
|
234
|
+
})]
|
|
235
|
+
}), /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
236
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
237
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
238
|
+
children: "Label"
|
|
239
|
+
})
|
|
240
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
241
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
242
|
+
children: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
|
|
243
|
+
})
|
|
244
|
+
})]
|
|
245
|
+
}), /*#__PURE__*/_jsxs(DescriptionItem, {
|
|
246
|
+
children: [/*#__PURE__*/_jsx(DescriptionItemLeading, {
|
|
247
|
+
children: /*#__PURE__*/_jsx(DescriptionItemLabel, {
|
|
248
|
+
children: "Destination address on network"
|
|
249
|
+
})
|
|
250
|
+
}), /*#__PURE__*/_jsx(DescriptionItemTrailing, {
|
|
251
|
+
children: /*#__PURE__*/_jsx(DescriptionItemValue, {
|
|
252
|
+
children: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
|
|
253
|
+
})
|
|
254
|
+
})]
|
|
255
|
+
})]
|
|
256
|
+
})
|
|
257
|
+
};
|
|
258
|
+
//# sourceMappingURL=DescriptionItem.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Text","View","Information","InteractiveIcon","Tag","Tooltip","TooltipContent","TooltipTrigger","DescriptionItem","DescriptionItemLabel","DescriptionItemLeading","DescriptionItemTrailing","DescriptionItemValue","jsx","_jsx","jsxs","_jsxs","Container","children","style","padding","backgroundColor","width","meta","component","title","subcomponents","parameters","layout","docs","source","language","format","type","decorators","Story","Base","args","size","render","SizeShowcase","gap","label","appearance","TrailingVariants","WithInfoIcon","icon","iconType","accessibilityLabel","content","TruncationBehavior"],"sourceRoot":"../../../../../src","sources":["lib/Components/DescriptionItem/DescriptionItem.stories.tsx"],"mappings":"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","ignoreList":[]}
|