@ledgerhq/native-ui 0.7.17-nightly.0 → 0.7.18-universal.0

package/lib/components/Layout/Modals/BaseModal/index.d.ts

@@ -6,6 +6,7 @@ export declare type BaseModalProps = {
     isOpen?: boolean;
     onClose?: () => void;
     modalStyle?: StyleProp<ViewStyle>;
+    safeContainerStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     preventBackdropClick?: boolean;
     Icon?: IconOrElementType;
@@ -17,4 +18,4 @@ export declare type BaseModalProps = {
     noCloseButton?: boolean;
 } & Partial<ModalProps>;
 export declare function ModalHeader({ Icon, iconColor, title, description, subtitle, }: Pick<BaseModalProps, "Icon" | "iconColor" | "title" | "description" | "subtitle">): React.ReactElement | null;
-export default function BaseModal({ isOpen, onClose, noCloseButton, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;
+export default function BaseModal({ isOpen, onClose, noCloseButton, safeContainerStyle, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;

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

@@ -13,12 +13,11 @@ import React from "react";
 import ReactNativeModal from "react-native-modal";
 import styled from "styled-components/native";
 import sizes from "../../../../helpers/getDeviceSize";
-import Link from "../../../cta/Link";
-import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import Text from "../../../Text";
 import { BoxedIcon } from "../../../Icon";
 import { Flex } from "../../index";
 import { space } from "styled-system";
+import { Icons } from "../../../../assets";
 const { width, height } = sizes;
 const SafeContainer = styled.SafeAreaView `
   background-color: ${(p) => p.theme.colors.background.main};
@@ -39,10 +38,11 @@ const CloseContainer = styled.View `
   margin-bottom: ${(p) => p.theme.space[7]}px;
 `;
 const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
-    p: 5,
-    m: -5,
+    p: 3,
 }) `
   ${space};
+  border-radius: 100px;
+  background-color: ${(p) => p.theme.colors.neutral.c30};
 `;
 const StyledTitle = styled(Text).attrs({ variant: "h2" }) `
   text-transform: uppercase;
@@ -69,7 +69,7 @@ export function ModalHeader({ Icon, iconColor, title, description, subtitle, })
         description && (React.createElement(Text, { variant: "body", color: "neutral.c70", textAlign: "center", mt: 6 }, description))));
 }
 export default function BaseModal(_a) {
-    var { isOpen, onClose = () => { }, noCloseButton, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
+    var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children"]);
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -78,11 +78,11 @@ export default function BaseModal(_a) {
             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] }),
-        React.createElement(SafeContainer, null,
+        React.createElement(SafeContainer, { style: safeContainerStyle },
             React.createElement(Container, { style: containerStyle },
                 !noCloseButton && (React.createElement(CloseContainer, null,
                     React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
-                        React.createElement(Link, { Icon: CloseMedium, onPress: onClose })))),
+                        React.createElement(Icons.CloseMedium, { color: "neutral.c100", size: "20px" })))),
                 React.createElement(ModalHeader, { Icon: Icon, iconColor: iconColor, title: title, description: description, subtitle: subtitle }),
                 React.createElement(ContentContainer, null, children)))));
 }

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

@@ -18,6 +18,10 @@ const modalStyleOverrides = StyleSheet.create({
         justifyContent: "flex-end",
         margin: 0,
     },
+    safeContainer: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
     container: {
         minHeight: 0,
         paddingLeft: 24,
@@ -25,9 +29,11 @@ const modalStyleOverrides = StyleSheet.create({
         paddingTop: 24,
         paddingBottom: 24,
         maxHeight: "100%",
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
     },
 });
 export default function BottomDrawer(_a) {
     var { children } = _a, restProps = __rest(_a, ["children"]);
-    return (React.createElement(BaseModal, Object.assign({}, restProps, { modalStyle: modalStyleOverrides.modal, containerStyle: modalStyleOverrides.container, propagateSwipe: true }), children));
+    return (React.createElement(BaseModal, Object.assign({}, restProps, { modalStyle: modalStyleOverrides.modal, safeContainerStyle: modalStyleOverrides.safeContainer, containerStyle: modalStyleOverrides.container, propagateSwipe: true }), children));
 }

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

@@ -5,6 +5,8 @@ export declare function getButtonColors(colors: Theme["colors"]): {
         primaryColor: string;
         secondaryColor: string;
         tertiaryColor?: string;
+        pressedColor?: string;
+        pressedOutlineColor?: string;
     };
 };
 export declare function getButtonColorStyle(colors: Theme["colors"], props: ButtonProps): {

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

@@ -2,7 +2,7 @@ export function getButtonColors(colors) {
     return {
         default: {
             primaryColor: colors.neutral.c100,
-            secondaryColor: "rgba(0,0,0,0)",
+            secondaryColor: "rgba(0,0,255,0)",
         },
         disabled: {
             primaryColor: colors.neutral.c50,
@@ -11,41 +11,43 @@ export function getButtonColors(colors) {
         main: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.neutral.c100,
+            pressedColor: colors.neutral.c100a06,
+            pressedOutlineColor: colors.neutral.c100a01,
         },
         shade: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.neutral.c100,
             tertiaryColor: colors.neutral.c40,
+            pressedColor: colors.neutral.c100a06,
+            pressedOutlineColor: colors.neutral.c100a01,
         },
         error: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.error.c100,
+            pressedColor: colors.error.c100a07,
+            pressedOutlineColor: colors.error.c100a025,
         },
         color: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.primary.c80,
+            pressedColor: colors.primary.c80a70,
+            pressedOutlineColor: colors.primary.c70a025,
         },
     };
 }
 export function getButtonColorStyle(colors, props) {
     const { outline, type = "main", disabled } = props;
-    const { primaryColor, secondaryColor, tertiaryColor } = getButtonColors(colors)[disabled ? "disabled" : type];
+    const { primaryColor, secondaryColor, tertiaryColor, pressedColor, pressedOutlineColor } = getButtonColors(colors)[disabled ? "disabled" : type];
     if (outline) {
         return {
             text: { color: disabled ? primaryColor : secondaryColor },
-            button: {
-                backgroundColor: "transparent",
-                borderColor: disabled ? primaryColor : tertiaryColor !== null && tertiaryColor !== void 0 ? tertiaryColor : secondaryColor,
-                borderWidth: 1,
-            },
+            button: Object.assign({ backgroundColor: "transparent", borderColor: disabled ? primaryColor : tertiaryColor !== null && tertiaryColor !== void 0 ? tertiaryColor : secondaryColor, borderWidth: 1 }, (pressedOutlineColor && { underlayColor: pressedOutlineColor })),
         };
     }
     else {
         return {
             text: { color: primaryColor },
-            button: {
-                backgroundColor: secondaryColor,
-            },
+            button: Object.assign({ backgroundColor: secondaryColor }, (pressedColor && { underlayColor: pressedColor })),
         };
     }
 }

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

