@ledgerhq/native-ui 0.21.0 → 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/Layout/List/VerticalStepper/StepperItem.js

@@ -46,8 +46,8 @@ export default function StepperItem({ item, progress, nested, isLastItem, onTapI
                         item.status === "completed" && React.createElement(CheckAloneMedium, { size: 20, color: "success.c50" }),
                         item.status === "active" && (React.createElement(ProgressLoader, { progress: progress, infinite: !progress, radius: 10, strokeWidth: 2 }))),
                     React.createElement(Flex, { flex: 1, ml: nested ? 0 : 4, mr: nested ? 0 : 2 },
-                        React.createElement(Flex, { pb: item.status === "active" && item.renderBody ? 4 : undefined },
-                            React.createElement(Text, { variant: "body", color: item.status === "active" || nested ? "neutral.c100" : "neutral.c80" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title)),
+                        React.createElement(Flex, { pb: item.status === "active" && item.renderBody ? 3 : undefined },
+                            React.createElement(Text, Object.assign({}, (nested ? { variant: "body" } : { variant: "large", fontWeight: "semiBold" }), { color: item.status === "active" || nested ? "neutral.c100" : "neutral.c80" }), item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title)),
                         React.createElement(Animated.ScrollView, { style: animatedStyle, showsVerticalScrollIndicator: false },
                             React.createElement(Animated.View, { onLayout: handleLayout }, item.renderBody && item.status === "active" ? item.renderBody(true) : null))))))));
 }

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js

@@ -32,7 +32,7 @@ const TopSegmentSvg = ({ status, hidden, height }) => {
     return (React.createElement(Flex, { height: height, width: "100%", overflow: "hidden" },
         React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
             React.createElement(Svg, { height: linesLength, width: linesWidth, viewBox: `0 0 ${linesWidth} ${linesLength}`, preserveAspectRatio: "xMinYMin slice" },
-                React.createElement(Line, { x1: "0", y1: "0", x2: "0", y2: "100", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray })))));
+                React.createElement(Line, { key: status + " " + hidden, x1: "0", y1: "0", x2: "0", y2: "100", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray })))));
 };
 const topSegmentDefaultHeight = Platform.OS === "android" ? 23 : 21; // difference due to how borders are drawn in android
 const BottomSegmentSvg = ({ status, hidden }) => {
@@ -42,7 +42,7 @@ const BottomSegmentSvg = ({ status, hidden }) => {
     return (React.createElement(Flex, { flex: 1, width: "100%", style: { transform: [{ scaleY: -1 }] }, overflow: "hidden" },
         React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
             React.createElement(Svg, { height: 2 * Dimensions.get("screen").height, width: linesWidth, viewBox: `0 0 ${linesWidth} ${linesLength}`, preserveAspectRatio: "xMinYMin slice" },
-                React.createElement(Line, { x1: "0", y1: "0", x2: "0", y2: "100%", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray, strokeDashoffset: `${dashLength}` })))));
+                React.createElement(Line, { key: status + " " + hidden, x1: "0", y1: "0", x2: "0", y2: "100%", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray, strokeDashoffset: `${dashLength}` })))));
 };
 const getIconBackground = (theme, status, isLastItem) => {
     if (isLastItem) {

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/ProgressBar/index.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { FlexBoxProps } from "../Layout/Flex";
+import { BaseStyledProps } from "../styled";
 export interface Props extends FlexBoxProps {
     /**
      * The index of the active step.
@@ -9,7 +10,11 @@ export interface Props extends FlexBoxProps {
      * The total number of steps.
      */
     length: number;
+    /**
+     * Style props for the bar element.
+     */
+    activeBarProps?: BaseStyledProps;
 }
-declare function ProgressBar({ index, length, ...props }: Props): JSX.Element;
+declare function ProgressBar({ index, length, activeBarProps, ...props }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ProgressBar>;
 export default _default;

package/lib/components/ProgressBar/index.js

@@ -13,8 +13,8 @@ import React from "react";
 import styled from "styled-components/native";
 import Flex from "../Layout/Flex";
 import Animated, { useDerivedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
-const ActiveBar = styled.View `
-  background-color: ${(p) => p.theme.colors.neutral.c100};
+import Box from "../Layout/Box";
+const ActiveBar = styled(Box) `
   position: absolute;
   height: 100%;
   top: 0;
@@ -22,12 +22,12 @@ const ActiveBar = styled.View `
 `;
 const AnimatedBar = Animated.createAnimatedComponent(ActiveBar);
 function ProgressBar(_a) {
-    var { index, length } = _a, props = __rest(_a, ["index", "length"]);
+    var { index, length, activeBarProps } = _a, props = __rest(_a, ["index", "length", "activeBarProps"]);
     const width = useDerivedValue(() => Math.round((index / (length - 1)) * 100), [index, length]);
     const animatedStyles = useAnimatedStyle(() => ({
         width: withTiming(`${width.value}%`),
     }));
     return (React.createElement(Flex, Object.assign({ height: 4, width: "100%", backgroundColor: "neutral.c20", position: "relative" }, props),
-        React.createElement(AnimatedBar, { style: [animatedStyles] })));
+        React.createElement(AnimatedBar, Object.assign({ style: [animatedStyles], bg: "neutral.c100" }, activeBarProps))));
 }
 export default React.memo(ProgressBar);

package/lib/components/Text/getTextStyle.js

@@ -63,7 +63,7 @@ export function getTextTypeStyle({ bracket }) {
         },
         bodyLineHeight: {
             fontFamily: "Inter",
-            lineHeight: "20px",
+            lineHeight: "21px",
         },
         paragraph: {
             fontFamily: "Inter",

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.0",
+  "version": "0.22.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
     "@ledgerhq/crypto-icons-ui": "^0.5.1",
-    "@ledgerhq/icons-ui": "^0.6.0",
+    "@ledgerhq/icons-ui": "^0.6.1",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {
@@ -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",
@@ -98,7 +98,7 @@
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/node": "^17.0.31",
+    "@types/node": "^18.0.0",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^17.0.53",
     "@types/react-native": "0.71.5",
@@ -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",