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

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

@@ -0,0 +1,155 @@
+import { theme, ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledImageCard = styled.div`
+  height: 152px; // 120 + 16 * 2
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  overflow: hidden;
+  border-radius: 4px;
+  padding: 16px;
+  width: 100%;
+
+  .img-container {
+    width: 100%;
+    height: 100%;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: contain;
+  }
+  ${MediaQueries.tdDown} {
+    margin-bottom: 0;
+    padding: 0;
+    height: 100%;
+    position: unset;
+    width: 150px;
+  }
+  ${MediaQueries.mbDown} {
+    width: 80px;
+  }
+`
+export const StyledImageCardInner = styled.div`
+  background-color: #ffffff;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+`
+export const StyledBtnView = styled.div`
+  display: flex;
+  margin-top: 1rem;
+  align-items: center;
+  color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+  ${MediaQueries.tdDown} {
+    display: none;
+  }
+`
+export const StyledTitle = styled.p`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.6;
+  color: ${(props: ThemeProps) => props.theme.colors.gray800};
+  ${MediaQueries.tdDown} {
+    padding: 0;
+  }
+`
+export const StyledDes = styled.p`
+  font-size: 14px;
+  line-height: 1.6;
+  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} {
+    height: unset;
+    padding: 0;
+  }
+`
+
+export const StyledContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  z-index: 1;
+  ${MediaQueries.tdDown} {
+    gap: 4px;
+  }
+`
+
+export const StyledItem = styled.a`
+  text-decoration: none;
+  border-radius: 4px;
+  background: ${theme.colors.white};
+  position: relative;
+  overflow: hidden;
+  padding: 16px;
+  display: flex;
+  padding-top: 166px;
+  * {
+    pointer-events: none;
+  }
+  ${MediaQueries.tdUp} {
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06),
+      0px 0px 1px rgba(0, 0, 0, 0.04);
+    gap: 30px;
+    flex-direction: column;
+    a {
+      display: flex;
+      width: 100%;
+    }
+  }
+  ${MediaQueries.tdDown} {
+    padding-top: 16px;
+    a {
+      display: none;
+    }
+    grid-template-columns: 2fr 1fr;
+    gap: 10px;
+    display: grid;
+    max-height: 110px;
+    display: flex;
+    flex-direction: row-reverse;
+    > ${StyledContentWrapper} {
+      flex: 1;
+    }
+    img {
+      width: 150px;
+    }
+  }
+  ${MediaQueries.mbDown} {
+    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.04),
+      0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
+    display: flex;
+    flex-direction: row-reverse;
+    img {
+      width: 80px;
+      height: 80px;
+    }
+  }
+  ${MediaQueries.tdOnly} {
+    border: 1px solid ${theme.colors.neutral100};
+  }
+  .bg-svg {
+    width: 100%;
+    max-width: 245px;
+    height: 100%;
+    top: 0;
+    right: -40px;
+    position: absolute;
+    display: inline-block;
+  }
+`

package/raw/components/organisms/navigationV2/components/molecules/menuCareList/Item/index.tsx

@@ -0,0 +1,103 @@
+import React, { useContext, useRef } from 'react'
+
+import { chevronRightActive } from 'assets/svg'
+import { LOCALIZED_SLUGS } from 'care/interfaces/constants'
+import { Hospital } from 'src/care/interfaces/types'
+import { useTranslations } from 'src/hooks/useTranslations'
+
+import { NavigationContext } from '../../../../navigationContext'
+import {
+  StyledItem,
+  StyledBtnView,
+  StyledTitle,
+  StyledDes,
+  StyledContentWrapper,
+  StyledImageCard,
+  StyledImageCardInner,
+} from './index.styled'
+
+export type Props = {
+  item?: Hospital
+  index?: number
+}
+
+const Item = ({ item, index = 0 }: Props) => {
+  const { t } = useTranslations()
+  const {
+    locale,
+    configs: { statics },
+    isAmp,
+  } = useContext(NavigationContext)
+  const svgUniqId = useRef(`svg-${Math.random()}`)
+  if (!item) return null
+  const href = `${statics.CARE_URL_FE}/${LOCALIZED_SLUGS[locale]?.HOSPITAL}/${item.slug}-${item.id}`
+  return (
+    <StyledItem
+      key={item.id}
+      href={href}
+      data-event-category="Hamburger Navigation"
+      data-event-action={`Care Click ${index + 1}`}
+      data-event-label={href}
+    >
+      <svg
+        viewBox="0 0 216 190"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="bg-svg"
+      >
+        <path
+          style={{
+            stroke: 'unset',
+          }}
+          d="M228.502 190c-61.036 0-118.415-23.768-161.573-66.925C23.77 79.917 0 22.535 0-38.502 0-99.54 23.77-156.917 66.929-200.075 110.082-243.232 167.466-267 228.502-267c61.037 0 118.416 23.768 161.574 66.925C433.234-156.917 457-99.535 457-38.502S433.229 79.912 390.076 123.07c-43.158 43.158-100.542 66.925-161.574 66.925V190zm0-455.228c-60.563 0-117.501 23.583-160.326 66.407C25.352-156.002 1.77-99.062 1.77-38.502c0 60.56 23.586 117.5 66.406 160.323 42.825 42.824 99.763 66.407 160.326 66.407 60.564 0 117.501-23.583 160.322-66.407 42.824-42.824 66.406-99.759 66.406-160.323 0-60.565-23.586-117.5-66.406-160.324-42.825-42.819-99.763-66.407-160.322-66.407v.005zm0 449.516c-59.509 0-115.456-23.173-157.533-65.253C28.892 76.955 5.716 21.007 5.716-38.502c0-59.51 23.176-115.453 65.253-157.529 42.077-42.08 98.024-65.252 157.533-65.252 59.51 0 115.456 23.172 157.533 65.252 42.077 42.081 65.253 98.024 65.253 157.533 0 59.51-23.171 115.453-65.253 157.533-42.077 42.08-98.023 65.253-157.533 65.253zm0-443.8c-59.036 0-114.537 22.988-156.28 64.735C30.472-153.035 7.486-97.534 7.486-38.502c0 59.031 22.99 114.537 64.734 156.279 41.744 41.743 97.245 64.735 156.281 64.735 59.037 0 114.537-22.988 156.281-64.735 41.744-41.742 64.735-97.243 64.735-156.28 0-59.035-22.991-114.537-64.735-156.279-41.744-41.742-97.249-64.734-156.281-64.734v.004zm0 438.084c-57.982 0-112.492-22.578-153.492-63.576-41-41.003-63.578-95.517-63.578-153.498 0-57.981 22.577-112.491 63.578-153.489 41-40.999 95.51-63.576 153.492-63.576 57.983 0 112.492 22.577 153.493 63.576 41 40.998 63.577 95.508 63.577 153.489 0 57.98-22.577 112.49-63.577 153.489-41.001 40.998-95.51 63.575-153.493 63.575v.01zm0-432.367c-57.509 0-111.573 22.392-152.24 63.057-40.667 40.665-63.06 94.728-63.06 152.236 0 57.507 22.398 111.575 63.06 152.24 40.663 40.665 94.731 63.057 152.24 63.057 57.51 0 111.573-22.397 152.24-63.057 40.663-40.665 63.06-94.733 63.06-152.24 0-57.508-22.397-111.576-63.06-152.24-40.667-40.661-94.735-63.058-152.24-63.058v.005zm0 426.65c-56.455 0-109.528-21.982-149.447-61.903-39.92-39.921-61.902-92.993-61.902-149.45 0-56.457 21.987-109.528 61.902-149.449 39.915-39.921 92.992-61.903 149.447-61.903 56.456 0 109.528 21.982 149.448 61.903 39.919 39.921 61.901 92.992 61.901 149.45 0 56.456-21.987 109.528-61.901 149.449-39.92 39.921-92.997 61.903-149.448 61.903zm0-420.934c-55.982 0-108.613 21.802-148.2 61.385C40.718-147.111 18.92-94.482 18.92-38.502c0 55.98 21.802 108.613 61.384 148.196 39.586 39.583 92.217 61.385 148.199 61.385 55.983 0 108.614-21.802 148.2-61.385 39.586-39.583 61.383-92.217 61.383-148.196 0-55.98-21.802-108.614-61.383-148.196-39.586-39.583-92.217-61.385-148.2-61.385v.004zm0 415.217c-54.928 0-106.568-21.391-145.407-60.23-38.838-38.839-60.23-90.477-60.23-145.406s21.388-106.566 60.23-145.405c38.839-38.844 90.479-60.231 145.407-60.231 54.929 0 106.569 21.392 145.407 60.231 38.838 38.839 60.23 90.476 60.23 145.405 0 54.93-21.392 106.567-60.23 145.406-38.838 38.839-90.478 60.23-145.407 60.23zm0-409.5c-54.455 0-105.649 21.207-144.154 59.712-38.51 38.501-59.713 89.697-59.713 144.148 0 54.45 21.208 105.651 59.713 144.157 38.505 38.505 89.699 59.712 144.154 59.712 54.456 0 105.65-21.207 144.155-59.712 38.505-38.506 59.712-89.702 59.712-144.157 0-54.456-21.207-105.652-59.712-144.157-38.505-38.505-89.699-59.712-144.155-59.712v.009zm0 403.784c-53.401 0-103.604-20.797-141.366-58.554-37.762-37.76-58.555-87.965-58.555-141.361 0-53.396 20.798-103.605 58.555-141.366 37.762-37.766 87.965-58.558 141.366-58.558 53.402 0 103.605 20.796 141.366 58.553 37.762 37.761 58.555 87.966 58.555 141.366 0 53.4-20.793 103.605-58.555 141.362-37.761 37.761-87.964 58.553-141.366 58.553v.005zm0-398.068c-52.928 0-102.69 20.612-140.114 58.035-37.424 37.428-58.036 87.186-58.036 140.113 0 52.928 20.613 102.69 58.036 140.113 37.424 37.423 87.186 58.035 140.114 58.035 52.929 0 102.69-20.612 140.114-58.035 37.424-37.428 58.037-87.185 58.037-140.113 0-52.927-20.613-102.689-58.037-140.113-37.424-37.427-87.185-58.035-140.114-58.035zm0 392.352c-51.874 0-100.64-20.202-137.32-56.881-36.681-36.68-56.88-85.45-56.88-137.323 0-51.872 20.203-100.643 56.88-137.322 36.68-36.679 85.446-56.881 137.32-56.881 51.875 0 100.641 20.202 137.321 56.881 36.681 36.679 56.879 85.45 56.879 137.322S402.504 62.145 365.823 98.824c-36.68 36.68-85.446 56.882-137.321 56.882zm0-386.635c-51.401 0-99.726 20.017-136.073 56.362-36.347 36.346-56.361 84.67-56.361 136.074 0 51.403 20.018 99.723 56.36 136.069 36.348 36.345 84.673 56.362 136.074 56.362 51.402 0 99.726-20.017 136.074-56.362 36.347-36.346 56.361-84.67 56.361-136.07 0-51.398-20.019-99.722-56.361-136.073-36.348-36.345-84.672-56.362-136.074-56.362zm0 380.918c-103.933 0-188.488-84.553-188.488-188.487s84.555-188.491 188.488-188.491c103.934 0 188.489 84.553 188.489 188.487s-84.555 188.486-188.489 188.486v.005zm0-375.206c-102.956 0-186.718 83.759-186.718 186.72 0 102.96 83.762 186.719 186.718 186.719 102.956 0 186.718-83.76 186.718-186.72s-83.762-186.719-186.718-186.719zm0 369.489c-100.78 0-182.772-81.992-182.772-182.77s81.992-182.774 182.772-182.774c100.781 0 182.772 81.992 182.772 182.77s-81.991 182.77-182.772 182.77v.004zm0-363.773c-99.807 0-181.002 81.199-181.002 181.003 0 99.805 81.199 181.003 181.002 181.003 99.803 0 181.002-81.198 181.002-181.003 0-99.804-81.199-181.003-181.002-181.003zm0 358.057c-97.627 0-177.055-79.427-177.055-177.054s79.424-177.058 177.055-177.058c97.632 0 177.056 79.427 177.056 177.054S326.129 138.55 228.502 138.55v.005zm0-352.34c-96.654 0-175.285 78.633-175.285 175.286S131.848 136.79 228.502 136.79 403.788 58.155 403.788-38.498s-78.636-175.286-175.286-175.286zm0 346.624c-94.478 0-171.34-76.862-171.34-171.338 0-94.475 76.862-171.341 171.34-171.341 94.479 0 171.34 76.861 171.34 171.337 0 94.475-76.861 171.337-171.34 171.337v.005zm0-340.908c-93.501 0-169.569 76.069-169.569 169.57 0 93.502 76.068 169.57 169.569 169.57 93.501 0 169.57-76.068 169.57-169.57 0-93.501-76.069-169.57-169.57-169.57zm0 335.191c-91.325 0-165.623-74.296-165.623-165.62 0-91.325 74.298-165.626 165.623-165.626 91.325 0 165.624 74.296 165.624 165.62 0 91.325-74.299 165.621-165.624 165.621v.005zm0-329.474c-90.347 0-163.853 73.503-163.853 163.853 0 90.35 73.506 163.854 163.853 163.854 90.348 0 163.853-73.503 163.853-163.854 0-90.35-73.505-163.853-163.853-163.853zm0 323.757c-88.172 0-159.907-71.73-159.907-159.904 0-88.173 71.735-159.908 159.907-159.908 88.172 0 159.907 71.731 159.907 159.904s-71.735 159.904-159.907 159.904v.004zm0-318.041c-87.199 0-158.136 70.938-158.136 158.137 0 87.2 70.942 158.137 158.136 158.137 87.195 0 158.137-70.938 158.137-158.137s-70.942-158.141-158.137-158.141v.004zm0 312.325c-85.019 0-154.19-69.17-154.19-154.188 0-85.017 69.167-154.192 154.19-154.192 85.024 0 154.191 69.171 154.191 154.188 0 85.017-69.167 154.187-154.191 154.187v.005zm0-306.608c-84.046 0-152.42 68.377-152.42 152.42 0 84.044 68.374 152.421 152.42 152.421 84.046 0 152.421-68.377 152.421-152.42 0-84.044-68.375-152.426-152.421-152.426v.005zm0 300.896c-81.87 0-148.474-66.605-148.474-148.471s66.604-148.48 148.474-148.48c81.87 0 148.475 66.605 148.475 148.47 0 81.867-66.605 148.472-148.475 148.472v.009zm0-295.18c-80.892 0-146.704 65.812-146.704 146.704 0 80.892 65.812 146.704 146.704 146.704 80.893 0 146.704-65.812 146.704-146.704 0-80.892-65.811-146.708-146.704-146.708v.004zm0 289.464c-78.717 0-142.758-64.04-142.758-142.76 0-78.719 64.041-142.759 142.758-142.759 78.717 0 142.758 64.04 142.758 142.76 0 78.718-64.041 142.759-142.758 142.759zm0-283.747c-77.739 0-140.988 63.246-140.988 140.987 0 77.741 63.249 140.988 140.988 140.988 77.74 0 140.988-63.247 140.988-140.988S306.242-179.49 228.502-179.49v.005zm0 278.03C152.938 98.545 91.46 37.07 91.46-38.498c0-75.568 61.474-137.042 137.042-137.042 75.569 0 137.042 61.474 137.042 137.042 0 75.568-61.478 137.043-137.042 137.043zm0-272.314c-74.591 0-135.271 60.682-135.271 135.271 0 74.59 60.685 135.271 135.271 135.271 74.587 0 135.272-60.681 135.272-135.27 0-74.59-60.685-135.276-135.272-135.276v.004zm0 266.598c-72.415 0-131.325-58.915-131.325-131.327s58.91-131.326 131.325-131.326c72.415 0 131.326 58.914 131.326 131.326 0 72.412-58.911 131.327-131.326 131.327zm0-260.881c-71.437 0-129.555 58.121-129.555 129.554 0 71.434 58.118 129.555 129.555 129.555 71.438 0 129.556-58.121 129.556-129.555 0-71.433-58.118-129.559-129.556-129.559v.005zm0 255.164c-69.262 0-125.609-56.349-125.609-125.61 0-69.26 56.347-125.609 125.609-125.609s125.61 56.349 125.61 125.61c0 69.26-56.348 125.609-125.61 125.609zm0-249.448c-68.284 0-123.839 55.556-123.839 123.838 0 68.283 55.555 123.838 123.839 123.838 68.285 0 123.839-55.555 123.839-123.838 0-68.282-55.554-123.838-123.839-123.838zm0 243.732c-66.109 0-119.893-53.784-119.893-119.894 0-66.109 53.784-119.893 119.893-119.893 66.109 0 119.893 53.784 119.893 119.893 0 66.11-53.784 119.893-119.893 119.893zm0-238.015c-65.136 0-118.123 52.99-118.123 118.126 0 65.135 52.992 118.121 118.123 118.121 65.132 0 118.123-52.99 118.123-118.121S293.634-156.62 228.502-156.62zm0 232.298c-62.955 0-114.177-51.219-114.177-114.177 0-62.958 51.222-114.176 114.177-114.176 62.956 0 114.177 51.218 114.177 114.176S291.458 75.68 228.502 75.68zm0-226.586c-61.982 0-112.406 50.425-112.406 112.41 0 61.984 50.424 112.409 112.406 112.409 61.983 0 112.407-50.425 112.407-112.41 0-61.984-50.424-112.409-112.407-112.409zm0 220.87c-59.807 0-108.46-48.654-108.46-108.46 0-59.808 48.653-108.461 108.46-108.461 59.807 0 108.461 48.653 108.461 108.46 0 59.807-48.654 108.46-108.461 108.46zm0-215.154c-58.829 0-106.69 47.86-106.69 106.693s47.861 106.693 106.69 106.693c58.83 0 106.691-47.86 106.691-106.693S287.332-145.19 228.502-145.19zm0 209.437c-56.653 0-102.744-46.093-102.744-102.744 0-56.65 46.091-102.743 102.744-102.743 56.654 0 102.744 46.092 102.744 102.743 0 56.651-46.09 102.744-102.744 102.744zm0-203.72c-55.676 0-100.974 45.299-100.974 100.976 0 55.678 45.298 100.977 100.974 100.977s100.974-45.3 100.974-100.977c0-55.677-45.298-100.976-100.974-100.976zm0 198.003c-53.5 0-97.028-43.527-97.028-97.027s43.528-97.027 97.028-97.027c53.501 0 97.028 43.528 97.028 97.027 0 53.5-43.527 97.028-97.028 97.028zm0-192.287c-52.527 0-95.257 42.734-95.257 95.26s42.734 95.26 95.257 95.26 95.258-42.734 95.258-95.26-42.735-95.26-95.258-95.26zm0 186.571c-50.347 0-91.311-40.962-91.311-91.31 0-50.35 40.964-91.311 91.311-91.311 50.348 0 91.312 40.962 91.312 91.31 0 50.349-40.964 91.311-91.312 91.311zm0-180.854c-49.374 0-89.541 40.169-89.541 89.543 0 49.375 40.167 89.544 89.541 89.544 49.375 0 89.542-40.169 89.542-89.544 0-49.374-40.167-89.543-89.542-89.543zm0 175.137c-47.198 0-85.595-38.397-85.595-85.594 0-47.197 38.397-85.594 85.595-85.594 47.199 0 85.596 38.397 85.596 85.594 0 47.197-38.397 85.595-85.596 85.595zm0-169.421c-46.221 0-83.825 37.604-83.825 83.827 0 46.224 37.604 83.827 83.825 83.827 46.221 0 83.825-37.603 83.825-83.827 0-46.223-37.604-83.827-83.825-83.827zm0 163.705c-44.045 0-79.879-35.832-79.879-79.878s35.834-79.877 79.879-79.877c44.046 0 79.879 35.831 79.879 79.877 0 44.046-35.833 79.878-79.879 79.878zm0-157.988c-43.072 0-78.109 35.038-78.109 78.11s35.041 78.11 78.109 78.11 78.114-35.038 78.114-78.11-35.041-78.11-78.114-78.11zm0 152.276c-40.892 0-74.163-33.271-74.163-74.161s33.271-74.166 74.163-74.166c40.893 0 74.163 33.271 74.163 74.166 0 40.894-33.27 74.161-74.163 74.161zm0-146.56c-39.919 0-72.392 32.478-72.392 72.394 0 39.917 32.477 72.394 72.392 72.394s72.397-32.477 72.397-72.394c0-39.916-32.477-72.394-72.397-72.394zm0 140.844c-37.743 0-68.446-30.706-68.446-68.45 0-37.743 30.707-68.449 68.446-68.449s68.447 30.706 68.447 68.45c0 37.743-30.708 68.448-68.447 68.448zm0-135.127c-36.766 0-66.681 29.912-66.681 66.677 0 36.765 29.911 66.678 66.681 66.678 36.771 0 66.681-29.913 66.681-66.678s-29.91-66.677-66.681-66.677zm0 129.41c-34.59 0-62.73-28.14-62.73-62.733 0-34.592 28.14-62.732 62.73-62.732 34.591 0 62.731 28.14 62.731 62.732s-28.14 62.733-62.731 62.733zm0-123.694c-33.613 0-60.96 27.347-60.96 60.961s27.347 60.961 60.96 60.961 60.965-27.347 60.965-60.96c0-33.615-27.347-60.962-60.965-60.962zm0 117.978c-31.437 0-57.014-25.576-57.014-57.017 0-31.44 25.577-57.016 57.014-57.016s57.014 25.575 57.014 57.016-25.577 57.016-57.014 57.016zm0-112.261c-30.464 0-55.248 24.782-55.248 55.244 0 30.463 24.784 55.245 55.248 55.245 30.465 0 55.249-24.782 55.249-55.245 0-30.462-24.784-55.244-55.249-55.244zm0 106.544c-28.288 0-51.298-23.015-51.298-51.3 0-28.285 23.014-51.3 51.298-51.3 28.284 0 51.298 23.015 51.298 51.3 0 28.285-23.014 51.3-51.298 51.3zm0-100.828c-27.311 0-49.532 22.217-49.532 49.528s22.221 49.528 49.532 49.528c27.311 0 49.532-22.217 49.532-49.528 0-27.31-22.221-49.528-49.532-49.528zm0 95.112c-25.135 0-45.581-20.45-45.581-45.584 0-25.133 20.446-45.583 45.581-45.583 25.136 0 45.582 20.45 45.582 45.583 0 25.134-20.451 45.584-45.582 45.584zm0-89.395c-24.158 0-43.815 19.656-43.815 43.811 0 24.156 19.653 43.812 43.815 43.812 24.163 0 43.816-19.656 43.816-43.812 0-24.155-19.653-43.811-43.816-43.811zm0 83.678c-21.982 0-39.865-17.884-39.865-39.867 0-21.982 17.883-39.867 39.865-39.867 21.982 0 39.866 17.885 39.866 39.867 0 21.983-17.884 39.867-39.866 39.867zm0-77.966c-21.009 0-38.099 17.09-38.099 38.1 0 21.008 17.09 38.099 38.099 38.099 21.009 0 38.1-17.091 38.1-38.1 0-21.008-17.091-38.1-38.1-38.1zm0 72.25c-18.829 0-34.149-15.32-34.149-34.15 0-18.832 15.32-34.151 34.149-34.151s34.149 15.32 34.149 34.15c0 18.831-15.32 34.15-34.149 34.15zm0-66.534c-17.856 0-32.383 14.526-32.383 32.383 0 17.858 14.527 32.383 32.383 32.383s32.383-14.525 32.383-32.383c0-17.857-14.527-32.383-32.383-32.383zm0 60.817c-15.68 0-28.432-12.754-28.432-28.434 0-15.68 12.756-28.434 28.432-28.434 15.676 0 28.433 12.754 28.433 28.434 0 15.68-12.757 28.434-28.433 28.434zm0-55.1c-14.703 0-26.667 11.96-26.667 26.666s11.964 26.667 26.667 26.667c14.703 0 26.667-11.96 26.667-26.667 0-14.706-11.964-26.666-26.667-26.666zm0 49.383c-12.527 0-22.716-10.193-22.716-22.717s10.189-22.717 22.716-22.717c12.527 0 22.717 10.193 22.717 22.717s-10.19 22.717-22.717 22.717zm0-43.667c-11.549 0-20.95 9.4-20.95 20.95 0 11.55 9.396 20.95 20.95 20.95 11.554 0 20.951-9.4 20.951-20.95 0-11.55-9.397-20.95-20.951-20.95z"
+          fill={`url(#${svgUniqId.current})`}
+        />
+        <defs>
+          <radialGradient
+            id={svgUniqId.current}
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(228.5 -38.9205) scale(228.5 228.689)"
+          >
+            <stop stopColor="#E4E8EC" stopOpacity="0.5" />
+            <stop offset="1" stopColor="#E4E8EC" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+      </svg>
+
+      <StyledImageCard>
+        <StyledImageCardInner>
+          {isAmp ? (
+            <img alt={item.name} src={item.logo || '/images/avatar.jpg'} />
+          ) : (
+            <img
+              className="lazy"
+              alt={item.name}
+              data-src={item.logo || '/images/avatar.jpg'}
+            />
+          )}
+        </StyledImageCardInner>
+      </StyledImageCard>
+      <StyledContentWrapper>
+        <StyledTitle>{item.name}</StyledTitle>
+        <StyledDes>{item.description}</StyledDes>
+        <StyledBtnView>
+          {t('home.seeMore')}
+          <img
+            src={chevronRightActive}
+            style={{
+              width: '16px',
+              height: '16px',
+              marginTop: '3px',
+              marginLeft: '5px',
+            }}
+          />
+        </StyledBtnView>
+      </StyledContentWrapper>
+    </StyledItem>
+  )
+}
+
+export { Item }

