@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

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

@@ -1,41 +0,0 @@
-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/src/components/organisms/navigationV2/components/molecules/menuServiceList/index.styled.tsx

@@ -1,358 +0,0 @@
-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/src/components/organisms/navigationV2/components/molecules/menuServiceList/index.tsx

@@ -1,88 +0,0 @@
-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/src/components/organisms/navigationV2/components/molecules/navigationBar/hamburgerMenu.tsx

@@ -1,74 +0,0 @@
-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 }