@ledgerhq/lumen-ui-rnative 0.1.11 → 0.1.13
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/i18n/locales/de.json +3 -0
- package/dist/module/i18n/locales/en.json +3 -0
- package/dist/module/i18n/locales/es.json +3 -0
- package/dist/module/i18n/locales/fr.json +3 -0
- package/dist/module/i18n/locales/ja.json +3 -0
- package/dist/module/i18n/locales/ko.json +3 -0
- package/dist/module/i18n/locales/pt.json +3 -0
- package/dist/module/i18n/locales/ru.json +3 -0
- package/dist/module/i18n/locales/th.json +3 -0
- package/dist/module/i18n/locales/tr.json +3 -0
- package/dist/module/i18n/locales/zh.json +3 -0
- package/dist/module/lib/Animations/Pulse/Pulse.js +1 -1
- package/dist/module/lib/Animations/Spin/Spin.js +1 -1
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js +21 -21
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js.map +1 -1
- package/dist/module/lib/Components/AmountInput/AmountInput.js +3 -3
- package/dist/module/lib/Components/BaseInput/BaseInput.js +1 -1
- package/dist/module/lib/Components/BottomSheet/BottomSheet.stories.js.map +1 -1
- package/dist/module/lib/Components/Card/Card.js +39 -29
- package/dist/module/lib/Components/Card/Card.js.map +1 -1
- package/dist/module/lib/Components/InteractiveIcon/InteractiveIcon.js +22 -2
- package/dist/module/lib/Components/InteractiveIcon/InteractiveIcon.js.map +1 -1
- package/dist/module/lib/Components/Link/Link.mdx +1 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.js +158 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.js.map +1 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.mdx +150 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.stories.js +135 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.stories.js.map +1 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.test.js +83 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.test.js.map +1 -0
- package/dist/module/lib/Components/MediaBanner/index.js +5 -0
- package/dist/module/lib/Components/MediaBanner/index.js.map +1 -0
- package/dist/module/lib/Components/MediaBanner/types.js +4 -0
- package/dist/module/lib/Components/MediaBanner/types.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.js +183 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.mdx +111 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.stories.js +199 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.stories.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.test.js +140 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.test.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/index.js +5 -0
- package/dist/module/lib/Components/MediaCard/index.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/types.js +4 -0
- package/dist/module/lib/Components/MediaCard/types.js.map +1 -0
- package/dist/module/lib/Components/PageIndicator/PageIndicator.js +2 -2
- package/dist/module/lib/Components/SegmentedControl/usePillLayout.js +1 -1
- package/dist/module/lib/Components/Stepper/Stepper.js +1 -1
- package/dist/module/lib/Components/Switch/BaseSwitch.js +1 -1
- package/dist/module/lib/Components/TabBar/TabBar.js +4 -4
- package/dist/module/lib/Components/ThemeProvider/ThemeProvider.test.js +22 -20
- package/dist/module/lib/Components/ThemeProvider/ThemeProvider.test.js.map +1 -1
- package/dist/module/lib/Components/TriggerButton/TriggerButton.js +197 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.js.map +1 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.mdx +44 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.stories.js +170 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.stories.js.map +1 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.test.js +146 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.test.js.map +1 -0
- package/dist/module/lib/Components/TriggerButton/index.js +5 -0
- package/dist/module/lib/Components/TriggerButton/index.js.map +1 -0
- package/dist/module/lib/Components/TriggerButton/types.js +4 -0
- package/dist/module/lib/Components/TriggerButton/types.js.map +1 -0
- package/dist/module/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.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/module/lib/Symbols/Icons/NanoGen5.js +49 -0
- package/dist/module/lib/Symbols/Icons/NanoGen5.js.map +1 -0
- package/dist/module/lib/Symbols/index.js +1 -0
- package/dist/module/lib/Symbols/index.js.map +1 -1
- package/dist/typescript/src/lib/Components/Card/Card.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/InteractiveIcon/InteractiveIcon.d.ts +1 -1
- package/dist/typescript/src/lib/Components/InteractiveIcon/InteractiveIcon.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/InteractiveIcon/types.d.ts +8 -0
- package/dist/typescript/src/lib/Components/InteractiveIcon/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaBanner/MediaBanner.d.ts +16 -0
- package/dist/typescript/src/lib/Components/MediaBanner/MediaBanner.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaBanner/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/MediaBanner/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaBanner/types.d.ts +42 -0
- package/dist/typescript/src/lib/Components/MediaBanner/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaCard/MediaCard.d.ts +32 -0
- package/dist/typescript/src/lib/Components/MediaCard/MediaCard.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaCard/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/MediaCard/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaCard/types.d.ts +38 -0
- package/dist/typescript/src/lib/Components/MediaCard/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts +26 -0
- package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/TriggerButton/types.d.ts +38 -0
- package/dist/typescript/src/lib/Components/TriggerButton/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
- package/dist/typescript/src/lib/Symbols/Icons/NanoGen5.d.ts +35 -0
- package/dist/typescript/src/lib/Symbols/Icons/NanoGen5.d.ts.map +1 -0
- package/dist/typescript/src/lib/Symbols/index.d.ts +1 -0
- package/dist/typescript/src/lib/Symbols/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/i18n/locales/de.json +3 -0
- package/src/i18n/locales/en.json +3 -0
- package/src/i18n/locales/es.json +3 -0
- package/src/i18n/locales/fr.json +3 -0
- package/src/i18n/locales/ja.json +3 -0
- package/src/i18n/locales/ko.json +3 -0
- package/src/i18n/locales/pt.json +3 -0
- package/src/i18n/locales/ru.json +3 -0
- package/src/i18n/locales/th.json +3 -0
- package/src/i18n/locales/tr.json +3 -0
- package/src/i18n/locales/zh.json +3 -0
- package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +20 -20
- package/src/lib/Components/BottomSheet/BottomSheet.stories.tsx +9 -9
- package/src/lib/Components/Card/Card.tsx +38 -33
- package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx +26 -4
- package/src/lib/Components/InteractiveIcon/types.ts +8 -0
- package/src/lib/Components/Link/Link.mdx +1 -0
- package/src/lib/Components/MediaBanner/MediaBanner.mdx +150 -0
- package/src/lib/Components/MediaBanner/MediaBanner.stories.tsx +143 -0
- package/src/lib/Components/MediaBanner/MediaBanner.test.tsx +77 -0
- package/src/lib/Components/MediaBanner/MediaBanner.tsx +172 -0
- package/src/lib/Components/MediaBanner/index.ts +2 -0
- package/src/lib/Components/MediaBanner/types.ts +44 -0
- package/src/lib/Components/MediaCard/MediaCard.mdx +111 -0
- package/src/lib/Components/MediaCard/MediaCard.stories.tsx +190 -0
- package/src/lib/Components/MediaCard/MediaCard.test.tsx +125 -0
- package/src/lib/Components/MediaCard/MediaCard.tsx +203 -0
- package/src/lib/Components/MediaCard/index.ts +2 -0
- package/src/lib/Components/MediaCard/types.ts +39 -0
- package/src/lib/Components/ThemeProvider/ThemeProvider.test.tsx +16 -18
- package/src/lib/Components/TriggerButton/TriggerButton.mdx +44 -0
- package/src/lib/Components/TriggerButton/TriggerButton.stories.tsx +132 -0
- package/src/lib/Components/TriggerButton/TriggerButton.test.tsx +157 -0
- package/src/lib/Components/TriggerButton/TriggerButton.tsx +228 -0
- package/src/lib/Components/TriggerButton/index.ts +2 -0
- package/src/lib/Components/TriggerButton/types.ts +38 -0
- package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.tsx +1 -1
- package/src/lib/Components/index.ts +3 -0
- package/src/lib/Symbols/Icons/NanoGen5.tsx +44 -0
- package/src/lib/Symbols/index.ts +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaCard/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -60,7 +60,7 @@ const useDotAnimation = ({
|
|
|
60
60
|
shrinkProgress
|
|
61
61
|
};
|
|
62
62
|
PageIndicatorTsx1.__workletHash = 15850135437702;
|
|
63
|
-
PageIndicatorTsx1.__pluginVersion = "0.
|
|
63
|
+
PageIndicatorTsx1.__pluginVersion = "0.5.2";
|
|
64
64
|
PageIndicatorTsx1.__initData = _worklet_15850135437702_init_data;
|
|
65
65
|
PageIndicatorTsx1.__stackDetails = _e;
|
|
66
66
|
return PageIndicatorTsx1;
|
|
@@ -122,7 +122,7 @@ const useStripAnimation = ({
|
|
|
122
122
|
translateX
|
|
123
123
|
};
|
|
124
124
|
PageIndicatorTsx2.__workletHash = 16248974217569;
|
|
125
|
-
PageIndicatorTsx2.__pluginVersion = "0.
|
|
125
|
+
PageIndicatorTsx2.__pluginVersion = "0.5.2";
|
|
126
126
|
PageIndicatorTsx2.__initData = _worklet_16248974217569_init_data;
|
|
127
127
|
PageIndicatorTsx2.__stackDetails = _e;
|
|
128
128
|
return PageIndicatorTsx2;
|
|
@@ -70,7 +70,7 @@ export function usePillLayout({
|
|
|
70
70
|
pillHeight
|
|
71
71
|
};
|
|
72
72
|
usePillLayoutTs1.__workletHash = 6098626077169;
|
|
73
|
-
usePillLayoutTs1.__pluginVersion = "0.
|
|
73
|
+
usePillLayoutTs1.__pluginVersion = "0.5.2";
|
|
74
74
|
usePillLayoutTs1.__initData = _worklet_6098626077169_init_data;
|
|
75
75
|
usePillLayoutTs1.__stackDetails = _e;
|
|
76
76
|
return usePillLayoutTs1;
|
|
@@ -42,7 +42,7 @@ const useAnimatedProgress = ({
|
|
|
42
42
|
animatedOffset
|
|
43
43
|
};
|
|
44
44
|
StepperTsx1.__workletHash = 3381650496170;
|
|
45
|
-
StepperTsx1.__pluginVersion = "0.
|
|
45
|
+
StepperTsx1.__pluginVersion = "0.5.2";
|
|
46
46
|
StepperTsx1.__initData = _worklet_3381650496170_init_data;
|
|
47
47
|
StepperTsx1.__stackDetails = _e;
|
|
48
48
|
return StepperTsx1;
|
|
@@ -96,7 +96,7 @@ const useAnimatedThumb = ({
|
|
|
96
96
|
translateX
|
|
97
97
|
};
|
|
98
98
|
BaseSwitchTsx1.__workletHash = 1149937565143;
|
|
99
|
-
BaseSwitchTsx1.__pluginVersion = "0.
|
|
99
|
+
BaseSwitchTsx1.__pluginVersion = "0.5.2";
|
|
100
100
|
BaseSwitchTsx1.__initData = _worklet_1149937565143_init_data;
|
|
101
101
|
BaseSwitchTsx1.__stackDetails = _e;
|
|
102
102
|
return BaseSwitchTsx1;
|
|
@@ -70,7 +70,7 @@ const useTabBarItemAnimations = ({
|
|
|
70
70
|
pressProgress
|
|
71
71
|
};
|
|
72
72
|
TabBarTsx1.__workletHash = 12151274743312;
|
|
73
|
-
TabBarTsx1.__pluginVersion = "0.
|
|
73
|
+
TabBarTsx1.__pluginVersion = "0.5.2";
|
|
74
74
|
TabBarTsx1.__initData = _worklet_12151274743312_init_data;
|
|
75
75
|
TabBarTsx1.__stackDetails = _e;
|
|
76
76
|
return TabBarTsx1;
|
|
@@ -90,7 +90,7 @@ const useTabBarItemAnimations = ({
|
|
|
90
90
|
activeProgress
|
|
91
91
|
};
|
|
92
92
|
TabBarTsx2.__workletHash = 7396791557540;
|
|
93
|
-
TabBarTsx2.__pluginVersion = "0.
|
|
93
|
+
TabBarTsx2.__pluginVersion = "0.5.2";
|
|
94
94
|
TabBarTsx2.__initData = _worklet_7396791557540_init_data;
|
|
95
95
|
TabBarTsx2.__stackDetails = _e;
|
|
96
96
|
return TabBarTsx2;
|
|
@@ -110,7 +110,7 @@ const useTabBarItemAnimations = ({
|
|
|
110
110
|
activeProgress
|
|
111
111
|
};
|
|
112
112
|
TabBarTsx3.__workletHash = 11977595001241;
|
|
113
|
-
TabBarTsx3.__pluginVersion = "0.
|
|
113
|
+
TabBarTsx3.__pluginVersion = "0.5.2";
|
|
114
114
|
TabBarTsx3.__initData = _worklet_11977595001241_init_data;
|
|
115
115
|
TabBarTsx3.__stackDetails = _e;
|
|
116
116
|
return TabBarTsx3;
|
|
@@ -198,7 +198,7 @@ const useTabBarPillLayout = ({
|
|
|
198
198
|
PILL_INSET
|
|
199
199
|
};
|
|
200
200
|
TabBarTsx4.__workletHash = 12147453282099;
|
|
201
|
-
TabBarTsx4.__pluginVersion = "0.
|
|
201
|
+
TabBarTsx4.__pluginVersion = "0.5.2";
|
|
202
202
|
TabBarTsx4.__initData = _worklet_12147453282099_init_data;
|
|
203
203
|
TabBarTsx4.__stackDetails = _e;
|
|
204
204
|
return TabBarTsx4;
|
|
@@ -1,33 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { describe, expect, it } from '@jest/globals';
|
|
4
|
+
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
4
5
|
import { render, screen } from '@testing-library/react-native';
|
|
5
|
-
import {
|
|
6
|
+
import { ChevronBigLeft, Wallet } from "../../Symbols/index.js";
|
|
7
|
+
import { Button } from "../Button/index.js";
|
|
8
|
+
import { Spot } from "../Spot/index.js";
|
|
9
|
+
import { Tile } from "../Tile/Tile.js";
|
|
10
|
+
import { Box, Text } from "../Utility/index.js";
|
|
6
11
|
import { ThemeProvider } from "./ThemeProvider.js";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
const themes = {
|
|
9
|
-
light: {
|
|
10
|
-
typographies: {
|
|
11
|
-
xs: {}
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
dark: {
|
|
15
|
-
typographies: {
|
|
16
|
-
xs: {}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
13
|
describe('ThemeProvider', () => {
|
|
21
14
|
it('renders children correctly', () => {
|
|
22
|
-
render(/*#__PURE__*/
|
|
23
|
-
themes:
|
|
24
|
-
children: /*#__PURE__*/_jsx(
|
|
15
|
+
render(/*#__PURE__*/_jsxs(ThemeProvider, {
|
|
16
|
+
themes: ledgerLiveThemes,
|
|
17
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
|
25
18
|
testID: "child",
|
|
26
19
|
children: "Hello World"
|
|
27
|
-
})
|
|
20
|
+
}), /*#__PURE__*/_jsx(Tile, {
|
|
21
|
+
children: "Tile"
|
|
22
|
+
}), /*#__PURE__*/_jsx(Spot, {
|
|
23
|
+
appearance: "icon",
|
|
24
|
+
icon: Wallet
|
|
25
|
+
}), /*#__PURE__*/_jsx(Box, {
|
|
26
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
27
|
+
children: "Text"
|
|
28
|
+
})
|
|
29
|
+
}), /*#__PURE__*/_jsx(ChevronBigLeft, {})]
|
|
28
30
|
}));
|
|
29
|
-
expect(screen.getByTestId('child'));
|
|
30
|
-
expect(screen.getByText('Hello World'));
|
|
31
|
+
expect(screen.getByTestId('child')).toBeTruthy();
|
|
32
|
+
expect(screen.getByText('Hello World')).toBeTruthy();
|
|
31
33
|
});
|
|
32
34
|
});
|
|
33
35
|
//# sourceMappingURL=ThemeProvider.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["describe","expect","it","render","screen","Text","ThemeProvider","jsx","_jsx","
|
|
1
|
+
{"version":3,"names":["describe","expect","it","ledgerLiveThemes","render","screen","ChevronBigLeft","Wallet","Button","Spot","Tile","Box","Text","ThemeProvider","jsx","_jsx","jsxs","_jsxs","themes","children","testID","appearance","icon","getByTestId","toBeTruthy","getByText"],"sourceRoot":"../../../../../src","sources":["lib/Components/ThemeProvider/ThemeProvider.test.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ,eAAe;AACpD,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,MAAM,EAAEC,MAAM,QAAQ,+BAA+B;AAC9D,SAASC,cAAc,EAAEC,MAAM,QAAQ,wBAAe;AACtD,SAASC,MAAM,QAAQ,oBAAW;AAClC,SAASC,IAAI,QAAQ,kBAAS;AAC9B,SAASC,IAAI,QAAQ,iBAAc;AACnC,SAASC,GAAG,EAAEC,IAAI,QAAQ,qBAAY;AACtC,SAASC,aAAa,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhDjB,QAAQ,CAAC,eAAe,EAAE,MAAM;EAC9BE,EAAE,CAAC,4BAA4B,EAAE,MAAM;IACrCE,MAAM,cACJa,KAAA,CAACJ,aAAa;MAACK,MAAM,EAAEf,gBAAiB;MAAAgB,QAAA,gBACtCJ,IAAA,CAACP,MAAM;QAACY,MAAM,EAAC,OAAO;QAAAD,QAAA,EAAC;MAAW,CAAQ,CAAC,eAC3CJ,IAAA,CAACL,IAAI;QAAAS,QAAA,EAAC;MAAI,CAAM,CAAC,eACjBJ,IAAA,CAACN,IAAI;QAACY,UAAU,EAAC,MAAM;QAACC,IAAI,EAAEf;MAAO,CAAE,CAAC,eACxCQ,IAAA,CAACJ,GAAG;QAAAQ,QAAA,eACFJ,IAAA,CAACH,IAAI;UAAAO,QAAA,EAAC;QAAI,CAAM;MAAC,CACd,CAAC,eACNJ,IAAA,CAACT,cAAc,IAAE,CAAC;IAAA,CACL,CACjB,CAAC;IAEDL,MAAM,CAACI,MAAM,CAACkB,WAAW,CAAC,OAAO,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;IAChDvB,MAAM,CAACI,MAAM,CAACoB,SAAS,CAAC,aAAa,CAAC,CAAC,CAACD,UAAU,CAAC,CAAC;EACtD,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { StyleSheet, Text, View } from 'react-native';
|
|
4
|
+
import { useStyleSheet } from "../../../styles/index.js";
|
|
5
|
+
import { ChevronDown } from "../../Symbols/index.js";
|
|
6
|
+
import { Pressable } from "../Utility/index.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const useStyles = ({
|
|
9
|
+
appearance,
|
|
10
|
+
size,
|
|
11
|
+
disabled,
|
|
12
|
+
pressed,
|
|
13
|
+
iconType
|
|
14
|
+
}) => {
|
|
15
|
+
return useStyleSheet(t => {
|
|
16
|
+
const bgColors = {
|
|
17
|
+
gray: t.colors.bg.muted,
|
|
18
|
+
transparent: t.colors.bg.mutedTransparent,
|
|
19
|
+
'no-background': 'transparent'
|
|
20
|
+
};
|
|
21
|
+
const pressedBgColors = {
|
|
22
|
+
gray: t.colors.bg.mutedPressed,
|
|
23
|
+
transparent: t.colors.bg.mutedTransparentPressed,
|
|
24
|
+
'no-background': t.colors.bg.baseTransparentPressed
|
|
25
|
+
};
|
|
26
|
+
const textColor = disabled ? t.colors.text.disabled : t.colors.text.base;
|
|
27
|
+
const paddingMap = {
|
|
28
|
+
md: {
|
|
29
|
+
flat: {
|
|
30
|
+
paddingTop: t.spacings.s12,
|
|
31
|
+
paddingBottom: t.spacings.s12,
|
|
32
|
+
paddingLeft: t.spacings.s16,
|
|
33
|
+
paddingRight: t.spacings.s16
|
|
34
|
+
},
|
|
35
|
+
rounded: {
|
|
36
|
+
paddingTop: t.spacings.s8,
|
|
37
|
+
paddingBottom: t.spacings.s8,
|
|
38
|
+
paddingLeft: t.spacings.s8,
|
|
39
|
+
paddingRight: t.spacings.s16
|
|
40
|
+
},
|
|
41
|
+
none: {
|
|
42
|
+
paddingTop: t.spacings.s14,
|
|
43
|
+
paddingBottom: t.spacings.s14,
|
|
44
|
+
paddingLeft: t.spacings.s16,
|
|
45
|
+
paddingRight: t.spacings.s16
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
sm: {
|
|
49
|
+
flat: {
|
|
50
|
+
paddingTop: t.spacings.s10,
|
|
51
|
+
paddingBottom: t.spacings.s10,
|
|
52
|
+
paddingLeft: t.spacings.s12,
|
|
53
|
+
paddingRight: t.spacings.s12
|
|
54
|
+
},
|
|
55
|
+
rounded: {
|
|
56
|
+
paddingTop: t.spacings.s8,
|
|
57
|
+
paddingBottom: t.spacings.s8,
|
|
58
|
+
paddingLeft: t.spacings.s8,
|
|
59
|
+
paddingRight: t.spacings.s10
|
|
60
|
+
},
|
|
61
|
+
none: {
|
|
62
|
+
paddingTop: t.spacings.s10,
|
|
63
|
+
paddingBottom: t.spacings.s10,
|
|
64
|
+
paddingLeft: t.spacings.s12,
|
|
65
|
+
paddingRight: t.spacings.s12
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
return {
|
|
70
|
+
container: StyleSheet.flatten([{
|
|
71
|
+
flexDirection: 'row',
|
|
72
|
+
alignItems: 'center',
|
|
73
|
+
borderRadius: t.borderRadius.full,
|
|
74
|
+
backgroundColor: bgColors[appearance],
|
|
75
|
+
gap: t.spacings.s8
|
|
76
|
+
}, paddingMap[size][iconType], pressed && {
|
|
77
|
+
backgroundColor: pressedBgColors[appearance]
|
|
78
|
+
}, disabled && {
|
|
79
|
+
backgroundColor: t.colors.bg.disabled
|
|
80
|
+
}, appearance === 'no-background' && disabled && {
|
|
81
|
+
backgroundColor: 'transparent'
|
|
82
|
+
}]),
|
|
83
|
+
label: StyleSheet.flatten([t.typographies.body2SemiBold, {
|
|
84
|
+
color: textColor,
|
|
85
|
+
textAlign: 'left'
|
|
86
|
+
}]),
|
|
87
|
+
labelWrapper: {
|
|
88
|
+
flexDirection: 'row',
|
|
89
|
+
alignItems: 'center',
|
|
90
|
+
gap: t.spacings.s2
|
|
91
|
+
},
|
|
92
|
+
icon: {
|
|
93
|
+
flexShrink: 0
|
|
94
|
+
},
|
|
95
|
+
chevron: {
|
|
96
|
+
flexShrink: 0,
|
|
97
|
+
color: textColor
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
}, [appearance, size, disabled, pressed, iconType]);
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Trigger button for select/dropdown components. Displays a label with an optional
|
|
105
|
+
* leading icon and a trailing chevron indicator.
|
|
106
|
+
*
|
|
107
|
+
* This component is intended to be used exclusively as the trigger inside a Select or
|
|
108
|
+
* dropdown pattern. It should not be used as a standalone action button — use `Button`
|
|
109
|
+
* or `IconButton` instead.
|
|
110
|
+
*
|
|
111
|
+
* @see {@link https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680 Figma}
|
|
112
|
+
*
|
|
113
|
+
* @example
|
|
114
|
+
* import { TriggerButton } from '@ledgerhq/lumen-ui-rnative';
|
|
115
|
+
* import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
|
|
116
|
+
*
|
|
117
|
+
* <TriggerButton icon={<Settings size={20} />} iconType="flat">
|
|
118
|
+
* Network
|
|
119
|
+
* </TriggerButton>
|
|
120
|
+
*
|
|
121
|
+
* <TriggerButton>All accounts</TriggerButton>
|
|
122
|
+
*/
|
|
123
|
+
export const TriggerButton = ({
|
|
124
|
+
lx,
|
|
125
|
+
style,
|
|
126
|
+
appearance = 'gray',
|
|
127
|
+
size = 'md',
|
|
128
|
+
disabled = false,
|
|
129
|
+
icon,
|
|
130
|
+
iconType = 'flat',
|
|
131
|
+
children: label,
|
|
132
|
+
ref,
|
|
133
|
+
...props
|
|
134
|
+
}) => {
|
|
135
|
+
const effectiveIconType = icon ? iconType : 'none';
|
|
136
|
+
return /*#__PURE__*/_jsx(Pressable, {
|
|
137
|
+
ref: ref,
|
|
138
|
+
lx: lx,
|
|
139
|
+
style: style,
|
|
140
|
+
disabled: disabled,
|
|
141
|
+
accessibilityRole: "button",
|
|
142
|
+
accessibilityState: {
|
|
143
|
+
disabled
|
|
144
|
+
},
|
|
145
|
+
...props,
|
|
146
|
+
children: ({
|
|
147
|
+
pressed
|
|
148
|
+
}) => /*#__PURE__*/_jsx(TriggerButtonContent, {
|
|
149
|
+
appearance: appearance,
|
|
150
|
+
size: size,
|
|
151
|
+
disabled: disabled,
|
|
152
|
+
pressed: pressed,
|
|
153
|
+
iconType: effectiveIconType,
|
|
154
|
+
icon: icon,
|
|
155
|
+
children: label
|
|
156
|
+
})
|
|
157
|
+
});
|
|
158
|
+
};
|
|
159
|
+
const TriggerButtonContent = ({
|
|
160
|
+
appearance,
|
|
161
|
+
size,
|
|
162
|
+
disabled,
|
|
163
|
+
pressed,
|
|
164
|
+
iconType,
|
|
165
|
+
icon,
|
|
166
|
+
children
|
|
167
|
+
}) => {
|
|
168
|
+
const styles = useStyles({
|
|
169
|
+
appearance,
|
|
170
|
+
size,
|
|
171
|
+
disabled,
|
|
172
|
+
pressed,
|
|
173
|
+
iconType
|
|
174
|
+
});
|
|
175
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
176
|
+
style: styles.container,
|
|
177
|
+
testID: "button-trigger-content",
|
|
178
|
+
children: [icon && /*#__PURE__*/_jsx(View, {
|
|
179
|
+
style: styles.icon,
|
|
180
|
+
children: icon
|
|
181
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
182
|
+
style: styles.labelWrapper,
|
|
183
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
184
|
+
style: styles.label,
|
|
185
|
+
numberOfLines: 1,
|
|
186
|
+
ellipsizeMode: "tail",
|
|
187
|
+
children: children
|
|
188
|
+
}), /*#__PURE__*/_jsx(ChevronDown, {
|
|
189
|
+
size: 20,
|
|
190
|
+
style: styles.chevron,
|
|
191
|
+
testID: "button-trigger-chevron"
|
|
192
|
+
})]
|
|
193
|
+
})]
|
|
194
|
+
});
|
|
195
|
+
};
|
|
196
|
+
TriggerButton.displayName = 'TriggerButton';
|
|
197
|
+
//# sourceMappingURL=TriggerButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["StyleSheet","Text","View","useStyleSheet","ChevronDown","Pressable","jsx","_jsx","jsxs","_jsxs","useStyles","appearance","size","disabled","pressed","iconType","t","bgColors","gray","colors","bg","muted","transparent","mutedTransparent","pressedBgColors","mutedPressed","mutedTransparentPressed","baseTransparentPressed","textColor","text","base","paddingMap","md","flat","paddingTop","spacings","s12","paddingBottom","paddingLeft","s16","paddingRight","rounded","s8","none","s14","sm","s10","container","flatten","flexDirection","alignItems","borderRadius","full","backgroundColor","gap","label","typographies","body2SemiBold","color","textAlign","labelWrapper","s2","icon","flexShrink","chevron","TriggerButton","lx","style","children","ref","props","effectiveIconType","accessibilityRole","accessibilityState","TriggerButtonContent","styles","testID","numberOfLines","ellipsizeMode","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/TriggerButton/TriggerButton.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { CustomTabs, Tab } from '../../../../.storybook/components';
|
|
2
|
+
import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
|
|
3
|
+
import * as TriggerButtonStories from './TriggerButton.stories';
|
|
4
|
+
|
|
5
|
+
<Meta title='Action/TriggerButton' of={TriggerButtonStories} />
|
|
6
|
+
|
|
7
|
+
<CustomTabs>
|
|
8
|
+
<Tab label="Overview ">
|
|
9
|
+
|
|
10
|
+
# TriggerButton
|
|
11
|
+
|
|
12
|
+
## Introduction
|
|
13
|
+
|
|
14
|
+
A specialized trigger button designed exclusively for select and dropdown patterns. It displays a label with an optional leading icon and a permanent trailing chevron indicator.
|
|
15
|
+
|
|
16
|
+
> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680&m=dev).
|
|
17
|
+
|
|
18
|
+
> **Important**: This component should only be used as a trigger inside a Select or dropdown. For standalone actions, use [Button](/docs/action-button--docs) or [IconButton](/docs/action-iconbutton--docs) instead.
|
|
19
|
+
|
|
20
|
+
## Properties
|
|
21
|
+
|
|
22
|
+
<Canvas of={TriggerButtonStories.Base} />
|
|
23
|
+
<Controls of={TriggerButtonStories.Base} />
|
|
24
|
+
|
|
25
|
+
## Appearance
|
|
26
|
+
|
|
27
|
+
Three appearances are available: `gray` (default), `transparent`, and `no-background`.
|
|
28
|
+
|
|
29
|
+
<Canvas of={TriggerButtonStories.AppearanceShowcase} />
|
|
30
|
+
|
|
31
|
+
## Sizes
|
|
32
|
+
|
|
33
|
+
<Canvas of={TriggerButtonStories.SizeShowcase} />
|
|
34
|
+
|
|
35
|
+
## Icon Types
|
|
36
|
+
|
|
37
|
+
The `iconType` prop controls the padding scheme based on the leading icon's shape:
|
|
38
|
+
|
|
39
|
+
- **`flat`**: Standard padding for interface icons (line icons without background).
|
|
40
|
+
- **`rounded`**: Tighter left padding for circular icons with their own background (e.g., crypto icons).
|
|
41
|
+
|
|
42
|
+
<Canvas of={TriggerButtonStories.IconTypeShowcase} />
|
|
43
|
+
</Tab>
|
|
44
|
+
</CustomTabs>
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { CryptoIcon } from '@ledgerhq/crypto-icons';
|
|
4
|
+
import { Settings, Star } from "../../Symbols/index.js";
|
|
5
|
+
import { Box } from "../Utility/index.js";
|
|
6
|
+
import { TriggerButton } from "./TriggerButton.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const meta = {
|
|
9
|
+
component: TriggerButton,
|
|
10
|
+
title: 'Action/TriggerButton',
|
|
11
|
+
parameters: {
|
|
12
|
+
layout: 'centered',
|
|
13
|
+
docs: {
|
|
14
|
+
source: {
|
|
15
|
+
language: 'tsx',
|
|
16
|
+
format: true,
|
|
17
|
+
type: 'code'
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
export default meta;
|
|
23
|
+
export const Base = {
|
|
24
|
+
args: {
|
|
25
|
+
children: 'All accounts',
|
|
26
|
+
appearance: 'gray'
|
|
27
|
+
},
|
|
28
|
+
render: args => /*#__PURE__*/_jsx(TriggerButton, {
|
|
29
|
+
...args
|
|
30
|
+
}),
|
|
31
|
+
parameters: {
|
|
32
|
+
docs: {
|
|
33
|
+
source: {
|
|
34
|
+
code: `
|
|
35
|
+
<TriggerButton appearance="gray">
|
|
36
|
+
All accounts
|
|
37
|
+
</TriggerButton>
|
|
38
|
+
`
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
export const SizeShowcase = {
|
|
44
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
45
|
+
lx: {
|
|
46
|
+
flexDirection: 'row',
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
gap: 's16'
|
|
49
|
+
},
|
|
50
|
+
children: [/*#__PURE__*/_jsx(TriggerButton, {
|
|
51
|
+
size: "sm",
|
|
52
|
+
icon: /*#__PURE__*/_jsx(Star, {
|
|
53
|
+
size: 20
|
|
54
|
+
}),
|
|
55
|
+
iconType: "flat",
|
|
56
|
+
children: "Small"
|
|
57
|
+
}), /*#__PURE__*/_jsx(TriggerButton, {
|
|
58
|
+
size: "md",
|
|
59
|
+
icon: /*#__PURE__*/_jsx(Star, {
|
|
60
|
+
size: 20
|
|
61
|
+
}),
|
|
62
|
+
iconType: "flat",
|
|
63
|
+
children: "Medium"
|
|
64
|
+
})]
|
|
65
|
+
})
|
|
66
|
+
};
|
|
67
|
+
export const IconTypeShowcase = {
|
|
68
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
69
|
+
lx: {
|
|
70
|
+
flexDirection: 'column',
|
|
71
|
+
gap: 's16'
|
|
72
|
+
},
|
|
73
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
|
74
|
+
lx: {
|
|
75
|
+
flexDirection: 'row',
|
|
76
|
+
alignItems: 'center',
|
|
77
|
+
gap: 's16'
|
|
78
|
+
},
|
|
79
|
+
children: [/*#__PURE__*/_jsx(TriggerButton, {
|
|
80
|
+
icon: /*#__PURE__*/_jsx(Settings, {
|
|
81
|
+
size: 20
|
|
82
|
+
}),
|
|
83
|
+
iconType: "flat",
|
|
84
|
+
appearance: "gray",
|
|
85
|
+
children: "Flat icon (md)"
|
|
86
|
+
}), /*#__PURE__*/_jsx(TriggerButton, {
|
|
87
|
+
icon: /*#__PURE__*/_jsx(CryptoIcon, {
|
|
88
|
+
ledgerId: "bitcoin",
|
|
89
|
+
ticker: "BTC",
|
|
90
|
+
size: "32px"
|
|
91
|
+
}),
|
|
92
|
+
iconType: "rounded",
|
|
93
|
+
appearance: "gray",
|
|
94
|
+
children: "Rounded icon (md)"
|
|
95
|
+
}), /*#__PURE__*/_jsx(TriggerButton, {
|
|
96
|
+
appearance: "gray",
|
|
97
|
+
children: "No icon (md)"
|
|
98
|
+
})]
|
|
99
|
+
}), /*#__PURE__*/_jsxs(Box, {
|
|
100
|
+
lx: {
|
|
101
|
+
flexDirection: 'row',
|
|
102
|
+
alignItems: 'center',
|
|
103
|
+
gap: 's16'
|
|
104
|
+
},
|
|
105
|
+
children: [/*#__PURE__*/_jsx(TriggerButton, {
|
|
106
|
+
icon: /*#__PURE__*/_jsx(Settings, {
|
|
107
|
+
size: 20
|
|
108
|
+
}),
|
|
109
|
+
iconType: "flat",
|
|
110
|
+
appearance: "gray",
|
|
111
|
+
size: "sm",
|
|
112
|
+
children: "Flat icon (sm)"
|
|
113
|
+
}), /*#__PURE__*/_jsx(TriggerButton, {
|
|
114
|
+
icon: /*#__PURE__*/_jsx(CryptoIcon, {
|
|
115
|
+
ledgerId: "bitcoin",
|
|
116
|
+
ticker: "BTC",
|
|
117
|
+
size: "24px"
|
|
118
|
+
}),
|
|
119
|
+
iconType: "rounded",
|
|
120
|
+
appearance: "gray",
|
|
121
|
+
size: "sm",
|
|
122
|
+
children: "Rounded icon (sm)"
|
|
123
|
+
}), /*#__PURE__*/_jsx(TriggerButton, {
|
|
124
|
+
appearance: "gray",
|
|
125
|
+
size: "sm",
|
|
126
|
+
children: "No icon (sm)"
|
|
127
|
+
})]
|
|
128
|
+
})]
|
|
129
|
+
})
|
|
130
|
+
};
|
|
131
|
+
export const AppearanceShowcase = {
|
|
132
|
+
render: () => {
|
|
133
|
+
const appearances = ['gray', 'transparent', 'no-background'];
|
|
134
|
+
return /*#__PURE__*/_jsx(Box, {
|
|
135
|
+
lx: {
|
|
136
|
+
flexDirection: 'column',
|
|
137
|
+
gap: 's16',
|
|
138
|
+
padding: 's16'
|
|
139
|
+
},
|
|
140
|
+
children: appearances.map(appearance => /*#__PURE__*/_jsxs(Box, {
|
|
141
|
+
lx: {
|
|
142
|
+
flexDirection: 'row',
|
|
143
|
+
alignItems: 'center',
|
|
144
|
+
gap: 's16'
|
|
145
|
+
},
|
|
146
|
+
children: [/*#__PURE__*/_jsx(TriggerButton, {
|
|
147
|
+
appearance: appearance,
|
|
148
|
+
children: appearance
|
|
149
|
+
}), /*#__PURE__*/_jsx(TriggerButton, {
|
|
150
|
+
appearance: appearance,
|
|
151
|
+
icon: /*#__PURE__*/_jsx(Settings, {
|
|
152
|
+
size: 20
|
|
153
|
+
}),
|
|
154
|
+
iconType: "flat",
|
|
155
|
+
children: appearance
|
|
156
|
+
}), /*#__PURE__*/_jsx(TriggerButton, {
|
|
157
|
+
appearance: appearance,
|
|
158
|
+
icon: /*#__PURE__*/_jsx(CryptoIcon, {
|
|
159
|
+
ledgerId: "bitcoin",
|
|
160
|
+
ticker: "BTC",
|
|
161
|
+
size: "32px"
|
|
162
|
+
}),
|
|
163
|
+
iconType: "rounded",
|
|
164
|
+
children: appearance
|
|
165
|
+
})]
|
|
166
|
+
}, appearance))
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
//# sourceMappingURL=TriggerButton.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["CryptoIcon","Settings","Star","Box","TriggerButton","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","layout","docs","source","language","format","type","Base","args","children","appearance","render","code","SizeShowcase","lx","flexDirection","alignItems","gap","size","icon","iconType","IconTypeShowcase","ledgerId","ticker","AppearanceShowcase","appearances","padding","map"],"sourceRoot":"../../../../../src","sources":["lib/Components/TriggerButton/TriggerButton.stories.tsx"],"mappings":"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","ignoreList":[]}
|