@ledgerhq/lumen-ui-rnative 0.1.35 → 0.1.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module/lib/Animations/Pulse/Pulse.js +2 -2
- package/dist/module/lib/Animations/Pulse/Pulse.js.map +1 -1
- package/dist/module/lib/Animations/Pulse/Pulse.mdx +1 -1
- package/dist/module/lib/Animations/Spin/Spin.mdx +1 -1
- package/dist/module/lib/Components/AddressInput/AddressInput.mdx +1 -1
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js +68 -39
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js.map +1 -1
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.mdx +7 -1
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.stories.js +24 -0
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.stories.js.map +1 -1
- package/dist/module/lib/Components/AmountDisplay/types.js.map +1 -1
- package/dist/module/lib/Components/AmountInput/AmountInput.mdx +1 -1
- package/dist/module/lib/Components/Avatar/Avatar.mdx +1 -1
- package/dist/module/lib/Components/Banner/Banner.mdx +1 -1
- package/dist/module/lib/Components/BottomSheet/BottomSheet.mdx +1 -1
- package/dist/module/lib/Components/Button/Button.mdx +1 -1
- package/dist/module/lib/Components/Card/Card.stories.js +4 -9
- package/dist/module/lib/Components/Card/Card.stories.js.map +1 -1
- package/dist/module/lib/Components/CardButton/CardButton.mdx +1 -1
- package/dist/module/lib/Components/Checkbox/Checkbox.mdx +1 -1
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.js +184 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.js.map +1 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.mdx +139 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.stories.js +258 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.stories.js.map +1 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.test.js +94 -0
- package/dist/module/lib/Components/DescriptionItem/DescriptionItem.test.js.map +1 -0
- package/dist/module/lib/Components/DescriptionItem/index.js +5 -0
- package/dist/module/lib/Components/DescriptionItem/index.js.map +1 -0
- package/dist/module/lib/Components/DescriptionItem/types.js +4 -0
- package/dist/module/lib/Components/DescriptionItem/types.js.map +1 -0
- package/dist/module/lib/Components/Divider/Divider.mdx +1 -1
- package/dist/module/lib/Components/DotIcon/DotIcon.js +44 -23
- package/dist/module/lib/Components/DotIcon/DotIcon.js.map +1 -1
- package/dist/module/lib/Components/DotIcon/DotIcon.mdx +92 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.stories.js +47 -0
- package/dist/module/lib/Components/DotIcon/DotIcon.stories.js.map +1 -1
- package/dist/module/lib/Components/DotSymbol/DotSymbol.js +52 -30
- package/dist/module/lib/Components/DotSymbol/DotSymbol.js.map +1 -1
- package/dist/module/lib/Components/DotSymbol/DotSymbol.mdx +79 -2
- package/dist/module/lib/Components/DotSymbol/DotSymbol.stories.js +41 -0
- package/dist/module/lib/Components/DotSymbol/DotSymbol.stories.js.map +1 -1
- package/dist/module/lib/Components/IconButton/IconButton.mdx +1 -1
- package/dist/module/lib/Components/InteractiveIcon/InteractiveIcon.mdx +1 -1
- package/dist/module/lib/Components/Link/Link.mdx +1 -1
- package/dist/module/lib/Components/MediaBanner/MediaBanner.mdx +1 -1
- package/dist/module/lib/Components/MediaButton/MediaButton.js +17 -17
- package/dist/module/lib/Components/MediaButton/MediaButton.js.map +1 -1
- package/dist/module/lib/Components/MediaButton/MediaButton.mdx +3 -3
- package/dist/module/lib/Components/MediaButton/MediaButton.stories.js +17 -17
- package/dist/module/lib/Components/MediaButton/MediaButton.stories.js.map +1 -1
- package/dist/module/lib/Components/MediaButton/MediaButton.test.js +4 -4
- package/dist/module/lib/Components/MediaButton/MediaButton.test.js.map +1 -1
- package/dist/module/lib/Components/MediaImage/MediaImage.js +20 -4
- package/dist/module/lib/Components/MediaImage/MediaImage.js.map +1 -1
- package/dist/module/lib/Components/MediaImage/MediaImage.stories.js +35 -0
- package/dist/module/lib/Components/MediaImage/MediaImage.stories.js.map +1 -1
- package/dist/module/lib/Components/NavBar/CoinCapsule.js +3 -2
- package/dist/module/lib/Components/NavBar/CoinCapsule.js.map +1 -1
- package/dist/module/lib/Components/NavBar/NavBar.js +2 -2
- package/dist/module/lib/Components/NavBar/NavBar.js.map +1 -1
- package/dist/module/lib/Components/NavBar/NavBar.mdx +2 -2
- package/dist/module/lib/Components/NavBar/NavBar.stories.js +1 -1
- package/dist/module/lib/Components/NavBar/NavBar.stories.js.map +1 -1
- package/dist/module/lib/Components/NavBar/NavBar.test.js +3 -3
- package/dist/module/lib/Components/NavBar/NavBar.test.js.map +1 -1
- package/dist/module/lib/Components/OptionList/OptionList.stories.js +4 -4
- package/dist/module/lib/Components/OptionList/OptionList.stories.js.map +1 -1
- package/dist/module/lib/Components/PageIndicator/PageIndicator.js +13 -8
- package/dist/module/lib/Components/PageIndicator/PageIndicator.js.map +1 -1
- package/dist/module/lib/Components/PageIndicator/PageIndicator.test.js +58 -0
- package/dist/module/lib/Components/PageIndicator/PageIndicator.test.js.map +1 -1
- package/dist/module/lib/Components/SearchInput/SearchInput.mdx +1 -1
- package/dist/module/lib/Components/SegmentedControl/SegmentedControl.mdx +1 -1
- package/dist/module/lib/Components/Select/Select.mdx +1 -1
- package/dist/module/lib/Components/Spinner/Spinner.mdx +1 -1
- package/dist/module/lib/Components/Spot/Spot.mdx +1 -1
- package/dist/module/lib/Components/Stepper/Stepper.mdx +1 -1
- package/dist/module/lib/Components/Subheader/Subheader.mdx +1 -1
- package/dist/module/lib/Components/Switch/Switch.mdx +1 -1
- package/dist/module/lib/Components/TabBar/TabBar.mdx +1 -1
- package/dist/module/lib/Components/TextInput/TextInput.mdx +1 -1
- package/dist/module/lib/Components/Tile/Tile.mdx +1 -1
- package/dist/module/lib/Components/Tooltip/Tooltip.mdx +1 -1
- package/dist/module/lib/Components/index.js +1 -0
- package/dist/module/lib/Components/index.js.map +1 -1
- package/dist/typescript/src/lib/Animations/Pulse/Pulse.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/AmountDisplay/AmountDisplay.d.ts +1 -1
- package/dist/typescript/src/lib/Components/AmountDisplay/AmountDisplay.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/AmountDisplay/index.d.ts +1 -1
- package/dist/typescript/src/lib/Components/AmountDisplay/index.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/AmountDisplay/types.d.ts +10 -3
- package/dist/typescript/src/lib/Components/AmountDisplay/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/DescriptionItem/DescriptionItem.d.ts +42 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/DescriptionItem.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/types.d.ts +39 -0
- package/dist/typescript/src/lib/Components/DescriptionItem/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIcon/DotIcon.d.ts +1 -1
- package/dist/typescript/src/lib/Components/DotIcon/DotIcon.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/DotIcon/types.d.ts +6 -0
- package/dist/typescript/src/lib/Components/DotIcon/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/DotSymbol/DotSymbol.d.ts +1 -1
- package/dist/typescript/src/lib/Components/DotSymbol/DotSymbol.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/DotSymbol/types.d.ts +6 -0
- package/dist/typescript/src/lib/Components/DotSymbol/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaButton/MediaButton.d.ts +3 -3
- package/dist/typescript/src/lib/Components/MediaButton/MediaButton.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaButton/types.d.ts +6 -6
- package/dist/typescript/src/lib/Components/MediaButton/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaImage/MediaImage.d.ts +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 +6 -0
- package/dist/typescript/src/lib/Components/MediaImage/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/NavBar/CoinCapsule.d.ts +1 -1
- package/dist/typescript/src/lib/Components/NavBar/CoinCapsule.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/NavBar/NavBar.d.ts +1 -1
- package/dist/typescript/src/lib/Components/NavBar/NavBar.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/NavBar/types.d.ts +3 -3
- package/dist/typescript/src/lib/Components/NavBar/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/PageIndicator/PageIndicator.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 +3 -3
- package/src/lib/Animations/Pulse/Pulse.mdx +1 -1
- package/src/lib/Animations/Pulse/Pulse.tsx +6 -3
- package/src/lib/Animations/Spin/Spin.mdx +1 -1
- package/src/lib/Components/AddressInput/AddressInput.mdx +1 -1
- package/src/lib/Components/AmountDisplay/AmountDisplay.mdx +7 -1
- package/src/lib/Components/AmountDisplay/AmountDisplay.stories.tsx +18 -0
- package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +71 -40
- package/src/lib/Components/AmountDisplay/index.ts +5 -1
- package/src/lib/Components/AmountDisplay/types.ts +12 -3
- package/src/lib/Components/AmountInput/AmountInput.mdx +1 -1
- package/src/lib/Components/Avatar/Avatar.mdx +1 -1
- package/src/lib/Components/Banner/Banner.mdx +1 -1
- package/src/lib/Components/BottomSheet/BottomSheet.mdx +1 -1
- package/src/lib/Components/Button/Button.mdx +1 -1
- package/src/lib/Components/Card/Card.stories.tsx +1 -3
- package/src/lib/Components/CardButton/CardButton.mdx +1 -1
- package/src/lib/Components/Checkbox/Checkbox.mdx +1 -1
- package/src/lib/Components/DescriptionItem/DescriptionItem.mdx +139 -0
- package/src/lib/Components/DescriptionItem/DescriptionItem.stories.tsx +234 -0
- package/src/lib/Components/DescriptionItem/DescriptionItem.test.tsx +112 -0
- package/src/lib/Components/DescriptionItem/DescriptionItem.tsx +224 -0
- package/src/lib/Components/DescriptionItem/index.ts +2 -0
- package/src/lib/Components/DescriptionItem/types.ts +44 -0
- package/src/lib/Components/Divider/Divider.mdx +1 -1
- package/src/lib/Components/DotIcon/DotIcon.mdx +92 -0
- package/src/lib/Components/DotIcon/DotIcon.stories.tsx +35 -0
- package/src/lib/Components/DotIcon/DotIcon.tsx +31 -14
- package/src/lib/Components/DotIcon/types.ts +6 -0
- package/src/lib/Components/DotSymbol/DotSymbol.mdx +79 -2
- package/src/lib/Components/DotSymbol/DotSymbol.stories.tsx +17 -0
- package/src/lib/Components/DotSymbol/DotSymbol.tsx +42 -24
- package/src/lib/Components/DotSymbol/types.ts +6 -0
- package/src/lib/Components/IconButton/IconButton.mdx +1 -1
- package/src/lib/Components/InteractiveIcon/InteractiveIcon.mdx +1 -1
- package/src/lib/Components/Link/Link.mdx +1 -1
- package/src/lib/Components/MediaBanner/MediaBanner.mdx +1 -1
- package/src/lib/Components/MediaButton/MediaButton.mdx +3 -3
- package/src/lib/Components/MediaButton/MediaButton.stories.tsx +29 -15
- package/src/lib/Components/MediaButton/MediaButton.test.tsx +4 -4
- package/src/lib/Components/MediaButton/MediaButton.tsx +33 -20
- package/src/lib/Components/MediaButton/types.ts +6 -6
- package/src/lib/Components/MediaImage/MediaImage.stories.tsx +18 -0
- package/src/lib/Components/MediaImage/MediaImage.tsx +12 -2
- package/src/lib/Components/MediaImage/types.ts +6 -0
- package/src/lib/Components/NavBar/CoinCapsule.tsx +3 -2
- package/src/lib/Components/NavBar/NavBar.mdx +2 -2
- package/src/lib/Components/NavBar/NavBar.stories.tsx +3 -1
- package/src/lib/Components/NavBar/NavBar.test.tsx +3 -3
- package/src/lib/Components/NavBar/NavBar.tsx +2 -2
- package/src/lib/Components/NavBar/types.ts +3 -3
- package/src/lib/Components/OptionList/OptionList.stories.tsx +4 -4
- package/src/lib/Components/PageIndicator/PageIndicator.test.tsx +78 -0
- package/src/lib/Components/PageIndicator/PageIndicator.tsx +15 -7
- package/src/lib/Components/SearchInput/SearchInput.mdx +1 -1
- package/src/lib/Components/SegmentedControl/SegmentedControl.mdx +1 -1
- package/src/lib/Components/Select/Select.mdx +1 -1
- package/src/lib/Components/Spinner/Spinner.mdx +1 -1
- package/src/lib/Components/Spot/Spot.mdx +1 -1
- package/src/lib/Components/Stepper/Stepper.mdx +1 -1
- package/src/lib/Components/Subheader/Subheader.mdx +1 -1
- package/src/lib/Components/Switch/Switch.mdx +1 -1
- package/src/lib/Components/TabBar/TabBar.mdx +1 -1
- package/src/lib/Components/TextInput/TextInput.mdx +1 -1
- package/src/lib/Components/Tile/Tile.mdx +1 -1
- package/src/lib/Components/Tooltip/Tooltip.mdx +1 -1
- package/src/lib/Components/index.ts +1 -0
|
@@ -16,5 +16,5 @@ export declare const fontSizeMap: Record<MediaImageSize, number>;
|
|
|
16
16
|
* <MediaImage fallback="Bitcoin" size={32} />
|
|
17
17
|
* <MediaImage loading size={32} />
|
|
18
18
|
*/
|
|
19
|
-
export declare const MediaImage: ({ src, alt, size, shape, fallback, loading, lx, style, ref, ...props }: MediaImageProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const MediaImage: ({ src, alt, size, shape, fallback, loading, disabled: disabledProp, lx, style, ref, ...props }: MediaImageProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
//# sourceMappingURL=MediaImage.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaImage.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/MediaImage.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MediaImage.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/MediaImage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAmB,MAAM,SAAS,CAAC;AAgBhF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAUtD,CAAC;AAgDF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,GAAI,gGAYxB,eAAe,4CA+CjB,CAAC"}
|
|
@@ -33,5 +33,11 @@ export type MediaImageProps = {
|
|
|
33
33
|
* @default false
|
|
34
34
|
*/
|
|
35
35
|
loading?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Shows a disabled appearance.
|
|
38
|
+
* @optional
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
disabled?: boolean;
|
|
36
42
|
} & Omit<StyledViewProps, 'children'>;
|
|
37
43
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { CoinCapsuleProps } from './types';
|
|
2
|
-
export declare function CoinCapsule({ ticker,
|
|
2
|
+
export declare function CoinCapsule({ ticker, leadingContent }: CoinCapsuleProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=CoinCapsule.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CoinCapsule.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/NavBar/CoinCapsule.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"CoinCapsule.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/NavBar/CoinCapsule.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,gBAAgB,2CASvE"}
|
|
@@ -5,7 +5,7 @@ export declare namespace NavBarContent {
|
|
|
5
5
|
}
|
|
6
6
|
export declare function NavBarTitle({ children, style, ...props }: NavBarTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export declare function NavBarDescription({ children, style, ...props }: NavBarDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export declare function NavBarCoinCapsule({ ticker,
|
|
8
|
+
export declare function NavBarCoinCapsule({ ticker, leadingContent, ...props }: NavBarCoinCapsuleProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export declare function NavBarBackButton({ accessibilityLabel, onPress, style, ...props }: NavBarBackButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export declare namespace NavBarBackButton {
|
|
11
11
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/NavBar/NavBar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EACtB,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AA2CjB,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAYpB;yBAhBe,aAAa;;;AAoB7B,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAgB1E;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAgBxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,
|
|
1
|
+
{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/NavBar/NavBar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EACtB,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AA2CjB,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAYpB;yBAhBe,aAAa;;;AAoB7B,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAgB1E;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAgBxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,cAAc,EACd,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAMxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAgBvB;yBArBe,gBAAgB;;;AAyBhC;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiBrB;yBArBe,cAAc;;;AAyB9B;;GAEG;AACH,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CA6BlE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Density } from '@ledgerhq/lumen-utils-shared';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
3
|
import type { StyledViewProps } from '../../../styles';
|
|
4
4
|
import type { IconButtonProps } from '../IconButton';
|
|
5
5
|
export type NavBarProps = {
|
|
@@ -48,9 +48,9 @@ export type CoinCapsuleProps = {
|
|
|
48
48
|
*/
|
|
49
49
|
ticker: string;
|
|
50
50
|
/**
|
|
51
|
-
* The
|
|
51
|
+
* The leading content, typically a crypto coin icon.
|
|
52
52
|
*/
|
|
53
|
-
|
|
53
|
+
leadingContent: ReactNode;
|
|
54
54
|
} & Omit<StyledViewProps, 'children'>;
|
|
55
55
|
/**
|
|
56
56
|
* Props for the NavBarCoinCapsule component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/NavBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/NavBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,GAAG,IAAI,CACN,eAAe,EACf,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,oBAAoB,CACtD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,EAAE,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageIndicator.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/PageIndicator/PageIndicator.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"PageIndicator.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/PageIndicator/PageIndicator.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8JlD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,gDAM3B,kBAAkB,4CA0CpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/lumen-ui-rnative",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.37",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"!**/*.tsbuildinfo"
|
|
43
43
|
],
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@ledgerhq/lumen-utils-shared": "0.1.
|
|
45
|
+
"@ledgerhq/lumen-utils-shared": "0.1.4",
|
|
46
46
|
"i18next": "^23.7.0",
|
|
47
47
|
"react-i18next": "^14.0.0"
|
|
48
48
|
},
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@types/react": "^19.0.0",
|
|
54
54
|
"@gorhom/bottom-sheet": "^5.0.0",
|
|
55
|
-
"@ledgerhq/lumen-design-core": "0.1.
|
|
55
|
+
"@ledgerhq/lumen-design-core": "0.1.15",
|
|
56
56
|
"react": "^19.0.0",
|
|
57
57
|
"react-native": "~0.79.7",
|
|
58
58
|
"react-native-reanimated": "^4.1.0",
|
|
@@ -41,9 +41,12 @@ export const Pulse = memo(
|
|
|
41
41
|
};
|
|
42
42
|
}, [sv, animate, timingConfig]);
|
|
43
43
|
|
|
44
|
-
const animatedStyle = useAnimatedStyle(
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
const animatedStyle = useAnimatedStyle(
|
|
45
|
+
() => ({
|
|
46
|
+
opacity: sv.value,
|
|
47
|
+
}),
|
|
48
|
+
[sv],
|
|
49
|
+
);
|
|
47
50
|
|
|
48
51
|
return (
|
|
49
52
|
<Animated.View
|
|
@@ -12,7 +12,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
|
|
|
12
12
|
|
|
13
13
|
<Meta title='Communication/AmountDisplay' of={AmountDisplayStories} />
|
|
14
14
|
|
|
15
|
-
#
|
|
15
|
+
# AmountDisplay
|
|
16
16
|
|
|
17
17
|
<CustomTabs>
|
|
18
18
|
<Tab label="Overview">
|
|
@@ -39,6 +39,12 @@ The AmountDisplay component renders formatted monetary amounts with flexible cur
|
|
|
39
39
|
<Canvas of={AmountDisplayStories.Base} />
|
|
40
40
|
<Controls of={AmountDisplayStories.Base} />
|
|
41
41
|
|
|
42
|
+
### Size
|
|
43
|
+
|
|
44
|
+
The `size` prop controls the typographic scale of the amount display. Use `md` (default) for primary amounts and `sm` for secondary or contextual amounts.
|
|
45
|
+
|
|
46
|
+
<Canvas of={AmountDisplayStories.Sizes} />
|
|
47
|
+
|
|
42
48
|
### Privacy
|
|
43
49
|
|
|
44
50
|
The `hidden` prop allows you to toggle amount visibility for privacy-sensitive applications. When set to `true`, the component displays bullet points (••••) instead of the actual amount, while keeping the currency symbol visible. The example below demonstrates toggling amount visibility with a button.
|
|
@@ -79,6 +79,12 @@ const meta: Meta<typeof AmountDisplay> = {
|
|
|
79
79
|
type: 'boolean',
|
|
80
80
|
},
|
|
81
81
|
},
|
|
82
|
+
size: {
|
|
83
|
+
control: {
|
|
84
|
+
type: 'select',
|
|
85
|
+
},
|
|
86
|
+
options: ['sm', 'md'],
|
|
87
|
+
},
|
|
82
88
|
},
|
|
83
89
|
parameters: {
|
|
84
90
|
layout: 'centered',
|
|
@@ -109,6 +115,18 @@ export const Base: Story = {
|
|
|
109
115
|
},
|
|
110
116
|
};
|
|
111
117
|
|
|
118
|
+
export const Sizes: Story = {
|
|
119
|
+
args: {
|
|
120
|
+
value: 1234.56,
|
|
121
|
+
},
|
|
122
|
+
render: (props) => (
|
|
123
|
+
<View style={{ alignItems: 'center', gap: 24 }}>
|
|
124
|
+
<AmountDisplay {...props} size='md' />
|
|
125
|
+
<AmountDisplay {...props} size='sm' />
|
|
126
|
+
</View>
|
|
127
|
+
),
|
|
128
|
+
};
|
|
129
|
+
|
|
112
130
|
export const WithHideButton: Story = {
|
|
113
131
|
render: (props) => {
|
|
114
132
|
const [hidden, setHidden] = useState(false);
|
|
@@ -8,6 +8,7 @@ import Animated, {
|
|
|
8
8
|
withTiming,
|
|
9
9
|
} from 'react-native-reanimated';
|
|
10
10
|
import { useCommonTranslation } from '../../../i18n';
|
|
11
|
+
import type { LumenTypographyTokenName } from '../../../styles';
|
|
11
12
|
import { useStyleSheet } from '../../../styles';
|
|
12
13
|
import { Pulse } from '../../Animations/Pulse';
|
|
13
14
|
import { useTimingConfig } from '../../Animations/useTimingConfig';
|
|
@@ -15,38 +16,66 @@ import { RuntimeConstants } from '../../utils';
|
|
|
15
16
|
import { Box } from '../Utility';
|
|
16
17
|
import type {
|
|
17
18
|
AmountDisplayProps,
|
|
19
|
+
AmountDisplaySize,
|
|
18
20
|
DigitStripListProps,
|
|
19
21
|
DigitStripProps,
|
|
22
|
+
DigitWidths,
|
|
20
23
|
} from './types';
|
|
21
24
|
import { DIGITS } from './types';
|
|
22
25
|
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
26
|
+
const TYPOGRAPHY_WIDTHS = {
|
|
27
|
+
heading1SemiBold: {
|
|
28
|
+
0: 25,
|
|
29
|
+
1: 15.5,
|
|
30
|
+
2: 23.5,
|
|
31
|
+
3: 24.5,
|
|
32
|
+
4: 25.5,
|
|
33
|
+
5: 23.5,
|
|
34
|
+
6: 25,
|
|
35
|
+
7: 22,
|
|
36
|
+
8: 24.5,
|
|
37
|
+
9: 24.5,
|
|
38
|
+
},
|
|
39
|
+
heading2SemiBold: {
|
|
40
|
+
0: 17.5,
|
|
41
|
+
1: 11,
|
|
42
|
+
2: 16.5,
|
|
43
|
+
3: 17,
|
|
44
|
+
4: 18,
|
|
45
|
+
5: 16,
|
|
46
|
+
6: 17.5,
|
|
47
|
+
7: 15,
|
|
48
|
+
8: 17,
|
|
49
|
+
9: 17,
|
|
50
|
+
},
|
|
51
|
+
heading4SemiBold: {
|
|
52
|
+
0: 13,
|
|
53
|
+
1: 8.5,
|
|
54
|
+
2: 12.5,
|
|
55
|
+
3: 12.5,
|
|
56
|
+
4: 13,
|
|
57
|
+
5: 12,
|
|
58
|
+
6: 12.5,
|
|
59
|
+
7: 11.5,
|
|
60
|
+
8: 12.5,
|
|
61
|
+
9: 12.5,
|
|
62
|
+
},
|
|
63
|
+
} as const satisfies Partial<Record<LumenTypographyTokenName, DigitWidths>>;
|
|
64
|
+
|
|
65
|
+
type MeasuredTypography = keyof typeof TYPOGRAPHY_WIDTHS;
|
|
66
|
+
|
|
67
|
+
type SizeTypographyConfig = {
|
|
68
|
+
integer: MeasuredTypography;
|
|
69
|
+
decimal: MeasuredTypography;
|
|
34
70
|
};
|
|
35
71
|
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
2: 16.5,
|
|
40
|
-
3: 17,
|
|
41
|
-
4: 18,
|
|
42
|
-
5: 16,
|
|
43
|
-
6: 17.5,
|
|
44
|
-
7: 15,
|
|
45
|
-
8: 17,
|
|
46
|
-
9: 17,
|
|
72
|
+
const SIZE_TYPOGRAPHY: Record<AmountDisplaySize, SizeTypographyConfig> = {
|
|
73
|
+
md: { integer: 'heading1SemiBold', decimal: 'heading2SemiBold' },
|
|
74
|
+
sm: { integer: 'heading2SemiBold', decimal: 'heading4SemiBold' },
|
|
47
75
|
};
|
|
48
76
|
|
|
49
|
-
const useStyles = () => {
|
|
77
|
+
const useStyles = (size: AmountDisplaySize) => {
|
|
78
|
+
const typography = SIZE_TYPOGRAPHY[size];
|
|
50
79
|
return useStyleSheet(
|
|
51
80
|
(t) => ({
|
|
52
81
|
container: {
|
|
@@ -61,19 +90,19 @@ const useStyles = () => {
|
|
|
61
90
|
paddingBottom: t.spacings.s2,
|
|
62
91
|
},
|
|
63
92
|
integerText: {
|
|
64
|
-
...t.typographies.
|
|
93
|
+
...t.typographies[typography.integer],
|
|
65
94
|
color: t.colors.text.base,
|
|
66
95
|
},
|
|
67
96
|
decimalText: {
|
|
68
|
-
...t.typographies.
|
|
97
|
+
...t.typographies[typography.decimal],
|
|
69
98
|
color: t.colors.text.muted,
|
|
70
99
|
},
|
|
71
100
|
currencyStartText: {
|
|
72
|
-
...t.typographies.
|
|
101
|
+
...t.typographies[typography.integer],
|
|
73
102
|
color: t.colors.text.base,
|
|
74
103
|
},
|
|
75
104
|
currencyEndText: {
|
|
76
|
-
...t.typographies.
|
|
105
|
+
...t.typographies[typography.decimal],
|
|
77
106
|
color: t.colors.text.muted,
|
|
78
107
|
},
|
|
79
108
|
spacingStart: {
|
|
@@ -83,7 +112,7 @@ const useStyles = () => {
|
|
|
83
112
|
marginLeft: t.spacings.s4,
|
|
84
113
|
},
|
|
85
114
|
}),
|
|
86
|
-
[],
|
|
115
|
+
[typography],
|
|
87
116
|
);
|
|
88
117
|
};
|
|
89
118
|
|
|
@@ -136,10 +165,8 @@ const useAnimatedDigitStrip = ({
|
|
|
136
165
|
};
|
|
137
166
|
|
|
138
167
|
const DigitStrip = memo(
|
|
139
|
-
({ value, textStyle, animate,
|
|
140
|
-
const targetWidth =
|
|
141
|
-
type === 'integer' ? INTEGER_DIGIT_WIDTHS : DECIMAL_DIGIT_WIDTHS
|
|
142
|
-
)[value];
|
|
168
|
+
({ value, textStyle, animate, widths }: DigitStripProps) => {
|
|
169
|
+
const targetWidth = widths[value];
|
|
143
170
|
const lineHeight = textStyle.lineHeight;
|
|
144
171
|
const width = useSharedValue<number>(targetWidth);
|
|
145
172
|
const { animatedStyle } = useAnimatedDigitStrip({
|
|
@@ -176,7 +203,7 @@ const DigitStrip = memo(
|
|
|
176
203
|
DigitStrip.displayName = 'DigitStrip';
|
|
177
204
|
|
|
178
205
|
const DigitStripList = memo(
|
|
179
|
-
({ items, textStyle, animate,
|
|
206
|
+
({ items, textStyle, animate, widths }: DigitStripListProps) => {
|
|
180
207
|
return items.map((item, index) => {
|
|
181
208
|
const key = items.length - index;
|
|
182
209
|
if (item.type === 'separator') {
|
|
@@ -192,7 +219,7 @@ const DigitStripList = memo(
|
|
|
192
219
|
value={Number(item.value) as DigitStripProps['value']}
|
|
193
220
|
animate={animate}
|
|
194
221
|
textStyle={textStyle}
|
|
195
|
-
|
|
222
|
+
widths={widths}
|
|
196
223
|
/>
|
|
197
224
|
);
|
|
198
225
|
});
|
|
@@ -233,15 +260,16 @@ DigitStripList.displayName = 'DigitStripList';
|
|
|
233
260
|
* <AmountDisplay value={1234.56} formatter={usdFormatter} hidden={true} />
|
|
234
261
|
* ```
|
|
235
262
|
*/
|
|
236
|
-
export
|
|
263
|
+
export function AmountDisplay({
|
|
237
264
|
value,
|
|
238
265
|
formatter,
|
|
239
266
|
hidden = false,
|
|
240
267
|
loading = false,
|
|
241
268
|
animate = true,
|
|
269
|
+
size = 'md',
|
|
242
270
|
...props
|
|
243
|
-
}: AmountDisplayProps)
|
|
244
|
-
const styles = useStyles();
|
|
271
|
+
}: AmountDisplayProps) {
|
|
272
|
+
const styles = useStyles(size);
|
|
245
273
|
const { t } = useCommonTranslation();
|
|
246
274
|
const parts = formatter(value);
|
|
247
275
|
const splitDigits = useSplitText(parts);
|
|
@@ -250,6 +278,9 @@ export const AmountDisplay = ({
|
|
|
250
278
|
hidden,
|
|
251
279
|
t('components.amountDisplay.amountHiddenAriaLabel'),
|
|
252
280
|
);
|
|
281
|
+
const typography = SIZE_TYPOGRAPHY[size];
|
|
282
|
+
const integerWidths = TYPOGRAPHY_WIDTHS[typography.integer];
|
|
283
|
+
const decimalWidths = TYPOGRAPHY_WIDTHS[typography.decimal];
|
|
253
284
|
|
|
254
285
|
return (
|
|
255
286
|
<Box
|
|
@@ -281,7 +312,7 @@ export const AmountDisplay = ({
|
|
|
281
312
|
items={splitDigits.integerPart}
|
|
282
313
|
textStyle={styles.integerText}
|
|
283
314
|
animate={animate}
|
|
284
|
-
|
|
315
|
+
widths={integerWidths}
|
|
285
316
|
/>
|
|
286
317
|
)}
|
|
287
318
|
</View>
|
|
@@ -296,7 +327,7 @@ export const AmountDisplay = ({
|
|
|
296
327
|
items={splitDigits.decimalPart}
|
|
297
328
|
textStyle={styles.decimalText}
|
|
298
329
|
animate={animate}
|
|
299
|
-
|
|
330
|
+
widths={decimalWidths}
|
|
300
331
|
/>
|
|
301
332
|
)}
|
|
302
333
|
{parts.currencyPosition === 'end' && (
|
|
@@ -312,4 +343,4 @@ export const AmountDisplay = ({
|
|
|
312
343
|
</Pulse>
|
|
313
344
|
</Box>
|
|
314
345
|
);
|
|
315
|
-
}
|
|
346
|
+
}
|
|
@@ -6,13 +6,17 @@ export type { FormattedValue };
|
|
|
6
6
|
|
|
7
7
|
export const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;
|
|
8
8
|
|
|
9
|
-
type
|
|
9
|
+
type Digit = (typeof DIGITS)[number];
|
|
10
|
+
|
|
11
|
+
export type AmountDisplaySize = 'sm' | 'md';
|
|
12
|
+
|
|
13
|
+
export type DigitWidths = Record<Digit, number>;
|
|
10
14
|
|
|
11
15
|
export type DigitStripProps = {
|
|
12
|
-
value:
|
|
16
|
+
value: Digit;
|
|
13
17
|
animate: boolean;
|
|
14
18
|
textStyle: TextStyle & { lineHeight: number };
|
|
15
|
-
|
|
19
|
+
widths: DigitWidths;
|
|
16
20
|
};
|
|
17
21
|
|
|
18
22
|
export type DigitStripListProps = {
|
|
@@ -48,4 +52,9 @@ export type AmountDisplayProps = ViewProps & {
|
|
|
48
52
|
* @default true
|
|
49
53
|
*/
|
|
50
54
|
animate?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* The size variant of the amount display.
|
|
57
|
+
* @default 'md'
|
|
58
|
+
*/
|
|
59
|
+
size?: AmountDisplaySize;
|
|
51
60
|
} & Omit<StyledViewProps, 'children'>;
|
|
@@ -196,9 +196,7 @@ export const StatesShowcase: Story = {
|
|
|
196
196
|
<Card {...args} lx={{ width: 's320' }} disabled>
|
|
197
197
|
<CardHeader>
|
|
198
198
|
<CardLeading>
|
|
199
|
-
<
|
|
200
|
-
<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
|
|
201
|
-
</Box>
|
|
199
|
+
<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
|
|
202
200
|
<CardContent>
|
|
203
201
|
<CardContentTitle>Disabled</CardContentTitle>
|
|
204
202
|
<CardContentDescription>Non-interactive</CardContentDescription>
|