@ledgerhq/react-ui 0.34.0 → 0.35.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/components/tabs/Chip/Chip.stories.js +1 -1
- package/lib/cjs/components/tabs/Chip/Chip.stories.js.map +2 -2
- package/lib/cjs/components/tabs/Chip/index.js +13 -4
- package/lib/cjs/components/tabs/Chip/index.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js +29 -3
- 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 +4 -1
- package/lib/cjs/pre-ldls/components/Checkbox/Checkbox.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.js +3 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.stories.js +4 -1
- package/lib/cjs/pre-ldls/components/Tag/Tag.stories.js.map +2 -2
- package/lib/components/tabs/Chip/index.d.ts.map +1 -1
- package/lib/components/tabs/Chip/index.js +13 -4
- package/lib/components/tabs/Chip/index.js.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts +7 -3
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +27 -6
- 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 +6 -1
- package/lib/pre-ldls/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/pre-ldls/components/Tag/Tag.d.ts +2 -1
- 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 +1 -1
|
@@ -47,7 +47,7 @@ var Chip_stories_default = {
|
|
|
47
47
|
const navItems = ["One", "Two", "Three", "Four", "Five"];
|
|
48
48
|
function Sample({ children, ...args }) {
|
|
49
49
|
const [activeIndex, setActiveIndex] = (0, import_react.useState)(args.initialActiveIndex);
|
|
50
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onTabChange: setActiveIndex }, children)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "subtitle" }, "Active index: ", activeIndex)
|
|
50
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "10px", padding: "5px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onTabChange: setActiveIndex }, children)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { color: "neutral.c100", variant: "subtitle" }, "Active index: ", activeIndex));
|
|
51
51
|
}
|
|
52
52
|
const Chip = (args) => navItems.reduce((acc, _, index) => {
|
|
53
53
|
const labels = [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/tabs/Chip/Chip.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\n\nimport ChipTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n title: \"Tabs/Chip\",\n component: ChipTabs,\n argTypes: {\n initialActiveIndex: {\n control: { type: \"number\" },\n },\n },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n return (\n <div style={{ marginBottom: \"10px\" }}>\n <div style={{ width: \"100%\" }}>\n <ChipTabs {...args} onTabChange={setActiveIndex}>\n {children}\n </ChipTabs>\n </div>\n <Text variant=\"subtitle\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\n\nimport ChipTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n title: \"Tabs/Chip\",\n component: ChipTabs,\n argTypes: {\n initialActiveIndex: {\n control: { type: \"number\" },\n },\n },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n return (\n <div style={{ marginBottom: \"10px\", padding: \"5px\" }}>\n <div style={{ width: \"100%\" }}>\n <ChipTabs {...args} onTabChange={setActiveIndex}>\n {children}\n </ChipTabs>\n </div>\n <Text color=\"neutral.c100\" variant=\"subtitle\">\n Active index: {activeIndex}\n </Text>\n </div>\n );\n}\n\nexport const Chip = (args: Props): React.ReactNode[] =>\n navItems.reduce<React.ReactNode[]>((acc, _, index) => {\n const labels = [\n navItems.slice(0, index + 1).map(label => (\n <Text color=\"inherit\" variant=\"small\">\n {label}\n </Text>\n )),\n ];\n return [\n ...acc,\n <Sample {...args} key={index}>\n {labels}\n </Sample>,\n ];\n }, []);\n\nChip.args = {\n initialActiveIndex: 1,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,QAAQ,SAAS,MAAM,KACjD,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,OAAO,KAC1B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,aAAa,kBAC9B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,gBAAe,SAAQ,cAAW,kBAC7B,WACjB,CACF;AAEJ;AAEO,MAAM,OAAO,CAAC,SACnB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,WAC/B,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,WAAU,SAAQ,WAC3B,KACH,CACD;AAAA,EACH;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAD,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,KAAK,OAAO;AAAA,EACV,oBAAoB;AACtB;",
|
|
6
6
|
"names": ["ChipTabs", "React", "Text"]
|
|
7
7
|
}
|
|
@@ -34,6 +34,15 @@ module.exports = __toCommonJS(Chip_exports);
|
|
|
34
34
|
var import_react = __toESM(require("react"));
|
|
35
35
|
var import_styled_components = __toESM(require("styled-components"));
|
|
36
36
|
var import_Flex = __toESM(require("../../layout/Flex"));
|
|
37
|
+
const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
38
|
+
justifyContent: "space-between",
|
|
39
|
+
flex: 1,
|
|
40
|
+
columnGap: 1
|
|
41
|
+
})`
|
|
42
|
+
border: 1px solid ${(p) => p.theme.colors.opacityDefault.c10};
|
|
43
|
+
border-radius: 12px;
|
|
44
|
+
padding: 4px;
|
|
45
|
+
`;
|
|
37
46
|
const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
38
47
|
flex: 1,
|
|
39
48
|
justifyContent: "center",
|
|
@@ -41,13 +50,13 @@ const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
|
41
50
|
})`
|
|
42
51
|
cursor: pointer;
|
|
43
52
|
padding: 8px 12px 8px 12px;
|
|
44
|
-
border-radius:
|
|
45
|
-
color: ${(p) => p.theme.colors.neutral.c100};
|
|
46
|
-
background-color: ${(p) => p.active ? p.theme.colors.
|
|
53
|
+
border-radius: 10px;
|
|
54
|
+
color: ${(p) => p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50};
|
|
55
|
+
background-color: ${(p) => p.active ? p.theme.colors.opacityDefault.c10 : "unset"};
|
|
47
56
|
`;
|
|
48
57
|
function BarTabs({ children, onTabChange, initialActiveIndex }) {
|
|
49
58
|
const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
|
|
50
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
59
|
+
return /* @__PURE__ */ import_react.default.createElement(Container, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(
|
|
51
60
|
Item,
|
|
52
61
|
{
|
|
53
62
|
key: index,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/tabs/Chip/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n /**\n * An optional callback that will be called when the active tab changes.\n */\n onTabChange?: (activeIndex: number) => void;\n /**\n * The tab index to mark as active when rendering for the first time.\n * If omitted, then initially no tabs will be selected.\n */\n initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n active: boolean;\n};\n\nconst Item = styled(Flex).attrs({\n flex: 1,\n justifyContent: \"center\",\n alignItems: \"center\",\n})<ItemProps>`\n cursor: pointer;\n padding: 8px 12px 8px 12px;\n border-radius:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n /**\n * An optional callback that will be called when the active tab changes.\n */\n onTabChange?: (activeIndex: number) => void;\n /**\n * The tab index to mark as active when rendering for the first time.\n * If omitted, then initially no tabs will be selected.\n */\n initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n active: boolean;\n};\n\nconst Container = styled(Flex).attrs({\n justifyContent: \"space-between\",\n flex: 1,\n columnGap: 1,\n})`\n border: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n border-radius: 12px;\n padding: 4px;\n`;\n\nconst Item = styled(Flex).attrs({\n flex: 1,\n justifyContent: \"center\",\n alignItems: \"center\",\n})<ItemProps>`\n cursor: pointer;\n padding: 8px 12px 8px 12px;\n border-radius: 10px;\n color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};\n background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n return (\n <Container>\n {React.Children.toArray(children).map((child, index) => (\n <Item\n key={index}\n active={index === activeIndex}\n onClick={() => {\n setActiveIndex(index);\n onTabChange && onTabChange(index);\n }}\n >\n {child}\n </Item>\n ))}\n </Container>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EACnC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAK5D,MAAM,WAAO,yBAAAD,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ,GAAI;AAAA,sBAC/D,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,eAAe,MAAM,OAAQ;AAAA;AAGpE,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,iBACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
|
|
6
6
|
"names": ["styled", "Flex", "React"]
|
|
7
7
|
}
|
|
@@ -33,11 +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");
|
|
39
|
-
var import_Tag = require("../Tag/Tag");
|
|
40
40
|
var import_Checkbox = require("../Checkbox/Checkbox");
|
|
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
|
+
`;
|
|
41
54
|
const Wrapper = import_styled_components.default.div`
|
|
42
55
|
${(0, import_libs.withTokens)(
|
|
43
56
|
"spacing-xxxs",
|
|
@@ -133,7 +146,7 @@ const AccountItem = ({
|
|
|
133
146
|
backgroundColor
|
|
134
147
|
}) => {
|
|
135
148
|
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
136
|
-
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(
|
|
137
150
|
import_components.Text,
|
|
138
151
|
{
|
|
139
152
|
variant: "largeLineHeight",
|
|
@@ -159,6 +172,19 @@ const AccountItem = ({
|
|
|
159
172
|
parentId,
|
|
160
173
|
showIcon
|
|
161
174
|
}
|
|
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 }))
|
|
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
|
+
)));
|
|
163
189
|
};
|
|
164
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 { Icon, Text
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,wBAAiC;AACjC,kBAA2B;AAC3B,qBAAwB;
|
|
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
|
}
|
|
@@ -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={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
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: 1px var(--spacing-xxxs);
|
|
46
|
+
padding: ${({ $spacing }) => $spacing === "sm" ? "1px" : "2px"} 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,9 +51,10 @@ const Wrapper = import_styled_components.default.div`
|
|
|
51
51
|
`;
|
|
52
52
|
const Tag = ({
|
|
53
53
|
textTransform = "none",
|
|
54
|
+
spacing = "sm",
|
|
54
55
|
children
|
|
55
56
|
}) => {
|
|
56
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { "data-testid": "tag" }, /* @__PURE__ */ import_react.default.createElement(
|
|
57
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { "data-testid": "tag", $spacing: spacing }, /* @__PURE__ */ import_react.default.createElement(
|
|
57
58
|
import_components.Text,
|
|
58
59
|
{
|
|
59
60
|
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;AAAA;AAAA;AAAA;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<{ $spacing: \"sm\" | \"md\" }>`\n ${withTokens(\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n \"radius-xs\",\n \"spacing-xxxs\",\n )}\n\n padding: ${({ $spacing }) => ($spacing === \"sm\" ? \"1px\" : \"2px\")} 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 spacing = \"sm\",\n children,\n}: {\n textTransform?: string;\n spacing?: \"sm\" | \"md\";\n children: ReactNode;\n}) => {\n return (\n <Wrapper data-testid=\"tag\" $spacing={spacing}>\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,aAEU,CAAC,EAAE,SAAS,MAAO,aAAa,OAAO,QAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3D,MAAM,MAAM,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV;AACF,MAIM;AACJ,SACE,6BAAAC,QAAA,cAAC,WAAQ,eAAY,OAAM,UAAU,WACnC,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,6 +20,7 @@ var Tag_stories_exports = {};
|
|
|
20
20
|
__export(Tag_stories_exports, {
|
|
21
21
|
Default: () => Default,
|
|
22
22
|
TestTag: () => TestTag,
|
|
23
|
+
VariantMd: () => VariantMd,
|
|
23
24
|
default: () => Tag_stories_default
|
|
24
25
|
});
|
|
25
26
|
module.exports = __toCommonJS(Tag_stories_exports);
|
|
@@ -29,10 +30,12 @@ const meta = {
|
|
|
29
30
|
component: import_Tag.Tag,
|
|
30
31
|
title: "PreLdls/Components/Tag",
|
|
31
32
|
tags: ["autodocs"],
|
|
32
|
-
args: { children: "Native Segwit" }
|
|
33
|
+
args: { children: "Native Segwit", spacing: "sm" },
|
|
34
|
+
argTypes: { spacing: { control: "select", options: ["sm", "md"] } }
|
|
33
35
|
};
|
|
34
36
|
var Tag_stories_default = meta;
|
|
35
37
|
const Default = {};
|
|
38
|
+
const VariantMd = { args: { spacing: "md" } };
|
|
36
39
|
const TestTag = {
|
|
37
40
|
play: async ({ canvasElement }) => {
|
|
38
41
|
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\" },\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,
|
|
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\", spacing: \"sm\" },\n argTypes: { spacing: { control: \"select\", options: [\"sm\", \"md\"] } },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {};\n\nexport const VariantMd: Story = { args: { spacing: \"md\" } };\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;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,iBAAiB,SAAS,KAAK;AAAA,EACjD,UAAU,EAAE,SAAS,EAAE,SAAS,UAAU,SAAS,CAAC,MAAM,IAAI,EAAE,EAAE;AACpE;AACA,IAAO,sBAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,YAAmB,EAAE,MAAM,EAAE,SAAS,KAAK,EAAE;AAEnD,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
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;AA2BH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBjG"}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import Flex from "../../layout/Flex";
|
|
4
|
+
const Container = styled(Flex).attrs({
|
|
5
|
+
justifyContent: "space-between",
|
|
6
|
+
flex: 1,
|
|
7
|
+
columnGap: 1,
|
|
8
|
+
}) `
|
|
9
|
+
border: 1px solid ${p => p.theme.colors.opacityDefault.c10};
|
|
10
|
+
border-radius: 12px;
|
|
11
|
+
padding: 4px;
|
|
12
|
+
`;
|
|
4
13
|
const Item = styled(Flex).attrs({
|
|
5
14
|
flex: 1,
|
|
6
15
|
justifyContent: "center",
|
|
@@ -8,13 +17,13 @@ const Item = styled(Flex).attrs({
|
|
|
8
17
|
}) `
|
|
9
18
|
cursor: pointer;
|
|
10
19
|
padding: 8px 12px 8px 12px;
|
|
11
|
-
border-radius:
|
|
12
|
-
color: ${p => p.theme.colors.neutral.c100};
|
|
13
|
-
background-color: ${p => (p.active ? p.theme.colors.
|
|
20
|
+
border-radius: 10px;
|
|
21
|
+
color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};
|
|
22
|
+
background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : "unset")};
|
|
14
23
|
`;
|
|
15
24
|
export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
|
|
16
25
|
const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
|
|
17
|
-
return (React.createElement(
|
|
26
|
+
return (React.createElement(Container, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
|
|
18
27
|
setActiveIndex(index);
|
|
19
28
|
onTabChange && onTabChange(index);
|
|
20
29
|
} }, child)))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IACnC,cAAc,EAAE,eAAe;IAC/B,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,CAAC;CACb,CAAC,CAAA;sBACoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;CAG3D,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW;;;;WAIF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;sBAC/D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;CAClF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAS;IAClF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACnE,OAAO,CACL,oBAAC,SAAS,QACP,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACtD,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,KAAK,KAAK,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,IAEA,KAAK,CACD,CACR,CAAC,CACQ,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -11,14 +11,18 @@ export type Account = {
|
|
|
11
11
|
protocol?: string;
|
|
12
12
|
ticker?: string;
|
|
13
13
|
};
|
|
14
|
+
export type RightElementArrow = {
|
|
15
|
+
type: "arrow";
|
|
16
|
+
};
|
|
14
17
|
export type RightElementCheckbox = {
|
|
15
18
|
type: "checkbox";
|
|
16
19
|
checkbox: CheckboxProps;
|
|
17
20
|
};
|
|
18
|
-
export type
|
|
19
|
-
type: "
|
|
21
|
+
export type RightElementEdit = {
|
|
22
|
+
type: "edit";
|
|
23
|
+
onClick: () => void;
|
|
20
24
|
};
|
|
21
|
-
export type RightElement = RightElementCheckbox |
|
|
25
|
+
export type RightElement = RightElementArrow | RightElementCheckbox | RightElementEdit;
|
|
22
26
|
export type AccountItemProps = {
|
|
23
27
|
onClick?: () => void;
|
|
24
28
|
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;AAI1D,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,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG,oBAAoB,GAAG,gBAAgB,CAAC;AAEvF,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;AAkHF,eAAO,MAAM,WAAW,mEAMrB,gBAAgB,sBA2ElB,CAAC"}
|
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import {
|
|
3
|
+
import { Icons } from "../../../assets";
|
|
4
|
+
import { Flex, Icon, Text } from "../../../components";
|
|
4
5
|
import { withTokens } from "../../libs";
|
|
5
6
|
import { Address } from "../Address/Address";
|
|
6
|
-
import { Tag } from "../Tag/Tag";
|
|
7
7
|
import { Checkbox } from "../Checkbox/Checkbox";
|
|
8
|
+
import { Tag } from "../Tag/Tag";
|
|
9
|
+
const ICON_BUTTONS_SIZE = "32px";
|
|
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
|
+
`;
|
|
8
22
|
const Wrapper = styled.div `
|
|
9
23
|
${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")}
|
|
10
24
|
|
|
@@ -84,7 +98,7 @@ const BalanceContainer = styled.div `
|
|
|
84
98
|
`;
|
|
85
99
|
export const AccountItem = ({ onClick, account, rightElement, showIcon = true, backgroundColor, }) => {
|
|
86
100
|
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
87
|
-
return (React.createElement(Wrapper, {
|
|
101
|
+
return (React.createElement(Wrapper, { backgroundColor: backgroundColor, isClickable: Boolean(onClick), onClick: onClick },
|
|
88
102
|
React.createElement(ContentContainer, null,
|
|
89
103
|
React.createElement(AccountInfoContainer, null,
|
|
90
104
|
React.createElement(NameRow, null,
|
|
@@ -101,9 +115,16 @@ export const AccountItem = ({ onClick, account, rightElement, showIcon = true, b
|
|
|
101
115
|
React.createElement(BalanceContainer, null,
|
|
102
116
|
fiatValue && React.createElement(Text, { fontSize: "14px" }, fiatValue),
|
|
103
117
|
balance && (React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))),
|
|
104
|
-
rightElement && rightElement.type === "checkbox" && (React.createElement(Flex, { "data-testid": "right-element-checkbox" },
|
|
118
|
+
rightElement && rightElement.type === "checkbox" && (React.createElement(Flex, { "data-testid": "right-element-checkbox", "aria-label": "Checkbox account item" },
|
|
105
119
|
React.createElement(Checkbox, { ...rightElement.checkbox, size: 20 }))),
|
|
106
|
-
rightElement && rightElement.type === "arrow" && (React.createElement(Flex, { "data-testid": "right-element-arrow-icon" },
|
|
107
|
-
React.createElement(Icon, { name: "ChevronRight", size: 24 })))
|
|
120
|
+
rightElement && rightElement.type === "arrow" && (React.createElement(Flex, { "data-testid": "right-element-arrow-icon", "aria-label": "Arrow account item" },
|
|
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)" }))))));
|
|
108
129
|
};
|
|
109
130
|
//# 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,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,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;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAsCjC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAEjC,4EAA4E;AAC5E,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,UAAU,CAAC,gCAAgC,CAAC;;;;;;;YAOpC,iBAAiB;WAClB,iBAAiB;CAC3B,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAoD;IAC1E,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,EACxC,4CAA4C,CAC7C;;;YAGS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;;sBASlC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;;IAE9E,CAAC,CAAC,EAAE,CACJ,CAAC,CAAC,WAAW;IACX,CAAC,CAAC;;;;;;;;;;GAUL;IACG,CAAC,CAAC,EAAE;CACT,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,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO;QACxF,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;gBACd,SAAS,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,IAAE,SAAS,CAAQ;gBACrD,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,IAAI,mBAAa,wBAAwB,gBAAY,uBAAuB;gBAC3E,oBAAC,QAAQ,OAAK,YAAY,CAAC,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,CAC5C,CACR;YACA,YAAY,IAAI,YAAY,CAAC,IAAI,KAAK,OAAO,IAAI,CAChD,oBAAC,IAAI,mBAAa,0BAA0B,gBAAY,oBAAoB;gBAC1E,oBAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI,CACjC,CACR;YACA,YAAY,IAAI,YAAY,CAAC,IAAI,KAAK,MAAM,IAAI,CAC/C,oBAAC,UAAU,kBACE,mBAAmB,iBAClB,yBAAyB,EACrC,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,IAAI,YAAY,EAAE,IAAI,KAAK,MAAM,EAAE,CAAC;wBAClC,YAAY,CAAC,OAAO,EAAE,CAAC;oBACzB,CAAC;gBACH,CAAC;gBAED,oBAAC,KAAK,CAAC,OAAO,IAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,uCAAuC,GAAG,CAC7D,CACd,CACgB,CACX,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -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,WAiBlB,CAAC"}
|
|
@@ -53,5 +53,10 @@ 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:
|
|
56
|
+
React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled, onChange: e => {
|
|
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 })));
|
|
57
62
|
//# 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,CAAC,CAAC,EAAE;YACZ,qFAAqF;YACrF,wCAAwC;YACxC,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;QACvB,CAAC,EACD,IAAI,EAAE,IAAI,GACV,CACQ,CACb,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
|
-
export declare const Tag: ({ textTransform, children, }: {
|
|
2
|
+
export declare const Tag: ({ textTransform, spacing, children, }: {
|
|
3
3
|
textTransform?: string | undefined;
|
|
4
|
+
spacing?: "sm" | "md" | undefined;
|
|
4
5
|
children: ReactNode;
|
|
5
6
|
}) => React.JSX.Element;
|
|
6
7
|
//# 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;;;cAOJ,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: 1px var(--spacing-xxxs);
|
|
8
|
+
padding: ${({ $spacing }) => ($spacing === "sm" ? "1px" : "2px")} 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", children, }) => {
|
|
15
|
-
return (React.createElement(Wrapper, { "data-testid": "tag" },
|
|
14
|
+
export const Tag = ({ textTransform = "none", spacing = "sm", children, }) => {
|
|
15
|
+
return (React.createElement(Wrapper, { "data-testid": "tag", "$spacing": spacing },
|
|
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,CAA2B;IACjD,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;aAEU,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;CAKjE,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,aAAa,GAAG,MAAM,EACtB,OAAO,GAAG,IAAI,EACd,QAAQ,GAKT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO,mBAAa,KAAK,cAAW,OAAO;QAC1C,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"}
|