package/raw/components/organisms/navigationV2/components/molecules/menuCareList/careSpotlights.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Hospital } from 'src/care/interfaces/types'
+import { useTranslations } from 'src/hooks/useTranslations'
+
+import { CommunityIcon } from '../../../../../../assets/svg'
+import { SpotlightNoData } from '../spotlightNoData'
+import { Spotlights } from '../Spotlights'
+import { StyledContainerItems } from './index.styled'
+import { Item } from './Item'
+
+export type Props = {
+  spotlights: Hospital[]
+  hrefViewMore?: string
+}
+
+const CareSpotlights = ({ spotlights = [], hrefViewMore }: Props) => {
+  const { t } = useTranslations()
+  return (
+    <Spotlights title={t('home.navigator.menu.spotlightHospitals')}>
+      {spotlights.length !== 0 ? (
+        <StyledContainerItems>
+          {spotlights?.slice(0, 3).map((s, index) => (
+            <Item key={index} index={index} item={s} />
+          ))}
+        </StyledContainerItems>
+      ) : (
+        <SpotlightNoData
+          title={t('home.navigator.menu.care.noDatas.title')}
+          description={t('home.navigator.menu.care.noDatas.description')}
+          link={hrefViewMore}
+          cta={t('home.navigator.menu.care.noDatas.cta')}
+          icon={CommunityIcon}
+        />
+      )}
+    </Spotlights>
+  )
+}
+
+export { CareSpotlights }

