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

package/src/components/organisms/navigationV2/components/atoms/HamburgerIcon.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import {
+  HamburgerMenuIconNew,
+  HamburgerMenuIconNewWithSearch,
+} from 'assets/svg'
+
+import { SiteType } from '../../types'
+import { TypeProps } from '../molecules/navigationBar'
+
+type Props = {
+  siteType: SiteType
+  type: TypeProps
+  enableSearch?: boolean
+  className?: string
+}
+
+export function HamburgerIcon({
+  siteType,
+  type,
+  enableSearch,
+  className,
+}: Props) {
+  if (siteType === 'helloSites') {
+    return (
+      <img
+        data-list-type="Header"
+        data-content-type="Navigation"
+        data-content-topic="Hamburger"
+        src={
+          enableSearch ? HamburgerMenuIconNewWithSearch : HamburgerMenuIconNew
+        }
+        style={{ width: '24px', height: '24px' }}
+        alt={type}
+        className={className}
+      />
+    )
+  }
+
+  /** Marry Baby */
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.34961 15C3.34961 14.641 3.64062 14.35 3.99961 14.35L13.9996 14.35C14.3586 14.35 14.6496 14.641 14.6496 15C14.6496 15.359 14.3586 15.65 13.9996 15.65L3.99961 15.65C3.64062 15.65 3.34961 15.359 3.34961 15ZM3.34961 8.99999C3.34961 8.64101 3.64062 8.34999 3.99961 8.34999L19.9992 8.34999C20.3582 8.34999 20.6492 8.64101 20.6492 8.99999C20.6492 9.35898 20.3582 9.64999 19.9992 9.64999L3.99961 9.64999C3.64062 9.64999 3.34961 9.35898 3.34961 8.99999Z"
+        fill="#3E3F58"
+      />
+    </svg>
+  )
+}

package/src/components/organisms/navigationV2/components/atoms/ItemNav/index.styled.tsx

@@ -0,0 +1,63 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+import { StyledMenuPopupWrapper } from '../PopupWrapper/index.styled'
+
+export const StyledHeaderMenuItem = styled.div`
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid #ffffff;
+  & > div {
+    display: flex;
+    align-items: center;
+
+    font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
+    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
+    line-height: 22px;
+
+    user-select: none;
+  }
+
+  color: ${(props: ThemeProps) => props.theme.colors.secondaryDark};
+
+  div[data-site-type='marryBaby'] & {
+    color: ${(props: ThemeProps) => props.theme.mbColors.dark};
+  }
+  &:focus-within {
+    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+    border-bottom: 1px solid
+      ${(props: ThemeProps) => props.theme.colors.primaryBase};
+    div[data-site-type='marryBaby'] & {
+      color: ${(props: ThemeProps) => props.theme.mbColors.pink};
+    }
+    svg path {
+      stroke: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+    }
+    ${StyledMenuPopupWrapper} {
+      visibility: initial;
+      opacity: 1;
+    }
+  }
+  &:not(:focus-within) {
+    ${StyledMenuPopupWrapper} {
+      img {
+        display: none;
+      }
+    }
+  }
+
+  .care-navigator {
+    color: ${(props: ThemeProps) => props.theme.colors.secondaryDark};
+    font-size: 14px;
+    font-weight: 700;
+  }
+`
+export const StyledMenuIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+export const StyledMenuButton = styled.div`
+  cursor: pointer;
+`

package/src/components/organisms/navigationV2/components/atoms/ItemNav/index.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react'
+
+import { useCSSFocusPopupHelper } from 'src/hooks/useCSSFocusPopupHelper'
+import { useIsInit } from 'src/hooks/useIsInit'
+
+import { MenuItemType } from '../../../types'
+import {
+  StyledHeaderMenuItem,
+  StyledMenuButton,
+  StyledMenuIconWrapper,
+} from './index.styled'
+
+export type Props = {
+  item: MenuItemType
+  menu: ReactNode
+}
+
+const ItemMenu = ({ item, menu }: Props) => {
+  const {
+    containerRef,
+    onContainerFocus,
+    onContainerBlur,
+    onButtonMouseDown,
+    onClose,
+  } = useCSSFocusPopupHelper<HTMLDivElement>({
+    allowBgScroll: true,
+  })
+
+  const isInit = useIsInit()
+
+  return (
+    <StyledHeaderMenuItem
+      ref={containerRef}
+      className={!isInit ? `menu-handler-${item.id}` : ''}
+      tabIndex={0}
+      key={item.id}
+      onBlur={onContainerBlur}
+      onFocus={onContainerFocus}
+    >
+      <StyledMenuButton onMouseDown={onButtonMouseDown}>
+        {item.name}
+        <StyledMenuIconWrapper>
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.5 7.5L9 10L6.5 7.5"
+              stroke="#202135"
+              strokeWidth="1.33"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </StyledMenuIconWrapper>
+      </StyledMenuButton>
+      {React.isValidElement(menu)
+        ? React.cloneElement<{
+            onClose?: () => void
+          }>(menu, {
+            onClose,
+          })
+        : null}
+    </StyledHeaderMenuItem>
+  )
+}
+
+export { ItemMenu }

