@ledgerhq/react-ui 0.34.0-nightly.2 → 0.34.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/cjs/pre-ldls/components/AccountItem/AccountItem.js +3 -29
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js +20 -42
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Checkbox/Checkbox.js +1 -4
- package/lib/cjs/pre-ldls/components/Checkbox/Checkbox.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.js +2 -3
- package/lib/cjs/pre-ldls/components/Tag/Tag.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.stories.js +1 -4
- package/lib/cjs/pre-ldls/components/Tag/Tag.stories.js.map +2 -2
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts +3 -7
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +6 -27
- package/lib/pre-ldls/components/AccountItem/AccountItem.js.map +1 -1
- package/lib/pre-ldls/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/lib/pre-ldls/components/Checkbox/Checkbox.js +1 -6
- package/lib/pre-ldls/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/pre-ldls/components/Tag/Tag.d.ts +1 -2
- package/lib/pre-ldls/components/Tag/Tag.d.ts.map +1 -1
- package/lib/pre-ldls/components/Tag/Tag.js +3 -3
- package/lib/pre-ldls/components/Tag/Tag.js.map +1 -1
- package/package.json +2 -2
|
@@ -33,24 +33,11 @@ __export(AccountItem_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(AccountItem_exports);
|
|
34
34
|
var import_react = __toESM(require("react"));
|
|
35
35
|
var import_styled_components = __toESM(require("styled-components"));
|
|
36
|
-
var import_assets = require("../../../assets");
|
|
37
36
|
var import_components = require("../../../components");
|
|
38
37
|
var import_libs = require("../../libs");
|
|
39
38
|
var import_Address = require("../Address/Address");
|
|
40
|
-
var import_Checkbox = require("../Checkbox/Checkbox");
|
|
41
39
|
var import_Tag = require("../Tag/Tag");
|
|
42
|
-
|
|
43
|
-
const IconButton = import_styled_components.default.button`
|
|
44
|
-
${(0, import_libs.withTokens)("colors-content-default-default")}
|
|
45
|
-
|
|
46
|
-
all: unset;
|
|
47
|
-
cursor: pointer;
|
|
48
|
-
display: inline-flex;
|
|
49
|
-
align-items: center;
|
|
50
|
-
justify-content: center;
|
|
51
|
-
height: ${ICON_BUTTONS_SIZE};
|
|
52
|
-
width: ${ICON_BUTTONS_SIZE};
|
|
53
|
-
`;
|
|
40
|
+
var import_Checkbox = require("../Checkbox/Checkbox");
|
|
54
41
|
const Wrapper = import_styled_components.default.div`
|
|
55
42
|
${(0, import_libs.withTokens)(
|
|
56
43
|
"spacing-xxxs",
|
|
@@ -146,7 +133,7 @@ const AccountItem = ({
|
|
|
146
133
|
backgroundColor
|
|
147
134
|
}) => {
|
|
148
135
|
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
149
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { backgroundColor, isClickable:
|
|
136
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick, backgroundColor, isClickable: !!onClick }, /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, /* @__PURE__ */ import_react.default.createElement(AccountInfoContainer, null, /* @__PURE__ */ import_react.default.createElement(NameRow, null, /* @__PURE__ */ import_react.default.createElement(NameDiv, null, /* @__PURE__ */ import_react.default.createElement(
|
|
150
137
|
import_components.Text,
|
|
151
138
|
{
|
|
152
139
|
variant: "largeLineHeight",
|
|
@@ -172,19 +159,6 @@ const AccountItem = ({
|
|
|
172
159
|
parentId,
|
|
173
160
|
showIcon
|
|
174
161
|
}
|
|
175
|
-
)), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, fiatValue && /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), balance && /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)), rightElement && rightElement.type === "checkbox" && /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { "data-testid": "right-element-checkbox"
|
|
176
|
-
IconButton,
|
|
177
|
-
{
|
|
178
|
-
"aria-label": "Edit account item",
|
|
179
|
-
"data-testid": "right-element-edit-icon",
|
|
180
|
-
onClick: (e) => {
|
|
181
|
-
e.stopPropagation();
|
|
182
|
-
if ((rightElement == null ? void 0 : rightElement.type) === "edit") {
|
|
183
|
-
rightElement.onClick();
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
},
|
|
187
|
-
/* @__PURE__ */ import_react.default.createElement(import_assets.Icons.PenEdit, { size: "S", color: "var(--colors-content-default-default)" })
|
|
188
|
-
)));
|
|
162
|
+
)), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, fiatValue && /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), balance && /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)), rightElement && rightElement.type === "checkbox" && /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { "data-testid": "right-element-checkbox" }, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.Checkbox, { ...rightElement.checkbox, size: 20 })), rightElement && rightElement.type === "arrow" && /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { "data-testid": "right-element-arrow-icon" }, /* @__PURE__ */ import_react.default.createElement(import_components.Icon, { name: "ChevronRight", size: 24 }))));
|
|
189
163
|
};
|
|
190
164
|
//# sourceMappingURL=AccountItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icon, Text, Flex } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport { Address } from \"../Address/Address\";\nimport { Tag } from \"../Tag/Tag\";\nimport type { CheckboxProps } from \"../Checkbox/Checkbox\";\nimport { Checkbox } from \"../Checkbox/Checkbox\";\n\nexport type Account = {\n address: string;\n balance?: string;\n cryptoId?: string;\n fiatValue?: string;\n id: string;\n name: string;\n parentId?: string;\n protocol?: string;\n ticker?: string;\n};\n\nexport type RightElementCheckbox = {\n type: \"checkbox\";\n checkbox: CheckboxProps;\n};\n\nexport type RightElementArrow = {\n type: \"arrow\";\n};\n\nexport type RightElement = RightElementCheckbox | RightElementArrow;\n\nexport type AccountItemProps = {\n onClick?: () => void;\n account: Account;\n rightElement?: RightElement;\n showIcon?: boolean;\n backgroundColor?: string;\n};\n\nconst Wrapper = styled.div<{ backgroundColor?: string; isClickable: boolean }>`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"margin-s\",\n \"radius-s\",\n \"radius-m\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n \"colors-surface-transparent-subdued-default\",\n )}\n\n display: flex;\n cursor: ${p => (p.isClickable ? \"pointer\" : \"default\")};\n justify-content: space-between;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n max-width: 100%;\n min-width: 200px;\n overflow: hidden;\n\n background-color: ${p => (p.backgroundColor ? p.backgroundColor : \"transparent\")};\n\n ${p =>\n p.isClickable\n ? `\n border-radius: var(--radius-m);\n padding: var(--margin-s);\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n `\n : \"\"}\n`;\n\nconst ContentContainer = styled.div`\n align-items: center;\n display: flex;\n flex: 1;\n gap: var(--spacing-xs);\n justify-content: space-between;\n min-width: 0;\n overflow: hidden;\n width: 100%;\n`;\n\nconst AccountInfoContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 0;\n flex: 1;\n overflow: hidden;\n`;\n\nconst NameRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: var(--spacing-xxxs);\n min-width: 0;\n width: 100%;\n`;\n\nconst NameDiv = styled.div`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n flex: 1;\n max-width: fit-content;\n`;\n\nconst TagWrapper = styled.div`\n flex-shrink: 0;\n margin-left: var(--spacing-xxs);\n display: flex;\n flex: 1;\n max-width: fit-content;\n align-items: center;\n`;\n\nconst BalanceContainer = styled.div`\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n text-align: right;\n`;\n\nexport const AccountItem = ({\n onClick,\n account,\n rightElement,\n showIcon = true,\n backgroundColor,\n}: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;\n\n return (\n <Wrapper onClick={onClick} backgroundColor={backgroundColor} isClickable={!!onClick}>\n <ContentContainer>\n <AccountInfoContainer>\n <NameRow>\n <NameDiv>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n fontSize=\"14px\"\n lineHeight=\"20px\"\n title={name}\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {name}\n </Text>\n </NameDiv>\n {protocol && (\n <TagWrapper>\n <Tag textTransform=\"uppercase\">{protocol}</Tag>\n </TagWrapper>\n )}\n </NameRow>\n <Address\n address={address}\n cryptoId={cryptoId}\n ticker={ticker}\n parentId={parentId}\n showIcon={showIcon}\n />\n </AccountInfoContainer>\n <BalanceContainer>\n {fiatValue && <Text fontSize=\"14px\">{fiatValue}</Text>}\n {balance && (\n <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n {balance}\n </Text>\n )}\n </BalanceContainer>\n {rightElement && rightElement.type === \"checkbox\" && (\n <Flex data-testid=\"right-element-checkbox\">\n <Checkbox {...rightElement.checkbox} size={20} />\n </Flex>\n )}\n {rightElement && rightElement.type === \"arrow\" && (\n <Flex data-testid=\"right-element-arrow-icon\">\n <Icon name=\"ChevronRight\" size={24} />\n </Flex>\n )}\n </ContentContainer>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -22,14 +22,13 @@ __export(AccountItem_stories_exports, {
|
|
|
22
22
|
TestAccount: () => TestAccount,
|
|
23
23
|
TestWithArrow: () => TestWithArrow,
|
|
24
24
|
TestWithCheckbox: () => TestWithCheckbox,
|
|
25
|
-
TestWithEdit: () => TestWithEdit,
|
|
26
25
|
TestWithoutAddressIcon: () => TestWithoutAddressIcon,
|
|
27
26
|
TestWithoutProtocol: () => TestWithoutProtocol,
|
|
28
27
|
default: () => AccountItem_stories_default
|
|
29
28
|
});
|
|
30
29
|
module.exports = __toCommonJS(AccountItem_stories_exports);
|
|
31
|
-
var import_test = require("@storybook/test");
|
|
32
30
|
var import_AccountItem = require("./AccountItem");
|
|
31
|
+
var import_test = require("@storybook/test");
|
|
33
32
|
const onClick = (0, import_test.fn)();
|
|
34
33
|
const meta = {
|
|
35
34
|
component: import_AccountItem.AccountItem,
|
|
@@ -38,12 +37,12 @@ const meta = {
|
|
|
38
37
|
args: {
|
|
39
38
|
onClick,
|
|
40
39
|
account: {
|
|
41
|
-
address: "n4A9...Zgty",
|
|
42
|
-
balance: "0.118 ETH",
|
|
43
|
-
cryptoId: "bitcoin",
|
|
44
|
-
fiatValue: "$5,969.83",
|
|
45
40
|
id: "12345",
|
|
41
|
+
cryptoId: "bitcoin",
|
|
46
42
|
name: "Main BTC",
|
|
43
|
+
balance: "0.118 ETH",
|
|
44
|
+
fiatValue: "$5,969.83",
|
|
45
|
+
address: "n4A9...Zgty",
|
|
47
46
|
ticker: "btc"
|
|
48
47
|
}
|
|
49
48
|
}
|
|
@@ -54,13 +53,13 @@ const TestAccount = {
|
|
|
54
53
|
args: {
|
|
55
54
|
onClick,
|
|
56
55
|
account: {
|
|
57
|
-
address: "n4A9...Zgty",
|
|
58
|
-
balance: "0.118 BTC",
|
|
59
|
-
cryptoId: "bitcoin",
|
|
60
|
-
fiatValue: "$5,969.83",
|
|
61
56
|
id: "12345",
|
|
57
|
+
cryptoId: "bitcoin",
|
|
62
58
|
name: "Main BTC",
|
|
59
|
+
balance: "0.118 BTC",
|
|
60
|
+
fiatValue: "$5,969.83",
|
|
63
61
|
protocol: "Native Segwit",
|
|
62
|
+
address: "n4A9...Zgty",
|
|
64
63
|
ticker: "btc"
|
|
65
64
|
}
|
|
66
65
|
},
|
|
@@ -85,12 +84,12 @@ const TestWithoutProtocol = {
|
|
|
85
84
|
args: {
|
|
86
85
|
onClick,
|
|
87
86
|
account: {
|
|
88
|
-
address: "n4A9...Zgty",
|
|
89
|
-
balance: "0.118 BTC",
|
|
90
|
-
cryptoId: "bitcoin",
|
|
91
|
-
fiatValue: "$5,969.83",
|
|
92
87
|
id: "21345",
|
|
88
|
+
cryptoId: "bitcoin",
|
|
93
89
|
name: "Main BTC",
|
|
90
|
+
balance: "0.118 BTC",
|
|
91
|
+
fiatValue: "$5,969.83",
|
|
92
|
+
address: "n4A9...Zgty",
|
|
94
93
|
ticker: "btc"
|
|
95
94
|
}
|
|
96
95
|
},
|
|
@@ -104,11 +103,11 @@ const TestWithoutAddressIcon = {
|
|
|
104
103
|
args: {
|
|
105
104
|
onClick,
|
|
106
105
|
account: {
|
|
107
|
-
|
|
106
|
+
id: "bitcoin",
|
|
107
|
+
name: "Main BTC",
|
|
108
108
|
balance: "0.118 BTC",
|
|
109
109
|
fiatValue: "$5,969.83",
|
|
110
|
-
|
|
111
|
-
name: "Main BTC"
|
|
110
|
+
address: "n4A9...Zgty"
|
|
112
111
|
},
|
|
113
112
|
showIcon: false
|
|
114
113
|
},
|
|
@@ -120,6 +119,7 @@ const TestWithoutAddressIcon = {
|
|
|
120
119
|
};
|
|
121
120
|
const TestWithCheckbox = {
|
|
122
121
|
args: {
|
|
122
|
+
onClick,
|
|
123
123
|
account: {
|
|
124
124
|
address: "n4A9...Zgty",
|
|
125
125
|
balance: "0.118",
|
|
@@ -129,14 +129,13 @@ const TestWithCheckbox = {
|
|
|
129
129
|
name: "Main BTC",
|
|
130
130
|
ticker: "btc"
|
|
131
131
|
},
|
|
132
|
-
onClick,
|
|
133
132
|
rightElement: {
|
|
134
133
|
type: "checkbox",
|
|
135
134
|
checkbox: {
|
|
136
135
|
isChecked: false,
|
|
137
|
-
name: "checkbox",
|
|
138
136
|
onChange: () => {
|
|
139
|
-
}
|
|
137
|
+
},
|
|
138
|
+
name: "checkbox"
|
|
140
139
|
}
|
|
141
140
|
}
|
|
142
141
|
},
|
|
@@ -148,6 +147,7 @@ const TestWithCheckbox = {
|
|
|
148
147
|
};
|
|
149
148
|
const TestWithArrow = {
|
|
150
149
|
args: {
|
|
150
|
+
onClick,
|
|
151
151
|
account: {
|
|
152
152
|
address: "n4A9...Zgty",
|
|
153
153
|
cryptoId: "bitcoin",
|
|
@@ -166,26 +166,4 @@ const TestWithArrow = {
|
|
|
166
166
|
await (0, import_test.expect)(arrowIcon).toBeInTheDocument();
|
|
167
167
|
}
|
|
168
168
|
};
|
|
169
|
-
const TestWithEdit = {
|
|
170
|
-
args: {
|
|
171
|
-
account: {
|
|
172
|
-
address: "n4A9...Zgty",
|
|
173
|
-
cryptoId: "bitcoin",
|
|
174
|
-
fiatValue: "$5,969.83",
|
|
175
|
-
id: "12345",
|
|
176
|
-
name: "Main BTC",
|
|
177
|
-
ticker: "btc"
|
|
178
|
-
},
|
|
179
|
-
onClick: void 0,
|
|
180
|
-
rightElement: {
|
|
181
|
-
type: "edit",
|
|
182
|
-
onClick
|
|
183
|
-
}
|
|
184
|
-
},
|
|
185
|
-
play: async ({ canvasElement }) => {
|
|
186
|
-
const canvas = (0, import_test.within)(canvasElement);
|
|
187
|
-
const arrowIcon = canvas.getByTestId("right-element-edit-icon");
|
|
188
|
-
await (0, import_test.expect)(arrowIcon).toBeInTheDocument();
|
|
189
|
-
}
|
|
190
|
-
};
|
|
191
169
|
//# sourceMappingURL=AccountItem.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AccountItem, AccountItemProps } from \"./AccountItem\";\nimport { expect, fn, within } from \"@storybook/test\";\n\nconst onClick = fn();\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\n onClick: onClick,\n account: {\n id: \"12345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 ETH\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n } satisfies AccountItemProps,\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AccountItem>;\n\nexport const Default: Story = {};\n\nexport const TestAccount: Story = {\n args: {\n onClick: onClick,\n account: {\n id: \"12345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n protocol: \"Native Segwit\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Main BTC\");\n const protocol = canvas.getByTestId(\"tag\");\n const address = canvas.getByText(\"n4A9...Zgty\");\n const addressIcon = canvas.getByRole(\"img\");\n const fiatValue = canvas.getByText(\"$5,969.83\");\n const balance = canvas.getByText(\"0.118 BTC\");\n\n await expect(name).toBeInTheDocument();\n await expect(protocol).toBeInTheDocument();\n await expect(protocol).toHaveTextContent(\"Native Segwit\");\n await expect(address).toBeInTheDocument();\n await expect(addressIcon).toBeInTheDocument();\n await expect(fiatValue).toBeInTheDocument();\n await expect(balance).toBeInTheDocument();\n },\n};\n\nexport const TestWithoutProtocol: Story = {\n args: {\n onClick: onClick,\n account: {\n id: \"21345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const protocol = canvas.queryByTestId(\"tag\");\n\n await expect(protocol).not.toBeInTheDocument();\n },\n};\n\nexport const TestWithoutAddressIcon: Story = {\n args: {\n onClick: onClick,\n account: {\n id: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n },\n showIcon: false,\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const addressIcon = canvas.queryByRole(\"img\");\n\n await expect(addressIcon).not.toBeInTheDocument();\n },\n};\n\nexport const TestWithCheckbox: Story = {\n args: {\n onClick: onClick,\n account: {\n address: \"n4A9...Zgty\",\n balance: \"0.118\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n rightElement: {\n type: \"checkbox\",\n checkbox: {\n isChecked: false,\n onChange: () => {},\n name: \"checkbox\",\n },\n },\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const arrowIcon = canvas.getByTestId(\"right-element-checkbox\");\n\n await expect(arrowIcon).toBeInTheDocument();\n },\n};\n\nexport const TestWithArrow: Story = {\n args: {\n onClick: onClick,\n account: {\n address: \"n4A9...Zgty\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n rightElement: {\n type: \"arrow\",\n },\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const arrowIcon = canvas.getByTestId(\"right-element-arrow-icon\");\n\n await expect(arrowIcon).toBeInTheDocument();\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Checkbox/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport CheckAloneMedium from \"@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport { withTokens } from \"../../libs\";\n\nconst Icon = () =>\n React.cloneElement(CheckAloneMedium({ size: 13, color: \"currentColor\" }), {\n // the xmlns attribute is required to properly display the checkbox\n xmlns: \"http://www.w3.org/2000/svg\",\n });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input<{ size?: number }>`\n background-color: transparent;\n\n border-radius: ${p => `${p.theme.radii[1]}px`};\n position: relative;\n\n min-width: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};\n height: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};\n appearance: none;\n border: 1px solid ${props => props.theme.colors.opacityDefault.c30};\n box-shadow: none;\n\n &:checked {\n background-color: currentColor;\n border-color: currentColor;\n }\n\n &:checked::after {\n content: \" \";\n width: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};\n height: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};\n display: inline-block;\n color: ${props => props.theme.colors.neutral.c00};\n\n background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n background-position: center;\n background-repeat: no-repeat;\n\n /* Trick to center the check mark by taking into account the border */\n position: absolute;\n top: -1px;\n left: -1px;\n }\n`;\n\nconst Container = styled.div`\n ${withTokens(\"colors-background-active\")}\n\n color: var(--colors-background-active);\n\n display: inline-flex;\n column-gap: ${p => p.theme.space[5]}px;\n align-items: center;\n cursor: pointer;\n`;\n\nexport type CheckboxProps = {\n isDisabled?: boolean;\n isChecked: boolean;\n name: string;\n onChange: (value: boolean) => void;\n size?: number;\n};\n\nexport const Checkbox = ({\n isDisabled = false,\n isChecked,\n name,\n onChange,\n size,\n}: CheckboxProps): JSX.Element => (\n <Container data-disabled={isDisabled}>\n <Input\n type=\"checkbox\"\n name={name}\n id={name}\n checked={isChecked}\n disabled={isDisabled}\n onChange={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,8BAA6B;AAC7B,oBAAqC;AACrC,kBAA2B;AAE3B,MAAM,OAAO,MACX,aAAAA,QAAM,iBAAa,wBAAAC,SAAiB,EAAE,MAAM,IAAI,OAAO,eAAe,CAAC,GAAG;AAAA;AAAA,EAExE,OAAO;AACT,CAAC;AACH,MAAM,gBAAgB,uBAAmB,oCAAqB,6BAAAD,QAAA,cAAC,UAAK,CAAE,CAAC;AAEvE,MAAM,QAAQ,yBAAAE,QAAO;AAAA;AAAA;AAAA,mBAGF,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA,eAGhC,OAAM,EAAE,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAK;AAAA,YAC1D,OAAM,EAAE,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAK;AAAA;AAAA,sBAE7C,WAAS,MAAM,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUvD,OAAM,EAAE,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAK;AAAA,cACtD,OAAM,EAAE,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAK;AAAA;AAAA,aAExD,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gDAEJ,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW7D,MAAM,YAAY,yBAAAA,QAAO;AAAA,QACrB,wBAAW,0BAA0B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAa9B,MAAM,WAAW,CAAC;AAAA,EACvB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6BAAAF,QAAA,cAAC,aAAU,iBAAe,cACxB,6BAAAA,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport CheckAloneMedium from \"@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport { withTokens } from \"../../libs\";\n\nconst Icon = () =>\n React.cloneElement(CheckAloneMedium({ size: 13, color: \"currentColor\" }), {\n // the xmlns attribute is required to properly display the checkbox\n xmlns: \"http://www.w3.org/2000/svg\",\n });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input<{ size?: number }>`\n background-color: transparent;\n\n border-radius: ${p => `${p.theme.radii[1]}px`};\n position: relative;\n\n min-width: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};\n height: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};\n appearance: none;\n border: 1px solid ${props => props.theme.colors.opacityDefault.c30};\n box-shadow: none;\n\n &:checked {\n background-color: currentColor;\n border-color: currentColor;\n }\n\n &:checked::after {\n content: \" \";\n width: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};\n height: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};\n display: inline-block;\n color: ${props => props.theme.colors.neutral.c00};\n\n background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n background-position: center;\n background-repeat: no-repeat;\n\n /* Trick to center the check mark by taking into account the border */\n position: absolute;\n top: -1px;\n left: -1px;\n }\n`;\n\nconst Container = styled.div`\n ${withTokens(\"colors-background-active\")}\n\n color: var(--colors-background-active);\n\n display: inline-flex;\n column-gap: ${p => p.theme.space[5]}px;\n align-items: center;\n cursor: pointer;\n`;\n\nexport type CheckboxProps = {\n isDisabled?: boolean;\n isChecked: boolean;\n name: string;\n onChange: (value: boolean) => void;\n size?: number;\n};\n\nexport const Checkbox = ({\n isDisabled = false,\n isChecked,\n name,\n onChange,\n size,\n}: CheckboxProps): JSX.Element => (\n <Container data-disabled={isDisabled}>\n <Input\n type=\"checkbox\"\n name={name}\n id={name}\n checked={isChecked}\n disabled={isDisabled}\n onChange={() => onChange(!isChecked)}\n size={size}\n />\n </Container>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,8BAA6B;AAC7B,oBAAqC;AACrC,kBAA2B;AAE3B,MAAM,OAAO,MACX,aAAAA,QAAM,iBAAa,wBAAAC,SAAiB,EAAE,MAAM,IAAI,OAAO,eAAe,CAAC,GAAG;AAAA;AAAA,EAExE,OAAO;AACT,CAAC;AACH,MAAM,gBAAgB,uBAAmB,oCAAqB,6BAAAD,QAAA,cAAC,UAAK,CAAE,CAAC;AAEvE,MAAM,QAAQ,yBAAAE,QAAO;AAAA;AAAA;AAAA,mBAGF,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA,eAGhC,OAAM,EAAE,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAK;AAAA,YAC1D,OAAM,EAAE,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAK;AAAA;AAAA,sBAE7C,WAAS,MAAM,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUvD,OAAM,EAAE,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAK;AAAA,cACtD,OAAM,EAAE,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAK;AAAA;AAAA,aAExD,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gDAEJ,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW7D,MAAM,YAAY,yBAAAA,QAAO;AAAA,QACrB,wBAAW,0BAA0B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAa9B,MAAM,WAAW,CAAC;AAAA,EACvB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6BAAAF,QAAA,cAAC,aAAU,iBAAe,cACxB,6BAAAA,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU,MAAM,SAAS,CAAC,SAAS;AAAA,IACnC;AAAA;AACF,CACF;",
|
|
6
6
|
"names": ["React", "CheckAloneMedium", "styled"]
|
|
7
7
|
}
|
|
@@ -43,7 +43,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
43
43
|
"spacing-xxxs"
|
|
44
44
|
)}
|
|
45
45
|
|
|
46
|
-
padding:
|
|
46
|
+
padding: 1px var(--spacing-xxxs);
|
|
47
47
|
border-radius: var(--radius-xs);
|
|
48
48
|
display: inline-flex;
|
|
49
49
|
background-color: var(--colors-surface-transparent-subdued-default);
|
|
@@ -51,10 +51,9 @@ const Wrapper = import_styled_components.default.div`
|
|
|
51
51
|
`;
|
|
52
52
|
const Tag = ({
|
|
53
53
|
textTransform = "none",
|
|
54
|
-
spacing = "sm",
|
|
55
54
|
children
|
|
56
55
|
}) => {
|
|
57
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { "data-testid": "tag"
|
|
56
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { "data-testid": "tag" }, /* @__PURE__ */ import_react.default.createElement(
|
|
58
57
|
import_components.Text,
|
|
59
58
|
{
|
|
60
59
|
color: "var(--colors-content-subdued-default-default)",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Tag/Tag.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n \"radius-xs\",\n \"spacing-xxxs\",\n )}\n\n padding: 1px var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n flex-shrink: 0;\n`;\n\nexport const Tag = ({\n textTransform = \"none\",\n children,\n}: {\n textTransform?: string;\n children: ReactNode;\n}) => {\n return (\n <Wrapper data-testid=\"tag\">\n <Text\n color=\"var(--colors-content-subdued-default-default)\"\n fontSize=\"10px\"\n lineHeight=\"16px\"\n textTransform={textTransform}\n >\n {children}\n </Text>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASI,MAAM,MAAM,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB;AACF,MAGM;AACJ,SACE,6BAAAC,QAAA,cAAC,WAAQ,eAAY,SACnB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX;AAAA;AAAA,IAEC;AAAA,EACH,CACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -20,7 +20,6 @@ var Tag_stories_exports = {};
|
|
|
20
20
|
__export(Tag_stories_exports, {
|
|
21
21
|
Default: () => Default,
|
|
22
22
|
TestTag: () => TestTag,
|
|
23
|
-
VariantMd: () => VariantMd,
|
|
24
23
|
default: () => Tag_stories_default
|
|
25
24
|
});
|
|
26
25
|
module.exports = __toCommonJS(Tag_stories_exports);
|
|
@@ -30,12 +29,10 @@ const meta = {
|
|
|
30
29
|
component: import_Tag.Tag,
|
|
31
30
|
title: "PreLdls/Components/Tag",
|
|
32
31
|
tags: ["autodocs"],
|
|
33
|
-
args: { children: "Native Segwit"
|
|
34
|
-
argTypes: { spacing: { control: "select", options: ["sm", "md"] } }
|
|
32
|
+
args: { children: "Native Segwit" }
|
|
35
33
|
};
|
|
36
34
|
var Tag_stories_default = meta;
|
|
37
35
|
const Default = {};
|
|
38
|
-
const VariantMd = { args: { spacing: "md" } };
|
|
39
36
|
const TestTag = {
|
|
40
37
|
play: async ({ canvasElement }) => {
|
|
41
38
|
const canvas = (0, import_test.within)(canvasElement);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Tag/Tag.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag\";\nimport { within, expect } from \"@storybook/test\";\n\nconst meta: Meta<typeof Tag> = {\n component: Tag,\n title: \"PreLdls/Components/Tag\",\n tags: [\"autodocs\"],\n args: { children: \"Native Segwit\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag\";\nimport { within, expect } from \"@storybook/test\";\n\nconst meta: Meta<typeof Tag> = {\n component: Tag,\n title: \"PreLdls/Components/Tag\",\n tags: [\"autodocs\"],\n args: { children: \"Native Segwit\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {};\n\nexport const TestTag: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n const input = canvas.getByTestId(\"tag\");\n await expect(input).toHaveTextContent(\"Native Segwit\");\n },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,kBAA+B;AAE/B,MAAM,OAAyB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,UAAU,gBAAgB;AACpC;AACA,IAAO,sBAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,UAAiB;AAAA,EAC5B,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,YAAY,KAAK;AACtC,cAAM,oBAAO,KAAK,EAAE,kBAAkB,eAAe;AAAA,EACvD;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,18 +11,14 @@ export type Account = {
|
|
|
11
11
|
protocol?: string;
|
|
12
12
|
ticker?: string;
|
|
13
13
|
};
|
|
14
|
-
export type RightElementArrow = {
|
|
15
|
-
type: "arrow";
|
|
16
|
-
};
|
|
17
14
|
export type RightElementCheckbox = {
|
|
18
15
|
type: "checkbox";
|
|
19
16
|
checkbox: CheckboxProps;
|
|
20
17
|
};
|
|
21
|
-
export type
|
|
22
|
-
type: "
|
|
23
|
-
onClick: () => void;
|
|
18
|
+
export type RightElementArrow = {
|
|
19
|
+
type: "arrow";
|
|
24
20
|
};
|
|
25
|
-
export type RightElement =
|
|
21
|
+
export type RightElement = RightElementCheckbox | RightElementArrow;
|
|
26
22
|
export type AccountItemProps = {
|
|
27
23
|
onClick?: () => void;
|
|
28
24
|
account: Account;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,MAAM,OAAO,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAEpE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAmGF,eAAO,MAAM,WAAW,mEAMrB,gBAAgB,sBA6DlB,CAAC"}
|
|
@@ -1,24 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import {
|
|
4
|
-
import { Flex, Icon, Text } from "../../../components";
|
|
3
|
+
import { Icon, Text, Flex } from "../../../components";
|
|
5
4
|
import { withTokens } from "../../libs";
|
|
6
5
|
import { Address } from "../Address/Address";
|
|
7
|
-
import { Checkbox } from "../Checkbox/Checkbox";
|
|
8
6
|
import { Tag } from "../Tag/Tag";
|
|
9
|
-
|
|
10
|
-
// TODO a proper IconButton component that handles hover and pressed states.
|
|
11
|
-
const IconButton = styled.button `
|
|
12
|
-
${withTokens("colors-content-default-default")}
|
|
13
|
-
|
|
14
|
-
all: unset;
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
display: inline-flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
justify-content: center;
|
|
19
|
-
height: ${ICON_BUTTONS_SIZE};
|
|
20
|
-
width: ${ICON_BUTTONS_SIZE};
|
|
21
|
-
`;
|
|
7
|
+
import { Checkbox } from "../Checkbox/Checkbox";
|
|
22
8
|
const Wrapper = styled.div `
|
|
23
9
|
${withTokens("spacing-xxxs", "spacing-xxs", "spacing-xs", "margin-s", "radius-s", "radius-m", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed", "colors-content-subdued-default-default", "colors-surface-transparent-subdued-default")}
|
|
24
10
|
|
|
@@ -98,7 +84,7 @@ const BalanceContainer = styled.div `
|
|
|
98
84
|
`;
|
|
99
85
|
export const AccountItem = ({ onClick, account, rightElement, showIcon = true, backgroundColor, }) => {
|
|
100
86
|
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
101
|
-
return (React.createElement(Wrapper, {
|
|
87
|
+
return (React.createElement(Wrapper, { onClick: onClick, backgroundColor: backgroundColor, isClickable: !!onClick },
|
|
102
88
|
React.createElement(ContentContainer, null,
|
|
103
89
|
React.createElement(AccountInfoContainer, null,
|
|
104
90
|
React.createElement(NameRow, null,
|
|
@@ -115,16 +101,9 @@ export const AccountItem = ({ onClick, account, rightElement, showIcon = true, b
|
|
|
115
101
|
React.createElement(BalanceContainer, null,
|
|
116
102
|
fiatValue && React.createElement(Text, { fontSize: "14px" }, fiatValue),
|
|
117
103
|
balance && (React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))),
|
|
118
|
-
rightElement && rightElement.type === "checkbox" && (React.createElement(Flex, { "data-testid": "right-element-checkbox"
|
|
104
|
+
rightElement && rightElement.type === "checkbox" && (React.createElement(Flex, { "data-testid": "right-element-checkbox" },
|
|
119
105
|
React.createElement(Checkbox, { ...rightElement.checkbox, size: 20 }))),
|
|
120
|
-
rightElement && rightElement.type === "arrow" && (React.createElement(Flex, { "data-testid": "right-element-arrow-icon"
|
|
121
|
-
React.createElement(Icon, { name: "ChevronRight", size: 24 })))
|
|
122
|
-
rightElement && rightElement.type === "edit" && (React.createElement(IconButton, { "aria-label": "Edit account item", "data-testid": "right-element-edit-icon", onClick: e => {
|
|
123
|
-
e.stopPropagation();
|
|
124
|
-
if (rightElement?.type === "edit") {
|
|
125
|
-
rightElement.onClick();
|
|
126
|
-
}
|
|
127
|
-
} },
|
|
128
|
-
React.createElement(Icons.PenEdit, { size: "S", color: "var(--colors-content-default-default)" }))))));
|
|
106
|
+
rightElement && rightElement.type === "arrow" && (React.createElement(Flex, { "data-testid": "right-element-arrow-icon" },
|
|
107
|
+
React.createElement(Icon, { name: "ChevronRight", size: 24 }))))));
|
|
129
108
|
};
|
|
130
109
|
//# sourceMappingURL=AccountItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AA2DA,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,QAAQ,qDAMlB,aAAa,KAAG,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AA2DA,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,QAAQ,qDAMlB,aAAa,KAAG,WAYlB,CAAC"}
|
|
@@ -53,10 +53,5 @@ const Container = styled.div `
|
|
|
53
53
|
cursor: pointer;
|
|
54
54
|
`;
|
|
55
55
|
export const Checkbox = ({ isDisabled = false, isChecked, name, onChange, size, }) => (React.createElement(Container, { "data-disabled": isDisabled },
|
|
56
|
-
React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled, onChange:
|
|
57
|
-
// TODO Checkbox should be an uncontrolled component that exposes the event onChange.
|
|
58
|
-
// (leave stopPropagation to the parent)
|
|
59
|
-
e.stopPropagation();
|
|
60
|
-
onChange(!isChecked);
|
|
61
|
-
}, size: size })));
|
|
56
|
+
React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled, onChange: () => onChange(!isChecked), size: size })));
|
|
62
57
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,gBAAgB,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,IAAI,GAAG,GAAG,EAAE,CAChB,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE;IACxE,mEAAmE;IACnE,KAAK,EAAE,4BAA4B;CACpC,CAAC,CAAC;AACL,MAAM,aAAa,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,oBAAC,IAAI,OAAG,CAAC,CAAC,CAAC;AAEzE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAmB;;;mBAG1B,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;;;eAGhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;sBAE7C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;;;;;;;;aAUvD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;cACtD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;aAExD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;gDAEJ,aAAa;;;;;;;;;CAS5D,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;IACxB,UAAU,CAAC,0BAA0B,CAAC;;;;;gBAK1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;CAGpC,CAAC;AAUF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,IAAI,GACU,EAAe,EAAE,CAAC,CAChC,oBAAC,SAAS,qBAAgB,UAAU;IAClC,oBAAC,KAAK,IACJ,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,gBAAgB,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,IAAI,GAAG,GAAG,EAAE,CAChB,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE;IACxE,mEAAmE;IACnE,KAAK,EAAE,4BAA4B;CACpC,CAAC,CAAC;AACL,MAAM,aAAa,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,oBAAC,IAAI,OAAG,CAAC,CAAC,CAAC;AAEzE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAmB;;;mBAG1B,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;;;eAGhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;sBAE7C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;;;;;;;;aAUvD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;cACtD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;aAExD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;gDAEJ,aAAa;;;;;;;;;CAS5D,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;IACxB,UAAU,CAAC,0BAA0B,CAAC;;;;;gBAK1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;CAGpC,CAAC;AAUF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,IAAI,GACU,EAAe,EAAE,CAAC,CAChC,oBAAC,SAAS,qBAAgB,UAAU;IAClC,oBAAC,KAAK,IACJ,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EACpC,IAAI,EAAE,IAAI,GACV,CACQ,CACb,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
|
-
export declare const Tag: ({ textTransform,
|
|
2
|
+
export declare const Tag: ({ textTransform, children, }: {
|
|
3
3
|
textTransform?: string | undefined;
|
|
4
|
-
spacing?: "sm" | "md" | undefined;
|
|
5
4
|
children: ReactNode;
|
|
6
5
|
}) => React.JSX.Element;
|
|
7
6
|
//# sourceMappingURL=Tag.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC,eAAO,MAAM,GAAG
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC,eAAO,MAAM,GAAG;;cAKJ,SAAS;uBAcpB,CAAC"}
|
|
@@ -5,14 +5,14 @@ import styled from "styled-components";
|
|
|
5
5
|
const Wrapper = styled.div `
|
|
6
6
|
${withTokens("colors-surface-transparent-subdued-default", "colors-content-subdued-default-default", "radius-xs", "spacing-xxxs")}
|
|
7
7
|
|
|
8
|
-
padding:
|
|
8
|
+
padding: 1px var(--spacing-xxxs);
|
|
9
9
|
border-radius: var(--radius-xs);
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
background-color: var(--colors-surface-transparent-subdued-default);
|
|
12
12
|
flex-shrink: 0;
|
|
13
13
|
`;
|
|
14
|
-
export const Tag = ({ textTransform = "none",
|
|
15
|
-
return (React.createElement(Wrapper, { "data-testid": "tag"
|
|
14
|
+
export const Tag = ({ textTransform = "none", children, }) => {
|
|
15
|
+
return (React.createElement(Wrapper, { "data-testid": "tag" },
|
|
16
16
|
React.createElement(Text, { color: "var(--colors-content-subdued-default-default)", fontSize: "10px", lineHeight: "16px", textTransform: textTransform }, children)));
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;;;;;;CAOF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,aAAa,GAAG,MAAM,EACtB,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO,mBAAa,KAAK;QACxB,oBAAC,IAAI,IACH,KAAK,EAAC,+CAA+C,EACrD,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACJ,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.34.0
|
|
3
|
+
"version": "0.34.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
78
|
"@ledgerhq/crypto-icons-ui": "^1.16.0",
|
|
79
|
-
"@ledgerhq/icons-ui": "^0.13.0
|
|
79
|
+
"@ledgerhq/icons-ui": "^0.13.0",
|
|
80
80
|
"@ledgerhq/ui-shared": "^0.3.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|