@ledgerhq/native-ui 0.18.1-nightly.0 → 0.19.0-nightly.1

package/lib/components/message/Alert/index.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="styled-components-react-native" />
 import React from "react";
-type AlertType = "info" | "warning" | "error";
+type AlertType = "info" | "secondary" | "success" | "warning" | "error";
 export type IconProps = {
     size?: number;
     color?: string;
@@ -15,13 +16,18 @@ export interface AlertProps {
     title?: React.ReactNode;
     showIcon?: boolean;
     children?: React.ReactNode;
-    /**
-     * Alternative to using the `children` prop in order to render something using the value of `textColor`
-     * that is passed as a parameter.
-     */
-    renderContent?: ({ textColor }: {
-        textColor: string;
-    }) => React.ReactNode | null;
 }
-export default function Alert({ type, Icon, title, showIcon, children, renderContent, }: AlertProps): JSX.Element;
-export {};
+declare function Alert({ type, Icon, title, showIcon, children }: AlertProps): JSX.Element;
+declare namespace Alert {
+    var BodyText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+        flexShrink: 1;
+        variant: "bodyLineHeight";
+        fontWeight: "semiBold";
+    }, "fontWeight" | "variant" | "flexShrink">;
+    var UnderlinedText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+        flexShrink: 1;
+        variant: "bodyLineHeight";
+        fontWeight: "semiBold";
+    }, "fontWeight" | "variant" | "flexShrink">;
+}
+export default Alert;

package/lib/components/message/Alert/index.js

@@ -1,51 +1,72 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import InfoMedium from "@ledgerhq/icons-ui/native/InfoMedium";
-import CircledCrossMedium from "@ledgerhq/icons-ui/native/CircledCrossMedium";
-import CircledAlertMedium from "@ledgerhq/icons-ui/native/CircledAlertMedium";
+import InfoAltFillMedium from "@ledgerhq/icons-ui/native/InfoAltFillMedium";
+import CircledCheckSolidMedium from "@ledgerhq/icons-ui/native/CircledCheckSolidMedium";
+import WarningSolidMedium from "@ledgerhq/icons-ui/native/WarningSolidMedium";
+import CircledCrossSolidMedium from "@ledgerhq/icons-ui/native/CircledCrossSolidMedium";
 import Text from "../../Text";
-import { getColor } from "../../../styles";
 import FlexBox from "../../Layout/Flex";
+import { getColor } from "../../../styles";
 const icons = {
-    info: InfoMedium,
-    warning: CircledAlertMedium,
-    error: CircledCrossMedium,
+    info: InfoAltFillMedium,
+    secondary: InfoAltFillMedium,
+    success: CircledCheckSolidMedium,
+    warning: WarningSolidMedium,
+    error: CircledCrossSolidMedium,
 };
 const alertColors = {
     info: {
-        backgroundColor: "primary.c20",
-        color: "primary.c90",
+        backgroundColor: "primary.c10",
+        iconColor: "primary.c80",
+    },
+    secondary: {
+        backgroundColor: "opacityDefault.c05",
+        iconColor: "neutral.c80",
+    },
+    success: {
+        backgroundColor: "success.c10",
+        iconColor: "success.c50",
     },
     warning: {
-        backgroundColor: "warning.c20",
-        color: "warning.c90",
+        backgroundColor: "warning.c10",
+        iconColor: "warning.c70",
     },
     error: {
-        backgroundColor: "error.c20",
-        color: "error.c90",
+        backgroundColor: "error.c10",
+        iconColor: "error.c50",
     },
 };
-const StyledIconContainer = styled.View `
-  margin-right: 12px;
-  display: flex;
-  align-items: center;
-`;
+const StyledIconContainer = styled(FlexBox).attrs({
+    mr: 4,
+    alignItems: "center",
+}) ``;
 const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
     backgroundColor: alertColors[p.type || "info"].backgroundColor,
+    p: 6,
 })) `
   width: 100%;
-  border-radius: ${(p) => `${p.theme.radii[1]}px`};
-  padding: 16px;
+  border-radius: ${(p) => `${p.theme.radii[2]}px`};
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
+`;
+const AlertBodyText = styled(Text).attrs({
+    flexShrink: 1,
+    variant: "bodyLineHeight",
+    fontWeight: "semiBold",
+}) ``;
+const AlertUnderlinedText = styled(AlertBodyText) `
+  text-decoration-line: underline;
 `;
-export default function Alert({ type = "info", Icon, title, showIcon = true, children, renderContent, }) {
+function Alert({ type = "info", Icon, title, showIcon = true, children }) {
     const theme = useTheme();
-    const textColor = getColor(theme, alertColors[type || "info"].color);
-    const iconProps = { size: 20, color: textColor };
+    const textColor = "neutral.c100";
+    const IconComponent = Icon !== null && Icon !== void 0 ? Icon : icons[type];
     return (React.createElement(StyledAlertContainer, { type: type },
-        showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, Icon ? React.createElement(Icon, Object.assign({}, iconProps)) : icons[type || "info"](iconProps))),
-        title && (React.createElement(Text, { color: textColor, flexShrink: 1 }, title)),
-        children,
-        renderContent && renderContent({ textColor })));
+        showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null,
+            React.createElement(IconComponent, { size: 20, color: getColor(theme, alertColors[type || "info"].iconColor) }))),
+        title ? (React.createElement(Text, { color: textColor, flexShrink: 1, variant: "bodyLineHeight", fontWeight: "semiBold" }, title)) : null,
+        children));
 }
+Alert.BodyText = AlertBodyText;
+Alert.UnderlinedText = AlertUnderlinedText;
+export default Alert;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.18.1-nightly.0",
+  "version": "0.19.0-nightly.1",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",