package/src/components/organisms/navigationV2/components/atoms/PopupWrapper/btnClosePopup.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { StyledCloseWrapper } from './index.styled'
+
+export type Props = {
+  onClosePopup: () => void
+}
+
+const BtnClosePopup = ({ onClosePopup }: Props) => {
+  return (
+    <StyledCloseWrapper onClick={onClosePopup}>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18 6L6 18M18 18L6 6"
+          stroke="#3E3F58"
+          strokeWidth="1.3"
+          strokeLinecap="round"
+        />
+      </svg>
+    </StyledCloseWrapper>
+  )
+}
+
+export { BtnClosePopup }

package/src/components/organisms/navigationV2/components/atoms/PopupWrapper/index.styled.tsx

@@ -0,0 +1,62 @@
+import { ThemeProps } from 'misc/theme'
+import { Container } from 'src/components/atoms'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+import { Z_INDEX } from '../../../constants'
+
+export const StyledGridContainer = styled(Container)`
+  padding-bottom: 1rem;
+
+  ${MediaQueries.mbDown} {
+    display: block;
+    padding: 0;
+  }
+  ${MediaQueries.mbUp} {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-gap: 10px;
+  }
+`
+export const StyledItemGridLeft = styled.div`
+  padding-right: 1rem;
+  border-right: 1px solid #e4e8ec;
+`
+
+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: ${(props: ThemeProps) => props.theme.colors.white};
+  transition: opacity 0.2s ease-in-out;
+  &[data-is-display='false'] {
+    visibility: hidden;
+    opacity: 0;
+  }
+  padding: 0.5rem;
+  &[data-is-nav-menu='true'] {
+    position: absolute;
+    top: 100%;
+    height: unset;
+    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);
+  }
+`
+
+export const StyledContainer = styled.div`
+  position: relative;
+  z-index: 1;
+`
+
+export const StyledCloseWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`

package/src/components/organisms/navigationV2/components/atoms/PopupWrapper/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { Container } from 'components/atoms/container'
+
+import { BtnClosePopup } from './btnClosePopup'
+import {
+  StyledGridContainer,
+  StyledMenuPopupWrapper,
+  StyledContainer,
+} from './index.styled'
+
+export type Props = {
+  onClosePopup?: () => void
+  isDisplay?: boolean
+  hideCloseBtn?: boolean
+  isNavMenu?: boolean
+  children?: JSX.Element | JSX.Element[]
+}
+
+const PopupWrapper = ({
+  onClosePopup,
+  isDisplay,
+  children,
+  isNavMenu,
+  hideCloseBtn,
+}: Props) => {
+  return (
+    <StyledMenuPopupWrapper
+      className="top-menu-health-tools"
+      data-is-display={!!isDisplay}
+      data-is-nav-menu={!!isNavMenu}
+    >
+      <Container>
+        {!hideCloseBtn && (
+          <StyledContainer>
+            <BtnClosePopup onClosePopup={onClosePopup} />
+          </StyledContainer>
+        )}
+        <StyledGridContainer>{children}</StyledGridContainer>
+      </Container>
+    </StyledMenuPopupWrapper>
+  )
+}
+
+export { PopupWrapper }

package/src/components/organisms/navigationV2/components/atoms/SearchIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const SearchIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.97183 10.8732C3.97183 7.0617 7.0617 3.97183 10.8732 3.97183C14.6848 3.97183 17.7746 7.0617 17.7746 10.8732C17.7746 14.6848 14.6848 17.7746 10.8732 17.7746C7.0617 17.7746 3.97183 14.6848 3.97183 10.8732ZM10.8732 2C5.97268 2 2 5.97268 2 10.8732C2 15.7738 5.97268 19.7465 10.8732 19.7465C12.9683 19.7465 14.8938 19.0204 16.4118 17.8061L20.3169 21.7112C20.702 22.0963 21.3262 22.0963 21.7112 21.7112C22.0963 21.3262 22.0963 20.702 21.7112 20.3169L17.8061 16.4118C19.0204 14.8938 19.7465 12.9683 19.7465 10.8732C19.7465 5.97268 15.7738 2 10.8732 2Z"
+        fill="#8C8C8C"
+      />
+    </svg>
+  )
+}
+
+export { SearchIcon }

