@ledgerhq/react-ui 0.17.0-nightly.0 → 0.17.0-nightly.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/cta/Button/index.js +7 -1
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/Carousel.stories.js +51 -18
- package/lib/cjs/components/layout/Carousel/Carousel.stories.js.map +3 -3
- package/lib/cjs/components/layout/Carousel/index.js +7 -2
- package/lib/cjs/components/layout/Carousel/index.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/types.js.map +1 -1
- 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 +107 -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 +7 -2
- package/lib/components/layout/Carousel/index.js.map +1 -1
- package/lib/components/layout/Carousel/types.d.ts +2 -1
- package/lib/components/layout/Carousel/types.d.ts.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 +72 -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 +1 -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,27 +29,15 @@ 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: {
|
|
@@ -62,6 +50,9 @@ var Carousel_stories_default = {
|
|
|
62
50
|
options: ["default", "content-card"],
|
|
63
51
|
defaultValue: "default",
|
|
64
52
|
control: "inline-radio"
|
|
53
|
+
},
|
|
54
|
+
onChange: {
|
|
55
|
+
description: "Function called when a new slide is shown."
|
|
65
56
|
}
|
|
66
57
|
},
|
|
67
58
|
args: {
|
|
@@ -75,7 +66,49 @@ var Carousel_stories_default = {
|
|
|
75
66
|
}
|
|
76
67
|
}
|
|
77
68
|
},
|
|
78
|
-
|
|
69
|
+
decorators: [
|
|
70
|
+
(Story, { args, parameters }) => /* @__PURE__ */ import_react.default.createElement(
|
|
71
|
+
SlideContext.Provider,
|
|
72
|
+
{
|
|
73
|
+
value: Array.from({ length: args.children }, (_, index) => /* @__PURE__ */ import_react.default.createElement(parameters.Slide, { key: index, index }))
|
|
74
|
+
},
|
|
75
|
+
/* @__PURE__ */ import_react.default.createElement(Story, null)
|
|
76
|
+
)
|
|
77
|
+
],
|
|
78
|
+
render: ({ children, ...props }) => /* @__PURE__ */ import_react.default.createElement(import__.default, { ...props }, (0, import_react.useContext)(SlideContext))
|
|
79
|
+
};
|
|
80
|
+
const Default = {
|
|
81
|
+
parameters: {
|
|
82
|
+
Slide: ({ index }) => /* @__PURE__ */ import_react.default.createElement(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
style: {
|
|
86
|
+
backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,
|
|
87
|
+
padding: "16px 24px",
|
|
88
|
+
borderRadius: "5px"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"Slide ",
|
|
92
|
+
index
|
|
93
|
+
)
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
const PortfolioContentCards = {
|
|
97
|
+
parameters: {
|
|
98
|
+
Slide: ({ index }) => /* @__PURE__ */ import_react.default.createElement(
|
|
99
|
+
import_PortfolioContentCard.default,
|
|
100
|
+
{
|
|
101
|
+
title: "Ledger Recover",
|
|
102
|
+
description: "Get peace of mind and start your free trial.",
|
|
103
|
+
cta: index % 2 ? void 0 : "Start my free trial",
|
|
104
|
+
tag: index % 3 ? void 0 : "New",
|
|
105
|
+
image: (index + 1) % 4 ? IMAGE_SRC : void 0,
|
|
106
|
+
onClick: () => onSlideAction(`click on slide ${index}`),
|
|
107
|
+
onClose: () => onSlideAction(`close slide ${index}`)
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
}
|
|
79
111
|
};
|
|
80
|
-
const
|
|
112
|
+
const onSlideAction = (0, import_addon_actions.action)("onSlideAction");
|
|
113
|
+
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
114
|
//# 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: 1, 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 onChange: {\n description: \"Function called when a new slide is shown.\",\n },\n },\n args: {\n variant: \"default\",\n children: 5,\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,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,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
|
}
|
|
@@ -43,8 +43,12 @@ const EmblaContainer = import_styled_components.default.div`
|
|
|
43
43
|
display: flex;
|
|
44
44
|
`;
|
|
45
45
|
const EmblaSlide = import_styled_components.default.div`
|
|
46
|
+
display: flex;
|
|
46
47
|
flex: 0 0 100%;
|
|
47
48
|
min-width: 0;
|
|
49
|
+
> * {
|
|
50
|
+
flex-basis: 100%;
|
|
51
|
+
}
|
|
48
52
|
`;
|
|
49
53
|
const CarouselContainer = import_styled_components.default.div`
|
|
50
54
|
position: relative;
|
|
@@ -54,7 +58,7 @@ const CarouselContainer = import_styled_components.default.div`
|
|
|
54
58
|
--hover-transition: 1;
|
|
55
59
|
}
|
|
56
60
|
`;
|
|
57
|
-
const Carousel = ({ children, variant = "default" }) => {
|
|
61
|
+
const Carousel = ({ children, variant = "default", onChange }) => {
|
|
58
62
|
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
|
|
59
63
|
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({ loop: true });
|
|
60
64
|
const updateIndex = (0, import_react.useCallback)(() => {
|
|
@@ -63,7 +67,8 @@ const Carousel = ({ children, variant = "default" }) => {
|
|
|
63
67
|
const newIndex = emblaApi.selectedScrollSnap();
|
|
64
68
|
setCurrentIndex(newIndex);
|
|
65
69
|
emblaApi.scrollTo(newIndex);
|
|
66
|
-
|
|
70
|
+
onChange == null ? void 0 : onChange(newIndex);
|
|
71
|
+
}, [emblaApi, onChange]);
|
|
67
72
|
(0, import_react.useEffect)(() => {
|
|
68
73
|
if (!emblaApi)
|
|
69
74
|
return;
|
|
@@ -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\", updateIndex);\n\n // When `reInit` is called or when window is resized\n emblaApi.on(\"reInit\", updateIndex);\n }, [emblaApi, updateIndex]);\n\n const handleGotoPrevSlide = () => emblaApi?.scrollPrev();\n const handleGotoNextSlide = () => emblaApi?.scrollNext();\n\n return (\n <div>\n <CarouselContainer variant={variant}>\n {variant === \"default\" && children.length > 1 && (\n <>\n <ChevronArrow direction=\"left\" onClick={handleGotoPrevSlide} />\n <ChevronArrow direction=\"right\" onClick={handleGotoNextSlide} />\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"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA6B;AAC7B,mBAAwD;AACxD,+BAAmB;AACnB,oBAAmB;AAEnB,0BAA6B;AAE7B,MAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAIrB,MAAM,iBAAiB,yBAAAA,QAAO;AAAA;AAAA;AAI9B,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;
|
|
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 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\", onChange }: 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\n onChange?.(newIndex);\n }, [emblaApi, onChange]);\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\", updateIndex);\n\n // When `reInit` is called or when window is resized\n emblaApi.on(\"reInit\", updateIndex);\n }, [emblaApi, updateIndex]);\n\n const handleGotoPrevSlide = () => emblaApi?.scrollPrev();\n const handleGotoNextSlide = () => emblaApi?.scrollNext();\n\n return (\n <div>\n <CarouselContainer variant={variant}>\n {variant === \"default\" && children.length > 1 && (\n <>\n <ChevronArrow direction=\"left\" onClick={handleGotoPrevSlide} />\n <ChevronArrow direction=\"right\" onClick={handleGotoNextSlide} />\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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA6B;AAC7B,mBAAwD;AACxD,+BAAmB;AACnB,oBAAmB;AAEnB,0BAA6B;AAE7B,MAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAIrB,MAAM,iBAAiB,yBAAAA,QAAO;AAAA;AAAA;AAI9B,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,MAAM,oBAAoB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYjC,MAAM,WAAW,CAAC,EAAE,UAAU,UAAU,WAAW,SAAS,MAAa;AACvE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,CAAC;AAClD,QAAM,CAAC,UAAU,QAAQ,QAAI,4BAAAC,SAAiB,EAAE,MAAM,KAAK,CAAC;AAE5D,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,CAAC;AAAU;AAEf,UAAM,WAAW,SAAS,mBAAmB;AAC7C,oBAAgB,QAAQ;AACxB,aAAS,SAAS,QAAQ;AAE1B,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,8BAAU,MAAM;AACd,QAAI,CAAC;AAAU;AAGf,gBAAY;AAGZ,aAAS,GAAG,UAAU,WAAW;AAGjC,aAAS,GAAG,UAAU,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,QAAM,sBAAsB,MAAM,qCAAU;AAC5C,QAAM,sBAAsB,MAAM,qCAAU;AAE5C,SACE,6BAAAC,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,qBAAkB,WAChB,YAAY,aAAa,SAAS,SAAS,KAC1C,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,oCAAa,WAAU,QAAO,SAAS,qBAAqB,GAC7D,6BAAAA,QAAA,cAAC,oCAAa,WAAU,SAAQ,SAAS,qBAAqB,CAChE,GAGF,6BAAAA,QAAA,cAAC,SAAM,KAAK,YACV,6BAAAA,QAAA,cAAC,sBACE,SAAS,IAAI,WACZ,6BAAAA,QAAA,cAAC,cAAW,KAAK,MAAM,OAAM,KAAM,CACpC,CACH,CACF,CACF,GAEA,6BAAAA,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF;AAEJ;AAEA,IAAO,mBAAQ;",
|
|
6
6
|
"names": ["styled", "useEmblaCarousel", "React", "Footer"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Carousel/types.tsx"],
|
|
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
|
|
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 onChange?: (index: number) => 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,107 @@
|
|
|
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, { 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
|
+
|
|
84
|
+
position: relative;
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
justify-content: flex-end;
|
|
88
|
+
align-items: flex-start;
|
|
89
|
+
gap: 4px;
|
|
90
|
+
`;
|
|
91
|
+
const CloseButton = (0, import_styled_components.default)(import_cta.Button).attrs({
|
|
92
|
+
Icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Close, { size: "XS" }),
|
|
93
|
+
iconButton: true,
|
|
94
|
+
outline: true
|
|
95
|
+
})`
|
|
96
|
+
background-color: ${(p) => p.theme.colors.neutral.c30};
|
|
97
|
+
position: absolute;
|
|
98
|
+
top: 10px;
|
|
99
|
+
right: 10px;
|
|
100
|
+
width: 24px;
|
|
101
|
+
height: 24px;
|
|
102
|
+
svg {
|
|
103
|
+
width: 12px;
|
|
104
|
+
height: 12px;
|
|
105
|
+
}
|
|
106
|
+
`;
|
|
107
|
+
//# 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 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\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,SAAS,aAAa,CACrC,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;AAW/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, onChange }: Props) => React.JSX.Element;
|
|
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":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AA6BhC;;GAEG;AACH,QAAA,MAAM,QAAQ,oCAAiD,KAAK,sBAyDnE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -10,8 +10,12 @@ const EmblaContainer = styled.div `
|
|
|
10
10
|
display: flex;
|
|
11
11
|
`;
|
|
12
12
|
const EmblaSlide = styled.div `
|
|
13
|
+
display: flex;
|
|
13
14
|
flex: 0 0 100%;
|
|
14
15
|
min-width: 0;
|
|
16
|
+
> * {
|
|
17
|
+
flex-basis: 100%;
|
|
18
|
+
}
|
|
15
19
|
`;
|
|
16
20
|
const CarouselContainer = styled.div `
|
|
17
21
|
position: relative;
|
|
@@ -24,7 +28,7 @@ const CarouselContainer = styled.div `
|
|
|
24
28
|
/**
|
|
25
29
|
* This component uses the https://github.com/davidjerleke/embla-carousel library.
|
|
26
30
|
*/
|
|
27
|
-
const Carousel = ({ children, variant = "default" }) => {
|
|
31
|
+
const Carousel = ({ children, variant = "default", onChange }) => {
|
|
28
32
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
29
33
|
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
|
|
30
34
|
const updateIndex = useCallback(() => {
|
|
@@ -33,7 +37,8 @@ const Carousel = ({ children, variant = "default" }) => {
|
|
|
33
37
|
const newIndex = emblaApi.selectedScrollSnap();
|
|
34
38
|
setCurrentIndex(newIndex);
|
|
35
39
|
emblaApi.scrollTo(newIndex);
|
|
36
|
-
|
|
40
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
|
|
41
|
+
}, [emblaApi, onChange]);
|
|
37
42
|
useEffect(() => {
|
|
38
43
|
if (!emblaApi)
|
|
39
44
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEvB,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEhC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEvB,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEhC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;;;;CAO3D,CAAC;AAEF;;GAEG;AACH,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAS,EAAE,EAAE;IACtE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,kBAAkB,EAAE,CAAC;QAC/C,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC1B,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAE5B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,wCAAwC;QACxC,WAAW,EAAE,CAAC;QAEd,wCAAwC;QACxC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAEnC,oDAAoD;QACpD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5B,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE,CAAC;IACzD,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE,CAAC;IAEzD,OAAO,CACL;QACE,oBAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO;YAChC,OAAO,KAAK,SAAS,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/C;gBACE,oBAAC,YAAY,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,mBAAmB,GAAI;gBAC/D,oBAAC,YAAY,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,mBAAmB,GAAI,CAC/D,CACJ;YAED,oBAAC,KAAK,IAAC,GAAG,EAAE,QAAQ;gBAClB,oBAAC,cAAc,QACZ,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACrB,oBAAC,UAAU,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAc,CACjD,CAAC,CACa,CACX,CACU;QAEpB,oBAAC,MAAM,IACL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,GAC1B,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -4,11 +4,12 @@ export type Variant = "content-card" | "default";
|
|
|
4
4
|
export type Props = {
|
|
5
5
|
children: ReactElement[];
|
|
6
6
|
variant?: Variant;
|
|
7
|
+
onChange?: (index: number) => void;
|
|
7
8
|
};
|
|
8
9
|
/**
|
|
9
10
|
* Carousel's sub props to be passed to any component used by the carousel..
|
|
10
11
|
*/
|
|
11
|
-
export type SubProps = Required<Props
|
|
12
|
+
export type SubProps = Required<Pick<Props, "children" | "variant">> & {
|
|
12
13
|
emblaApi: UseEmblaCarouselType[1];
|
|
13
14
|
currentIndex: number;
|
|
14
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.tsx"],"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,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.tsx"],"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,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,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"}
|
|
@@ -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,72 @@
|
|
|
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, { 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
|
+
|
|
49
|
+
position: relative;
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
justify-content: flex-end;
|
|
53
|
+
align-items: flex-start;
|
|
54
|
+
gap: 4px;
|
|
55
|
+
`;
|
|
56
|
+
const CloseButton = styled(Button).attrs({
|
|
57
|
+
Icon: React.createElement(Icons.Close, { size: "XS" }),
|
|
58
|
+
iconButton: true,
|
|
59
|
+
outline: true,
|
|
60
|
+
}) `
|
|
61
|
+
background-color: ${p => p.theme.colors.neutral.c30};
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 10px;
|
|
64
|
+
right: 10px;
|
|
65
|
+
width: 24px;
|
|
66
|
+
height: 24px;
|
|
67
|
+
svg {
|
|
68
|
+
width: 12px;
|
|
69
|
+
height: 12px;
|
|
70
|
+
}
|
|
71
|
+
`;
|
|
72
|
+
//# 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,IAAC,OAAO,EAAE,WAAW,GAAI,CACvB,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;;;;;;;;;CAS9C,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"}
|