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

package/src/components/organisms/navigationV2/components/molecules/navigationBar/index.styled.tsx

@@ -1,214 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'src/misc/utils'
-import styled from 'styled-components'
-
-import { Z_INDEX } from '../../../constants'
-import { StyledHeaderMenuItem } from '../../atoms/ItemNav/index.styled'
-
-export const StyledMenuContainer = styled.header`
-  display: flex;
-  align-items: center;
-`
-
-export const StyledMenuIcon = styled.div<{ on?: string }>`
-  margin-right: 8px;
-  &[data-event-category] > * {
-    pointer-events: none;
-  }
-  .mobile-close-icon {
-    display: none;
-  }
-  &:focus-within {
-    .mobile-close-icon {
-      display: block;
-    }
-    .mobile-hamburger-icon {
-      display: none;
-    }
-    #categories-menu {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-  #categories-menu {
-    transition: transform 0.1s, opacity 0.1s;
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-`
-
-export const StyledMenuIconWrapper = styled.div`
-  cursor: pointer;
-  > * {
-    pointer-events: none;
-  }
-`
-
-export const StyledHeaderWrapper = styled.div`
-  position: fixed;
-  z-index: 201;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  align-items: center;
-
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-
-  transition: height 0.3s, transform 0.3s;
-
-  &[data-site-type='helloSites'] {
-    border-bottom: 1px solid
-      ${(props: ThemeProps) => props.theme.colors.neutral100};
-  }
-
-  &[data-marry-baby-tone='pink'] {
-    background-color: ${(props: ThemeProps) => props.theme.mbColors.lightPink};
-  }
-
-  &[data-is-amp='true'] {
-    position: relative;
-    transform: translateY(0);
-    transition: transform 0.5s;
-  }
-
-  ${MediaQueries.mbUp} {
-    &[data-sitewide-banner-shown='true'][data-collapsed='true'] {
-      transform: translateY(-64px);
-    }
-  }
-  ${MediaQueries.mbDown} {
-    &[data-site-type='marryBaby'] {
-      border-bottom: none;
-    }
-
-    &[data-fixed-bar='true'] {
-      position: fixed;
-      transform: translateY(0);
-    }
-
-    &[data-fixed-bar='false'] {
-      position: absolute;
-    }
-
-    &[data-collapsed='true'] {
-      transform: translateY(-100%);
-      transition: transform 0.5s;
-    }
-    &[data-collapsed='false'] {
-      transform: translateY(0);
-      transition: transform 0.5s;
-    }
-
-    .top-bar-header {
-      line-height: normal;
-    }
-
-    &[data-header-type='home'] {
-      position: fixed;
-      z-index: ${Z_INDEX.headerContainerHome};
-    }
-
-    &[data-header-type='popup'] {
-      position: absolute;
-      z-index: ${Z_INDEX.headerContainerPopup};
-    }
-
-    &[data-header-type='popup-sub-level'] {
-      position: absolute;
-      z-index: ${Z_INDEX.headerContainerPopupSUbLevel};
-    }
-
-    &[data-is-displayed='false'] {
-      //display: none;
-      visibility: hidden;
-    }
-
-    &[data-is-amp='true'] {
-      position: relative;
-      transform: translateY(0);
-      transition: transform 0.5s;
-    }
-  }
-`
-
-export const StyledHeader = styled.div`
-  display: flex;
-  height: 100%;
-  align-items: center;
-
-  justify-content: space-between;
-  padding: 0 2rem;
-  height: 69px;
-  ${MediaQueries.pcDown} {
-    padding: 0 1rem;
-  }
-
-  ${MediaQueries.mbDown} {
-    position: relative;
-    height: 64px;
-    background: white;
-    gap: 1rem;
-  }
-`
-
-export const StyledLeftGroup = styled.div`
-  display: flex;
-  align-items: center;
-  height: 100%;
-  gap: 24px;
-  ${MediaQueries.pcDown} {
-    gap: 16px;
-  }
-`
-
-export const StyledLogoWrapper = styled.div``
-
-export const StyledRightGroup = styled.div`
-  display: flex;
-  align-items: center;
-  height: 100%;
-  flex-shrink: 0.6;
-  ${StyledHeaderMenuItem} {
-    gap: 2px;
-    ${MediaQueries.pcUp} {
-      padding: 0 12px;
-    }
-    ${MediaQueries.pcDown} {
-      padding: 0 6px;
-    }
-    ${MediaQueries.mbDown} {
-      display: none;
-    }
-    a {
-      text-decoration: none;
-    }
-  }
-`
-
-export const StyledServiceListMenuSearchInputWrapper = styled.div`
-  .fake-search-input {
-    pointer-events: none;
-    input {
-      line-height: 20px;
-      padding-top: 10px;
-      padding-bottom: 10px;
-    }
-  }
-`
-
-export const StyledProfileNavGroup = styled.div`
-  margin-left: 16px;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-shrink: 0;
-  ${MediaQueries.pcDown} {
-    margin-left: 8px;
-    gap: 8px;
-  }
-  ${MediaQueries.mbDown} {
-    margin-left: 12px;
-    gap: 10px;
-  }
-`

