@ledgerhq/react-ui 0.33.0 → 0.34.0-nightly.1
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 +29 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js +42 -20
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Checkbox/Checkbox.js +109 -0
- package/lib/cjs/pre-ldls/components/Checkbox/Checkbox.js.map +7 -0
- package/lib/cjs/pre-ldls/components/Checkbox/Checkbox.stories.js +33 -0
- package/lib/cjs/pre-ldls/components/Checkbox/Checkbox.stories.js.map +7 -0
- package/lib/cjs/pre-ldls/components/TextInput/TextInput.js +226 -0
- package/lib/cjs/pre-ldls/components/TextInput/TextInput.js.map +7 -0
- package/lib/cjs/pre-ldls/components/TextInput/TextInput.stories.js +93 -0
- package/lib/cjs/pre-ldls/components/TextInput/TextInput.stories.js.map +7 -0
- package/lib/cjs/pre-ldls/components/index.js +1 -0
- package/lib/cjs/pre-ldls/components/index.js.map +2 -2
- package/lib/cjs/pre-ldls/libs/index.js +4 -2
- package/lib/cjs/pre-ldls/libs/index.js.map +2 -2
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts +8 -4
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +27 -5
- package/lib/pre-ldls/components/AccountItem/AccountItem.js.map +1 -1
- package/lib/pre-ldls/components/Checkbox/Checkbox.d.ts +10 -0
- package/lib/pre-ldls/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/lib/pre-ldls/components/Checkbox/Checkbox.js +62 -0
- package/lib/pre-ldls/components/Checkbox/Checkbox.js.map +1 -0
- package/lib/pre-ldls/components/TextInput/TextInput.d.ts +20 -0
- package/lib/pre-ldls/components/TextInput/TextInput.d.ts.map +1 -0
- package/lib/pre-ldls/components/TextInput/TextInput.js +159 -0
- package/lib/pre-ldls/components/TextInput/TextInput.js.map +1 -0
- package/lib/pre-ldls/components/index.d.ts +1 -0
- package/lib/pre-ldls/components/index.d.ts.map +1 -1
- package/lib/pre-ldls/components/index.js +1 -0
- package/lib/pre-ldls/components/index.js.map +1 -1
- package/lib/pre-ldls/libs/index.d.ts +2 -0
- package/lib/pre-ldls/libs/index.d.ts.map +1 -1
- package/lib/pre-ldls/libs/index.js +2 -0
- package/lib/pre-ldls/libs/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -33,10 +33,24 @@ __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");
|
|
36
37
|
var import_components = require("../../../components");
|
|
37
38
|
var import_libs = require("../../libs");
|
|
38
39
|
var import_Address = require("../Address/Address");
|
|
40
|
+
var import_Checkbox = require("../Checkbox/Checkbox");
|
|
39
41
|
var import_Tag = require("../Tag/Tag");
|
|
42
|
+
const ICON_BUTTONS_SIZE = "32px";
|
|
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
54
|
const Wrapper = import_styled_components.default.div`
|
|
41
55
|
${(0, import_libs.withTokens)(
|
|
42
56
|
"spacing-xxxs",
|
|
@@ -132,7 +146,7 @@ const AccountItem = ({
|
|
|
132
146
|
backgroundColor
|
|
133
147
|
}) => {
|
|
134
148
|
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
135
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, {
|
|
149
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { backgroundColor, isClickable: Boolean(onClick), 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(
|
|
136
150
|
import_components.Text,
|
|
137
151
|
{
|
|
138
152
|
variant: "largeLineHeight",
|
|
@@ -158,6 +172,19 @@ const AccountItem = ({
|
|
|
158
172
|
parentId,
|
|
159
173
|
showIcon
|
|
160
174
|
}
|
|
161
|
-
)), /* @__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(
|
|
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", "aria-label": "Checkbox account item" }, /* @__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", "aria-label": "Arrow account item" }, /* @__PURE__ */ import_react.default.createElement(import_components.Icon, { name: "ChevronRight", size: 24 })), rightElement && rightElement.type === "edit" && /* @__PURE__ */ import_react.default.createElement(
|
|
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
189
|
};
|
|
163
190
|
//# 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;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\nimport { Flex, Icon, Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport { Address } from \"../Address/Address\";\nimport type { CheckboxProps } from \"../Checkbox/Checkbox\";\nimport { Checkbox } from \"../Checkbox/Checkbox\";\nimport { Tag } from \"../Tag/Tag\";\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 RightElementArrow = {\n type: \"arrow\";\n};\n\nexport type RightElementCheckbox = {\n type: \"checkbox\";\n checkbox: CheckboxProps;\n};\n\nexport type RightElementEdit = {\n type: \"edit\";\n onClick: () => void;\n};\n\nexport type RightElement = RightElementArrow | RightElementCheckbox | RightElementEdit;\n\nexport type AccountItemProps = {\n onClick?: () => void;\n account: Account;\n rightElement?: RightElement;\n showIcon?: boolean;\n backgroundColor?: string;\n};\n\nconst ICON_BUTTONS_SIZE = \"32px\";\n\n// TODO a proper IconButton component that handles hover and pressed states.\nconst IconButton = styled.button`\n ${withTokens(\"colors-content-default-default\")}\n\n all: unset;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ${ICON_BUTTONS_SIZE};\n width: ${ICON_BUTTONS_SIZE};\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 backgroundColor={backgroundColor} isClickable={Boolean(onClick)} onClick={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\" aria-label=\"Checkbox account item\">\n <Checkbox {...rightElement.checkbox} size={20} />\n </Flex>\n )}\n {rightElement && rightElement.type === \"arrow\" && (\n <Flex data-testid=\"right-element-arrow-icon\" aria-label=\"Arrow account item\">\n <Icon name=\"ChevronRight\" size={24} />\n </Flex>\n )}\n {rightElement && rightElement.type === \"edit\" && (\n <IconButton\n aria-label=\"Edit account item\"\n data-testid=\"right-element-edit-icon\"\n onClick={e => {\n e.stopPropagation();\n if (rightElement?.type === \"edit\") {\n rightElement.onClick();\n }\n }}\n >\n <Icons.PenEdit size=\"S\" color=\"var(--colors-content-default-default)\" />\n </IconButton>\n )}\n </ContentContainer>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -22,13 +22,14 @@ __export(AccountItem_stories_exports, {
|
|
|
22
22
|
TestAccount: () => TestAccount,
|
|
23
23
|
TestWithArrow: () => TestWithArrow,
|
|
24
24
|
TestWithCheckbox: () => TestWithCheckbox,
|
|
25
|
+
TestWithEdit: () => TestWithEdit,
|
|
25
26
|
TestWithoutAddressIcon: () => TestWithoutAddressIcon,
|
|
26
27
|
TestWithoutProtocol: () => TestWithoutProtocol,
|
|
27
28
|
default: () => AccountItem_stories_default
|
|
28
29
|
});
|
|
29
30
|
module.exports = __toCommonJS(AccountItem_stories_exports);
|
|
30
|
-
var import_AccountItem = require("./AccountItem");
|
|
31
31
|
var import_test = require("@storybook/test");
|
|
32
|
+
var import_AccountItem = require("./AccountItem");
|
|
32
33
|
const onClick = (0, import_test.fn)();
|
|
33
34
|
const meta = {
|
|
34
35
|
component: import_AccountItem.AccountItem,
|
|
@@ -37,12 +38,12 @@ const meta = {
|
|
|
37
38
|
args: {
|
|
38
39
|
onClick,
|
|
39
40
|
account: {
|
|
40
|
-
|
|
41
|
-
cryptoId: "bitcoin",
|
|
42
|
-
name: "Main BTC",
|
|
41
|
+
address: "n4A9...Zgty",
|
|
43
42
|
balance: "0.118 ETH",
|
|
43
|
+
cryptoId: "bitcoin",
|
|
44
44
|
fiatValue: "$5,969.83",
|
|
45
|
-
|
|
45
|
+
id: "12345",
|
|
46
|
+
name: "Main BTC",
|
|
46
47
|
ticker: "btc"
|
|
47
48
|
}
|
|
48
49
|
}
|
|
@@ -53,13 +54,13 @@ const TestAccount = {
|
|
|
53
54
|
args: {
|
|
54
55
|
onClick,
|
|
55
56
|
account: {
|
|
56
|
-
|
|
57
|
-
cryptoId: "bitcoin",
|
|
58
|
-
name: "Main BTC",
|
|
57
|
+
address: "n4A9...Zgty",
|
|
59
58
|
balance: "0.118 BTC",
|
|
59
|
+
cryptoId: "bitcoin",
|
|
60
60
|
fiatValue: "$5,969.83",
|
|
61
|
+
id: "12345",
|
|
62
|
+
name: "Main BTC",
|
|
61
63
|
protocol: "Native Segwit",
|
|
62
|
-
address: "n4A9...Zgty",
|
|
63
64
|
ticker: "btc"
|
|
64
65
|
}
|
|
65
66
|
},
|
|
@@ -84,12 +85,12 @@ const TestWithoutProtocol = {
|
|
|
84
85
|
args: {
|
|
85
86
|
onClick,
|
|
86
87
|
account: {
|
|
87
|
-
|
|
88
|
-
cryptoId: "bitcoin",
|
|
89
|
-
name: "Main BTC",
|
|
88
|
+
address: "n4A9...Zgty",
|
|
90
89
|
balance: "0.118 BTC",
|
|
90
|
+
cryptoId: "bitcoin",
|
|
91
91
|
fiatValue: "$5,969.83",
|
|
92
|
-
|
|
92
|
+
id: "21345",
|
|
93
|
+
name: "Main BTC",
|
|
93
94
|
ticker: "btc"
|
|
94
95
|
}
|
|
95
96
|
},
|
|
@@ -103,11 +104,11 @@ const TestWithoutAddressIcon = {
|
|
|
103
104
|
args: {
|
|
104
105
|
onClick,
|
|
105
106
|
account: {
|
|
106
|
-
|
|
107
|
-
name: "Main BTC",
|
|
107
|
+
address: "n4A9...Zgty",
|
|
108
108
|
balance: "0.118 BTC",
|
|
109
109
|
fiatValue: "$5,969.83",
|
|
110
|
-
|
|
110
|
+
id: "bitcoin",
|
|
111
|
+
name: "Main BTC"
|
|
111
112
|
},
|
|
112
113
|
showIcon: false
|
|
113
114
|
},
|
|
@@ -119,7 +120,6 @@ const TestWithoutAddressIcon = {
|
|
|
119
120
|
};
|
|
120
121
|
const TestWithCheckbox = {
|
|
121
122
|
args: {
|
|
122
|
-
onClick,
|
|
123
123
|
account: {
|
|
124
124
|
address: "n4A9...Zgty",
|
|
125
125
|
balance: "0.118",
|
|
@@ -129,13 +129,14 @@ const TestWithCheckbox = {
|
|
|
129
129
|
name: "Main BTC",
|
|
130
130
|
ticker: "btc"
|
|
131
131
|
},
|
|
132
|
+
onClick,
|
|
132
133
|
rightElement: {
|
|
133
134
|
type: "checkbox",
|
|
134
135
|
checkbox: {
|
|
135
136
|
isChecked: false,
|
|
137
|
+
name: "checkbox",
|
|
136
138
|
onChange: () => {
|
|
137
|
-
}
|
|
138
|
-
name: "checkbox"
|
|
139
|
+
}
|
|
139
140
|
}
|
|
140
141
|
}
|
|
141
142
|
},
|
|
@@ -147,7 +148,6 @@ const TestWithCheckbox = {
|
|
|
147
148
|
};
|
|
148
149
|
const TestWithArrow = {
|
|
149
150
|
args: {
|
|
150
|
-
onClick,
|
|
151
151
|
account: {
|
|
152
152
|
address: "n4A9...Zgty",
|
|
153
153
|
cryptoId: "bitcoin",
|
|
@@ -166,4 +166,26 @@ 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
|
+
};
|
|
169
191
|
//# 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;AACA,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, within } from \"@storybook/test\";\nimport { AccountItem } from \"./AccountItem\";\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 address: \"n4A9...Zgty\",\n balance: \"0.118 ETH\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n },\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 address: \"n4A9...Zgty\",\n balance: \"0.118 BTC\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n protocol: \"Native Segwit\",\n ticker: \"btc\",\n },\n },\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 address: \"n4A9...Zgty\",\n balance: \"0.118 BTC\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"21345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n },\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 address: \"n4A9...Zgty\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n id: \"bitcoin\",\n name: \"Main BTC\",\n },\n showIcon: false,\n },\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 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 onClick,\n rightElement: {\n type: \"checkbox\",\n checkbox: {\n isChecked: false,\n name: \"checkbox\",\n onChange: () => {},\n },\n },\n },\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 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 },\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\nexport const TestWithEdit: Story = {\n args: {\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 onClick: undefined,\n rightElement: {\n type: \"edit\",\n onClick,\n },\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const arrowIcon = canvas.getByTestId(\"right-element-edit-icon\");\n\n await expect(arrowIcon).toBeInTheDocument();\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var Checkbox_exports = {};
|
|
30
|
+
__export(Checkbox_exports, {
|
|
31
|
+
Checkbox: () => Checkbox
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(Checkbox_exports);
|
|
34
|
+
var import_react = __toESM(require("react"));
|
|
35
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
36
|
+
var import_CheckAloneMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium"));
|
|
37
|
+
var import_server = require("react-dom/server");
|
|
38
|
+
var import_libs = require("../../libs");
|
|
39
|
+
const Icon = () => import_react.default.cloneElement((0, import_CheckAloneMedium.default)({ size: 13, color: "currentColor" }), {
|
|
40
|
+
// the xmlns attribute is required to properly display the checkbox
|
|
41
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
42
|
+
});
|
|
43
|
+
const CheckMarkIcon = encodeURIComponent((0, import_server.renderToStaticMarkup)(/* @__PURE__ */ import_react.default.createElement(Icon, null)));
|
|
44
|
+
const Input = import_styled_components.default.input`
|
|
45
|
+
background-color: transparent;
|
|
46
|
+
|
|
47
|
+
border-radius: ${(p) => `${p.theme.radii[1]}px`};
|
|
48
|
+
position: relative;
|
|
49
|
+
|
|
50
|
+
min-width: ${(p) => p.size ? `${p.size}px` : `${p.theme.space[7]}px`};
|
|
51
|
+
height: ${(p) => p.size ? `${p.size}px` : `${p.theme.space[7]}px`};
|
|
52
|
+
appearance: none;
|
|
53
|
+
border: 1px solid ${(props) => props.theme.colors.opacityDefault.c30};
|
|
54
|
+
box-shadow: none;
|
|
55
|
+
|
|
56
|
+
&:checked {
|
|
57
|
+
background-color: currentColor;
|
|
58
|
+
border-color: currentColor;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:checked::after {
|
|
62
|
+
content: " ";
|
|
63
|
+
width: ${(p) => p.size ? `${p.size}px` : `${p.theme.space[7]}px`};
|
|
64
|
+
height: ${(p) => p.size ? `${p.size}px` : `${p.theme.space[7]}px`};
|
|
65
|
+
display: inline-block;
|
|
66
|
+
color: ${(props) => props.theme.colors.neutral.c00};
|
|
67
|
+
|
|
68
|
+
background-image: url("data:image/svg+xml,${CheckMarkIcon}");
|
|
69
|
+
background-position: center;
|
|
70
|
+
background-repeat: no-repeat;
|
|
71
|
+
|
|
72
|
+
/* Trick to center the check mark by taking into account the border */
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: -1px;
|
|
75
|
+
left: -1px;
|
|
76
|
+
}
|
|
77
|
+
`;
|
|
78
|
+
const Container = import_styled_components.default.div`
|
|
79
|
+
${(0, import_libs.withTokens)("colors-background-active")}
|
|
80
|
+
|
|
81
|
+
color: var(--colors-background-active);
|
|
82
|
+
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
column-gap: ${(p) => p.theme.space[5]}px;
|
|
85
|
+
align-items: center;
|
|
86
|
+
cursor: pointer;
|
|
87
|
+
`;
|
|
88
|
+
const Checkbox = ({
|
|
89
|
+
isDisabled = false,
|
|
90
|
+
isChecked,
|
|
91
|
+
name,
|
|
92
|
+
onChange,
|
|
93
|
+
size
|
|
94
|
+
}) => /* @__PURE__ */ import_react.default.createElement(Container, { "data-disabled": isDisabled }, /* @__PURE__ */ import_react.default.createElement(
|
|
95
|
+
Input,
|
|
96
|
+
{
|
|
97
|
+
type: "checkbox",
|
|
98
|
+
name,
|
|
99
|
+
id: name,
|
|
100
|
+
checked: isChecked,
|
|
101
|
+
disabled: isDisabled,
|
|
102
|
+
onChange: (e) => {
|
|
103
|
+
e.stopPropagation();
|
|
104
|
+
onChange(!isChecked);
|
|
105
|
+
},
|
|
106
|
+
size
|
|
107
|
+
}
|
|
108
|
+
));
|
|
109
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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={e => {\n // TODO Checkbox should be an uncontrolled component that exposes the event onChange.\n // (leave stopPropagation to the parent)\n e.stopPropagation();\n onChange(!isChecked);\n }}\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,OAAK;AAGb,QAAE,gBAAgB;AAClB,eAAS,CAAC,SAAS;AAAA,IACrB;AAAA,IACA;AAAA;AACF,CACF;",
|
|
6
|
+
"names": ["React", "CheckAloneMedium", "styled"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var Checkbox_stories_exports = {};
|
|
20
|
+
__export(Checkbox_stories_exports, {
|
|
21
|
+
Default: () => Default,
|
|
22
|
+
default: () => Checkbox_stories_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(Checkbox_stories_exports);
|
|
25
|
+
var import_Checkbox = require("./Checkbox");
|
|
26
|
+
const meta = {
|
|
27
|
+
component: import_Checkbox.Checkbox,
|
|
28
|
+
title: "PreLdls/Components/Checkbox",
|
|
29
|
+
tags: ["autodocs"]
|
|
30
|
+
};
|
|
31
|
+
var Checkbox_stories_default = meta;
|
|
32
|
+
const Default = {};
|
|
33
|
+
//# sourceMappingURL=Checkbox.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../src/pre-ldls/components/Checkbox/Checkbox.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Checkbox } from \"./Checkbox\";\n\nconst meta: Meta<typeof Checkbox> = {\n component: Checkbox,\n title: \"PreLdls/Components/Checkbox\",\n tags: [\"autodocs\"],\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Checkbox>;\n\nexport const Default: Story = {};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAyB;AAEzB,MAAM,OAA8B;AAAA,EAClC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AACnB;AACA,IAAO,2BAAQ;AAIR,MAAM,UAAiB,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|