@ledgerhq/react-ui 0.17.0-nightly.0 → 0.17.0-nightly.2
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/index.js +7 -1
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/Carousel.stories.js +60 -20
- package/lib/cjs/components/layout/Carousel/Carousel.stories.js.map +3 -3
- package/lib/cjs/components/layout/Carousel/index.js +101 -7
- package/lib/cjs/components/layout/Carousel/index.js.map +3 -3
- package/lib/cjs/components/layout/Carousel/types.js.map +2 -2
- package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/PortfolioContentCard.stories.js +78 -0
- package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/PortfolioContentCard.stories.js.map +7 -0
- package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/index.js +108 -0
- package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/index.js.map +7 -0
- package/lib/cjs/components/layout/index.js +2 -0
- package/lib/cjs/components/layout/index.js.map +2 -2
- package/lib/components/cta/Button/index.d.ts +1 -1
- package/lib/components/cta/Button/index.d.ts.map +1 -1
- package/lib/components/cta/Button/index.js +7 -1
- package/lib/components/cta/Button/index.js.map +1 -1
- package/lib/components/layout/Carousel/index.d.ts +1 -1
- package/lib/components/layout/Carousel/index.d.ts.map +1 -1
- package/lib/components/layout/Carousel/index.js +85 -8
- package/lib/components/layout/Carousel/index.js.map +1 -1
- package/lib/components/layout/Carousel/types.d.ts +4 -1
- package/lib/components/layout/Carousel/types.d.ts.map +1 -1
- package/lib/components/layout/Carousel/types.js.map +1 -1
- package/lib/components/layout/ContentCard/PortfolioContentCard/index.d.ts +12 -0
- package/lib/components/layout/ContentCard/PortfolioContentCard/index.d.ts.map +1 -0
- package/lib/components/layout/ContentCard/PortfolioContentCard/index.js +73 -0
- package/lib/components/layout/ContentCard/PortfolioContentCard/index.js.map +1 -0
- package/lib/components/layout/index.d.ts +1 -0
- package/lib/components/layout/index.d.ts.map +1 -1
- package/lib/components/layout/index.js +1 -0
- package/lib/components/layout/index.js.map +1 -1
- package/package.json +4 -1
|
@@ -228,7 +228,13 @@ const Base = import_styled.default.button.attrs((p) => ({
|
|
|
228
228
|
const ContentContainer = import_styled_components.default.div``;
|
|
229
229
|
const Button = ({ Icon, iconPosition = "right", iconSize = 16, children, onClick, ...props }, ref) => {
|
|
230
230
|
const iconNodeSize = iconSize || import_theme.fontSizes[props.fontSize ?? 4];
|
|
231
|
-
const IconNode = (0, import_react.useMemo)(() =>
|
|
231
|
+
const IconNode = (0, import_react.useMemo)(() => {
|
|
232
|
+
if (!Icon)
|
|
233
|
+
return null;
|
|
234
|
+
if (typeof Icon === "object")
|
|
235
|
+
return Icon;
|
|
236
|
+
return /* @__PURE__ */ import_react.default.createElement(Icon, { size: iconNodeSize });
|
|
237
|
+
}, [iconNodeSize, Icon]);
|
|
232
238
|
return /* @__PURE__ */ import_react.default.createElement(Base, { ...props, ref, iconButton: !(Icon == null) && !children, onClick }, iconPosition === "right" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null, IconNode && /* @__PURE__ */ import_react.default.createElement(IconContainer, { iconPosition }, IconNode), iconPosition === "left" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null);
|
|
233
239
|
};
|
|
234
240
|
const ButtonWithRef = import_react.default.forwardRef(Button);
|
|
@@ -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/reactLegacy/ChevronBottomMedium\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n size?: \"xs\" | \"small\" | \"medium\" | \"large\";\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n Icon?: React.ComponentType<{ size: number; color?: string }>;\n children?: React.ReactNode;\n onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n iconSize?: number;\n style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n iconPosition: IconPosition;\n}>`\n display: inline-block;\n ${p => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n main: {\n outline: `\n border-color: ${p.theme.colors.neutral.c100};\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover, &:focus {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.neutral.c100};\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c90};\n }\n `,\n },\n shade: `\n border-color: ${p.theme.colors.neutral.c40};\n color: ${p.theme.colors.neutral.c100};\n &:focus {\n border-color: ${p.theme.colors.primary.c80};\n }\n\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c20};\n }\n\n &:active {\n background-color: ${p.theme.colors.neutral.c30};\n }\n `,\n error: {\n outline: `\n border-color: ${p.theme.colors.error.c50};\n color: ${p.theme.colors.error.c50};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c50};\n &:hover {\n background-color: ${p.theme.colors.error.c40};\n }\n `,\n },\n neutral: `\n color: ${p.theme.colors.neutral.c100};\n background-color: ${p.theme.colors.neutral.c30};\n &:hover {\n background-color: ${p.theme.colors.neutral.c40};\n }\n `,\n color: {\n outline: `\n border-color: ${p.theme.colors.primary.c80};\n color: ${p.theme.colors.primary.c80};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.primary.c80};\n &:hover {\n background-color: ${p.theme.colors.primary.c70};\n }\n `,\n },\n disabled: {\n outline: `\n border-color: ${p.theme.colors.neutral.c50};\n color: ${p.theme.colors.neutral.c50};\n background-color: transparent;\n &:focus, &:hover {\n box-shadow: none;\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\n &:focus, &:hover {\n box-shadow: none;\n }\n `,\n },\n default: `\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover {\n text-decoration: underline;\n }\n `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n all: unset;\n cursor: pointer;\n\n &:disabled {\n cursor: default;\n }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n fontFamily: \"Inter\",\n fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n background-color: transparent;\n border-color: transparent;\n border-radius: 44px;\n border-style: solid;\n border-width: ${p => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n font-weight: 600;\n ${compose(fontFamily, fontSize, border)};\n line-height: ${p => p.theme.fontSizes[p.fontSize]}px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n ${p => buttonSizeStyle[p.size || \"medium\"]}\n text-overflow: ellipsis;\n white-space: ${p => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n max-width: 100%;\n position: relative;\n cursor: ${p => (p.disabled ? \"default\" : \"pointer\")};\n &:active {\n box-shadow: 0 0 0 4px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n &:focus, &:hover {\n box-shadow: 0 0 0 2px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n\n ${p => {\n const variants = getVariantColors(p);\n if (p.disabled) {\n return p.outline || p.variant === \"shade\"\n ? variants.disabled.outline\n : variants.disabled.filled;\n }\n\n const variant: ButtonVariants | \"default\" =\n p.variant ?? (\"default\" as ButtonVariants | \"default\");\n switch (variant) {\n case \"main\":\n return p.outline ? variants.main.outline : variants.main.filled;\n case \"shade\":\n return variants.shade;\n\n case \"error\":\n return p.outline ? variants.error.outline : variants.error.filled;\n\n case \"color\":\n return p.outline ? variants.color.outline : variants.color.filled;\n\n case \"neutral\":\n return variants.neutral;\n\n case \"default\":\n default:\n return variants.default;\n }\n }}\n ${p =>\n p.iconButton\n ? css`\n width: ${p.theme.space[12]}px;\n padding: 0;\n ${IconContainer} {\n margin: 0;\n }\n `\n : \"\"}\n ${p => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n const IconNode = useMemo(() => Icon
|
|
5
|
-
"mappings": "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
|
|
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/reactLegacy/ChevronBottomMedium\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n size?: \"xs\" | \"small\" | \"medium\" | \"large\";\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n Icon?: React.ReactElement | React.ComponentType<{ size: number; color?: string }>;\n children?: React.ReactNode;\n onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n iconSize?: number;\n style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n iconPosition: IconPosition;\n}>`\n display: inline-block;\n ${p => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n main: {\n outline: `\n border-color: ${p.theme.colors.neutral.c100};\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover, &:focus {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.neutral.c100};\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c90};\n }\n `,\n },\n shade: `\n border-color: ${p.theme.colors.neutral.c40};\n color: ${p.theme.colors.neutral.c100};\n &:focus {\n border-color: ${p.theme.colors.primary.c80};\n }\n\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c20};\n }\n\n &:active {\n background-color: ${p.theme.colors.neutral.c30};\n }\n `,\n error: {\n outline: `\n border-color: ${p.theme.colors.error.c50};\n color: ${p.theme.colors.error.c50};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c50};\n &:hover {\n background-color: ${p.theme.colors.error.c40};\n }\n `,\n },\n neutral: `\n color: ${p.theme.colors.neutral.c100};\n background-color: ${p.theme.colors.neutral.c30};\n &:hover {\n background-color: ${p.theme.colors.neutral.c40};\n }\n `,\n color: {\n outline: `\n border-color: ${p.theme.colors.primary.c80};\n color: ${p.theme.colors.primary.c80};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.primary.c80};\n &:hover {\n background-color: ${p.theme.colors.primary.c70};\n }\n `,\n },\n disabled: {\n outline: `\n border-color: ${p.theme.colors.neutral.c50};\n color: ${p.theme.colors.neutral.c50};\n background-color: transparent;\n &:focus, &:hover {\n box-shadow: none;\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\n &:focus, &:hover {\n box-shadow: none;\n }\n `,\n },\n default: `\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover {\n text-decoration: underline;\n }\n `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n all: unset;\n cursor: pointer;\n\n &:disabled {\n cursor: default;\n }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n fontFamily: \"Inter\",\n fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n background-color: transparent;\n border-color: transparent;\n border-radius: 44px;\n border-style: solid;\n border-width: ${p => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n font-weight: 600;\n ${compose(fontFamily, fontSize, border)};\n line-height: ${p => p.theme.fontSizes[p.fontSize]}px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n ${p => buttonSizeStyle[p.size || \"medium\"]}\n text-overflow: ellipsis;\n white-space: ${p => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n max-width: 100%;\n position: relative;\n cursor: ${p => (p.disabled ? \"default\" : \"pointer\")};\n &:active {\n box-shadow: 0 0 0 4px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n &:focus, &:hover {\n box-shadow: 0 0 0 2px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n\n ${p => {\n const variants = getVariantColors(p);\n if (p.disabled) {\n return p.outline || p.variant === \"shade\"\n ? variants.disabled.outline\n : variants.disabled.filled;\n }\n\n const variant: ButtonVariants | \"default\" =\n p.variant ?? (\"default\" as ButtonVariants | \"default\");\n switch (variant) {\n case \"main\":\n return p.outline ? variants.main.outline : variants.main.filled;\n case \"shade\":\n return variants.shade;\n\n case \"error\":\n return p.outline ? variants.error.outline : variants.error.filled;\n\n case \"color\":\n return p.outline ? variants.color.outline : variants.color.filled;\n\n case \"neutral\":\n return variants.neutral;\n\n case \"default\":\n default:\n return variants.default;\n }\n }}\n ${p =>\n p.iconButton\n ? css`\n width: ${p.theme.space[12]}px;\n padding: 0;\n ${IconContainer} {\n margin: 0;\n }\n `\n : \"\"}\n ${p => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n const IconNode = useMemo(() => {\n if (!Icon) return null;\n if (typeof Icon === \"object\") return Icon;\n return <Icon size={iconNodeSize} />;\n }, [iconNodeSize, Icon]);\n\n return (\n <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n </Base>\n );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n ButtonProps & {\n onToggle?: (arg0: boolean) => void;\n }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs(props => ({\n Icon: props.Icon != null || ChevronBottom,\n iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n ${IconContainer} {\n transition: transform 0.25s;\n ${p => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n }\n`;\nexport function ButtonExpand(\n { onToggle, onClick, ...props }: ButtonExpandProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n const [expanded, setExpanded] = useState(false);\n return (\n <StyledButtonExpand\n {...props}\n ref={ref}\n expanded={expanded}\n onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n setExpanded(expanded => !expanded);\n onToggle != null && onToggle(!expanded);\n onClick != null && onClick(event);\n }}\n />\n );\n}\n\nexport const buttonSizeStyle: {\n [index: string]: {\n padding: string;\n height: string;\n };\n} = {\n xs: {\n padding: \"0 12px\",\n height: \"28px\",\n },\n small: {\n padding: \"0 20px\",\n height: \"32px\",\n },\n medium: {\n padding: \"0 24px\",\n height: \"40px\",\n },\n large: {\n padding: \"0 28px\",\n height: \"48px\",\n },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "baseStyled", "fontFamily", "React", "ChevronBottom", "expanded"]
|
|
7
7
|
}
|
|
@@ -29,44 +29,42 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
var Carousel_stories_exports = {};
|
|
30
30
|
__export(Carousel_stories_exports, {
|
|
31
31
|
Default: () => Default,
|
|
32
|
+
PortfolioContentCards: () => PortfolioContentCards,
|
|
32
33
|
default: () => Carousel_stories_default
|
|
33
34
|
});
|
|
34
35
|
module.exports = __toCommonJS(Carousel_stories_exports);
|
|
36
|
+
var import_addon_actions = require("@storybook/addon-actions");
|
|
35
37
|
var import_react = __toESM(require("react"));
|
|
38
|
+
var import_PortfolioContentCard = __toESM(require("../ContentCard/PortfolioContentCard"));
|
|
36
39
|
var import__ = __toESM(require("./"));
|
|
37
|
-
const
|
|
38
|
-
const slides = Array.from({ length: args.children }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
|
|
39
|
-
"div",
|
|
40
|
-
{
|
|
41
|
-
key: index,
|
|
42
|
-
style: {
|
|
43
|
-
backgroundColor: "hsl(" + Math.random() * 360 + ", 100%, 75%)",
|
|
44
|
-
padding: "16px 24px",
|
|
45
|
-
borderRadius: "5px"
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
"Slide ",
|
|
49
|
-
index
|
|
50
|
-
));
|
|
51
|
-
return /* @__PURE__ */ import_react.default.createElement(import__.default, { variant: args.variant, children: slides });
|
|
52
|
-
};
|
|
40
|
+
const SlideContext = import_react.default.createContext([]);
|
|
53
41
|
var Carousel_stories_default = {
|
|
54
42
|
title: "Layout/Carousel",
|
|
55
43
|
argTypes: {
|
|
56
44
|
children: {
|
|
57
45
|
description: "The elements to be displayed.",
|
|
58
|
-
control: { type: "range", min:
|
|
46
|
+
control: { type: "range", min: 0, max: 10, step: 1 }
|
|
59
47
|
},
|
|
60
48
|
variant: {
|
|
61
49
|
description: "Variant for the carousel.",
|
|
62
50
|
options: ["default", "content-card"],
|
|
63
51
|
defaultValue: "default",
|
|
64
52
|
control: "inline-radio"
|
|
53
|
+
},
|
|
54
|
+
autoPlay: {
|
|
55
|
+
description: "The time in milliseconds between automatic slide change (0 for no auto-play)."
|
|
56
|
+
},
|
|
57
|
+
onNext: {
|
|
58
|
+
description: "Function called when the user moves to the next slide."
|
|
59
|
+
},
|
|
60
|
+
onPrev: {
|
|
61
|
+
description: "Function called when the user moves to the previous slide."
|
|
65
62
|
}
|
|
66
63
|
},
|
|
67
64
|
args: {
|
|
68
65
|
variant: "default",
|
|
69
|
-
children: 5
|
|
66
|
+
children: 5,
|
|
67
|
+
autoPlay: 0
|
|
70
68
|
},
|
|
71
69
|
parameters: {
|
|
72
70
|
docs: {
|
|
@@ -75,7 +73,49 @@ var Carousel_stories_default = {
|
|
|
75
73
|
}
|
|
76
74
|
}
|
|
77
75
|
},
|
|
78
|
-
|
|
76
|
+
decorators: [
|
|
77
|
+
(Story, { args, parameters }) => /* @__PURE__ */ import_react.default.createElement(
|
|
78
|
+
SlideContext.Provider,
|
|
79
|
+
{
|
|
80
|
+
value: Array.from({ length: args.children }, (_, index) => /* @__PURE__ */ import_react.default.createElement(parameters.Slide, { key: index, index }))
|
|
81
|
+
},
|
|
82
|
+
/* @__PURE__ */ import_react.default.createElement(Story, null)
|
|
83
|
+
)
|
|
84
|
+
],
|
|
85
|
+
render: ({ children, ...props }) => /* @__PURE__ */ import_react.default.createElement(import__.default, { ...props }, (0, import_react.useContext)(SlideContext))
|
|
86
|
+
};
|
|
87
|
+
const Default = {
|
|
88
|
+
parameters: {
|
|
89
|
+
Slide: ({ index }) => /* @__PURE__ */ import_react.default.createElement(
|
|
90
|
+
"div",
|
|
91
|
+
{
|
|
92
|
+
style: {
|
|
93
|
+
backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,
|
|
94
|
+
padding: "16px 24px",
|
|
95
|
+
borderRadius: "5px"
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
"Slide ",
|
|
99
|
+
index
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
const PortfolioContentCards = {
|
|
104
|
+
parameters: {
|
|
105
|
+
Slide: ({ index }) => /* @__PURE__ */ import_react.default.createElement(
|
|
106
|
+
import_PortfolioContentCard.default,
|
|
107
|
+
{
|
|
108
|
+
title: "Ledger Recover",
|
|
109
|
+
description: "Get peace of mind and start your free trial.",
|
|
110
|
+
cta: index % 2 ? void 0 : "Start my free trial",
|
|
111
|
+
tag: index % 3 ? void 0 : "New",
|
|
112
|
+
image: (index + 1) % 4 ? IMAGE_SRC : void 0,
|
|
113
|
+
onClick: () => onSlideAction(`click on slide ${index}`),
|
|
114
|
+
onClose: () => onSlideAction(`close slide ${index}`)
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
}
|
|
79
118
|
};
|
|
80
|
-
const
|
|
119
|
+
const onSlideAction = (0, import_addon_actions.action)("onSlideAction");
|
|
120
|
+
const IMAGE_SRC = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>";
|
|
81
121
|
//# sourceMappingURL=Carousel.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Carousel/Carousel.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["React", "Carousel"]
|
|
4
|
+
"sourcesContent": ["import { action } from \"@storybook/addon-actions\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { FC, ReactElement, useContext } from \"react\";\n\nimport PortfolioContentCard from \"../ContentCard/PortfolioContentCard\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\ntype Args = Omit<Props, \"children\"> & { children: number };\ntype Parameters = { Slide: FC<{ index: number }> };\n\nconst SlideContext = React.createContext<ReactElement[]>([]);\nexport default {\n title: \"Layout/Carousel\",\n argTypes: {\n children: {\n description: \"The elements to be displayed.\",\n control: { type: \"range\", min: 0, max: 10, step: 1 },\n },\n variant: {\n description: \"Variant for the carousel.\",\n options: [\"default\", \"content-card\"],\n defaultValue: \"default\",\n control: \"inline-radio\",\n },\n autoPlay: {\n description: \"The time in milliseconds between automatic slide change (0 for no auto-play).\",\n },\n onNext: {\n description: \"Function called when the user moves to the next slide.\",\n },\n onPrev: {\n description: \"Function called when the user moves to the previous slide.\",\n },\n },\n args: {\n variant: \"default\",\n children: 5,\n autoPlay: 0,\n },\n parameters: {\n docs: {\n description: {\n component: \"A simple Carousel component.\",\n },\n },\n },\n decorators: [\n (Story: FC, { args, parameters }: { args: Args; parameters: Parameters }) => (\n <SlideContext.Provider\n value={Array.from({ length: args.children }, (_, index) => (\n <parameters.Slide key={index} index={index} />\n ))}\n >\n <Story />\n </SlideContext.Provider>\n ),\n ],\n render: ({ children, ...props }: Args) => (\n <Carousel {...props}>{useContext(SlideContext)}</Carousel>\n ),\n} satisfies Meta<Args>;\n\nexport const Default: StoryObj<Args> = {\n parameters: {\n Slide: (({ index }) => (\n <div\n style={{\n backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,\n padding: \"16px 24px\",\n borderRadius: \"5px\",\n }}\n >\n Slide {index}\n </div>\n )) satisfies Parameters[\"Slide\"],\n },\n};\n\nexport const PortfolioContentCards: StoryObj<Args> = {\n parameters: {\n Slide: (({ index }) => (\n <PortfolioContentCard\n title=\"Ledger Recover\"\n description=\"Get peace of mind and start your free trial.\"\n cta={index % 2 ? undefined : \"Start my free trial\"}\n tag={index % 3 ? undefined : \"New\"}\n image={(index + 1) % 4 ? IMAGE_SRC : undefined}\n onClick={() => onSlideAction(`click on slide ${index}`)}\n onClose={() => onSlideAction(`close slide ${index}`)}\n />\n )) satisfies Parameters[\"Slide\"],\n },\n};\n\nconst onSlideAction = action(\"onSlideAction\");\n\nconst IMAGE_SRC =\n \"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AAEvB,mBAAoD;AAEpD,kCAAiC;AACjC,eAAqB;AAMrB,MAAM,eAAe,aAAAA,QAAM,cAA8B,CAAC,CAAC;AAC3D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,EAAE;AAAA,IACrD;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,cAAc;AAAA,MACnC,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,CAAC,OAAW,EAAE,MAAM,WAAW,MAC7B,6BAAAA,QAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,GAAG,CAAC,GAAG,UAC/C,6BAAAA,QAAA,cAAC,WAAW,OAAX,EAAiB,KAAK,OAAO,OAAc,CAC7C;AAAA;AAAA,MAED,6BAAAA,QAAA,cAAC,WAAM;AAAA,IACT;AAAA,EAEJ;AAAA,EACA,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAC5B,6BAAAA,QAAA,cAAC,SAAAC,SAAA,EAAU,GAAG,aAAQ,yBAAW,YAAY,CAAE;AAEnD;AAEO,MAAM,UAA0B;AAAA,EACrC,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAD,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,iBAAiB,OAAO,KAAK,OAAO,IAAI,GAAG;AAAA,UAC3C,SAAS;AAAA,UACT,cAAc;AAAA,QAChB;AAAA;AAAA,MACD;AAAA,MACQ;AAAA,IACT;AAAA,EAEJ;AACF;AAEO,MAAM,wBAAwC;AAAA,EACnD,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAA,QAAA;AAAA,MAAC,4BAAAE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,QAAQ,QAAQ,KAAK,IAAI,YAAY;AAAA,QACrC,SAAS,MAAM,cAAc,kBAAkB,KAAK,EAAE;AAAA,QACtD,SAAS,MAAM,cAAc,eAAe,KAAK,EAAE;AAAA;AAAA,IACrD;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAgB,6BAAO,eAAe;AAE5C,MAAM,YACJ;",
|
|
6
|
+
"names": ["React", "Carousel", "PortfolioContentCard"]
|
|
7
7
|
}
|
|
@@ -31,7 +31,9 @@ __export(Carousel_exports, {
|
|
|
31
31
|
default: () => Carousel_default
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(Carousel_exports);
|
|
34
|
+
var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"));
|
|
34
35
|
var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
|
|
36
|
+
var import_debounce = __toESM(require("lodash/debounce"));
|
|
35
37
|
var import_react = __toESM(require("react"));
|
|
36
38
|
var import_styled_components = __toESM(require("styled-components"));
|
|
37
39
|
var import_Footer = __toESM(require("./Footer"));
|
|
@@ -43,8 +45,12 @@ const EmblaContainer = import_styled_components.default.div`
|
|
|
43
45
|
display: flex;
|
|
44
46
|
`;
|
|
45
47
|
const EmblaSlide = import_styled_components.default.div`
|
|
48
|
+
display: flex;
|
|
46
49
|
flex: 0 0 100%;
|
|
47
50
|
min-width: 0;
|
|
51
|
+
> * {
|
|
52
|
+
flex-basis: 100%;
|
|
53
|
+
}
|
|
48
54
|
`;
|
|
49
55
|
const CarouselContainer = import_styled_components.default.div`
|
|
50
56
|
position: relative;
|
|
@@ -54,9 +60,12 @@ const CarouselContainer = import_styled_components.default.div`
|
|
|
54
60
|
--hover-transition: 1;
|
|
55
61
|
}
|
|
56
62
|
`;
|
|
57
|
-
const Carousel = ({ children, variant = "default" }) => {
|
|
63
|
+
const Carousel = ({ children, variant = "default", autoPlay = 0, onNext, onPrev }) => {
|
|
58
64
|
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
|
|
59
|
-
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(
|
|
65
|
+
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(
|
|
66
|
+
{ loop: true },
|
|
67
|
+
autoPlay ? [(0, import_embla_carousel_autoplay.default)({ delay: autoPlay, ...AutoplayFlags })] : []
|
|
68
|
+
);
|
|
60
69
|
const updateIndex = (0, import_react.useCallback)(() => {
|
|
61
70
|
if (!emblaApi)
|
|
62
71
|
return;
|
|
@@ -68,12 +77,65 @@ const Carousel = ({ children, variant = "default" }) => {
|
|
|
68
77
|
if (!emblaApi)
|
|
69
78
|
return;
|
|
70
79
|
updateIndex();
|
|
71
|
-
emblaApi
|
|
80
|
+
const dragX = watchDragX(emblaApi);
|
|
81
|
+
const handleAnySelect = (0, import_debounce.default)((mightBeASwipe) => {
|
|
82
|
+
updateIndex();
|
|
83
|
+
if (!mightBeASwipe || variant !== "default")
|
|
84
|
+
return;
|
|
85
|
+
if (dragX.value > 0)
|
|
86
|
+
return onPrev == null ? void 0 : onPrev();
|
|
87
|
+
if (dragX.value < 0)
|
|
88
|
+
return onNext == null ? void 0 : onNext();
|
|
89
|
+
}, 0);
|
|
90
|
+
emblaApi.on("select", handleSelect);
|
|
91
|
+
emblaApi.on("autoplay:select", handleAutoPlaySelect);
|
|
92
|
+
emblaApi.on("button:prev", handlePrevButton);
|
|
93
|
+
emblaApi.on("button:next", handleNextButton);
|
|
72
94
|
emblaApi.on("reInit", updateIndex);
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
95
|
+
return () => {
|
|
96
|
+
dragX.clean();
|
|
97
|
+
emblaApi.off("select", handleSelect);
|
|
98
|
+
emblaApi.off("autoplay:select", handleAutoPlaySelect);
|
|
99
|
+
emblaApi.off("button:prev", handlePrevButton);
|
|
100
|
+
emblaApi.off("button:next", handleNextButton);
|
|
101
|
+
emblaApi.off("reInit", updateIndex);
|
|
102
|
+
};
|
|
103
|
+
function handleSelect() {
|
|
104
|
+
handleAnySelect(true);
|
|
105
|
+
}
|
|
106
|
+
function handleAutoPlaySelect() {
|
|
107
|
+
handleAnySelect(false);
|
|
108
|
+
}
|
|
109
|
+
function handlePrevButton() {
|
|
110
|
+
emblaApi == null ? void 0 : emblaApi.scrollPrev();
|
|
111
|
+
onPrev == null ? void 0 : onPrev();
|
|
112
|
+
handleAnySelect(false);
|
|
113
|
+
}
|
|
114
|
+
function handleNextButton() {
|
|
115
|
+
emblaApi == null ? void 0 : emblaApi.scrollNext();
|
|
116
|
+
onNext == null ? void 0 : onNext();
|
|
117
|
+
handleAnySelect(false);
|
|
118
|
+
}
|
|
119
|
+
}, [emblaApi, updateIndex, variant]);
|
|
120
|
+
if (!children.length)
|
|
121
|
+
return null;
|
|
122
|
+
const handleGotoPrevSlide = () => emblaApi == null ? void 0 : emblaApi.emit("button:prev");
|
|
123
|
+
const handleGotoNextSlide = () => emblaApi == null ? void 0 : emblaApi.emit("button:next");
|
|
124
|
+
return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(CarouselContainer, { variant }, variant === "default" && children.length > 1 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
125
|
+
import_ChevronArrow.ChevronArrow,
|
|
126
|
+
{
|
|
127
|
+
"data-testid": "carousel-arrow-prev",
|
|
128
|
+
direction: "left",
|
|
129
|
+
onClick: handleGotoPrevSlide
|
|
130
|
+
}
|
|
131
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
132
|
+
import_ChevronArrow.ChevronArrow,
|
|
133
|
+
{
|
|
134
|
+
"data-testid": "carousel-arrow-next",
|
|
135
|
+
direction: "right",
|
|
136
|
+
onClick: handleGotoNextSlide
|
|
137
|
+
}
|
|
138
|
+
)), /* @__PURE__ */ import_react.default.createElement(Embla, { ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement(EmblaContainer, null, children.map((child) => /* @__PURE__ */ import_react.default.createElement(EmblaSlide, { key: child.key }, child))))), /* @__PURE__ */ import_react.default.createElement(
|
|
77
139
|
import_Footer.default,
|
|
78
140
|
{
|
|
79
141
|
children,
|
|
@@ -84,4 +146,36 @@ const Carousel = ({ children, variant = "default" }) => {
|
|
|
84
146
|
));
|
|
85
147
|
};
|
|
86
148
|
var Carousel_default = Carousel;
|
|
149
|
+
const AutoplayFlags = {
|
|
150
|
+
play: true,
|
|
151
|
+
stopOnMouseEnter: true,
|
|
152
|
+
stopOnInteraction: false
|
|
153
|
+
};
|
|
154
|
+
function watchDragX(emblaApi) {
|
|
155
|
+
emblaApi.on("pointerDown", watchMouse);
|
|
156
|
+
let start;
|
|
157
|
+
let end;
|
|
158
|
+
return {
|
|
159
|
+
get value() {
|
|
160
|
+
return typeof start === "undefined" || typeof end === "undefined" ? 0 : end - start;
|
|
161
|
+
},
|
|
162
|
+
clean: () => {
|
|
163
|
+
emblaApi.off("pointerDown", watchMouse);
|
|
164
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
function watchMouse() {
|
|
168
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
169
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
170
|
+
}
|
|
171
|
+
function handleMouseMove(event) {
|
|
172
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
173
|
+
start = event.clientX;
|
|
174
|
+
end = void 0;
|
|
175
|
+
}
|
|
176
|
+
function handleMouseUp(event) {
|
|
177
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
178
|
+
end = event.clientX;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
87
181
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Carousel/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import useEmblaCarousel from \"embla-carousel-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport Footer from \"./Footer\";\nimport { Props } from \"./types\";\nimport { ChevronArrow } from \"./ChevronArrow\";\n\nconst Embla = styled.div`\n overflow: hidden;\n`;\n\nconst EmblaContainer = styled.div`\n display: flex;\n`;\n\nconst EmblaSlide = styled.div`\n flex: 0 0 100%;\n min-width: 0;\n`;\n\nconst CarouselContainer = styled.div<Pick<Props, \"variant\">>`\n position: relative;\n\n --hover-transition: 0;\n &:hover {\n --hover-transition: 1;\n }\n`;\n\n/**\n * This component uses the https://github.com/davidjerleke/embla-carousel library.\n */\nconst Carousel = ({ children, variant = \"default\" }: Props) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });\n\n const updateIndex = useCallback(() => {\n if (!emblaApi) return;\n\n const newIndex = emblaApi.selectedScrollSnap();\n setCurrentIndex(newIndex);\n emblaApi.scrollTo(newIndex);\n }, [emblaApi]);\n\n useEffect(() => {\n if (!emblaApi) return;\n\n // Initial call to update carousel index\n updateIndex();\n\n // When the selected scroll snap changes\n emblaApi.on(\"select\",
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["styled", "useEmblaCarousel", "React", "Footer"]
|
|
4
|
+
"sourcesContent": ["import type { EmblaCarouselType, EmblaEventType } from \"embla-carousel\";\nimport Autoplay from \"embla-carousel-autoplay\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport debounce from \"lodash/debounce\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport Footer from \"./Footer\";\nimport { Props } from \"./types\";\nimport { ChevronArrow } from \"./ChevronArrow\";\n\nconst Embla = styled.div`\n overflow: hidden;\n`;\n\nconst EmblaContainer = styled.div`\n display: flex;\n`;\n\nconst EmblaSlide = styled.div`\n display: flex;\n flex: 0 0 100%;\n min-width: 0;\n > * {\n flex-basis: 100%;\n }\n`;\n\nconst CarouselContainer = styled.div<Pick<Props, \"variant\">>`\n position: relative;\n\n --hover-transition: 0;\n &:hover {\n --hover-transition: 1;\n }\n`;\n\n/**\n * This component uses the https://github.com/davidjerleke/embla-carousel library.\n */\nconst Carousel = ({ children, variant = \"default\", autoPlay = 0, onNext, onPrev }: Props) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [emblaRef, emblaApi] = useEmblaCarousel(\n { loop: true },\n autoPlay ? [Autoplay({ delay: autoPlay, ...AutoplayFlags })] : [],\n );\n\n const updateIndex = useCallback(() => {\n if (!emblaApi) return;\n\n const newIndex = emblaApi.selectedScrollSnap();\n setCurrentIndex(newIndex);\n emblaApi.scrollTo(newIndex);\n }, [emblaApi]);\n\n useEffect(() => {\n if (!emblaApi) return;\n\n // Initial call to update carousel index\n updateIndex();\n\n const dragX = watchDragX(emblaApi);\n\n // When the selected scroll snap changes\n const handleAnySelect = debounce((mightBeASwipe: boolean) => {\n updateIndex();\n if (!mightBeASwipe || variant !== \"default\") return; // onNext/onPrev events are not supported for content-card variant ATM\n if (dragX.value > 0) return onPrev?.();\n if (dragX.value < 0) return onNext?.();\n }, 0); // all events are fired on the same tick so no need to wait past the next tick\n\n emblaApi.on(\"select\", handleSelect);\n emblaApi.on(\"autoplay:select\" as EmblaEventType, handleAutoPlaySelect);\n emblaApi.on(\"button:prev\" as EmblaEventType, handlePrevButton);\n emblaApi.on(\"button:next\" as EmblaEventType, handleNextButton);\n\n // When `reInit` is called or when window is resized\n emblaApi.on(\"reInit\", updateIndex);\n\n return () => {\n dragX.clean();\n emblaApi.off(\"select\", handleSelect);\n emblaApi.off(\"autoplay:select\" as EmblaEventType, handleAutoPlaySelect);\n emblaApi.off(\"button:prev\" as EmblaEventType, handlePrevButton);\n emblaApi.off(\"button:next\" as EmblaEventType, handleNextButton);\n emblaApi.off(\"reInit\", updateIndex);\n };\n\n function handleSelect() {\n handleAnySelect(true); // This could be a swipe action. As this runs first the debounce will override the value otherwise\n }\n function handleAutoPlaySelect() {\n handleAnySelect(false);\n }\n function handlePrevButton() {\n emblaApi?.scrollPrev();\n onPrev?.();\n handleAnySelect(false);\n }\n function handleNextButton() {\n emblaApi?.scrollNext();\n onNext?.();\n handleAnySelect(false);\n }\n }, [emblaApi, updateIndex, variant]);\n\n if (!children.length) return null;\n\n const handleGotoPrevSlide = () => emblaApi?.emit(\"button:prev\" as EmblaEventType);\n const handleGotoNextSlide = () => emblaApi?.emit(\"button:next\" as EmblaEventType);\n\n return (\n <div>\n <CarouselContainer variant={variant}>\n {variant === \"default\" && children.length > 1 && (\n <>\n <ChevronArrow\n data-testid=\"carousel-arrow-prev\"\n direction=\"left\"\n onClick={handleGotoPrevSlide}\n />\n <ChevronArrow\n data-testid=\"carousel-arrow-next\"\n direction=\"right\"\n onClick={handleGotoNextSlide}\n />\n </>\n )}\n\n <Embla ref={emblaRef}>\n <EmblaContainer>\n {children.map(child => (\n <EmblaSlide key={child.key}>{child}</EmblaSlide>\n ))}\n </EmblaContainer>\n </Embla>\n </CarouselContainer>\n\n <Footer\n children={children}\n variant={variant}\n emblaApi={emblaApi}\n currentIndex={currentIndex}\n />\n </div>\n );\n};\n\nexport default Carousel;\n\nconst AutoplayFlags = {\n play: true,\n stopOnMouseEnter: true,\n stopOnInteraction: false,\n};\n\nfunction watchDragX(emblaApi: EmblaCarouselType) {\n emblaApi.on(\"pointerDown\", watchMouse);\n\n let start: number | undefined;\n let end: number | undefined;\n\n return {\n get value() {\n return typeof start === \"undefined\" || typeof end === \"undefined\" ? 0 : end - start;\n },\n clean: () => {\n emblaApi.off(\"pointerDown\", watchMouse);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n },\n };\n\n function watchMouse() {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n }\n function handleMouseMove(event: MouseEvent) {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n start = event.clientX;\n end = undefined;\n }\n function handleMouseUp(event: MouseEvent) {\n document.removeEventListener(\"mouseup\", handleMouseUp);\n end = event.clientX;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styled", "useEmblaCarousel", "Autoplay", "debounce", "React", "Footer"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/components/layout/Carousel/types.
|
|
4
|
-
"sourcesContent": ["import { ReactElement } from \"react\";\nimport { UseEmblaCarouselType } from \"embla-carousel-react\";\n\nexport type Variant = \"content-card\" | \"default\";\n\nexport type Props = {\n children: ReactElement[];\n variant?: Variant;\n};\n\n/**\n * Carousel's sub props to be passed to any component used by the carousel..\n */\nexport type SubProps = Required<Props
|
|
3
|
+
"sources": ["../../../../../src/components/layout/Carousel/types.ts"],
|
|
4
|
+
"sourcesContent": ["import { ReactElement } from \"react\";\nimport { UseEmblaCarouselType } from \"embla-carousel-react\";\n\nexport type Variant = \"content-card\" | \"default\";\n\nexport type Props = {\n children: ReactElement[];\n autoPlay?: number;\n variant?: Variant;\n onPrev?: () => void;\n onNext?: () => void;\n};\n\n/**\n * Carousel's sub props to be passed to any component used by the carousel..\n */\nexport type SubProps = Required<Pick<Props, \"children\" | \"variant\">> & {\n emblaApi: UseEmblaCarouselType[1];\n currentIndex: number;\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/PortfolioContentCard.stories.js
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var PortfolioContentCard_stories_exports = {};
|
|
30
|
+
__export(PortfolioContentCard_stories_exports, {
|
|
31
|
+
WithCta: () => WithCta,
|
|
32
|
+
WithTag: () => WithTag,
|
|
33
|
+
WithoutCta: () => WithoutCta,
|
|
34
|
+
default: () => PortfolioContentCard_stories_default
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(PortfolioContentCard_stories_exports);
|
|
37
|
+
var import__ = __toESM(require("."));
|
|
38
|
+
var PortfolioContentCard_stories_default = {
|
|
39
|
+
title: "Layout/ContentCard/PortfolioContentCard",
|
|
40
|
+
component: import__.default,
|
|
41
|
+
argTypes: {
|
|
42
|
+
title: {
|
|
43
|
+
description: "Title of the card."
|
|
44
|
+
},
|
|
45
|
+
cta: {
|
|
46
|
+
description: "Call to action text."
|
|
47
|
+
},
|
|
48
|
+
description: {
|
|
49
|
+
description: "Description of the card."
|
|
50
|
+
},
|
|
51
|
+
tag: {
|
|
52
|
+
description: "Tag to be displayed on top of the card."
|
|
53
|
+
},
|
|
54
|
+
image: {
|
|
55
|
+
description: "Image to be displayed on the right of the card."
|
|
56
|
+
},
|
|
57
|
+
onClick: {
|
|
58
|
+
description: "Function to be called when the card is clicked."
|
|
59
|
+
},
|
|
60
|
+
onClose: {
|
|
61
|
+
description: "Function to be called when the close button is clicked."
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
args: {
|
|
65
|
+
title: "Ledger Recover",
|
|
66
|
+
description: "Get peace of mind and start your free trial.",
|
|
67
|
+
cta: "Start my free trial",
|
|
68
|
+
image: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>"
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
const WithCta = {};
|
|
72
|
+
const WithoutCta = {
|
|
73
|
+
args: { cta: void 0 }
|
|
74
|
+
};
|
|
75
|
+
const WithTag = {
|
|
76
|
+
args: { tag: "New" }
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=PortfolioContentCard.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../src/components/layout/ContentCard/PortfolioContentCard/PortfolioContentCard.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport PortfolioContentCard, { PortfolioContentCardProps } from \".\";\n\nexport default {\n title: \"Layout/ContentCard/PortfolioContentCard\",\n component: PortfolioContentCard,\n argTypes: {\n title: {\n description: \"Title of the card.\",\n },\n cta: {\n description: \"Call to action text.\",\n },\n description: {\n description: \"Description of the card.\",\n },\n tag: {\n description: \"Tag to be displayed on top of the card.\",\n },\n image: {\n description: \"Image to be displayed on the right of the card.\",\n },\n onClick: {\n description: \"Function to be called when the card is clicked.\",\n },\n onClose: {\n description: \"Function to be called when the close button is clicked.\",\n },\n },\n args: {\n title: \"Ledger Recover\",\n description: \"Get peace of mind and start your free trial.\",\n cta: \"Start my free trial\",\n image:\n \"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>\",\n },\n} satisfies Meta<PortfolioContentCardProps>;\n\nexport const WithCta: StoryObj<PortfolioContentCardProps> = {};\n\nexport const WithoutCta: StoryObj<PortfolioContentCardProps> = {\n args: { cta: undefined },\n};\n\nexport const WithTag: StoryObj<PortfolioContentCardProps> = {\n args: { tag: \"New\" },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,eAAgE;AAEhE,IAAO,uCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,aAAa;AAAA,IACf;AAAA,IACA,KAAK;AAAA,MACH,aAAa;AAAA,IACf;AAAA,IACA,aAAa;AAAA,MACX,aAAa;AAAA,IACf;AAAA,IACA,KAAK;AAAA,MACH,aAAa;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACL,aAAa;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,KAAK;AAAA,IACL,OACE;AAAA,EACJ;AACF;AAEO,MAAM,UAA+C,CAAC;AAEtD,MAAM,aAAkD;AAAA,EAC7D,MAAM,EAAE,KAAK,OAAU;AACzB;AAEO,MAAM,UAA+C;AAAA,EAC1D,MAAM,EAAE,KAAK,MAAM;AACrB;",
|
|
6
|
+
"names": ["PortfolioContentCard"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var PortfolioContentCard_exports = {};
|
|
30
|
+
__export(PortfolioContentCard_exports, {
|
|
31
|
+
default: () => PortfolioContentCard
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(PortfolioContentCard_exports);
|
|
34
|
+
var import_react = __toESM(require("react"));
|
|
35
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
36
|
+
var import_styles = require("../../../../styles");
|
|
37
|
+
var import_assets = require("../../../../assets");
|
|
38
|
+
var import_asorted = require("../../../asorted");
|
|
39
|
+
var import_cta = require("../../../cta");
|
|
40
|
+
var import_Tag = __toESM(require("../../../Tag"));
|
|
41
|
+
function PortfolioContentCard({
|
|
42
|
+
title,
|
|
43
|
+
cta,
|
|
44
|
+
description,
|
|
45
|
+
tag,
|
|
46
|
+
image,
|
|
47
|
+
onClick,
|
|
48
|
+
onClose
|
|
49
|
+
}) {
|
|
50
|
+
const handleClose = (event) => {
|
|
51
|
+
event.stopPropagation();
|
|
52
|
+
onClose(event);
|
|
53
|
+
};
|
|
54
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { image, tag, onClick }, tag && /* @__PURE__ */ import_react.default.createElement(StyledTag, null, tag), /* @__PURE__ */ import_react.default.createElement(Title, null, title), description && /* @__PURE__ */ import_react.default.createElement(Desc, null, description), cta && /* @__PURE__ */ import_react.default.createElement(import_cta.Button, { variant: "main", outline: false, onClick }, cta), /* @__PURE__ */ import_react.default.createElement(import_styles.StyleProvider, { selectedPalette: "dark" }, /* @__PURE__ */ import_react.default.createElement(CloseButton, { "data-testid": "portfolio-card-close-button", onClick: handleClose })));
|
|
55
|
+
}
|
|
56
|
+
const StyledTag = (0, import_styled_components.default)(import_Tag.default).attrs({ size: "medium", type: "plain", active: true })`
|
|
57
|
+
font-size: 11px;
|
|
58
|
+
background-color: ${(p) => p.theme.colors.primary.c80};
|
|
59
|
+
`;
|
|
60
|
+
const Title = (0, import_styled_components.default)(import_asorted.Text).attrs({ variant: "h4Inter" })`
|
|
61
|
+
font-family: Inter;
|
|
62
|
+
font-size: 24px;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
`;
|
|
65
|
+
const Desc = (0, import_styled_components.default)(import_asorted.Text).attrs({ variant: "small", color: "neutral.c70" })`
|
|
66
|
+
font-family: Inter;
|
|
67
|
+
font-size: 13px;
|
|
68
|
+
font-style: normal;
|
|
69
|
+
font-weight: 500;
|
|
70
|
+
padding-bottom: 8px;
|
|
71
|
+
`;
|
|
72
|
+
const Wrapper = import_styled_components.default.div`
|
|
73
|
+
background-color: ${(p) => p.theme.colors.background.card};
|
|
74
|
+
background-image: ${(p) => p.image ? `url("${p.image}")` : "none"};
|
|
75
|
+
background-position: right center;
|
|
76
|
+
background-repeat: no-repeat;
|
|
77
|
+
background-size: 50% auto;
|
|
78
|
+
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
padding: 16px;
|
|
81
|
+
padding-top: ${(p) => p.tag ? "16px" : "24px"};
|
|
82
|
+
padding-right: 50%;
|
|
83
|
+
flex-basis: 100%;
|
|
84
|
+
|
|
85
|
+
position: relative;
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: column;
|
|
88
|
+
justify-content: flex-end;
|
|
89
|
+
align-items: flex-start;
|
|
90
|
+
gap: 4px;
|
|
91
|
+
`;
|
|
92
|
+
const CloseButton = (0, import_styled_components.default)(import_cta.Button).attrs({
|
|
93
|
+
Icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Close, { size: "XS" }),
|
|
94
|
+
iconButton: true,
|
|
95
|
+
outline: true
|
|
96
|
+
})`
|
|
97
|
+
background-color: ${(p) => p.theme.colors.neutral.c30};
|
|
98
|
+
position: absolute;
|
|
99
|
+
top: 10px;
|
|
100
|
+
right: 10px;
|
|
101
|
+
width: 24px;
|
|
102
|
+
height: 24px;
|
|
103
|
+
svg {
|
|
104
|
+
width: 12px;
|
|
105
|
+
height: 12px;
|
|
106
|
+
}
|
|
107
|
+
`;
|
|
108
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { type ReactEventHandler } from \"react\";\nimport styled from \"styled-components\";\n\nimport { StyleProvider } from \"../../../../styles\";\nimport { Icons } from \"../../../../assets\";\nimport { Text } from \"../../../asorted\";\nimport { Button } from \"../../../cta\";\nimport Tag from \"../../../Tag\";\n\nexport type PortfolioContentCardProps = {\n title: string;\n cta?: string;\n description?: string;\n tag?: string;\n image?: string;\n\n onClick: ReactEventHandler;\n onClose: ReactEventHandler;\n};\n\nexport default function PortfolioContentCard({\n title,\n cta,\n description,\n tag,\n image,\n onClick,\n onClose,\n}: PortfolioContentCardProps) {\n const handleClose: ReactEventHandler = event => {\n event.stopPropagation();\n onClose(event);\n };\n\n return (\n <Wrapper image={image} tag={tag} onClick={onClick}>\n {tag && <StyledTag>{tag}</StyledTag>}\n <Title>{title}</Title>\n {description && <Desc>{description}</Desc>}\n {cta && (\n <Button variant=\"main\" outline={false} onClick={onClick}>\n {cta}\n </Button>\n )}\n <StyleProvider selectedPalette=\"dark\">\n <CloseButton data-testid=\"portfolio-card-close-button\" onClick={handleClose} />\n </StyleProvider>\n </Wrapper>\n );\n}\n\nconst StyledTag = styled(Tag).attrs({ size: \"medium\", type: \"plain\", active: true })`\n font-size: 11px;\n background-color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Title = styled(Text).attrs({ variant: \"h4Inter\" })`\n font-family: Inter;\n font-size: 24px;\n font-weight: 600;\n`;\n\nconst Desc = styled(Text).attrs({ variant: \"small\", color: \"neutral.c70\" })`\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 500;\n padding-bottom: 8px;\n`;\n\nconst Wrapper = styled.div<Pick<PortfolioContentCardProps, \"image\" | \"tag\" | \"onClick\">>`\n background-color: ${p => p.theme.colors.background.card};\n background-image: ${p => (p.image ? `url(\"${p.image}\")` : \"none\")};\n background-position: right center;\n background-repeat: no-repeat;\n background-size: 50% auto;\n\n cursor: pointer;\n padding: 16px;\n padding-top: ${p => (p.tag ? \"16px\" : \"24px\")};\n padding-right: 50%;\n flex-basis: 100%;\n\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 4px;\n`;\n\nconst CloseButton = styled(Button).attrs({\n Icon: <Icons.Close size=\"XS\" />,\n iconButton: true,\n outline: true,\n})`\n background-color: ${p => p.theme.colors.neutral.c30};\n position: absolute;\n top: 10px;\n right: 10px;\n width: 24px;\n height: 24px;\n svg {\n width: 12px;\n height: 12px;\n }\n`;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAA8B;AAC9B,oBAAsB;AACtB,qBAAqB;AACrB,iBAAuB;AACvB,iBAAgB;AAaD,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,cAAiC,WAAS;AAC9C,UAAM,gBAAgB;AACtB,YAAQ,KAAK;AAAA,EACf;AAEA,SACE,6BAAAA,QAAA,cAAC,WAAQ,OAAc,KAAU,WAC9B,OAAO,6BAAAA,QAAA,cAAC,iBAAW,GAAI,GACxB,6BAAAA,QAAA,cAAC,aAAO,KAAM,GACb,eAAe,6BAAAA,QAAA,cAAC,YAAM,WAAY,GAClC,OACC,6BAAAA,QAAA,cAAC,qBAAO,SAAQ,QAAO,SAAS,OAAO,WACpC,GACH,GAEF,6BAAAA,QAAA,cAAC,+BAAc,iBAAgB,UAC7B,6BAAAA,QAAA,cAAC,eAAY,eAAY,+BAA8B,SAAS,aAAa,CAC/E,CACF;AAEJ;AAEA,MAAM,gBAAY,yBAAAC,SAAO,WAAAC,OAAG,EAAE,MAAM,EAAE,MAAM,UAAU,MAAM,SAAS,QAAQ,KAAK,CAAC;AAAA;AAAA,sBAE7D,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGrD,MAAM,YAAQ,yBAAAD,SAAO,mBAAI,EAAE,MAAM,EAAE,SAAS,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,WAAO,yBAAAA,SAAO,mBAAI,EAAE,MAAM,EAAE,SAAS,SAAS,OAAO,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1E,MAAM,UAAU,yBAAAA,QAAO;AAAA,sBACD,OAAK,EAAE,MAAM,OAAO,WAAW,IAAI;AAAA,sBACnC,OAAM,EAAE,QAAQ,QAAQ,EAAE,KAAK,OAAO,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOlD,OAAM,EAAE,MAAM,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY/C,MAAM,kBAAc,yBAAAA,SAAO,iBAAM,EAAE,MAAM;AAAA,EACvC,MAAM,6BAAAD,QAAA,cAAC,oBAAM,OAAN,EAAY,MAAK,MAAK;AAAA,EAC7B,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": ["React", "styled", "Tag"]
|
|
7
|
+
}
|
|
@@ -35,6 +35,7 @@ __export(layout_exports, {
|
|
|
35
35
|
Grid: () => import_Grid.default,
|
|
36
36
|
NumberedList: () => import_NumberedList.default,
|
|
37
37
|
Popin: () => import_Popin.default,
|
|
38
|
+
PortfolioContentCard: () => import_PortfolioContentCard.default,
|
|
38
39
|
Side: () => import_Side.default,
|
|
39
40
|
VerticalTimeline: () => import_VerticalTimeline.default
|
|
40
41
|
});
|
|
@@ -48,4 +49,5 @@ var import_Drawer = __toESM(require("./Drawer"));
|
|
|
48
49
|
var import_Carousel = __toESM(require("./Carousel"));
|
|
49
50
|
var import_VerticalTimeline = __toESM(require("./List/VerticalTimeline"));
|
|
50
51
|
var import_NumberedList = __toESM(require("./List/NumberedList"));
|
|
52
|
+
var import_PortfolioContentCard = __toESM(require("./ContentCard/PortfolioContentCard"));
|
|
51
53
|
//# 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\";\nexport { default as Carousel } from \"./Carousel\";\nexport { default as VerticalTimeline } from \"./List/VerticalTimeline\";\nexport { default as NumberedList } from \"./List/NumberedList\";\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;AAClC,sBAAoC;AACpC,8BAA4C;AAC5C,0BAAwC;",
|
|
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 Carousel } from \"./Carousel\";\nexport { default as VerticalTimeline } from \"./List/VerticalTimeline\";\nexport { default as NumberedList } from \"./List/NumberedList\";\nexport { default as PortfolioContentCard } from \"./ContentCard/PortfolioContentCard\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;AAClC,sBAAoC;AACpC,8BAA4C;AAC5C,0BAAwC;AACxC,kCAAgD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ interface BaseProps extends BaseStyledProps, BordersProps {
|
|
|
17
17
|
whiteSpace?: string;
|
|
18
18
|
}
|
|
19
19
|
export interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {
|
|
20
|
-
Icon?: React.ComponentType<{
|
|
20
|
+
Icon?: React.ReactElement | React.ComponentType<{
|
|
21
21
|
size: number;
|
|
22
22
|
color?: string;
|
|
23
23
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAoB,YAAY,EAAW,MAAM,eAAe,CAAC;AAMxE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5C,UAAU,SAAU,SAAQ,eAAe,EAAE,YAAY;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;IACpF,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAoB,YAAY,EAAW,MAAM,eAAe,CAAC;AAMxE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5C,UAAU,SAAU,SAAQ,eAAe,EAAE,YAAY;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;IACpF,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAsHD,eAAO,MAAM,cAAc,4GAO1B,CAAC;AAEF,eAAO,MAAM,IAAI;;;yCAuEhB,CAAC;AAuBF,QAAA,MAAM,aAAa;oEAlB6D,WAAW,QACnF,MAAM,YAAY,CAAC,iBAAiB,CAAC,GAC1C,MAAM,YAAY;;;CAgBqD,CAAC;AAE3E,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CACrD,WAAW,GAAG;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CACF,CAAC;AAWF,wBAAgB,YAAY,CAC1B,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,EAClD,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,GAC1C,KAAK,CAAC,YAAY,CAcpB;AAED,eAAO,MAAM,eAAe,EAAE;IAC5B,CAAC,KAAK,EAAE,MAAM,GAAG;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CAkBH,CAAC;AAMF,eAAe,aAAa,CAAC"}
|
|
@@ -212,7 +212,13 @@ const Button = (_a, ref) => {
|
|
|
212
212
|
var _b;
|
|
213
213
|
var { Icon, iconPosition = "right", iconSize = 16, children, onClick } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick"]);
|
|
214
214
|
const iconNodeSize = iconSize || fontSizes[(_b = props.fontSize) !== null && _b !== void 0 ? _b : 4];
|
|
215
|
-
const IconNode = useMemo(() =>
|
|
215
|
+
const IconNode = useMemo(() => {
|
|
216
|
+
if (!Icon)
|
|
217
|
+
return null;
|
|
218
|
+
if (typeof Icon === "object")
|
|
219
|
+
return Icon;
|
|
220
|
+
return React.createElement(Icon, { size: iconNodeSize });
|
|
221
|
+
}, [iconNodeSize, Icon]);
|
|
216
222
|
return (React.createElement(Base, Object.assign({}, props, { ref: ref, iconButton: !(Icon == null) && !children, onClick: onClick }),
|
|
217
223
|
iconPosition === "right" ? React.createElement(ContentContainer, null, children) : null,
|
|
218
224
|
IconNode && React.createElement(IconContainer, { iconPosition: iconPosition }, IconNode),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,6 @@ import { Props } from "./types";
|
|
|
3
3
|
/**
|
|
4
4
|
* This component uses the https://github.com/davidjerleke/embla-carousel library.
|
|
5
5
|
*/
|
|
6
|
-
declare const Carousel: ({ children, variant }: Props) => React.JSX.Element;
|
|
6
|
+
declare const Carousel: ({ children, variant, autoPlay, onNext, onPrev }: Props) => React.JSX.Element | null;
|
|
7
7
|
export default Carousel;
|
|
8
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AA6BhC;;GAEG;AACH,QAAA,MAAM,QAAQ,oDAAqE,KAAK,6BA0GvF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import Autoplay from "embla-carousel-autoplay";
|
|
1
2
|
import useEmblaCarousel from "embla-carousel-react";
|
|
3
|
+
import debounce from "lodash/debounce";
|
|
2
4
|
import React, { useCallback, useEffect, useState } from "react";
|
|
3
5
|
import styled from "styled-components";
|
|
4
6
|
import Footer from "./Footer";
|
|
@@ -10,8 +12,12 @@ const EmblaContainer = styled.div `
|
|
|
10
12
|
display: flex;
|
|
11
13
|
`;
|
|
12
14
|
const EmblaSlide = styled.div `
|
|
15
|
+
display: flex;
|
|
13
16
|
flex: 0 0 100%;
|
|
14
17
|
min-width: 0;
|
|
18
|
+
> * {
|
|
19
|
+
flex-basis: 100%;
|
|
20
|
+
}
|
|
15
21
|
`;
|
|
16
22
|
const CarouselContainer = styled.div `
|
|
17
23
|
position: relative;
|
|
@@ -24,9 +30,9 @@ const CarouselContainer = styled.div `
|
|
|
24
30
|
/**
|
|
25
31
|
* This component uses the https://github.com/davidjerleke/embla-carousel library.
|
|
26
32
|
*/
|
|
27
|
-
const Carousel = ({ children, variant = "default" }) => {
|
|
33
|
+
const Carousel = ({ children, variant = "default", autoPlay = 0, onNext, onPrev }) => {
|
|
28
34
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
29
|
-
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
|
|
35
|
+
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, autoPlay ? [Autoplay(Object.assign({ delay: autoPlay }, AutoplayFlags))] : []);
|
|
30
36
|
const updateIndex = useCallback(() => {
|
|
31
37
|
if (!emblaApi)
|
|
32
38
|
return;
|
|
@@ -39,21 +45,92 @@ const Carousel = ({ children, variant = "default" }) => {
|
|
|
39
45
|
return;
|
|
40
46
|
// Initial call to update carousel index
|
|
41
47
|
updateIndex();
|
|
48
|
+
const dragX = watchDragX(emblaApi);
|
|
42
49
|
// When the selected scroll snap changes
|
|
43
|
-
|
|
50
|
+
const handleAnySelect = debounce((mightBeASwipe) => {
|
|
51
|
+
updateIndex();
|
|
52
|
+
if (!mightBeASwipe || variant !== "default")
|
|
53
|
+
return; // onNext/onPrev events are not supported for content-card variant ATM
|
|
54
|
+
if (dragX.value > 0)
|
|
55
|
+
return onPrev === null || onPrev === void 0 ? void 0 : onPrev();
|
|
56
|
+
if (dragX.value < 0)
|
|
57
|
+
return onNext === null || onNext === void 0 ? void 0 : onNext();
|
|
58
|
+
}, 0); // all events are fired on the same tick so no need to wait past the next tick
|
|
59
|
+
emblaApi.on("select", handleSelect);
|
|
60
|
+
emblaApi.on("autoplay:select", handleAutoPlaySelect);
|
|
61
|
+
emblaApi.on("button:prev", handlePrevButton);
|
|
62
|
+
emblaApi.on("button:next", handleNextButton);
|
|
44
63
|
// When `reInit` is called or when window is resized
|
|
45
64
|
emblaApi.on("reInit", updateIndex);
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
65
|
+
return () => {
|
|
66
|
+
dragX.clean();
|
|
67
|
+
emblaApi.off("select", handleSelect);
|
|
68
|
+
emblaApi.off("autoplay:select", handleAutoPlaySelect);
|
|
69
|
+
emblaApi.off("button:prev", handlePrevButton);
|
|
70
|
+
emblaApi.off("button:next", handleNextButton);
|
|
71
|
+
emblaApi.off("reInit", updateIndex);
|
|
72
|
+
};
|
|
73
|
+
function handleSelect() {
|
|
74
|
+
handleAnySelect(true); // This could be a swipe action. As this runs first the debounce will override the value otherwise
|
|
75
|
+
}
|
|
76
|
+
function handleAutoPlaySelect() {
|
|
77
|
+
handleAnySelect(false);
|
|
78
|
+
}
|
|
79
|
+
function handlePrevButton() {
|
|
80
|
+
emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollPrev();
|
|
81
|
+
onPrev === null || onPrev === void 0 ? void 0 : onPrev();
|
|
82
|
+
handleAnySelect(false);
|
|
83
|
+
}
|
|
84
|
+
function handleNextButton() {
|
|
85
|
+
emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollNext();
|
|
86
|
+
onNext === null || onNext === void 0 ? void 0 : onNext();
|
|
87
|
+
handleAnySelect(false);
|
|
88
|
+
}
|
|
89
|
+
}, [emblaApi, updateIndex, variant]);
|
|
90
|
+
if (!children.length)
|
|
91
|
+
return null;
|
|
92
|
+
const handleGotoPrevSlide = () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.emit("button:prev");
|
|
93
|
+
const handleGotoNextSlide = () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.emit("button:next");
|
|
49
94
|
return (React.createElement("div", null,
|
|
50
95
|
React.createElement(CarouselContainer, { variant: variant },
|
|
51
96
|
variant === "default" && children.length > 1 && (React.createElement(React.Fragment, null,
|
|
52
|
-
React.createElement(ChevronArrow, { direction: "left", onClick: handleGotoPrevSlide }),
|
|
53
|
-
React.createElement(ChevronArrow, { direction: "right", onClick: handleGotoNextSlide }))),
|
|
97
|
+
React.createElement(ChevronArrow, { "data-testid": "carousel-arrow-prev", direction: "left", onClick: handleGotoPrevSlide }),
|
|
98
|
+
React.createElement(ChevronArrow, { "data-testid": "carousel-arrow-next", direction: "right", onClick: handleGotoNextSlide }))),
|
|
54
99
|
React.createElement(Embla, { ref: emblaRef },
|
|
55
100
|
React.createElement(EmblaContainer, null, children.map(child => (React.createElement(EmblaSlide, { key: child.key }, child)))))),
|
|
56
101
|
React.createElement(Footer, { children: children, variant: variant, emblaApi: emblaApi, currentIndex: currentIndex })));
|
|
57
102
|
};
|
|
58
103
|
export default Carousel;
|
|
104
|
+
const AutoplayFlags = {
|
|
105
|
+
play: true,
|
|
106
|
+
stopOnMouseEnter: true,
|
|
107
|
+
stopOnInteraction: false,
|
|
108
|
+
};
|
|
109
|
+
function watchDragX(emblaApi) {
|
|
110
|
+
emblaApi.on("pointerDown", watchMouse);
|
|
111
|
+
let start;
|
|
112
|
+
let end;
|
|
113
|
+
return {
|
|
114
|
+
get value() {
|
|
115
|
+
return typeof start === "undefined" || typeof end === "undefined" ? 0 : end - start;
|
|
116
|
+
},
|
|
117
|
+
clean: () => {
|
|
118
|
+
emblaApi.off("pointerDown", watchMouse);
|
|
119
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
120
|
+
},
|
|
121
|
+
};
|
|
122
|
+
function watchMouse() {
|
|
123
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
124
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
125
|
+
}
|
|
126
|
+
function handleMouseMove(event) {
|
|
127
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
128
|
+
start = event.clientX;
|
|
129
|
+
end = undefined;
|
|
130
|
+
}
|
|
131
|
+
function handleMouseUp(event) {
|
|
132
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
133
|
+
end = event.clientX;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
59
136
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,12 +3,15 @@ import { UseEmblaCarouselType } from "embla-carousel-react";
|
|
|
3
3
|
export type Variant = "content-card" | "default";
|
|
4
4
|
export type Props = {
|
|
5
5
|
children: ReactElement[];
|
|
6
|
+
autoPlay?: number;
|
|
6
7
|
variant?: Variant;
|
|
8
|
+
onPrev?: () => void;
|
|
9
|
+
onNext?: () => void;
|
|
7
10
|
};
|
|
8
11
|
/**
|
|
9
12
|
* Carousel's sub props to be passed to any component used by the carousel..
|
|
10
13
|
*/
|
|
11
|
-
export type SubProps = Required<Props
|
|
14
|
+
export type SubProps = Required<Pick<Props, "children" | "variant">> & {
|
|
12
15
|
emblaApi: UseEmblaCarouselType[1];
|
|
13
16
|
currentIndex: number;
|
|
14
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,MAAM,OAAO,GAAG,cAAc,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC,GAAG;IACrE,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React, { type ReactEventHandler } from "react";
|
|
2
|
+
export type PortfolioContentCardProps = {
|
|
3
|
+
title: string;
|
|
4
|
+
cta?: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
tag?: string;
|
|
7
|
+
image?: string;
|
|
8
|
+
onClick: ReactEventHandler;
|
|
9
|
+
onClose: ReactEventHandler;
|
|
10
|
+
};
|
|
11
|
+
export default function PortfolioContentCard({ title, cta, description, tag, image, onClick, onClose, }: PortfolioContentCardProps): React.JSX.Element;
|
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAStD,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,iBAAiB,CAAC;IAC3B,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,GAAG,EACH,WAAW,EACX,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,GACR,EAAE,yBAAyB,qBAqB3B"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { StyleProvider } from "../../../../styles";
|
|
4
|
+
import { Icons } from "../../../../assets";
|
|
5
|
+
import { Text } from "../../../asorted";
|
|
6
|
+
import { Button } from "../../../cta";
|
|
7
|
+
import Tag from "../../../Tag";
|
|
8
|
+
export default function PortfolioContentCard({ title, cta, description, tag, image, onClick, onClose, }) {
|
|
9
|
+
const handleClose = event => {
|
|
10
|
+
event.stopPropagation();
|
|
11
|
+
onClose(event);
|
|
12
|
+
};
|
|
13
|
+
return (React.createElement(Wrapper, { image: image, tag: tag, onClick: onClick },
|
|
14
|
+
tag && React.createElement(StyledTag, null, tag),
|
|
15
|
+
React.createElement(Title, null, title),
|
|
16
|
+
description && React.createElement(Desc, null, description),
|
|
17
|
+
cta && (React.createElement(Button, { variant: "main", outline: false, onClick: onClick }, cta)),
|
|
18
|
+
React.createElement(StyleProvider, { selectedPalette: "dark" },
|
|
19
|
+
React.createElement(CloseButton, { "data-testid": "portfolio-card-close-button", onClick: handleClose }))));
|
|
20
|
+
}
|
|
21
|
+
const StyledTag = styled(Tag).attrs({ size: "medium", type: "plain", active: true }) `
|
|
22
|
+
font-size: 11px;
|
|
23
|
+
background-color: ${p => p.theme.colors.primary.c80};
|
|
24
|
+
`;
|
|
25
|
+
const Title = styled(Text).attrs({ variant: "h4Inter" }) `
|
|
26
|
+
font-family: Inter;
|
|
27
|
+
font-size: 24px;
|
|
28
|
+
font-weight: 600;
|
|
29
|
+
`;
|
|
30
|
+
const Desc = styled(Text).attrs({ variant: "small", color: "neutral.c70" }) `
|
|
31
|
+
font-family: Inter;
|
|
32
|
+
font-size: 13px;
|
|
33
|
+
font-style: normal;
|
|
34
|
+
font-weight: 500;
|
|
35
|
+
padding-bottom: 8px;
|
|
36
|
+
`;
|
|
37
|
+
const Wrapper = styled.div `
|
|
38
|
+
background-color: ${p => p.theme.colors.background.card};
|
|
39
|
+
background-image: ${p => (p.image ? `url("${p.image}")` : "none")};
|
|
40
|
+
background-position: right center;
|
|
41
|
+
background-repeat: no-repeat;
|
|
42
|
+
background-size: 50% auto;
|
|
43
|
+
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
padding: 16px;
|
|
46
|
+
padding-top: ${p => (p.tag ? "16px" : "24px")};
|
|
47
|
+
padding-right: 50%;
|
|
48
|
+
flex-basis: 100%;
|
|
49
|
+
|
|
50
|
+
position: relative;
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
justify-content: flex-end;
|
|
54
|
+
align-items: flex-start;
|
|
55
|
+
gap: 4px;
|
|
56
|
+
`;
|
|
57
|
+
const CloseButton = styled(Button).attrs({
|
|
58
|
+
Icon: React.createElement(Icons.Close, { size: "XS" }),
|
|
59
|
+
iconButton: true,
|
|
60
|
+
outline: true,
|
|
61
|
+
}) `
|
|
62
|
+
background-color: ${p => p.theme.colors.neutral.c30};
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 10px;
|
|
65
|
+
right: 10px;
|
|
66
|
+
width: 24px;
|
|
67
|
+
height: 24px;
|
|
68
|
+
svg {
|
|
69
|
+
width: 12px;
|
|
70
|
+
height: 12px;
|
|
71
|
+
}
|
|
72
|
+
`;
|
|
73
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AACtD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,GAAG,MAAM,cAAc,CAAC;AAa/B,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,GAAG,EACH,WAAW,EACX,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,GACmB;IAC1B,MAAM,WAAW,GAAsB,KAAK,CAAC,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO;QAC9C,GAAG,IAAI,oBAAC,SAAS,QAAE,GAAG,CAAa;QACpC,oBAAC,KAAK,QAAE,KAAK,CAAS;QACrB,WAAW,IAAI,oBAAC,IAAI,QAAE,WAAW,CAAQ;QACzC,GAAG,IAAI,CACN,oBAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IACpD,GAAG,CACG,CACV;QACD,oBAAC,aAAa,IAAC,eAAe,EAAC,MAAM;YACnC,oBAAC,WAAW,mBAAa,6BAA6B,EAAC,OAAO,EAAE,WAAW,GAAI,CACjE,CACR,CACX,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA;;sBAE9D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACpD,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;;;;CAIvD,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAA;;;;;;CAM1E,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA8D;sBAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI;sBACnC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;iBAOlD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;CAU9C,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;IACvC,IAAI,EAAE,oBAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAC,IAAI,GAAG;IAC/B,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd,CAAC,CAAA;sBACoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;;;;;;CAUpD,CAAC"}
|
|
@@ -7,4 +7,5 @@ export { default as Drawer } from "./Drawer";
|
|
|
7
7
|
export { default as Carousel } from "./Carousel";
|
|
8
8
|
export { default as VerticalTimeline } from "./List/VerticalTimeline";
|
|
9
9
|
export { default as NumberedList } from "./List/NumberedList";
|
|
10
|
+
export { default as PortfolioContentCard } from "./ContentCard/PortfolioContentCard";
|
|
10
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,oCAAoC,CAAC"}
|
|
@@ -7,4 +7,5 @@ export { default as Drawer } from "./Drawer";
|
|
|
7
7
|
export { default as Carousel } from "./Carousel";
|
|
8
8
|
export { default as VerticalTimeline } from "./List/VerticalTimeline";
|
|
9
9
|
export { default as NumberedList } from "./List/NumberedList";
|
|
10
|
+
export { default as PortfolioContentCard } from "./ContentCard/PortfolioContentCard";
|
|
10
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,oCAAoC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.17.0-nightly.
|
|
3
|
+
"version": "0.17.0-nightly.2",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -59,8 +59,10 @@
|
|
|
59
59
|
"@floating-ui/react-dom": "^0.4.0",
|
|
60
60
|
"@tippyjs/react": "^4.2.6",
|
|
61
61
|
"color": "^4.0.0",
|
|
62
|
+
"embla-carousel-autoplay": "8.4.0",
|
|
62
63
|
"embla-carousel-react": "8.0.0-rc17",
|
|
63
64
|
"framer-motion": "^11.3.28",
|
|
65
|
+
"lodash": "4",
|
|
64
66
|
"react-is": "^17.0.2",
|
|
65
67
|
"react-select": "^5.2.1",
|
|
66
68
|
"react-spring": "8.0.27",
|
|
@@ -92,6 +94,7 @@
|
|
|
92
94
|
"@svgr/plugin-svgo": "*",
|
|
93
95
|
"@types/color": "^3.0.2",
|
|
94
96
|
"@types/hoist-non-react-statics": "^3.3.1",
|
|
97
|
+
"@types/lodash": "4",
|
|
95
98
|
"@types/react": "~18.2.21",
|
|
96
99
|
"@types/react-dom": "^18.2.13",
|
|
97
100
|
"@types/react-is": "^17.0.3",
|