package/src/components/organisms/navigationV2/components/molecules/navigationBar/index.tsx

@@ -1,283 +0,0 @@
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-  useContext,
-} from 'react'
-
-import { SehatBadge } from 'assets/svg'
-import { Logo, TypeProps as LogoTypeProps } from 'components/atoms/logo'
-import { LOCALE_SPECS } from 'components/organisms/navigationLayout/constants'
-import { MenuItemType } from 'components/organisms/navigationV2/types'
-import { useTranslations } from 'hooks/useTranslations'
-import { throttle } from 'lodash'
-import { DisplayWrapper } from 'src/components/atoms/displayWrapper'
-import { lazyLoadInstance } from 'src/misc/lazyLoad'
-
-import { NavigationBookingButton } from '../../../../navigationBookingButton'
-import { NavigationContext } from '../../../navigationContext'
-import { ItemMenu } from '../../atoms/ItemNav'
-import { SearchInput } from '../../atoms/searchInput'
-import { MenuCareList } from '../menuCareList'
-import { MenuCategoriesList } from '../menuCategoriesList'
-import { MenuCommunitiesList } from '../menuCommunitiesList'
-import { MenuHealthToolsList } from '../menuHealthToolsList'
-import { HamburgerMenu } from './hamburgerMenu'
-import {
-  StyledHeader,
-  StyledHeaderWrapper,
-  StyledLeftGroup,
-  StyledLogoWrapper,
-  StyledProfileNavGroup,
-  StyledRightGroup,
-} from './index.styled'
-import { NavigationProfileButtonWithContext } from './navigationProfileButtonWithContext'
-
-export type TypeProps = 'popup' | 'popup-sub-level' | 'home'
-
-export interface Props {
-  onTopBarAppears: (b: boolean) => void
-  type: TypeProps
-  languageMenu?: JSX.Element
-  menuItems: MenuItemType[]
-  sitewideBannerClosed?: boolean
-  setSitewideBannerClosed?: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-const NavigationBar = ({
-  onTopBarAppears,
-  type = 'home',
-  languageMenu,
-  menuItems,
-  setSitewideBannerClosed,
-  sitewideBannerClosed,
-}: Props) => {
-  const {
-    siteType,
-    isAmp,
-    isMobile = false,
-    locale,
-    sitewideBanner,
-    sitewideBannerShown = true,
-    sponsorComponent,
-    onBookingClick,
-    currentUrl,
-    ssrMenuContent: { categories, healthTools, care, together },
-    configs: { statics, enableNavCareBooking, enableSearchBar },
-  } = useContext(NavigationContext)
-  const { t } = useTranslations()
-  const { SSO_URL, HOME_PAGE_URL } = statics
-  const isSponsored = !!sponsorComponent
-
-  const [isCollapsed, setIsCollapsed] = useState(false)
-  const scrollY = useRef(47)
-  const collapsedMenu = useRef<boolean>(false)
-
-  const goToLogin = () => {
-    const currentLocation = window.location.href
-    window.location.href = SSO_URL
-      ? `${SSO_URL}?returnUrl=${currentLocation}`
-      : currentLocation
-  }
-
-  const logoType =
-    siteType === 'helloSites'
-      ? (LOCALE_SPECS[locale]?.LOGO_TYPE as LogoTypeProps)
-      : siteType
-  const isBrowser = typeof window !== 'undefined'
-
-  const scrolling = useCallback(
-    throttle(() => {
-      if (type === 'home') {
-        if (isBrowser) {
-          if (
-            window.scrollY > scrollY.current &&
-            window.scrollY > 64 &&
-            !collapsedMenu.current
-          ) {
-            collapsedMenu.current = true
-            setIsCollapsed(true)
-          }
-
-          if (window.scrollY < scrollY.current && collapsedMenu.current) {
-            collapsedMenu.current = false
-            setIsCollapsed(false)
-          }
-
-          if (window.scrollY >= 0) scrollY.current = window.scrollY
-        }
-      }
-    }, 200),
-    [],
-  )
-
-  useEffect(() => {
-    onTopBarAppears?.(!isCollapsed)
-  }, [isCollapsed])
-
-  useEffect(() => {
-    window.addEventListener('scroll', scrolling, { passive: true })
-    return () => {
-      window.removeEventListener('scroll', scrolling)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (isMobile) scrolling()
-  }, [isMobile])
-
-  useEffect(() => {
-    lazyLoadInstance?.update(document.querySelectorAll('#site-header img'))
-  }, [
-    categories?.items?.length,
-    healthTools?.items?.length,
-    care?.items?.length,
-    together?.items?.length,
-  ])
-
-  const isShowingSiteWideBanner =
-    sitewideBannerShown && !!sitewideBanner && !sitewideBannerClosed
-
-  return (
-    <StyledHeaderWrapper
-      data-site-type={siteType}
-      data-sponsored={isSponsored}
-      data-sitewide-banner-shown={isShowingSiteWideBanner}
-      // merge Mobile props
-      data-header-type={type}
-      data-collapsed={isCollapsed}
-      data-with-search-input={type !== 'popup-sub-level'}
-      data-is-displayed={true}
-      data-is-amp={isAmp}
-      id="site-header"
-    >
-      {sitewideBanner
-        ? !React.isValidElement(sitewideBanner)
-          ? sitewideBanner
-          : React.cloneElement<{
-              isCollapsed?: boolean
-              isAmp?: boolean
-              isMobile?: boolean
-              setBannerClosed?: (v: boolean) => void
-            }>(sitewideBanner, {
-              isCollapsed,
-              setBannerClosed: setSitewideBannerClosed,
-              isAmp,
-              isMobile,
-            })
-        : null}
-      <StyledHeader>
-        <StyledLeftGroup>
-          <HamburgerMenu menuItems={menuItems} type={type} />
-          <a href={HOME_PAGE_URL}>
-            <StyledLogoWrapper>
-              <Logo
-                style={{
-                  display: 'flex',
-                }}
-                type={logoType}
-                height="27px"
-                width="121px"
-                badge={
-                  locale === 'id-ID' &&
-                  (isAmp ? (
-                    <amp-img src={SehatBadge} width="56" height="23" />
-                  ) : (
-                    <img src={SehatBadge} width="56" height="23" />
-                  ))
-                }
-              />
-            </StyledLogoWrapper>
-          </a>
-          {enableSearchBar && !isAmp && (
-            <DisplayWrapper mediaQueryKey="mbUp">
-              <SearchInput />
-            </DisplayWrapper>
-          )}
-        </StyledLeftGroup>
-        <StyledRightGroup>
-          {!isAmp && (
-            <DisplayWrapper
-              mediaQueryKey="mbUp"
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                height: '100%',
-              }}
-            >
-              {menuItems?.map((menuItem, index) => (
-                <ItemMenu
-                  key={index}
-                  item={menuItem}
-                  menu={
-                    menuItem.popupType === 'categories' ? (
-                      <MenuCategoriesList
-                        categories={categories?.items}
-                        spotlightsList={categories?.spotlights}
-                        siteType={siteType}
-                      />
-                    ) : menuItem.popupType === 'tools' ? (
-                      <MenuHealthToolsList
-                        locale={locale}
-                        healthTools={healthTools?.items}
-                        spotlightHealthTools={healthTools?.spotlights}
-                        siteType={siteType}
-                      />
-                    ) : menuItem.popupType === 'together' ? (
-                      <MenuCommunitiesList
-                        communities={together?.items}
-                        spotlights={together?.spotlights}
-                        siteType={siteType}
-                      />
-                    ) : menuItem.popupType === 'care' ? (
-                      <MenuCareList
-                        careSpecialties={care?.items}
-                        siteType={siteType}
-                        spotlights={care?.spotlights}
-                      />
-                    ) : null
-                  }
-                />
-              ))}
-            </DisplayWrapper>
-          )}
-          <StyledProfileNavGroup>
-            {enableNavCareBooking && !isAmp && (
-              <DisplayWrapper
-                mediaQueryKey="mbUp"
-                forceDisplay={isAmp ? false : undefined}
-              >
-                <NavigationBookingButton
-                  careUrlFe={statics.CARE_URL_FE}
-                  currentUrl={currentUrl}
-                  btnName={t('login.booking')}
-                  onCareHeaderClick={onBookingClick}
-                />
-              </DisplayWrapper>
-            )}
-            {languageMenu}
-            <NavigationProfileButtonWithContext goToLogin={goToLogin} />
-          </StyledProfileNavGroup>
-        </StyledRightGroup>
-      </StyledHeader>
-      {sponsorComponent
-        ? !React.isValidElement(sponsorComponent)
-          ? sponsorComponent
-          : React.cloneElement<{
-              isCollapsed?: boolean
-              isMobile?: boolean
-              isAmp?: boolean
-              locale?: string
-            }>(sponsorComponent, {
-              isCollapsed,
-              locale,
-              isMobile,
-              isAmp,
-            })
-        : null}
-    </StyledHeaderWrapper>
-  )
-}
-
-export { NavigationBar }

