@ledgerhq/native-ui 0.14.0 → 0.15.0-next.0

package/lib/components/Cards/{CardA → FullBackgroundCard}/index.d.ts

@@ -7,5 +7,5 @@ type Props = {
     onPress?: () => void;
     onDismiss?: () => void;
 };
-declare const CardA: ({ variant, backgroundImage, tag, description, onPress, onDismiss, }: Props) => React.ReactElement;
-export default CardA;
+declare const FullBackgroundCard: ({ variant, backgroundImage, tag, description, onPress, onDismiss, }: Props) => React.ReactElement;
+export default FullBackgroundCard;

package/lib/components/Cards/{CardA → FullBackgroundCard}/index.js

@@ -8,7 +8,7 @@ import ShadowGradient from "./ShadowGradient";
 const ImageContent = styled(Image) `
   border-radius: 8px;
 `;
-const CardA = ({ variant, backgroundImage, tag, description, onPress, onDismiss, }) => {
+const FullBackgroundCard = ({ variant, backgroundImage, tag, description, onPress, onDismiss, }) => {
     const { colors } = useTheme();
     const backgroundVariants = useMemo(() => ({
         purple: colors.primary.c80,
@@ -28,9 +28,9 @@ const CardA = ({ variant, backgroundImage, tag, description, onPress, onDismiss,
                 React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", mb: 3 },
                     React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "6px", maxWidth: "80%" },
                         React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)),
-                    React.createElement(TouchableOpacity, { onPress: onDismiss },
-                        React.createElement(Flex, { bg: "neutral.c30", top: -8, right: -8, p: "6px", borderRadius: 24 },
+                    React.createElement(TouchableOpacity, { onPress: onDismiss, style: { top: -8, right: -8 } },
+                        React.createElement(Flex, { bg: "neutral.c30", p: "6px", borderRadius: 24 },
                             React.createElement(Icon, { name: "Close", size: 12, color: "neutral.c100" })))),
                 description ? (React.createElement(Text, { variant: "h4", fontWeight: "semiBold", color: "neutral.c100", numberOfLines: 3, height: "84px", lineHeight: "28px" }, highlight(description, "h4"))) : null))));
 };
-export default CardA;
+export default FullBackgroundCard;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { TouchableOpacityProps } from "react-native";
+export type CardProps = TouchableOpacityProps & {
+    tag?: string;
+    title?: string;
+    imageUrl?: string;
+    onClickCard?: () => void;
+};
+declare const InformativeCard: (props: CardProps) => React.ReactElement;
+export default InformativeCard;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { TouchableOpacity, Image } from "react-native";
+import styled from "styled-components/native";
+import Text from "../../Text";
+import Flex from "../../Layout/Flex";
+const Base = styled(TouchableOpacity) ``;
+const ImageContent = styled(Image) `
+  border-radius: 8px;
+`;
+const CardContainer = (props) => {
+    const { imageUrl, title, tag } = props;
+    return (React.createElement(Flex, { flexDirection: "row" },
+        React.createElement(Flex, { justifyContent: "space-between", alignItems: "flex-start", py: 2, pr: 4, flex: 1 },
+            React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100", numberOfLines: 2 }, title),
+            React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c70", numberOfLines: 1, mt: 4 }, tag)),
+        React.createElement(Flex, { width: 100, height: 75 },
+            React.createElement(ImageContent, { source: {
+                    uri: imageUrl,
+                }, style: { width: "100%", height: "100%" } }))));
+};
+const InformativeCard = (props) => {
+    return (React.createElement(Base, Object.assign({}, props, { activeOpacity: 0.5, onPress: props.onClickCard }),
+        React.createElement(CardContainer, Object.assign({}, props))));
+};
+export default InformativeCard;

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

@@ -0,0 +1,17 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+import { TouchableOpacityProps, TouchableOpacity } from "react-native";
+export type CardProps = TouchableOpacityProps & {
+    tag?: string;
+    description?: string;
+    cta?: string;
+    link?: string;
+    time?: string;
+    title?: string;
+    onClickCard?: () => void;
+    showLinkCta: boolean;
+    viewed: boolean;
+};
+declare const NotificationCard: (props: CardProps) => React.ReactElement;
+export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+export default NotificationCard;

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

@@ -0,0 +1,36 @@
+import React, { useMemo } from "react";
+import { ExternalLinkMedium } from "@ledgerhq/icons-ui/native";
+import Text from "../../Text";
+import Flex from "../../Layout/Flex";
+import Box from "../../Layout/Box";
+import Link from "../../cta/Link";
+import styled from "styled-components/native";
+import { TouchableOpacity } from "react-native";
+const Tag = ({ tag }) => (React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "3px", maxWidth: "75%" },
+    React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)));
+const Timer = ({ time, viewed }) => (React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", ml: 2 },
+    React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, time),
+    React.createElement(Box, { ml: 3, backgroundColor: viewed ? "transparent" : "error.c80", height: "8px", width: "8px", borderRadius: 24 })));
+const NotificationCard = (props) => {
+    const { tag = "", time = "", title, description, cta, viewed, onClickCard, showLinkCta, link = "", } = props;
+    const ctaIcon = useMemo(() => {
+        const isDeepLink = link === null || link === void 0 ? void 0 : link.startsWith("ledgerlive:");
+        return link && isDeepLink ? undefined : () => React.createElement(ExternalLinkMedium, { color: "neutral.c100" });
+    }, [link]);
+    return (React.createElement(Base, { onPress: onClickCard, activeOpacity: link ? 0.5 : 1 },
+        React.createElement(Flex, { width: "100%", flexDirection: "column" },
+            React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
+                React.createElement(Tag, { tag: tag }),
+                React.createElement(Timer, { time: time, viewed: viewed })),
+            React.createElement(Text, { variant: "large", fontWeight: "semiBold", color: "neutral.c100", numberOfLines: 1, mt: 4 }, title),
+            React.createElement(Text, { variant: "bodyLineHeight", fontWeight: "medium", color: "neutral.c70", numberOfLines: 3, mt: 2, mb: showLinkCta ? 4 : 0 }, description),
+            !!showLinkCta && (React.createElement(Flex, { alignItems: "flex-start" },
+                React.createElement(Link, { type: "main", size: "medium", iconPosition: "right", Icon: ctaIcon, onPress: onClickCard, numberOfLines: 1 },
+                    React.createElement(StyledText, { variant: "bodyLineHeight", fontWeight: "semiBold", color: "neutral.c100", numberOfLines: 1 }, cta)))))));
+};
+export const Base = styled(TouchableOpacity) ``;
+const StyledText = styled(Text) `
+  text-decoration: underline;
+  text-decoration-color: ${(p) => p.theme.colors.neutral.c100};
+`;
+export default NotificationCard;