package/src/components/organisms/navigationV2/components/atoms/searchInput/index.tsx

@@ -0,0 +1,45 @@
+import React, { useContext } from 'react'
+
+import { PureInput } from 'src/components/atoms'
+import { useTranslations } from 'src/hooks/useTranslations'
+import { LOCALE_SPECS } from 'src/interfaces/constants'
+
+import { NavigationContext } from '../../../navigationContext'
+import { SearchIcon } from '../SearchIcon'
+
+export const SearchInput = () => {
+  const {
+    locale,
+    configs: { statics },
+  } = useContext(NavigationContext)
+  const { t } = useTranslations()
+  return (
+    <PureInput
+      className="fake-search-input"
+      name={'search-input-' + 'menu-service'}
+      size="md"
+      placeholder={t('home.search', {
+        site: LOCALE_SPECS[locale || 'en-PH']
+          ? LOCALE_SPECS[locale || 'en-PH'].SITE_NAME
+          : '',
+      })}
+      onChange={() => undefined}
+      onKeyDown={(e) =>
+        e.key === 'Enter' &&
+        (window.location.href = `${statics.HOME_PAGE_URL}/search/?s=${
+          (e.target as HTMLInputElement).value
+        }`)
+      }
+      type="search"
+      autoFocus={false}
+      onFocus={(e) => {
+        e.preventDefault()
+      }}
+      displayIcon={
+        <a data-event-category="Search Button" data-event-action="Click">
+          <SearchIcon />
+        </a>
+      }
+    />
+  )
+}

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

