@hhgtech/hhg-components
Version:
Hello Health Group common components
343 lines (330 loc) • 14.1 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var core = require('@mantine/core');
var core$1 = require('@hhgtech/icons/core');
var other = require('@hhgtech/icons/other');
require('./index-3424862e.js');
require('@mantine/dates');
require('./index-ec32050c.js');
require('./index-0a047edc.js');
require('./index-9301f298.js');
require('./index-4d838fd2.js');
var index$1 = require('./index-d4ad3f79.js');
require('./index-515469d0.js');
var index$2 = require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
var index = require('./index-2b476eb9.js');
require('@mantine/hooks');
var utils = require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var context = require('./context-c8d07963.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
const StyledInnerClass = 'hhgcomp-toolbanner-inner';
const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
const useStyles$3 = core.createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
wrapper: {
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
gap: core.rem(24),
alignItems: 'center',
justifyContent: 'space-between',
padding: core.rem(16),
[theme.fn.smallerThan('sm')]: {
gap: core.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: core.rem(16),
[theme.fn.smallerThan('sm')]: {
padding: `${core.rem(12)} ${core.rem(16)}`,
},
a: {
textDecoration: 'none',
color: 'inherit',
},
'&[data-site="marryBaby"]': {
a: {
textDecoration: 'underline',
},
[utils.MediaQueries.mbDown]: {
paddingBottom: 0,
},
},
[utils.MediaQueries.tdDown]: {
height: 'auto',
[`.${StyledWrapperClass}`]: {
[`.${StyledInnerClass}`]: {
display: 'flex',
alignItems: 'center',
[utils.MediaQueries.mbDown]: {
justifyContent: 'space-between',
},
[`.${StyledIconContainerClass}`]: {
position: 'relative',
right: core.rem(-50),
bottom: core.rem(-20),
width: core.rem(110),
minWidth: 0,
height: 'auto',
minHeight: 0,
alignSelf: 'flex-end',
marginBottom: core.rem(-20),
[utils.MediaQueries.mbDown]: {
right: 'unset',
},
},
},
},
},
'.embedded-review': {
gap: core.rem(12),
display: 'flex',
alignItems: 'center',
},
'.embedded-review__avatar': {
position: 'relative',
minWidth: core.rem(32),
img: {
width: core.rem(32),
height: core.rem(32),
display: 'block',
borderRadius: '100%',
},
svg: {
bottom: 0,
right: 0,
position: 'absolute',
},
},
},
headingWrapper: {
display: 'flex',
flexDirection: 'column',
gap: isRevamp ? core.rem(8) : 0,
[theme.fn.smallerThan('sm')]: {
gap: 4,
},
},
avatarWrapper: {
position: 'relative',
img: {
maxWidth: core.rem(48),
maxHeight: core.rem(48),
},
'.embedded-review__avatar': {
position: 'relative',
},
},
reviewText: {
a: {
textDecoration: 'underline',
textUnderlineOffset: '2px',
},
},
iconWrapper: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: core.rem(80),
height: core.rem(80),
borderRadius: '50%',
backgroundColor: '#fff',
flexShrink: 0,
img: {
maxWidth: core.rem(48),
maxHeight: core.rem(48),
},
[theme.fn.smallerThan('sm')]: {
width: core.rem(64),
height: core.rem(64),
img: {
maxWidth: core.rem(40),
maxHeight: core.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 = tslib_es6.__rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "disclaimer", "styles"]);
const { t } = index.useTranslations();
const theme = core.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["default"].createElement(index$1.Text, { size: "label2", as: "div", className: classes.reviewText },
medicalReview.avatar && (React__default["default"].createElement("div", { className: "embedded-review__avatar" },
React__default["default"].createElement(core.Box, { className: classes.avatarWrapper },
React__default["default"].createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
React__default["default"].createElement(other.RedCross, { size: 14 })))),
React__default["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["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
React__default["default"].createElement(core.Flex, { className: classes.headingWrapper },
React__default["default"].createElement(index$1.Text, { className: cx(classes.heading, 'heading'), size: 'h4', as: headingAs }, heading),
medicalReviewEle && React__default["default"].createElement(index$1.Text, { size: "n1" }, medicalReviewEle),
disclaimer && (React__default["default"].createElement(core.Flex, { gap: 4 },
React__default["default"].createElement(core$1.Warning, { size: 16, color: theme.colors.yellow[8], className: classes.disclaimerIcon }),
React__default["default"].createElement(index$1.Text, { size: "c1", variant: "secondary" }, disclaimer)))),
React__default["default"].createElement(core.Flex, { className: classes.iconWrapper }, icon)));
};
var useStyles$2 = core.createStyles(() => {
return {
root: {
borderTopLeftRadius: 'inherit',
borderTopRightRadius: 'inherit',
},
};
});
const Banner = (_a) => {
var { className, classNames, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "styles"]);
const { classes: wrapperClasses } = React.useContext(context.CardWrapperContext);
const { isPregTool } = React.useContext(context.CardWrapperContext);
const { classes, cx } = useStyles$2(undefined, {
name: 'HealthToolCardWrapper__Banner',
classNames,
styles,
});
return (React__default["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 = core.createStyles((theme) => {
return {
root: {
paddingTop: 16,
borderRadius: 'inherit',
[theme.fn.smallerThan('sm')]: {
paddingTop: 8,
},
},
};
});
const Body = (_a) => {
var { children, className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "styles", "classNames"]);
const { classes: wrapperClasses, hasBodyScroll } = React.useContext(context.CardWrapperContext);
const { classes, cx } = useStyles$1(undefined, {
name: 'HealthToolCardWrapper__Body',
styles,
classNames,
});
return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default["default"].createElement(core.ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
};
var useStyles = core.createStyles((theme, { isPregTool, variant }) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: core.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: `${core.rem(16)} ${core.rem(16)} 0`,
})), (variant === 'violet' && {
backgroundColor: 'transparent',
padding: `${core.rem(16)} ${core.rem(16)} 0`,
})),
bannerHeading: Object.assign({}, ((variant === 'gray' || variant === 'violet') && {
fontSize: core.rem(20),
lineHeight: core.rem(28),
fontWeight: index$2.FontWeight.semiBold,
[theme.fn.smallerThan('sm')]: {
fontSize: core.rem(17),
lineHeight: core.rem(24),
},
})),
bannerReviewText: Object.assign({}, ((variant === 'gray' || variant === 'violet') && {
fontSize: core.rem(14),
lineHeight: core.rem(22),
[theme.fn.smallerThan('sm')]: {
fontSize: core.rem(12),
lineHeight: core.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 = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
const { classes, cx } = useStyles({ isPregTool, variant }, {
name: 'HealthToolCardWrapper',
styles,
classNames,
});
return (React__default["default"].createElement(index$2.TemplateProvider, { variant: index$2.CustomStylesType.LEADGEN },
React__default["default"].createElement(context.CardWrapperContext.Provider, { value: {
isPregTool,
classes,
variant,
hasBodyScroll,
} },
React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children))));
};
const HealthToolCardWrapper = _HealthToolCardWrapper;
HealthToolCardWrapper.Body = Body;
HealthToolCardWrapper.Banner = Banner;
exports.HealthToolCardWrapper = HealthToolCardWrapper;
exports.ToolsBannerCard = ToolsBannerCard;