@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

package/raw/src/components/organisms/navigationV2/components/molecules/menuCommunitiesList/Item/index.styled.tsx

@@ -0,0 +1,89 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledContent = styled.div`
+  padding: 5px;
+  flex: 1;
+`
+
+export const StyledImage = styled.img`
+  width: 88px;
+  height: 88px;
+  border-radius: 4px;
+  object-fit: cover;
+`
+export const StyledName = styled.div`
+  font-size: 12px;
+  font-weight: 600;
+  color: ${(props: ThemeProps) => props.theme.colors.gray800};
+  text-decoration: none;
+`
+export const StyledCategory = styled.div`
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 400;
+  color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+`
+export const StyledModifiedTime = styled.div`
+  font-size: 12px;
+  font-weight: 400;
+  color: ${(props: ThemeProps) => props.theme.colors.gray600};
+`
+export const StyledDot = styled.div`
+  font-size: 12px;
+  font-weight: 400;
+  color: ${(props: ThemeProps) => props.theme.colors.gray600};
+`
+export const StyledItem = styled.a`
+  display: flex;
+  gap: 10px;
+  text-decoration: none;
+  position: relative;
+  &::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 1px;
+    border-top: 1px dashed
+      ${(props: ThemeProps) => props.theme.colors.neutral100};
+    position: absolute;
+    bottom: -24px;
+    ${MediaQueries.tdOnly} {
+      bottom: -16px;
+    }
+    ${MediaQueries.mbDown} {
+      bottom: -12px;
+    }
+  }
+  &:last-child {
+    &::after {
+      display: none;
+    }
+  }
+  ${MediaQueries.tdUp} {
+    &:nth-last-child(2) {
+      &::after {
+        display: none;
+      }
+    }
+  }
+`
+export const StyledInfoUser = styled.div`
+  display: flex;
+  gap: 10px;
+  vertical-align: middle;
+  align-items: center;
+`
+export const StyledTitle = styled.div`
+  margin-top: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: ${(props: ThemeProps) => props.theme.colors.gray800};
+`
+export const StyledInfo = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 5px;
+`

package/raw/src/components/organisms/navigationV2/components/molecules/menuCommunitiesList/Item/index.tsx

@@ -0,0 +1,91 @@
+import React, { useContext } from 'react'
+
+import { formatDistanceToNow } from 'date-fns'
+import { NavigationContext } from 'src/components/organisms/navigationV2/navigationContext'
+import { UserAvatar } from 'src/together'
+import { Post } from 'src/together/interfaces/types'
+import { locales } from 'together/components/molecules/cardAuthor'
+
+import {
+  StyledContent,
+  StyledImage,
+  StyledName,
+  StyledCategory,
+  StyledModifiedTime,
+  StyledItem,
+  StyledInfoUser,
+  StyledTitle,
+  StyledInfo,
+  StyledDot,
+} from './index.styled'
+
+export type Props = {
+  post?: Post
+  index?: number
+}
+
+const Item = ({ post, index = 0 }: Props) => {
+  const {
+    locale,
+    configs: { statics },
+    isAmp,
+  } = useContext(NavigationContext)
+  if (!post) return null
+  const communityUrl = [statics.TOGETHER_URL_FE, post.community?.slug].join('/')
+  const postUrl = [communityUrl, post.slug].join('/')
+  const time = post.createdAt
+  const cleanedTimeDate = time
+    ? !isNaN(new Date(time).getTime())
+      ? new Date(time)
+      : null
+    : null
+  const timeText = cleanedTimeDate
+    ? formatDistanceToNow(cleanedTimeDate, {
+        locale: locales[locale],
+      })
+    : time
+  return (
+    <StyledItem
+      href={postUrl}
+      data-event-category="Hamburger Navigation"
+      data-event-action={`Together Click ${index + 1}`}
+      data-event-label={postUrl}
+    >
+      <StyledContent>
+        <StyledInfoUser>
+          <UserAvatar
+            avatar={post.author?.avatar}
+            username={post.author?.name || post.author?.username}
+          />
+          <div>
+            <StyledName>{post.author?.name}</StyledName>
+            <StyledInfo>
+              <StyledCategory
+                data-event-category="Hamburger Navigation"
+                data-event-action={`Topic Click ${index + 1}`}
+                data-event-label={communityUrl}
+                onClick={(e) => {
+                  e.preventDefault()
+                  location.href = communityUrl
+                }}
+              >
+                {post.community?.name}
+              </StyledCategory>
+              <StyledDot>•</StyledDot>
+              <StyledModifiedTime>{timeText}</StyledModifiedTime>
+            </StyledInfo>
+          </div>
+        </StyledInfoUser>
+        <StyledTitle>{post.title}</StyledTitle>
+      </StyledContent>
+      {!!post.photos?.length &&
+        (isAmp ? (
+          <StyledImage src={post.photos[0]} />
+        ) : (
+          <StyledImage className="lazy" data-src={post.photos[0]} />
+        ))}
+    </StyledItem>
+  )
+}
+
+export { Item }

package/raw/src/components/organisms/navigationV2/components/molecules/menuCommunitiesList/communitySpotlights.tsx

@@ -0,0 +1,49 @@
+import React, { useContext } from 'react'
+
+import { useTranslations } from 'src/hooks/useTranslations'
+import { Post } from 'src/together/interfaces/types'
+
+import { CommunityIcon } from '../../../../../../assets/svg'
+import { NavigationContext } from '../../../navigationContext'
+import { SpotlightNoData } from '../spotlightNoData'
+import { Spotlights } from '../Spotlights'
+import { StyledContainerItems } from './index.styled'
+import { Item } from './Item'
+
+export type Props = {
+  spotlights: Post[]
+}
+
+const CommunitySpotlights = ({ spotlights = [] }: Props) => {
+  const {
+    configs: { statics },
+  } = useContext(NavigationContext)
+  const { t } = useTranslations()
+
+  return (
+    <Spotlights
+      title={t('home.navigator.menu.trendingPosts')}
+      viewMore={t('home.navigator.menu.trendingPosts.seeMore')}
+      link={statics.TOGETHER_URL_FE}
+      dataEventAction="Together See More Click"
+    >
+      {spotlights.length !== 0 ? (
+        <StyledContainerItems>
+          {spotlights?.slice(0, 4).map((p, index) => (
+            <Item index={index} post={p} key={p.id} />
+          ))}
+        </StyledContainerItems>
+      ) : (
+        <SpotlightNoData
+          title={t('home.navigator.menu.together.noPosts.title')}
+          description={t('home.navigator.menu.together.noPosts.description')}
+          link={`${statics.HOME_PAGE_URL}/community/`}
+          cta={t('home.navigator.menu.together.noPosts.cta')}
+          icon={CommunityIcon}
+        />
+      )}
+    </Spotlights>
+  )
+}
+
+export { CommunitySpotlights }

package/raw/src/components/organisms/navigationV2/components/molecules/menuCommunitiesList/index.styled.tsx

@@ -0,0 +1,42 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries, pcLayout, spLayout } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledContainer = styled.div`
+  & > :not(:last-child) {
+    border-bottom: 1px solid
+      ${(props: ThemeProps) => props.theme.colors.neutral100};
+  }
+
+  & > div > :not(:last-child) {
+    border-bottom: 1px solid
+      ${(props: ThemeProps) => props.theme.colors.neutral100};
+  }
+
+  &[data-category-list-type='sub'] {
+    padding-bottom: 72px;
+  }
+
+  &[data-is-displayed='false'] {
+    display: none;
+  }
+`
+export const StyledCardSkeleton = styled.div`
+  & > div {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+`
+
+export const StyledContainerItems = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 48px;
+  ${MediaQueries.tdDown} {
+    grid-template-columns: 1fr;
+    grid-gap: 32px;
+  }
+  ${MediaQueries.mbDown} {
+    grid-gap: 24px;
+  }
+`

package/raw/src/components/organisms/navigationV2/components/molecules/menuCommunitiesList/index.tsx

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react'
+
+import { useTranslations } from 'hooks/useTranslations'
+import { Community, Post } from 'src/together/interfaces/types'
+
+import { NavigationContext } from '../../../navigationContext'
+import { SiteType } from '../../../types'
+import { PopupWrapper } from '../../atoms/PopupWrapper'
+import { Categories } from '../Categories'
+import { CommunitySpotlights } from './communitySpotlights'
+
+export type Props = {
+  communities: Community[]
+  spotlights: Post[]
+  onClose?: () => void
+  siteType: SiteType
+  isOpen?: boolean
+}
+
+const MenuCommunitiesList = ({
+  communities = [],
+  onClose,
+  siteType = 'helloSites',
+  isOpen,
+  spotlights = [],
+}: Props) => {
+  const { t } = useTranslations()
+  const {
+    configs: { statics },
+  } = useContext(NavigationContext)
+  return (
+    <PopupWrapper onClosePopup={onClose} isDisplay={isOpen} isNavMenu>
+      <Categories
+        hrefViewMore={statics.TOGETHER_URL_FE}
+        UrlFE={statics.TOGETHER_URL_FE}
+        onClosePopup={onClose}
+        siteType={siteType}
+        titleBtnViewMore={t('home.navigator.menuItem.allCommunities')}
+        menuItems={
+          communities?.map((community) => {
+            if (!community) return {}
+            return {
+              name: community.name || '',
+              link: community.slug || '/',
+              thumbnail: community.thumbnail || '',
+            }
+          }) || []
+        }
+        headingTitle={t('home.navigator.menuItem.allCommunitiesheadingTitle')}
+      />
+      <CommunitySpotlights spotlights={spotlights} />
+    </PopupWrapper>
+  )
+}
+
+export { MenuCommunitiesList }

package/raw/src/components/organisms/navigationV2/components/molecules/menuHealthToolsList/Item/index.styled.tsx

@@ -0,0 +1,104 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledItem = styled.a`
+  text-decoration: none;
+  border-radius: 4px;
+  background: #e3f2ff;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  * {
+    pointer-events: none;
+  }
+  .bg-svg {
+    width: 245px;
+    top: 0;
+    right: 0;
+    height: 100%;
+    position: absolute;
+    ${MediaQueries.tdDown} {
+      top: calc(51% - 68px);
+      right: -8px;
+    }
+  }
+  padding: 180px 24px 16px;
+  a {
+    display: flex;
+    width: 100%;
+  }
+  ${MediaQueries.tdDown} {
+    padding-top: 16px;
+    display: flex;
+    align-items: center;
+  }
+`
+export const StyledImageCard = styled.div`
+  width: 64px;
+  height: 64px;
+  background: white;
+  position: absolute;
+  right: 25px;
+  top: 35px;
+  z-index: 3;
+  border-radius: 50%;
+  img {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    top: 50%;
+    left: 50%;
+    display: block;
+    transform: translate(-50%, -50%);
+  }
+  ${MediaQueries.tdDown} {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+`
+
+export const StyledBtnView = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+`
+export const StyledTitle = styled.p`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: ${(props: ThemeProps) => props.theme.colors.gray800};
+`
+export const StyledDes = styled.p`
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 400;
+  color: ${(props: ThemeProps) => props.theme.colors.gray600};
+  height: 40px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin-bottom: auto;
+  ${MediaQueries.tdDown} {
+    display: none;
+  }
+`
+export const StyledContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  z-index: 1;
+  ${MediaQueries.tdUp} {
+    gap: 8px;
+  }
+  ${MediaQueries.tdDown} {
+    gap: 4px;
+    flex: 1;
+  }
+`

package/raw/src/components/organisms/navigationV2/components/molecules/menuHealthToolsList/Item/index.tsx

@@ -0,0 +1,99 @@
+import React, { useContext, useRef } from 'react'
+
+import { chevronRightActive } from 'assets/svg'
+import { NavigationContext } from 'src/components/organisms/navigationV2/navigationContext'
+import { HealthTool } from 'src/components/organisms/navigationV2/types'
+import { useTranslations } from 'src/hooks/useTranslations'
+
+import {
+  StyledItem,
+  StyledBtnView,
+  StyledTitle,
+  StyledDes,
+  StyledImageCard,
+  StyledContentWrapper,
+} from './index.styled'
+
+export type Props = {
+  item?: HealthTool
+  index?: number
+}
+
+const Item = ({ item, index = 0 }: Props) => {
+  const { t } = useTranslations()
+  const {
+    configs: { statics },
+    isAmp,
+  } = useContext(NavigationContext)
+  const svgUniqId = useRef(`svg-${Math.random()}`)
+  if (!item) return null
+  const link = item.link
+    ? item.link.startsWith('http')
+      ? item.link
+      : `${statics.HOME_PAGE_URL}${item.link}`
+    : undefined
+  return (
+    <StyledItem
+      href={link}
+      data-event-category="Hamburger Navigation"
+      data-event-action={`Engage Click ${index + 1}`}
+      data-event-label={link}
+    >
+      <svg
+        className="bg-svg"
+        viewBox="0 0 255 250"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          style={{ stroke: 'unset' }}
+          d="M187.502 249.528C137.417 249.528 90.3337 230.511 54.9195 195.979C19.5053 161.447 0 115.534 0 66.6961C0 17.8578 19.5053 -28.0513 54.9195 -62.5833C90.33 -97.1153 137.417 -116.133 187.502 -116.133C237.587 -116.133 284.67 -97.1153 320.084 -62.5833C355.498 -28.0513 375 17.8614 375 66.6961C375 115.531 355.495 161.443 320.084 195.975C284.67 230.507 237.583 249.525 187.502 249.525V249.528ZM187.502 -114.715C137.805 -114.715 91.084 -95.8455 55.9434 -61.5805C20.8027 -27.3191 1.45264 18.2402 1.45264 66.6961C1.45264 115.152 20.8064 160.711 55.9434 194.976C91.084 229.241 137.805 248.111 187.502 248.111C237.198 248.111 283.92 229.241 319.057 194.976C354.197 160.711 373.547 115.156 373.547 66.6961C373.547 18.2366 354.194 -27.3191 319.057 -61.5841C283.916 -95.8455 237.195 -114.719 187.502 -114.719V-114.715ZM187.502 244.958C138.67 244.958 92.7622 226.417 58.2351 192.747C23.708 159.077 4.6906 114.311 4.6906 66.6961C4.6906 19.0807 23.708 -25.6814 58.2351 -59.3476C92.7622 -93.0175 138.67 -111.559 187.502 -111.559C236.334 -111.559 282.242 -93.0175 316.769 -59.3476C351.296 -25.6778 370.313 19.0843 370.313 66.6997C370.313 114.315 351.299 159.077 316.769 192.747C282.242 226.417 236.334 244.958 187.502 244.958ZM187.502 -110.141C139.058 -110.141 93.5162 -91.7477 59.2627 -58.3448C25.0054 -24.9455 6.14324 19.463 6.14324 66.6961C6.14324 113.929 25.0091 158.341 59.2627 191.741C93.5162 225.14 139.058 243.537 187.502 243.537C235.945 243.537 281.487 225.143 315.741 191.741C349.995 158.341 368.86 113.933 368.86 66.6961C368.86 19.4594 349.995 -24.9491 315.741 -58.3484C281.487 -91.7477 235.942 -110.145 187.502 -110.145V-110.141ZM187.502 240.384C139.923 240.384 95.1943 222.319 61.5507 189.515C27.907 156.707 9.38119 113.089 9.38119 66.6961C9.38119 20.3035 27.907 -23.3114 61.5507 -56.1155C95.1943 -88.9197 139.923 -106.985 187.502 -106.985C235.081 -106.985 279.809 -88.9197 313.453 -56.1155C347.097 -23.3114 365.622 20.3035 365.622 66.6961C365.622 113.089 347.097 156.704 313.453 189.508C279.809 222.312 235.081 240.377 187.502 240.377V240.384ZM187.502 -105.567C140.311 -105.567 95.9484 -87.6499 62.5782 -55.1127C29.2081 -22.5756 10.8338 20.6823 10.8338 66.6961C10.8338 112.71 29.2118 155.971 62.5782 188.508C95.9447 221.046 140.311 238.963 187.502 238.963C234.692 238.963 279.055 221.042 312.425 188.508C345.792 155.971 364.17 112.71 364.17 66.6961C364.17 20.6823 345.792 -22.5792 312.425 -55.1163C279.055 -87.6499 234.689 -105.571 187.502 -105.571V-105.567ZM187.502 235.81C141.176 235.81 97.6265 218.221 64.8699 186.279C32.1134 154.337 14.0755 111.873 14.0755 66.6997C14.0755 21.5264 32.1171 -20.9379 64.8699 -52.8799C97.6228 -84.8218 141.176 -102.411 187.502 -102.411C233.827 -102.411 277.377 -84.8218 310.134 -52.8799C342.89 -20.9379 360.928 21.5264 360.928 66.6997C360.928 111.873 342.887 154.337 310.134 186.279C277.377 218.221 233.824 235.81 187.502 235.81ZM187.502 -100.993C141.564 -100.993 98.3768 -83.5485 65.8938 -51.8771C33.4108 -20.2056 15.5244 21.9051 15.5244 66.6961C15.5244 111.487 33.4145 153.601 65.8938 185.273C98.3768 216.944 141.564 234.389 187.502 234.389C233.439 234.389 276.627 216.944 309.11 185.273C341.593 153.601 359.479 111.487 359.479 66.6961C359.479 21.9051 341.589 -20.2092 309.11 -51.8807C276.627 -83.5521 233.439 -100.997 187.502 -100.997V-100.993ZM187.502 231.236C142.429 231.236 100.055 214.12 68.1855 183.044C36.3161 151.967 18.7624 110.65 18.7624 66.6997C18.7624 22.7492 36.3124 -18.5679 68.1855 -49.6442C100.055 -80.724 142.429 -97.8367 187.502 -97.8367C232.574 -97.8367 274.949 -80.7204 306.818 -49.6442C338.688 -18.5679 356.241 22.7492 356.241 66.6997C356.241 110.65 338.688 151.967 306.818 183.044C274.949 214.12 232.574 231.236 187.502 231.236ZM187.502 -96.4191C142.817 -96.4191 100.809 -79.4507 69.2131 -48.6414C37.6135 -17.8357 20.215 23.128 20.215 66.6961C20.215 110.264 37.6172 151.231 69.2131 182.041C100.809 212.85 142.817 229.818 187.502 229.818C232.186 229.818 274.195 212.85 305.791 182.041C337.387 151.231 354.789 110.268 354.789 66.6961C354.789 23.1244 337.387 -17.8393 305.791 -48.6486C274.195 -79.4579 232.186 -96.4263 187.502 -96.4263V-96.4191ZM187.502 226.662C143.682 226.662 102.487 210.022 71.5011 179.811C40.5151 149.597 23.453 109.427 23.453 66.7033C23.453 23.9793 40.5188 -16.1944 71.5011 -46.4085C102.487 -76.6262 143.682 -93.2628 187.502 -93.2628C231.321 -93.2628 272.517 -76.6226 303.503 -46.4121C334.489 -16.198 351.551 23.9721 351.551 66.6997C351.551 109.427 334.489 149.597 303.503 179.808C272.517 210.022 231.321 226.658 187.502 226.658V226.662ZM187.502 -91.8451C144.07 -91.8451 103.237 -75.3529 72.5287 -45.4093C41.8199 -15.4621 24.9056 24.3508 24.9056 66.6997C24.9056 109.048 41.8199 148.865 72.5287 178.809C103.237 208.752 144.07 225.244 187.502 225.244C230.933 225.244 271.766 208.752 302.475 178.809C333.184 148.861 350.098 109.048 350.098 66.6997C350.098 24.3508 333.184 -15.4657 302.475 -45.4093C271.766 -75.3565 230.933 -91.8451 187.502 -91.8451ZM187.502 222.088C144.935 222.088 104.919 205.924 74.8204 176.576C44.7214 147.227 28.1473 108.204 28.1473 66.6997C28.1473 25.1949 44.7251 -13.828 74.8204 -43.1764C104.919 -72.5248 144.935 -88.6888 187.502 -88.6888C230.068 -88.6888 270.084 -72.5248 300.183 -43.1764C330.282 -13.828 346.856 25.1949 346.856 66.6997C346.856 108.204 330.282 147.227 300.183 176.576C270.084 205.924 230.068 222.088 187.502 222.088ZM187.502 -87.2712C145.323 -87.2712 105.67 -71.2551 75.8442 -42.1736C46.0188 -13.0922 29.5962 25.5737 29.5962 66.7033C29.5962 107.833 46.0225 146.495 75.8442 175.577C105.67 204.658 145.323 220.674 187.502 220.674C229.68 220.674 269.334 204.658 299.159 175.577C328.985 146.495 345.407 107.829 345.407 66.7033C345.407 25.5773 328.981 -13.0886 299.159 -42.1736C269.334 -71.2551 229.68 -87.2712 187.502 -87.2712ZM187.502 217.514C102.217 217.514 32.8342 149.861 32.8342 66.6997C32.8342 -16.4613 102.217 -84.1184 187.502 -84.1184C272.786 -84.1184 342.17 -16.4649 342.17 66.6961C342.17 149.857 272.786 217.511 187.502 217.511V217.514ZM187.502 -82.7008C103.019 -82.7008 34.2868 -15.6822 34.2868 66.6997C34.2868 149.081 103.019 216.1 187.502 216.1C271.984 216.1 340.717 149.081 340.717 66.6997C340.717 -15.6822 271.984 -82.7008 187.502 -82.7008ZM187.502 212.94C104.805 212.94 37.5248 147.336 37.5248 66.6997C37.5248 -13.9362 104.805 -79.5445 187.502 -79.5445C270.199 -79.5445 337.479 -13.9399 337.479 66.6961C337.479 147.332 270.199 212.937 187.502 212.937V212.94ZM187.502 -78.1268C105.603 -78.1268 38.9774 -13.1571 38.9774 66.6997C38.9774 146.556 105.607 211.526 187.502 211.526C269.397 211.526 336.026 146.556 336.026 66.6997C336.026 -13.1571 269.397 -78.1268 187.502 -78.1268ZM187.502 208.366C107.392 208.366 42.2154 144.814 42.2154 66.6997C42.2154 -11.4148 107.388 -74.9705 187.502 -74.9705C267.615 -74.9705 332.788 -11.4184 332.788 66.6961C332.788 144.811 267.612 208.363 187.502 208.363V208.366ZM187.502 -73.5529C108.19 -73.5529 43.668 -10.6356 43.668 66.6997C43.668 144.035 108.19 206.952 187.502 206.952C266.813 206.952 331.336 144.035 331.336 66.6997C331.336 -10.6356 266.809 -73.5529 187.502 -73.5529ZM187.502 203.792C109.976 203.792 46.906 142.293 46.906 66.6997C46.906 -8.89335 109.976 -70.3966 187.502 -70.3966C265.028 -70.3966 328.098 -8.89697 328.098 66.6961C328.098 142.289 265.028 203.789 187.502 203.789V203.792ZM187.502 -68.9789C110.778 -68.9789 48.3586 -8.11419 48.3586 66.6997C48.3586 141.514 110.778 202.378 187.502 202.378C264.226 202.378 326.645 141.514 326.645 66.6997C326.645 -8.11419 264.226 -68.9789 187.502 -68.9789ZM187.502 199.218C112.563 199.218 51.5965 139.771 51.5965 66.6997C51.5965 -6.3719 112.563 -65.8226 187.502 -65.8226C262.44 -65.8226 323.407 -6.37552 323.407 66.6961C323.407 139.768 262.44 199.215 187.502 199.215V199.218ZM187.502 -64.405C113.365 -64.405 53.0492 -5.59274 53.0492 66.6997C53.0492 138.992 113.365 197.804 187.502 197.804C261.638 197.804 321.954 138.992 321.954 66.6997C321.954 -5.59274 261.638 -64.405 187.502 -64.405ZM187.502 194.644C115.151 194.644 56.2871 137.25 56.2871 66.6997C56.2871 -3.85045 115.151 -61.2486 187.502 -61.2486C259.853 -61.2486 318.717 -3.85406 318.717 66.6961C318.717 137.246 259.853 194.641 187.502 194.641V194.644ZM187.502 -59.831C115.949 -59.831 57.7398 -3.07129 57.7398 66.6997C57.7398 136.471 115.953 193.23 187.502 193.23C259.051 193.23 317.264 136.471 317.264 66.6997C317.264 -3.07129 259.051 -59.8346 187.502 -59.8346V-59.831ZM187.502 190.07C117.738 190.07 60.9777 134.725 60.9777 66.6997C60.9777 -1.32539 117.734 -56.6747 187.502 -56.6747C257.269 -56.6747 314.026 -1.329 314.026 66.6961C314.026 134.721 257.269 190.067 187.502 190.067V190.07ZM187.502 -55.257C118.536 -55.257 62.4304 -0.546234 62.4304 66.6997C62.4304 133.946 118.536 188.656 187.502 188.656C256.467 188.656 312.573 133.946 312.573 66.6997C312.573 -0.546234 256.467 -55.2606 187.502 -55.2606V-55.257ZM187.502 185.5C120.322 185.5 65.6683 132.207 65.6683 66.7033C65.6683 1.19966 120.322 -52.1007 187.502 -52.1007C254.682 -52.1007 309.335 1.19245 309.335 66.6961C309.335 132.2 254.682 185.493 187.502 185.493V185.5ZM187.502 -50.6831C121.124 -50.6831 67.121 1.97522 67.121 66.6997C67.121 131.424 121.124 184.082 187.502 184.082C253.88 184.082 307.883 131.424 307.883 66.6997C307.883 1.97522 253.88 -50.6867 187.502 -50.6867V-50.6831ZM187.502 180.926C122.909 180.926 70.3589 129.685 70.3589 66.6997C70.3589 3.7139 122.909 -47.5267 187.502 -47.5267C252.095 -47.5267 304.645 3.7139 304.645 66.6997C304.645 129.685 252.095 180.926 187.502 180.926ZM187.502 -46.1091C123.711 -46.1091 71.8116 4.49667 71.8116 66.6997C71.8116 128.903 123.711 179.508 187.502 179.508C251.292 179.508 303.192 128.903 303.192 66.6997C303.192 4.49667 251.292 -46.1127 187.502 -46.1127V-46.1091ZM187.502 176.352C125.497 176.352 75.0495 127.164 75.0495 66.6997C75.0495 6.23535 125.493 -42.9528 187.502 -42.9528C249.511 -42.9528 299.954 6.23535 299.954 66.6997C299.954 127.164 249.507 176.352 187.502 176.352ZM187.502 -41.5351C126.295 -41.5351 76.5022 7.01812 76.5022 66.6997C76.5022 126.381 126.299 174.934 187.502 174.934C248.705 174.934 298.501 126.381 298.501 66.6997C298.501 7.01812 248.705 -41.5387 187.502 -41.5387V-41.5351ZM187.502 171.778C128.08 171.778 79.7401 124.639 79.7401 66.6997C79.7401 8.76041 128.08 -38.3788 187.502 -38.3788C246.923 -38.3788 295.264 8.76041 295.264 66.6997C295.264 124.639 246.923 171.778 187.502 171.778ZM187.502 -36.9612C128.882 -36.9612 81.1928 9.54318 81.1928 66.6997C81.1928 123.856 128.882 170.361 187.502 170.361C246.121 170.361 293.811 123.856 293.811 66.6997C293.811 9.54318 246.121 -36.9648 187.502 -36.9648V-36.9612ZM187.502 167.204C130.668 167.204 84.4307 122.117 84.4307 66.6997C84.4307 11.2819 130.668 -33.8049 187.502 -33.8049C244.336 -33.8049 290.573 11.2819 290.573 66.6997C290.573 122.117 244.336 167.204 187.502 167.204ZM187.502 -32.3872C131.47 -32.3872 85.8834 12.0646 85.8834 66.6997C85.8834 121.335 131.47 165.787 187.502 165.787C243.534 165.787 289.12 121.335 289.12 66.6997C289.12 12.0646 243.534 -32.3872 187.502 -32.3872ZM187.502 162.63C133.255 162.63 89.1213 119.596 89.1213 66.6997C89.1213 13.8033 133.255 -29.2309 187.502 -29.2309C241.749 -29.2309 285.882 13.8033 285.882 66.6997C285.882 119.596 241.749 162.63 187.502 162.63ZM187.502 -27.8133C134.053 -27.8133 90.574 14.5861 90.574 66.7033C90.574 118.82 134.057 161.216 187.502 161.216C240.947 161.216 284.43 118.817 284.43 66.7033C284.43 14.5897 240.947 -27.8133 187.502 -27.8133ZM187.502 158.056C135.842 158.056 93.8119 117.075 93.8119 66.6997C93.8119 16.3248 135.842 -24.6569 187.502 -24.6569C239.161 -24.6569 281.192 16.3248 281.192 66.6997C281.192 117.075 239.161 158.056 187.502 158.056ZM187.502 -23.2429C136.641 -23.2429 95.2646 17.1039 95.2646 66.6997C95.2646 116.295 136.641 156.642 187.502 156.642C238.363 156.642 279.739 116.295 279.739 66.6997C279.739 17.1039 238.363 -23.2429 187.502 -23.2429ZM187.502 153.482C138.426 153.482 98.5025 114.553 98.5025 66.6997C98.5025 18.8462 138.426 -20.083 187.502 -20.083C236.578 -20.083 276.501 18.8462 276.501 66.6997C276.501 114.553 236.578 153.482 187.502 153.482ZM187.502 -18.6689C139.228 -18.6689 99.9551 19.6254 99.9551 66.6997C99.9551 113.774 139.228 152.068 187.502 152.068C235.775 152.068 275.049 113.774 275.049 66.6997C275.049 19.6254 235.775 -18.6689 187.502 -18.6689ZM187.502 148.908C141.014 148.908 103.193 112.028 103.193 66.6997C103.193 21.3713 141.014 -15.509 187.502 -15.509C233.99 -15.509 271.811 21.3713 271.811 66.6997C271.811 112.028 233.99 148.908 187.502 148.908ZM187.502 -14.095C141.816 -14.095 104.646 22.1504 104.646 66.6997C104.646 111.249 141.816 147.494 187.502 147.494C233.188 147.494 270.358 111.249 270.358 66.6997C270.358 22.1504 233.188 -14.095 187.502 -14.095ZM187.502 144.334C143.601 144.334 107.884 109.507 107.884 66.6997C107.884 23.8927 143.601 -10.935 187.502 -10.935C231.403 -10.935 267.12 23.8927 267.12 66.6997C267.12 109.507 231.403 144.334 187.502 144.334ZM187.502 -9.52102C144.399 -9.52102 109.336 24.6719 109.336 66.6997C109.336 108.727 144.403 142.92 187.502 142.92C230.601 142.92 265.667 108.727 265.667 66.6997C265.667 24.6719 230.601 -9.52102 187.502 -9.52102ZM187.502 139.76C146.188 139.76 112.574 106.985 112.574 66.6997C112.574 26.4142 146.188 -6.36108 187.502 -6.36108C228.815 -6.36108 262.429 26.4142 262.429 66.6997C262.429 106.985 228.815 139.76 187.502 139.76ZM187.502 -4.94704C146.987 -4.94704 114.027 27.1933 114.027 66.6997C114.027 106.206 146.987 138.346 187.502 138.346C228.017 138.346 260.977 106.206 260.977 66.6997C260.977 27.1933 228.017 -4.94704 187.502 -4.94704ZM187.502 135.186C148.772 135.186 117.265 104.464 117.265 66.6997C117.265 28.9356 148.772 -1.78712 187.502 -1.78712C226.232 -1.78712 257.739 28.9356 257.739 66.6997C257.739 104.464 226.232 135.186 187.502 135.186ZM187.502 -0.373085C149.574 -0.373085 118.718 29.7148 118.718 66.6997C118.718 103.685 149.574 133.772 187.502 133.772C225.429 133.772 256.286 103.685 256.286 66.6997C256.286 29.7148 225.429 -0.373085 187.502 -0.373085ZM187.502 130.613C151.359 130.613 121.955 101.942 121.955 66.6997C121.955 31.4571 151.359 2.78685 187.502 2.78685C223.644 2.78685 253.048 31.4571 253.048 66.6997C253.048 101.942 223.644 130.613 187.502 130.613ZM187.502 4.20087C152.158 4.20087 123.408 32.2362 123.408 66.6997C123.408 101.163 152.162 129.198 187.502 129.198C222.842 129.198 251.599 101.163 251.599 66.6997C251.599 32.2362 222.846 4.20087 187.502 4.20087ZM187.502 126.042C153.947 126.042 126.646 99.4208 126.646 66.7033C126.646 33.9857 153.947 7.36081 187.502 7.36081C221.057 7.36081 248.358 33.9821 248.358 66.7033C248.358 99.4244 221.057 126.042 187.502 126.042ZM187.502 8.77483C154.745 8.77483 128.099 34.7613 128.099 66.6997C128.099 98.638 154.749 124.624 187.502 124.624C220.255 124.624 246.909 98.638 246.909 66.6997C246.909 34.7613 220.258 8.77483 187.502 8.77483ZM187.502 121.468C156.531 121.468 131.337 96.8994 131.337 66.6997C131.337 36.5 156.534 11.9312 187.502 11.9312C218.469 11.9312 243.667 36.5 243.667 66.6997C243.667 96.8994 218.469 121.468 187.502 121.468ZM187.502 13.3488C157.333 13.3488 132.786 37.2827 132.786 66.6997C132.786 96.1166 157.329 120.051 187.502 120.051C217.675 120.051 242.218 96.1166 242.218 66.6997C242.218 37.2827 217.675 13.3488 187.502 13.3488ZM187.502 116.894C159.118 116.894 136.027 94.3779 136.027 66.6997C136.027 39.0214 159.118 16.5051 187.502 16.5051C215.886 16.5051 238.976 39.0214 238.976 66.6997C238.976 94.3779 215.886 116.894 187.502 116.894ZM187.502 17.9228C159.92 17.9228 137.48 39.8042 137.48 66.6997C137.48 93.5951 159.92 115.477 187.502 115.477C215.084 115.477 237.527 93.5951 237.527 66.6997C237.527 39.8042 215.087 17.9228 187.502 17.9228ZM187.502 112.32C161.705 112.32 140.718 91.8565 140.718 66.6997C140.718 41.5429 161.705 21.0791 187.502 21.0791C213.298 21.0791 234.286 41.5429 234.286 66.6997C234.286 91.8565 213.298 112.32 187.502 112.32ZM187.502 22.4967C162.504 22.4967 142.167 42.3256 142.167 66.6997C142.167 91.0737 162.504 110.903 187.502 110.903C212.5 110.903 232.837 91.0737 232.837 66.6997C232.837 42.3256 212.5 22.4967 187.502 22.4967ZM187.502 107.746C164.289 107.746 145.408 89.3314 145.408 66.6997C145.408 44.0679 164.293 25.653 187.502 25.653C210.711 25.653 229.595 44.0679 229.595 66.6997C229.595 89.3314 210.711 107.746 187.502 107.746ZM187.502 27.0707C165.091 27.0707 146.857 44.8471 146.857 66.6997C146.857 88.5522 165.091 106.329 187.502 106.329C209.912 106.329 228.146 88.5522 228.146 66.6997C228.146 44.8471 209.912 27.0707 187.502 27.0707ZM187.502 103.172C166.877 103.172 150.099 86.81 150.099 66.6997C150.099 46.5894 166.877 30.227 187.502 30.227C208.127 30.227 224.905 46.5894 224.905 66.6997C224.905 86.81 208.123 103.172 187.502 103.172ZM187.502 31.6447C167.679 31.6447 151.548 47.3721 151.548 66.6997C151.548 86.0272 167.675 101.755 187.502 101.755C207.329 101.755 223.456 86.0272 223.456 66.6997C223.456 47.3721 207.329 31.6447 187.502 31.6447ZM187.502 98.5984C169.464 98.5984 154.79 84.2885 154.79 66.6997C154.79 49.1108 169.464 34.801 187.502 34.801C205.54 34.801 220.214 49.1108 220.214 66.6997C220.214 84.2885 205.54 98.5984 187.502 98.5984ZM187.502 36.215C170.262 36.215 156.239 49.89 156.239 66.6997C156.239 83.5093 170.262 97.1843 187.502 97.1843C204.741 97.1843 218.765 83.5093 218.765 66.6997C218.765 49.89 204.741 36.215 187.502 36.215ZM187.502 94.0244C172.051 94.0244 159.48 81.767 159.48 66.6997C159.48 51.6323 172.051 39.3749 187.502 39.3749C202.952 39.3749 215.523 51.6323 215.523 66.6997C215.523 81.767 202.952 94.0244 187.502 94.0244ZM187.502 40.789C172.85 40.789 160.929 52.4115 160.929 66.6997C160.929 80.9879 172.85 92.6104 187.502 92.6104C202.154 92.6104 214.074 80.9879 214.074 66.6997C214.074 52.4115 202.154 40.789 187.502 40.789ZM187.502 89.4504C174.635 89.4504 164.171 79.2456 164.171 66.6997C164.171 54.1537 174.639 43.9489 187.502 43.9489C200.365 43.9489 210.833 54.1537 210.833 66.6997C210.833 79.2456 200.365 89.4504 187.502 89.4504ZM187.502 45.3629C175.437 45.3629 165.62 54.9329 165.62 66.6997C165.62 78.4664 175.437 88.0364 187.502 88.0364C199.567 88.0364 209.384 78.4664 209.384 66.6997C209.384 54.9329 199.567 45.3629 187.502 45.3629ZM187.502 84.8765C177.222 84.8765 168.861 76.7205 168.861 66.6997C168.861 56.6788 177.222 48.5229 187.502 48.5229C197.781 48.5229 206.142 56.6788 206.142 66.6997C206.142 76.7205 197.781 84.8765 187.502 84.8765ZM187.502 49.9369C178.025 49.9369 170.31 57.458 170.31 66.6997C170.31 75.9414 178.021 83.4624 187.502 83.4624C196.983 83.4624 204.693 75.9414 204.693 66.6997C204.693 57.458 196.983 49.9369 187.502 49.9369Z"
+          fill={`url(#${svgUniqId.current})`}
+        />
+        <defs>
+          <radialGradient
+            id={svgUniqId.current}
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(187.5 66.3614) scale(187.5 182.982)"
+          >
+            <stop stopColor="white" stopOpacity="0.5" />
+            <stop offset="1" stopColor="white" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+      </svg>
+
+      <StyledContentWrapper>
+        <StyledTitle>{item.title}</StyledTitle>
+        <StyledDes>{item.subtitle}</StyledDes>
+        <StyledBtnView>
+          {t('home.seeMore')}
+          <img
+            src={chevronRightActive}
+            style={{
+              width: '16px',
+              height: '16px',
+              marginTop: '3px',
+              marginLeft: '5px',
+            }}
+          />
+        </StyledBtnView>
+      </StyledContentWrapper>
+      <StyledImageCard>
+        {isAmp ? (
+          <img alt={item.title} src={item.icon || '/images/avatar.jpg'} />
+        ) : (
+          <img
+            className="lazy"
+            alt={item.title}
+            data-src={item.icon || '/images/avatar.jpg'}
+          />
+        )}
+      </StyledImageCard>
+    </StyledItem>
+  )
+}
+
+export { Item }

package/raw/src/components/organisms/navigationV2/components/molecules/menuHealthToolsList/index.styled.tsx

@@ -0,0 +1,18 @@
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledContainer = styled.div`
+  &[data-is-display='false'] {
+    display: none;
+  }
+`
+export const StyledContainerItems = styled.div`
+  display: grid;
+
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  ${MediaQueries.tdDown} {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+`

package/raw/src/components/organisms/navigationV2/components/molecules/menuHealthToolsList/index.tsx

@@ -0,0 +1,65 @@
+import React, { useContext } from 'react'
+
+import { useTranslations } from 'hooks/useTranslations'
+import { LocaleType } from 'interfaces/types'
+import { STATIC_PAGES } from 'src/interfaces/constants'
+
+import { NavigationContext } from '../../../navigationContext'
+import { HealthTool, SiteType } from '../../../types'
+import { PopupWrapper } from '../../atoms/PopupWrapper'
+import { Categories } from '../Categories'
+import { ToolSpotlights } from './toolSpotlights'
+
+export type Props = {
+  healthTools?: HealthTool[]
+  spotlightHealthTools?: HealthTool[]
+  onClose?: () => void
+  isOpen?: boolean
+  locale: LocaleType
+  siteType: SiteType
+}
+
+const MenuHealthToolsList = ({
+  locale,
+  onClose,
+  isOpen,
+  siteType,
+  spotlightHealthTools = [],
+  healthTools = [],
+}: Props) => {
+  const { t } = useTranslations()
+  const {
+    configs: { statics },
+  } = useContext(NavigationContext)
+  const hrefViewMore = `${statics.HOME_PAGE_URL}${
+    locale === 'tl-PH' ? '/fil' : ''
+  }${STATIC_PAGES[locale]?.HEALTH_TOOLS || ''}`
+
+  return (
+    <PopupWrapper onClosePopup={onClose} isDisplay={isOpen} isNavMenu>
+      <Categories
+        hrefViewMore={hrefViewMore}
+        UrlFE={statics.HOME_PAGE_URL}
+        onClosePopup={onClose}
+        siteType={siteType}
+        headingTitle={t('home.navigator.menuItem.healthToolsList')}
+        titleBtnViewMore={t('home.navigator.menuItem.allHealthTools')}
+        menuItems={healthTools.map((t) => ({
+          name: t.title,
+          link: t.link
+            ? t.link.startsWith('http')
+              ? t.link
+              : `${statics.HOME_PAGE_URL}${t.link}`
+            : undefined,
+          thumbnail: t.icon,
+        }))}
+      />
+      <ToolSpotlights
+        spotlightHealthTools={spotlightHealthTools}
+        hrefViewMore={hrefViewMore}
+      />
+    </PopupWrapper>
+  )
+}
+
+export { MenuHealthToolsList }