@ledgerhq/native-ui 0.7.13 → 0.7.16

package/components/Text/getTextStyle.js

@@ -3,6 +3,7 @@ const bracketSizes = {
     h2: 28,
     h3: 20,
     h4: 18,
+    h5: 18,
     large: 20,
     body: 20,
     bodyLineHeight: 20,
@@ -37,7 +38,9 @@ export function getTextTypeStyle({ bracket }) {
         },
         h4: {
             fontFamily: "Inter",
-            textTransform: "uppercase",
+        },
+        h5: {
+            fontFamily: "Inter",
         },
         large: {
             fontFamily: "Inter",

package/components/message/Log/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { BaseTextProps as TextProps } from "../../Text";
 import { FlexBoxProps } from "../../Layout/Flex";
 export declare type Props = React.PropsWithChildren<FlexBoxProps & {
-    extraTextProps?: TextProps;
+    extraTextProps?: Omit<TextProps, "children">;
 }>;
 declare function Log({ children, extraTextProps }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Log>;

package/components/message/Notification/index.js

@@ -6,6 +6,7 @@ import Text from "../../Text";
 import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 import { Flex } from "../../Layout";
 import { space } from "styled-system";
+import { ExternalLinkMedium } from "@ledgerhq/icons-ui/native";
 const NotificationContainer = styled.View `
   display: flex;
   width: 100%;
@@ -35,7 +36,9 @@ export default function Notification({ Icon, iconColor, variant = "primary", num
             !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: variant === "primary" ? colors.neutral.c00 : colors.neutral.c80, mt: 2 }, subtitle)),
             linkText && onLinkPress && (React.createElement(Flex, { mt: 3 },
                 React.createElement(TouchableOpacity, { onPress: onLinkPress },
-                    React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: textColor }, linkText))))),
+                    React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: textColor, mr: 3 }, linkText),
+                        React.createElement(ExternalLinkMedium, { size: 16, color: textColor })))))),
         onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
             React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
                 React.createElement(CloseMedium, { size: 14, color: textColor }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.13",
+  "version": "0.7.16",
   "description": "Ledger Live - React Native UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,7 +15,7 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.3",
+    "@ledgerhq/icons-ui": "^0.2.4",
     "@ledgerhq/ui-shared": "^0.1.6",
     "@types/color": "^3.0.2",
     "@types/react": "^17.0.37",

package/styles/theme.d.ts

@@ -1,6 +1,6 @@
 import { ColorPalette } from "@ledgerhq/ui-shared";
 export declare const space: number[];
-export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "large" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny";
+export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "large" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny";
 export declare type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
 export declare const fontSizes: ThemeScale<number, TextVariants>;
 export declare const radii: number[];

package/styles/theme.js

@@ -16,7 +16,8 @@ export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
 ] = fontSizes;
 fontSizes.bodyLineHeight = fontSizes.body;
 fontSizes.paragraphLineHeight = fontSizes.paragraph;
-fontSizes.h4 = fontSizes.h3;
+fontSizes.h4 = fontSizes.h2;
+fontSizes.h5 = fontSizes.h3;
 export const radii = [0, 4, 8];
 export const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];
 const theme = {