@hhgtech/hhg-components
Version:
Hello Health Group common components
336 lines (326 loc) • 13.4 kB
JavaScript
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default, { useContext } from 'react';
import { createStyles, rem, useMantineTheme, Box, Flex, ScrollArea } from '@mantine/core';
import { Warning } from '@hhgtech/icons/core';
import { RedCross } from '@hhgtech/icons/other';
import './index-bd44bcb2.js';
import '@mantine/dates';
import './index-8c40504a.js';
import './index-fe4471f4.js';
import './index-7adf994c.js';
import './index-3f09210d.js';
import { T as Text } from './index-0b67696c.js';
import './index-2d25b0f0.js';
import { F as FontWeight, T as TemplateProvider, C as CustomStylesType } from './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import { u as useTranslations } from './index-09d9e570.js';
import '@mantine/hooks';
import { M as MediaQueries } from './utils-538169b3.js';
import './index-04505e35.js';
import { C as CardWrapperContext } from './context-41a96757.js';
const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
const StyledInnerClass = 'hhgcomp-toolbanner-inner';
const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
const useStyles$3 = createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
wrapper: {
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
gap: rem(24),
alignItems: 'center',
justifyContent: 'space-between',
padding: rem(16),
[theme.fn.smallerThan('sm')]: {
gap: rem(12),
},
},
container: {
width: '100%',
backgroundColor: bannerColor ||
(isMarryBaby
? theme.colors.mb[1]
: isPregTool
? theme.colors.pink[1]
: theme.colors.blue[1]),
position: 'relative',
display: 'flex',
gap: 24,
alignItems: 'center',
justifyContent: 'space-between',
padding: rem(16),
[theme.fn.smallerThan('sm')]: {
padding: `${rem(12)} ${rem(16)}`,
},
a: {
textDecoration: 'none',
color: 'inherit',
},
'&[data-site="marryBaby"]': {
a: {
textDecoration: 'underline',
},
[MediaQueries.mbDown]: {
paddingBottom: 0,
},
},
[MediaQueries.tdDown]: {
height: 'auto',
[`.${StyledWrapperClass}`]: {
[`.${StyledInnerClass}`]: {
display: 'flex',
alignItems: 'center',
[MediaQueries.mbDown]: {
justifyContent: 'space-between',
},
[`.${StyledIconContainerClass}`]: {
position: 'relative',
right: rem(-50),
bottom: rem(-20),
width: rem(110),
minWidth: 0,
height: 'auto',
minHeight: 0,
alignSelf: 'flex-end',
marginBottom: rem(-20),
[MediaQueries.mbDown]: {
right: 'unset',
},
},
},
},
},
'.embedded-review': {
gap: rem(12),
display: 'flex',
alignItems: 'center',
},
'.embedded-review__avatar': {
position: 'relative',
minWidth: rem(32),
img: {
width: rem(32),
height: rem(32),
display: 'block',
borderRadius: '100%',
},
svg: {
bottom: 0,
right: 0,
position: 'absolute',
},
},
},
headingWrapper: {
display: 'flex',
flexDirection: 'column',
gap: isRevamp ? rem(8) : 0,
[theme.fn.smallerThan('sm')]: {
gap: 4,
},
},
avatarWrapper: {
position: 'relative',
img: {
maxWidth: rem(48),
maxHeight: rem(48),
},
'.embedded-review__avatar': {
position: 'relative',
},
},
reviewText: {
a: {
textDecoration: 'underline',
textUnderlineOffset: '2px',
},
},
iconWrapper: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: rem(80),
height: rem(80),
borderRadius: '50%',
backgroundColor: '#fff',
flexShrink: 0,
img: {
maxWidth: rem(48),
maxHeight: rem(48),
},
[theme.fn.smallerThan('sm')]: {
width: rem(64),
height: rem(64),
img: {
maxWidth: rem(40),
maxHeight: rem(40),
},
},
},
heading: {},
disclaimerIcon: {
flexShrink: 0,
},
}));
const ToolsBannerCard = (_a) => {
var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, disclaimer, styles } = _a, rest = __rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "disclaimer", "styles"]);
const { t } = useTranslations();
const theme = useMantineTheme();
const isMarryBaby = theme.other.template === 'mb';
const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
const headingAs = 'h2';
const { classes, cx } = useStyles$3({ isRevamp, isPregTool, bannerColor, isMarryBaby }, {
name: 'ToolsBannerCard',
styles,
classNames,
});
const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: classes.reviewText },
medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
React__default.createElement(Box, { className: classes.avatarWrapper },
React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
React__default.createElement(RedCross, { size: 14 })))),
React__default.createElement("div", { dangerouslySetInnerHTML: {
__html: t('toolPage.toolReviewer', {
expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
date: medicalReview.date,
}),
} }))) : null;
return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
React__default.createElement(Flex, { className: classes.headingWrapper },
React__default.createElement(Text, { className: cx(classes.heading, 'heading'), size: 'h4', as: headingAs }, heading),
medicalReviewEle && React__default.createElement(Text, { size: "n1" }, medicalReviewEle),
disclaimer && (React__default.createElement(Flex, { gap: 4 },
React__default.createElement(Warning, { size: 16, color: theme.colors.yellow[8], className: classes.disclaimerIcon }),
React__default.createElement(Text, { size: "c1", variant: "secondary" }, disclaimer)))),
React__default.createElement(Flex, { className: classes.iconWrapper }, icon)));
};
var useStyles$2 = createStyles(() => {
return {
root: {
borderTopLeftRadius: 'inherit',
borderTopRightRadius: 'inherit',
},
};
});
const Banner = (_a) => {
var { className, classNames, styles } = _a, rest = __rest(_a, ["className", "classNames", "styles"]);
const { classes: wrapperClasses } = useContext(CardWrapperContext);
const { isPregTool } = useContext(CardWrapperContext);
const { classes, cx } = useStyles$2(undefined, {
name: 'HealthToolCardWrapper__Banner',
classNames,
styles,
});
return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, classNames: {
container: wrapperClasses.bannerWrapper,
heading: wrapperClasses.bannerHeading,
reviewText: wrapperClasses.bannerReviewText,
}, className: cx(className, classes.root) }, rest)));
};
var useStyles$1 = createStyles((theme) => {
return {
root: {
paddingTop: 16,
borderRadius: 'inherit',
[theme.fn.smallerThan('sm')]: {
paddingTop: 8,
},
},
};
});
const Body = (_a) => {
var { children, className, styles, classNames } = _a, rest = __rest(_a, ["children", "className", "styles", "classNames"]);
const { classes: wrapperClasses, hasBodyScroll } = useContext(CardWrapperContext);
const { classes, cx } = useStyles$1(undefined, {
name: 'HealthToolCardWrapper__Body',
styles,
classNames,
});
return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default.createElement(ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
};
var useStyles = createStyles((theme, { isPregTool, variant }) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: rem(isMarryBaby ? 16 : 8) }, (variant === 'default' && {
backgroundColor: '#fff',
border: `1px solid ${isMarryBaby
? theme.colors.mb[2]
: isPregTool
? theme.colors.pink[1]
: theme.colors.blue[2]}`,
})), (variant === 'gray' && {
backgroundColor: theme.colors.neutral[0],
})), (variant === 'violet' && {
backgroundColor: theme.colors.violet[0],
})),
submitBtn: {},
bodyWrapper: {},
scrollAreaWrapper: {},
bannerWrapper: Object.assign(Object.assign({}, (variant === 'gray' && {
backgroundColor: 'transparent',
padding: `${rem(16)} ${rem(16)} 0`,
})), (variant === 'violet' && {
backgroundColor: 'transparent',
padding: `${rem(16)} ${rem(16)} 0`,
})),
bannerHeading: Object.assign({}, ((variant === 'gray' || variant === 'violet') && {
fontSize: rem(20),
lineHeight: rem(28),
fontWeight: FontWeight.semiBold,
[theme.fn.smallerThan('sm')]: {
fontSize: rem(17),
lineHeight: rem(24),
},
})),
bannerReviewText: Object.assign({}, ((variant === 'gray' || variant === 'violet') && {
fontSize: rem(14),
lineHeight: rem(22),
[theme.fn.smallerThan('sm')]: {
fontSize: rem(12),
lineHeight: rem(18),
},
})),
submitWrapper: Object.assign(Object.assign({ [theme.fn.smallerThan('sm')]: {
button: {
width: '100%',
},
}, [theme.fn.largerThan('sm')]: {
textAlign: 'right',
} }, (variant === 'gray' && {
backgroundColor: theme.colors.neutral[0],
button: {
marginTop: 10,
},
})), (variant === 'violet' && {
backgroundColor: theme.colors.violet[0],
button: {
marginTop: 10,
},
})),
newsletterBlock: Object.assign(Object.assign({}, (variant === 'gray' && {
backgroundColor: theme.colors.neutral[0],
})), (variant === 'violet' && {
backgroundColor: theme.colors.violet[0],
})),
};
});
const _HealthToolCardWrapper = (_a) => {
var { children, styles, classNames, className, isPregTool, variant = 'default', hasBodyScroll } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
const { classes, cx } = useStyles({ isPregTool, variant }, {
name: 'HealthToolCardWrapper',
styles,
classNames,
});
return (React__default.createElement(TemplateProvider, { variant: CustomStylesType.LEADGEN },
React__default.createElement(CardWrapperContext.Provider, { value: {
isPregTool,
classes,
variant,
hasBodyScroll,
} },
React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children))));
};
const HealthToolCardWrapper = _HealthToolCardWrapper;
HealthToolCardWrapper.Body = Body;
HealthToolCardWrapper.Banner = Banner;
export { HealthToolCardWrapper as H, ToolsBannerCard as T };