@hhgtech/hhg-components 1.28.68 → 1.28.69

package/build/index-4035e658.js

@@ -0,0 +1,159 @@
+'use strict';
+
+var React = require('react');
+var index$2 = require('./index-9da9f0c3.js');
+var index = require('./index-12c07f71.js');
+var dayjs = require('dayjs');
+var index$3 = require('./index-5553f9e1.js');
+var theme = require('./theme-fa910869.js');
+require('./index-3e5fc2d6.js');
+var core = require('@mantine/core');
+require('@mantine/dates');
+require('./Subot-5fc40fb5.js');
+require('./index-1baaedb0.js');
+var index$1 = require('./index-bc4f4c33.js');
+var useTranslations = require('./useTranslations-e1853417.js');
+require('@mantine/hooks');
+require('./utils-64bd0c42.js');
+var index$5 = require('./index-81cb1142.js');
+var index$4 = require('./index-488d71ae.js');
+require('./translationsContext-950334bf.js');
+require('string-format');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+
+var styles$1 = {"footer":"Lj0qoTD","flag":"OO-qFWT"};
+
+const Flag = ({ url, isMobile, dataEventCategory, dataEventAction, dataEventLabel, }) => {
+    return (React__default["default"].createElement("div", { className: styles$1.flag , "data-is-mobile": isMobile },
+        React__default["default"].createElement("img", { loading: "lazy", className: "country-flag", src: url, alt: "Country Flag", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-content-label": dataEventLabel })));
+};
+const DiscoverFooter = ({ className, type = 'main', footerInfo, isMobile, locale, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+    const { t } = useTranslations.useTranslations();
+    const footerMenu = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu;
+    const verifiedIcons = ((_b = (_a = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _a === void 0 ? void 0 : _a.verified) === null || _b === void 0 ? void 0 : _b.filter(Boolean)) || [];
+    const FooterComp = 'footer';
+    return (React__default["default"].createElement(FooterComp, { className: `${styles$1.footer } ${className || ''}`, style: type === 'mini'
+            ? {
+                backgroundColor: theme.theme.colors.neutral50,
+            }
+            : {} },
+        React__default["default"].createElement(index.Container, null,
+            React__default["default"].createElement("div", { className: "inner", "data-type": type }, type === 'main' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("a", { href: "/" },
+                    React__default["default"].createElement("img", { loading: "lazy", className: "footer-logo", src: (_c = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _c === void 0 ? void 0 : _c.logo, alt: "Logo", "data-is-sehat": locale === 'id-ID' })),
+                React__default["default"].createElement("div", { className: "columns" },
+                    React__default["default"].createElement("div", { className: "newsletter" },
+                        React__default["default"].createElement(index$1.Text, { size: "p1", weight: "bold" }, (_d = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _d === void 0 ? void 0 : _d.content),
+                        React__default["default"].createElement(index$2.Button, { className: "signupButton", color: "primary", size: "lg" }, t('footer.signUp')),
+                        React__default["default"].createElement("div", { className: "social" },
+                            React__default["default"].createElement(index$1.Text, { size: "sm" }, (_e = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _e === void 0 ? void 0 : _e.title),
+                            React__default["default"].createElement("div", { className: "icons" }, (_g = (_f = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _f === void 0 ? void 0 : _f.socials) === null || _g === void 0 ? void 0 : _g.map((social, idx) => (React__default["default"].createElement("a", { key: idx, "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, href: social.url },
+                                React__default["default"].createElement("img", { loading: "lazy", "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, src: social.icon, alt: "Logo Social", className: "social-icon" }))))),
+                            React__default["default"].createElement("hr", { className: "hrMobile" }))),
+                    React__default["default"].createElement("div", null,
+                        footerMenu && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement("div", { className: "biglinks" }, (_j = (_h = footerMenu[0]) === null || _h === void 0 ? void 0 : _h.items) === null || _j === void 0 ? void 0 : _j.map((bigLink, idx) => (React__default["default"].createElement("a", { "data-event-category": "Footer", "data-event-action": bigLink.title, "data-event-label": `https://${index$3.domainLocales[locale]}${bigLink.url}`, className: "bigLink", key: idx, href: bigLink.url }, bigLink.title)))),
+                            React__default["default"].createElement("hr", { className: "hrMobile" }),
+                            React__default["default"].createElement("div", { className: "mHalf" },
+                                React__default["default"].createElement(index$1.Text, { size: "sm", className: "linkTitle" }, (_k = footerMenu[1]) === null || _k === void 0 ? void 0 : _k.menu_title), (_m = (_l = footerMenu[1]) === null || _l === void 0 ? void 0 : _l.items) === null || _m === void 0 ? void 0 :
+                                _m.map((informationLink, idx) => (React__default["default"].createElement("a", { "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${index$3.domainLocales[locale]}${informationLink.url}`, className: "link", href: informationLink.url, key: idx },
+                                    React__default["default"].createElement(index$1.Text, { size: "sm", dataEventCategory: "Footer", dataEventAction: informationLink.title, dataEventLabel: `https://${index$3.domainLocales[locale]}${informationLink.url}` }, informationLink.title))))),
+                            React__default["default"].createElement("div", { className: "mHalf" },
+                                React__default["default"].createElement(index$1.Text, { size: "sm", className: "linkTitle" }, (_o = footerMenu[2]) === null || _o === void 0 ? void 0 : _o.menu_title), (_q = (_p = footerMenu[2]) === null || _p === void 0 ? void 0 : _p.items) === null || _q === void 0 ? void 0 :
+                                _q.map((hellohealthlink, idx) => hellohealthlink.url && (React__default["default"].createElement("a", { "data-event-category": "Footer", "data-event-action": hellohealthlink.title, "data-event-label": hellohealthlink.url, className: "link", href: hellohealthlink.url, key: idx },
+                                    React__default["default"].createElement(index$1.Text, { size: "sm", dataEventCategory: "Footer", dataEventAction: hellohealthlink.title, dataEventLabel: hellohealthlink.url }, hellohealthlink.title))))))),
+                        React__default["default"].createElement("hr", { className: "hrMobile" }),
+                        React__default["default"].createElement("div", { className: "otherSites" },
+                            React__default["default"].createElement(index$1.Text, { size: "sm", className: "linkTitle" }, (_r = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _r === void 0 ? void 0 : _r.title),
+                            React__default["default"].createElement("div", { className: "flags" }, (_t = (_s = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _s === void 0 ? void 0 : _s.branch) === null || _t === void 0 ? void 0 : _t.map((flagLink, idx) => (React__default["default"].createElement("a", { className: "link", href: flagLink.url, key: idx, "data-event-category": "Footer", "data-event-action": flagLink.name, "data-event-label": flagLink.url },
+                                React__default["default"].createElement(Flag, { url: flagLink.flag, isMobile: isMobile, dataEventCategory: "Footer", dataEventAction: flagLink.name, dataEventLabel: flagLink.url })))))))),
+                React__default["default"].createElement("hr", null),
+                React__default["default"].createElement("div", { className: "copyright" },
+                    React__default["default"].createElement("div", { className: "copyright-image-wrapper" }, verifiedIcons.length
+                        ? verifiedIcons.map((verify, index) => (React__default["default"].createElement("a", { href: verify.url, key: index, className: "copyright-image" },
+                            React__default["default"].createElement("img", { loading: "lazy", src: verify.image, alt: "DMCA Icon" }))))
+                        : null),
+                    React__default["default"].createElement(index$1.Text, { size: "xs", className: "copyright-content", as: "div" },
+                        React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
+                                __html: (_u = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _u === void 0 ? void 0 : _u.copyright.replace(/{currentYear}/gi, dayjs__default["default"]().get('year').toString()),
+                            } }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null, (footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu) && (React__default["default"].createElement("div", { className: "columns" },
+                React__default["default"].createElement("div", { className: "mHalf" },
+                    React__default["default"].createElement(index$1.Text, { size: "sm", className: "linkTitle" }, (_v = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[1]) === null || _v === void 0 ? void 0 : _v.menu_title), (_x = (_w = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[1]) === null || _w === void 0 ? void 0 : _w.items) === null || _x === void 0 ? void 0 :
+                    _x.map((informationLink) => (React__default["default"].createElement("a", { className: "link", href: informationLink.url, key: informationLink.title, "data-list-type": "Footer", "data-content-type": "Navigate", "data-content-topic": "Information", "data-content-title": informationLink.title, "data-content-id": `https://${index$3.domainLocales[locale]}${informationLink.url}`, "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${index$3.domainLocales[locale]}${informationLink.url}` },
+                        React__default["default"].createElement(index$1.Text, { dataEventCategory: "Footer", dataEventAction: informationLink.title, dataEventLabel: `https://${index$3.domainLocales[locale]}${informationLink.url}`, size: "sm", style: {
+                                color: theme.theme.colors.gray800,
+                            } }, informationLink.title))))),
+                React__default["default"].createElement("div", { className: "mHalf" },
+                    React__default["default"].createElement(index$1.Text, { size: "sm", className: "linkTitle" }, (_y = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[2]) === null || _y === void 0 ? void 0 : _y.menu_title), (_0 = (_z = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[2]) === null || _z === void 0 ? void 0 : _z.items) === null || _0 === void 0 ? void 0 :
+                    _0.map((hellohealthlink, idx) => (React__default["default"].createElement("a", { className: "link", href: hellohealthlink.url, key: idx, "data-list-type": "Footer", "data-content-type": "Navigate", "data-content-topic": "Hello Health", "data-content-title": hellohealthlink.title, "data-content-id": hellohealthlink.url, "data-event-category": "Footer", "data-event-action": hellohealthlink.title, "data-event-label": hellohealthlink.url },
+                        React__default["default"].createElement(index$1.Text, { size: "sm", color: theme.theme.colors.gray800, dataEventCategory: "Footer", dataEventAction: hellohealthlink.title, dataEventLabel: hellohealthlink.url }, hellohealthlink.title))))),
+                type !== 'mini' && React__default["default"].createElement("hr", { className: "hrMobile" }),
+                React__default["default"].createElement("div", { className: "newsletter" },
+                    React__default["default"].createElement("div", { className: "social" },
+                        React__default["default"].createElement(index$1.Text, { size: "sm" }, (_1 = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _1 === void 0 ? void 0 : _1.title),
+                        React__default["default"].createElement("div", { className: "icons" }, (_3 = (_2 = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _2 === void 0 ? void 0 : _2.socials) === null || _3 === void 0 ? void 0 : _3.map((social, idx) => (React__default["default"].createElement("a", { key: idx, "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, href: social.url },
+                            React__default["default"].createElement("img", { "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, src: social.icon, alt: "Logo Social", loading: "lazy", className: "social-icon" })))))))))))))));
+};
+
+var styles = {"footerContainer":"B6-KmWK","menuContainer":"GS-7mbG","wrapMenuItem":"qc5bEb3","wrapItems":"CQGVeuT","wrapCopyRight":"_8eUT8Jr","wrapInfo":"_6JMoel-","socialLink":"pFG7UH3"};
+
+const MarryBabyFooter = ({ logoType = 'marryBaby', footerMenu, background, }) => {
+    var _a;
+    if (!footerMenu)
+        return null;
+    const { general, menu, socials } = footerMenu;
+    return (React__default["default"].createElement("footer", { className: styles.footerContainer , style: {
+            backgroundColor: background ? background : 'none',
+        } },
+        React__default["default"].createElement(index.Container, null,
+            React__default["default"].createElement("div", { className: styles.menuContainer }, menu === null || menu === void 0 ? void 0 : menu.map(({ menu_title, items }, idx) => (React__default["default"].createElement("div", { className: styles.wrapMenuItem, key: `mbf${idx}` },
+                React__default["default"].createElement(index$4.MarryBabyText, { className: "title", type: "subtitle-1", color: theme.theme.mbColors.pink }, menu_title), items === null || items === void 0 ? void 0 :
+                items.map(({ title, url }, id) => (React__default["default"].createElement("a", { "data-event-category": "Footer", "data-event-action": "Click", "data-event-label": `${url}`, className: "link", href: url, key: `footer-links-${id}` },
+                    React__default["default"].createElement("div", { className: styles.wrapItems, key: `mbitem${id}` },
+                        React__default["default"].createElement(index$4.MarryBabyText, { type: "bodytext-2", color: theme.theme.mbColors.gray }, title)))))))))),
+        React__default["default"].createElement(index.Container, null,
+            React__default["default"].createElement("div", { className: styles.wrapInfo },
+                React__default["default"].createElement(core.Flex, { gap: '24px', sx: (theme) => ({
+                        [theme.fn.largerThan('sm')]: {
+                            '.info-item': {
+                                flexGrow: 1,
+                                width: '50%',
+                            },
+                        },
+                        [theme.fn.smallerThan('sm')]: {
+                            flexDirection: 'column',
+                        },
+                    }) },
+                    React__default["default"].createElement(core.Stack, { spacing: '24px', className: "info-item" },
+                        React__default["default"].createElement(index$5.Logo, { className: "logo", type: logoType }),
+                        React__default["default"].createElement(index$1.Text, { size: "p4", as: "div" },
+                            React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
+                                    __html: general === null || general === void 0 ? void 0 : general.content,
+                                } })),
+                        React__default["default"].createElement("div", { className: styles.socialLink }, socials === null || socials === void 0 ? void 0 : socials.map(({ icon, name, url }, id) => (React__default["default"].createElement("a", { key: `social${id}`, target: "_blank", rel: "noreferrer", "data-event-category": "Footer", "data-event-action": `Follow us - ${name}`, "data-content-label": name, href: url },
+                            React__default["default"].createElement("img", { className: "social-logo", loading: "lazy", src: icon, alt: name })))))),
+                    React__default["default"].createElement(core.Box, { className: "info-item", sx: { paddingTop: '7px' } },
+                        React__default["default"].createElement(index$1.Text, { size: "p4", as: "div" },
+                            React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
+                                    __html: general === null || general === void 0 ? void 0 : general.information,
+                                } })))))),
+        React__default["default"].createElement("div", { className: styles.wrapCopyRight },
+            React__default["default"].createElement(index.Container, null,
+                React__default["default"].createElement("div", { className: "content" },
+                    React__default["default"].createElement(index$1.Text, { size: "p5", color: "#fff", as: "div" },
+                        React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
+                                __html: general === null || general === void 0 ? void 0 : general.copyright.replace(/{currentYear}/gi, dayjs__default["default"]().get('year').toString()),
+                            } })),
+                    React__default["default"].createElement("div", { className: "verify" }, (_a = general === null || general === void 0 ? void 0 : general.verified) === null || _a === void 0 ? void 0 : _a.map(({ image, url }, idx) => (React__default["default"].createElement("img", { loading: "lazy", key: `imgMbFt${idx}`, src: image, alt: url })))))))));
+};
+
+const Footer = ({ type, isMobile = true, locale, footerInfo, siteType, background, }) => {
+    return siteType === 'helloSites' ? (React__default["default"].createElement(DiscoverFooter, { isMobile: isMobile, type: type, locale: locale, footerInfo: (footerInfo || {}) })) : (React__default["default"].createElement(MarryBabyFooter, { footerMenu: footerInfo, background: background }));
+};
+
+exports.Footer = Footer;

package/build/index-488d71ae.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var index_styled = require('./index.styled-5628b3e7.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const MarryBabyHeading = (_a) => {
+    var { type, color, style } = _a, props = tslib_es6.__rest(_a, ["type", "color", "style"]);
+    const DATATYPE = {
+        h1: 'headline-1',
+        h2: 'headline-2',
+        h3: 'headline-3',
+        h4: 'headline-4',
+    };
+    return (React__default["default"].createElement(index_styled.StyledHeading, Object.assign({ type: type, "data-type": DATATYPE[type], style: Object.assign(Object.assign({}, (color && { '--text-color': color })), style) }, props)));
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const MarryBabyText = (_a) => {
+    var { type, color, style } = _a, props = tslib_es6.__rest(_a, ["type", "color", "style"]);
+    return (React__default["default"].createElement(index_styled.StyledText, Object.assign({ "data-type": type, style: Object.assign(Object.assign({}, style), (color && { '--text-color': color })) }, props)));
+};
+
+exports.MarryBabyHeading = MarryBabyHeading;
+exports.MarryBabyText = MarryBabyText;