@@ -1,8 +1,8 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import { TouchableHighlight, TouchableHighlightProps } from "react-native";
 import { BaseStyledProps } from "../../styled";
-export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
+export declare type ButtonProps = TouchableHighlightProps & BaseStyledProps & {
     Icon?: React.ComponentType<{
         size: number;
         color: string;
@@ -18,7 +18,7 @@ export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     pending?: boolean;
     displayContentWhenPending?: boolean;
 };
-export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
+export declare const Base: import("styled-components").StyledComponent<typeof TouchableHighlight, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;
     sizeVariant?: ButtonProps["size"];
 } & Omit<ButtonProps, "size">, never>;

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

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { useCallback, useState, useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
-import { ActivityIndicator, TouchableOpacity } from "react-native";
+import { ActivityIndicator, TouchableHighlight, View } from "react-native";
 import { buttonSizeStyle, getButtonColorStyle } from "../../cta/Button/getButtonStyle";
 import { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
 import Text from "../../Text";
@@ -18,7 +18,7 @@ import baseStyled from "../../styled";
 const IconContainer = styled.View `
   ${(p) => p.iconButton ? "" : p.iconPosition === "left" ? `margin-right: 10px;` : `margin-left: 10px;`}
 `;
-export const Base = baseStyled(TouchableOpacity).attrs((p) => (Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
+export const Base = baseStyled(TouchableHighlight).attrs((p) => (Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
     // Avoid conflict with styled-system's size property by nulling size and renaming it
     size: undefined, sizeVariant: p.size }))) `
 
@@ -71,10 +71,11 @@ const ButtonContainer = (props) => {
 const Button = (props) => {
     const { Icon, children, type = "default", iconName, disabled = false, pending = false, displayContentWhenPending = false, } = props;
     const theme = useTheme();
-    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, activeOpacity: 0.5, disabled: disabled || pending }),
-        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: pending && !displayContentWhenPending })),
-        pending && !displayContentWhenPending ? (React.createElement(SpinnerContainer, { displayContentWhenPending: displayContentWhenPending },
-            React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: true }))) : null));
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, activeOpacity: 1, disabled: disabled || pending }),
+        React.createElement(View, null,
+            React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: pending && !displayContentWhenPending })),
+            pending && !displayContentWhenPending ? (React.createElement(SpinnerContainer, { displayContentWhenPending: displayContentWhenPending },
+                React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: true }))) : null)));
 };
 export const PromisableButton = (props) => {
     const { Icon, children, onPress, type = "main", disabled = false, iconName } = props;
@@ -92,8 +93,9 @@ export const PromisableButton = (props) => {
         }
     }), [onPress]);
     return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
-        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: spinnerOn })),
-        React.createElement(SpinnerContainer, null,
-            React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: spinnerOn }))));
+        React.createElement(View, null,
+            React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: spinnerOn })),
+            React.createElement(SpinnerContainer, null,
+                React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: spinnerOn })))));
 };
 export default Button;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.17-nightly.0",
+  "version": "0.7.18-universal.0",
   "description": "Ledger Live - Mobile UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -25,8 +25,8 @@
     "lib/**/*"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.5-nightly.0",
-    "@ledgerhq/ui-shared": "^0.1.7-nightly.0",
+    "@ledgerhq/icons-ui": "^0.2.4",
+    "@ledgerhq/ui-shared": "^0.1.8-universal.0",
     "@types/color": "^3.0.3",
     "@types/react": "^17.0.39",
     "@types/react-native": "^0.65.9",
@@ -108,7 +108,7 @@
     "glob": "^7.2.0",
     "metro": "^0.67.0",
     "metro-config": "^0.67.0",
-    "metro-extra-config": "1.0.1-nightly.0",
+    "metro-extra-config": "1.0.0",
     "metro-minify-uglify": "^0.67.0",
     "metro-react-native-babel-preset": "^0.67.0",
     "metro-runtime": "^0.67.0",
@@ -135,7 +135,7 @@
     "build": "tsc -p tsconfig.prod.json && node scripts/postBuild",
     "prebuild:storybook": "pnpm -F ui-shared -F icons-ui build",
     "build:storybook": "pnpm build-storybook -o web-build",
-    "watch": "tsc --watch",
+    "watch": "tsc -p tsconfig.prod.json --watch",
     "clean": "rimraf lib",
     "eject": "expo eject",
     "ios": "expo start --ios",