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

package/raw/components/organisms/navigationV2/components/molecules/menuHealthToolsList/toolSpotlights.tsx

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

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

@@ -0,0 +1,358 @@
+import { ThemeProps } from 'misc/theme'
+import styled, { StyledComponent } from 'styled-components'
+
+import { Z_INDEX } from '../../../constants'
+import { StyledMenuPopupWrapper } from '../../atoms/PopupWrapper/index.styled'
+
+export const StyledMasterMenuContainer = styled.div`
+  position: fixed;
+  z-index: 201;
+  top: calc(var(--header-height, 64px) + 1px); // border 1px
+  width: 100vw;
+  height: calc(100vh - var(--header-height, 64px));
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0;
+  left: 0;
+
+  &[data-is-amp='true'] {
+    top: var(--header-height, 64px);
+  }
+
+  ${StyledMenuPopupWrapper} {
+    position: unset;
+  }
+`
+
+export const StyledCategoryButtonWrapper = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 72px;
+  align-items: flex-start;
+  justify-content: center;
+
+  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
+
+  .button-image {
+    stroke-color: blue;
+  }
+
+  &[data-site-type='marryBaby'] {
+    padding: 0 16px;
+    .category-button {
+      width: 100%;
+      height: 48px;
+    }
+  }
+`
+
+export const StyledCardSpecialty = styled.div`
+  display: flex;
+
+  &[data-card-array-no-margin-style='true'] {
+    margin: 8px 0;
+
+    & > div {
+      width: 0;
+      flex: 1;
+      margin: 0 -1px;
+    }
+  }
+
+  &[data-card-array-no-margin-style='false'] {
+    margin: 8px -4px;
+
+    & > div {
+      flex: 1;
+      margin: 0 4px;
+    }
+  }
+`
+
+export const StyledFakeTopAlignment = styled.div`
+  margin-top: 64px;
+`
+
+export const StyledCategoryFooter = styled.div`
+  padding: 24px 0;
+`
+
+export const StyledButtonContainerWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+
+  & > div:first-child {
+    margin-right: 8px;
+  }
+`
+
+// Desktop
+// export const StyledMenuPopupWrapper = styled.div`
+//   position: fixed;
+//   z-index: ${Z_INDEX.menuCategoryPopupWrapper};
+//   top: 69px;
+//   left: 0;
+//   width: 100%;
+//   height: 100%;
+//   align-items: center;
+//   background-color: transparent;
+//   &[data-is-display='false'] {
+//     display: none;
+//   }
+// `
+
+export const StyledMenuPopupContainer = styled.div`
+  z-index: ${Z_INDEX.menuCategoryPopupContainer};
+  align-items: center;
+
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral50};
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+  box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04),
+    0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
+    0px 0px 1px rgba(0, 0, 0, 0.04);
+`
+
+export const StyleMenuPopupContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 48px 0;
+`
+
+export const StyledHealthCategoriesContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  &[data-disabled-divider='false'] {
+    border-right: 1px solid #e4e8ec;
+  }
+`
+
+export const StyledCategoryItem = styled.div`
+  width: 20%;
+  padding-right: 16px;
+  margin-bottom: 12px;
+
+  & > a {
+    color: ${(props: ThemeProps) => props.theme.colors.gray800};
+    font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+    line-height: 22px;
+  }
+
+  & > a:hover {
+    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  }
+
+  .iconMenu {
+    display: flex;
+    align-items: center;
+
+    > .imageContainer {
+      display: flex;
+      width: 32px;
+      min-width: 32px;
+      align-items: center;
+      margin-right: 16px;
+    }
+  }
+`
+export const StyledSubCategoryItem = styled.div`
+  display: none;
+`
+
+export const StyledHealthToolItem = styled.div`
+  width: 33%;
+  height: 48px;
+  padding-right: 16px;
+  margin-bottom: 12px;
+
+  & > a {
+    display: flex;
+    align-items: center;
+    color: ${(props: ThemeProps) => props.theme.colors.gray800};
+    font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+    line-height: 22px;
+
+    & > :first-child {
+      margin-right: 16px;
+    }
+  }
+
+  & > a > p:hover {
+    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  }
+`
+
+export const StyledCategoryItemAll = styled.div`
+  display: flex;
+  align-items: center;
+
+  padding-right: 16px;
+  margin-bottom: 12px;
+  color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
+  line-height: 24px;
+
+  &[data-theme='marryBaby'] {
+    color: ${(props: ThemeProps) => props.theme.mbColors.pink};
+  }
+`
+
+export const StyledImageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  margin-left: 10px;
+`
+
+export const StyledCloseWrapper = styled.div`
+  position: absolute;
+  top: 16px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`
+
+export const StyledCloseButton: StyledComponent<
+  'div',
+  any,
+  { on?: string },
+  never
+> = styled.div`
+  display: block;
+`
+
+export const StyledAmpSidebar = styled.div`
+  .amp-sidebar {
+    width: 100vw;
+
+    background-color: ${(props: ThemeProps) => props.theme.colors.neutral50};
+  }
+
+  .categories__spotlight {
+    display: grid;
+    margin: 16px;
+    margin-bottom: 32px;
+    grid-gap: 8px;
+    grid-template-columns: 1fr 1fr;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .categoryCard {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
+    border-radius: 6px;
+    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+
+    svg {
+      margin-bottom: 4px;
+    }
+
+    &.active {
+      background: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+      box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06),
+        0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
+      color: white;
+    }
+
+    &:not(.active) {
+      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);
+    }
+  }
+
+  .amp__menu-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+
+    svg {
+      margin-left: 16px;
+    }
+
+    > div {
+      align-self: center;
+
+      &:nth-child(2) {
+        justify-self: center;
+      }
+    }
+  }
+
+  .logo {
+    margin: 22px 0;
+  }
+
+  .categories {
+    margin: 0 16px;
+
+    li {
+      display: block;
+      width: 100%;
+
+      + li {
+        border-top: 1px solid
+          ${(props: ThemeProps) => props.theme.colors.neutral100};
+      }
+
+      a {
+        display: block;
+        margin: 12px 0;
+        color: ${(props: ThemeProps) => props.theme.colors.gray800};
+        text-decoration: none;
+      }
+    }
+  }
+`
+
+export const StyledUnderLine = styled.div`
+  width: 20%;
+  height: 2px;
+
+  background-color: ${(props: ThemeProps) => props.theme.mbColors.pink};
+  border-radius: 2px;
+`
+
+export const StyledServiceListMenuSearchInputWrapper = styled.div`
+  padding: 16px;
+  padding-bottom: 12px;
+  .fake-search-input {
+    pointer-events: none;
+    input {
+      line-height: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+`
+export const StyledWrapper = styled.div`
+  display: block;
+  overflow-y: auto;
+  flex: 1;
+  padding-bottom: 16px;
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+`

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

@@ -0,0 +1,88 @@
+import React, { useContext } from 'react'
+
+import { LOCALIZED_SLUGS } from 'src/care/interfaces/constants'
+import { useTranslations } from 'src/hooks/useTranslations'
+import { STATIC_PAGES } from 'src/interfaces/constants'
+
+import { NavigationContext } from '../../../navigationContext'
+import { MenuItemType } from '../../../types'
+import { PopupWrapper } from '../../atoms/PopupWrapper'
+import { SearchInput } from '../../atoms/searchInput'
+import { Categories } from '../Categories'
+import { CareSpotlights } from '../menuCareList/careSpotlights'
+import { CategorySpotlights } from '../menuCategoriesList/categorySpotlights'
+import { CommunitySpotlights } from '../menuCommunitiesList/communitySpotlights'
+import { ToolSpotlights } from '../menuHealthToolsList/toolSpotlights'
+import {
+  StyledMasterMenuContainer,
+  StyledServiceListMenuSearchInputWrapper,
+  StyledWrapper,
+} from './index.styled'
+
+export type Props = {
+  menuItems: MenuItemType[]
+  closePopup?: () => void
+}
+
+const MenuServiceList = ({ closePopup, menuItems = [] }: Props) => {
+  const {
+    siteType,
+    ssrMenuContent: { categories, healthTools, care, together },
+    activeMenuService,
+    configs: { statics, enableSearchBar },
+    isAmp,
+    locale,
+  } = useContext(NavigationContext)
+  const { t } = useTranslations()
+
+  return (
+    <StyledMasterMenuContainer id={'categories-menu'} data-is-amp={isAmp}>
+      {enableSearchBar ? (
+        <StyledServiceListMenuSearchInputWrapper
+          onClick={() => {
+            window.location.href = `${statics.HOME_PAGE_URL}/search`
+          }}
+        >
+          <SearchInput />
+        </StyledServiceListMenuSearchInputWrapper>
+      ) : null}
+      <StyledWrapper>
+        <Categories
+          UrlFE={statics.HOME_PAGE_URL}
+          siteType={siteType}
+          titleBtnViewMore={t('home.navigator.menuItem.allCategories')}
+          menuItems={menuItems}
+          headingTitle={t('home.navigator.menuItem.healthCategories')}
+          onClosePopup={closePopup}
+        />
+        {activeMenuService === 'categories' && (
+          <CategorySpotlights
+            spotlightsList={categories?.spotlights || []}
+            hrefViewMore={`${statics.HOME_PAGE_URL}${
+              locale === 'tl-PH' ? '/fil' : ''
+            }/spotlight/`}
+          />
+        )}
+        {activeMenuService === 'tools' && (
+          <ToolSpotlights
+            spotlightHealthTools={healthTools?.spotlights}
+            hrefViewMore={`${statics.HOME_PAGE_URL}${
+              locale === 'tl-PH' ? '/fil' : ''
+            }${STATIC_PAGES[locale]?.HEALTH_TOOLS || ''}`}
+          />
+        )}
+        {activeMenuService === 'care' && (
+          <CareSpotlights
+            spotlights={care?.spotlights}
+            hrefViewMore={`${statics.CARE_URL_FE}/${LOCALIZED_SLUGS[locale]?.SPECIALTIES}`}
+          />
+        )}
+        {activeMenuService === 'together' && (
+          <CommunitySpotlights spotlights={together?.spotlights} />
+        )}
+      </StyledWrapper>
+    </StyledMasterMenuContainer>
+  )
+}
+
+export { MenuServiceList }

package/raw/components/organisms/navigationV2/components/molecules/navigationBar/hamburgerMenu.tsx

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react'
+
+import { MenuItemType } from 'components/organisms/navigationV2/types'
+import { DisplayWrapper } from 'src/components/atoms/displayWrapper'
+import { useCSSFocusPopupHelper } from 'src/hooks/useCSSFocusPopupHelper'
+
+import { TypeProps } from '.'
+import { NavigationContext } from '../../../navigationContext'
+import { ClosePopupIcon } from '../../atoms/ClosePopupIcon'
+import { HamburgerIcon } from '../../atoms/HamburgerIcon'
+import { MenuServiceList } from '../menuServiceList'
+import {
+  StyledMenuContainer,
+  StyledMenuIcon,
+  StyledMenuIconWrapper,
+} from './index.styled'
+
+export interface Props {
+  type: TypeProps
+  menuItems: MenuItemType[]
+}
+
+const HamburgerMenu = ({ type = 'home', menuItems }: Props) => {
+  const {
+    siteType,
+    isAmp,
+    configs: { enableSearchBar },
+  } = useContext(NavigationContext)
+  const {
+    containerRef,
+    onContainerFocus,
+    onContainerBlur,
+    onButtonMouseDown,
+    onClose,
+  } = useCSSFocusPopupHelper<HTMLDivElement>()
+
+  return (
+    <DisplayWrapper
+      mediaQueryKey="mbDown"
+      forceDisplay={isAmp ? true : undefined}
+    >
+      <StyledMenuContainer>
+        <StyledMenuIcon
+          ref={containerRef}
+          on="tap:discover-amp-lightbox"
+          role="button"
+          tabIndex={0}
+          onBlur={onContainerBlur}
+          onFocus={onContainerFocus}
+        >
+          <StyledMenuIconWrapper
+            onMouseDown={onButtonMouseDown}
+            data-event-category="Hamburger Navigation"
+            data-event-action="Click"
+            data-event-label="Hamburger Navigation URL"
+          >
+            <ClosePopupIcon className="mobile-close-icon" />
+            <HamburgerIcon
+              siteType={siteType}
+              type={type}
+              enableSearch={enableSearchBar}
+              className="mobile-hamburger-icon"
+            />
+          </StyledMenuIconWrapper>
+          {!isAmp && (
+            <MenuServiceList menuItems={menuItems} closePopup={onClose} />
+          )}
+        </StyledMenuIcon>
+      </StyledMenuContainer>
+    </DisplayWrapper>
+  )
+}
+
+export { HamburgerMenu }