@@ -0,0 +1,74 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledItemGridLeft = styled.div`
+  padding-right: 1rem;
+  margin-top: 10px;
+  background: #ffffff;
+  padding: 5px 15px;
+  ${MediaQueries.mbUp} {
+    border-right: 1px solid #e4e8ec;
+  }
+`
+export const StyledItem = styled.div`
+  padding: 10px 0;
+  position: relative;
+  p {
+    font-size: 16px;
+    font-weight: 400;
+    padding: 0 0.4rem;
+  }
+  a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: ${(props: ThemeProps) => props.theme.colors.gray800};
+  }
+`
+export const StyledHeading = styled.div`
+  margin: 15px 0;
+  ${MediaQueries.mbDown} {
+    display: none;
+  }
+`
+export const StyledIconNav = styled.div`
+  display: flex;
+  position: absolute;
+  right: 0;
+  ${MediaQueries.mbUp} {
+    display: none;
+  }
+`
+
+export const StyledItemAll = styled.div`
+  display: flex;
+  align-items: center;
+  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;
+  font-size: 14px;
+  font-weight: 600;
+  &[data-event-category] * {
+    pointer-events: none;
+  }
+`
+export const StyledImageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+`
+export const StyledViewMore = styled.a`
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: 5px;
+  margin-top: 20px;
+  ${MediaQueries.mbDown} {
+    display: none;
+  }
+`

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

@@ -0,0 +1,115 @@
+import React, { useContext } from 'react'
+
+import { Heading } from 'components/atoms/heading'
+import { chevronRight, chevronRightActive } from 'src/assets/svg'
+
+import { NavigationContext } from '../../../navigationContext'
+import {
+  StyledItemGridLeft,
+  StyledItem,
+  StyledHeading,
+  StyledIconNav,
+  StyledItemAll,
+  StyledImageWrapper,
+  StyledViewMore,
+} from './index.styled'
+export type Props = {
+  hrefViewMore?: string
+  siteType?: string
+  titleBtnViewMore?: string
+  UrlFE?: string
+  onClosePopup?: () => void
+  menuItems?: {
+    name?: string
+    thumbnail?: string
+    link?: string
+    slug?: string
+  }[]
+  headingTitle?: string
+}
+
+const Categories = ({
+  hrefViewMore,
+  siteType,
+  titleBtnViewMore,
+  UrlFE,
+  onClosePopup,
+  menuItems,
+  headingTitle,
+}: Props) => {
+  const { isAmp } = useContext(NavigationContext)
+  return (
+    <StyledItemGridLeft>
+      <StyledHeading>
+        <Heading tag="h6" as="h2" fontWeight="semibold">
+          {headingTitle}
+        </Heading>
+      </StyledHeading>
+      {menuItems?.slice(0, 6).map((item, index) => {
+        const href = item?.link
+          ? item?.link.startsWith('http')
+            ? item?.link
+            : `${UrlFE}/${item?.link.split('/').filter(Boolean).join('/')}/`
+          : '/'
+        return (
+          <StyledItem key={index} onClick={onClosePopup}>
+            <a
+              className="iconMenu"
+              data-event-category="Hamburger Navigation"
+              data-event-action="Click"
+              data-event-label={href}
+              data-is-heading-category={false}
+              href={href}
+            >
+              {isAmp ? (
+                <img
+                  alt={item.name}
+                  src={item.thumbnail || '/images/avatar.jpg'}
+                  style={{ width: '32px', height: '32px' }}
+                />
+              ) : (
+                <img
+                  className="lazy"
+                  alt={item.name}
+                  data-src={item.thumbnail || '/images/avatar.jpg'}
+                  style={{ width: '32px', height: '32px' }}
+                />
+              )}
+              <p>{item.name}</p>
+              <StyledIconNav>
+                {
+                  <img
+                    src={chevronRight}
+                    style={{ width: '16px', height: '16px' }}
+                  />
+                }
+              </StyledIconNav>
+            </a>
+          </StyledItem>
+        )
+      })}
+      {titleBtnViewMore && (
+        <StyledViewMore style={{ textDecoration: 'none' }} href={hrefViewMore}>
+          <StyledItemAll
+            onClick={onClosePopup}
+            data-theme={siteType}
+            data-event-category="Hamburger Navigation"
+            data-event-action="Click"
+            data-event-label={hrefViewMore}
+            data-is-heading-category={false}
+          >
+            {titleBtnViewMore}
+            <StyledImageWrapper>
+              <img
+                src={chevronRightActive}
+                style={{ width: '16px', height: '16px' }}
+              />
+            </StyledImageWrapper>
+          </StyledItemAll>
+        </StyledViewMore>
+      )}
+    </StyledItemGridLeft>
+  )
+}
+
+export { Categories }

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

@@ -0,0 +1,40 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'src/misc/utils'
+import styled from 'styled-components'
+
+export const StyledItemGridRight = styled.div`
+  margin-top: 10px;
+  background: #ffffff;
+  padding: 5px 15px;
+  position: relative;
+  ${MediaQueries.mbDown} {
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background-color: ${(props: ThemeProps) => props.theme.colors.neutral100};
+      content: '';
+    }
+  }
+`
+export const StyledHeading = styled.div`
+  margin: 15px 0;
+  display: flex;
+`
+export const StyledViewMore = styled.a`
+  padding-left: 10px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-weight: 400;
+  font-size: 14px;
+  color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+  img {
+    padding-left: 5px;
+  }
+  ${MediaQueries.mbDown} {
+    margin-left: auto;
+  }
+`

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

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import { Heading } from 'components/atoms/heading'
+import { chevronRightActive } from 'src/assets/svg'
+
+import {
+  StyledItemGridRight,
+  StyledHeading,
+  StyledViewMore,
+} from './index.styled'
+
+export type dataType = {
+  link: string
+  nameViewMore: string
+  name: string
+}
+
+export type Props = {
+  children?: JSX.Element | JSX.Element[]
+  title?: string
+  viewMore?: string
+  link?: string
+  dataEventAction?: string
+}
+
+const Spotlights = ({
+  title,
+  viewMore,
+  children,
+  link,
+  dataEventAction = '',
+}: Props) => {
+  return (
+    <StyledItemGridRight>
+      <StyledHeading>
+        <Heading tag="h6" as="h2" fontWeight="semibold">
+          {title}
+        </Heading>
+
+        {viewMore && (
+          <StyledViewMore
+            data-event-category="Hamburger Navigation"
+            data-event-action={dataEventAction}
+            data-event-label={link}
+            href={link}
+          >
+            {viewMore}
+            <img
+              src={chevronRightActive}
+              style={{ width: '16px', height: '16px' }}
+            />
+          </StyledViewMore>
+        )}
+      </StyledHeading>
+      {children}
+    </StyledItemGridRight>
+  )
+}
+
+export { Spotlights }