@ledgerhq/native-ui 0.6.5 → 0.6.6

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

@@ -39,15 +39,9 @@ const CloseContainer = styled.View `
   align-items: flex-end;
   margin-bottom: ${(p) => p.theme.space[7]}px;
 `;
-const StyledTitle = styled(Text).attrs({ variant: "h3" }) `
+const StyledTitle = styled(Text).attrs({ variant: "h2" }) `
   text-transform: uppercase;
 `;
-const StyledDescription = styled(Text).attrs({
-    variant: "body",
-    color: "neutral.c80",
-}) `
-  margin-top: ${(p) => p.theme.space[2]}px;
-`;
 const StyledSubtitle = styled(Text).attrs({
     variant: "subtitle",
     color: "neutral.c80",
@@ -75,8 +69,8 @@ export default function BaseModal(_a) {
                 React.createElement(Link, { Icon: CloseMedium, onPress: onClose })),
             React.createElement(HeaderContainer, null,
                 Icon && (React.createElement(Flex, { mb: 7 }, React.isValidElement(Icon) ? (Icon) : (React.createElement(BoxedIcon, { size: 64, Icon: Icon, iconSize: 24, iconColor: iconColor })))),
-                subtitle && React.createElement(StyledSubtitle, null, subtitle),
-                title && React.createElement(StyledTitle, null, title),
-                description && React.createElement(StyledDescription, null, description)),
+                subtitle && React.createElement(StyledSubtitle, { textAlign: "center" }, subtitle),
+                title && React.createElement(StyledTitle, { textAlign: "center" }, title),
+                description && (React.createElement(Text, { variant: "body", color: "neutral.c70", textAlign: "center", mt: 6 }, description))),
             React.createElement(ContentContainer, null, children))));
 }

package/components/Tabs/Chip/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
-export declare const ChipTab: ({ onPress, isActive, label }: TabItemProps) => React.ReactElement;
+export declare const ChipTab: ({ onPress, isActive, label, disabled, }: TabItemProps) => React.ReactElement;
 declare const ChipTabs: (props: BaseTabsProps) => React.ReactElement;
 export default ChipTabs;

package/components/Tabs/Chip/index.js

@@ -12,8 +12,8 @@ const TabBox = styled(TouchableOpacity) `
   background-color: ${(p) => (p.isActive ? p.theme.colors.palette.primary.c20 : "transparent")};
 `;
 const StyledTabs = styled(TemplateTabs) ``;
-export const ChipTab = ({ onPress, isActive, label }) => {
-    return (React.createElement(TabBox, { isActive: isActive, onPress: onPress },
+export const ChipTab = ({ onPress, isActive, label, disabled, }) => {
+    return (React.createElement(TabBox, { isActive: isActive, onPress: onPress, disabled: disabled },
         React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: isActive ? "palette.neutral.c100" : "palette.neutral.c80", textAlign: "center" }, label)));
 };
 const ChipTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: ChipTab })));

package/components/Tabs/Graph/index.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
 import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
-export declare const GraphTab: ({ onPress, isActive, label, activeColor, activeBg, }: TabItemProps) => React.ReactElement;
-declare const GraphTabs: (props: BaseTabsProps) => React.ReactElement;
+declare type GraphTabSize = "small" | "medium";
+declare type GraphTabsProps = BaseTabsProps & {
+    size?: GraphTabSize;
+};
+declare type GraphTabItemProps = TabItemProps & {
+    size?: GraphTabSize;
+};
+export declare const GraphTab: ({ onPress, isActive, label, activeColor, activeBg, size, disabled, }: GraphTabItemProps) => React.ReactElement;
+declare const GraphTabs: (props: GraphTabsProps) => React.ReactElement;
 export default GraphTabs;

package/components/Tabs/Graph/index.js

@@ -3,25 +3,27 @@ import styled from "styled-components/native";
 import Text from "../../Text";
 import { TouchableOpacity } from "react-native";
 import TemplateTabs from "../TemplateTabs";
-const TabBbx = styled(TouchableOpacity) `
+const TabBox = styled(TouchableOpacity) `
   text-align: center;
   margin: auto;
   flex: 1;
 `;
