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

package/src/components/organisms/navigationLayout/menuHealthToolsList/helloSites.tsx

@@ -1,364 +0,0 @@
-import React from 'react'
-
-import { Container } from 'components/atoms/container'
-import { Heading } from 'components/atoms/heading'
-import { LocaleType } from 'interfaces/types'
-import { theme } from 'misc/theme'
-
-import { domainLocales } from '../constants'
-import {
-  DesktopMenuPopup,
-  HealthTool,
-  HealthToolByCategory,
-  SiteType,
-} from '../types'
-import { useTranslation } from '../utils'
-import CategorySkeleton from './categorySkeleton'
-import {
-  StyledCategory,
-  // StyledCategoryIcon,
-  StyledCategoryContainer,
-  StyledCategoryIcon,
-  StyledCategoryItemAll,
-  StyledCloseWrapper,
-  StyledContainer,
-  StyledHealthToolItem,
-  StyledImageWrapper,
-  StyledInnerMenuPopupContainer,
-  StyledMenuPopupContainer,
-  StyledMenuPopupWrapper,
-  StyledSeeMore,
-  StyleHealthToolByCategory,
-} from './index.styled'
-
-export type Props = {
-  isDisplayed: boolean
-  healthTools?: HealthTool[]
-  healthToolsByCategory?: HealthToolByCategory[]
-  STATIC_PAGES: {
-    [key in LocaleType]: {
-      [key: string]: string | null
-    }
-  }
-  onSelectHealthTool: (c: HealthTool) => void
-  onClosePopup?: () => void
-  isLoading: boolean
-  isMobile: boolean
-  desktopPopupType: DesktopMenuPopup
-  basePath: string
-  locale: LocaleType
-  discoverApiDomain: string
-  HEALTH_TOOL_URL_FE: string
-  // callApiHandler: (p: string, m: 'GET' | 'POST') => any
-  siteType: SiteType
-}
-
-const HealthToolsList = ({
-  healthTools,
-  onSelectHealthTool,
-  basePath,
-  isDesktop,
-  onClosePopup,
-  HEALTH_TOOL_URL_FE,
-  locale,
-  isGrouped,
-}: {
-  healthTools?: HealthTool[]
-  onSelectHealthTool: (c: HealthTool) => void
-  basePath: string
-  isDesktop?: boolean
-  onClosePopup?: () => void
-  HEALTH_TOOL_URL_FE: string
-  locale: LocaleType
-  isGrouped?: boolean
-}) => {
-  if (!healthTools?.length) return null
-  return isDesktop ? (
-    <>
-      {healthTools.map((healthTool, index) => (
-        <StyledHealthToolItem
-          data-grouped={isGrouped}
-          key={healthTool.title}
-          onClick={onClosePopup}
-        >
-          <a
-            data-event-category="Hamburger Navigation"
-            data-event-action="Click"
-            data-event-label={`https://${domainLocales[locale]}${healthTool.link}`}
-            style={{
-              textDecoration: 'none',
-              color: theme.colors.gray800,
-            }}
-            className="iconMenu"
-            href={
-              healthTool.link.startsWith('http')
-                ? healthTool.link
-                : `${HEALTH_TOOL_URL_FE}${healthTool.link}`
-            }
-          >
-            <div
-              style={{
-                display: 'flex',
-              }}
-            >
-              <img
-                alt="health-tool-icon"
-                src={healthTool.icon || '/images/avatar.jpg'}
-                style={{ width: '32px', height: '32px' }}
-              />
-            </div>
-            <p>{healthTool.title}</p>
-          </a>
-        </StyledHealthToolItem>
-      ))}
-    </>
-  ) : (
-    <>
-      {healthTools.map((healthTool, index) => (
-        <a key={'tool-' + index}>
-          <StyledCategoryContainer
-            onClick={() => {
-              onSelectHealthTool(healthTool)
-            }}
-            data-event-category="Hamburger Navigation"
-            data-event-action="Click"
-            data-event-label={`https://${domainLocales[locale]}${healthTool.link}`}
-          >
-            <StyledCategoryIcon>
-              <img
-                alt="health-tool-icon"
-                src={healthTool.icon || `${basePath}/images/avatar.jpg`}
-                style={{ width: '32px', height: '32px' }}
-              />
-            </StyledCategoryIcon>
-            <StyledCategory>{healthTool.title}</StyledCategory>
-          </StyledCategoryContainer>
-        </a>
-      ))}
-    </>
-  )
-}
-
-const HelloSitesMenuHealthToolsList = ({
-  isDisplayed,
-  healthTools,
-  healthToolsByCategory,
-  onSelectHealthTool,
-  isLoading,
-  basePath,
-  locale,
-  isMobile,
-  onClosePopup,
-  desktopPopupType,
-  HEALTH_TOOL_URL_FE,
-  STATIC_PAGES,
-  siteType,
-}: Props) => {
-  const f = useTranslation()
-
-  return isMobile ? (
-    <>
-      {isLoading && isDisplayed ? (
-        <StyledContainer>
-          <CategorySkeleton />
-        </StyledContainer>
-      ) : (
-        <StyledContainer
-          data-category-list-type="main"
-          data-is-displayed={isDisplayed}
-        >
-          {!!healthToolsByCategory?.length ? (
-            healthToolsByCategory.map(
-              (categoryHealthTool, index) =>
-                !!categoryHealthTool.healthTools?.length && (
-                  <React.Fragment key={`category-health-tool-${index}`}>
-                    <Heading tag="h4" fontWeight="bold" className="title">
-                      <span
-                        dangerouslySetInnerHTML={{
-                          __html: categoryHealthTool.name,
-                        }}
-                      />
-                    </Heading>
-                    <HealthToolsList
-                      healthTools={categoryHealthTool.healthTools.slice(0, 4)}
-                      onSelectHealthTool={onSelectHealthTool}
-                      basePath={basePath}
-                      HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
-                      locale={locale}
-                    />
-                  </React.Fragment>
-                ),
-            )
-          ) : (
-            <HealthToolsList
-              healthTools={healthTools}
-              onSelectHealthTool={onSelectHealthTool}
-              basePath={basePath}
-              HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
-              locale={locale}
-            />
-          )}
-          <StyledSeeMore>
-            <a
-              href={`${HEALTH_TOOL_URL_FE}${
-                STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
-              }`}
-              style={{ textDecoration: 'none' }}
-            >
-              <StyledCategoryItemAll
-                key={'all-health-tools-mobile'}
-                data-event-category="Hamburger Navigation"
-                data-event-action="Click"
-                data-event-label={`${HEALTH_TOOL_URL_FE}${
-                  STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
-                }`}
-              >
-                {f('home.navigator.menuItem.allHealthTools')}
-                <StyledImageWrapper>
-                  <img
-                    src={`${basePath}/svg/chevronRightActive.svg`}
-                    style={{ width: '16px', height: '16px' }}
-                    alt={f('home.navigator.menuItem.allHealthTools')}
-                  />
-                </StyledImageWrapper>
-              </StyledCategoryItemAll>
-            </a>
-          </StyledSeeMore>
-        </StyledContainer>
-      )}
-    </>
-  ) : (
-    <StyledMenuPopupWrapper
-      className="top-menu-health-tools"
-      onClick={onClosePopup}
-      data-is-display={desktopPopupType === 'tools'}
-      // key={nextId()}
-    >
-      <StyledMenuPopupContainer>
-        <Container style={{ padding: '0 16px' }}>
-          <StyledInnerMenuPopupContainer
-            data-popup-type={desktopPopupType}
-            onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-              e.stopPropagation()
-            }}
-          >
-            {
-              <>
-                {!!healthToolsByCategory?.length ? (
-                  healthToolsByCategory.map(
-                    (categoryHealthTool, index) =>
-                      !!categoryHealthTool.healthTools?.length && (
-                        <StyleHealthToolByCategory
-                          key={`health-tools-categories-${index}`}
-                        >
-                          <Heading tag="h4" as="h1" fontWeight="bold">
-                            <span
-                              dangerouslySetInnerHTML={{
-                                __html: categoryHealthTool.name,
-                              }}
-                            />
-                          </Heading>
-                          <HealthToolsList
-                            healthTools={categoryHealthTool.healthTools.slice(
-                              0,
-                              4,
-                            )}
-                            onSelectHealthTool={onSelectHealthTool}
-                            basePath={basePath}
-                            HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
-                            locale={locale}
-                            isDesktop
-                            isGrouped
-                            onClosePopup={onClosePopup}
-                          />
-                        </StyleHealthToolByCategory>
-                      ),
-                  )
-                ) : (
-                  <HealthToolsList
-                    healthTools={healthTools}
-                    onSelectHealthTool={onSelectHealthTool}
-                    basePath={basePath}
-                    HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
-                    locale={locale}
-                    isDesktop
-                    onClosePopup={onClosePopup}
-                  />
-                )}
-
-                <a
-                  style={{ textDecoration: 'none' }}
-                  href={`${HEALTH_TOOL_URL_FE}${
-                    STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
-                  }`}
-                >
-                  <StyledCategoryItemAll
-                    onClick={onClosePopup}
-                    key={'all-health-tools'}
-                    data-theme={siteType}
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label={`${HEALTH_TOOL_URL_FE}${
-                      STATIC_PAGES[locale]?.HEALTH_TOOLS || ''
-                    }`}
-                  >
-                    {f('home.navigator.menuItem.allHealthTools')}
-                    <StyledImageWrapper>
-                      {/* {siteType === 'helloSites' ? ( */}
-                      <img
-                        src={`${basePath}/svg/chevronRightActive.svg`}
-                        style={{ width: '16px', height: '16px' }}
-                        alt={f('home.navigator.menuItem.allHealthTools')}
-                      />
-                      {/* // ) : (
-                      //   <svg
-                      //     width="24"
-                      //     height="24"
-                      //     viewBox="0 0 24 24"
-                      //     fill="none"
-                      //     xmlns="http://www.w3.org/2000/svg"
-                      //   >
-                      //     <path
-                      //       d="M6.5 12H17.5M17.5 12L12.9118 8M17.5 12L12.9118 16"
-                      //       stroke="#3E3F58"
-                      //       strokeWidth="1.3"
-                      //       strokeLinecap="round"
-                      //       strokeLinejoin="round"
-                      //     />
-                      //   </svg>
-                      // )} */}
-                    </StyledImageWrapper>
-                  </StyledCategoryItemAll>
-                </a>
-              </>
-            }
-            {/* )} */}
-            <StyledCloseWrapper onClick={onClosePopup}>
-              {/* <img
-                    src={`${basePath}/svg/close.svg`}
-                    style={{ width: '24px', height: '24px' }}
-                    alt={'close'}
-                  /> */}
-              <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>
-          </StyledInnerMenuPopupContainer>
-        </Container>
-      </StyledMenuPopupContainer>
-    </StyledMenuPopupWrapper>
-  )
-}
-
-export { HelloSitesMenuHealthToolsList }

