@hhgtech/hhg-components
Version:
Hello Health Group common components
434 lines (409 loc) • 17.7 kB
JavaScript
import React__default from 'react';
import { C as Container } from './index-f0dc4a09.js';
import dayjs from 'dayjs';
import './index-8c40504a.js';
import './index-bd44bcb2.js';
import { Flex, Stack, Box } from '@mantine/core';
import '@mantine/dates';
import './index-fe4471f4.js';
import './index-7adf994c.js';
import './index-3f09210d.js';
import { T as Text } from './index-0b67696c.js';
import './index-2d25b0f0.js';
import './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import './translationsContext-18f7b7e0.js';
import '@mantine/hooks';
import { M as MediaQueries } from './utils-538169b3.js';
import './index-04505e35.js';
import { u as useScreenSize } from './index-50aea2c8.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { domainLocales } from './constantsDomainLocales.js';
import { L as Logo } from './index-4ee3cd67.js';
import { M as MarryBabyText } from './index-de3a12d3.js';
const StyledFooter$1 = styled.footer `
background-color: #1b3250;
.inner {
padding: 64px 24px 98px 24px;
margin: 0 auto;
}
.newsletter {
padding: 24px 0;
}
.footer-logo {
max-width: 132px;
max-height: 32px;
&[data-is-sehat='true'] {
max-width: 250px;
}
img {
object-fit: contain;
}
}
.social {
margin-top: 24px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
> .icons {
display: flex;
gap: 16px;
}
}
hr {
height: 1px;
border: none;
margin: 16px 0 16px 0;
background: ${theme.colors.neutral500};
opacity: 0.1;
outline: none;
}
.footer-menu-column {
min-width: 168px;
}
.footer-menu-title {
margin-bottom: 16px;
}
.footer-menu-link {
display: block;
}
.footer-menu-link-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
.copyright {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 8px;
.copyright-content {
color: ${theme.colors.neutral500};
font-size: 12px;
}
.copyright-image-wrapper {
flex-shrink: 0;
flex-wrap: wrap;
display: flex;
gap: 16px;
justify-content: flex-end;
.copyright-image {
align-self: flex-start;
img {
height: 32px;
}
}
}
}
.otherSites {
display: flex;
gap: 16px;
align-items: center;
padding: 19px 0;
border-top: 1px solid ${theme.colors.neutral100}1a;
border-bottom: 1px solid ${theme.colors.neutral100}1a;
.flags {
display: flex;
gap: 12px;
}
}
.signupButton {
display: none;
border: none;
margin-top: 16px;
outline: none;
text-transform: uppercase;
}
${MediaQueries.mbDown} {
.inner {
padding: 64px 0;
}
.social {
flex-direction: column;
gap: 10px;
align-items: start;
}
hr {
margin-top: 0px;
}
.copyright {
align-items: center;
text-align: center;
}
.copyright-image-wrapper {
justify-content: center;
max-width: unset;
}
.otherSites {
flex-direction: column;
padding: 24px 0;
.linkTitle {
text-align: center;
}
.flags {
flex-wrap: wrap;
justify-content: center;
}
}
.footer-menu-title {
margin-bottom: 12px;
}
.footer-menu {
display: grid;
grid-template-columns: repeat(2, 1fr);
> .footer-menu-column {
padding: 24px 0;
}
> .footer-menu-column:first-child {
grid-column-start: 1;
grid-column-end: 3;
border-top: 1px solid ${theme.colors.neutral100}1a;
border-bottom: 1px solid ${theme.colors.neutral100}1a;
> .footer-menu-link-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
}
.otherSites {
margin-bottom: 24px;
}
}
${MediaQueries.mbUp} {
.newsletter > p {
max-width: 360px;
}
.hrMobile {
display: none;
}
.copyright {
gap: 24px;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
}
.otherSites {
margin-bottom: 40px;
}
.columns {
display: flex;
flex-direction: row;
width: 100%;
gap: 16px;
margin-bottom: 40px;
> div:nth-child(1) {
display: flex;
flex-direction: column;
flex: 1;
}
> div:nth-child(2) {
display: flex;
flex-direction: row;
gap: 24px;
}
}
}
`;
const StyledFlag = styled.img `
width: 32px;
height: 32px;
${MediaQueries.mbDown} {
width: 24px;
height: 24px;
}
.country-flag {
width: 100%;
height: 100%;
}
`;
const Flag = ({ url, dataEventCategory, dataEventAction, dataEventLabel, }) => {
return (React__default.createElement(StyledFlag, { loading: "lazy", className: "country-flag", src: url, alt: "Country Flag", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-content-label": dataEventLabel }));
};
const FooterMenuColumn = ({ title, items, locale, index, }) => {
const { isMobile } = useScreenSize();
return (React__default.createElement("div", { className: "footer-menu-column" },
title ? (React__default.createElement(Text, { size: isMobile ? 's4' : 's3', className: "footer-menu-title", weight: isMobile ? 'regular' : 'semiBold', color: "neutral.6" }, title)) : null,
React__default.createElement("div", { className: "footer-menu-link-wrapper" }, items === null || items === void 0 ? void 0 : items.map((informationLink, idx) => (React__default.createElement(Text, { size: isMobile ? 'p3' : 'p4', as: "a", "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${domainLocales[locale]}${informationLink.url}`, className: "footer-menu-link",
// @ts-ignore
href: informationLink.url, key: idx, color: "#fff", weight: isMobile && index === 0 ? 'semiBold' : 'regular' }, informationLink.title))))));
};
const DiscoverFooter = ({ className, footerInfo, locale }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
const { isMobile } = useScreenSize();
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)) || [];
return (React__default.createElement(StyledFooter$1, { className: className },
React__default.createElement(Container, null,
React__default.createElement("div", { className: "inner" },
React__default.createElement("a", { href: "/" },
React__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.createElement("div", { className: "columns" },
React__default.createElement("div", { className: "newsletter" },
React__default.createElement(Text, { size: isMobile ? 's3' : 's4', weight: "semiBold", color: "neutral.0" }, (_d = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _d === void 0 ? void 0 : _d.content),
React__default.createElement("div", { className: "social" },
React__default.createElement(Text, { size: "p4", color: "neutral.6" }, (_e = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _e === void 0 ? void 0 : _e.title),
React__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.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.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", width: "24", height: "24" }))))))),
React__default.createElement("div", { className: "footer-menu" }, footerMenu && (React__default.createElement(React__default.Fragment, null, footerMenu === null || footerMenu === void 0 ? void 0 : footerMenu.map((menu, idx) => (React__default.createElement(FooterMenuColumn, { title: menu.menu_title, items: menu.items, locale: locale, key: idx, index: idx }))))))),
React__default.createElement("div", { className: "otherSites" },
React__default.createElement(Text, { size: "p4", className: "linkTitle", color: "neutral.6", weight: "regular" }, (_h = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _h === void 0 ? void 0 : _h.title),
React__default.createElement("div", { className: "flags" }, (_k = (_j = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _j === void 0 ? void 0 : _j.branch) === null || _k === void 0 ? void 0 : _k.map((flagLink, idx) => (React__default.createElement("a", { href: flagLink.url, key: idx, "data-event-category": "Footer", "data-event-action": flagLink.name, "data-event-label": flagLink.url },
React__default.createElement(Flag, { url: flagLink.flag, dataEventCategory: "Footer", dataEventAction: flagLink.name, dataEventLabel: flagLink.url })))))),
React__default.createElement("div", { className: "copyright" },
React__default.createElement("div", { className: "copyright-image-wrapper" }, verifiedIcons.length
? verifiedIcons.map((verify, index) => (React__default.createElement("a", { href: verify.url, key: index, className: "copyright-image" },
React__default.createElement("img", { loading: "lazy", src: verify.image, alt: "DMCA Icon" }))))
: null),
React__default.createElement(Text, { size: 'n1', className: "copyright-content", as: "div", color: "neutral.6", weight: "regular" },
React__default.createElement("div", { dangerouslySetInnerHTML: {
__html: (_l = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _l === void 0 ? void 0 : _l.copyright.replace(/{currentYear}/gi, dayjs().get('year').toString()),
} })))))));
};
const StyledFooter = styled.footer `
position: relative;
overflow: hidden;
.icons {
margin-top: 12px;
margin-bottom: 20px;
> a:not(:last-child) {
margin-right: 16px;
}
}
a {
text-decoration: none;
}
`;
const StyledMenuContainer = styled.div `
position: relative;
padding: 80px 0 40px;
margin: auto 68px;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid ${theme.colors.neutral200};
${MediaQueries.tdDown} {
margin: auto 16px;
flex-wrap: wrap;
row-gap: 32px;
column-gap: 16px;
}
${MediaQueries.mbDown} {
margin: auto 0;
}
`;
const StyledWrapMenuItem = styled.div `
display: flex;
justify-content: space-between;
gap: 12px;
flex-direction: column;
${MediaQueries.mbDown} {
flex: 1 1 160px;
}
.title {
padding-bottom: 4px;
}
`;
const StyledWrapItems = styled.div `
display: flex;
justify-content: space-between;
gap: 12px;
flex-direction: column;
`;
const StyledWrapCopyRight = styled.div `
background-color: #{map-get($mbColors, 'dark')};
padding: 16px 0;
position: relative;
img {
width: 89px;
height: 32px;
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 174px;
margin: auto 68px;
${MediaQueries.tdDown} {
margin: auto 16px;
}
${MediaQueries.mbDown} {
flex-direction: column-reverse;
gap: 16px;
align-items: flex-start;
margin: auto 0;
}
}
.verify {
display: flex;
align-items: flex-start;
gap: 8px;
}
`;
const StyledWrapInfo = styled.div `
padding: 40px 0;
${MediaQueries.mbUp} {
margin: auto 68px;
}
`;
const StyledSocialLink = styled.div `
display: flex;
gap: 16px;
.social-logo {
width: 28px;
}
`;
const MarryBabyFooter = ({ logoType = 'marryBaby', footerMenu, background, }) => {
var _a;
if (!footerMenu)
return null;
const { general, menu, socials } = footerMenu;
return (React__default.createElement(StyledFooter, { style: {
backgroundColor: background ? background : 'none',
} },
React__default.createElement(Container, null,
React__default.createElement(StyledMenuContainer, null, menu === null || menu === void 0 ? void 0 : menu.map(({ menu_title, items }, idx) => (React__default.createElement(StyledWrapMenuItem, { key: `mbf${idx}` },
React__default.createElement(MarryBabyText, { className: "title", type: "subtitle-1", color: theme.mbColors.pink }, menu_title), items === null || items === void 0 ? void 0 :
items.map(({ title, url }, id) => (React__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.createElement(StyledWrapItems, { key: `mbitem${id}` },
React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, title)))))))))),
React__default.createElement(Container, null,
React__default.createElement(StyledWrapInfo, null,
React__default.createElement(Flex, { gap: '24px', sx: (theme) => ({
[theme.fn.largerThan('sm')]: {
'.info-item': {
flexGrow: 1,
width: '50%',
},
},
[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
},
}) },
React__default.createElement(Stack, { spacing: '24px', className: "info-item" },
React__default.createElement(Logo, { className: "logo", type: logoType }),
React__default.createElement(Text, { size: "p4", as: "div" },
React__default.createElement("div", { dangerouslySetInnerHTML: {
__html: general === null || general === void 0 ? void 0 : general.content,
} })),
React__default.createElement(StyledSocialLink, null, socials === null || socials === void 0 ? void 0 : socials.map(({ icon, name, url }, id) => (React__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.createElement("img", { className: "social-logo", loading: "lazy", src: icon, alt: name })))))),
React__default.createElement(Box, { className: "info-item", sx: { paddingTop: '7px' } },
React__default.createElement(Text, { size: "p4", as: "div" },
React__default.createElement("div", { dangerouslySetInnerHTML: {
__html: general === null || general === void 0 ? void 0 : general.information,
} })))))),
React__default.createElement(StyledWrapCopyRight, null,
React__default.createElement(Container, null,
React__default.createElement("div", { className: "content" },
React__default.createElement(Text, { size: "p5", color: "#fff", as: "div" },
React__default.createElement("div", { dangerouslySetInnerHTML: {
__html: general === null || general === void 0 ? void 0 : general.copyright.replace(/{currentYear}/gi, dayjs().get('year').toString()),
} })),
React__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.createElement("img", { loading: "lazy", key: `imgMbFt${idx}`, src: image, alt: url })))))))));
};
const Footer = ({ locale, footerInfo, siteType, background }) => {
return siteType === 'helloSites' ? (React__default.createElement(DiscoverFooter, { locale: locale, footerInfo: (footerInfo || {}) })) : (React__default.createElement(MarryBabyFooter, { footerMenu: footerInfo, background: background }));
};
export { Footer as F };