@ledgerhq/lumen-ui-rnative 0.1.19 → 0.1.20
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/DotSymbol/DotSymbol.js +141 -0
- package/dist/module/lib/Components/DotSymbol/DotSymbol.js.map +1 -0
- package/dist/module/lib/Components/DotSymbol/DotSymbol.mdx +54 -0
- package/dist/module/lib/Components/DotSymbol/DotSymbol.stories.js +301 -0
- package/dist/module/lib/Components/DotSymbol/DotSymbol.stories.js.map +1 -0
- package/dist/module/lib/Components/DotSymbol/DotSymbol.test.js +134 -0
- package/dist/module/lib/Components/DotSymbol/DotSymbol.test.js.map +1 -0
- package/dist/module/lib/Components/DotSymbol/index.js +5 -0
- package/dist/module/lib/Components/DotSymbol/index.js.map +1 -0
- package/dist/module/lib/Components/DotSymbol/types.js +4 -0
- package/dist/module/lib/Components/DotSymbol/types.js.map +1 -0
- package/dist/module/lib/Components/MediaImage/MediaImage.js +1 -11
- package/dist/module/lib/Components/MediaImage/MediaImage.js.map +1 -1
- package/dist/module/lib/Components/MediaImage/index.js +1 -1
- package/dist/module/lib/Components/MediaImage/index.js.map +1 -1
- package/dist/module/lib/Components/Select/Select.stories.js +1 -0
- package/dist/module/lib/Components/Select/Select.stories.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/Components/DotSymbol/DotSymbol.d.ts +21 -0
- package/dist/typescript/src/lib/Components/DotSymbol/DotSymbol.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotSymbol/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotSymbol/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotSymbol/types.d.ts +34 -0
- package/dist/typescript/src/lib/Components/DotSymbol/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaImage/MediaImage.d.ts +1 -2
- package/dist/typescript/src/lib/Components/MediaImage/MediaImage.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaImage/index.d.ts +1 -1
- package/dist/typescript/src/lib/Components/MediaImage/index.d.ts.map +1 -1
- 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/Components/DotSymbol/DotSymbol.mdx +54 -0
- package/src/lib/Components/DotSymbol/DotSymbol.stories.tsx +191 -0
- package/src/lib/Components/DotSymbol/DotSymbol.test.tsx +119 -0
- package/src/lib/Components/DotSymbol/DotSymbol.tsx +161 -0
- package/src/lib/Components/DotSymbol/index.ts +2 -0
- package/src/lib/Components/DotSymbol/types.ts +40 -0
- package/src/lib/Components/MediaImage/MediaImage.tsx +6 -17
- package/src/lib/Components/MediaImage/index.ts +1 -1
- package/src/lib/Components/Select/Select.stories.tsx +1 -0
- package/src/lib/Components/index.ts +1 -0
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { Image, StyleSheet } from 'react-native';
|
|
5
|
+
import { useStyleSheet } from "../../../styles/index.js";
|
|
6
|
+
import { Box } from "../Utility/index.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const shapeRadiusMap = {
|
|
9
|
+
8: 'xs',
|
|
10
|
+
10: 'xs',
|
|
11
|
+
12: 'xs',
|
|
12
|
+
16: 'sm',
|
|
13
|
+
20: 'sm',
|
|
14
|
+
24: 'md'
|
|
15
|
+
};
|
|
16
|
+
const offsetBySize = {
|
|
17
|
+
8: -2,
|
|
18
|
+
10: -2,
|
|
19
|
+
12: -2,
|
|
20
|
+
16: -3,
|
|
21
|
+
20: -3,
|
|
22
|
+
24: -3
|
|
23
|
+
};
|
|
24
|
+
export const mediaImageDotSizeMap = {
|
|
25
|
+
12: 8,
|
|
26
|
+
16: 8,
|
|
27
|
+
20: 8,
|
|
28
|
+
24: 10,
|
|
29
|
+
32: 12,
|
|
30
|
+
40: 16,
|
|
31
|
+
48: 20,
|
|
32
|
+
56: 24
|
|
33
|
+
};
|
|
34
|
+
export const spotDotSizeMap = {
|
|
35
|
+
32: 12,
|
|
36
|
+
40: 16,
|
|
37
|
+
48: 20,
|
|
38
|
+
56: 24,
|
|
39
|
+
72: 24
|
|
40
|
+
};
|
|
41
|
+
const pinAxisMap = {
|
|
42
|
+
'top-start': ['top', 'left'],
|
|
43
|
+
'top-end': ['top', 'right'],
|
|
44
|
+
'bottom-start': ['bottom', 'left'],
|
|
45
|
+
'bottom-end': ['bottom', 'right']
|
|
46
|
+
};
|
|
47
|
+
const getPinOffset = (pin, size) => {
|
|
48
|
+
const [v, h] = pinAxisMap[pin];
|
|
49
|
+
const offset = offsetBySize[size];
|
|
50
|
+
return {
|
|
51
|
+
[v]: offset,
|
|
52
|
+
[h]: offset
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
const useStyles = ({
|
|
56
|
+
size,
|
|
57
|
+
shape,
|
|
58
|
+
pin
|
|
59
|
+
}) => {
|
|
60
|
+
return useStyleSheet(t => {
|
|
61
|
+
const sizeValue = t.sizes[`s${size}`];
|
|
62
|
+
const radius = shape === 'circle' ? t.borderRadius.full : t.borderRadius[shapeRadiusMap[size]];
|
|
63
|
+
const pinOffset = getPinOffset(pin, size);
|
|
64
|
+
return {
|
|
65
|
+
dot: {
|
|
66
|
+
position: 'absolute',
|
|
67
|
+
zIndex: 10,
|
|
68
|
+
width: sizeValue,
|
|
69
|
+
height: sizeValue,
|
|
70
|
+
borderRadius: radius,
|
|
71
|
+
borderWidth: 1,
|
|
72
|
+
backgroundColor: t.colors.bg.muted,
|
|
73
|
+
borderColor: t.colors.border.baseInverted,
|
|
74
|
+
overflow: 'hidden',
|
|
75
|
+
...pinOffset
|
|
76
|
+
},
|
|
77
|
+
image: {
|
|
78
|
+
width: '100%',
|
|
79
|
+
height: '100%'
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
}, [size, shape, pin]);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* A wrapper component that positions a small image indicator at a configurable
|
|
87
|
+
* corner of a child element like MediaImage or Spot.
|
|
88
|
+
*
|
|
89
|
+
* @example
|
|
90
|
+
* import { DotSymbol } from '@ledgerhq/lumen-ui-rnative';
|
|
91
|
+
*
|
|
92
|
+
* <DotSymbol src="https://example.com/eth.png" alt="Ethereum" pin="bottom-end">
|
|
93
|
+
* <MediaImage src="https://example.com/usdc.png" alt="USDC" size={48} />
|
|
94
|
+
* </DotSymbol>
|
|
95
|
+
*/
|
|
96
|
+
export const DotSymbol = ({
|
|
97
|
+
children,
|
|
98
|
+
src,
|
|
99
|
+
alt,
|
|
100
|
+
pin = 'bottom-end',
|
|
101
|
+
size = 20,
|
|
102
|
+
shape = 'circle',
|
|
103
|
+
lx = {},
|
|
104
|
+
style,
|
|
105
|
+
ref,
|
|
106
|
+
...rest
|
|
107
|
+
}) => {
|
|
108
|
+
const styles = useStyles({
|
|
109
|
+
size,
|
|
110
|
+
shape,
|
|
111
|
+
pin
|
|
112
|
+
});
|
|
113
|
+
const [error, setError] = useState(false);
|
|
114
|
+
useEffect(() => {
|
|
115
|
+
setError(false);
|
|
116
|
+
}, [src]);
|
|
117
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
118
|
+
ref: ref,
|
|
119
|
+
lx: lx,
|
|
120
|
+
style: StyleSheet.flatten([{
|
|
121
|
+
position: 'relative'
|
|
122
|
+
}, style]),
|
|
123
|
+
accessibilityRole: "image",
|
|
124
|
+
accessibilityLabel: alt,
|
|
125
|
+
...rest,
|
|
126
|
+
children: [children, /*#__PURE__*/_jsx(Box, {
|
|
127
|
+
style: styles.dot,
|
|
128
|
+
children: !error && /*#__PURE__*/_jsx(Image, {
|
|
129
|
+
source: {
|
|
130
|
+
uri: src
|
|
131
|
+
},
|
|
132
|
+
style: styles.image,
|
|
133
|
+
accessible: false,
|
|
134
|
+
onError: () => setError(true),
|
|
135
|
+
testID: "dot-symbol-img"
|
|
136
|
+
})
|
|
137
|
+
})]
|
|
138
|
+
});
|
|
139
|
+
};
|
|
140
|
+
DotSymbol.displayName = 'DotSymbol';
|
|
141
|
+
//# sourceMappingURL=DotSymbol.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useState","Image","StyleSheet","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","shapeRadiusMap","offsetBySize","mediaImageDotSizeMap","spotDotSizeMap","pinAxisMap","getPinOffset","pin","size","v","h","offset","useStyles","shape","t","sizeValue","sizes","radius","borderRadius","full","pinOffset","dot","position","zIndex","width","height","borderWidth","backgroundColor","colors","bg","muted","borderColor","border","baseInverted","overflow","image","DotSymbol","children","src","alt","lx","style","ref","rest","styles","error","setError","flatten","accessibilityRole","accessibilityLabel","source","uri","accessible","onError","testID","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotSymbol/DotSymbol.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import * as DotSymbolStories from './DotSymbol.stories';
|
|
3
|
+
import { CustomTabs, Tab } from '../../../../.storybook/components';
|
|
4
|
+
|
|
5
|
+
<Meta title='Communication/DotSymbol' of={DotSymbolStories} />
|
|
6
|
+
|
|
7
|
+
<CustomTabs>
|
|
8
|
+
<Tab label="Overview">
|
|
9
|
+
# DotSymbol
|
|
10
|
+
|
|
11
|
+
## Introduction
|
|
12
|
+
|
|
13
|
+
DotSymbol positions a small image indicator at a configurable corner of a child element such as MediaImage or Spot. It is commonly used to show a network badge or secondary icon overlapping a primary symbol.
|
|
14
|
+
|
|
15
|
+
## Anatomy
|
|
16
|
+
|
|
17
|
+
<Canvas of={DotSymbolStories.Base} />
|
|
18
|
+
|
|
19
|
+
- **Wrapper**: Relative container that preserves the child's layout
|
|
20
|
+
- **Child**: The primary element (e.g. MediaImage, Spot)
|
|
21
|
+
- **Dot**: Absolutely-positioned image indicator with border and configurable shape
|
|
22
|
+
|
|
23
|
+
## Properties
|
|
24
|
+
|
|
25
|
+
### Overview
|
|
26
|
+
|
|
27
|
+
<Canvas of={DotSymbolStories.Base} />
|
|
28
|
+
<Controls of={DotSymbolStories.Base} />
|
|
29
|
+
|
|
30
|
+
### Pin
|
|
31
|
+
|
|
32
|
+
Four corner placements are available: `bottom-end` (default), `top-end`, `bottom-start`, and `top-start`.
|
|
33
|
+
|
|
34
|
+
<Canvas of={DotSymbolStories.PinShowcase} />
|
|
35
|
+
|
|
36
|
+
### Shapes
|
|
37
|
+
|
|
38
|
+
<Canvas of={DotSymbolStories.ShapeShowcase} />
|
|
39
|
+
|
|
40
|
+
- **circle** (default): Fully rounded dot
|
|
41
|
+
- **square**: Rounded corners that scale with size
|
|
42
|
+
|
|
43
|
+
### Sizes
|
|
44
|
+
|
|
45
|
+
The dot size is driven by the parent MediaImage or Spot size via the mapping helpers `mediaImageDotSizeMap` and `spotDotSizeMap`.
|
|
46
|
+
|
|
47
|
+
<Canvas of={DotSymbolStories.SizeShowcase} />
|
|
48
|
+
|
|
49
|
+
## Accessibility
|
|
50
|
+
|
|
51
|
+
- Always provide a meaningful `alt` prop on the DotSymbol so the indicator image is announced by screen readers.
|
|
52
|
+
- The child element should carry its own accessibility label independently.
|
|
53
|
+
</Tab>
|
|
54
|
+
</CustomTabs>
|
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { CoinAlert } from "../../Symbols/index.js";
|
|
4
|
+
import { MediaImage } from "../MediaImage/index.js";
|
|
5
|
+
import { Spot } from "../Spot/index.js";
|
|
6
|
+
import { Box } from "../Utility/index.js";
|
|
7
|
+
import { DotSymbol, mediaImageDotSizeMap } from "./DotSymbol.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
const meta = {
|
|
10
|
+
component: DotSymbol,
|
|
11
|
+
title: 'Communication/DotSymbol',
|
|
12
|
+
parameters: {
|
|
13
|
+
docs: {
|
|
14
|
+
source: {
|
|
15
|
+
language: 'tsx',
|
|
16
|
+
format: true,
|
|
17
|
+
type: 'code'
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
export default meta;
|
|
23
|
+
const parentSrc = 'https://crypto-icons.ledger.com/ADA.png';
|
|
24
|
+
const dotSrc = 'https://crypto-icons.ledger.com/BTC.png';
|
|
25
|
+
export const Base = {
|
|
26
|
+
args: {
|
|
27
|
+
src: dotSrc,
|
|
28
|
+
alt: 'Ethereum network',
|
|
29
|
+
pin: 'bottom-end',
|
|
30
|
+
size: 20,
|
|
31
|
+
shape: 'circle',
|
|
32
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
33
|
+
src: parentSrc,
|
|
34
|
+
alt: "Cardano",
|
|
35
|
+
shape: "circle"
|
|
36
|
+
})
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
export const PinShowcase = {
|
|
40
|
+
args: {
|
|
41
|
+
src: dotSrc,
|
|
42
|
+
alt: 'Pin showcase'
|
|
43
|
+
},
|
|
44
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
45
|
+
lx: {
|
|
46
|
+
flexDirection: 'column',
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
gap: 's24'
|
|
49
|
+
},
|
|
50
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
|
51
|
+
lx: {
|
|
52
|
+
flexDirection: 'row',
|
|
53
|
+
alignItems: 'center',
|
|
54
|
+
gap: 's32'
|
|
55
|
+
},
|
|
56
|
+
children: [/*#__PURE__*/_jsx(DotSymbol, {
|
|
57
|
+
src: dotSrc,
|
|
58
|
+
pin: "bottom-end",
|
|
59
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
60
|
+
src: parentSrc,
|
|
61
|
+
shape: "circle"
|
|
62
|
+
})
|
|
63
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
64
|
+
src: dotSrc,
|
|
65
|
+
pin: "top-end",
|
|
66
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
67
|
+
src: parentSrc,
|
|
68
|
+
shape: "circle"
|
|
69
|
+
})
|
|
70
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
71
|
+
src: dotSrc,
|
|
72
|
+
pin: "bottom-start",
|
|
73
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
74
|
+
src: parentSrc,
|
|
75
|
+
shape: "circle"
|
|
76
|
+
})
|
|
77
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
78
|
+
src: dotSrc,
|
|
79
|
+
pin: "top-start",
|
|
80
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
81
|
+
src: parentSrc,
|
|
82
|
+
shape: "circle"
|
|
83
|
+
})
|
|
84
|
+
})]
|
|
85
|
+
}), /*#__PURE__*/_jsxs(Box, {
|
|
86
|
+
lx: {
|
|
87
|
+
flexDirection: 'row',
|
|
88
|
+
alignItems: 'center',
|
|
89
|
+
gap: 's32'
|
|
90
|
+
},
|
|
91
|
+
children: [/*#__PURE__*/_jsx(DotSymbol, {
|
|
92
|
+
src: dotSrc,
|
|
93
|
+
pin: "bottom-end",
|
|
94
|
+
children: /*#__PURE__*/_jsx(Spot, {
|
|
95
|
+
appearance: "icon",
|
|
96
|
+
icon: CoinAlert
|
|
97
|
+
})
|
|
98
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
99
|
+
src: dotSrc,
|
|
100
|
+
pin: "top-end",
|
|
101
|
+
children: /*#__PURE__*/_jsx(Spot, {
|
|
102
|
+
appearance: "icon",
|
|
103
|
+
icon: CoinAlert
|
|
104
|
+
})
|
|
105
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
106
|
+
src: dotSrc,
|
|
107
|
+
pin: "bottom-start",
|
|
108
|
+
children: /*#__PURE__*/_jsx(Spot, {
|
|
109
|
+
appearance: "icon",
|
|
110
|
+
icon: CoinAlert
|
|
111
|
+
})
|
|
112
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
113
|
+
src: dotSrc,
|
|
114
|
+
pin: "top-start",
|
|
115
|
+
children: /*#__PURE__*/_jsx(Spot, {
|
|
116
|
+
appearance: "icon",
|
|
117
|
+
icon: CoinAlert
|
|
118
|
+
})
|
|
119
|
+
})]
|
|
120
|
+
})]
|
|
121
|
+
})
|
|
122
|
+
};
|
|
123
|
+
export const ShapeShowcase = {
|
|
124
|
+
args: {
|
|
125
|
+
src: dotSrc,
|
|
126
|
+
alt: 'Shape showcase'
|
|
127
|
+
},
|
|
128
|
+
render: () => /*#__PURE__*/_jsx(Box, {
|
|
129
|
+
lx: {
|
|
130
|
+
flexDirection: 'column',
|
|
131
|
+
alignItems: 'center',
|
|
132
|
+
gap: 's48'
|
|
133
|
+
},
|
|
134
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
|
135
|
+
lx: {
|
|
136
|
+
flexDirection: 'row',
|
|
137
|
+
alignItems: 'center',
|
|
138
|
+
gap: 's48'
|
|
139
|
+
},
|
|
140
|
+
children: [/*#__PURE__*/_jsx(DotSymbol, {
|
|
141
|
+
shape: "square",
|
|
142
|
+
src: dotSrc,
|
|
143
|
+
pin: "bottom-end",
|
|
144
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
145
|
+
src: parentSrc,
|
|
146
|
+
shape: "circle"
|
|
147
|
+
})
|
|
148
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
149
|
+
shape: "circle",
|
|
150
|
+
src: dotSrc,
|
|
151
|
+
pin: "bottom-end",
|
|
152
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
153
|
+
src: parentSrc,
|
|
154
|
+
shape: "circle"
|
|
155
|
+
})
|
|
156
|
+
})]
|
|
157
|
+
})
|
|
158
|
+
})
|
|
159
|
+
};
|
|
160
|
+
export const SizeShowcase = {
|
|
161
|
+
args: {
|
|
162
|
+
src: dotSrc,
|
|
163
|
+
alt: 'Size showcase'
|
|
164
|
+
},
|
|
165
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
166
|
+
lx: {
|
|
167
|
+
flexDirection: 'column',
|
|
168
|
+
gap: 's40'
|
|
169
|
+
},
|
|
170
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
|
171
|
+
lx: {
|
|
172
|
+
flexDirection: 'row',
|
|
173
|
+
alignItems: 'flex-end',
|
|
174
|
+
gap: 's24'
|
|
175
|
+
},
|
|
176
|
+
children: [/*#__PURE__*/_jsx(DotSymbol, {
|
|
177
|
+
src: dotSrc,
|
|
178
|
+
size: mediaImageDotSizeMap[20],
|
|
179
|
+
pin: "bottom-end",
|
|
180
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
181
|
+
src: parentSrc,
|
|
182
|
+
size: 20,
|
|
183
|
+
shape: "circle"
|
|
184
|
+
})
|
|
185
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
186
|
+
src: dotSrc,
|
|
187
|
+
size: mediaImageDotSizeMap[24],
|
|
188
|
+
pin: "bottom-end",
|
|
189
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
190
|
+
src: parentSrc,
|
|
191
|
+
size: 24,
|
|
192
|
+
shape: "circle"
|
|
193
|
+
})
|
|
194
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
195
|
+
src: dotSrc,
|
|
196
|
+
size: mediaImageDotSizeMap[32],
|
|
197
|
+
pin: "bottom-end",
|
|
198
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
199
|
+
src: parentSrc,
|
|
200
|
+
size: 32,
|
|
201
|
+
shape: "circle"
|
|
202
|
+
})
|
|
203
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
204
|
+
src: dotSrc,
|
|
205
|
+
size: mediaImageDotSizeMap[40],
|
|
206
|
+
pin: "bottom-end",
|
|
207
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
208
|
+
src: parentSrc,
|
|
209
|
+
size: 40,
|
|
210
|
+
shape: "circle"
|
|
211
|
+
})
|
|
212
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
213
|
+
src: dotSrc,
|
|
214
|
+
size: mediaImageDotSizeMap[48],
|
|
215
|
+
pin: "bottom-end",
|
|
216
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
217
|
+
src: parentSrc,
|
|
218
|
+
size: 48,
|
|
219
|
+
shape: "circle"
|
|
220
|
+
})
|
|
221
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
222
|
+
src: dotSrc,
|
|
223
|
+
size: mediaImageDotSizeMap[56],
|
|
224
|
+
pin: "bottom-end",
|
|
225
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
226
|
+
src: parentSrc,
|
|
227
|
+
size: 56,
|
|
228
|
+
shape: "circle"
|
|
229
|
+
})
|
|
230
|
+
})]
|
|
231
|
+
}), /*#__PURE__*/_jsxs(Box, {
|
|
232
|
+
lx: {
|
|
233
|
+
flexDirection: 'row',
|
|
234
|
+
alignItems: 'flex-end',
|
|
235
|
+
gap: 's24'
|
|
236
|
+
},
|
|
237
|
+
children: [/*#__PURE__*/_jsx(DotSymbol, {
|
|
238
|
+
shape: "square",
|
|
239
|
+
src: dotSrc,
|
|
240
|
+
size: mediaImageDotSizeMap[20],
|
|
241
|
+
pin: "bottom-end",
|
|
242
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
243
|
+
src: parentSrc,
|
|
244
|
+
size: 20,
|
|
245
|
+
shape: "circle"
|
|
246
|
+
})
|
|
247
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
248
|
+
shape: "square",
|
|
249
|
+
src: dotSrc,
|
|
250
|
+
size: mediaImageDotSizeMap[24],
|
|
251
|
+
pin: "bottom-end",
|
|
252
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
253
|
+
src: parentSrc,
|
|
254
|
+
size: 24,
|
|
255
|
+
shape: "circle"
|
|
256
|
+
})
|
|
257
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
258
|
+
shape: "square",
|
|
259
|
+
src: dotSrc,
|
|
260
|
+
size: mediaImageDotSizeMap[32],
|
|
261
|
+
pin: "bottom-end",
|
|
262
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
263
|
+
src: parentSrc,
|
|
264
|
+
size: 32,
|
|
265
|
+
shape: "circle"
|
|
266
|
+
})
|
|
267
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
268
|
+
shape: "square",
|
|
269
|
+
src: dotSrc,
|
|
270
|
+
size: mediaImageDotSizeMap[40],
|
|
271
|
+
pin: "bottom-end",
|
|
272
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
273
|
+
src: parentSrc,
|
|
274
|
+
size: 40,
|
|
275
|
+
shape: "circle"
|
|
276
|
+
})
|
|
277
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
278
|
+
shape: "square",
|
|
279
|
+
src: dotSrc,
|
|
280
|
+
size: mediaImageDotSizeMap[48],
|
|
281
|
+
pin: "bottom-end",
|
|
282
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
283
|
+
src: parentSrc,
|
|
284
|
+
size: 48,
|
|
285
|
+
shape: "circle"
|
|
286
|
+
})
|
|
287
|
+
}), /*#__PURE__*/_jsx(DotSymbol, {
|
|
288
|
+
shape: "square",
|
|
289
|
+
src: dotSrc,
|
|
290
|
+
size: mediaImageDotSizeMap[56],
|
|
291
|
+
pin: "bottom-end",
|
|
292
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
293
|
+
src: parentSrc,
|
|
294
|
+
size: 56,
|
|
295
|
+
shape: "circle"
|
|
296
|
+
})
|
|
297
|
+
})]
|
|
298
|
+
})]
|
|
299
|
+
})
|
|
300
|
+
};
|
|
301
|
+
//# sourceMappingURL=DotSymbol.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["CoinAlert","MediaImage","Spot","Box","DotSymbol","mediaImageDotSizeMap","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","parentSrc","dotSrc","Base","args","src","alt","pin","size","shape","children","PinShowcase","render","lx","flexDirection","alignItems","gap","appearance","icon","ShapeShowcase","SizeShowcase"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotSymbol/DotSymbol.stories.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { describe, it, expect } from '@jest/globals';
|
|
4
|
+
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
5
|
+
import { render, waitFor } from '@testing-library/react-native';
|
|
6
|
+
import { Text } from 'react-native';
|
|
7
|
+
import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
|
|
8
|
+
import { DotSymbol } from "./DotSymbol.js";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
const TestWrapper = ({
|
|
11
|
+
children
|
|
12
|
+
}) => /*#__PURE__*/_jsx(ThemeProvider, {
|
|
13
|
+
themes: ledgerLiveThemes,
|
|
14
|
+
colorScheme: "dark",
|
|
15
|
+
locale: "en",
|
|
16
|
+
children: children
|
|
17
|
+
});
|
|
18
|
+
describe('DotSymbol Component', () => {
|
|
19
|
+
const dotSrc = 'https://crypto-icons.ledger.com/BTC.png';
|
|
20
|
+
it('should render children and dot image', () => {
|
|
21
|
+
const {
|
|
22
|
+
getByText,
|
|
23
|
+
getByTestId
|
|
24
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
25
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
26
|
+
src: dotSrc,
|
|
27
|
+
alt: "Bitcoin",
|
|
28
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
29
|
+
children: "Child"
|
|
30
|
+
})
|
|
31
|
+
})
|
|
32
|
+
}));
|
|
33
|
+
expect(getByText('Child')).toBeTruthy();
|
|
34
|
+
const img = getByTestId('dot-symbol-img');
|
|
35
|
+
expect(img.props.source).toEqual({
|
|
36
|
+
uri: dotSrc
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
it('should render without children', () => {
|
|
40
|
+
const {
|
|
41
|
+
getByTestId
|
|
42
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
43
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
44
|
+
src: dotSrc
|
|
45
|
+
})
|
|
46
|
+
}));
|
|
47
|
+
expect(getByTestId('dot-symbol-img')).toBeTruthy();
|
|
48
|
+
});
|
|
49
|
+
it('should render fallback when image fails to load', async () => {
|
|
50
|
+
const {
|
|
51
|
+
getByTestId,
|
|
52
|
+
queryByTestId,
|
|
53
|
+
rerender
|
|
54
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
55
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
56
|
+
src: "https://broken-link.com/404.png"
|
|
57
|
+
})
|
|
58
|
+
}));
|
|
59
|
+
const img = getByTestId('dot-symbol-img');
|
|
60
|
+
img.props.onError();
|
|
61
|
+
rerender(/*#__PURE__*/_jsx(TestWrapper, {
|
|
62
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
63
|
+
src: "https://broken-link.com/404.png"
|
|
64
|
+
})
|
|
65
|
+
}));
|
|
66
|
+
await waitFor(() => {
|
|
67
|
+
expect(queryByTestId('dot-symbol-img')).toBeNull();
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
it('should reset error state when src changes', async () => {
|
|
71
|
+
const {
|
|
72
|
+
getByTestId,
|
|
73
|
+
rerender
|
|
74
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
75
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
76
|
+
src: "https://broken-link.com/404.png"
|
|
77
|
+
})
|
|
78
|
+
}));
|
|
79
|
+
const img = getByTestId('dot-symbol-img');
|
|
80
|
+
img.props.onError();
|
|
81
|
+
rerender(/*#__PURE__*/_jsx(TestWrapper, {
|
|
82
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
83
|
+
src: dotSrc
|
|
84
|
+
})
|
|
85
|
+
}));
|
|
86
|
+
await waitFor(() => {
|
|
87
|
+
const newImg = getByTestId('dot-symbol-img');
|
|
88
|
+
expect(newImg.props.source).toEqual({
|
|
89
|
+
uri: dotSrc
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
});
|
|
93
|
+
it('should set accessibility label from alt prop', () => {
|
|
94
|
+
const {
|
|
95
|
+
getByLabelText
|
|
96
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
97
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
98
|
+
src: dotSrc,
|
|
99
|
+
alt: "Bitcoin network"
|
|
100
|
+
})
|
|
101
|
+
}));
|
|
102
|
+
expect(getByLabelText('Bitcoin network')).toBeTruthy();
|
|
103
|
+
});
|
|
104
|
+
it('should apply custom styles', () => {
|
|
105
|
+
const {
|
|
106
|
+
getByTestId
|
|
107
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
108
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
109
|
+
testID: "ds",
|
|
110
|
+
src: dotSrc,
|
|
111
|
+
style: {
|
|
112
|
+
marginTop: 10
|
|
113
|
+
}
|
|
114
|
+
})
|
|
115
|
+
}));
|
|
116
|
+
const root = getByTestId('ds');
|
|
117
|
+
expect(root.props.style.marginTop).toBe(10);
|
|
118
|
+
});
|
|
119
|
+
it('should pass additional props', () => {
|
|
120
|
+
const {
|
|
121
|
+
getByTestId
|
|
122
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
123
|
+
children: /*#__PURE__*/_jsx(DotSymbol, {
|
|
124
|
+
testID: "custom-dot",
|
|
125
|
+
src: dotSrc
|
|
126
|
+
})
|
|
127
|
+
}));
|
|
128
|
+
expect(getByTestId('custom-dot')).toBeTruthy();
|
|
129
|
+
});
|
|
130
|
+
it('should have correct displayName', () => {
|
|
131
|
+
expect(DotSymbol.displayName).toBe('DotSymbol');
|
|
132
|
+
});
|
|
133
|
+
});
|
|
134
|
+
//# sourceMappingURL=DotSymbol.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","waitFor","Text","ThemeProvider","DotSymbol","jsx","_jsx","TestWrapper","children","themes","colorScheme","locale","dotSrc","getByText","getByTestId","src","alt","toBeTruthy","img","props","source","toEqual","uri","queryByTestId","rerender","onError","toBeNull","newImg","getByLabelText","testID","style","marginTop","root","toBe","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotSymbol/DotSymbol.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["DotSymbol","mediaImageDotSizeMap","spotDotSizeMap"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotSymbol/index.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,oBAAoB,EAAEC,cAAc,QAAQ,gBAAa;AAC7E,cAAc,YAAS","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/DotSymbol/types.ts"],"mappings":"","ignoreList":[]}
|