@ledgerhq/react-ui 0.14.10-tag-word.0 → 0.14.11-nightly.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/Tag/index.js.map +1 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js.map +1 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +1 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.d.ts +1 -1
- package/package.json +5 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Tag/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"../../styles/theme\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n React.HTMLAttributes<HTMLDivElement> &\n BorderProps &\n React.PropsWithChildren<{\n /**\n * Changes the appearance based on the active state.\n */\n active?: boolean;\n /**\n * Tag style.\n */\n type?: Type;\n /**\n * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n */\n size?: Size;\n /**\n * Props passed to the text component, overriding props set internally by Tag component\n */\n textProps?: TextProps;\n\n disabled?: boolean;\n }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n return active ? \"neutral.c00\" : \"primary.c90\";\n default:\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n case \"opacity\":\n return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n default:\n return;\n }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n if (!active) return;\n switch (type) {\n case \"outlined\":\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n case \"outlinedOpacity\":\n return disabled ? \"neutral.c40\" : \"primary.c40\";\n }\n}\n\nfunction getPadding({ size }: TagProps) {\n switch (size) {\n case \"small\":\n return \"3px 5px\";\n case \"medium\":\n return \"6px 8px\";\n case \"large\":\n default:\n return \"9px 10px 10px\";\n }\n}\n\nfunction getTextProps({ size }: TagProps): {\n variant: TextVariants;\n fontWeight?: string;\n uppercase?: boolean;\n} {\n switch (size) {\n case \"small\":\n case \"medium\":\n return {\n variant: \"tiny\",\n fontWeight: \"semiBold\",\n };\n case \"large\":\n default:\n return {\n variant: \"extraSmall\",\n fontWeight: \"semiBold\",\n };\n }\n}\n\nconst TagContainer = baseStyled.div.attrs<TagProps, TagProps>(props => ({\n backgroundColor: props.bg || props.backgroundColor || getBgColor(props),\n color: props.color || getColor(props),\n borderColor: getBorderColor(props),\n}))`\n display: inline-flex;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: ${p => `${p.theme.radii[1]}px`};\n padding: ${p => getPadding(p)};\n ${border}\n`;\n\nexport default function Tag({\n children,\n textProps,\n size = \"large\",\n ...props\n}: TagProps): JSX.Element {\n const textColor = getColor(props);\n const baseTextProps = getTextProps({ size, ...props });\n return (\n <TagContainer size={size} {...props}>\n <Text {...baseTextProps} color={textColor} {...(textProps ? textProps : {})}>\n {children}\n </Text>\n </TagContainer>\n );\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;AA6B5C,SAAS,SAAS,EAAE,MAAM,QAAQ,SAAS,GAAa;AACtD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,UAAI;AAAU,eAAO,SAAS,gBAAgB;AAC9C,aAAO,SAAS,gBAAgB;AAAA,IAClC;AACE,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,MAAM,QAAQ,SAAS,GAAa;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D;AACE;AAAA,EACJ;AACF;AAEA,SAAS,eAAe,EAAE,MAAM,QAAQ,SAAS,GAAa;AAC5D,MAAI,CAAC;AAAQ;AACb,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,IACpC,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,KAAK,GAAa;AACtC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,aAAa,EAAE,KAAK,GAI3B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,EACJ;AACF;AAEA,MAAM,eAAe,cAAAA,QAAW,IAAI,MAA0B,YAAU;AAAA,EACtE,iBAAiB,MAAM,MAAM,MAAM,mBAAmB,WAAW,KAAK;AAAA,EACtE,OAAO,MAAM,SAAS,SAAS,KAAK;AAAA,EACpC,aAAa,eAAe,KAAK;AACnC,EAAE;AAAA;AAAA;AAAA;AAAA,mBAIiB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA,aAClC,OAAK,WAAW,CAAC,CAAC;AAAA,IAC3B,2BAAM;AAAA;AAGK,SAAR,IAAqB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,SAAS,KAAK;AAChC,QAAM,gBAAgB,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;AACrD,SACE,6BAAAC,QAAA,cAAC,gBAAa,MAAa,GAAG,SAC5B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAM,GAAG,eAAe,OAAO,WAAY,GAAI,YAAY,YAAY,CAAC,KACtE,QACH,CACF;AAEJ;",
|
|
6
6
|
"names": ["baseStyled", "React", "Text"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"../../../../styles/theme\";\n\nconst linesWidth = 2;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n flex: 1;\n border-left-width: ${p => (p.hidden ? 0 : linesWidth)}px;\n border-right-width: 0;\n border-style: dashed;\n border-color: ${p =>\n p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};\n background: ${p => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n if (status === \"inactive\") return theme.colors.success.c10;\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n } else {\n return \"transparent\";\n }\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n return theme.colors.success.c70;\n } else if (status === \"inactive\") {\n return theme.colors.neutral.c40;\n }\n return theme.colors.primary.c80;\n};\n\nconst CenterCircle = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n border-radius: 9999px;\n width: 100%;\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 position: relative;\n`;\n\nconst IconWrapper = styled(Flex)`\n height: 16px;\n width: 16px;\n`;\n\nexport type Props = FlexProps & {\n status: \"inactive\" | \"active\" | \"completed\";\n isFirstItem?: boolean;\n isLastItem?: boolean;\n};\n\nconst topSegmentDefaultHeight = 23;\n\nconst Container = styled(Flex)`\n flex-direction: column;\n align-items: center;\n margin-bottom: ${-topSegmentDefaultHeight}px;\n padding-top: ${topSegmentDefaultHeight}px;\n`;\n\nfunction TimelineIndicator({ status, isLastItem, ...props }: Props) {\n const { colors } = useTheme();\n\n return (\n <Container {...props}>\n <IconWrapper>\n <CenterCircle status={status} isLastItem={isLastItem}>\n {status === \"completed\" && (\n <Flex position=\"absolute\">\n <CircledCheckSolidMedium\n color={isLastItem ? colors.success.c70 : colors.primary.c80}\n size={20}\n />\n </Flex>\n )}\n </CenterCircle>\n </IconWrapper>\n {isLastItem ? null : <BottomSegment status={status} />}\n </Container>\n );\n}\n\nexport default React.memo(TimelineIndicator);\n\nTimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,uBAEV,OAAM,EAAE,SAAS,IAAI,UAAW;AAAA;AAAA;AAAA,kBAGrC,OACd,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACtE,OAAK,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG3E,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,YAAY;AACd,QAAI,WAAW;AAAY,aAAO,MAAM,OAAO,QAAQ;AACvD,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,mBAAe,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,gBAGhB,OAAK,kBAAkB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA,sBACjD,OAAK,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzE,MAAM,kBAAc,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAW/B,MAAM,0BAA0B;AAEhC,MAAM,gBAAY,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,mBAGV,CAAC,uBAAuB;AAAA,iBAC1B,uBAAuB;AAAA;AAGxC,SAAS,kBAAkB,EAAE,QAAQ,YAAY,GAAG,MAAM,GAAU;AAClE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,aAAW,GAAG,SACb,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA,cAAC,gBAAa,QAAgB,cAC3B,WAAW,eACV,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,UAAS,cACb,6BAAAC,QAAA;AAAA,IAAC,+BAAAC;AAAA,IAAA;AAAA,MACC,OAAO,aAAa,OAAO,QAAQ,MAAM,OAAO,QAAQ;AAAA,MACxD,MAAM;AAAA;AAAA,EACR,CACF,CAEJ,CACF,GACC,aAAa,OAAO,6BAAAD,QAAA,cAAC,iBAAc,QAAgB,CACtD;AAEJ;AAEA,IAAO,4BAAQ,aAAAA,QAAM,KAAK,iBAAiB;AAE3C,kBAAkB,0BAA0B;",
|
|
6
6
|
"names": ["styled", "Flex", "React", "CircledCheckSolidMedium"]
|
|
7
7
|
}
|
|
@@ -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 \"
|
|
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\";\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 <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 </TimelineIndicatorContentHeader>\n {item.renderBody && item.status === \"active\" && (\n <Box position=\"relative\" pt={6}>\n {item.renderBody(item.status === \"active\")}\n </Box>\n )}\n </Container>\n </Flex>\n );\n}\n\nexport default React.memo(TimelineItem);\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAEhB,+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,mBAEV,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;AAAA;AAI9E,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,IAAI,GAAG,eAAc,YAC3E,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,WAChB,gBACA;AAAA;AAAA,IAGL,KAAK;AAAA,EACR,IACC,6BAAM,kBAAiB,KAAK,WAAW,YACtC,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,CAEvC,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAF,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
|
|
6
6
|
"names": ["import__", "styled", "React", "TimelineIndicator", "Tag"]
|
|
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 \"
|
|
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};\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
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AACrB,kBAAgC;AAiBjB,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
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
2
|
import { TextProps } from "../../../asorted/Text";
|
|
3
|
-
import { BaseStyledProps } from "
|
|
3
|
+
import { BaseStyledProps } from "../../../styled";
|
|
4
4
|
export type ItemStatus = "inactive" | "active" | "completed";
|
|
5
5
|
export type Item = {
|
|
6
6
|
status: ItemStatus;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.11-nightly.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
"react-transition-group": "^4.4.2",
|
|
69
69
|
"react-window": "^1.8.6",
|
|
70
70
|
"styled-system": "^5.1.5",
|
|
71
|
-
"@ledgerhq/crypto-icons-ui": "^0.
|
|
72
|
-
"@ledgerhq/icons-ui": "^0.6.2
|
|
71
|
+
"@ledgerhq/crypto-icons-ui": "^0.6.1-nightly.0",
|
|
72
|
+
"@ledgerhq/icons-ui": "^0.6.2",
|
|
73
73
|
"@ledgerhq/ui-shared": "^0.2.1"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
@@ -135,6 +135,7 @@
|
|
|
135
135
|
"lint:fix": "pnpm lint --fix",
|
|
136
136
|
"lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}' --fix",
|
|
137
137
|
"typecheck": "tsc --p . --noEmit",
|
|
138
|
-
"test": "pnpm -w -F ui test:react"
|
|
138
|
+
"test": "pnpm -w -F ui test:react",
|
|
139
|
+
"unimported": "unimported"
|
|
139
140
|
}
|
|
140
141
|
}
|