@ledgerhq/react-ui 0.30.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/components/cta/Button/Button.stories.js +15 -11
- package/lib/cjs/components/cta/Button/Button.stories.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +7 -3
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/components/form/Checkbox/Checkbox.js +9 -7
- package/lib/cjs/components/form/Checkbox/Checkbox.js.map +2 -2
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js +7 -1
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js +6 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map +2 -2
- package/lib/cjs/helpers.types.js +18 -0
- package/lib/cjs/helpers.types.js.map +7 -0
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js +24 -13
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js +49 -0
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Address/Address.js +1 -1
- package/lib/cjs/pre-ldls/components/Address/Address.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js +1 -0
- package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js +10 -6
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map +2 -2
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js +2 -0
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/libs/index.js +2 -0
- package/lib/cjs/pre-ldls/libs/index.js.map +2 -2
- package/lib/components/cta/Button/index.d.ts +4 -4
- package/lib/components/cta/Button/index.d.ts.map +1 -1
- package/lib/components/cta/Button/index.js +9 -5
- package/lib/components/cta/Button/index.js.map +1 -1
- package/lib/components/form/Checkbox/Checkbox.d.ts +2 -1
- package/lib/components/form/Checkbox/Checkbox.d.ts.map +1 -1
- package/lib/components/form/Checkbox/Checkbox.js +7 -7
- package/lib/components/form/Checkbox/Checkbox.js.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.d.ts.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js +16 -10
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.d.ts +1 -0
- package/lib/components/layout/List/VerticalTimeline/index.d.ts.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.js.map +1 -1
- package/lib/helpers.types.d.ts +16 -0
- package/lib/helpers.types.d.ts.map +1 -0
- package/lib/helpers.types.js +3 -0
- package/lib/helpers.types.js.map +1 -0
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts +21 -11
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +19 -13
- package/lib/pre-ldls/components/AccountItem/AccountItem.js.map +1 -1
- package/lib/pre-ldls/components/Address/Address.d.ts.map +1 -1
- package/lib/pre-ldls/components/Address/Address.js +1 -1
- package/lib/pre-ldls/components/Address/Address.js.map +1 -1
- package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AssetItem/AssetItem.js +1 -0
- package/lib/pre-ldls/components/AssetItem/AssetItem.js.map +1 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts +5 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map +1 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.js +4 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.js.map +1 -1
- package/lib/pre-ldls/libs/index.d.ts +1 -0
- package/lib/pre-ldls/libs/index.d.ts.map +1 -1
- package/lib/pre-ldls/libs/index.js +1 -0
- package/lib/pre-ldls/libs/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -36,27 +36,31 @@ __export(Button_stories_exports, {
|
|
|
36
36
|
default: () => Button_stories_default
|
|
37
37
|
});
|
|
38
38
|
module.exports = __toCommonJS(Button_stories_exports);
|
|
39
|
-
var import_react = __toESM(require("react"));
|
|
40
|
-
var import_index = __toESM(require("./index"));
|
|
41
|
-
var import_Text = __toESM(require("../../asorted/Text"));
|
|
42
39
|
var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy");
|
|
40
|
+
var import_react = __toESM(require("react"));
|
|
43
41
|
var import_InvertTheme = require("../../../styles/InvertTheme");
|
|
42
|
+
var import_Text = __toESM(require("../../asorted/Text"));
|
|
44
43
|
var import_Flex = __toESM(require("../../layout/Flex"));
|
|
45
44
|
var import_Grid = __toESM(require("../../layout/Grid"));
|
|
46
|
-
|
|
47
|
-
const
|
|
45
|
+
var import_index = __toESM(require("./index"));
|
|
46
|
+
const ICON_POSITIONS = ["left", "right"];
|
|
47
|
+
const _assertExhaustiveIconPositions = true;
|
|
48
|
+
const BUTTON_VARIANTS = ["main", "neutral", "shade", "color", "error"];
|
|
49
|
+
const _assertExhaustiveButtonVariants = true;
|
|
50
|
+
const SIZES = [void 0, "xs", "small", "medium", "large", "xl"];
|
|
51
|
+
const _assertExhaustiveSizes = true;
|
|
48
52
|
var Button_stories_default = {
|
|
49
53
|
title: "cta/Button",
|
|
50
54
|
component: import_index.default,
|
|
51
55
|
argTypes: {
|
|
52
56
|
variant: {
|
|
53
|
-
options: [void 0, ...
|
|
57
|
+
options: [void 0, ...BUTTON_VARIANTS],
|
|
54
58
|
control: {
|
|
55
59
|
type: "radio"
|
|
56
60
|
}
|
|
57
61
|
},
|
|
58
62
|
size: {
|
|
59
|
-
options:
|
|
63
|
+
options: SIZES,
|
|
60
64
|
control: { type: "radio" }
|
|
61
65
|
},
|
|
62
66
|
fontSize: {
|
|
@@ -69,7 +73,7 @@ var Button_stories_default = {
|
|
|
69
73
|
type: "text"
|
|
70
74
|
},
|
|
71
75
|
iconPosition: {
|
|
72
|
-
options:
|
|
76
|
+
options: ICON_POSITIONS,
|
|
73
77
|
control: {
|
|
74
78
|
type: "radio"
|
|
75
79
|
}
|
|
@@ -87,11 +91,11 @@ const Overview = ((args) => {
|
|
|
87
91
|
} };
|
|
88
92
|
const propsArr = [
|
|
89
93
|
{ ...templateProps, Icon: void 0 },
|
|
90
|
-
{ ...templateProps, iconPosition:
|
|
91
|
-
{ ...templateProps, iconPosition:
|
|
94
|
+
{ ...templateProps, iconPosition: ICON_POSITIONS[0] },
|
|
95
|
+
{ ...templateProps, iconPosition: ICON_POSITIONS[1] },
|
|
92
96
|
{ ...templateProps, children: "" }
|
|
93
97
|
];
|
|
94
|
-
return /* @__PURE__ */ import_react.default.createElement(import_Grid.default, { columns: "none", gridTemplateColumns: "max-content repeat(4, 1fr)", columnGap: 8, rowGap: 8 },
|
|
98
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Grid.default, { columns: "none", gridTemplateColumns: "max-content repeat(4, 1fr)", columnGap: 8, rowGap: 8 }, BUTTON_VARIANTS.flatMap(
|
|
95
99
|
(buttonType, i) => [false, true].map((outline, j) => /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, { key: `${i}:${j}` }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "small", color: "neutral.c70" }, 'variant="', buttonType, '"', /* @__PURE__ */ import_react.default.createElement("br", null), "outline=", `{${outline.toString()}}`), propsArr.map((buttonProps) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: 1, columnGap: 4 }, [false, true].map((disabled) => /* @__PURE__ */ import_react.default.createElement(
|
|
96
100
|
import_index.default,
|
|
97
101
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;
|
|
4
|
+
"sourcesContent": ["import { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\nimport React, { Fragment } from \"react\";\nimport { AssertExhaustive } from \"src/helpers.types\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Text from \"../../asorted/Text\";\nimport { StoryTemplate } from \"../../helpers\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport Button, { ButtonExpandProps, ButtonProps } from \"./index\";\n\nconst ICON_POSITIONS = [\"left\", \"right\"] as const;\nconst _assertExhaustiveIconPositions: AssertExhaustive<\n (typeof ICON_POSITIONS)[number],\n NonNullable<ButtonProps[\"iconPosition\"]>\n> = true;\n\nconst BUTTON_VARIANTS = [\"main\", \"neutral\", \"shade\", \"color\", \"error\"] as const;\nconst _assertExhaustiveButtonVariants: AssertExhaustive<\n (typeof BUTTON_VARIANTS)[number],\n NonNullable<ButtonProps[\"variant\"]>\n> = true;\n\nconst SIZES = [undefined, \"xs\", \"small\", \"medium\", \"large\", \"xl\"] as const;\nconst _assertExhaustiveSizes: AssertExhaustive<(typeof SIZES)[number], ButtonProps[\"size\"]> = true;\n\nexport default {\n title: \"cta/Button\",\n component: Button,\n argTypes: {\n variant: {\n options: [undefined, ...BUTTON_VARIANTS],\n control: {\n type: \"radio\",\n },\n },\n size: {\n options: SIZES,\n control: { type: \"radio\" },\n },\n fontSize: {\n options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n control: {\n type: \"radio\",\n },\n },\n children: {\n type: \"text\",\n },\n iconPosition: {\n options: ICON_POSITIONS,\n control: {\n type: \"radio\",\n },\n },\n disabled: {\n type: \"boolean\",\n },\n outline: {\n type: \"boolean\",\n },\n },\n};\n\nexport const Overview = ((args: ButtonProps) => {\n const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n const propsArr = [\n { ...templateProps, Icon: undefined },\n { ...templateProps, iconPosition: ICON_POSITIONS[0] },\n { ...templateProps, iconPosition: ICON_POSITIONS[1] },\n { ...templateProps, children: \"\" },\n ];\n return (\n <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n {BUTTON_VARIANTS.flatMap((buttonType, i) =>\n [false, true].map((outline, j) => (\n <Fragment key={`${i}:${j}`}>\n <Text variant=\"small\" color=\"neutral.c70\">\n variant=\"{buttonType}\"<br />\n outline={`{${outline.toString()}}`}\n </Text>\n {propsArr.map(buttonProps => (\n <Flex flex={1} columnGap={4}>\n {[false, true].map(disabled => (\n <Button\n size={args.size}\n variant={buttonType}\n outline={outline}\n disabled={disabled}\n {...buttonProps}\n />\n ))}\n </Flex>\n ))}\n </Fragment>\n )),\n )}\n </Grid>\n );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = args => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = args => {\n return (\n <Flex flexDirection=\"column\">\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Regular button\"}</Button>\n </Flex>\n <InvertTheme>\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Inverted button\"}</Button>\n </Flex>\n </InvertTheme>\n </Flex>\n );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = args => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n children: \"\",\n Icon: WalletAddMedium,\n iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n const [show, setShow] = React.useState(false);\n return (\n <>\n <Button.Expand {...args} onToggle={setShow}>\n {args.children}\n </Button.Expand>\n {show && (\n <div\n style={{\n padding: \"1rem\",\n }}\n >\n Hello world!\n </div>\n )}\n </>\n );\n};\nExpand.args = {\n children: \"Show all\",\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Button", "React", "Grid", "Text", "Flex"]
|
|
7
7
|
}
|
|
@@ -35,14 +35,14 @@ __export(Button_exports, {
|
|
|
35
35
|
default: () => Button_default
|
|
36
36
|
});
|
|
37
37
|
module.exports = __toCommonJS(Button_exports);
|
|
38
|
+
var import_ChevronBottomMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"));
|
|
38
39
|
var import_react = __toESM(require("react"));
|
|
39
40
|
var import_styled_components = __toESM(require("styled-components"));
|
|
40
|
-
var import_styled = __toESM(require("../../styled"));
|
|
41
41
|
var import_styled_system = require("styled-system");
|
|
42
|
+
var import_helpers = require("../../../styles/helpers");
|
|
42
43
|
var import_fontFamily = __toESM(require("../../../styles/styled/fontFamily"));
|
|
43
44
|
var import_theme = require("../../../styles/theme");
|
|
44
|
-
var
|
|
45
|
-
var import_ChevronBottomMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"));
|
|
45
|
+
var import_styled = __toESM(require("../../styled"));
|
|
46
46
|
const IconContainer = import_styled_components.default.div`
|
|
47
47
|
display: inline-block;
|
|
48
48
|
${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
|
|
@@ -279,6 +279,10 @@ const buttonSizeStyle = {
|
|
|
279
279
|
large: {
|
|
280
280
|
padding: "0 28px",
|
|
281
281
|
height: "48px"
|
|
282
|
+
},
|
|
283
|
+
xl: {
|
|
284
|
+
padding: "0 28px",
|
|
285
|
+
height: "56px"
|
|
282
286
|
}
|
|
283
287
|
};
|
|
284
288
|
Button.Unstyled = ButtonUnstyled;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,+BAAyC;AACzC,
|
|
4
|
+
"sourcesContent": ["import ChevronBottom from \"@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium\";\nimport React, { useMemo, useState } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport { border, BordersProps, compose, fontSize } from \"styled-system\";\nimport { rgba } from \"../../../styles/helpers\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\ntype ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\ntype IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n size?: \"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\";\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n Icon?: React.ReactElement | React.ComponentType<{ size: number; color?: string }>;\n children?: React.ReactNode;\n onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n iconSize?: number;\n style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n iconPosition: IconPosition;\n}>`\n display: inline-block;\n ${p => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n main: {\n outline: `\n border-color: ${p.theme.colors.neutral.c100};\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover, &:focus {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.neutral.c100};\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c90};\n }\n `,\n },\n shade: `\n border-color: ${p.theme.colors.neutral.c40};\n color: ${p.theme.colors.neutral.c100};\n &:focus {\n border-color: ${p.theme.colors.primary.c80};\n }\n\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c20};\n }\n\n &:active {\n background-color: ${p.theme.colors.neutral.c30};\n }\n `,\n error: {\n outline: `\n border-color: ${p.theme.colors.error.c50};\n color: ${p.theme.colors.error.c50};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c50};\n &:hover {\n background-color: ${p.theme.colors.error.c40};\n }\n `,\n },\n neutral: `\n color: ${p.theme.colors.neutral.c100};\n background-color: ${p.theme.colors.neutral.c30};\n &:hover {\n background-color: ${p.theme.colors.neutral.c40};\n }\n `,\n color: {\n outline: `\n border-color: ${p.theme.colors.primary.c80};\n color: ${p.theme.colors.primary.c80};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.primary.c80};\n &:hover {\n background-color: ${p.theme.colors.primary.c70};\n }\n `,\n },\n disabled: {\n outline: `\n border-color: ${p.theme.colors.neutral.c50};\n color: ${p.theme.colors.neutral.c50};\n background-color: transparent;\n &:focus, &:hover {\n box-shadow: none;\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\n &:focus, &:hover {\n box-shadow: none;\n }\n `,\n },\n default: `\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover {\n text-decoration: underline;\n }\n `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n all: unset;\n cursor: pointer;\n\n &:disabled {\n cursor: default;\n }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n fontFamily: \"Inter\",\n fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n background-color: transparent;\n border-color: transparent;\n border-radius: 44px;\n border-style: solid;\n border-width: ${p => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n font-weight: 600;\n ${compose(fontFamily, fontSize, border)};\n line-height: ${p => p.theme.fontSizes[p.fontSize]}px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n ${p => buttonSizeStyle[p.size || \"medium\"]}\n text-overflow: ellipsis;\n white-space: ${p => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n max-width: 100%;\n position: relative;\n cursor: ${p => (p.disabled ? \"default\" : \"pointer\")};\n &:active {\n box-shadow: 0 0 0 4px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n &:focus, &:hover {\n box-shadow: 0 0 0 2px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n\n ${p => {\n const variants = getVariantColors(p);\n if (p.disabled) {\n return p.outline || p.variant === \"shade\"\n ? variants.disabled.outline\n : variants.disabled.filled;\n }\n\n const variant: ButtonVariants | \"default\" =\n p.variant ?? (\"default\" as ButtonVariants | \"default\");\n switch (variant) {\n case \"main\":\n return p.outline ? variants.main.outline : variants.main.filled;\n case \"shade\":\n return variants.shade;\n\n case \"error\":\n return p.outline ? variants.error.outline : variants.error.filled;\n\n case \"color\":\n return p.outline ? variants.color.outline : variants.color.filled;\n\n case \"neutral\":\n return variants.neutral;\n\n case \"default\":\n default:\n return variants.default;\n }\n }}\n ${p =>\n p.iconButton\n ? css`\n width: ${p.theme.space[12]}px;\n padding: 0;\n ${IconContainer} {\n margin: 0;\n }\n `\n : \"\"}\n ${p => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n const IconNode = useMemo(() => {\n if (!Icon) return null;\n if (typeof Icon === \"object\") return Icon;\n return <Icon size={iconNodeSize} />;\n }, [iconNodeSize, Icon]);\n\n return (\n <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n </Base>\n );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n ButtonProps & {\n onToggle?: (arg0: boolean) => void;\n }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs(props => ({\n Icon: props.Icon != null || ChevronBottom,\n iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n ${IconContainer} {\n transition: transform 0.25s;\n ${p => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n }\n`;\nexport function ButtonExpand(\n { onToggle, onClick, ...props }: ButtonExpandProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n const [expanded, setExpanded] = useState(false);\n return (\n <StyledButtonExpand\n {...props}\n ref={ref}\n expanded={expanded}\n onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n setExpanded(expanded => !expanded);\n onToggle != null && onToggle(!expanded);\n onClick != null && onClick(event);\n }}\n />\n );\n}\n\nexport const buttonSizeStyle: {\n [index: string]: {\n padding: string;\n height: string;\n };\n} = {\n xs: {\n padding: \"0 12px\",\n height: \"28px\",\n },\n small: {\n padding: \"0 20px\",\n height: \"32px\",\n },\n medium: {\n padding: \"0 24px\",\n height: \"40px\",\n },\n large: {\n padding: \"0 28px\",\n height: \"48px\",\n },\n xl: {\n padding: \"0 28px\",\n height: \"56px\",\n },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "baseStyled", "fontFamily", "React", "ChevronBottom", "expanded"]
|
|
7
7
|
}
|
|
@@ -47,10 +47,10 @@ const Input = import_styled_components.default.input`
|
|
|
47
47
|
border-radius: ${(p) => `${p.theme.radii[1]}px`};
|
|
48
48
|
position: relative;
|
|
49
49
|
|
|
50
|
-
min-width: ${(p) => p.theme.space[7]}px;
|
|
51
|
-
height: ${(p) => p.theme.space[7]}px;
|
|
50
|
+
min-width: ${(p) => p.size ? `${p.size}px` : `${p.theme.space[7]}px`};
|
|
51
|
+
height: ${(p) => p.size ? `${p.size}px` : `${p.theme.space[7]}px`};
|
|
52
52
|
appearance: none;
|
|
53
|
-
border: 1px solid ${(props) => props.theme.colors.
|
|
53
|
+
border: 1px solid ${(props) => props.theme.colors.opacityDefault.c30};
|
|
54
54
|
box-shadow: none;
|
|
55
55
|
|
|
56
56
|
&:checked {
|
|
@@ -60,8 +60,8 @@ const Input = import_styled_components.default.input`
|
|
|
60
60
|
|
|
61
61
|
&:checked::after {
|
|
62
62
|
content: " ";
|
|
63
|
-
width: ${(p) => p.theme.space[7]}px;
|
|
64
|
-
height: ${(p) => p.theme.space[7]}px;
|
|
63
|
+
width: ${(p) => p.size ? `${p.size}px` : `${p.theme.space[7]}px`};
|
|
64
|
+
height: ${(p) => p.size ? `${p.size}px` : `${p.theme.space[7]}px`};
|
|
65
65
|
display: inline-block;
|
|
66
66
|
color: ${(props) => props.theme.colors.neutral.c00};
|
|
67
67
|
|
|
@@ -119,7 +119,8 @@ const Checkbox = ({
|
|
|
119
119
|
label,
|
|
120
120
|
isChecked,
|
|
121
121
|
name,
|
|
122
|
-
onChange
|
|
122
|
+
onChange,
|
|
123
|
+
size
|
|
123
124
|
}) => /* @__PURE__ */ import_react.default.createElement(Container, { "data-variant": variant, "data-disabled": isDisabled }, /* @__PURE__ */ import_react.default.createElement(
|
|
124
125
|
Input,
|
|
125
126
|
{
|
|
@@ -128,7 +129,8 @@ const Checkbox = ({
|
|
|
128
129
|
id: name,
|
|
129
130
|
checked: isChecked,
|
|
130
131
|
disabled: isDisabled,
|
|
131
|
-
onChange: () => onChange(!isChecked)
|
|
132
|
+
onChange: () => onChange(!isChecked),
|
|
133
|
+
size
|
|
132
134
|
}
|
|
133
135
|
), label ? /* @__PURE__ */ import_react.default.createElement(Label, { as: "label", htmlFor: name }, label) : null);
|
|
134
136
|
var Checkbox_default = Checkbox;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Checkbox/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneMedium from \"@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,8BAA6B;AAC7B,oBAAqC;AAErC,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,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneMedium from \"@ledgerhq/icons-ui/reactLegacy/CheckAloneMedium\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\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 Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n color: ${props => props.theme.colors.neutral.c80};\n\n /* Version when the input is checked */\n ${Input}:checked + & {\n color: currentColor;\n }\n\n &:first-letter {\n text-transform: uppercase;\n }\n`;\n\nconst Container = styled.div`\n --ll-checkbox-color: unset;\n color: var(--ll-checkbox-color, ${props => props.theme.colors.primary.c90});\n\n display: inline-flex;\n column-gap: ${p => p.theme.space[5]}px;\n align-items: center;\n cursor: pointer;\n\n &[data-variant=\"default\"] {\n --ll-checkbox-color: ${props => props.theme.colors.primary.c90};\n }\n\n &[data-variant=\"success\"] {\n --ll-checkbox-color: ${props => props.theme.colors.success.c50};\n }\n\n &[data-variant=\"error\"] {\n --ll-checkbox-color: ${props => props.theme.colors.error.c50};\n }\n\n &[data-disabled=\"true\"] {\n --ll-checkbox-color: ${props => props.theme.colors.neutral.c80};\n cursor: unset;\n }\n`;\n\nexport type CheckboxProps = {\n isDisabled?: boolean;\n isChecked: boolean;\n variant?: \"default\" | \"success\" | \"error\";\n label?: React.ReactNode;\n name: string;\n onChange: (value: boolean) => void;\n size?: number;\n};\n\nconst Checkbox = ({\n isDisabled = false,\n variant = \"default\",\n label,\n isChecked,\n name,\n onChange,\n size,\n}: CheckboxProps): JSX.Element => (\n <Container data-variant={variant} data-disabled={isDisabled}>\n <Input\n type=\"checkbox\"\n name={name}\n id={name}\n checked={isChecked}\n disabled={isDisabled}\n onChange={() => onChange(!isChecked)}\n size={size}\n />\n {label ? (\n <Label as=\"label\" htmlFor={name}>\n {label}\n </Label>\n ) : null}\n </Container>\n);\n\nexport default Checkbox;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,8BAA6B;AAC7B,oBAAqC;AAErC,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,YAAQ,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,YAAY,MAAM,CAAC;AAAA,WACzD,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,IAG9C,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAST,MAAM,YAAY,yBAAAD,QAAO;AAAA;AAAA,oCAEW,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,gBAG3D,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKV,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,2BAIvC,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,2BAIvC,WAAS,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,2BAIrC,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAelE,MAAM,WAAW,CAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6BAAAF,QAAA,cAAC,aAAU,gBAAc,SAAS,iBAAe,cAC/C,6BAAAA,QAAA;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU,MAAM,SAAS,CAAC,SAAS;AAAA,IACnC;AAAA;AACF,GACC,QACC,6BAAAA,QAAA,cAAC,SAAM,IAAG,SAAQ,SAAS,QACxB,KACH,IACE,IACN;AAGF,IAAO,mBAAQ;",
|
|
6
6
|
"names": ["React", "CheckAloneMedium", "styled", "Text"]
|
|
7
7
|
}
|
|
@@ -65,7 +65,13 @@ var Checkbox_stories_default = {
|
|
|
65
65
|
required: false,
|
|
66
66
|
control: { type: "text" }
|
|
67
67
|
},
|
|
68
|
-
name: { control: false }
|
|
68
|
+
name: { control: false },
|
|
69
|
+
size: {
|
|
70
|
+
type: "number",
|
|
71
|
+
description: "Size of the checkbox",
|
|
72
|
+
required: false,
|
|
73
|
+
control: { type: "number" }
|
|
74
|
+
}
|
|
69
75
|
}
|
|
70
76
|
};
|
|
71
77
|
const Template = (args) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Checkbox/Checkbox.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Checkbox from \"./index\";\nimport type { CheckboxProps } from \"./Checkbox\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n title: \"Form/SelectionControls/Checkbox\",\n component: Checkbox,\n argTypes: {\n isDisabled: {\n type: \"boolean\",\n description: \"Control if the component is disabled or not\",\n required: false,\n control: { type: \"boolean\" },\n },\n isChecked: {\n type: \"boolean\",\n description: \"Control if the component is checked or not\",\n required: true,\n control: { type: \"boolean\" },\n },\n variant: {\n type: \"text\",\n description: \"default | success | error\",\n required: false,\n control: false,\n },\n label: {\n type: \"text\",\n description: \"Any valid string\",\n required: false,\n control: { type: \"text\" },\n },\n name: { control: false },\n },\n};\n\nconst Template = (args: CheckboxProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });\n\n return <Checkbox {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Success: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Error: StoryTemplate<CheckboxProps> = Template.bind({});\n\nDefault.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"default\",\n name: \"default checkbox\",\n};\n\nSuccess.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"success\",\n name: \"success checkbox\",\n};\n\nError.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"error\",\n name: \"error checkbox\",\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAAwB;AAExB,mBAAqB;AAIrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM,EAAE,SAAS,MAAM;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Checkbox from \"./index\";\nimport type { CheckboxProps } from \"./Checkbox\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n title: \"Form/SelectionControls/Checkbox\",\n component: Checkbox,\n argTypes: {\n isDisabled: {\n type: \"boolean\",\n description: \"Control if the component is disabled or not\",\n required: false,\n control: { type: \"boolean\" },\n },\n isChecked: {\n type: \"boolean\",\n description: \"Control if the component is checked or not\",\n required: true,\n control: { type: \"boolean\" },\n },\n variant: {\n type: \"text\",\n description: \"default | success | error\",\n required: false,\n control: false,\n },\n label: {\n type: \"text\",\n description: \"Any valid string\",\n required: false,\n control: { type: \"text\" },\n },\n name: { control: false },\n size: {\n type: \"number\",\n description: \"Size of the checkbox\",\n required: false,\n control: { type: \"number\" },\n },\n },\n};\n\nconst Template = (args: CheckboxProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });\n\n return <Checkbox {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Success: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Error: StoryTemplate<CheckboxProps> = Template.bind({});\n\nDefault.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"default\",\n name: \"default checkbox\",\n};\n\nSuccess.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"success\",\n name: \"success checkbox\",\n};\n\nError.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"error\",\n name: \"error checkbox\",\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAAwB;AAExB,mBAAqB;AAIrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM,EAAE,SAAS,MAAM;AAAA,IACvB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAAwB;AACxC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,eAAe,MAAM,WAAW,EAAE,WAAW,CAAC,YAAY,UAAU,CAAC;AAE3E,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,UAAU,cAAc;AACrD;AAEO,MAAM,UAAwC,SAAS,KAAK,CAAC,CAAC;AAC9D,MAAM,UAAwC,SAAS,KAAK,CAAC,CAAC;AAC9D,MAAMD,SAAsC,SAAS,KAAK,CAAC,CAAC;AAEnE,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEA,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEAA,OAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;",
|
|
6
6
|
"names": ["Error", "Checkbox", "React"]
|
|
7
7
|
}
|
|
@@ -57,10 +57,14 @@ const getContainerBorder = (theme, status, isLastItem) => {
|
|
|
57
57
|
return "transparent";
|
|
58
58
|
};
|
|
59
59
|
const Container = (0, import_styled_components.default)(import__2.Flex)`
|
|
60
|
+
position: relative;
|
|
60
61
|
flex: 1;
|
|
61
62
|
border-radius: ${(p) => p.theme.radii[2]}px;
|
|
62
63
|
background: ${(p) => getContainerBackground(p.theme, p.status)};
|
|
63
64
|
border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
65
|
+
`;
|
|
66
|
+
const TextContainer = (0, import_styled_components.default)(import__2.Flex)`
|
|
67
|
+
flex: 1;
|
|
64
68
|
padding: 20px 16px;
|
|
65
69
|
`;
|
|
66
70
|
const TimelineIndicatorContentHeader = (0, import_styled_components.default)(import__2.Flex)`
|
|
@@ -77,7 +81,7 @@ function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
|
|
|
77
81
|
isLastItem,
|
|
78
82
|
mr: 4
|
|
79
83
|
}
|
|
80
|
-
), /* @__PURE__ */ import_react.default.createElement(Container, { status: item.status, isLastItem, mb: 4, flexDirection: "column" }, /* @__PURE__ */ import_react.default.createElement(TimelineIndicatorContentHeader, { height: "20px" }, /* @__PURE__ */ import_react.default.createElement(
|
|
84
|
+
), /* @__PURE__ */ import_react.default.createElement(Container, { status: item.status, isLastItem, overflow: "hidden" }, item.status === "active" ? item.background : null, /* @__PURE__ */ import_react.default.createElement(TextContainer, { mb: 4, flexDirection: "column", zIndex: 1 }, /* @__PURE__ */ import_react.default.createElement(TimelineIndicatorContentHeader, { height: "20px" }, /* @__PURE__ */ import_react.default.createElement(
|
|
81
85
|
import__3.Text,
|
|
82
86
|
{
|
|
83
87
|
variant: "body",
|
|
@@ -95,7 +99,7 @@ function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
|
|
|
95
99
|
textProps: { color: colors.neutral.c100 }
|
|
96
100
|
},
|
|
97
101
|
`${item.estimatedTime / 60} min`
|
|
98
|
-
) || (item == null ? void 0 : item.hasLoader) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import_InfiniteLoader.default, { size: 30 })), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))));
|
|
102
|
+
) || (item == null ? void 0 : item.hasLoader) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import_InfiniteLoader.default, { size: 30 })), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active")))));
|
|
99
103
|
}
|
|
100
104
|
var TimelineItem_default = import_react.default.memo(TimelineItem);
|
|
101
105
|
//# sourceMappingURL=TimelineItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"../../../../styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\nimport InfiniteLoader from \"../../../loaders/InfiniteLoader\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n item: Item;\n isFirstItem?: boolean;\n isLastItem?: boolean;\n onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c20;\n }\n return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (isLastItem && status === \"active\") {\n return theme.colors.success.c50;\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n }\n return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n flex: 1;\n border-radius: ${p => p.theme.radii[2]}px;\n background: ${p => getContainerBackground(p.theme, p.status)};\n border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};\n padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n justify-content: space-between;\n align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n const { colors } = useTheme();\n\n return (\n <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n <TimelineIndicator\n status={item.status}\n isFirstItem={isFirstItem}\n isLastItem={isLastItem}\n mr={4}\n />\n <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAChB,4BAA2B;AAE3B,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"../../../../styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\nimport InfiniteLoader from \"../../../loaders/InfiniteLoader\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n item: Item;\n isFirstItem?: boolean;\n isLastItem?: boolean;\n onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c20;\n }\n return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (isLastItem && status === \"active\") {\n return theme.colors.success.c50;\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n }\n return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n position: relative;\n flex: 1;\n border-radius: ${p => p.theme.radii[2]}px;\n background: ${p => getContainerBackground(p.theme, p.status)};\n border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};\n`;\n\nconst TextContainer = styled(Flex)`\n flex: 1;\n padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n justify-content: space-between;\n align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n const { colors } = useTheme();\n\n return (\n <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n <TimelineIndicator\n status={item.status}\n isFirstItem={isFirstItem}\n isLastItem={isLastItem}\n mr={4}\n />\n <Container status={item.status} isLastItem={isLastItem} overflow=\"hidden\">\n {item.status === \"active\" ? item.background : null}\n\n <TextContainer mb={4} flexDirection=\"column\" zIndex={1}>\n <TimelineIndicatorContentHeader height=\"20px\">\n <Text\n variant=\"body\"\n fontWeight={item.status === \"active\" ? \"semiBold\" : \"medium\"}\n color={\n item.status !== \"inactive\" && isLastItem\n ? \"success.c70\"\n : item.status === \"active\"\n ? \"primary.c80\"\n : \"neutral.c70\"\n }\n >\n {item.title}\n </Text>\n {(item?.estimatedTime && item.status === \"active\" && (\n <Tag\n size=\"small\"\n type=\"opacity\"\n active\n disabled\n textProps={{ color: colors.neutral.c100 }}\n >{`${item.estimatedTime / 60} min`}</Tag>\n )) ||\n (item?.hasLoader && item.status === \"active\" && <InfiniteLoader size={30} />)}\n </TimelineIndicatorContentHeader>\n {item.renderBody && item.status === \"active\" && (\n <Box position=\"relative\" pt={6}>\n {item.renderBody(item.status === \"active\")}\n </Box>\n )}\n </TextContainer>\n </Container>\n </Flex>\n );\n}\n\nexport default React.memo(TimelineItem);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAChB,4BAA2B;AAE3B,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA;AAAA,mBAGV,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,gBACxB,OAAK,uBAAuB,EAAE,OAAO,EAAE,MAAM,CAAC;AAAA,sBACxC,OAAK,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA;AAG9E,MAAM,oBAAgB,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKjC,MAAM,qCAAiC,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKlD,SAAS,aAAa,EAAE,MAAM,aAAa,YAAY,QAAQ,GAAU;AACvE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,kBAAK,eAAc,OAAM,SAAkB,MAAM,KAChD,6BAAAA,QAAA;AAAA,IAAC,yBAAAC;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA;AAAA,EACN,GACA,6BAAAD,QAAA,cAAC,aAAU,QAAQ,KAAK,QAAQ,YAAwB,UAAS,YAC9D,KAAK,WAAW,WAAW,KAAK,aAAa,MAE9C,6BAAAA,QAAA,cAAC,iBAAc,IAAI,GAAG,eAAc,UAAS,QAAQ,KACnD,6BAAAA,QAAA,cAAC,kCAA+B,QAAO,UACrC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAY,KAAK,WAAW,WAAW,aAAa;AAAA,MACpD,OACE,KAAK,WAAW,cAAc,aAC1B,gBACA,KAAK,WAAW,WACd,gBACA;AAAA;AAAA,IAGP,KAAK;AAAA,EACR,IACE,6BAAM,kBAAiB,KAAK,WAAW,YACvC,6BAAAA,QAAA;AAAA,IAAC,WAAAE;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAM;AAAA,MACN,UAAQ;AAAA,MACR,WAAW,EAAE,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,IACxC,GAAG,KAAK,gBAAgB,EAAE;AAAA,EAAO,MAElC,6BAAM,cAAa,KAAK,WAAW,YAAY,6BAAAF,QAAA,cAAC,sBAAAG,SAAA,EAAe,MAAM,IAAI,CAC9E,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAH,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
|
|
6
6
|
"names": ["import__", "styled", "React", "TimelineIndicator", "Tag", "InfiniteLoader"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport Text, { TextProps } from \"../../../asorted/Text\";\nimport { BaseStyledProps } from \"../../../styled\";\n\nexport type ItemStatus = \"inactive\" | \"active\" | \"completed\";\n\nexport type Item = {\n status: ItemStatus;\n title: string;\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n estimatedTime?: number;\n hasLoader?: boolean;\n};\n\nexport type Props = BaseStyledProps & {\n steps?: Item[];\n onClickIndex?: (index: number) => void;\n};\n\nexport default function VerticalTimeline({ steps, onClickIndex, ...props }: Props) {\n return (\n <Flex {...props} flexDirection=\"column\" flex={1}>\n {steps?.map((step, index) => (\n <TimelineItem\n key={index}\n item={step}\n isFirstItem={index === 0}\n isLastItem={index === steps.length - 1}\n onClick={onClickIndex ? () => onClickIndex(index) : undefined}\n />\n ))}\n </Flex>\n );\n}\n\nconst SubtitleText: React.FC<TextProps> = props => (\n <Text variant=\"body\" fontWeight=\"semiBold\" color=\"neutral.c100\" mb={3} {...props} />\n);\n\nconst BodyText: React.FC<TextProps> = props => (\n <Text variant=\"bodyLineHeight\" fontWeight=\"medium\" color=\"neutral.c80\" {...props} />\n);\n\nVerticalTimeline.BodyText = BodyText;\nVerticalTimeline.SubtitleText = SubtitleText;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AACrB,kBAAgC;
|
|
4
|
+
"sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport Text, { TextProps } from \"../../../asorted/Text\";\nimport { BaseStyledProps } from \"../../../styled\";\n\nexport type ItemStatus = \"inactive\" | \"active\" | \"completed\";\n\nexport type Item = {\n status: ItemStatus;\n title: string;\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n estimatedTime?: number;\n hasLoader?: boolean;\n background?: ReactNode;\n};\n\nexport type Props = BaseStyledProps & {\n steps?: Item[];\n onClickIndex?: (index: number) => void;\n};\n\nexport default function VerticalTimeline({ steps, onClickIndex, ...props }: Props) {\n return (\n <Flex {...props} flexDirection=\"column\" flex={1}>\n {steps?.map((step, index) => (\n <TimelineItem\n key={index}\n item={step}\n isFirstItem={index === 0}\n isLastItem={index === steps.length - 1}\n onClick={onClickIndex ? () => onClickIndex(index) : undefined}\n />\n ))}\n </Flex>\n );\n}\n\nconst SubtitleText: React.FC<TextProps> = props => (\n <Text variant=\"body\" fontWeight=\"semiBold\" color=\"neutral.c100\" mb={3} {...props} />\n);\n\nconst BodyText: React.FC<TextProps> = props => (\n <Text variant=\"bodyLineHeight\" fontWeight=\"medium\" color=\"neutral.c80\" {...props} />\n);\n\nVerticalTimeline.BodyText = BodyText;\nVerticalTimeline.SubtitleText = SubtitleText;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AACrB,kBAAgC;AAmBjB,SAAR,iBAAkC,EAAE,OAAO,cAAc,GAAG,MAAM,GAAU;AACjF,SACE,6BAAAA,QAAA,cAAC,iBAAM,GAAG,OAAO,eAAc,UAAS,MAAM,KAC3C,+BAAO,IAAI,CAAC,MAAM,UACjB,6BAAAA,QAAA;AAAA,IAAC,oBAAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM;AAAA,MACN,aAAa,UAAU;AAAA,MACvB,YAAY,UAAU,MAAM,SAAS;AAAA,MACrC,SAAS,eAAe,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,EACtD,EAEJ;AAEJ;AAEA,MAAM,eAAoC,WACxC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAO,YAAW,YAAW,OAAM,gBAAe,IAAI,GAAI,GAAG,OAAO;AAGpF,MAAM,WAAgC,WACpC,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,kBAAiB,YAAW,UAAS,OAAM,eAAe,GAAG,OAAO;AAGpF,iBAAiB,WAAW;AAC5B,iBAAiB,eAAe;",
|
|
6
6
|
"names": ["React", "TimelineItem", "Text"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
var helpers_types_exports = {};
|
|
16
|
+
module.exports = __toCommonJS(helpers_types_exports);
|
|
17
|
+
const _x = true;
|
|
18
|
+
//# sourceMappingURL=helpers.types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/helpers.types.ts"],
|
|
4
|
+
"sourcesContent": ["type AssertExhaustiveConstraint = string | number | bigint | boolean | null | undefined;\n\n/**\n * Asserts that the type B is a subset of A and vice versa.\n *\n * How to use:\n * ```\n * const _assertSomething: AssertExhaustive<\n * 'foo' | 'bar',\n * 'foo' | 'bar' | 'baz'\n * > = true;\n *\n * This will throw an error if the type 'baz' is missing from the union.\n */\nexport type AssertExhaustive<\n A extends AssertExhaustiveConstraint,\n B extends AssertExhaustiveConstraint,\n> = [A] extends [B]\n ? [B] extends [A]\n ? true\n : `Type A is missing: ${Exclude<B, A>}`\n : `Type B is missing: ${Exclude<A, B>}`;\n\nconst _x: AssertExhaustive<\"foo\" | \"bar\" | \"baz\", \"foo\" | \"bar\" | \"baz\"> = true;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAuBA,MAAM,KAAqE;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -33,26 +33,29 @@ __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_libs = require("../../libs");
|
|
37
36
|
var import_components = require("../../../components");
|
|
38
|
-
var
|
|
37
|
+
var import_libs = require("../../libs");
|
|
39
38
|
var import_Address = require("../Address/Address");
|
|
39
|
+
var import_Tag = require("../Tag/Tag");
|
|
40
40
|
const Wrapper = import_styled_components.default.div`
|
|
41
41
|
${(0, import_libs.withTokens)(
|
|
42
42
|
"spacing-xxxs",
|
|
43
43
|
"spacing-xxs",
|
|
44
44
|
"spacing-xs",
|
|
45
|
+
"margin-s",
|
|
45
46
|
"radius-s",
|
|
47
|
+
"radius-m",
|
|
46
48
|
"colors-content-default-default",
|
|
47
49
|
"colors-surface-transparent-hover",
|
|
48
50
|
"colors-surface-transparent-pressed",
|
|
49
|
-
"colors-content-subdued-default-default"
|
|
51
|
+
"colors-content-subdued-default-default",
|
|
52
|
+
"colors-surface-transparent-subdued-default"
|
|
50
53
|
)}
|
|
51
54
|
|
|
52
55
|
display: flex;
|
|
53
|
-
padding: var(--
|
|
56
|
+
padding: var(--margin-s);
|
|
54
57
|
cursor: pointer;
|
|
55
|
-
border-radius: var(--radius-
|
|
58
|
+
border-radius: var(--radius-m);
|
|
56
59
|
justify-content: space-between;
|
|
57
60
|
align-items: center;
|
|
58
61
|
width: 100%;
|
|
@@ -61,6 +64,8 @@ const Wrapper = import_styled_components.default.div`
|
|
|
61
64
|
min-width: 200px;
|
|
62
65
|
overflow: hidden;
|
|
63
66
|
|
|
67
|
+
background-color: ${(p) => p.backgroundColor ? p.backgroundColor : "transparent"};
|
|
68
|
+
|
|
64
69
|
:hover {
|
|
65
70
|
background-color: var(--colors-surface-transparent-hover);
|
|
66
71
|
}
|
|
@@ -70,13 +75,14 @@ const Wrapper = import_styled_components.default.div`
|
|
|
70
75
|
}
|
|
71
76
|
`;
|
|
72
77
|
const ContentContainer = import_styled_components.default.div`
|
|
78
|
+
align-items: center;
|
|
73
79
|
display: flex;
|
|
80
|
+
flex: 1;
|
|
81
|
+
gap: var(--spacing-xs);
|
|
74
82
|
justify-content: space-between;
|
|
75
|
-
align-items: center;
|
|
76
83
|
min-width: 0;
|
|
77
|
-
flex: 1;
|
|
78
|
-
width: 100%;
|
|
79
84
|
overflow: hidden;
|
|
85
|
+
width: 100%;
|
|
80
86
|
`;
|
|
81
87
|
const AccountInfoContainer = import_styled_components.default.div`
|
|
82
88
|
display: flex;
|
|
@@ -113,13 +119,18 @@ const TagWrapper = import_styled_components.default.div`
|
|
|
113
119
|
const BalanceContainer = import_styled_components.default.div`
|
|
114
120
|
display: flex;
|
|
115
121
|
flex-direction: column;
|
|
116
|
-
text-align: right;
|
|
117
122
|
flex-shrink: 0;
|
|
118
|
-
|
|
123
|
+
text-align: right;
|
|
119
124
|
`;
|
|
120
|
-
const AccountItem = ({
|
|
125
|
+
const AccountItem = ({
|
|
126
|
+
onClick,
|
|
127
|
+
account,
|
|
128
|
+
rightElement,
|
|
129
|
+
showIcon = true,
|
|
130
|
+
backgroundColor
|
|
131
|
+
}) => {
|
|
121
132
|
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
122
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { 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(
|
|
133
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick, backgroundColor }, /* @__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(
|
|
123
134
|
import_components.Text,
|
|
124
135
|
{
|
|
125
136
|
variant: "largeLineHeight",
|
|
@@ -145,6 +156,6 @@ const AccountItem = ({ onClick, account, showIcon = true }) => {
|
|
|
145
156
|
parentId,
|
|
146
157
|
showIcon
|
|
147
158
|
}
|
|
148
|
-
)), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))));
|
|
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 }))));
|
|
149
160
|
};
|
|
150
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
|
}
|