@ledgerhq/lumen-ui-rnative 0.1.33 → 0.1.34
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/BaseTag/BaseTag.js +122 -0
- package/dist/module/lib/Components/BaseTag/BaseTag.js.map +1 -0
- package/dist/module/lib/Components/BaseTag/BaseTag.test.js +144 -0
- package/dist/module/lib/Components/BaseTag/BaseTag.test.js.map +1 -0
- package/dist/module/lib/Components/BaseTag/index.js +5 -0
- package/dist/module/lib/Components/BaseTag/index.js.map +1 -0
- package/dist/module/lib/Components/BaseTag/types.js +4 -0
- package/dist/module/lib/Components/BaseTag/types.js.map +1 -0
- package/dist/module/lib/Components/MediaImage/MediaImage.js +5 -1
- package/dist/module/lib/Components/MediaImage/MediaImage.js.map +1 -1
- package/dist/module/lib/Components/MediaTag/MediaTag.js +39 -0
- package/dist/module/lib/Components/MediaTag/MediaTag.js.map +1 -0
- package/dist/module/lib/Components/MediaTag/MediaTag.mdx +161 -0
- package/dist/module/lib/Components/MediaTag/MediaTag.stories.js +122 -0
- package/dist/module/lib/Components/MediaTag/MediaTag.stories.js.map +1 -0
- package/dist/module/lib/Components/MediaTag/MediaTag.test.js +30 -0
- package/dist/module/lib/Components/MediaTag/MediaTag.test.js.map +1 -0
- package/dist/module/lib/Components/MediaTag/index.js +5 -0
- package/dist/module/lib/Components/MediaTag/index.js.map +1 -0
- package/dist/module/lib/Components/MediaTag/types.js +4 -0
- package/dist/module/lib/Components/MediaTag/types.js.map +1 -0
- package/dist/module/lib/Components/Tag/Tag.js +10 -95
- package/dist/module/lib/Components/Tag/Tag.js.map +1 -1
- package/dist/module/lib/Components/Tag/Tag.mdx +1 -79
- 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/Tag/Tag.test.js +69 -0
- package/dist/module/lib/Components/Tag/Tag.test.js.map +1 -0
- 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/BaseTag/BaseTag.d.ts +3 -0
- package/dist/typescript/src/lib/Components/BaseTag/BaseTag.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/BaseTag/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/BaseTag/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/BaseTag/types.d.ts +10 -0
- package/dist/typescript/src/lib/Components/BaseTag/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaImage/MediaImage.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaTag/MediaTag.d.ts +26 -0
- package/dist/typescript/src/lib/Components/MediaTag/MediaTag.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaTag/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/MediaTag/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaTag/types.d.ts +10 -0
- package/dist/typescript/src/lib/Components/MediaTag/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/Tag/Tag.d.ts +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 +1 -0
- package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/lib/Components/BaseTag/BaseTag.test.tsx +137 -0
- package/src/lib/Components/BaseTag/BaseTag.tsx +152 -0
- package/src/lib/Components/BaseTag/index.ts +2 -0
- package/src/lib/Components/BaseTag/types.ts +11 -0
- package/src/lib/Components/MediaImage/MediaImage.tsx +5 -1
- package/src/lib/Components/MediaTag/MediaTag.mdx +161 -0
- package/src/lib/Components/MediaTag/MediaTag.stories.tsx +112 -0
- package/src/lib/Components/MediaTag/MediaTag.test.tsx +27 -0
- package/src/lib/Components/MediaTag/MediaTag.tsx +36 -0
- package/src/lib/Components/MediaTag/index.ts +2 -0
- package/src/lib/Components/MediaTag/types.ts +10 -0
- package/src/lib/Components/Tag/Tag.mdx +1 -79
- package/src/lib/Components/Tag/Tag.stories.tsx +3 -0
- package/src/lib/Components/Tag/Tag.test.tsx +51 -0
- package/src/lib/Components/Tag/Tag.tsx +12 -119
- package/src/lib/Components/Tag/types.ts +2 -1
- package/src/lib/Components/index.ts +1 -0
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
|
|
4
|
+
import { StyleSheet, Text } 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 useBaseTagStyles = ({
|
|
9
|
+
appearance,
|
|
10
|
+
size,
|
|
11
|
+
disabled,
|
|
12
|
+
variant
|
|
13
|
+
}) => {
|
|
14
|
+
return useStyleSheet(t => {
|
|
15
|
+
const bgColors = {
|
|
16
|
+
base: t.colors.bg.mutedTransparent,
|
|
17
|
+
gray: t.colors.bg.mutedTransparent,
|
|
18
|
+
accent: t.colors.bg.accent,
|
|
19
|
+
'accent-subtle': t.colors.bg.activeSubtle,
|
|
20
|
+
success: t.colors.bg.success,
|
|
21
|
+
error: t.colors.bg.error,
|
|
22
|
+
warning: t.colors.bg.warning,
|
|
23
|
+
white: t.colors.bg.white
|
|
24
|
+
};
|
|
25
|
+
const textColors = {
|
|
26
|
+
base: t.colors.text.base,
|
|
27
|
+
gray: t.colors.text.muted,
|
|
28
|
+
accent: t.colors.text.onAccent,
|
|
29
|
+
'accent-subtle': t.colors.text.active,
|
|
30
|
+
success: t.colors.text.success,
|
|
31
|
+
error: t.colors.text.error,
|
|
32
|
+
warning: t.colors.text.warning,
|
|
33
|
+
white: t.colors.text.black
|
|
34
|
+
};
|
|
35
|
+
const tagPadding = {
|
|
36
|
+
md: {
|
|
37
|
+
paddingHorizontal: t.spacings.s8,
|
|
38
|
+
paddingVertical: t.spacings.s4
|
|
39
|
+
},
|
|
40
|
+
sm: {
|
|
41
|
+
paddingHorizontal: t.spacings.s4,
|
|
42
|
+
paddingVertical: t.spacings.s2
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const mediaPadding = {
|
|
46
|
+
md: {
|
|
47
|
+
paddingLeft: t.spacings.s4,
|
|
48
|
+
paddingRight: t.spacings.s8,
|
|
49
|
+
paddingVertical: t.spacings.s4
|
|
50
|
+
},
|
|
51
|
+
sm: {
|
|
52
|
+
paddingLeft: t.spacings.s4,
|
|
53
|
+
paddingRight: t.spacings.s4,
|
|
54
|
+
paddingVertical: t.spacings.s2
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const padding = variant === 'media' ? mediaPadding[size] : tagPadding[size];
|
|
58
|
+
const textTypography = size === 'md' ? t.typographies.body3 : t.typographies.body4;
|
|
59
|
+
return {
|
|
60
|
+
root: StyleSheet.flatten([{
|
|
61
|
+
flexDirection: 'row',
|
|
62
|
+
alignItems: 'center',
|
|
63
|
+
justifyContent: 'center',
|
|
64
|
+
gap: t.spacings.s4,
|
|
65
|
+
borderRadius: t.borderRadius.xs,
|
|
66
|
+
backgroundColor: bgColors[appearance],
|
|
67
|
+
...padding
|
|
68
|
+
}, disabled && {
|
|
69
|
+
backgroundColor: t.colors.bg.disabled
|
|
70
|
+
}]),
|
|
71
|
+
text: StyleSheet.flatten([textTypography, {
|
|
72
|
+
color: textColors[appearance]
|
|
73
|
+
}, disabled && {
|
|
74
|
+
color: t.colors.text.disabled
|
|
75
|
+
}]),
|
|
76
|
+
icon: StyleSheet.flatten([{
|
|
77
|
+
flexShrink: 0,
|
|
78
|
+
color: textColors[appearance]
|
|
79
|
+
}, disabled && {
|
|
80
|
+
color: t.colors.text.disabled
|
|
81
|
+
}])
|
|
82
|
+
};
|
|
83
|
+
}, [appearance, size, disabled, variant]);
|
|
84
|
+
};
|
|
85
|
+
export const BaseTag = ({
|
|
86
|
+
appearance = 'accent',
|
|
87
|
+
size = 'md',
|
|
88
|
+
variant,
|
|
89
|
+
consumerName,
|
|
90
|
+
label,
|
|
91
|
+
renderIcon,
|
|
92
|
+
disabled: disabledProp = false,
|
|
93
|
+
lx = {},
|
|
94
|
+
style,
|
|
95
|
+
ref,
|
|
96
|
+
...props
|
|
97
|
+
}) => {
|
|
98
|
+
const disabled = useDisabledContext({
|
|
99
|
+
consumerName,
|
|
100
|
+
mergeWith: {
|
|
101
|
+
disabled: disabledProp
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
const styles = useBaseTagStyles({
|
|
105
|
+
appearance,
|
|
106
|
+
size,
|
|
107
|
+
disabled: !!disabled,
|
|
108
|
+
variant
|
|
109
|
+
});
|
|
110
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
111
|
+
ref: ref,
|
|
112
|
+
lx: lx,
|
|
113
|
+
style: StyleSheet.flatten([styles.root, style]),
|
|
114
|
+
...props,
|
|
115
|
+
children: [renderIcon?.(styles.icon), /*#__PURE__*/_jsx(Text, {
|
|
116
|
+
style: styles.text,
|
|
117
|
+
numberOfLines: 1,
|
|
118
|
+
children: label
|
|
119
|
+
})]
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=BaseTag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useDisabledContext","StyleSheet","Text","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","useBaseTagStyles","appearance","size","disabled","variant","t","bgColors","base","colors","bg","mutedTransparent","gray","accent","activeSubtle","success","error","warning","white","textColors","text","muted","onAccent","active","black","tagPadding","md","paddingHorizontal","spacings","s8","paddingVertical","s4","sm","s2","mediaPadding","paddingLeft","paddingRight","padding","textTypography","typographies","body3","body4","root","flatten","flexDirection","alignItems","justifyContent","gap","borderRadius","xs","backgroundColor","color","icon","flexShrink","BaseTag","consumerName","label","renderIcon","disabledProp","lx","style","ref","props","mergeWith","styles","children","numberOfLines"],"sourceRoot":"../../../../../src","sources":["lib/Components/BaseTag/BaseTag.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { describe, it, expect, jest } from '@jest/globals';
|
|
4
|
+
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
5
|
+
import { render, screen } from '@testing-library/react-native';
|
|
6
|
+
import { Text } from 'react-native';
|
|
7
|
+
import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
|
|
8
|
+
import { BaseTag } from "./BaseTag.js";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
const {
|
|
11
|
+
colors
|
|
12
|
+
} = ledgerLiveThemes.dark;
|
|
13
|
+
const renderWithProvider = component => render(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
14
|
+
themes: ledgerLiveThemes,
|
|
15
|
+
colorScheme: "dark",
|
|
16
|
+
locale: "en",
|
|
17
|
+
children: component
|
|
18
|
+
}));
|
|
19
|
+
const baseProps = {
|
|
20
|
+
consumerName: 'BaseTagTest',
|
|
21
|
+
variant: 'tag',
|
|
22
|
+
label: 'Label',
|
|
23
|
+
testID: 'base-tag'
|
|
24
|
+
};
|
|
25
|
+
describe('BaseTag Component', () => {
|
|
26
|
+
describe('Rendering', () => {
|
|
27
|
+
it('should render label text', () => {
|
|
28
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
29
|
+
...baseProps,
|
|
30
|
+
label: "Bitcoin"
|
|
31
|
+
}));
|
|
32
|
+
expect(screen.getByText('Bitcoin')).toBeTruthy();
|
|
33
|
+
});
|
|
34
|
+
it('should render testID on root element', () => {
|
|
35
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
36
|
+
...baseProps
|
|
37
|
+
}));
|
|
38
|
+
expect(screen.getByTestId('base-tag')).toBeTruthy();
|
|
39
|
+
});
|
|
40
|
+
it('should not render any icon when renderIcon is not provided', () => {
|
|
41
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
42
|
+
...baseProps
|
|
43
|
+
}));
|
|
44
|
+
expect(screen.queryByTestId('test-icon')).toBeNull();
|
|
45
|
+
});
|
|
46
|
+
it('should call renderIcon with the computed icon style', () => {
|
|
47
|
+
const renderIcon = jest.fn(() => /*#__PURE__*/_jsx(Text, {
|
|
48
|
+
testID: "test-icon",
|
|
49
|
+
children: "icon"
|
|
50
|
+
}));
|
|
51
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
52
|
+
...baseProps,
|
|
53
|
+
renderIcon: renderIcon
|
|
54
|
+
}));
|
|
55
|
+
expect(screen.getByTestId('test-icon')).toBeTruthy();
|
|
56
|
+
expect(renderIcon).toHaveBeenCalledWith(expect.objectContaining({
|
|
57
|
+
color: expect.any(String)
|
|
58
|
+
}));
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
describe('Appearances', () => {
|
|
62
|
+
const cases = [['base', colors.bg.mutedTransparent], ['gray', colors.bg.mutedTransparent], ['accent', colors.bg.accent], ['accent-subtle', colors.bg.activeSubtle], ['success', colors.bg.success], ['error', colors.bg.error], ['warning', colors.bg.warning], ['white', colors.bg.white]];
|
|
63
|
+
it.each(cases)('should render with %s background color', (appearance, expected) => {
|
|
64
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
65
|
+
...baseProps,
|
|
66
|
+
appearance: appearance
|
|
67
|
+
}));
|
|
68
|
+
expect(screen.getByTestId('base-tag').props.style.backgroundColor).toBe(expected);
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
describe('Sizes', () => {
|
|
72
|
+
it.each(['sm', 'md'])('should render with %s size', size => {
|
|
73
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
74
|
+
...baseProps,
|
|
75
|
+
size: size
|
|
76
|
+
}));
|
|
77
|
+
expect(screen.getByTestId('base-tag')).toBeTruthy();
|
|
78
|
+
});
|
|
79
|
+
it('should use smaller padding for sm than md (tag variant)', () => {
|
|
80
|
+
const {
|
|
81
|
+
rerender
|
|
82
|
+
} = renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
83
|
+
...baseProps,
|
|
84
|
+
size: "md"
|
|
85
|
+
}));
|
|
86
|
+
const mdPadding = screen.getByTestId('base-tag').props.style.paddingHorizontal;
|
|
87
|
+
rerender(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
88
|
+
themes: ledgerLiveThemes,
|
|
89
|
+
colorScheme: "dark",
|
|
90
|
+
locale: "en",
|
|
91
|
+
children: /*#__PURE__*/_jsx(BaseTag, {
|
|
92
|
+
...baseProps,
|
|
93
|
+
size: "sm"
|
|
94
|
+
})
|
|
95
|
+
}));
|
|
96
|
+
const smPadding = screen.getByTestId('base-tag').props.style.paddingHorizontal;
|
|
97
|
+
expect(smPadding).toBeLessThan(mdPadding);
|
|
98
|
+
});
|
|
99
|
+
});
|
|
100
|
+
describe('Variants', () => {
|
|
101
|
+
it('should use paddingHorizontal for tag variant', () => {
|
|
102
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
103
|
+
...baseProps,
|
|
104
|
+
variant: "tag"
|
|
105
|
+
}));
|
|
106
|
+
const style = screen.getByTestId('base-tag').props.style;
|
|
107
|
+
expect(style.paddingHorizontal).toBeDefined();
|
|
108
|
+
expect(style.paddingLeft).toBeUndefined();
|
|
109
|
+
expect(style.paddingRight).toBeUndefined();
|
|
110
|
+
});
|
|
111
|
+
it('should use asymmetric paddingLeft / paddingRight for media variant', () => {
|
|
112
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
113
|
+
...baseProps,
|
|
114
|
+
variant: "media"
|
|
115
|
+
}));
|
|
116
|
+
const style = screen.getByTestId('base-tag').props.style;
|
|
117
|
+
expect(style.paddingLeft).toBeDefined();
|
|
118
|
+
expect(style.paddingRight).toBeDefined();
|
|
119
|
+
expect(style.paddingHorizontal).toBeUndefined();
|
|
120
|
+
});
|
|
121
|
+
});
|
|
122
|
+
describe('Disabled', () => {
|
|
123
|
+
it('should apply disabled background when disabled', () => {
|
|
124
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
125
|
+
...baseProps,
|
|
126
|
+
disabled: true
|
|
127
|
+
}));
|
|
128
|
+
expect(screen.getByTestId('base-tag').props.style.backgroundColor).toBe(colors.bg.disabled);
|
|
129
|
+
});
|
|
130
|
+
});
|
|
131
|
+
describe('Styling', () => {
|
|
132
|
+
it('should merge custom style with computed root style', () => {
|
|
133
|
+
const custom = {
|
|
134
|
+
marginTop: 16
|
|
135
|
+
};
|
|
136
|
+
renderWithProvider(/*#__PURE__*/_jsx(BaseTag, {
|
|
137
|
+
...baseProps,
|
|
138
|
+
style: custom
|
|
139
|
+
}));
|
|
140
|
+
expect(screen.getByTestId('base-tag').props.style.marginTop).toBe(16);
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
});
|
|
144
|
+
//# sourceMappingURL=BaseTag.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","render","screen","Text","ThemeProvider","BaseTag","jsx","_jsx","colors","dark","renderWithProvider","component","themes","colorScheme","locale","children","baseProps","consumerName","variant","label","testID","getByText","toBeTruthy","getByTestId","queryByTestId","toBeNull","renderIcon","fn","toHaveBeenCalledWith","objectContaining","color","any","String","cases","bg","mutedTransparent","accent","activeSubtle","success","error","warning","white","each","appearance","expected","props","style","backgroundColor","toBe","size","rerender","mdPadding","paddingHorizontal","smPadding","toBeLessThan","toBeDefined","paddingLeft","toBeUndefined","paddingRight","disabled","custom","marginTop"],"sourceRoot":"../../../../../src","sources":["lib/Components/BaseTag/BaseTag.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/BaseTag/index.ts"],"mappings":";;AAAA,cAAc,cAAW;AACzB,cAAc,YAAS","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/BaseTag/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { useEffect, useState } from 'react';
|
|
4
4
|
import { Image, StyleSheet } from 'react-native';
|
|
5
5
|
import { useStyleSheet } from "../../../styles/index.js";
|
|
6
|
+
import { RuntimeConstants } from "../../utils/index.js";
|
|
6
7
|
import { Skeleton } from "../Skeleton/index.js";
|
|
7
8
|
import { Box, Text } from "../Utility/index.js";
|
|
8
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -105,7 +106,10 @@ export const MediaImage = ({
|
|
|
105
106
|
style: StyleSheet.absoluteFillObject
|
|
106
107
|
}), !loading && shouldFallback && fallback && /*#__PURE__*/_jsx(Text, {
|
|
107
108
|
style: {
|
|
108
|
-
fontSize: fontSizeMap[size]
|
|
109
|
+
fontSize: fontSizeMap[size],
|
|
110
|
+
...(RuntimeConstants.isIOS && {
|
|
111
|
+
lineHeight: 0
|
|
112
|
+
})
|
|
109
113
|
},
|
|
110
114
|
lx: {
|
|
111
115
|
color: 'base'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useState","Image","StyleSheet","useStyleSheet","Skeleton","Box","Text","jsx","_jsx","jsxs","_jsxs","borderRadiusMap","fontSizeMap","useStyles","size","shape","t","sizeValue","sizes","radius","borderRadius","full","root","width","height","overflow","alignItems","justifyContent","backgroundColor","colors","bg","muted","outlineColor","border","icon","outlineWidth","outlineOffset","outlineStyle","image","MediaImage","src","alt","fallback","loading","lx","style","ref","props","error","setError","shouldFallback","styles","flatten","accessibilityRole","accessibilityLabel","children","absoluteFillObject","fontSize","color","accessible","toUpperCase","source","uri","onError","testID"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaImage/MediaImage.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,KAAK,EAAEC,UAAU,QAAQ,cAAc;AAChD,SAASC,aAAa,QAAQ,0BAAiB;AAE/C,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,GAAG,EAAEC,IAAI,QAAQ,qBAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKvC,MAAMC,eAAwD,GAAG;EAC/D,EAAE,EAAE,IAAI;EACR,EAAE,EAAE,IAAI;EACR,EAAE,EAAE,IAAI;EACR,EAAE,EAAE,IAAI;EACR,EAAE,EAAE,IAAI;EACR,EAAE,EAAE,IAAI;EACR,EAAE,EAAE,IAAI;EACR,EAAE,EAAE,IAAI;EACR,EAAE,EAAE;AACN,CAAC;AAED,OAAO,MAAMC,WAA2C,GAAG;EACzD,EAAE,EAAE,EAAE;EACN,EAAE,EAAE,EAAE;EACN,EAAE,EAAE,EAAE;EACN,EAAE,EAAE,EAAE;EACN,EAAE,EAAE,EAAE;EACN,EAAE,EAAE,EAAE;EACN,EAAE,EAAE,EAAE;EACN,EAAE,EAAE,EAAE;EACN,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC;AAIF,CAAC,KAAK;EACJ,
|
|
1
|
+
{"version":3,"names":["useEffect","useState","Image","StyleSheet","useStyleSheet","RuntimeConstants","Skeleton","Box","Text","jsx","_jsx","jsxs","_jsxs","borderRadiusMap","fontSizeMap","useStyles","size","shape","t","sizeValue","sizes","radius","borderRadius","full","root","width","height","overflow","alignItems","justifyContent","backgroundColor","colors","bg","muted","outlineColor","border","icon","outlineWidth","outlineOffset","outlineStyle","image","MediaImage","src","alt","fallback","loading","lx","style","ref","props","error","setError","shouldFallback","styles","flatten","accessibilityRole","accessibilityLabel","children","absoluteFillObject","fontSize","isIOS","lineHeight","color","accessible","toUpperCase","source","uri","onError","testID"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaImage/MediaImage.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { BaseTag } from "../BaseTag/index.js";
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
/**
|
|
6
|
+
* A compact label used to categorize, classify, or highlight information with a required media element (image, crypto icon, etc.).
|
|
7
|
+
*
|
|
8
|
+
* The appearance determines the color scheme used.
|
|
9
|
+
*
|
|
10
|
+
* @see {@link https://ldls.vercel.app/?path=/docs/communication-mediatag-overview--docs Storybook}
|
|
11
|
+
* @see {@link https://ldls.vercel.app/?path=/docs/communication-mediatag-implementation--docs#dos-and-donts Guidelines}
|
|
12
|
+
*
|
|
13
|
+
* @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
|
|
14
|
+
* Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* import { MediaTag, MediaImage } from '@ledgerhq/lumen-ui-rnative';
|
|
18
|
+
*
|
|
19
|
+
* // MediaTag with image
|
|
20
|
+
* <MediaTag
|
|
21
|
+
* label='Ethereum'
|
|
22
|
+
* leadingContent={<MediaImage src='https://crypto-icons.ledger.com/ETH.png' alt='Ethereum' size={16} shape='square' />}
|
|
23
|
+
* />
|
|
24
|
+
*
|
|
25
|
+
* // Small MediaTag
|
|
26
|
+
* <MediaTag label='Bitcoin' size='sm' leadingContent={myIcon} />
|
|
27
|
+
*/
|
|
28
|
+
export const MediaTag = ({
|
|
29
|
+
leadingContent,
|
|
30
|
+
...props
|
|
31
|
+
}) => {
|
|
32
|
+
return /*#__PURE__*/_jsx(BaseTag, {
|
|
33
|
+
...props,
|
|
34
|
+
variant: "media",
|
|
35
|
+
consumerName: "MediaTag",
|
|
36
|
+
renderIcon: () => leadingContent
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=MediaTag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["BaseTag","jsx","_jsx","MediaTag","leadingContent","props","variant","consumerName","renderIcon"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaTag/MediaTag.tsx"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,qBAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,cAAc;EAAE,GAAGC;AAAqB,CAAC,KAAK;EACvE,oBACEH,IAAA,CAACF,OAAO;IAAA,GACFK,KAAK;IACTC,OAAO,EAAC,OAAO;IACfC,YAAY,EAAC,UAAU;IACvBC,UAAU,EAAEA,CAAA,KAAMJ;EAAe,CAClC,CAAC;AAEN,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import * as MediaTagStories from './MediaTag.stories';
|
|
3
|
+
import { CustomTabs, Tab } from '../../../../.storybook/components';
|
|
4
|
+
import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
|
|
5
|
+
import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
|
|
6
|
+
import { Box } from '../Utility/Box';
|
|
7
|
+
|
|
8
|
+
<Meta title='Components/MediaTag' of={MediaTagStories} />
|
|
9
|
+
|
|
10
|
+
# MediaTag
|
|
11
|
+
|
|
12
|
+
<CustomTabs>
|
|
13
|
+
<Tab label="Overview">
|
|
14
|
+
|
|
15
|
+
## Introduction
|
|
16
|
+
|
|
17
|
+
MediaTag is a compact label used to categorize, classify, or highlight information alongside a required media element such as an image or crypto icon. Like [Tag](/docs/communication-tag--docs), it supports multiple appearances and sizes, but is designed for cases where the icon is richer than a Symbol.
|
|
18
|
+
|
|
19
|
+
> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=16793-36383&m=dev).
|
|
20
|
+
|
|
21
|
+
## Anatomy
|
|
22
|
+
|
|
23
|
+
<Canvas of={MediaTagStories.Base} />
|
|
24
|
+
|
|
25
|
+
- **Label:** The text content of the tag.
|
|
26
|
+
- **Leading content:** A required media element (image, crypto icon, etc.) displayed before the label. Passed via the `leadingContent` prop.
|
|
27
|
+
|
|
28
|
+
## Properties
|
|
29
|
+
|
|
30
|
+
<Canvas of={MediaTagStories.Base} />
|
|
31
|
+
<Controls of={MediaTagStories.Base} />
|
|
32
|
+
|
|
33
|
+
### Appearance
|
|
34
|
+
|
|
35
|
+
<Canvas of={MediaTagStories.AppearanceShowcase} />
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
### Size
|
|
40
|
+
|
|
41
|
+
MediaTags come in two different sizes:
|
|
42
|
+
|
|
43
|
+
- **md** (default) — the `leadingContent` media should be rendered at **16px**.
|
|
44
|
+
- **sm** — the `leadingContent` media should be rendered at **12px**.
|
|
45
|
+
|
|
46
|
+
The MediaTag does not resize its `leadingContent`; consumers are responsible for passing a media element sized to match the tag's `size`.
|
|
47
|
+
|
|
48
|
+
<Canvas of={MediaTagStories.SizeShowcase} />
|
|
49
|
+
|
|
50
|
+
### Truncation
|
|
51
|
+
|
|
52
|
+
When a MediaTag's label exceeds the available space, the text is automatically truncated with an ellipsis.
|
|
53
|
+
|
|
54
|
+
<Canvas of={MediaTagStories.TruncateShowcase} />
|
|
55
|
+
|
|
56
|
+
### Accessibility
|
|
57
|
+
|
|
58
|
+
To be implemented:
|
|
59
|
+
|
|
60
|
+
- **Color contrast**
|
|
61
|
+
- **Text zoom**
|
|
62
|
+
- **Touch targets**
|
|
63
|
+
- **Screen reader support**
|
|
64
|
+
- **Semantic labeling**
|
|
65
|
+
|
|
66
|
+
</Tab>
|
|
67
|
+
<Tab label="Implementation">
|
|
68
|
+
|
|
69
|
+
## Setup
|
|
70
|
+
|
|
71
|
+
Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
|
|
72
|
+
|
|
73
|
+
### Basic Usage
|
|
74
|
+
|
|
75
|
+
Match the media element size to the MediaTag `size`: **16px** for `md`, **12px** for `sm`.
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import { MediaTag, MediaImage } from '@ledgerhq/lumen-ui-rnative';
|
|
79
|
+
|
|
80
|
+
function MyComponent() {
|
|
81
|
+
return (
|
|
82
|
+
<>
|
|
83
|
+
{/* md → image size 16 */}
|
|
84
|
+
<MediaTag
|
|
85
|
+
size="md"
|
|
86
|
+
appearance="accent"
|
|
87
|
+
label="Ethereum"
|
|
88
|
+
leadingContent={
|
|
89
|
+
<MediaImage
|
|
90
|
+
src="https://crypto-icons.ledger.com/ETH.png"
|
|
91
|
+
alt="Ethereum"
|
|
92
|
+
size={16}
|
|
93
|
+
shape="square"
|
|
94
|
+
/>
|
|
95
|
+
}
|
|
96
|
+
/>
|
|
97
|
+
|
|
98
|
+
{/* sm → image size 12 */}
|
|
99
|
+
<MediaTag
|
|
100
|
+
size="sm"
|
|
101
|
+
appearance="accent"
|
|
102
|
+
label="Ethereum"
|
|
103
|
+
leadingContent={
|
|
104
|
+
<MediaImage
|
|
105
|
+
src="https://crypto-icons.ledger.com/ETH.png"
|
|
106
|
+
alt="Ethereum"
|
|
107
|
+
size={12}
|
|
108
|
+
shape="square"
|
|
109
|
+
/>
|
|
110
|
+
}
|
|
111
|
+
/>
|
|
112
|
+
</>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Custom Styling
|
|
118
|
+
|
|
119
|
+
While the component comes with predefined styles, you can extend them using the `lx` prop for layout adjustments:
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<MediaTag
|
|
123
|
+
size="md"
|
|
124
|
+
appearance="accent"
|
|
125
|
+
label="Custom MediaTag"
|
|
126
|
+
leadingContent={myIcon}
|
|
127
|
+
lx={{ marginTop: 's4' }}
|
|
128
|
+
/>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### With Crypto Icons
|
|
132
|
+
|
|
133
|
+
The MediaTag accepts any `ReactNode` as its `leadingContent`, including crypto icons. Use **16px** for `md` and **12px** for `sm`:
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
import { MediaTag } from '@ledgerhq/lumen-ui-rnative';
|
|
137
|
+
import CryptoIcon from '@ledgerhq/crypto-icons/native';
|
|
138
|
+
|
|
139
|
+
function MyComponent() {
|
|
140
|
+
return (
|
|
141
|
+
<>
|
|
142
|
+
{/* md → leadingContent size 16 */}
|
|
143
|
+
<MediaTag
|
|
144
|
+
size="md"
|
|
145
|
+
label="Bitcoin"
|
|
146
|
+
leadingContent={<CryptoIcon ledgerId="bitcoin" ticker="BTC" size={16} />}
|
|
147
|
+
/>
|
|
148
|
+
|
|
149
|
+
{/* sm → leadingContent size 12 */}
|
|
150
|
+
<MediaTag
|
|
151
|
+
size="sm"
|
|
152
|
+
label="Bitcoin"
|
|
153
|
+
leadingContent={<CryptoIcon ledgerId="bitcoin" ticker="BTC" size={12} />}
|
|
154
|
+
/>
|
|
155
|
+
</>
|
|
156
|
+
);
|
|
157
|
+
}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
</Tab>
|
|
161
|
+
</CustomTabs>
|