@hhgtech/hhg-components 1.29.82 → 1.29.84

package/build/index-baf2d414.js

@@ -0,0 +1,267 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index = require('./index-848c257f.js');
+require('@mantine/dates');
+require('./index-1f94d57c.js');
+require('./index-3ae93a30.js');
+require('./index-e0d59d3e.js');
+require('./useMantineLocale-30235874.js');
+var index$1 = require('./index-4184d8d6.js');
+require('./index-353ce6f8.js');
+var useTranslations = require('./useTranslations-ec613f5a.js');
+require('@mantine/hooks');
+var utils = require('./utils-7effa670.js');
+require('./other-b4596d33.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;
+          }
+        }
+      }
+    }
+  }
+`;
+
+const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
+    link: '#',
+    reviewer: '',
+    date: '',
+}, icon, style, isPregTool, }) => {
+    const { t } = useTranslations.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$1.Text, { size: "label2", as: "div", className: "embedded-review", sx: {
+            a: {
+                textUnderlineOffset: '2px',
+                textDecoration: 'underline',
+            },
+        } },
+        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.Box, null,
+                    React__default["default"].createElement(index$1.Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
+                    medicalReview && (React__default["default"].createElement(index$1.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;

package/build/{index-a6a9855f.js → index-c22aa4ef.js}

@@ -4,7 +4,7 @@ var React = require('react');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
 var styled = require('@emotion/styled');
-var theme = require('./theme-be20929b.js');
+var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -182,7 +182,7 @@ const StyledPickerContainer = styled__default["default"].div `
   .pickerOverlay {
     margin-top: 6px;
     background: white;
-    border-radius: ${theme.theme.borderRadius};
+    border-radius: ${miscTheme.theme.borderRadius};
     box-shadow: 0px 6px 12px rgba(67, 86, 100, 0.2);
   }
 
@@ -204,7 +204,7 @@ const StyledPickerContainer = styled__default["default"].div `
 
     .svg {
       cursor: pointer;
-      stroke: ${theme.theme.colors.gray800};
+      stroke: ${miscTheme.theme.colors.gray800};
     }
     .react-datepicker__day {
       width: 40px;
@@ -220,7 +220,7 @@ const StyledPickerContainer = styled__default["default"].div `
     }
 
     .react-datepicker__day {
-      font-weight: ${theme.theme.sizes.fwBold};
+      font-weight: ${miscTheme.theme.sizes.fwBold};
     }
 
     .react-datepicker__day--selected,
@@ -231,7 +231,7 @@ const StyledPickerContainer = styled__default["default"].div `
       height: 30px;
       margin: 4px;
       margin-bottom: -2px;
-      background: ${theme.theme.colors.primaryBase};
+      background: ${miscTheme.theme.colors.primaryBase};
       border-radius: 50%;
     }
 
@@ -248,12 +248,12 @@ const StyledPickerContainer = styled__default["default"].div `
         stroke: #262626;
       }
       select {
-        background: ${theme.theme.colors.neutral100};
+        background: ${miscTheme.theme.colors.neutral100};
         text-align: center;
         &:not(:last-child) {
           padding: 8px 10px;
           margin-right: 15px;
-          border-radius: ${theme.theme.borderRadius};
+          border-radius: ${miscTheme.theme.borderRadius};
         }
       }
     }
@@ -462,9 +462,9 @@ const StyledPickerContainer = styled__default["default"].div `
     ) {
     position: relative;
 
-    background-color: ${theme.theme.colors.primaryBase};
+    background-color: ${miscTheme.theme.colors.primaryBase};
     color: #f0f8ff;
-    font-weight: ${theme.theme.sizes.fwBold};
+    font-weight: ${miscTheme.theme.sizes.fwBold};
   }
 
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
@@ -513,8 +513,8 @@ const StyledCaptionWrapper = styled__default["default"].form `
   & * {
     height: 46px;
     padding: 10px 10px;
-    background: ${theme.theme.colors.neutral100};
-    border-radius: ${theme.theme.borderRadius};
+    background: ${miscTheme.theme.colors.neutral100};
+    border-radius: ${miscTheme.theme.borderRadius};
   }
 `;