package/src/components/organisms/navigationLayout/menuHealthToolsList/index.styled.tsx

@@ -1,176 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-import { Z_INDEX } from '../constants'
-
-export const StyledCardSkeleton = styled.div`
-  & > div {
-    width: 100%;
-    margin-bottom: 8px;
-  }
-`
-export const StyledContainer = styled.div`
-  &[data-category-list-type='sub'] {
-    padding-bottom: 72px;
-  }
-
-  &[data-is-displayed='false'] {
-    display: none;
-  }
-  .title {
-    margin-bottom: 8px;
-    margin-top: 24px;
-  }
-`
-export const StyledCategoryContainer = styled.div`
-  display: flex;
-  width: 100%;
-  height: 64px;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 8px;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
-  border-bottom: 1px solid
-    ${(props: ThemeProps) => props.theme.colors.neutral100};
-
-  &[data-is-heading-category='true'] {
-    /* border-bottom: none; */
-    background-color: ${(props: ThemeProps) => props.theme.colors.blue50};
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-  }
-  > * {
-    pointer-events: none;
-  }
-`
-
-export const StyledCategory = styled.div``
-
-export const StyledCategoryIcon = styled.div`
-  padding-right: 16px;
-`
-
-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 StyledInnerMenuPopupContainer = styled.div`
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: 48px 0;
-`
-
-export const StyledHealthToolItem = styled.div`
-  width: 33%;
-  height: 48px;
-  padding-right: 16px;
-  margin-bottom: 12px;
-
-  &[data-grouped='true'] {
-    width: 100%;
-  }
-
-  & > 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};
-  }
-  [data-event-category] > * {
-    pointer-events: none;
-  }
-`
-
-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};
-  }
-  &[data-event-category] * {
-    pointer-events: none;
-  }
-`
-
-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 StyledHealtoolListContainer = styled.div`
-  &[data-is-displayed='false'] {
-    display: none;
-  }
-`
-
-export const StyledSeeMore = styled.div`
-  margin-bottom: 56px;
-  margin-top: 18px;
-`
-
-export const StyleHealthToolByCategory = styled.div`
-  position: relative;
-  display: flex;
-  width: 25%;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  margin-bottom: 24px;
-  h1 {
-    margin-bottom: 20px;
-  }
-`

package/src/components/organisms/navigationLayout/menuHealthToolsList/index.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-
-import { LocaleType } from 'interfaces/types'
-
-import {
-  DesktopMenuPopup,
-  HealthTool,
-  HealthToolByCategory,
-  SiteType,
-} from '../types'
-import { HelloSitesMenuHealthToolsList } from './helloSites'
-import { MarryBabyMenuHealthToolsList } from './marryBaby'
-
-export type Props = {
-  isDisplayed: boolean
-  healthTools?: HealthTool[]
-  healthToolsByCategory?: HealthToolByCategory[]
-  onSelectHealthTool: (c: HealthTool) => void
-  onClosePopup: () => void
-  isLoading: boolean
-  isMobile: boolean
-  desktopPopupType: DesktopMenuPopup
-  basePath: string
-  locale: LocaleType
-  discoverApiDomain: string
-  HEALTH_TOOL_URL_FE: string
-  siteType: SiteType
-  STATIC_PAGES: { [key in LocaleType]: any }
-}
-
-const MenuHealthToolsList = ({
-  isDisplayed = false,
-  healthTools,
-  healthToolsByCategory,
-  onSelectHealthTool,
-  isLoading,
-  basePath,
-  locale,
-  isMobile,
-  onClosePopup,
-  desktopPopupType,
-  HEALTH_TOOL_URL_FE,
-  siteType,
-  discoverApiDomain,
-  STATIC_PAGES,
-}: Props) => {
-  return siteType === 'helloSites' ? (
-    <HelloSitesMenuHealthToolsList
-      isDisplayed={isDisplayed}
-      locale={locale}
-      basePath={basePath}
-      discoverApiDomain={discoverApiDomain}
-      HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
-      onSelectHealthTool={onSelectHealthTool}
-      healthTools={healthTools}
-      healthToolsByCategory={healthToolsByCategory}
-      isLoading={isLoading}
-      isMobile={isMobile}
-      siteType={siteType}
-      desktopPopupType={desktopPopupType}
-      onClosePopup={onClosePopup}
-      STATIC_PAGES={STATIC_PAGES}
-    />
-  ) : (
-    <MarryBabyMenuHealthToolsList
-      isDisplayed={isDisplayed}
-      basePath={basePath}
-      discoverApiDomain={discoverApiDomain}
-      HEALTH_TOOL_URL_FE={HEALTH_TOOL_URL_FE}
-      onSelectHealthTool={onSelectHealthTool}
-      healthTools={
-        healthTools ||
-        healthToolsByCategory.reduce((r, h) => r.concat(h.healthTools), [])
-      }
-      isLoading={isLoading}
-      isMobile={isMobile}
-      desktopPopupType={desktopPopupType}
-      onClosePopup={onClosePopup}
-    />
-  )
-}
-
-export { MenuHealthToolsList }