@hhgtech/hhg-components
Version:
Hello Health Group common components
288 lines (273 loc) • 10 kB
JavaScript
import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { createContext, useContext } from 'react';
import { useMantineTheme, Box, Flex, rem, createStyles } from '@mantine/core';
import { RedCross } from '@hhgtech/icons/other';
import { t as themeColors } from './index-5d405c0d.js';
import '@mantine/dates';
import './index-5e947517.js';
import './index-90813715.js';
import './index-ebe66e27.js';
import './useMantineLocale-0c6bea99.js';
import { T as Text } from './index-9f5659e8.js';
import './index-c68a0fa7.js';
import './index.styles-770020ac.js';
import { u as useTranslations } from './index-9d21b711.js';
import '@mantine/hooks';
import { M as MediaQueries } from './utils-cb7242c7.js';
import './other-4ccb5568.js';
import './index-c2190f6e.js';
import styled from '@emotion/styled';
import { setDefaultClass } from './miscDefaultClassWrapper.js';
const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
const StyledInnerClass = 'hhgcomp-toolbanner-inner';
const StyledWrapper = setDefaultClass(styled.div `
position: relative;
width: 100%;
height: 100%;
`, 'hhgcomp-toolbanner-wrapper');
const StyledContainer = styled.div `
width: 100%;
a {
text-decoration: none;
color: inherit;
}
background-color: ${(props) => props['data-banner-color'] || themeColors.blue[1]};
&[data-site='marryBaby'] {
a {
text-decoration: underline;
}
${MediaQueries.mbDown} {
padding-bottom: 0;
}
}
${MediaQueries.tdDown} {
height: auto;
${StyledWrapper.classSelector} {
.${StyledInnerClass} {
display: flex;
align-items: center;
${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;
${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 } = useTranslations();
const theme = 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.createElement(Text, { size: "label2", as: "div", className: "embedded-review", sx: {
a: {
textUnderlineOffset: '2px',
textDecoration: 'underline',
},
} },
medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
React__default.createElement(Box, { pos: "relative" },
React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer }),
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(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.createElement(StyledWrapper, null,
React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: rem(16), gap: rem(24), '.heading': {} } },
React__default.createElement(Flex, { direction: "column", gap: isRevamp ? 8 : 0 },
React__default.createElement(Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
medicalReview && (React__default.createElement(Text, { size: "n1", as: "div" }, medicalReviewEle))),
React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => ({
width: rem(80),
height: rem(80),
borderRadius: isMarryBaby ? '24px' : '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),
},
},
}) }, icon)))));
};
var useStyles$2 = createStyles(() => {
return {
root: {
borderTopLeftRadius: 'inherit',
borderTopRightRadius: 'inherit',
},
};
});
const CardWrapperContext = createContext({});
const Banner = (_a) => {
var { styles, classNames, className } = _a, rest = __rest(_a, ["styles", "classNames", "className"]);
const { classes, cx } = useStyles$2(undefined, {
name: 'HealthToolCardWrapper__Banner',
styles,
classNames,
});
const { isPregTool } = useContext(CardWrapperContext);
return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
};
var useStyles$1 = createStyles(() => {
return {
root: {
padding: rem(16),
},
};
});
const Body = (_a) => {
var { children, styles, classNames, className } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className"]);
const { classes, cx } = useStyles$1(undefined, {
name: 'HealthToolCardWrapper',
styles,
classNames,
});
return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
};
var useStyles = createStyles((theme, { isPregTool }) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: {
display: 'flex',
flexDirection: 'column',
borderRadius: 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: rem(16),
},
labelWrapper: {
flex: '1 1 0px',
display: 'flex',
alignItems: 'center',
borderBottom: `1px solid ${theme.colors.neutral[1]}`,
},
label: {
fontSize: rem(14),
color: theme.colors.gray[6],
},
control: {
width: rem(180),
flexShrink: 1,
'&.error': {
'button, input': {
borderColor: theme.colors.red[7],
},
},
},
radioLabel: {
fontSize: rem(16),
},
radioRoot: {
padding: `${rem(10)} 0`,
margin: 0,
},
bmiVal: {
display: 'inline-block',
},
inputWithUnit__wrapper: {
position: 'relative',
},
inputWithUnit__unit: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
paddingRight: rem(10),
display: 'flex',
alignItems: 'center',
},
inputWithUnit__unitText: {
color: theme.colors.gray[6],
},
inputWithUnit__input: {
input: {
paddingRight: 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 = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
const { classes, cx } = useStyles({ isPregTool }, {
name: 'HealthToolCardWrapper',
styles,
classNames,
});
return (React__default.createElement(CardWrapperContext.Provider, { value: {
isPregTool,
} },
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 };