package/src/components/organisms/navigationV2/components/molecules/navigationBar/navigationProfileButtonWithContext.tsx

@@ -1,50 +0,0 @@
-import React, { useContext } from 'react'
-
-import { NavigationProfileButton } from 'src/components/organisms/navigationProfileButton'
-import { UP_BASEPATH } from 'src/interfaces/constants'
-
-import { NavigationContext } from '../../../navigationContext'
-
-export function NavigationProfileButtonWithContext({
-  goToLogin,
-}: {
-  goToLogin: () => void
-}) {
-  const {
-    siteType,
-    isAmp,
-    userState: { userInfo },
-    currentUrl,
-    onLogout,
-    userProfileRouterPush,
-    configs: {
-      enableNavCare,
-      enableProfileMyHealth,
-      enableNavTogether,
-      enableProfileEcom,
-      statics,
-      enableProfileNavigatorMenu,
-    },
-    isUserLoading,
-  } = useContext(NavigationContext)
-  return (
-    <NavigationProfileButton
-      userInfo={userInfo}
-      siteType={siteType}
-      isAmp={isAmp}
-      goToLogin={goToLogin}
-      SSO_URL={statics.SSO_URL + '/'}
-      currentUrl={currentUrl}
-      onLogout={onLogout}
-      UP_BASEPATH={UP_BASEPATH}
-      isMyHealthEnabled={enableProfileMyHealth}
-      enableCare={enableNavCare}
-      enableTogether={enableNavTogether}
-      enableEcom={enableProfileEcom}
-      togetherApiDomain={statics.TOGETHER_API + '/'}
-      isUserProfileNavigatorMenuHidden={!enableProfileNavigatorMenu}
-      userProfileRouterPush={userProfileRouterPush}
-      isLoading={isUserLoading}
-    />
-  )
-}

package/src/components/organisms/navigationV2/components/molecules/spotlightNoData/index.styled.tsx

@@ -1,70 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'src/misc/utils'
-import styled from 'styled-components'
-
-export const StyledContainerNoPosts = styled.div`
-  padding: 16px;
-  border-radius: 8px;
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  a {
-    text-decoration: none;
-  }
-
-  .bg-svg {
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-  }
-  ${MediaQueries.mbDown} {
-    display: block;
-    .bg-svg {
-      right: -24px;
-      left: unset;
-      top: 0;
-      transform: rotateY(180deg);
-    }
-  }
-
-  ${MediaQueries.mbUp} {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: 1fr 3fr;
-  }
-`
-export const StyledDescription = styled.div`
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  color: ${(props: ThemeProps) => props.theme.colors.gray600};
-  margin-bottom: 15px;
-`
-
-export const StyledTitle = styled.div`
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 26px;
-  color: #000000;
-  margin-bottom: 4px;
-`
-export const StyledContentLeft = styled.div`
-  background: #fff;
-  padding: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50px;
-`
-export const StyledLeft = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  ${MediaQueries.mbDown} {
-    justify-content: end;
-    min-height: 100px;
-  }
-`