package/lib/components/Cards/{CardB → SideImageCard}/index.d.ts

@@ -28,5 +28,5 @@ export declare const ImageContainer: import("styled-components").StyledComponent
 export declare const ImageContent: import("styled-components").StyledComponent<typeof Image, import("styled-components").DefaultTheme, {}, never>;
 export declare const CloseContainer: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
 export declare const CloseButton: (props: CardProps) => JSX.Element;
-declare const CardB: (props: CardProps) => React.ReactElement;
-export default CardB;
+declare const SideImageCard: (props: CardProps) => React.ReactElement;
+export default SideImageCard;

package/lib/components/Cards/{CardB → SideImageCard}/index.js

@@ -57,8 +57,8 @@ const CardContainer = (props) => {
         React.createElement(TextComponent, Object.assign({}, props)),
         React.createElement(ImageComponent, { imageUrl: imageUrl, onPressDismiss: onPressDismiss })));
 };
-const CardB = (props) => {
+const SideImageCard = (props) => {
     return (React.createElement(Base, Object.assign({}, props, { activeOpacity: 0.5 }),
         React.createElement(CardContainer, Object.assign({}, props))));
 };
-export default CardB;
+export default SideImageCard;

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

@@ -1,2 +1,4 @@
-export { default as CardA } from "./CardA";
-export { default as CardB } from "./CardB";
+export { default as FullBackgroundCard } from "./FullBackgroundCard";
+export { default as SideImageCard } from "./SideImageCard";
+export { default as NotificationCard } from "./NotificationCard";
+export { default as InformativeCard } from "./InformativeCard";

package/lib/components/Cards/index.js

@@ -1,2 +1,4 @@
-export { default as CardA } from "./CardA";
-export { default as CardB } from "./CardB";
+export { default as FullBackgroundCard } from "./FullBackgroundCard";
+export { default as SideImageCard } from "./SideImageCard";
+export { default as NotificationCard } from "./NotificationCard";
+export { default as InformativeCard } from "./InformativeCard";

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

@@ -40,6 +40,7 @@ const Container = styled(Flex) `
   padding: 20px 16px;
 `;
 export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, }) {
+    var _a;
     /**
      * Having an initial value of null will prevent having "height: 0" before the
      * initial call of onLayout.
@@ -74,7 +75,7 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
                             ? "neutral.c80"
                             : isLastItem
                                 ? "success.c100"
-                                : "primary.c90" }, item.title),
+                                : "primary.c90" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title),
                     (item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, null, formatEstimatedTime
                         ? formatEstimatedTime(item.estimatedTime)
                         : `${item.estimatedTime / 60} min`))),

package/lib/components/Layout/List/VerticalTimeline/index.d.ts

@@ -8,6 +8,7 @@ export declare enum ItemStatus {
 export type Item = {
     status: ItemStatus;
     title: string;
+    doneTitle?: string;
     estimatedTime?: number;
     renderBody?: (isDisplayed?: boolean) => ReactNode;
 };

package/lib/components/Layout/Modals/BaseModal/index.js

@@ -82,7 +82,7 @@ export default function BaseModal(_a) {
             onBackButtonPress: onClose,
             onSwipeComplete: onClose,
         };
-    return (React.createElement(ReactNativeModal, Object.assign({}, rest, backDropProps, { isVisible: isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onClose, style: [defaultModalStyle, modalStyle] }),
+    return (React.createElement(ReactNativeModal, Object.assign({}, backDropProps, rest, { isVisible: isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onClose, style: [defaultModalStyle, modalStyle] }),
         React.createElement(SafeContainer, { style: safeContainerStyle },
             React.createElement(Container, { style: containerStyle },
                 !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.14.0",
+  "version": "0.15.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
     "@ledgerhq/crypto-icons-ui": "^0.2.1",
-    "@ledgerhq/icons-ui": "^0.3.3",
+    "@ledgerhq/icons-ui": "^0.3.4-next.0",
     "@ledgerhq/ui-shared": "^0.1.10"
   },
   "peerDependencies": {