@hhgtech/hhg-components
Version:
Hello Health Group common components
296 lines (278 loc) • 10.7 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var core = require('@mantine/core');
var other = require('@hhgtech/icons/other');
var index = require('./index-ae1a5588.js');
require('@mantine/dates');
require('./index-1ee4ebb8.js');
require('./index-ad7155cf.js');
require('./index-db44e8cb.js');
require('./useMantineLocale-e946ce4a.js');
var index$2 = require('./index-25f2e7a5.js');
require('./index-86fd931c.js');
require('./index.styles-6dd86c20.js');
var index$1 = require('./index-c2c283f8.js');
require('@mantine/hooks');
var utils = require('./utils-7ba0038a.js');
require('./other-eb0ff2f6.js');
require('./index-9012f1d1.js');
var styled = require('@emotion/styled');
var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
const StyledInnerClass = 'hhgcomp-toolbanner-inner';
const StyledWrapper = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].div `
position: relative;
width: 100%;
height: 100%;
`, 'hhgcomp-toolbanner-wrapper');
const StyledContainer = styled__default["default"].div `
width: 100%;
a {
text-decoration: none;
color: inherit;
}
background-color: ${(props) => props['data-banner-color'] || index.themeColors.blue[1]};
&[data-site='marryBaby'] {
a {
text-decoration: underline;
}
${utils.MediaQueries.mbDown} {
padding-bottom: 0;
}
}
${utils.MediaQueries.tdDown} {
height: auto;
${StyledWrapper.classSelector} {
.${StyledInnerClass} {
display: flex;
align-items: center;
${utils.MediaQueries.mbDown} {
justify-content: space-between;
}
.${StyledIconContainerClass} {
position: relative;
right: -50px;
bottom: -20px;
width: 110px;
min-width: 0;
height: auto;
min-height: 0;
align-self: flex-end;
margin-bottom: -20px;
${utils.MediaQueries.mbDown} {
right: unset;
}
}
}
}
}
.embedded-review {
gap: 12px;
display: flex;
align-items: center;
}
.embedded-review__avatar {
position: relative;
min-width: 32px;
img {
width: 32px;
height: 32px;
display: block;
border-radius: 100%;
}
svg {
bottom: 0;
right: 0;
position: absolute;
}
}
`;
const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
link: '#',
reviewer: '',
date: '',
}, icon, style, isPregTool, isRevamp, }) => {
const { t } = index$1.useTranslations();
const theme = core.useMantineTheme();
const isMarryBaby = theme.other.template === 'mb';
const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
const headingAs = 'h2';
const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default["default"].createElement(index$2.Text, { size: "label2", as: "div", className: "embedded-review", sx: {
a: {
textUnderlineOffset: '2px',
textDecoration: 'underline',
},
} },
medicalReview.avatar && (React__default["default"].createElement("div", { className: "embedded-review__avatar" },
React__default["default"].createElement(core.Box, { pos: "relative" },
React__default["default"].createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer }),
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(StyledContainer, { className: className, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
(isMarryBaby
? theme.colors.mb[1]
: isPregTool
? theme.colors.pink[1]
: theme.colors.blue[1]) },
React__default["default"].createElement(StyledWrapper, null,
React__default["default"].createElement(core.Flex, { gap: core.rem(24), align: 'center', justify: 'space-between', sx: { padding: core.rem(16), gap: core.rem(24), '.heading': {} } },
React__default["default"].createElement(core.Flex, { direction: "column", gap: isRevamp ? 8 : 0 },
React__default["default"].createElement(index$2.Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
medicalReview && (React__default["default"].createElement(index$2.Text, { size: "n1", as: "div" }, medicalReviewEle))),
React__default["default"].createElement(core.Flex, { justify: 'center', align: 'center', sx: (theme) => ({
width: core.rem(80),
height: core.rem(80),
borderRadius: isMarryBaby ? '24px' : '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),
},
},
}) }, icon)))));
};
var useStyles$2 = core.createStyles(() => {
return {
root: {
borderTopLeftRadius: 'inherit',
borderTopRightRadius: 'inherit',
},
};
});
const CardWrapperContext = React.createContext({});
const Banner = (_a) => {
var { styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
const { classes, cx } = useStyles$2(undefined, {
name: 'HealthToolCardWrapper__Banner',
styles,
classNames,
});
const { isPregTool } = React.useContext(CardWrapperContext);
return (React__default["default"].createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
};
var useStyles$1 = core.createStyles(() => {
return {
root: {
padding: core.rem(16),
},
};
});
const Body = (_a) => {
var { children, styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className"]);
const { classes, cx } = useStyles$1(undefined, {
name: 'HealthToolCardWrapper',
styles,
classNames,
});
return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
};
var useStyles = core.createStyles((theme, { isPregTool }) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: {
display: 'flex',
flexDirection: 'column',
borderRadius: core.rem(isMarryBaby ? 16 : 8),
backgroundColor: '#fff',
border: `1px solid ${isMarryBaby
? theme.colors.mb[2]
: isPregTool
? theme.colors.pink[1]
: theme.colors.blue[2]}`,
},
row: {
display: 'flex',
alignItems: 'stretch',
justifyContent: 'space-between',
gap: core.rem(16),
},
labelWrapper: {
flex: '1 1 0px',
display: 'flex',
alignItems: 'center',
borderBottom: `1px solid ${theme.colors.neutral[1]}`,
},
label: {
fontSize: core.rem(14),
color: theme.colors.gray[6],
},
control: {
width: core.rem(180),
flexShrink: 1,
'&.error': {
'button, input': {
borderColor: theme.colors.red[7],
},
},
},
radioLabel: {
fontSize: core.rem(16),
},
radioRoot: {
padding: `${core.rem(10)} 0`,
margin: 0,
},
bmiVal: {
display: 'inline-block',
},
inputWithUnit__wrapper: {
position: 'relative',
},
inputWithUnit__unit: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
paddingRight: core.rem(10),
display: 'flex',
alignItems: 'center',
},
inputWithUnit__unitText: {
color: theme.colors.gray[6],
},
inputWithUnit__input: {
input: {
paddingRight: core.rem(30),
'::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
},
},
submitBtn: {},
switchRoot: {
padding: '16px 0',
},
};
});
const _HealthToolCardWrapper = (_a) => {
var { children, styles, classNames, className, isPregTool } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
const { classes, cx } = useStyles({ isPregTool }, {
name: 'HealthToolCardWrapper',
styles,
classNames,
});
return (React__default["default"].createElement(CardWrapperContext.Provider, { value: {
isPregTool,
} },
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;