@ledgerhq/native-ui 0.20.2-nightly.0 → 0.20.2-nightly.2

package/lib/components/Icon/IconBadge.d.ts

@@ -2,6 +2,7 @@
 import { FlexBoxProps } from "../Layout/Flex";
 import { IconOrElementType } from "./type";
 export declare const DEFAULT_ICON_SIZE = 16;
+export declare const DEFAULT_BACKGROUND_COLOR = "neutral.c40";
 export type IconBadgeProps = FlexBoxProps & {
     /**
      * Component that takes `{size?: number; color?: string}` as props.
@@ -16,6 +17,10 @@ export type IconBadgeProps = FlexBoxProps & {
      * Icon color, will be applied to the component provided in the `Icon` prop
      */
     iconColor?: string;
+    /**
+     * Background color, will define the color of the round background part of the badge
+     */
+    backgroundColor?: string;
 };
-declare const IconBadge: ({ Icon, iconSize, iconColor, ...rest }: IconBadgeProps) => JSX.Element;
+declare const IconBadge: ({ Icon, iconSize, backgroundColor, iconColor, ...rest }: IconBadgeProps) => JSX.Element;
 export default IconBadge;

package/lib/components/Icon/IconBadge.js

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import Flex from "../Layout/Flex";
 export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_BACKGROUND_COLOR = "neutral.c40";
 const BORDER_RADIUS = 999999;
 const IconBadge = (_a) => {
-    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, rest = __rest(_a, ["Icon", "iconSize", "iconColor"]);
-    return (React.createElement(Flex, Object.assign({ height: iconSize * 2, width: iconSize * 2, backgroundColor: "neutral.c40", borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center" }, rest), React.isValidElement(Icon) ? (Icon) : (
+    var { Icon, iconSize = DEFAULT_ICON_SIZE, backgroundColor = DEFAULT_BACKGROUND_COLOR, iconColor } = _a, rest = __rest(_a, ["Icon", "iconSize", "backgroundColor", "iconColor"]);
+    return (React.createElement(Flex, Object.assign({ height: iconSize * 2, width: iconSize * 2, backgroundColor: backgroundColor, borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center" }, rest), React.isValidElement(Icon) ? (Icon) : (
     /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
     React.createElement(Icon, { size: iconSize, color: iconColor }))));
 };

package/lib/components/cta/Button/index.d.ts

@@ -15,7 +15,7 @@ export type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     children?: React.ReactNode;
     pending?: boolean;
     displayContentWhenPending?: boolean;
-    testID?: string;
+    buttonTestId?: string;
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;

package/lib/components/cta/Button/index.js

@@ -55,14 +55,14 @@ const SpinnerContainer = styled.View `
   justify-content: center;
 `;
 const ButtonContainer = (props) => {
-    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, } = props;
+    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, buttonTestId, } = props;
     const theme = useTheme();
     const { text } = getButtonColorStyle(theme.colors, props);
     const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: ctaIconSize[size], color: text.color })) ||
         (Icon && React.createElement(Icon, { size: ctaIconSize[size], color: text.color })), [iconName, size, Icon, text.color]);
     const textColor = useMemo(() => (pending ? theme.colors.neutral.c50 : text.color), [pending, theme.colors.neutral.c50, text.color]);
     return (React.createElement(Container, { hide: hide },
-        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, children)) : null,
+        iconPosition === "right" && children ? (React.createElement(Text, { testID: buttonTestId, variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, children)) : null,
         pending && displayContentWhenPending ? (React.createElement(IconContainer, { iconPosition: iconPosition },
             React.createElement(SpinnerContainer, { displayContentWhenPending: true },
                 React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: true })))) : IconNode ? (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition }, IconNode)) : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.20.2-nightly.0",
+  "version": "0.20.2-nightly.2",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^0.4.0-nightly.0",
+    "@ledgerhq/crypto-icons-ui": "^0.4.0-nightly.1",
     "@ledgerhq/icons-ui": "^0.4.1",
     "@ledgerhq/ui-shared": "^0.2.0"
   },
@@ -61,7 +61,7 @@
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.22.8",
     "@babel/generator": "^7.17.2",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.16.0",
@@ -76,7 +76,7 @@
     "@emotion/native": "^10.0.27",
     "@expo/metro-config": "^0.7.1",
     "@expo/webpack-config": "^18.0.1",
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-async-storage/async-storage": "1.17.12",
     "@react-native-community/cli-server-api": "^7.0.3",
     "@react-native-community/datetimepicker": "6.7.3",
     "@react-native-community/slider": "^4.4.2",