@ledgerhq/react-ui 0.8.1 → 0.8.2-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 +6 -1
- package/lib/cjs/components/cta/Button/Button.stories.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +16 -2
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js +96 -0
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js.map +7 -0
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js +95 -0
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +7 -0
- package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js +138 -0
- package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js.map +7 -0
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js +41 -0
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map +7 -0
- package/lib/cjs/components/layout/index.js +3 -1
- package/lib/cjs/components/layout/index.js.map +2 -2
- package/lib/cjs/styles/global.js +0 -4
- package/lib/cjs/styles/global.js.map +2 -2
- package/lib/components/cta/Button/index.d.ts +7 -0
- package/lib/components/cta/Button/index.js +15 -2
- package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.d.ts +8 -0
- package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.js +72 -0
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.d.ts +8 -0
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js +59 -0
- package/lib/components/layout/List/VerticalTimeline/index.d.ts +13 -0
- package/lib/components/layout/List/VerticalTimeline/index.js +18 -0
- package/lib/components/layout/index.d.ts +1 -0
- package/lib/components/layout/index.js +1 -0
- package/lib/styles/global.js +0 -4
- package/package.json +1 -1
|
@@ -48,6 +48,10 @@ var Button_stories_default = {
|
|
|
48
48
|
type: "radio"
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
|
+
size: {
|
|
52
|
+
options: [void 0, "small", "medium", "large"],
|
|
53
|
+
control: { type: "radio" }
|
|
54
|
+
},
|
|
51
55
|
fontSize: {
|
|
52
56
|
options: [void 0, 0, 1, 2, 3, 4, 5, 6, 7, 8],
|
|
53
57
|
control: {
|
|
@@ -71,7 +75,7 @@ var Button_stories_default = {
|
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
};
|
|
74
|
-
const Overview = (() => {
|
|
78
|
+
const Overview = ((args) => {
|
|
75
79
|
const templateProps = { Icon: import_react2.PlusMedium, children: "Try me", onClick: () => {
|
|
76
80
|
} };
|
|
77
81
|
const propsArr = [
|
|
@@ -94,6 +98,7 @@ const Overview = (() => {
|
|
|
94
98
|
flex: 1,
|
|
95
99
|
columnGap: 4
|
|
96
100
|
}, [false, true].map((disabled) => /* @__PURE__ */ import_react.default.createElement(import_index.default, {
|
|
101
|
+
size: args.size,
|
|
97
102
|
variant: buttonType,
|
|
98
103
|
outline,
|
|
99
104
|
disabled,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n title: \"cta/Button\",\n component: Button,\n argTypes: {\n variant: {\n options: [undefined, ...buttonVariants],\n control: {\n type: \"radio\",\n },\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: iconPositions,\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 = (() => {\n const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n const propsArr = [\n { ...templateProps, Icon: undefined },\n { ...templateProps, iconPosition: iconPositions[0] },\n { ...templateProps, iconPosition: iconPositions[1] },\n { ...templateProps, children: \"\" },\n ];\n return (\n <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n {buttonVariants.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 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": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,mBAAqF;AACrF,kBAAiB;AACjB,oBAA4C;AAC5C,yBAA4B;AAC5B,kBAAiB;AACjB,kBAAiB;AAGjB,MAAM,gBAAgC,CAAC,QAAQ;AAC/C,MAAM,iBAAmC,CAAC,QAAQ,SAAS,SAAS;AAEpE,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,QAAW,GAAG;AAAA,MACxB,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,UAAU;AAAA,MACR,SAAS,CAAC,QAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC7C,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,IAER,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,IAER,SAAS;AAAA,MACP,MAAM;AAAA;AAAA;AAAA;AAKL,MAAM,WAAY,
|
|
4
|
+
"sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n title: \"cta/Button\",\n component: Button,\n argTypes: {\n variant: {\n options: [undefined, ...buttonVariants],\n control: {\n type: \"radio\",\n },\n },\n size: {\n options: [undefined, \"small\", \"medium\", \"large\"],\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: iconPositions,\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: iconPositions[0] },\n { ...templateProps, iconPosition: iconPositions[1] },\n { ...templateProps, children: \"\" },\n ];\n return (\n <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n {buttonVariants.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": []
|
|
7
7
|
}
|
|
@@ -25,6 +25,7 @@ __export(exports, {
|
|
|
25
25
|
Base: () => Base,
|
|
26
26
|
ButtonExpand: () => ButtonExpand,
|
|
27
27
|
ButtonUnstyled: () => ButtonUnstyled,
|
|
28
|
+
buttonSizeStyle: () => buttonSizeStyle,
|
|
28
29
|
default: () => Button_default
|
|
29
30
|
});
|
|
30
31
|
var import_react = __toModule(require("react"));
|
|
@@ -156,14 +157,13 @@ const Base = import_styled.default.button.attrs((p) => ({
|
|
|
156
157
|
border-width: ${(p) => p.outline || p.variant === "shade" ? 1 : 0}px;
|
|
157
158
|
font-weight: 600;
|
|
158
159
|
${(0, import_styled_system.compose)(import_fontFamily.default, import_styled_system.fontSize, import_styled_system.border)};
|
|
159
|
-
height: ${(p) => p.theme.space[13]}px;
|
|
160
160
|
line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
|
|
161
161
|
text-align: center;
|
|
162
162
|
display: inline-flex;
|
|
163
163
|
align-items: center;
|
|
164
164
|
justify-content: center;
|
|
165
|
-
padding: 0 2em;
|
|
166
165
|
overflow: hidden;
|
|
166
|
+
${(p) => buttonSizeStyle[p.size || "medium"]}
|
|
167
167
|
text-overflow: ellipsis;
|
|
168
168
|
white-space: nowrap;
|
|
169
169
|
max-width: 100%;
|
|
@@ -254,6 +254,20 @@ function ButtonExpand({ onToggle, onClick, ...props }, ref) {
|
|
|
254
254
|
}
|
|
255
255
|
});
|
|
256
256
|
}
|
|
257
|
+
const buttonSizeStyle = {
|
|
258
|
+
small: {
|
|
259
|
+
padding: "0 20px",
|
|
260
|
+
height: "32px"
|
|
261
|
+
},
|
|
262
|
+
medium: {
|
|
263
|
+
padding: "0 24px",
|
|
264
|
+
height: "40px"
|
|
265
|
+
},
|
|
266
|
+
large: {
|
|
267
|
+
padding: "0 28px",
|
|
268
|
+
height: "48px"
|
|
269
|
+
}
|
|
270
|
+
};
|
|
257
271
|
Button.Unstyled = ButtonUnstyled;
|
|
258
272
|
Button.Expand = import_react.default.forwardRef(ButtonExpand);
|
|
259
273
|
ButtonWithRef.Unstyled = Button.Unstyled;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n iconName?: string;\n Icon?: 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 background-color: ${p.theme.colors.neutral.c00};\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.c100};\n color: ${p.theme.colors.error.c100};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c100};\n &:hover {\n background-color: ${p.theme.colors.error.c80};\n }\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 `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\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: ${(p) => p.theme.space[13]}px;\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,+BAAyC;AACzC,oBAA4C;AAC5C,2BAAwD;AACxD,wBAAuB;AACvB,mBAA0B;AAC1B,qBAAqB;AACrB,kCAA0B;AAC1B,kBAA0B;
|
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n size?: \"small\" | \"medium\" | \"large\";\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n iconName?: string;\n Icon?: 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 background-color: ${p.theme.colors.neutral.c00};\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.c100};\n color: ${p.theme.colors.error.c100};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c100};\n &:hover {\n background-color: ${p.theme.colors.error.c80};\n }\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 `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\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: ${(p) => p.theme.space[13]}px;\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: 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 \"default\":\n default:\n return variants.default;\n }\n }}\n ${(p) =>\n p.iconButton\n ? css`\n width: ${p.theme.space[13]}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 {\n Icon,\n iconPosition = \"right\",\n iconSize = 16,\n children,\n onClick,\n iconName,\n ...props\n }: ButtonProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n const IconNode = useMemo(\n () =>\n (iconName && <IconComponent name={iconName} size={iconNodeSize} />) ||\n (Icon && <Icon size={iconNodeSize} />),\n [iconName, iconNodeSize, Icon],\n );\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 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};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,+BAAyC;AACzC,oBAA4C;AAC5C,2BAAwD;AACxD,wBAAuB;AACvB,mBAA0B;AAC1B,qBAAqB;AACrB,kCAA0B;AAC1B,kBAA0B;AAyB1B,MAAM,gBAAgB,iCAAO;AAAA;AAAA,IAIzB,CAAC,MAAM,GAAG,EAAE,iBAAiB,SAAS,iBAAiB,kBAAkB,EAAE,MAAM,MAAM;AAAA;AAAA;AAI3F,MAAM,mBAAmB,CAAC,MAA+B;AAAA,EACvD,MAAM;AAAA,IACJ,SAAS;AAAA,wBACW,EAAE,MAAM,OAAO,QAAQ;AAAA,iBAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,8BAGV,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,8BAGlC,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,IAG5D,QAAQ;AAAA,iBACK,EAAE,MAAM,OAAO,QAAQ;AAAA,4BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,8BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AAAA,sBACa,EAAE,MAAM,OAAO,QAAQ;AAAA,eAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA,0BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,wBAEzB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAInB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAGjD,OAAO;AAAA,IACL,SAAS;AAAA,sBACS,EAAE,MAAM,OAAO,MAAM;AAAA,eAC5B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,4BAGR,yBAAK,EAAE,MAAM,OAAO,MAAM,MAAM;AAAA;AAAA;AAAA,4BAGhC,yBAAK,EAAE,MAAM,OAAO,MAAM,MAAM;AAAA;AAAA;AAAA,IAGxD,QAAQ;AAAA,eACG,EAAE,MAAM,OAAO,QAAQ;AAAA,0BACZ,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,4BAEnB,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,EAI/C,OAAO;AAAA,IACL,SAAS;AAAA,sBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,eAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,4BAGV,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,4BAGlC,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,IAG1D,QAAQ;AAAA,eACG,EAAE,MAAM,OAAO,QAAQ;AAAA,0BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,4BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIjD,UAAU;AAAA,IACR,SAAS;AAAA,wBACW,EAAE,MAAM,OAAO,QAAQ;AAAA,iBAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAGpC,QAAQ;AAAA,iBACK,EAAE,MAAM,OAAO,QAAQ;AAAA,4BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAGjD,SAAS;AAAA,aACE,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7B,MAAM,iBAAiB,sBAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlC,MAAM,OAAO,sBAAW,OAAO,MAAM,CAAC,MAAkB;AAAA,EAC7D,YAAY;AAAA,EACZ,UAAU,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA,mBAIP,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,kBAEtB,CAAC,MAAO,EAAE,WAAW,EAAE,YAAY,UAAU,IAAI;AAAA;AAAA,IAE/D,kCAAQ,2BAAY,+BAAU;AAAA,iBACjB,CAAC,MAAM,EAAE,MAAM,UAAU,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,MAAM,gBAAgB,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKzB,CAAC,MAAO,EAAE,WAAW,YAAY;AAAA;AAAA,4BAEjB,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,4BAGxC,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,IAGhE,CAAC,MAAM;AACP,QAAM,WAAW,iBAAiB;AAClC,MAAI,EAAE,UAAU;AACd,WAAO,EAAE,WAAW,EAAE,YAAY,UAC9B,SAAS,SAAS,UAClB,SAAS,SAAS;AAAA;AAGxB,QAAM,UACJ,EAAE,WAAY;AAChB,UAAQ;AAAA,SACD;AACH,aAAO,EAAE,UAAU,SAAS,KAAK,UAAU,SAAS,KAAK;AAAA,SACtD;AACH,aAAO,SAAS;AAAA,SAEb;AACH,aAAO,EAAE,UAAU,SAAS,MAAM,UAAU,SAAS,MAAM;AAAA,SAExD;AACH,aAAO,EAAE,UAAU,SAAS,MAAM,UAAU,SAAS,MAAM;AAAA,SAExD;AAAA;AAEH,aAAO,SAAS;AAAA;AAAA;AAAA,IAGpB,CAAC,MACD,EAAE,aACE;AAAA,mBACW,EAAE,MAAM,MAAM;AAAA;AAAA,YAErB;AAAA;AAAA;AAAA,YAIJ;AAAA,IACJ,CAAC,MAAM,EAAE,MAAM,WAAW,CAAC,oBAAoB,SAAS,gBAAgB,eAAe;AAAA;AAG3F,MAAM,mBAAmB,iCAAO;AAEhC,MAAM,SAAS,CACb;AAAA,EACE;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GAEL,QACuB;AACvB,QAAM,eAAe,YAAY,uBAAU,MAAM,YAAY;AAC7D,QAAM,WAAW,0BACf,MACG,YAAY,mDAAC,qBAAD;AAAA,IAAe,MAAM;AAAA,IAAU,MAAM;AAAA,QACjD,QAAQ,mDAAC,MAAD;AAAA,IAAM,MAAM;AAAA,MACvB,CAAC,UAAU,cAAc;AAG3B,SACE,mDAAC,MAAD;AAAA,OAAU;AAAA,IAAO;AAAA,IAAU,YAAY,CAAE,SAAQ,SAAS,CAAC;AAAA,IAAU;AAAA,KAClE,iBAAiB,UAAU,mDAAC,kBAAD,MAAmB,YAA+B,MAC7E,YAAY,mDAAC,eAAD;AAAA,IAAe;AAAA,KAA6B,WACxD,iBAAiB,SAAS,mDAAC,kBAAD,MAAmB,YAA+B;AAAA;AAInF,MAAM,gBAAgB,qBAAM,WAAW;AAQvC,MAAM,qBAAqB,sCAAO,eAAe,MAAM,CAAC,UAAW;AAAA,EACjE,MAAM,MAAM,QAAQ,QAAQ;AAAA,EAC5B,cAAc,MAAM,gBAAgB;AAAA;AAAA,IAElC;AAAA;AAAA,MAEE,CAAC,MAAO,EAAE,WAAW,8BAA8B;AAAA;AAAA;AAGlD,sBACL,EAAE,UAAU,YAAY,SACxB,KACoB;AACpB,QAAM,CAAC,UAAU,eAAe,2BAAS;AACzC,SACE,mDAAC,oBAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS,CAAC,UAAmD;AAC3D,kBAAY,CAAC,cAAa,CAAC;AAC3B,kBAAY,QAAQ,SAAS,CAAC;AAC9B,iBAAW,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAM5B,MAAM,kBAKT;AAAA,EACF,OAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA;AAAA,EAEV,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA;AAAA,EAEV,OAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA;AAAA;AAIZ,OAAO,WAAW;AAClB,OAAO,SAAS,qBAAM,WAAW;AACjC,cAAc,WAAW,OAAO;AAChC,cAAc,SAAS,OAAO;AAC9B,IAAO,iBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
__markAsModule(target);
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toModule = (module2) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
__export(exports, {
|
|
25
|
+
default: () => TimelineIndicator
|
|
26
|
+
});
|
|
27
|
+
var import_react = __toModule(require("react"));
|
|
28
|
+
var import_CircledCheckSolidMedium = __toModule(require("@ledgerhq/icons-ui/react/CircledCheckSolidMedium"));
|
|
29
|
+
var import_styled_components = __toModule(require("styled-components"));
|
|
30
|
+
var import_Flex = __toModule(require("../../Flex"));
|
|
31
|
+
const TopSegment = (0, import_styled_components.default)(import_Flex.default)`
|
|
32
|
+
height: ${(p) => p.status === "inactive" ? "18px" : "20px"};
|
|
33
|
+
border-width: ${(p) => p.hidden ? 0 : 1}px;
|
|
34
|
+
border-style: dashed;
|
|
35
|
+
border-color: ${(p) => p.status === "inactive" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};
|
|
36
|
+
background: ${(p) => p.status !== "inactive" && p.theme.colors.primary.c80};
|
|
37
|
+
margin-top: ${(p) => p.status === "inactive" && "2px"};
|
|
38
|
+
`;
|
|
39
|
+
const BottomSegment = (0, import_styled_components.default)(import_Flex.default)`
|
|
40
|
+
flex: 1;
|
|
41
|
+
border-width: ${(p) => p.hidden ? 0 : 1}px;
|
|
42
|
+
border-style: dashed;
|
|
43
|
+
border-color: ${(p) => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};
|
|
44
|
+
background: ${(p) => p.status === "completed" && p.theme.colors.primary.c80};
|
|
45
|
+
`;
|
|
46
|
+
const getIconBackground = (theme, status, isLastItem) => {
|
|
47
|
+
if (status === "completed") {
|
|
48
|
+
return "transparent";
|
|
49
|
+
} else if (isLastItem) {
|
|
50
|
+
return theme.colors.success.c10;
|
|
51
|
+
} else if (status === "active") {
|
|
52
|
+
return theme.colors.neutral.c40;
|
|
53
|
+
}
|
|
54
|
+
return theme.colors.background.main;
|
|
55
|
+
};
|
|
56
|
+
const getIconBorder = (theme, status, isLastItem) => {
|
|
57
|
+
if (isLastItem) {
|
|
58
|
+
return theme.colors.success.c100;
|
|
59
|
+
} else if (status === "inactive") {
|
|
60
|
+
return theme.colors.neutral.c50;
|
|
61
|
+
}
|
|
62
|
+
return theme.colors.primary.c80;
|
|
63
|
+
};
|
|
64
|
+
const CenterSegment = (0, import_styled_components.default)(import_Flex.default)`
|
|
65
|
+
border-radius: 9999px;
|
|
66
|
+
width: 20px;
|
|
67
|
+
height: 20px;
|
|
68
|
+
background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};
|
|
69
|
+
border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
`;
|
|
73
|
+
const IconWrapper = (0, import_styled_components.default)(import_Flex.default)`
|
|
74
|
+
flex: none;
|
|
75
|
+
`;
|
|
76
|
+
function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }) {
|
|
77
|
+
const { colors } = (0, import_styled_components.useTheme)();
|
|
78
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
79
|
+
flexDirection: "column",
|
|
80
|
+
alignItems: "center",
|
|
81
|
+
...props
|
|
82
|
+
}, /* @__PURE__ */ import_react.default.createElement(TopSegment, {
|
|
83
|
+
status,
|
|
84
|
+
hidden: isFirstItem
|
|
85
|
+
}), /* @__PURE__ */ import_react.default.createElement(CenterSegment, {
|
|
86
|
+
status,
|
|
87
|
+
isLastItem
|
|
88
|
+
}, status === "completed" && /* @__PURE__ */ import_react.default.createElement(IconWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_CircledCheckSolidMedium.default, {
|
|
89
|
+
color: isLastItem ? colors.success.c100 : colors.primary.c80,
|
|
90
|
+
size: 24
|
|
91
|
+
}))), /* @__PURE__ */ import_react.default.createElement(BottomSegment, {
|
|
92
|
+
status,
|
|
93
|
+
hidden: isLastItem
|
|
94
|
+
}));
|
|
95
|
+
}
|
|
96
|
+
//# sourceMappingURL=TimelineIndicator.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"src/styles/theme\";\n\nconst TopSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n height: ${(p) => (p.status === \"inactive\" ? \"18px\" : \"20px\")};\n border-width: ${(p) => (p.hidden ? 0 : 1)}px;\n border-style: dashed;\n border-color: ${(p) =>\n p.status === \"inactive\" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};\n background: ${(p) => p.status !== \"inactive\" && p.theme.colors.primary.c80};\n margin-top: ${(p) => p.status === \"inactive\" && \"2px\"};\n`;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n flex: 1;\n border-width: ${(p) => (p.hidden ? 0 : 1)}px;\n border-style: dashed;\n border-color: ${(p) =>\n p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};\n background: ${(p) => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (isLastItem) {\n return theme.colors.success.c10;\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n }\n return theme.colors.background.main;\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n return theme.colors.success.c100;\n } else if (status === \"inactive\") {\n return theme.colors.neutral.c50;\n }\n return theme.colors.primary.c80;\n};\n\nconst CenterSegment = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n border-radius: 9999px;\n width: 20px;\n height: 20px;\n background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};\n border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};\n align-items: center;\n justify-content: center;\n`;\n\nconst IconWrapper = styled(Flex)`\n flex: none;\n`;\n\nexport type Props = FlexProps & {\n status: \"inactive\" | \"active\" | \"completed\";\n isFirstItem?: boolean;\n isLastItem?: boolean;\n};\n\nexport default function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }: Props) {\n const { colors } = useTheme();\n\n return (\n <Flex flexDirection=\"column\" alignItems=\"center\" {...props}>\n <TopSegment status={status} hidden={isFirstItem} />\n <CenterSegment status={status} isLastItem={isLastItem}>\n {status === \"completed\" && (\n <IconWrapper>\n <CircledCheckSolidMedium\n color={isLastItem ? colors.success.c100 : colors.primary.c80}\n size={24}\n />\n </IconWrapper>\n )}\n </CenterSegment>\n <BottomSegment status={status} hidden={isLastItem} />\n </Flex>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa,sCAAO;AAAA,YACd,CAAC,MAAO,EAAE,WAAW,aAAa,SAAS;AAAA,kBACrC,CAAC,MAAO,EAAE,SAAS,IAAI;AAAA;AAAA,kBAEvB,CAAC,MACf,EAAE,WAAW,aAAa,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,gBAClE,CAAC,MAAM,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ;AAAA,gBACzD,CAAC,MAAM,EAAE,WAAW,cAAc;AAAA;AAGlD,MAAM,gBAAgB,sCAAO;AAAA;AAAA,kBAEX,CAAC,MAAO,EAAE,SAAS,IAAI;AAAA;AAAA,kBAEvB,CAAC,MACf,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,gBACnE,CAAC,MAAM,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG1E,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,aACE,YAAY;AACrB,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,WAAW;AAAA;AAGjC,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,gBAAgB,sCAAO;AAAA;AAAA;AAAA;AAAA,gBAIb,CAAC,MAAM,kBAAkB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA,sBACxC,CAAC,MAAM,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKhE,MAAM,cAAc,sCAAO;AAAA;AAAA;AAUZ,2BAA2B,EAAE,QAAQ,aAAa,eAAe,SAAgB;AAC9F,QAAM,EAAE,WAAW;AAEnB,SACE,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,YAAW;AAAA,OAAa;AAAA,KACnD,mDAAC,YAAD;AAAA,IAAY;AAAA,IAAgB,QAAQ;AAAA,MACpC,mDAAC,eAAD;AAAA,IAAe;AAAA,IAAgB;AAAA,KAC5B,WAAW,eACV,mDAAC,aAAD,MACE,mDAAC,wCAAD;AAAA,IACE,OAAO,aAAa,OAAO,QAAQ,OAAO,OAAO,QAAQ;AAAA,IACzD,MAAM;AAAA,QAKd,mDAAC,eAAD;AAAA,IAAe;AAAA,IAAgB,QAAQ;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
__markAsModule(target);
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toModule = (module2) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
__export(exports, {
|
|
25
|
+
default: () => TimelineItem
|
|
26
|
+
});
|
|
27
|
+
var import_react = __toModule(require("react"));
|
|
28
|
+
var import_styled_components = __toModule(require("styled-components"));
|
|
29
|
+
var import__2 = __toModule(require("../.."));
|
|
30
|
+
var import__3 = __toModule(require("../../.."));
|
|
31
|
+
var import_Tag = __toModule(require("../../../Tag"));
|
|
32
|
+
var import_TimelineIndicator = __toModule(require("./TimelineIndicator"));
|
|
33
|
+
const getContainerBackground = (theme, status, isLastItem) => {
|
|
34
|
+
if (isLastItem && status === "completed") {
|
|
35
|
+
return theme.colors.success.c30;
|
|
36
|
+
} else if (status === "completed") {
|
|
37
|
+
return theme.colors.primary.c20;
|
|
38
|
+
} else if (status === "active") {
|
|
39
|
+
return theme.colors.neutral.c20;
|
|
40
|
+
}
|
|
41
|
+
return theme.colors.neutral.c30;
|
|
42
|
+
};
|
|
43
|
+
const getContainerBorder = (theme, status, isLastItem) => {
|
|
44
|
+
if (isLastItem && status === "completed") {
|
|
45
|
+
return theme.colors.success.c30;
|
|
46
|
+
} else if (isLastItem && status === "active") {
|
|
47
|
+
return theme.colors.success.c100;
|
|
48
|
+
} else if (status === "completed") {
|
|
49
|
+
return theme.colors.primary.c20;
|
|
50
|
+
} else if (status === "active") {
|
|
51
|
+
return theme.colors.primary.c80;
|
|
52
|
+
}
|
|
53
|
+
return theme.colors.neutral.c30;
|
|
54
|
+
};
|
|
55
|
+
const Container = (0, import_styled_components.default)(import__2.Flex)`
|
|
56
|
+
flex: 1;
|
|
57
|
+
width: 404px;
|
|
58
|
+
border-radius: ${(p) => p.theme.radii[2]}px;
|
|
59
|
+
background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
|
|
60
|
+
border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
61
|
+
padding: 20px 16px;
|
|
62
|
+
`;
|
|
63
|
+
const TimelineIndicatorContentHeader = (0, import_styled_components.default)(import__2.Flex)`
|
|
64
|
+
justify-content: space-between;
|
|
65
|
+
`;
|
|
66
|
+
function TimelineItem({ item, isFirstItem, isLastItem }) {
|
|
67
|
+
const { colors } = (0, import_styled_components.useTheme)();
|
|
68
|
+
return /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
|
|
69
|
+
flexDirection: "row"
|
|
70
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_TimelineIndicator.default, {
|
|
71
|
+
status: item.status,
|
|
72
|
+
isFirstItem,
|
|
73
|
+
isLastItem,
|
|
74
|
+
mr: 4
|
|
75
|
+
}), /* @__PURE__ */ import_react.default.createElement(Container, {
|
|
76
|
+
status: item.status,
|
|
77
|
+
isLastItem,
|
|
78
|
+
mb: 4,
|
|
79
|
+
flexDirection: "column"
|
|
80
|
+
}, /* @__PURE__ */ import_react.default.createElement(TimelineIndicatorContentHeader, null, /* @__PURE__ */ import_react.default.createElement(import__3.Text, {
|
|
81
|
+
variant: "body",
|
|
82
|
+
color: item.status === "inactive" ? "neutral.c80" : isLastItem ? "success.c100" : "primary.c90"
|
|
83
|
+
}, item.title), item?.estimatedTime && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import_Tag.default, {
|
|
84
|
+
size: "small",
|
|
85
|
+
type: "opacity",
|
|
86
|
+
active: true,
|
|
87
|
+
disabled: true,
|
|
88
|
+
textProps: { color: colors.neutral.c100 }
|
|
89
|
+
}, `${item.estimatedTime / 60} min`)), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
|
|
90
|
+
position: "relative"
|
|
91
|
+
}, /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
|
|
92
|
+
pt: 6
|
|
93
|
+
}, item.renderBody(item.status === "active")))));
|
|
94
|
+
}
|
|
95
|
+
//# sourceMappingURL=TimelineItem.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n item: Item;\n isFirstItem?: boolean;\n isLastItem?: boolean;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem && status === \"completed\") {\n return theme.colors.success.c30;\n } else if (status === \"completed\") {\n return theme.colors.primary.c20;\n } else if (status === \"active\") {\n return theme.colors.neutral.c20;\n }\n return theme.colors.neutral.c30;\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem && status === \"completed\") {\n return theme.colors.success.c30;\n } else if (isLastItem && status === \"active\") {\n return theme.colors.success.c100;\n } else if (status === \"completed\") {\n return theme.colors.primary.c20;\n } else if (status === \"active\") {\n return theme.colors.primary.c80;\n }\n return theme.colors.neutral.c30;\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n flex: 1;\n width: 404px;\n border-radius: ${(p) => p.theme.radii[2]}px;\n background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};\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`;\n\nexport default function TimelineItem({ item, isFirstItem, isLastItem }: Props) {\n const { colors } = useTheme();\n\n return (\n <Flex flexDirection=\"row\">\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 <TimelineIndicatorContentHeader>\n <Text\n variant=\"body\"\n color={\n item.status === \"inactive\"\n ? \"neutral.c80\"\n : isLastItem\n ? \"success.c100\"\n : \"primary.c90\"\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 </TimelineIndicatorContentHeader>\n {item.renderBody && item.status === \"active\" && (\n <Flex position=\"relative\">\n <Flex pt={6}>{item.renderBody(item.status === \"active\")}</Flex>\n </Flex>\n )}\n </Container>\n </Flex>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,gBAAqB;AACrB,gBAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAQ9B,MAAM,yBAAyB,CAAC,OAAc,QAAoB,eAAyB;AACzF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,YAAY,sCAAO;AAAA;AAAA;AAAA,mBAGN,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,gBACxB,CAAC,MAAM,uBAAuB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA,sBAC7C,CAAC,MAAM,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA;AAAA;AAIrE,MAAM,iCAAiC,sCAAO;AAAA;AAAA;AAI/B,sBAAsB,EAAE,MAAM,aAAa,cAAqB;AAC7E,QAAM,EAAE,WAAW;AAEnB,SACE,mDAAC,gBAAD;AAAA,IAAM,eAAc;AAAA,KAClB,mDAAC,kCAAD;AAAA,IACE,QAAQ,KAAK;AAAA,IACb;AAAA,IACA;AAAA,IACA,IAAI;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,QAAQ,KAAK;AAAA,IAAQ;AAAA,IAAwB,IAAI;AAAA,IAAG,eAAc;AAAA,KAC3E,mDAAC,gCAAD,MACE,mDAAC,gBAAD;AAAA,IACE,SAAQ;AAAA,IACR,OACE,KAAK,WAAW,aACZ,gBACA,aACA,iBACA;AAAA,KAGL,KAAK,QAEP,MAAM,iBAAiB,KAAK,WAAW,YACtC,mDAAC,oBAAD;AAAA,IACE,MAAK;AAAA,IACL,MAAK;AAAA,IACL,QAAM;AAAA,IACN,UAAQ;AAAA,IACR,WAAW,EAAE,OAAO,OAAO,QAAQ;AAAA,KACnC,GAAG,KAAK,gBAAgB,YAG7B,KAAK,cAAc,KAAK,WAAW,YAClC,mDAAC,gBAAD;AAAA,IAAM,UAAS;AAAA,KACb,mDAAC,gBAAD;AAAA,IAAM,IAAI;AAAA,KAAI,KAAK,WAAW,KAAK,WAAW;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
__markAsModule(target);
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toModule = (module2) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
__export(exports, {
|
|
25
|
+
Default: () => Default,
|
|
26
|
+
default: () => VerticalTimeline_stories_default
|
|
27
|
+
});
|
|
28
|
+
var import_react = __toModule(require("react"));
|
|
29
|
+
var import_Flex = __toModule(require("../../Flex"));
|
|
30
|
+
var import_Text = __toModule(require("../../../asorted/Text"));
|
|
31
|
+
var import__ = __toModule(require("."));
|
|
32
|
+
const description = `
|
|
33
|
+
### A Vertical Timeline
|
|
34
|
+
|
|
35
|
+
This components accepts an Array of object like this:
|
|
36
|
+
## Usage
|
|
37
|
+
|
|
38
|
+
\`\`\`js
|
|
39
|
+
|
|
40
|
+
const steps = [
|
|
41
|
+
{
|
|
42
|
+
/**
|
|
43
|
+
* status is an ItemStatus which can be inactive, active or completed
|
|
44
|
+
*/
|
|
45
|
+
status: ItemStatus;
|
|
46
|
+
/**
|
|
47
|
+
* title is the title of the step
|
|
48
|
+
*/
|
|
49
|
+
title: string;
|
|
50
|
+
/**
|
|
51
|
+
* renderBody is an optional prop which is a ReactNode to be rendered next to the title
|
|
52
|
+
*/
|
|
53
|
+
renderBody?: (isDisplayed?: boolean) => ReactNode;
|
|
54
|
+
/**
|
|
55
|
+
* estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute
|
|
56
|
+
*/
|
|
57
|
+
estimatedTime?: number;
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
status: ItemStatus;
|
|
61
|
+
title: string;
|
|
62
|
+
renderBody?: (isDisplayed?: boolean) => ReactNode;
|
|
63
|
+
estimatedTime?: number;
|
|
64
|
+
}
|
|
65
|
+
];
|
|
66
|
+
|
|
67
|
+
<VerticalTimeline steps={steps as any} />
|
|
68
|
+
\`\`\`
|
|
69
|
+
`;
|
|
70
|
+
var VerticalTimeline_stories_default = {
|
|
71
|
+
title: "Layout/List/VerticalTimeline",
|
|
72
|
+
argTypes: {
|
|
73
|
+
steps: {
|
|
74
|
+
control: "disabled"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
parameters: {
|
|
78
|
+
docs: {
|
|
79
|
+
description: {
|
|
80
|
+
component: description
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
const Template = () => {
|
|
86
|
+
const defaultItems = [
|
|
87
|
+
{
|
|
88
|
+
status: "active",
|
|
89
|
+
title: "Nano paired"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
status: "inactive",
|
|
93
|
+
title: "Set your PIN",
|
|
94
|
+
renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`),
|
|
95
|
+
estimatedTime: 120
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
status: "inactive",
|
|
99
|
+
title: "Recovery phrase",
|
|
100
|
+
renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `Your recovery phrase is a secret list of 24 words that backs up your private keys. Your Nano generates a unique recovery phrase. Ledger does not keep a copy of it.`),
|
|
101
|
+
estimatedTime: 300
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
status: "inactive",
|
|
105
|
+
title: "Software check",
|
|
106
|
+
renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `We'll verify whether your Nano is genuine. This should be quick and easy!`)
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
status: "inactive",
|
|
110
|
+
title: "Nano is ready"
|
|
111
|
+
}
|
|
112
|
+
];
|
|
113
|
+
const [items, setItems] = (0, import_react.useState)(defaultItems);
|
|
114
|
+
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
|
|
115
|
+
(0, import_react.useEffect)(() => {
|
|
116
|
+
setTimeout(() => {
|
|
117
|
+
if (currentIndex === defaultItems.length) {
|
|
118
|
+
setCurrentIndex(0);
|
|
119
|
+
setItems(defaultItems);
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
const newItems = items.concat([]);
|
|
123
|
+
newItems[currentIndex]["status"] = "completed";
|
|
124
|
+
if (currentIndex + 1 !== defaultItems.length) {
|
|
125
|
+
newItems[currentIndex + 1]["status"] = "active";
|
|
126
|
+
}
|
|
127
|
+
setCurrentIndex(currentIndex + 1);
|
|
128
|
+
setItems(newItems);
|
|
129
|
+
}, 1e3);
|
|
130
|
+
}, [items, currentIndex]);
|
|
131
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
132
|
+
width: 300
|
|
133
|
+
}, /* @__PURE__ */ import_react.default.createElement(import__.default, {
|
|
134
|
+
steps: items
|
|
135
|
+
}));
|
|
136
|
+
};
|
|
137
|
+
const Default = Template.bind({});
|
|
138
|
+
//# sourceMappingURL=VerticalTimeline.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/VerticalTimeline.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useState } from \"react\";\nimport Flex from \"../../Flex\";\nimport Text from \"../../../asorted/Text\";\nimport VerticalTimeline from \".\";\n\nconst description = `\n### A Vertical Timeline\n\nThis components accepts an Array of object like this:\n## Usage\n\n\\`\\`\\`js\n\nconst steps = [\n {\n /**\n * status is an ItemStatus which can be inactive, active or completed\n */\n status: ItemStatus;\n /**\n * title is the title of the step\n */\n title: string;\n /**\n * renderBody is an optional prop which is a ReactNode to be rendered next to the title\n */\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n /**\n * estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute\n */\n estimatedTime?: number;\n },\n { \n status: ItemStatus;\n title: string;\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n estimatedTime?: number;\n }\n ];\n\n<VerticalTimeline steps={steps as any} />\n\\`\\`\\`\n`;\n\nexport default {\n title: \"Layout/List/VerticalTimeline\",\n argTypes: {\n steps: {\n control: \"disabled\",\n },\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\n\nconst Template = () => {\n const defaultItems = [\n {\n status: \"active\",\n title: \"Nano paired\",\n },\n {\n status: \"inactive\",\n title: \"Set your PIN\",\n renderBody: () => (\n <Text>\n {`Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`}\n </Text>\n ),\n estimatedTime: 120,\n },\n {\n status: \"inactive\",\n title: \"Recovery phrase\",\n renderBody: () => (\n <Text>\n {`Your recovery phrase is a secret list of 24 words that backs up your private keys. Your Nano generates a unique recovery phrase. Ledger does not keep a copy of it.`}\n </Text>\n ),\n estimatedTime: 300,\n },\n {\n status: \"inactive\",\n title: \"Software check\",\n renderBody: () => (\n <Text>{`We'll verify whether your Nano is genuine. This should be quick and easy!`}</Text>\n ),\n },\n {\n status: \"inactive\",\n title: \"Nano is ready\",\n },\n ];\n\n const [items, setItems] = useState(defaultItems);\n const [currentIndex, setCurrentIndex] = useState(0);\n\n useEffect(() => {\n setTimeout(() => {\n if (currentIndex === defaultItems.length) {\n setCurrentIndex(0);\n setItems(defaultItems);\n return;\n }\n const newItems = items.concat([]);\n newItems[currentIndex][\"status\"] = \"completed\";\n if (currentIndex + 1 !== defaultItems.length) {\n newItems[currentIndex + 1][\"status\"] = \"active\";\n }\n setCurrentIndex(currentIndex + 1);\n setItems(newItems);\n }, 1000);\n }, [items, currentIndex]);\n\n return (\n <Flex width={300}>\n <VerticalTimeline steps={items as any} />\n </Flex>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,kBAAiB;AACjB,kBAAiB;AACjB,eAA6B;AAE7B,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCpB,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA;AAAA,EAGb,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAMnB,MAAM,WAAW,MAAM;AACrB,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA;AAAA,IAET;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MACG;AAAA,MAGL,eAAe;AAAA;AAAA,IAEjB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MACG;AAAA,MAGL,eAAe;AAAA;AAAA,IAEjB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MAAO;AAAA;AAAA,IAGX;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA;AAAA;AAIX,QAAM,CAAC,OAAO,YAAY,2BAAS;AACnC,QAAM,CAAC,cAAc,mBAAmB,2BAAS;AAEjD,8BAAU,MAAM;AACd,eAAW,MAAM;AACf,UAAI,iBAAiB,aAAa,QAAQ;AACxC,wBAAgB;AAChB,iBAAS;AACT;AAAA;AAEF,YAAM,WAAW,MAAM,OAAO;AAC9B,eAAS,cAAc,YAAY;AACnC,UAAI,eAAe,MAAM,aAAa,QAAQ;AAC5C,iBAAS,eAAe,GAAG,YAAY;AAAA;AAEzC,sBAAgB,eAAe;AAC/B,eAAS;AAAA,OACR;AAAA,KACF,CAAC,OAAO;AAEX,SACE,mDAAC,qBAAD;AAAA,IAAM,OAAO;AAAA,KACX,mDAAC,kBAAD;AAAA,IAAkB,OAAO;AAAA;AAAA;AAKxB,MAAM,UAAU,SAAS,KAAK;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
__markAsModule(target);
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toModule = (module2) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
__export(exports, {
|
|
25
|
+
default: () => VerticalTimeline
|
|
26
|
+
});
|
|
27
|
+
var import_react = __toModule(require("react"));
|
|
28
|
+
var import_TimelineItem = __toModule(require("./TimelineItem"));
|
|
29
|
+
var import__ = __toModule(require("../.."));
|
|
30
|
+
function VerticalTimeline({ steps, ...props }) {
|
|
31
|
+
return /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
|
|
32
|
+
...props,
|
|
33
|
+
flexDirection: "column"
|
|
34
|
+
}, steps?.map((step, index) => /* @__PURE__ */ import_react.default.createElement(import_TimelineItem.default, {
|
|
35
|
+
key: step.title,
|
|
36
|
+
item: step,
|
|
37
|
+
isFirstItem: index === 0,
|
|
38
|
+
isLastItem: index === steps.length - 1
|
|
39
|
+
})));
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 { BaseStyledProps } from \"src/components/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};\n\nexport type Props = BaseStyledProps & {\n steps?: Item[];\n};\n\nexport default function VerticalTimeline({ steps, ...props }: Props) {\n return (\n <Flex {...props} flexDirection=\"column\">\n {steps?.map((step, index) => (\n <TimelineItem\n key={step.title}\n item={step}\n isFirstItem={index === 0}\n isLastItem={index === steps.length - 1}\n />\n ))}\n </Flex>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AAgBN,0BAA0B,EAAE,UAAU,SAAgB;AACnE,SACE,mDAAC,eAAD;AAAA,OAAU;AAAA,IAAO,eAAc;AAAA,KAC5B,OAAO,IAAI,CAAC,MAAM,UACjB,mDAAC,6BAAD;AAAA,IACE,KAAK,KAAK;AAAA,IACV,MAAM;AAAA,IACN,aAAa,UAAU;AAAA,IACvB,YAAY,UAAU,MAAM,SAAS;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -27,7 +27,8 @@ __export(exports, {
|
|
|
27
27
|
Flex: () => import_Flex.default,
|
|
28
28
|
Grid: () => import_Grid.default,
|
|
29
29
|
Popin: () => import_Popin.default,
|
|
30
|
-
Side: () => import_Side.default
|
|
30
|
+
Side: () => import_Side.default,
|
|
31
|
+
VerticalTimeline: () => import_VerticalTimeline.default
|
|
31
32
|
});
|
|
32
33
|
var import_Flex = __toModule(require("./Flex"));
|
|
33
34
|
var import_Box = __toModule(require("./Box"));
|
|
@@ -35,4 +36,5 @@ var import_Grid = __toModule(require("./Grid"));
|
|
|
35
36
|
var import_Popin = __toModule(require("./Popin"));
|
|
36
37
|
var import_Side = __toModule(require("./Side"));
|
|
37
38
|
var import_Drawer = __toModule(require("./Drawer"));
|
|
39
|
+
var import_VerticalTimeline = __toModule(require("./List/VerticalTimeline"));
|
|
38
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/layout/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { default as Flex } from \"./Flex\";\nexport { default as Box } from \"./Box\";\nexport { default as Grid } from \"./Grid\";\nexport { default as Popin } from \"./Popin\";\nexport { default as Side } from \"./Side\";\nexport { default as Drawer } from \"./Drawer\";\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;",
|
|
4
|
+
"sourcesContent": ["export { default as Flex } from \"./Flex\";\nexport { default as Box } from \"./Box\";\nexport { default as Grid } from \"./Grid\";\nexport { default as Popin } from \"./Popin\";\nexport { default as Side } from \"./Side\";\nexport { default as Drawer } from \"./Drawer\";\nexport { default as VerticalTimeline } from \"./List/VerticalTimeline\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;AAClC,8BAA4C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/cjs/styles/global.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/global.ts"],
|
|
4
|
-
"sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n fontsPath?: string;\n fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n html {\n box-sizing: border-box;\n }\n\n body {\n font-family: Inter;\n font-size: 100%;\n }\n\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,qBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n fontsPath?: string;\n fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n html {\n box-sizing: border-box;\n }\n\n body {\n font-family: Inter;\n font-size: 100%;\n }\n\n * {\n margin: 0;\n padding: 0;\n font: inherit;\n color: inherit;\n user-select: inherit;\n cursor: inherit;\n outline: none;\n }\n\n ::selection {\n background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};\n }\n\n --track-color: rgba(0,0,0,0);\n\n ${(props) => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n ${tippyStyles}\n`;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,qBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAqBT,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvD,CAAC,UAAW,OAAO,MAAM,cAAc,WAAW,4BAAa;AAAA;AAAA,IAE/D;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ interface BaseProps extends BaseStyledProps, BordersProps {
|
|
|
7
7
|
ff?: string;
|
|
8
8
|
color?: string;
|
|
9
9
|
backgroundColor?: string;
|
|
10
|
+
size?: "small" | "medium" | "large";
|
|
10
11
|
fontSize?: number;
|
|
11
12
|
variant?: ButtonVariants;
|
|
12
13
|
outline?: boolean;
|
|
@@ -41,4 +42,10 @@ export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
|
|
|
41
42
|
onToggle?: (arg0: boolean) => void;
|
|
42
43
|
}>;
|
|
43
44
|
export declare function ButtonExpand({ onToggle, onClick, ...props }: ButtonExpandProps, ref?: React.ForwardedRef<HTMLButtonElement>): React.ReactElement;
|
|
45
|
+
export declare const buttonSizeStyle: {
|
|
46
|
+
[index: string]: {
|
|
47
|
+
padding: string;
|
|
48
|
+
height: string;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
44
51
|
export default ButtonWithRef;
|
|
@@ -141,14 +141,13 @@ export const Base = baseStyled.button.attrs((p) => {
|
|
|
141
141
|
border-width: ${(p) => (p.outline || p.variant === "shade" ? 1 : 0)}px;
|
|
142
142
|
font-weight: 600;
|
|
143
143
|
${compose(fontFamily, fontSize, border)};
|
|
144
|
-
height: ${(p) => p.theme.space[13]}px;
|
|
145
144
|
line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
|
|
146
145
|
text-align: center;
|
|
147
146
|
display: inline-flex;
|
|
148
147
|
align-items: center;
|
|
149
148
|
justify-content: center;
|
|
150
|
-
padding: 0 2em;
|
|
151
149
|
overflow: hidden;
|
|
150
|
+
${(p) => buttonSizeStyle[p.size || "medium"]}
|
|
152
151
|
text-overflow: ellipsis;
|
|
153
152
|
white-space: nowrap;
|
|
154
153
|
max-width: 100%;
|
|
@@ -226,6 +225,20 @@ export function ButtonExpand(_a, ref) {
|
|
|
226
225
|
onClick != null && onClick(event);
|
|
227
226
|
} })));
|
|
228
227
|
}
|
|
228
|
+
export const buttonSizeStyle = {
|
|
229
|
+
small: {
|
|
230
|
+
padding: "0 20px",
|
|
231
|
+
height: "32px",
|
|
232
|
+
},
|
|
233
|
+
medium: {
|
|
234
|
+
padding: "0 24px",
|
|
235
|
+
height: "40px",
|
|
236
|
+
},
|
|
237
|
+
large: {
|
|
238
|
+
padding: "0 28px",
|
|
239
|
+
height: "48px",
|
|
240
|
+
},
|
|
241
|
+
};
|
|
229
242
|
Button.Unstyled = ButtonUnstyled;
|
|
230
243
|
Button.Expand = React.forwardRef(ButtonExpand);
|
|
231
244
|
ButtonWithRef.Unstyled = Button.Unstyled;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FlexBoxProps as FlexProps } from "../../Flex";
|
|
3
|
+
export declare type Props = FlexProps & {
|
|
4
|
+
status: "inactive" | "active" | "completed";
|
|
5
|
+
isFirstItem?: boolean;
|
|
6
|
+
isLastItem?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export default function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }: Props): JSX.Element;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React from "react";
|
|
13
|
+
import CircledCheckSolidMedium from "@ledgerhq/icons-ui/react/CircledCheckSolidMedium";
|
|
14
|
+
import styled, { useTheme } from "styled-components";
|
|
15
|
+
import Flex from "../../Flex";
|
|
16
|
+
const TopSegment = styled(Flex) `
|
|
17
|
+
height: ${(p) => (p.status === "inactive" ? "18px" : "20px")};
|
|
18
|
+
border-width: ${(p) => (p.hidden ? 0 : 1)}px;
|
|
19
|
+
border-style: dashed;
|
|
20
|
+
border-color: ${(p) => p.status === "inactive" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};
|
|
21
|
+
background: ${(p) => p.status !== "inactive" && p.theme.colors.primary.c80};
|
|
22
|
+
margin-top: ${(p) => p.status === "inactive" && "2px"};
|
|
23
|
+
`;
|
|
24
|
+
const BottomSegment = styled(Flex) `
|
|
25
|
+
flex: 1;
|
|
26
|
+
border-width: ${(p) => (p.hidden ? 0 : 1)}px;
|
|
27
|
+
border-style: dashed;
|
|
28
|
+
border-color: ${(p) => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};
|
|
29
|
+
background: ${(p) => p.status === "completed" && p.theme.colors.primary.c80};
|
|
30
|
+
`;
|
|
31
|
+
const getIconBackground = (theme, status, isLastItem) => {
|
|
32
|
+
if (status === "completed") {
|
|
33
|
+
return "transparent";
|
|
34
|
+
}
|
|
35
|
+
else if (isLastItem) {
|
|
36
|
+
return theme.colors.success.c10;
|
|
37
|
+
}
|
|
38
|
+
else if (status === "active") {
|
|
39
|
+
return theme.colors.neutral.c40;
|
|
40
|
+
}
|
|
41
|
+
return theme.colors.background.main;
|
|
42
|
+
};
|
|
43
|
+
const getIconBorder = (theme, status, isLastItem) => {
|
|
44
|
+
if (isLastItem) {
|
|
45
|
+
return theme.colors.success.c100;
|
|
46
|
+
}
|
|
47
|
+
else if (status === "inactive") {
|
|
48
|
+
return theme.colors.neutral.c50;
|
|
49
|
+
}
|
|
50
|
+
return theme.colors.primary.c80;
|
|
51
|
+
};
|
|
52
|
+
const CenterSegment = styled(Flex) `
|
|
53
|
+
border-radius: 9999px;
|
|
54
|
+
width: 20px;
|
|
55
|
+
height: 20px;
|
|
56
|
+
background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};
|
|
57
|
+
border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
`;
|
|
61
|
+
const IconWrapper = styled(Flex) `
|
|
62
|
+
flex: none;
|
|
63
|
+
`;
|
|
64
|
+
export default function TimelineIndicator(_a) {
|
|
65
|
+
var { status, isFirstItem, isLastItem } = _a, props = __rest(_a, ["status", "isFirstItem", "isLastItem"]);
|
|
66
|
+
const { colors } = useTheme();
|
|
67
|
+
return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
|
|
68
|
+
React.createElement(TopSegment, { status: status, hidden: isFirstItem }),
|
|
69
|
+
React.createElement(CenterSegment, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(IconWrapper, null,
|
|
70
|
+
React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c100 : colors.primary.c80, size: 24 })))),
|
|
71
|
+
React.createElement(BottomSegment, { status: status, hidden: isLastItem })));
|
|
72
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled, { useTheme } from "styled-components";
|
|
3
|
+
import { Flex } from "../..";
|
|
4
|
+
import { Text } from "../../..";
|
|
5
|
+
import Tag from "../../../Tag";
|
|
6
|
+
import TimelineIndicator from "./TimelineIndicator";
|
|
7
|
+
const getContainerBackground = (theme, status, isLastItem) => {
|
|
8
|
+
if (isLastItem && status === "completed") {
|
|
9
|
+
return theme.colors.success.c30;
|
|
10
|
+
}
|
|
11
|
+
else if (status === "completed") {
|
|
12
|
+
return theme.colors.primary.c20;
|
|
13
|
+
}
|
|
14
|
+
else if (status === "active") {
|
|
15
|
+
return theme.colors.neutral.c20;
|
|
16
|
+
}
|
|
17
|
+
return theme.colors.neutral.c30;
|
|
18
|
+
};
|
|
19
|
+
const getContainerBorder = (theme, status, isLastItem) => {
|
|
20
|
+
if (isLastItem && status === "completed") {
|
|
21
|
+
return theme.colors.success.c30;
|
|
22
|
+
}
|
|
23
|
+
else if (isLastItem && status === "active") {
|
|
24
|
+
return theme.colors.success.c100;
|
|
25
|
+
}
|
|
26
|
+
else if (status === "completed") {
|
|
27
|
+
return theme.colors.primary.c20;
|
|
28
|
+
}
|
|
29
|
+
else if (status === "active") {
|
|
30
|
+
return theme.colors.primary.c80;
|
|
31
|
+
}
|
|
32
|
+
return theme.colors.neutral.c30;
|
|
33
|
+
};
|
|
34
|
+
const Container = styled(Flex) `
|
|
35
|
+
flex: 1;
|
|
36
|
+
width: 404px;
|
|
37
|
+
border-radius: ${(p) => p.theme.radii[2]}px;
|
|
38
|
+
background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
|
|
39
|
+
border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
40
|
+
padding: 20px 16px;
|
|
41
|
+
`;
|
|
42
|
+
const TimelineIndicatorContentHeader = styled(Flex) `
|
|
43
|
+
justify-content: space-between;
|
|
44
|
+
`;
|
|
45
|
+
export default function TimelineItem({ item, isFirstItem, isLastItem }) {
|
|
46
|
+
const { colors } = useTheme();
|
|
47
|
+
return (React.createElement(Flex, { flexDirection: "row" },
|
|
48
|
+
React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4 }),
|
|
49
|
+
React.createElement(Container, { status: item.status, isLastItem: isLastItem, mb: 4, flexDirection: "column" },
|
|
50
|
+
React.createElement(TimelineIndicatorContentHeader, null,
|
|
51
|
+
React.createElement(Text, { variant: "body", color: item.status === "inactive"
|
|
52
|
+
? "neutral.c80"
|
|
53
|
+
: isLastItem
|
|
54
|
+
? "success.c100"
|
|
55
|
+
: "primary.c90" }, item.title),
|
|
56
|
+
(item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, { size: "small", type: "opacity", active: true, disabled: true, textProps: { color: colors.neutral.c100 } }, `${item.estimatedTime / 60} min`))),
|
|
57
|
+
item.renderBody && item.status === "active" && (React.createElement(Flex, { position: "relative" },
|
|
58
|
+
React.createElement(Flex, { pt: 6 }, item.renderBody(item.status === "active")))))));
|
|
59
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { BaseStyledProps } from "src/components/styled";
|
|
3
|
+
export declare type ItemStatus = "inactive" | "active" | "completed";
|
|
4
|
+
export declare type Item = {
|
|
5
|
+
status: ItemStatus;
|
|
6
|
+
title: string;
|
|
7
|
+
renderBody?: (isDisplayed?: boolean) => ReactNode;
|
|
8
|
+
estimatedTime?: number;
|
|
9
|
+
};
|
|
10
|
+
export declare type Props = BaseStyledProps & {
|
|
11
|
+
steps?: Item[];
|
|
12
|
+
};
|
|
13
|
+
export default function VerticalTimeline({ steps, ...props }: Props): JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React from "react";
|
|
13
|
+
import TimelineItem from "./TimelineItem";
|
|
14
|
+
import { Flex } from "../..";
|
|
15
|
+
export default function VerticalTimeline(_a) {
|
|
16
|
+
var { steps } = _a, props = __rest(_a, ["steps"]);
|
|
17
|
+
return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(TimelineItem, { key: step.title, item: step, isFirstItem: index === 0, isLastItem: index === steps.length - 1 })))));
|
|
18
|
+
}
|
package/lib/styles/global.js
CHANGED