@ledgerhq/native-ui 0.36.0 → 0.37.0-nightly.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Layout/List/VerticalTimeline/TimelineItem.d.ts.map +1 -1
- package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js +2 -0
- package/lib/components/Layout/List/types.d.ts +1 -0
- package/lib/components/Layout/List/types.d.ts.map +1 -1
- package/lib/components/cta/QuickAction/QuickActionList/index.d.ts.map +1 -1
- package/lib/components/cta/QuickAction/QuickActionList/index.js +3 -6
- package/lib/pre-ldls/components/Input/Input.d.ts +11 -0
- package/lib/pre-ldls/components/Input/Input.d.ts.map +1 -0
- package/lib/pre-ldls/components/Input/Input.js +38 -0
- package/lib/pre-ldls/components/Input/Input.stories.d.ts +9 -0
- package/lib/pre-ldls/components/Input/Input.stories.d.ts.map +1 -0
- package/lib/pre-ldls/components/Input/Input.stories.js +32 -0
- package/lib/pre-ldls/components/index.d.ts +2 -0
- package/lib/pre-ldls/components/index.d.ts.map +1 -0
- package/lib/pre-ldls/components/index.js +1 -0
- package/lib/pre-ldls/index.d.ts +2 -0
- package/lib/pre-ldls/index.d.ts.map +1 -0
- package/lib/pre-ldls/index.js +1 -0
- package/lib/pre-ldls/libs/design-tokens.d.ts +776 -0
- package/lib/pre-ldls/libs/design-tokens.d.ts.map +1 -0
- package/lib/pre-ldls/libs/design-tokens.js +961 -0
- package/lib/pre-ldls/libs/index.d.ts +31 -0
- package/lib/pre-ldls/libs/index.d.ts.map +1 -0
- package/lib/pre-ldls/libs/index.js +51 -0
- package/package.json +23 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAE,IAAI,EAAc,MAAM,UAAU,CAAC;AAM5C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAE,IAAI,EAAc,MAAM,UAAU,CAAC;AAM5C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;AA+BF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,cAAc,EACd,KAAK,EACL,2BAA2B,GAC5B,EAAE,KAAK,qBAwFP"}
|
|
@@ -33,6 +33,7 @@ const Container = styled(Flex) `
|
|
|
33
33
|
background: ${(p) => getContainerBackground(p.theme, p.status)};
|
|
34
34
|
border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
35
35
|
padding: 20px 16px;
|
|
36
|
+
overflow: hidden;
|
|
36
37
|
`;
|
|
37
38
|
export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, }) {
|
|
38
39
|
const theme = useTheme();
|
|
@@ -64,6 +65,7 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
|
|
|
64
65
|
? TimelineIndicator.topSegmentDefaultHeight + theme.space[4]
|
|
65
66
|
: undefined }),
|
|
66
67
|
React.createElement(Container, { status: item.status, isLastItem: isLastItem, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
|
|
68
|
+
item.status === "active" ? item.background : null,
|
|
67
69
|
React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
|
|
68
70
|
React.createElement(Text, { variant: "body", fontWeight: item.status === "active" ? "semiBold" : "medium", flexShrink: 1, color: item.status === "completed" && isLastItem
|
|
69
71
|
? "success.c70"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/List/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,UAAU;IACpB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,IAAI,GAAG;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/List/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,UAAU;IACpB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,IAAI,GAAG;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,SAAS,CAAC;IAClD,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAQ,MAAM,cAAc,CAAC;AAE7D,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,eAAe,8DAOlB,oBAAoB,KAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAQ,MAAM,cAAc,CAAC;AAE7D,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,eAAe,8DAOlB,oBAAoB,KAAG,MAAM,YA0B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -3,14 +3,11 @@ import { FlatList, View } from "react-native";
|
|
|
3
3
|
import QuickActionButton from "../QuickActionButton";
|
|
4
4
|
const QuickActionList = ({ numColumns = 3, data, id, testID, isActive = false, ...otherProps }) => {
|
|
5
5
|
const renderItem = useCallback(({ item, index }) => {
|
|
6
|
-
const isNotLastColumn = (index + 1) % numColumns > 0;
|
|
7
|
-
const isNotLastItem = data && index !== data.length - 1;
|
|
8
|
-
const hasButtonToItsRight = isNotLastColumn && isNotLastItem;
|
|
9
6
|
const hasRowBelow = data?.length && index + numColumns < data.length;
|
|
10
|
-
const mr = hasButtonToItsRight ? 4 : 0;
|
|
11
7
|
const mb = hasRowBelow ? 4 : 0;
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
const mh = 6;
|
|
9
|
+
return (React.createElement(View, { style: { flex: 1, minHeight: 30, marginHorizontal: mh } },
|
|
10
|
+
React.createElement(QuickActionButton, { ...item, isActive: isActive, mb: mb, testID: testID })));
|
|
14
11
|
}, []);
|
|
15
12
|
return (React.createElement(FlatList, { ...otherProps, data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns }));
|
|
16
13
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TextInput } from "react-native";
|
|
3
|
+
export type IconProps = {
|
|
4
|
+
size?: "XS" | "S" | "M" | "L" | "XL" | "XXL";
|
|
5
|
+
color?: string;
|
|
6
|
+
style?: object;
|
|
7
|
+
};
|
|
8
|
+
export declare const Input: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
|
|
9
|
+
icon?: (({ size }: IconProps) => JSX.Element) | undefined;
|
|
10
|
+
} & React.RefAttributes<TextInput>>;
|
|
11
|
+
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAI/C,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkCF,eAAO,MAAM,KAAK;uBA/BE,SAAS,KAAK,WAAW;mCA2C3C,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { useContext } from "react";
|
|
2
|
+
import { TextInput, View } from "react-native";
|
|
3
|
+
import styled, { ThemeContext } from "styled-components/native";
|
|
4
|
+
import { useTokens } from "../../libs";
|
|
5
|
+
const Wrapper = styled(View) `
|
|
6
|
+
height: 40px;
|
|
7
|
+
min-width: 328px;
|
|
8
|
+
padding-horizontal: ${({ tokens }) => tokens["spacing-s"]}px;
|
|
9
|
+
align-items: center;
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
gap: ${({ tokens }) => tokens["spacing-xxs"]}px;
|
|
12
|
+
border-radius: ${({ tokens }) => tokens["radius-s"]}px;
|
|
13
|
+
background-color: ${({ tokens }) => tokens["colors-surface-transparent-subdued-default"]};
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
color: ${({ tokens }) => tokens["colors-content-subdued-default-default"]};
|
|
16
|
+
`;
|
|
17
|
+
const StyledInput = styled(TextInput) `
|
|
18
|
+
flex: 1;
|
|
19
|
+
background-color: transparent;
|
|
20
|
+
border-width: 0;
|
|
21
|
+
color: ${({ tokens }) => tokens["colors-content-subdued-default-default"]};
|
|
22
|
+
`;
|
|
23
|
+
const TOKEN_KEYS = [
|
|
24
|
+
"spacing-s",
|
|
25
|
+
"spacing-xxs",
|
|
26
|
+
"radius-s",
|
|
27
|
+
"colors-surface-transparent-subdued-default",
|
|
28
|
+
"colors-content-subdued-default-default",
|
|
29
|
+
];
|
|
30
|
+
export const Input = React.forwardRef(({ icon: Icon, ...props }, ref) => {
|
|
31
|
+
const theme = useContext(ThemeContext);
|
|
32
|
+
const themeType = theme?.colors?.type ?? "light";
|
|
33
|
+
const tokens = useTokens(themeType, [...TOKEN_KEYS]);
|
|
34
|
+
return (React.createElement(Wrapper, { tokens: tokens },
|
|
35
|
+
!!Icon && React.createElement(Icon, { color: String(tokens["colors-content-subdued-default-default"]) }),
|
|
36
|
+
React.createElement(StyledInput, { ...props, ref: ref, tokens: tokens })));
|
|
37
|
+
});
|
|
38
|
+
Input.displayName = "Input";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { Input } from "./Input";
|
|
3
|
+
declare const meta: Meta<typeof Input>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Input>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Search: Story;
|
|
8
|
+
export declare const WithInteraction: Story;
|
|
9
|
+
//# sourceMappingURL=Input.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAK5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { within, userEvent } from "@storybook/testing-library";
|
|
3
|
+
import { expect } from "@storybook/jest";
|
|
4
|
+
import { Icons } from "../../../assets";
|
|
5
|
+
import { Input } from "./Input";
|
|
6
|
+
const meta = {
|
|
7
|
+
component: Input,
|
|
8
|
+
title: "PreLdls/Components/Input",
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
args: {},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export const Default = {
|
|
14
|
+
args: {},
|
|
15
|
+
};
|
|
16
|
+
export const Search = {
|
|
17
|
+
args: {
|
|
18
|
+
placeholder: "Search",
|
|
19
|
+
icon: (props) => React.createElement(Icons.Search, { size: "S", ...props }),
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
// Interaction Testing
|
|
23
|
+
export const WithInteraction = {
|
|
24
|
+
args: {},
|
|
25
|
+
controls: { expanded: true },
|
|
26
|
+
play: async ({ canvasElement }) => {
|
|
27
|
+
const canvas = within(canvasElement);
|
|
28
|
+
const input = canvas.getByRole("textbox");
|
|
29
|
+
await userEvent.type(input, "Write something");
|
|
30
|
+
expect(input).toHaveValue("Write something");
|
|
31
|
+
},
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Input/Input";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pre-ldls/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./components";
|