package/raw/components/organisms/navigationV2/components/molecules/menuCareList/index.styled.tsx

@@ -0,0 +1,29 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries, spLayout, pcLayout } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledContainer = styled.div`
+  & > a:not(:last-child) > div {
+    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 StyledContainerItems = styled.div`
+  display: grid;
+
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+
+  ${MediaQueries.tdDown} {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`

package/raw/components/organisms/navigationV2/components/molecules/menuCareList/index.tsx

@@ -0,0 +1,65 @@
+import React, { useContext } from 'react'
+
+import { LOCALIZED_SLUGS } from 'care/interfaces/constants'
+import { useTranslations } from 'hooks/useTranslations'
+import { Hospital } from 'src/care/interfaces/types'
+
+import { NavigationContext } from '../../../navigationContext'
+import { SiteType, Specialty } from '../../../types'
+import { getCareSearchUrl } from '../../../utils'
+import { PopupWrapper } from '../../atoms/PopupWrapper'
+import { Categories } from '../Categories'
+import { CareSpotlights } from './careSpotlights'
+
+export type Props = {
+  careSpecialties: Specialty[]
+  spotlights: Hospital[]
+  onClose?: () => void
+  isOpen?: boolean
+  siteType: SiteType
+}
+
+const MenuCareList = ({
+  careSpecialties = [],
+  isOpen,
+  onClose,
+  siteType,
+  spotlights = [],
+}: Props) => {
+  const { t } = useTranslations()
+  const {
+    locale,
+    configs: { statics },
+  } = useContext(NavigationContext)
+  const hrefViewMore = `${statics.CARE_URL_FE}/${LOCALIZED_SLUGS[locale]?.SPECIALTIES}`
+
+  return (
+    <PopupWrapper onClosePopup={onClose} isDisplay={isOpen} isNavMenu>
+      <Categories
+        headingTitle={t('home.navigator.menuItem.specialties')}
+        hrefViewMore={hrefViewMore}
+        UrlFE={statics.CARE_URL_FE}
+        onClosePopup={onClose}
+        siteType={siteType}
+        titleBtnViewMore={t('home.navigator.menuItem.allSpecialties')}
+        menuItems={
+          careSpecialties?.map((specialty) => {
+            if (!specialty) return {}
+            return {
+              name: String(specialty.name) || '',
+              link: getCareSearchUrl({
+                type: 'DOCTOR',
+                specialtySlug: specialty.slug,
+                locale,
+              }),
+              thumbnail: specialty?.thumbnail || '',
+            }
+          }) || []
+        }
+      />
+      <CareSpotlights spotlights={spotlights} hrefViewMore={hrefViewMore} />
+    </PopupWrapper>
+  )
+}
+
+export { MenuCareList }

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

@@ -0,0 +1,46 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledItem = styled.a`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  * {
+    pointer-events: none;
+  }
+`
+export const StyledImageCard = styled.div`
+  border-radius: 5px;
+  display: block;
+  overflow: hidden;
+  padding-top: 140%;
+  width: 100%;
+  position: relative;
+  height: 0;
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    top: 0;
+    left: 0;
+  }
+  ${MediaQueries.tdDown} {
+    width: 72px;
+    padding-top: 100px;
+  }
+`
+export const StyledTitle = styled.p`
+  font-size: 16px;
+  font-weight: 400;
+  padding: 4px 15px;
+  line-height: 1.4;
+  color: ${(props: ThemeProps) => props.theme.colors.gray800};
+  flex: 1;
+  ${MediaQueries.tdUp} {
+    display: none;
+  }
+`

package/raw/components/organisms/navigationV2/components/molecules/menuCategoriesList/Item/index.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react'
+
+import { NavigationContext } from 'src/components/organisms/navigationV2/navigationContext'
+
+import { StyledItem, StyledTitle, StyledImageCard } from './index.styled'
+export type dataType = {
+  id: number
+  link: string
+  title: string
+  banner: string
+  description?: string
+  btnText?: string
+}
+
+export type Props = {
+  index?: number
+  item?: dataType
+}
+
+const Item = ({ item, index = 0 }: Props) => {
+  if (!item) return null
+  const { isAmp } = useContext(NavigationContext)
+  return (
+    <StyledItem
+      key={item.id}
+      href={item.link}
+      data-event-category="Hamburger Navigation"
+      data-event-action={`Spotlight Click ${index + 1}`}
+      data-event-label={item.link}
+    >
+      <StyledImageCard>
+        {isAmp ? (
+          <img
+            alt={item.title}
+            src={item.banner || '/images/notFound-min-small.jpg'}
+          />
+        ) : (
+          <img
+            className="lazy"
+            alt={item.title}
+            data-src={item.banner || '/images/notFound-min-small.jpg'}
+          />
+        )}
+      </StyledImageCard>
+      <StyledTitle>{item.title}</StyledTitle>
+    </StyledItem>
+  )
+}
+
+export { Item }

package/raw/components/organisms/navigationV2/components/molecules/menuCategoriesList/categorySpotlights.tsx

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react'
+
+import { useTranslations } from 'src/hooks/useTranslations'
+
+import { SpotlightIcon } from '../../../../../../assets/svg'
+import { NavigationContext } from '../../../navigationContext'
+import { SpotlightSummary } from '../../../types'
+import { SpotlightNoData } from '../spotlightNoData'
+import { Spotlights } from '../Spotlights'
+import { StyledContainerItems } from './index.styled'
+import { Item } from './Item'
+
+export type Props = {
+  spotlightsList: SpotlightSummary[]
+  hrefViewMore?: string
+}
+
+const CategorySpotlights = ({ spotlightsList = [], hrefViewMore }: Props) => {
+  const { t } = useTranslations()
+  const {
+    configs: { statics },
+  } = useContext(NavigationContext)
+
+  return (
+    <Spotlights
+      title={t('home.navigator.menu.spotlights')}
+      viewMore={t('home.navigator.menu.spotlights.seeAll')}
+      link={hrefViewMore}
+      dataEventAction="Spotlight See More Click"
+    >
+      {spotlightsList.length !== 0 ? (
+        <StyledContainerItems>
+          {spotlightsList?.slice(0, 4).map((spotlight, index) => (
+            <Item
+              key={index}
+              index={index}
+              item={{
+                id: spotlight.id,
+                link: statics.HOME_PAGE_URL + spotlight.permalink,
+                title: spotlight.name,
+                banner: spotlight.image,
+              }}
+            />
+          ))}
+        </StyledContainerItems>
+      ) : (
+        <SpotlightNoData
+          title={t('home.navigator.menu.category.noDatas.title')}
+          description={t('home.navigator.menu.category.noDatas.description')}
+          link={hrefViewMore}
+          cta={t('home.navigator.menu.category.noDatas.cta')}
+          icon={SpotlightIcon}
+        />
+      )}
+    </Spotlights>
+  )
+}
+
+export { CategorySpotlights }

package/raw/components/organisms/navigationV2/components/molecules/menuCategoriesList/index.styled.tsx

@@ -0,0 +1,30 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries, pcLayout, spLayout } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledContainer = styled.div`
+  &[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(4, 1fr);
+  gap: 24px;
+  ${MediaQueries.tdDown} {
+    gap: 12px;
+    grid-template-columns: 1fr;
+  }
+`

package/raw/components/organisms/navigationV2/components/molecules/menuCategoriesList/index.tsx

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react'
+
+import { useTranslations } from 'hooks/useTranslations'
+
+import { NavigationContext } from '../../../navigationContext'
+import { Category, SiteType, SpotlightSummary } from '../../../types'
+import { PopupWrapper } from '../../atoms/PopupWrapper'
+import { Categories } from '../Categories'
+import { CategorySpotlights } from './categorySpotlights'
+
+export type Props = {
+  categories: Category[]
+  onClose?: () => void
+  isOpen?: boolean
+  siteType: SiteType
+  spotlightsList: SpotlightSummary[]
+}
+
+const MenuCategoriesList = ({
+  categories = [],
+  spotlightsList = [],
+  onClose,
+  isOpen,
+  siteType = 'helloSites',
+}: Props) => {
+  const { t } = useTranslations()
+  const {
+    locale,
+    configs: { statics },
+  } = useContext(NavigationContext)
+
+  return (
+    <PopupWrapper onClosePopup={onClose} isDisplay={isOpen} isNavMenu>
+      <Categories
+        hrefViewMore={`${statics.HOME_PAGE_URL}${
+          locale === 'tl-PH' ? '/fil' : ''
+        }/categories/`}
+        UrlFE={statics.HOME_PAGE_URL}
+        onClosePopup={onClose}
+        siteType={siteType}
+        titleBtnViewMore={t('home.navigator.menuItem.allCategories')}
+        menuItems={
+          categories?.map((cat) => {
+            if (!cat) return {}
+            return {
+              name: cat.displayName || null,
+              link: cat?.permalink || '/',
+              thumbnail: cat.iconUrl || null,
+            }
+          }) || []
+        }
+        headingTitle={t('home.navigator.menuItem.healthCategories')}
+      />
+      <CategorySpotlights
+        spotlightsList={spotlightsList}
+        hrefViewMore={`${statics.HOME_PAGE_URL}${
+          locale === 'tl-PH' ? '/fil' : ''
+        }/spotlight/`}
+      />
+    </PopupWrapper>
+  )
+}
+
+export { MenuCategoriesList }