-const TabText = styled(Text).attrs({
-    lineHeight: "48px",
+const TabText = styled(Text).attrs((p) => ({
+    // Avoid conflict with styled-system's size property by nulling size and renaming it
+    size: undefined,
+    lineHeight: p.size === "medium" ? "36px" : "26px",
     textAlign: "center",
     borderRadius: 48,
-    px: 24,
-    height: 48,
-}) ``;
+    px: p.theme.space[p.size === "medium" ? 7 : 6],
+    height: p.size === "medium" ? 36 : 26,
+})) ``;
 const StyledTabs = styled(TemplateTabs) `
   border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
   border-radius: 35px;
-  padding: 4px;
+  padding: ${(p) => `${p.theme.space[p.size === "medium" ? 2 : 1]}px`};
 `;
-export const GraphTab = ({ onPress, isActive, label, activeColor = "neutral.c100", activeBg = "primary.c20", }) => {
-    return (React.createElement(TabBbx, { onPress: onPress }, isActive ? (React.createElement(TabText, { variant: "body", bg: activeBg, color: activeColor, fontWeight: "semiBold" }, label)) : (React.createElement(TabText, { variant: "body" }, label))));
+export const GraphTab = ({ onPress, isActive, label, activeColor = "neutral.c100", activeBg = "primary.c20", size = "medium", disabled, }) => {
+    return (React.createElement(TabBox, { onPress: onPress, disabled: disabled }, isActive ? (React.createElement(TabText, { variant: "small", size: size, bg: activeBg, color: disabled ? "neutral.c70" : activeColor, fontWeight: "semiBold" }, label)) : (React.createElement(TabText, { variant: "small", size: size, color: disabled ? "neutral.c70" : "neutral.c90" }, label))));
 };
 const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));
 export default GraphTabs;

package/components/Tabs/TemplateTabs/index.d.ts

@@ -2,10 +2,11 @@
 import React from "react";
 export declare type BaseTabsProps = {
     labels: string[];
-    activeIndex: number;
+    activeIndex?: number;
     onChange: (newIndex: number) => void;
     activeColor?: string;
     activeBg?: string;
+    disabled?: boolean;
 };
 export declare type TabItemProps = Partial<BaseTabsProps> & {
     label: string;
@@ -14,6 +15,7 @@ export declare type TabItemProps = Partial<BaseTabsProps> & {
     onPress: () => void;
     activeColor?: string;
     activeBg?: string;
+    disabled?: boolean;
 };
 export declare type TabsProps = BaseTabsProps & {
     Item: (props: TabItemProps) => React.ReactElement;
@@ -28,8 +30,9 @@ export declare const TabsContainer: import("styled-components").StyledComponent<
     position?: string | undefined;
     maxHeight?: number | undefined;
 } & {
+    size: undefined;
     flexDirection: string;
     alignItems: string;
-}, "alignItems" | "flexDirection">;
+}, "size" | "alignItems" | "flexDirection">;
 declare const TemplateTabsGroup: (props: TabsProps) => React.ReactElement;
 export default TemplateTabsGroup;

package/components/Tabs/TemplateTabs/index.js

@@ -2,13 +2,15 @@ import React from "react";
 import styled from "styled-components/native";
 import FlexBox from "../../Layout/Flex";
 export const TabsContainer = styled(FlexBox).attrs({
+    // Avoid conflict with styled-system's size property by nulling size and renaming it
+    size: undefined,
     flexDirection: "row",
     alignItems: "stretch",
 }) `
   width: 100%;
 `;
 const TemplateTabsGroup = (props) => {
-    const { labels, activeIndex, onChange, Item, activeColor, activeBg } = props;
-    return (React.createElement(TabsContainer, Object.assign({}, props), labels.map((label, index) => (React.createElement(Item, Object.assign({ key: index }, props, { label: label, index: index, isActive: index === activeIndex, onPress: () => onChange(index), activeColor: activeColor, activeBg: activeBg }))))));
+    const { labels, activeIndex, onChange, Item } = props;
+    return (React.createElement(TabsContainer, Object.assign({}, props), labels.map((label, index) => (React.createElement(Item, Object.assign({ key: index }, props, { label: label, index: index, isActive: index === activeIndex, onPress: () => onChange(index) }))))));
 };
 export default TemplateTabsGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",