@ledgerhq/native-ui 0.21.1 → 0.22.0-next.0

package/lib/components/Cards/BannerCard/index.d.ts

@@ -5,6 +5,7 @@ export type CardProps = TouchableOpacityProps & {
     title?: string;
     onPressDismiss?: () => void;
     LeftElement?: JSX.Element;
+    hideLeftElementContainer?: boolean;
     typeOfRightIcon: "arrow" | "close";
 };
 type CloseProps = {

package/lib/components/Cards/BannerCard/index.js

@@ -37,9 +37,9 @@ export const CloseButton = ({ onPressDismiss }) => {
         React.createElement(CloseMedium, { size: 14, color: colors.neutral.c100 })));
 };
 const CardContainer = (props) => {
-    const { onPressDismiss, LeftElement, title, typeOfRightIcon } = props;
+    const { onPressDismiss, LeftElement, hideLeftElementContainer, title, typeOfRightIcon } = props;
     return (React.createElement(Container, Object.assign({}, props),
-        React.createElement(Flex, { borderRadius: 50, height: 40, width: 40, alignItems: "center", justifyContent: "center", bg: "opacityDefault.c05" }, LeftElement),
+        hideLeftElementContainer ? (React.createElement(Flex, { borderRadius: 50, height: 40, width: 40, alignItems: "center", justifyContent: "center", bg: "opacityDefault.c05" }, LeftElement)) : (LeftElement),
         React.createElement(Text, { mx: 4, variant: "large", fontWeight: "medium", numberOfLines: 3, maxWidth: "70%", color: "neutral.c100" }, title),
         typeOfRightIcon === "close" ? (React.createElement(CloseButton, { onPressDismiss: onPressDismiss })) : (React.createElement(ChevronContainer, null,
             React.createElement(ChevronRightMedium, { size: 24 })))));

package/lib/components/Loader/InfiniteLoader/index.d.ts

@@ -6,5 +6,5 @@ declare const Loader: import("styled-components").StyledComponent<typeof Svg, im
 export type Props = React.ComponentProps<typeof Loader> & {
     color?: string;
 };
-export default function InfiniteLoader({ size, color, ...extraProps }: Props): JSX.Element;
+export default function InfiniteLoader({ size, color, mock, ...extraProps }: Props): JSX.Element;
 export {};

package/lib/components/Loader/InfiniteLoader/index.js

@@ -24,7 +24,7 @@ const Loader = styled(Svg).attrs((props) => (Object.assign({}, strokeSystem(prop
   ${size}
 `;
 export default function InfiniteLoader(_a) {
-    var { size = 38, color = "primary.c50" } = _a, extraProps = __rest(_a, ["size", "color"]);
+    var { size = 38, color = "primary.c50", mock = false } = _a, extraProps = __rest(_a, ["size", "color", "mock"]);
     const rotation = useSharedValue(0);
     const animatedStyles = useAnimatedStyle(() => {
         return {
@@ -39,7 +39,7 @@ export default function InfiniteLoader(_a) {
         rotation.value = withRepeat(withTiming(360, {
             duration: 1000,
             easing: Easing.linear,
-        }), -1);
+        }), mock ? 1 : -1);
         return () => cancelAnimation(rotation);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts

@@ -2,13 +2,19 @@ import React from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 import { IconType } from "src/components/Icon/type";
 import { BaseStyledProps } from "../../../styled";
+import { TextVariants } from "../../../../styles/theme";
+type Variant = "small" | "large";
 export type QuickActionButtonProps = TouchableOpacityProps & BaseStyledProps & {
     Icon: IconType;
     disabled?: boolean;
     onPressWhenDisabled?: TouchableOpacityProps["onPress"];
+    textVariant?: TextVariants;
+    variant?: Variant;
 };
+export declare const StyledText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, TouchableOpacityProps & {
     visuallyDisabled?: boolean | undefined;
+    variant: Variant;
 }, never>;
-declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
+declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
 export default QuickActionButton;

package/lib/components/cta/QuickAction/QuickActionButton/index.js

@@ -13,22 +13,26 @@ import React from "react";
 import { TouchableOpacity } from "react-native";
 import Text from "../../../Text";
 import baseStyled from "../../../styled";
+export const StyledText = baseStyled(Text) `
+  overflow: hidden;
+  max-width: 100%;
+`;
 export const Base = baseStyled(TouchableOpacity) `
-  height: 80px;
+  height: ${({ variant }) => (variant === "small" ? 59 : 80)}px;
   flex-direction: column;
   text-align: center;
   align-items: center;
   justify-content: center;
   border-radius: ${(p) => p.theme.radii[2]}px;
-  padding: 0 ${(p) => p.theme.space[6]}px;
+  padding: ${({ theme, variant }) => variant === "small" ? `${theme.space[3]}px ${theme.space[2]}px` : `0 ${theme.space[6]}px`};
   ${({ visuallyDisabled, theme }) => visuallyDisabled
     ? `border: 1px solid ${theme.colors.neutral.c30};`
     : `background-color: ${theme.colors.neutral.c20};`}
 `;
 const QuickActionButton = (_a) => {
-    var { Icon, children, disabled, onPress, onPressWhenDisabled } = _a, otherProps = __rest(_a, ["Icon", "children", "disabled", "onPress", "onPressWhenDisabled"]);
-    return (React.createElement(Base, Object.assign({ disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled }, otherProps),
-        React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }),
-        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: disabled ? "neutral.c50" : "neutral.c100", mt: 2 }, children)));
+    var { Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large" } = _a, otherProps = __rest(_a, ["Icon", "children", "disabled", "onPress", "onPressWhenDisabled", "textVariant", "variant"]);
+    return (React.createElement(Base, Object.assign({ disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant }, otherProps),
+        React.createElement(Icon, { size: variant === "small" ? 20 : 24, color: disabled ? "neutral.c50" : "neutral.c100" }),
+        React.createElement(StyledText, { numberOfLines: 1, variant: textVariant, fontWeight: "semiBold", color: disabled ? "neutral.c50" : "neutral.c100", mt: 2 }, children)));
 };
 export default QuickActionButton;

package/lib/components/cta/QuickAction/QuickActionList/index.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import { FlatListProps } from "react-native";
 import { QuickActionButtonProps } from "../QuickActionButton";
-export type QuickActionListProps = Omit<FlatListProps<QuickActionButtonProps>, "renderItem">;
-declare const QuickActionList: ({ numColumns, data, ...otherProps }: QuickActionListProps) => React.ReactElement;
+export type QuickActionListProps = Omit<FlatListProps<QuickActionButtonProps>, "renderItem"> & {
+    id: string;
+};
+declare const QuickActionList: ({ numColumns, data, id, ...otherProps }: QuickActionListProps) => React.ReactElement;
 export default QuickActionList;

package/lib/components/cta/QuickAction/QuickActionList/index.js

@@ -13,10 +13,10 @@ import React, { useCallback } from "react";
 import { FlatList } from "react-native";
 import QuickActionButton from "../QuickActionButton";
 const QuickActionList = (_a) => {
-    var { numColumns = 3, data } = _a, otherProps = __rest(_a, ["numColumns", "data"]);
+    var { numColumns = 3, data, id } = _a, otherProps = __rest(_a, ["numColumns", "data", "id"]);
     const renderItem = useCallback(({ item, index }) => {
         return (React.createElement(QuickActionButton, Object.assign({}, item, { flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: (data === null || data === void 0 ? void 0 : data.length) && index + numColumns < data.length ? 4 : 0 })));
     }, []);
-    return (React.createElement(FlatList, Object.assign({}, otherProps, { data: data, horizontal: false, renderItem: renderItem, numColumns: numColumns, style: { width: "100%" } })));
+    return (React.createElement(FlatList, Object.assign({}, otherProps, { data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns, style: { width: "100%" } })));
 };
 export default QuickActionList;

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

@@ -1,2 +1,2 @@
-export { default as QuickActionList } from "./QuickActionList";
-export { default as QuickActionButton } from "./QuickActionButton";
+export { default as QuickActionList, type QuickActionListProps } from "./QuickActionList";
+export { default as QuickActionButton, type QuickActionButtonProps } from "./QuickActionButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.21.1",
+  "version": "0.22.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -72,8 +72,8 @@
     "@babel/plugin-transform-template-literals": "^7.18.9",
     "@babel/preset-env": "^7.15.8",
     "@babel/runtime": "^7.17.2",
-    "@emotion/core": "^10.3.1",
-    "@emotion/native": "^10.0.27",
+    "@emotion/core": "^11.0.0",
+    "@emotion/native": "^11.0.0",
     "@expo/metro-config": "^0.7.1",
     "@expo/webpack-config": "^18.0.1",
     "@react-native-async-storage/async-storage": "1.17.12",
@@ -144,7 +144,7 @@
     "rimraf": "^4.4.1",
     "styled-components": "^5.3.3",
     "stylelint": "^14.9.1",
-    "stylelint-config-recommended": "^8.0.0",
+    "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "util": "^0.12.5",