@ledgerhq/native-ui 0.8.3-next.0 → 0.8.4-nightly.0

package/lib/components/Text/getTextStyle.d.ts

@@ -1,6 +1,7 @@
 import { TextVariants } from "../../styles/theme";
 import { BaseTextProps } from "./index";
 export declare type FontWeightTypes = "medium" | "semiBold" | "bold";
+export declare const fontWeightTypes: FontWeightTypes[];
 export declare function getBracketSize({ variant }: {
     variant?: TextVariants;
 }): number;
@@ -11,6 +12,7 @@ export declare function getTextTypeStyle({ bracket }: {
     lineHeight?: string;
     paddingTop?: number;
     textTransform?: string;
+    letterSpacing?: number;
 }>;
 export declare function getTextStyle({ variant, bracket, fontWeight, }: Partial<BaseTextProps>): {
     fontFamily: string;

package/lib/components/Text/getTextStyle.js

@@ -1,5 +1,7 @@
+export const fontWeightTypes = ["medium", "semiBold", "bold"];
 const bracketSizes = {
     h1: 32,
+    h1Inter: 32,
     h2: 28,
     h3: 20,
     h4: 18,
@@ -24,6 +26,11 @@ export function getTextTypeStyle({ bracket }) {
             paddingTop: bracket ? 5 : 0,
             textTransform: "uppercase",
         },
+        h1Inter: {
+            fontFamily: "Inter",
+            lineHeight: "42px",
+            letterSpacing: -1,
+        },
         h2: {
             fontFamily: "Alpha",
             lineHeight: "28px",

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

@@ -1,8 +1,8 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TouchableHighlight, TouchableHighlightProps } from "react-native";
+import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 import { BaseStyledProps } from "../../styled";
-export declare type ButtonProps = TouchableHighlightProps & BaseStyledProps & {
+export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     Icon?: React.ComponentType<{
         size: number;
         color: string;
@@ -18,7 +18,7 @@ export declare type ButtonProps = TouchableHighlightProps & BaseStyledProps & {
     pending?: boolean;
     displayContentWhenPending?: boolean;
 };
-export declare const Base: import("styled-components").StyledComponent<typeof TouchableHighlight, import("styled-components").DefaultTheme, {
+export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, 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, TouchableHighlight, View } from "react-native";
+import { ActivityIndicator, TouchableOpacity, 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(TouchableHighlight).attrs((p) => (Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
+export const Base = baseStyled(TouchableOpacity).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 }))) `
 

package/lib/styles/theme.d.ts

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

package/lib/styles/theme.js

@@ -1,8 +1,24 @@
 import { palettes } from "@ledgerhq/ui-shared";
 //                    0  1  2  3  4   5   6   7   8   9   10  11  12  13  14
 export const space = [0, 2, 4, 8, 12, 14, 16, 24, 32, 40, 48, 64, 80, 96, 120];
-//                        0   1   2   3   4   5   6   7   8
-export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
+export const textVariants = [
+    "h1",
+    "h1Inter",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "large",
+    "body",
+    "bodyLineHeight",
+    "paragraph",
+    "paragraphLineHeight",
+    "small",
+    "subtitle",
+    "tiny",
+];
+//                        0   1   2   3   4   5   6   7   8   9
+export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28, 32];
 [
     fontSizes.tiny,
     fontSizes.subtitle,
@@ -13,6 +29,7 @@ export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28];
     fontSizes.h3,
     fontSizes.h2,
     fontSizes.h1,
+    fontSizes.h1Inter,
 ] = fontSizes;
 fontSizes.bodyLineHeight = fontSizes.body;
 fontSizes.paragraphLineHeight = fontSizes.paragraph;

package/package.json

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