@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.26
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/index.js +1 -0
- package/dist/module/index.js.map +1 -1
- package/dist/module/lib/Components/Avatar/Avatar.js +22 -23
- package/dist/module/lib/Components/Avatar/Avatar.js.map +1 -1
- package/dist/module/lib/Components/Avatar/Avatar.test.js +17 -23
- package/dist/module/lib/Components/Avatar/Avatar.test.js.map +1 -1
- package/dist/module/lib/Components/DotCount/DotCount.js +128 -0
- package/dist/module/lib/Components/DotCount/DotCount.js.map +1 -0
- package/dist/module/lib/Components/DotCount/DotCount.mdx +86 -0
- package/dist/module/lib/Components/DotCount/DotCount.stories.js +172 -0
- package/dist/module/lib/Components/DotCount/DotCount.stories.js.map +1 -0
- package/dist/module/lib/Components/DotCount/DotCount.test.js +174 -0
- package/dist/module/lib/Components/DotCount/DotCount.test.js.map +1 -0
- package/dist/module/lib/Components/DotCount/index.js +5 -0
- package/dist/module/lib/Components/DotCount/index.js.map +1 -0
- package/dist/module/lib/Components/DotCount/types.js +4 -0
- package/dist/module/lib/Components/DotCount/types.js.map +1 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.js +134 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.js.map +1 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.mdx +56 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.stories.js +217 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.stories.js.map +1 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.test.js +238 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.test.js.map +1 -0
- package/dist/module/lib/Components/DotIcon/index.js +5 -0
- package/dist/module/lib/Components/DotIcon/index.js.map +1 -0
- package/dist/module/lib/Components/DotIcon/types.js +4 -0
- package/dist/module/lib/Components/DotIcon/types.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.js +89 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.mdx +82 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.stories.js +84 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.stories.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.test.js +136 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.test.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/index.js +5 -0
- package/dist/module/lib/Components/DotIndicator/index.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/types.js +4 -0
- package/dist/module/lib/Components/DotIndicator/types.js.map +1 -0
- package/dist/module/lib/Components/DotSymbol/DotSymbol.js +29 -22
- package/dist/module/lib/Components/DotSymbol/DotSymbol.js.map +1 -1
- package/dist/module/lib/Components/DotSymbol/DotSymbol.stories.js +31 -9
- package/dist/module/lib/Components/DotSymbol/DotSymbol.stories.js.map +1 -1
- package/dist/module/lib/Components/MediaImage/MediaImage.js +2 -1
- package/dist/module/lib/Components/MediaImage/MediaImage.js.map +1 -1
- package/dist/module/lib/Components/MediaImage/MediaImage.stories.js +4 -0
- package/dist/module/lib/Components/MediaImage/MediaImage.stories.js.map +1 -1
- package/dist/module/lib/Components/Spinner/Spinner.js +6 -1
- package/dist/module/lib/Components/Spinner/Spinner.js.map +1 -1
- package/dist/module/lib/Components/TabBar/TabBar.js +16 -13
- package/dist/module/lib/Components/TabBar/TabBar.js.map +1 -1
- package/dist/module/lib/Components/Tag/Tag.js +2 -0
- package/dist/module/lib/Components/Tag/Tag.js.map +1 -1
- package/dist/module/lib/Components/Tag/Tag.stories.js +8 -1
- package/dist/module/lib/Components/Tag/Tag.stories.js.map +1 -1
- package/dist/module/lib/Components/index.js +3 -0
- package/dist/module/lib/Components/index.js.map +1 -1
- package/dist/typescript/src/index.d.ts +1 -0
- package/dist/typescript/src/index.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Avatar/Avatar.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/DotCount/DotCount.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotCount/DotCount.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotCount/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotCount/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotCount/types.d.ts +40 -0
- package/dist/typescript/src/lib/Components/DotCount/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIcon/DotIcon.d.ts +30 -0
- package/dist/typescript/src/lib/Components/DotIcon/DotIcon.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIcon/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotIcon/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIcon/types.d.ts +40 -0
- package/dist/typescript/src/lib/Components/DotIcon/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIndicator/DotIndicator.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotIndicator/DotIndicator.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIndicator/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotIndicator/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIndicator/types.d.ts +25 -0
- package/dist/typescript/src/lib/Components/DotIndicator/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotSymbol/DotSymbol.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaImage/MediaImage.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaImage/types.d.ts +1 -1
- package/dist/typescript/src/lib/Components/MediaImage/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Spinner/Spinner.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/TabBar/TabBar.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Tag/Tag.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Tag/types.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Tag/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/lib/Components/Avatar/Avatar.test.tsx +17 -27
- package/src/lib/Components/Avatar/Avatar.tsx +24 -21
- package/src/lib/Components/DotCount/DotCount.mdx +86 -0
- package/src/lib/Components/DotCount/DotCount.stories.tsx +124 -0
- package/src/lib/Components/DotCount/DotCount.test.tsx +150 -0
- package/src/lib/Components/DotCount/DotCount.tsx +130 -0
- package/src/lib/Components/DotCount/index.ts +2 -0
- package/src/lib/Components/DotCount/types.ts +40 -0
- package/src/lib/Components/DotIcon/DotIcon.mdx +56 -0
- package/src/lib/Components/DotIcon/DotIcon.stories.tsx +154 -0
- package/src/lib/Components/DotIcon/DotIcon.test.tsx +224 -0
- package/src/lib/Components/DotIcon/DotIcon.tsx +146 -0
- package/src/lib/Components/DotIcon/index.ts +6 -0
- package/src/lib/Components/DotIcon/types.ts +44 -0
- package/src/lib/Components/DotIndicator/DotIndicator.mdx +82 -0
- package/src/lib/Components/DotIndicator/DotIndicator.stories.tsx +67 -0
- package/src/lib/Components/DotIndicator/DotIndicator.test.tsx +132 -0
- package/src/lib/Components/DotIndicator/DotIndicator.tsx +97 -0
- package/src/lib/Components/DotIndicator/index.ts +2 -0
- package/src/lib/Components/DotIndicator/types.ts +25 -0
- package/src/lib/Components/DotSymbol/DotSymbol.stories.tsx +26 -7
- package/src/lib/Components/DotSymbol/DotSymbol.tsx +22 -23
- package/src/lib/Components/MediaImage/MediaImage.stories.tsx +1 -0
- package/src/lib/Components/MediaImage/MediaImage.tsx +3 -1
- package/src/lib/Components/MediaImage/types.ts +1 -1
- package/src/lib/Components/Spinner/Spinner.tsx +6 -2
- package/src/lib/Components/TabBar/TabBar.tsx +17 -16
- package/src/lib/Components/Tag/Tag.stories.tsx +11 -1
- package/src/lib/Components/Tag/Tag.tsx +2 -0
- package/src/lib/Components/Tag/types.ts +8 -1
- package/src/lib/Components/index.ts +3 -0
package/dist/module/index.js
CHANGED
package/dist/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Languages"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAA+BA,SAAS,QAAQ,iBAAQ;AACxD,cAAc,2BAAkB;AAChC,cAAc,2BAAkB;AAChC,cAAc,wBAAe","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Languages","useTheme","useStyleSheet"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAA+BA,SAAS,QAAQ,iBAAQ;AACxD,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAU;AAClD,cAAc,2BAAkB;AAChC,cAAc,2BAAkB;AAChC,cAAc,wBAAe","ignoreList":[]}
|
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { useState, useEffect } from 'react';
|
|
4
|
-
import { StyleSheet, Image
|
|
4
|
+
import { StyleSheet, Image } from 'react-native';
|
|
5
5
|
import { useCommonTranslation } from "../../../i18n/index.js";
|
|
6
6
|
import { useStyleSheet } from "../../../styles/index.js";
|
|
7
7
|
import { User } from "../../Symbols/index.js";
|
|
8
|
+
import { DotIndicator } from "../DotIndicator/index.js";
|
|
8
9
|
import { Box } from "../Utility/index.js";
|
|
9
|
-
import { jsx as _jsx
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
11
|
const fallbackSizes = {
|
|
11
12
|
sm: 16,
|
|
12
13
|
md: 24,
|
|
13
14
|
lg: 32
|
|
14
15
|
};
|
|
16
|
+
const dotSizeMap = {
|
|
17
|
+
sm: 'xs',
|
|
18
|
+
md: 'sm',
|
|
19
|
+
lg: 'md'
|
|
20
|
+
};
|
|
15
21
|
const useStyles = ({
|
|
16
22
|
size
|
|
17
23
|
}) => {
|
|
@@ -30,11 +36,6 @@ const useStyles = ({
|
|
|
30
36
|
padding: t.spacings.s4
|
|
31
37
|
}
|
|
32
38
|
};
|
|
33
|
-
const notificationsMap = {
|
|
34
|
-
sm: t.sizes.s10,
|
|
35
|
-
md: t.sizes.s12,
|
|
36
|
-
lg: t.sizes.s16
|
|
37
|
-
};
|
|
38
39
|
return {
|
|
39
40
|
root: {
|
|
40
41
|
position: 'relative',
|
|
@@ -46,16 +47,6 @@ const useStyles = ({
|
|
|
46
47
|
justifyContent: 'center',
|
|
47
48
|
padding: sizeMap[size].padding
|
|
48
49
|
},
|
|
49
|
-
notification: {
|
|
50
|
-
position: 'absolute',
|
|
51
|
-
top: 0,
|
|
52
|
-
right: 0,
|
|
53
|
-
width: notificationsMap[size],
|
|
54
|
-
height: notificationsMap[size],
|
|
55
|
-
borderRadius: 9999,
|
|
56
|
-
backgroundColor: t.colors.bg.errorStrong,
|
|
57
|
-
zIndex: 1
|
|
58
|
-
},
|
|
59
50
|
image: {
|
|
60
51
|
width: '100%',
|
|
61
52
|
height: '100%',
|
|
@@ -89,6 +80,7 @@ export const Avatar = ({
|
|
|
89
80
|
alt = 'avatar',
|
|
90
81
|
size = 'md',
|
|
91
82
|
showNotification = false,
|
|
83
|
+
testID,
|
|
92
84
|
ref,
|
|
93
85
|
...props
|
|
94
86
|
}) => {
|
|
@@ -105,17 +97,15 @@ export const Avatar = ({
|
|
|
105
97
|
useEffect(() => {
|
|
106
98
|
setError(false);
|
|
107
99
|
}, [src]);
|
|
108
|
-
|
|
100
|
+
const avatarContent = /*#__PURE__*/_jsx(Box, {
|
|
109
101
|
ref: ref,
|
|
110
102
|
lx: lx,
|
|
111
103
|
style: StyleSheet.flatten([styles.root, style]),
|
|
112
104
|
accessibilityRole: "image",
|
|
113
105
|
accessibilityLabel: accessibilityLabel,
|
|
106
|
+
testID: showNotification ? undefined : testID,
|
|
114
107
|
...props,
|
|
115
|
-
children:
|
|
116
|
-
style: styles.notification,
|
|
117
|
-
accessible: false
|
|
118
|
-
}), shouldFallback ? /*#__PURE__*/_jsx(User, {
|
|
108
|
+
children: shouldFallback ? /*#__PURE__*/_jsx(User, {
|
|
119
109
|
size: fallbackSizes[size],
|
|
120
110
|
accessible: false,
|
|
121
111
|
testID: "avatar-fallback-icon"
|
|
@@ -127,7 +117,16 @@ export const Avatar = ({
|
|
|
127
117
|
accessible: false,
|
|
128
118
|
onError: () => setError(true),
|
|
129
119
|
testID: "avatar-image"
|
|
130
|
-
})
|
|
120
|
+
})
|
|
131
121
|
});
|
|
122
|
+
if (showNotification) {
|
|
123
|
+
return /*#__PURE__*/_jsx(DotIndicator, {
|
|
124
|
+
size: dotSizeMap[size],
|
|
125
|
+
appearance: "red",
|
|
126
|
+
testID: testID,
|
|
127
|
+
children: avatarContent
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
return avatarContent;
|
|
132
131
|
};
|
|
133
132
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useEffect","StyleSheet","Image","
|
|
1
|
+
{"version":3,"names":["useState","useEffect","StyleSheet","Image","useCommonTranslation","useStyleSheet","User","DotIndicator","Box","jsx","_jsx","fallbackSizes","sm","md","lg","dotSizeMap","useStyles","size","t","sizeMap","sizes","s40","padding","spacings","s4","s48","s72","root","position","width","height","borderRadius","backgroundColor","colors","bg","muted","alignItems","justifyContent","image","overflow","Avatar","lx","style","src","alt","showNotification","testID","ref","props","error","setError","shouldFallback","styles","resolvedAlt","accessibilityLabel","avatarContent","flatten","accessibilityRole","undefined","children","accessible","source","uri","onError","appearance"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,7 +7,6 @@ import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
|
|
|
7
7
|
import { Avatar } from "./Avatar.js";
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
9
|
const {
|
|
10
|
-
colors,
|
|
11
10
|
sizes
|
|
12
11
|
} = ledgerLiveThemes.dark;
|
|
13
12
|
const TestWrapper = ({
|
|
@@ -158,33 +157,34 @@ describe('Avatar Component', () => {
|
|
|
158
157
|
});
|
|
159
158
|
it('should show notification indicator when showNotification is true', () => {
|
|
160
159
|
const {
|
|
161
|
-
getByTestId
|
|
160
|
+
getByTestId,
|
|
161
|
+
toJSON
|
|
162
162
|
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
163
163
|
children: /*#__PURE__*/_jsx(Avatar, {
|
|
164
164
|
testID: "avatar-id",
|
|
165
165
|
showNotification: true
|
|
166
166
|
})
|
|
167
167
|
}));
|
|
168
|
-
const
|
|
169
|
-
|
|
170
|
-
expect(
|
|
171
|
-
expect(
|
|
168
|
+
const tree = toJSON();
|
|
169
|
+
expect(tree.children).toHaveLength(2);
|
|
170
|
+
expect(tree.children[0].props.accessibilityRole).toBe('image');
|
|
171
|
+
expect(tree.children[0].props.pointerEvents).toBe('none');
|
|
172
|
+
expect(getByTestId('avatar-id')).toBeTruthy();
|
|
172
173
|
});
|
|
173
174
|
it('should not show notification indicator by default', () => {
|
|
174
175
|
const {
|
|
175
|
-
|
|
176
|
+
toJSON
|
|
176
177
|
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
177
178
|
children: /*#__PURE__*/_jsx(Avatar, {
|
|
178
179
|
testID: "avatar-id"
|
|
179
180
|
})
|
|
180
181
|
}));
|
|
181
|
-
const
|
|
182
|
-
|
|
183
|
-
expect(notificationIndicator).toBe(false);
|
|
182
|
+
const tree = toJSON();
|
|
183
|
+
expect(tree.props.testID).toBe('avatar-id');
|
|
184
184
|
});
|
|
185
185
|
it('should apply correct notification indicator size based on avatar size', () => {
|
|
186
186
|
const {
|
|
187
|
-
|
|
187
|
+
toJSON,
|
|
188
188
|
rerender
|
|
189
189
|
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
190
190
|
children: /*#__PURE__*/_jsx(Avatar, {
|
|
@@ -193,10 +193,8 @@ describe('Avatar Component', () => {
|
|
|
193
193
|
showNotification: true
|
|
194
194
|
})
|
|
195
195
|
}));
|
|
196
|
-
let
|
|
197
|
-
|
|
198
|
-
expect(notificationIndicator.props.style.width).toBe(sizes.s10);
|
|
199
|
-
expect(notificationIndicator.props.style.height).toBe(sizes.s10);
|
|
196
|
+
let dot = toJSON().children[0];
|
|
197
|
+
expect(dot.props.style.height).toBe(sizes.s10);
|
|
200
198
|
rerender(/*#__PURE__*/_jsx(TestWrapper, {
|
|
201
199
|
children: /*#__PURE__*/_jsx(Avatar, {
|
|
202
200
|
testID: "avatar-id",
|
|
@@ -204,10 +202,8 @@ describe('Avatar Component', () => {
|
|
|
204
202
|
showNotification: true
|
|
205
203
|
})
|
|
206
204
|
}));
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
expect(notificationIndicator.props.style.width).toBe(sizes.s12);
|
|
210
|
-
expect(notificationIndicator.props.style.height).toBe(sizes.s12);
|
|
205
|
+
dot = toJSON().children[0];
|
|
206
|
+
expect(dot.props.style.height).toBe(sizes.s12);
|
|
211
207
|
rerender(/*#__PURE__*/_jsx(TestWrapper, {
|
|
212
208
|
children: /*#__PURE__*/_jsx(Avatar, {
|
|
213
209
|
testID: "avatar-id",
|
|
@@ -215,10 +211,8 @@ describe('Avatar Component', () => {
|
|
|
215
211
|
showNotification: true
|
|
216
212
|
})
|
|
217
213
|
}));
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
expect(notificationIndicator.props.style.width).toBe(sizes.s16);
|
|
221
|
-
expect(notificationIndicator.props.style.height).toBe(sizes.s16);
|
|
214
|
+
dot = toJSON().children[0];
|
|
215
|
+
expect(dot.props.style.height).toBe(sizes.s16);
|
|
222
216
|
});
|
|
223
217
|
it('should apply custom styles', () => {
|
|
224
218
|
const customStyle = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","waitFor","ThemeProvider","Avatar","jsx","_jsx","
|
|
1
|
+
{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","waitFor","ThemeProvider","Avatar","jsx","_jsx","sizes","dark","TestWrapper","children","themes","colorScheme","locale","testSrc","getByLabelText","src","alt","getByTestId","rerender","testID","size","props","style","width","toBe","s40","height","s48","s72","avatarContainer","toBeTruthy","accessibilityRole","image","source","toEqual","uri","queryByTestId","onError","toBeNull","newImage","toJSON","showNotification","tree","toHaveLength","pointerEvents","dot","s10","s12","s16","customStyle","borderWidth","avatar","accessibilityLabel"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useDisabledContext } 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, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
export function DotCount({
|
|
9
|
+
value,
|
|
10
|
+
size = 'md',
|
|
11
|
+
max = 99,
|
|
12
|
+
appearance = 'base',
|
|
13
|
+
disabled: disabledProp = false,
|
|
14
|
+
lx = {},
|
|
15
|
+
style,
|
|
16
|
+
children,
|
|
17
|
+
accessibilityLabel,
|
|
18
|
+
ref,
|
|
19
|
+
...props
|
|
20
|
+
}) {
|
|
21
|
+
const disabled = useDisabledContext({
|
|
22
|
+
consumerName: 'DotCount',
|
|
23
|
+
mergeWith: {
|
|
24
|
+
disabled: disabledProp
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
const styles = useStyles({
|
|
28
|
+
size,
|
|
29
|
+
appearance,
|
|
30
|
+
disabled,
|
|
31
|
+
pinned: !!children
|
|
32
|
+
});
|
|
33
|
+
const cappedMax = Math.max(1, Math.min(max, 99));
|
|
34
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
35
|
+
ref: ref,
|
|
36
|
+
lx: lx,
|
|
37
|
+
style: StyleSheet.flatten([children ? {
|
|
38
|
+
position: 'relative'
|
|
39
|
+
} : undefined, style]),
|
|
40
|
+
...props,
|
|
41
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
|
42
|
+
style: styles.container,
|
|
43
|
+
accessibilityRole: "image",
|
|
44
|
+
accessibilityLabel: accessibilityLabel,
|
|
45
|
+
accessible: !!accessibilityLabel,
|
|
46
|
+
pointerEvents: "none",
|
|
47
|
+
children: value > 0 && /*#__PURE__*/_jsx(Text, {
|
|
48
|
+
style: styles.text,
|
|
49
|
+
allowFontScaling: false,
|
|
50
|
+
children: value <= cappedMax ? value : `${cappedMax}+`
|
|
51
|
+
})
|
|
52
|
+
}), children]
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
const useStyles = ({
|
|
56
|
+
size,
|
|
57
|
+
appearance,
|
|
58
|
+
disabled,
|
|
59
|
+
pinned
|
|
60
|
+
}) => {
|
|
61
|
+
return useStyleSheet(t => {
|
|
62
|
+
const sizeMap = {
|
|
63
|
+
lg: {
|
|
64
|
+
minWidth: t.sizes.s24,
|
|
65
|
+
minHeight: t.sizes.s24,
|
|
66
|
+
paddingHorizontal: t.spacings.s8,
|
|
67
|
+
paddingVertical: t.spacings.s2
|
|
68
|
+
},
|
|
69
|
+
md: {
|
|
70
|
+
minHeight: t.sizes.s16,
|
|
71
|
+
minWidth: t.sizes.s16,
|
|
72
|
+
paddingHorizontal: t.spacings.s4
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
const bgColorMap = {
|
|
76
|
+
base: {
|
|
77
|
+
backgroundColor: t.colors.bg.interactive
|
|
78
|
+
},
|
|
79
|
+
red: {
|
|
80
|
+
backgroundColor: t.colors.bg.errorStrong
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
const textMap = {
|
|
84
|
+
lg: {
|
|
85
|
+
...t.typographies.body2SemiBold
|
|
86
|
+
},
|
|
87
|
+
md: {
|
|
88
|
+
...t.typographies.body4SemiBold
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
const textColorMap = {
|
|
92
|
+
base: {
|
|
93
|
+
color: t.colors.text.onInteractive
|
|
94
|
+
},
|
|
95
|
+
red: {
|
|
96
|
+
color: t.colors.text.onErrorStrong
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
return {
|
|
100
|
+
container: {
|
|
101
|
+
alignItems: 'center',
|
|
102
|
+
justifyContent: 'center',
|
|
103
|
+
borderRadius: t.borderRadius.full,
|
|
104
|
+
...(pinned && {
|
|
105
|
+
position: 'absolute',
|
|
106
|
+
top: t.spacings.s0,
|
|
107
|
+
right: t.spacings.s0,
|
|
108
|
+
zIndex: 1
|
|
109
|
+
}),
|
|
110
|
+
...sizeMap[size],
|
|
111
|
+
...(disabled ? {
|
|
112
|
+
backgroundColor: t.colors.bg.disabled
|
|
113
|
+
} : {
|
|
114
|
+
...bgColorMap[appearance]
|
|
115
|
+
})
|
|
116
|
+
},
|
|
117
|
+
text: {
|
|
118
|
+
...textMap[size],
|
|
119
|
+
...(disabled ? {
|
|
120
|
+
color: t.colors.text.disabled
|
|
121
|
+
} : {
|
|
122
|
+
...textColorMap[appearance]
|
|
123
|
+
})
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
}, [size, appearance, disabled, pinned]);
|
|
127
|
+
};
|
|
128
|
+
//# sourceMappingURL=DotCount.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useDisabledContext","StyleSheet","useStyleSheet","Box","Text","jsx","_jsx","jsxs","_jsxs","DotCount","value","size","max","appearance","disabled","disabledProp","lx","style","children","accessibilityLabel","ref","props","consumerName","mergeWith","styles","useStyles","pinned","cappedMax","Math","min","flatten","position","undefined","container","accessibilityRole","accessible","pointerEvents","text","allowFontScaling","t","sizeMap","lg","minWidth","sizes","s24","minHeight","paddingHorizontal","spacings","s8","paddingVertical","s2","md","s16","s4","bgColorMap","base","backgroundColor","colors","bg","interactive","red","errorStrong","textMap","typographies","body2SemiBold","body4SemiBold","textColorMap","color","onInteractive","onErrorStrong","alignItems","justifyContent","borderRadius","full","top","s0","right","zIndex"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/DotCount.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import * as DotCountStories from './DotCount.stories';
|
|
3
|
+
import { CustomTabs, Tab } from '../../../../.storybook/components';
|
|
4
|
+
|
|
5
|
+
<Meta title='Communication/DotCount' of={DotCountStories} />
|
|
6
|
+
|
|
7
|
+
# DotCount
|
|
8
|
+
|
|
9
|
+
<CustomTabs>
|
|
10
|
+
<Tab label="Overview">
|
|
11
|
+
|
|
12
|
+
## Introduction
|
|
13
|
+
|
|
14
|
+
DotCount displays a numeric count inside a colored pill. It supports two sizes (`lg` and `md`), two appearances (`base` and `red`), and can be pinned to the top-right of a child element.
|
|
15
|
+
|
|
16
|
+
> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=38-998).
|
|
17
|
+
|
|
18
|
+
## Properties
|
|
19
|
+
|
|
20
|
+
<Canvas of={DotCountStories.Base} />
|
|
21
|
+
<Controls of={DotCountStories.Base} />
|
|
22
|
+
|
|
23
|
+
## Sizes
|
|
24
|
+
|
|
25
|
+
DotCount comes in two sizes:
|
|
26
|
+
|
|
27
|
+
- **lg** - large pill size for prominent counters.
|
|
28
|
+
- **md** (default) - standard pill size, suitable for most use cases.
|
|
29
|
+
|
|
30
|
+
<Canvas of={DotCountStories.SizeShowcase} />
|
|
31
|
+
|
|
32
|
+
## Appearances
|
|
33
|
+
|
|
34
|
+
Two color schemes are available:
|
|
35
|
+
|
|
36
|
+
- **base** (default) - neutral tone for general-purpose counters.
|
|
37
|
+
- **red** - attention-grabbing, typically used for unread counts or alerts.
|
|
38
|
+
|
|
39
|
+
<Canvas of={DotCountStories.AppearanceShowcase} />
|
|
40
|
+
|
|
41
|
+
## Overflow & Max
|
|
42
|
+
|
|
43
|
+
When `value` exceeds `max`, the display shows `[max]+`. Values of `0` or below hide the text. If you need a DotCount-like component but without the count, consider the DotIndicator instead.
|
|
44
|
+
|
|
45
|
+
<Canvas of={DotCountStories.OverflowShowcase} />
|
|
46
|
+
|
|
47
|
+
## With Children
|
|
48
|
+
|
|
49
|
+
When wrapping a child element, the count pill pins itself to the top-right corner.
|
|
50
|
+
|
|
51
|
+
<Canvas of={DotCountStories.WithChildren} />
|
|
52
|
+
|
|
53
|
+
</Tab>
|
|
54
|
+
<Tab label="Implementation">
|
|
55
|
+
|
|
56
|
+
## Setup
|
|
57
|
+
|
|
58
|
+
Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
|
|
59
|
+
|
|
60
|
+
## Basic Usage
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { DotCount } from '@ledgerhq/lumen-ui-rnative';
|
|
64
|
+
|
|
65
|
+
function MyComponent() {
|
|
66
|
+
return <DotCount value={5} size="lg" />;
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Pinned to a child
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
<DotCount value={3} size="md">
|
|
74
|
+
<Avatar src="..." size="md" />
|
|
75
|
+
</DotCount>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Custom max
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
<DotCount value={150} max={50} size="lg" />
|
|
82
|
+
{/* Renders "50+" */}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
</Tab>
|
|
86
|
+
</CustomTabs>
|