@ledgerhq/react-ui 0.30.1-nightly.0 → 0.31.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 +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js +31 -7
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js.map +2 -2
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts +10 -2
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +8 -5
- package/lib/pre-ldls/components/AccountItem/AccountItem.js.map +1 -1
- package/package.json +1 -1
|
@@ -125,7 +125,7 @@ const BalanceContainer = import_styled_components.default.div`
|
|
|
125
125
|
const AccountItem = ({
|
|
126
126
|
onClick,
|
|
127
127
|
account,
|
|
128
|
-
|
|
128
|
+
rightElement,
|
|
129
129
|
showIcon = true,
|
|
130
130
|
backgroundColor
|
|
131
131
|
}) => {
|
|
@@ -156,6 +156,6 @@ const AccountItem = ({
|
|
|
156
156
|
parentId,
|
|
157
157
|
showIcon
|
|
158
158
|
}
|
|
159
|
-
)), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "
|
|
159
|
+
)), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, /* @__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.Box, { "data-testid": "right-element-checkbox" }, /* @__PURE__ */ import_react.default.createElement(import_components.Checkbox, { ...rightElement.checkbox, size: 20 })), rightElement && rightElement.type === "arrow" && /* @__PURE__ */ import_react.default.createElement(import_components.Box, { "data-testid": "right-element-arrow-icon" }, /* @__PURE__ */ import_react.default.createElement(import_components.Icon, { name: "ChevronRight", size: 24 }))));
|
|
160
160
|
};
|
|
161
161
|
//# 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 type { CheckboxProps } from \"../../../components/form/Checkbox/Checkbox\";\nimport { Checkbox, Icon, Text, Box } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport { Address } from \"../Address/Address\";\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 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 }>`\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 padding: var(--margin-s);\n cursor: pointer;\n border-radius: var(--radius-m);\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 :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\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}>\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 <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 <Box data-testid=\"right-element-checkbox\">\n <Checkbox {...rightElement.checkbox} size={20} />\n </Box>\n )}\n {rightElement && rightElement.type === \"arrow\" && (\n <Box data-testid=\"right-element-arrow-icon\">\n <Icon name=\"ChevronRight\" size={24} />\n </Box>\n )}\n </ContentContainer>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AAEnB,wBAA0C;AAC1C,kBAA2B;AAC3B,qBAAwB;AACxB,iBAAoB;AAiCpB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAcmB,OAAM,EAAE,kBAAkB,EAAE,kBAAkB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlF,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpC,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAwB;AACtB,QAAM,EAAE,MAAM,SAAS,WAAW,UAAU,SAAS,QAAQ,UAAU,SAAS,IAAI;AAEpF,SACE,6BAAAC,QAAA,cAAC,WAAQ,SAAkB,mBACzB,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,4BACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,CACF,GACC,YACC,6BAAAA,QAAA,cAAC,kBACC,6BAAAA,QAAA,cAAC,kBAAI,eAAc,eAAa,QAAS,CAC3C,CAEJ,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,GACA,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,UAAQ,SAAU,GAChC,WACC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,QAAO,OAAM,mDACzB,OACH,CAEJ,GACC,gBAAgB,aAAa,SAAS,cACrC,6BAAAA,QAAA,cAAC,yBAAI,eAAY,4BACf,6BAAAA,QAAA,cAAC,8BAAU,GAAG,aAAa,UAAU,MAAM,IAAI,CACjD,GAED,gBAAgB,aAAa,SAAS,WACrC,6BAAAA,QAAA,cAAC,yBAAI,eAAY,8BACf,6BAAAA,QAAA,cAAC,0BAAK,MAAK,gBAAe,MAAM,IAAI,CACtC,CAEJ,CACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -20,6 +20,7 @@ var AccountItem_stories_exports = {};
|
|
|
20
20
|
__export(AccountItem_stories_exports, {
|
|
21
21
|
Default: () => Default,
|
|
22
22
|
TestAccount: () => TestAccount,
|
|
23
|
+
TestWithArrow: () => TestWithArrow,
|
|
23
24
|
TestWithCheckbox: () => TestWithCheckbox,
|
|
24
25
|
TestWithoutAddressIcon: () => TestWithoutAddressIcon,
|
|
25
26
|
TestWithoutProtocol: () => TestWithoutProtocol,
|
|
@@ -122,17 +123,40 @@ const TestWithCheckbox = {
|
|
|
122
123
|
name: "Main BTC",
|
|
123
124
|
ticker: "btc"
|
|
124
125
|
},
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
126
|
+
rightElement: {
|
|
127
|
+
type: "checkbox",
|
|
128
|
+
checkbox: {
|
|
129
|
+
isChecked: false,
|
|
130
|
+
onChange: () => {
|
|
131
|
+
},
|
|
132
|
+
name: "checkbox"
|
|
133
|
+
}
|
|
130
134
|
}
|
|
131
135
|
},
|
|
132
136
|
play: async ({ canvasElement }) => {
|
|
133
137
|
const canvas = (0, import_test.within)(canvasElement);
|
|
134
|
-
const
|
|
135
|
-
await (0, import_test.expect)(
|
|
138
|
+
const arrowIcon = canvas.getByTestId("right-element-checkbox");
|
|
139
|
+
await (0, import_test.expect)(arrowIcon).toBeInTheDocument();
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
const TestWithArrow = {
|
|
143
|
+
args: {
|
|
144
|
+
account: {
|
|
145
|
+
address: "n4A9...Zgty",
|
|
146
|
+
cryptoId: "bitcoin",
|
|
147
|
+
fiatValue: "$5,969.83",
|
|
148
|
+
id: "12345",
|
|
149
|
+
name: "Main BTC",
|
|
150
|
+
ticker: "btc"
|
|
151
|
+
},
|
|
152
|
+
rightElement: {
|
|
153
|
+
type: "arrow"
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
play: async ({ canvasElement }) => {
|
|
157
|
+
const canvas = (0, import_test.within)(canvasElement);
|
|
158
|
+
const arrowIcon = canvas.getByTestId("right-element-arrow-icon");
|
|
159
|
+
await (0, import_test.expect)(arrowIcon).toBeInTheDocument();
|
|
136
160
|
}
|
|
137
161
|
};
|
|
138
162
|
//# 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 { AccountItem, AccountItemProps } from \"./AccountItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\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 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 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 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 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 checkbox: {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA8C;AAC9C,kBAA+B;AAE/B,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,UAAU;AACxC,UAAM,WAAW,OAAO,YAAY,KAAK;AACzC,UAAM,UAAU,OAAO,UAAU,aAAa;AAC9C,UAAM,cAAc,OAAO,UAAU,KAAK;AAC1C,UAAM,YAAY,OAAO,UAAU,WAAW;AAC9C,UAAM,UAAU,OAAO,UAAU,WAAW;AAE5C,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AACrC,cAAM,oBAAO,QAAQ,EAAE,kBAAkB;AACzC,cAAM,oBAAO,QAAQ,EAAE,kBAAkB,eAAe;AACxD,cAAM,oBAAO,OAAO,EAAE,kBAAkB;AACxC,cAAM,oBAAO,WAAW,EAAE,kBAAkB;AAC5C,cAAM,oBAAO,SAAS,EAAE,kBAAkB;AAC1C,cAAM,oBAAO,OAAO,EAAE,kBAAkB;AAAA,EAC1C;AACF;AAEO,MAAM,sBAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,WAAW,OAAO,cAAc,KAAK;AAE3C,cAAM,oBAAO,QAAQ,EAAE,IAAI,kBAAkB;AAAA,EAC/C;AACF;AAEO,MAAM,yBAAgC;AAAA,EAC3C,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,EACZ;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,cAAc,OAAO,YAAY,KAAK;AAE5C,cAAM,oBAAO,WAAW,EAAE,IAAI,kBAAkB;AAAA,EAClD;AACF;AAEO,MAAM,mBAA0B;AAAA,EACrC,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACR,WAAW;AAAA,MACX,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AccountItem, AccountItemProps } from \"./AccountItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\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 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 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 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 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 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
|
}
|
|
@@ -11,12 +11,20 @@ export type Account = {
|
|
|
11
11
|
protocol?: string;
|
|
12
12
|
ticker?: string;
|
|
13
13
|
};
|
|
14
|
+
export type RightElementCheckbox = {
|
|
15
|
+
type: "checkbox";
|
|
16
|
+
checkbox: CheckboxProps;
|
|
17
|
+
};
|
|
18
|
+
export type RightElementArrow = {
|
|
19
|
+
type: "arrow";
|
|
20
|
+
};
|
|
21
|
+
export type RightElement = RightElementCheckbox | RightElementArrow;
|
|
14
22
|
export type AccountItemProps = {
|
|
15
23
|
onClick?: () => void;
|
|
16
24
|
account: Account;
|
|
17
|
-
|
|
25
|
+
rightElement?: RightElement;
|
|
18
26
|
showIcon?: boolean;
|
|
19
27
|
backgroundColor?: string;
|
|
20
28
|
};
|
|
21
|
-
export declare const AccountItem: ({ onClick, account,
|
|
29
|
+
export declare const AccountItem: ({ onClick, account, rightElement, showIcon, backgroundColor, }: AccountItemProps) => React.JSX.Element;
|
|
22
30
|
//# sourceMappingURL=AccountItem.d.ts.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAMhF,MAAM,MAAM,OAAO,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,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;AA8FF,eAAO,MAAM,WAAW,mEAMrB,gBAAgB,sBA6DlB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Checkbox, Text } from "../../../components";
|
|
3
|
+
import { Checkbox, Icon, Text, Box } from "../../../components";
|
|
4
4
|
import { withTokens } from "../../libs";
|
|
5
5
|
import { Address } from "../Address/Address";
|
|
6
6
|
import { Tag } from "../Tag/Tag";
|
|
@@ -77,7 +77,7 @@ const BalanceContainer = styled.div `
|
|
|
77
77
|
flex-shrink: 0;
|
|
78
78
|
text-align: right;
|
|
79
79
|
`;
|
|
80
|
-
export const AccountItem = ({ onClick, account,
|
|
80
|
+
export const AccountItem = ({ onClick, account, rightElement, showIcon = true, backgroundColor, }) => {
|
|
81
81
|
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
82
82
|
return (React.createElement(Wrapper, { onClick: onClick, backgroundColor: backgroundColor },
|
|
83
83
|
React.createElement(ContentContainer, null,
|
|
@@ -94,8 +94,11 @@ export const AccountItem = ({ onClick, account, checkbox, showIcon = true, backg
|
|
|
94
94
|
React.createElement(Tag, { textTransform: "uppercase" }, protocol)))),
|
|
95
95
|
React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, parentId: parentId, showIcon: showIcon })),
|
|
96
96
|
React.createElement(BalanceContainer, null,
|
|
97
|
-
React.createElement(Text, { fontSize: "
|
|
98
|
-
balance
|
|
99
|
-
checkbox && React.createElement(
|
|
97
|
+
React.createElement(Text, { fontSize: "14px" }, fiatValue),
|
|
98
|
+
balance && (React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))),
|
|
99
|
+
rightElement && rightElement.type === "checkbox" && (React.createElement(Box, { "data-testid": "right-element-checkbox" },
|
|
100
|
+
React.createElement(Checkbox, { ...rightElement.checkbox, size: 20 }))),
|
|
101
|
+
rightElement && rightElement.type === "arrow" && (React.createElement(Box, { "data-testid": "right-element-arrow-icon" },
|
|
102
|
+
React.createElement(Icon, { name: "ChevronRight", size: 24 }))))));
|
|
100
103
|
};
|
|
101
104
|
//# 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;
|
|
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;AAEvC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAiCjC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA8B;IACpD,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,EACxC,4CAA4C,CAC7C;;;;;;;;;;;;;;sBAcmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;;;;;;;;;CASjF,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASlC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOtC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,OAAO,EACP,YAAY,EACZ,QAAQ,GAAG,IAAI,EACf,eAAe,GACE,EAAE,EAAE;IACrB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE5F,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe;QACzD,oBAAC,gBAAgB;YACf,oBAAC,oBAAoB;gBACnB,oBAAC,OAAO;oBACN,oBAAC,OAAO;wBACN,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE;gCACL,OAAO,EAAE,OAAO;gCAChB,UAAU,EAAE,QAAQ;gCACpB,QAAQ,EAAE,QAAQ;gCAClB,YAAY,EAAE,UAAU;6BACzB,IAEA,IAAI,CACA,CACC;oBACT,QAAQ,IAAI,CACX,oBAAC,UAAU;wBACT,oBAAC,GAAG,IAAC,aAAa,EAAC,WAAW,IAAE,QAAQ,CAAO,CACpC,CACd,CACO;gBACV,oBAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACmB;YACvB,oBAAC,gBAAgB;gBACf,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,IAAE,SAAS,CAAQ;gBACvC,OAAO,IAAI,CACV,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,+CAA+C,IACxE,OAAO,CACH,CACR,CACgB;YAClB,YAAY,IAAI,YAAY,CAAC,IAAI,KAAK,UAAU,IAAI,CACnD,oBAAC,GAAG,mBAAa,wBAAwB;gBACvC,oBAAC,QAAQ,OAAK,YAAY,CAAC,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACP;YACA,YAAY,IAAI,YAAY,CAAC,IAAI,KAAK,OAAO,IAAI,CAChD,oBAAC,GAAG,mBAAa,0BAA0B;gBACzC,oBAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI,CAClC,CACP,CACgB,CACX,CACX,CAAC;AACJ,CAAC,CAAC"}
|