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

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

@@ -1,419 +0,0 @@
-import React from 'react'
-
-// import { Heading, Text, theme } from '@hhgtech/hhg-components'
-// import { formatSpotlightsList } from 'api/dataTransform'
-// import { PATHS } from 'api/paths'
-// import { callApi, checkAvailableSpotlight, getDiscoverApiPath } from 'api/utils'
-import { Container } from 'components/atoms/container'
-// import { domainLocales } from 'domainLocales'
-// import { basePath, DISCOVER_URL_FE } from 'interfaces/constants'
-// import {
-//   Category,
-//   DesktopMenuPopup,
-//   LocaleType,
-//   SpotlightSummary,
-// } from 'interfaces/types'
-// import Link from 'next/link'
-// import { useRouter } from 'next/router'
-// import { useIntl } from 'react-intl'
-import { Heading } from 'components/atoms/heading'
-import { Text } from 'components/atoms/text'
-import { LocaleType } from 'interfaces/types'
-import { theme } from 'misc/theme'
-
-import { domainLocales } from '../constants'
-import {
-  Category,
-  DesktopMenuPopup,
-  SiteType,
-  SpotlightSummary,
-} from '../types'
-import {
-  // checkAvailableSpotlight,
-  // formatSpotlightsList,
-  // getDiscoverDefaultSpotlightsApiPath,
-  useTranslation,
-} from '../utils'
-import CategorySkeleton from './categorySkeleton'
-import {
-  StyledCategory,
-  StyledCategoryIcon,
-  StyledCategoryContainer,
-  StyledContainer,
-  StyledListContainer,
-  StyledCategoryItemAll,
-  StyledImageWrapper,
-  StyledMenuPopupWrapper,
-  StyledMenuPopupContainer,
-  StyledMenuPopupInner,
-  StyledHealthCategoriesContainer,
-  StyledCategoryItem,
-  StyledSubCategoryItem,
-  StyledCloseWrapper,
-} from './index.styled'
-import { SpotlightsList } from './spotlightsList'
-
-// type DesktopPopupType = {
-//   isDisplayed?: boolean
-//   categories: Category[]
-//   onClosePopup?: () => void
-//   isLoading?: boolean
-//   isMobile?: boolean
-//   className?: string
-//   desktopPopupType?: DesktopMenuPopup
-// }
-
-// type MobilePopupType = {
-//   isDisplayed?: boolean
-//   categories: Category[]
-//   type: 'sub' | 'main'
-//   onSelectCategory?: (c: Category) => void
-//   isLoading?: boolean
-//   isMobile?: boolean
-//   className?: string
-// }
-
-// type PopupType = isMobile extends false ? DesktopPopupType : MobilePopupType
-
-export type Props = {
-  locale: LocaleType
-  // discoverApiDomain: string
-  basePath: string
-  isDisplayed: boolean
-  categories: Category[]
-  type: 'sub' | 'main'
-  onSelectCategory: (c: Category) => void
-  onClosePopup: () => void
-  isLoading: boolean
-  isMobile: boolean
-  // className: string
-  desktopPopupType: DesktopMenuPopup
-  // callApiHandler: (p: string, m: 'GET' | 'POST' | 'PUT') => any
-  DISCOVER_URL_FE: string
-  siteType: SiteType
-  spotlightsList: SpotlightSummary[]
-  // onSubCategory: (c: Category) => void
-  // onSubCatLevel: (l: string) => void
-}
-
-const HelloSitesMenuCategoriesList = ({
-  locale,
-  // discoverApiDomain,
-  basePath,
-  isDisplayed = false,
-  categories,
-  spotlightsList,
-  type,
-  onSelectCategory,
-  onClosePopup,
-  desktopPopupType,
-  isMobile,
-  isLoading,
-  // className,
-  // callApiHandler,
-  DISCOVER_URL_FE,
-  siteType = 'helloSites',
-}: Props) => {
-  // const router = useRouter()
-  const f = useTranslation()
-  // const [spotlightsList, setSpotlightsList] = useState<SpotlightSummary[]>([])
-
-  return isMobile ? (
-    <>
-      {isLoading && isDisplayed ? (
-        <StyledContainer>
-          <CategorySkeleton />
-        </StyledContainer>
-      ) : (
-        <StyledContainer
-          data-is-displayed={isDisplayed}
-          data-category-list-type={type}
-          // className={className}
-        >
-          <Heading tag="h3" style={{ marginBottom: 8 }}>
-            {f('home.navigator.menuItem.healthCategories')}
-          </Heading>
-          <StyledListContainer>
-            {categories.map((category, index) => (
-              <div key={type + '-category-' + index}>
-                <a
-                  style={{
-                    textDecoration: 'none',
-                    color: theme.colors.gray800,
-                  }}
-                  onClick={(
-                    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-                  ) => {
-                    if (
-                      category.childCates &&
-                      category.childCates.length > 0 &&
-                      type !== 'sub'
-                    ) {
-                      e.preventDefault()
-                    }
-                  }}
-                  href={DISCOVER_URL_FE + category.permalink}
-                >
-                  <StyledCategoryContainer
-                    onClick={() => {
-                      onSelectCategory?.(category)
-                    }}
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label={`https://${domainLocales[locale]}${category.permalink}`}
-                    data-is-heading-category={
-                      type === 'sub' &&
-                      category.childCates &&
-                      category.childCates.length > 0
-                    }
-                  >
-                    <StyledCategory>{category.displayName}</StyledCategory>
-                    {type === 'main' && (
-                      <StyledCategoryIcon>
-                        {siteType === 'helloSites' ? (
-                          <img
-                            src={`${basePath}/svg/chevronRight.svg`}
-                            style={{ width: '16px', height: '16px' }}
-                            alt={category.categoryName}
-                          />
-                        ) : (
-                          <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>
-                        )}
-                      </StyledCategoryIcon>
-                    )}
-                  </StyledCategoryContainer>
-                  {type === 'sub' &&
-                    category.childCates &&
-                    category.childCates.length > 0 &&
-                    category.childCates.map((subCategory, subIndex) => (
-                      <a
-                        style={{ textDecoration: 'none' }}
-                        href={subCategory.permalink}
-                        key={type + '-2-' + subIndex}
-                      >
-                        <StyledCategoryContainer
-                          data-is-heading-category={
-                            type === 'sub' &&
-                            subCategory.childCates &&
-                            subCategory.childCates.length > 0
-                          }
-                        >
-                          <Text size="p3">{subCategory.displayName}</Text>
-                        </StyledCategoryContainer>
-                      </a>
-                    ))}
-                </a>
-              </div>
-            ))}
-            <a
-              style={{ textDecoration: 'none' }}
-              href={`${DISCOVER_URL_FE}/categories/`}
-            >
-              <StyledCategoryItemAll
-                // onClick={closePopup}
-                key={'all-categories'}
-                data-theme={siteType}
-                data-event-category="Hamburger Navigation"
-                data-event-action="Click"
-                data-event-label={`${DISCOVER_URL_FE}/categories/`}
-              >
-                {f('home.navigator.menuItem.allCategories')}
-                <StyledImageWrapper>
-                  {siteType === 'helloSites' ? (
-                    <img
-                      src={`${basePath}/svg/chevronRightActive.svg`}
-                      style={{ width: '16px', height: '16px' }}
-                      alt={f('home.navigator.menuItem.allCategories')}
-                    />
-                  ) : (
-                    <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>
-          </StyledListContainer>
-          <SpotlightsList
-            isDisplayed={type === 'main'}
-            spotlights={spotlightsList}
-            isLoading={false}
-            isMobile={isMobile}
-            basePath={basePath}
-            DISCOVER_URL_FE={DISCOVER_URL_FE}
-            locale={locale}
-            siteType={siteType}
-          />
-        </StyledContainer>
-      )}
-    </>
-  ) : (
-    <StyledMenuPopupWrapper
-      className="top-menu-categories"
-      onClick={onClosePopup}
-      data-is-display={desktopPopupType === 'categories'}
-      // key={nextId()}
-    >
-      <StyledMenuPopupContainer>
-        <Container style={{ padding: '0 16px' }} type={siteType}>
-          <StyledMenuPopupInner
-            data-popup-type={desktopPopupType}
-            onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-              e.stopPropagation()
-            }}
-          >
-            <div>
-              <Heading tag="h3" style={{ marginBottom: 24 }}>
-                {f('home.navigator.menuItem.healthCategories')}
-              </Heading>
-              <StyledHealthCategoriesContainer
-                data-disabled-divider={spotlightsList.length === 0}
-              >
-                {categories.map((category, categoryIndex) => (
-                  <StyledCategoryItem
-                    style={{
-                      textDecoration: 'none',
-                    }}
-                    key={category.categoryName + categoryIndex}
-                  >
-                    {/* <Link > */}
-                    <a
-                      data-event-category="Hamburger Navigation"
-                      data-event-action="Click"
-                      data-event-label={`https://${domainLocales[locale]}${category.permalink}`}
-                      style={{
-                        textDecoration: 'none',
-                        pointerEvents: 'auto',
-                      }}
-                      onClick={onClosePopup}
-                      href={`${DISCOVER_URL_FE}${category.permalink}`}
-                    >
-                      {category.displayName}
-                    </a>
-                    {/* </Link> */}
-                    <StyledSubCategoryItem>
-                      {category.childCates &&
-                        category.childCates.map((subCat, index) => (
-                          <a
-                            data-event-category="Hamburger Navigation"
-                            data-event-action="Click"
-                            data-event-label={`https://${domainLocales[locale]}${subCat.permalink}`}
-                            style={{
-                              textDecoration: 'none',
-                              pointerEvents: 'auto',
-                            }}
-                            href={subCat.permalink}
-                            key={index}
-                          >
-                            {subCat.displayName}
-                          </a>
-                        ))}
-                    </StyledSubCategoryItem>
-                  </StyledCategoryItem>
-                ))}
-                <a
-                  style={{ textDecoration: 'none' }}
-                  href={`${DISCOVER_URL_FE}/categories/`}
-                >
-                  <StyledCategoryItemAll
-                    onClick={onClosePopup}
-                    key={'all-categories'}
-                    data-theme={siteType}
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label={`${DISCOVER_URL_FE}/categories/`}
-                  >
-                    {f('home.navigator.menuItem.allCategories')}
-                    <StyledImageWrapper>
-                      {siteType === 'helloSites' ? (
-                        <img
-                          src={`${basePath}/svg/chevronRightActive.svg`}
-                          style={{ width: '16px', height: '16px' }}
-                          alt={f('home.navigator.menuItem.allCategories')}
-                        />
-                      ) : (
-                        <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>
-              </StyledHealthCategoriesContainer>
-            </div>
-            <SpotlightsList
-              isDisplayed={type === 'main'}
-              spotlights={spotlightsList}
-              isLoading={false}
-              basePath={basePath}
-              DISCOVER_URL_FE={DISCOVER_URL_FE}
-              locale={locale}
-              siteType={siteType}
-            />
-            <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>
-          </StyledMenuPopupInner>
-        </Container>
-      </StyledMenuPopupContainer>
-    </StyledMenuPopupWrapper>
-  )
-}
-
-export { HelloSitesMenuCategoriesList }

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

@@ -1,196 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-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;
-  }
-
-  margin-top: 16px;
-`
-export const StyledListContainer = styled.div`
-  & > :not(:last-child) {
-    border-bottom: 1px solid
-      ${(props: ThemeProps) => props.theme.colors.neutral100};
-  }
-
-  & > div > :not(:last-child) {
-    border-bottom: 1px solid
-      ${(props: ThemeProps) => props.theme.colors.neutral100};
-  }
-`
-
-export const StyledCategoryContainer = styled.div`
-  display: flex;
-  width: 100%;
-  height: 48px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
-
-  &[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};
-  }
-  &[data-event-category] > * {
-    pointer-events: none;
-  }
-`
-
-export const StyledCategory = styled.div``
-
-export const StyledCategoryIcon = styled.div`
-  display: flex;
-`
-
-export const StyledCategoryItemAll = styled.div`
-  display: flex;
-  align-items: center;
-
-  ${MediaQueries.mbDown} {
-    padding: 8px;
-  }
-  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 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 StyledMenuPopupInner = styled.div`
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: 48px 0;
-
-  > :first-child {
-    flex: 2;
-  }
-
-  > :not(:first-child) {
-    flex: 1;
-  }
-`
-
-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;
-    }
-  }
-  &[data-event-category] > * {
-    pointer-events: none;
-  }
-`
-
-export const StyledSubCategoryItem = styled.div`
-  display: none;
-`
-
-export const StyledCloseWrapper = styled.div`
-  position: absolute;
-  top: 16px;
-  right: 0;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`
-
-export const StyledSameLineIndicator = styled.div`
-  height: 1px;
-  flex: 1;
-  margin: 0 16px;
-  background-color: ${(props: ThemeProps) => props.theme.mbColors.lightGray};
-`

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

@@ -1,92 +0,0 @@
-import React from 'react'
-
-import { LocaleType } from 'interfaces/types'
-
-import {
-  Category,
-  DesktopMenuPopup,
-  SiteType,
-  SpotlightSummary,
-} from '../types'
-import { HelloSitesMenuCategoriesList } from './helloSites'
-import { MarryBabyMenuCategoriesList } from './marryBaby'
-
-export type Props = {
-  isDisplayed: boolean
-  locale: LocaleType
-  discoverApiDomain: string
-  basePath: string
-  categories: Category[]
-  spotlightsList: SpotlightSummary[]
-  type: 'sub' | 'main'
-  onSelectCategory: (c: Category) => void
-  onClosePopup: () => void
-  isLoading: boolean
-  isMobile: boolean
-  // className: string
-  desktopPopupType: DesktopMenuPopup
-  callApiHandler: (p: string, m: 'GET' | 'POST' | 'PUT') => any
-  DISCOVER_URL_FE: string
-  MARRY_BABY_FE: string
-  siteType: SiteType
-  // onSubCategory: (c: Category) => void
-  // onSubCatLevel: (l: string) => void
-}
-
-const MenuCategoriesList = ({
-  isDisplayed = false,
-  locale,
-  discoverApiDomain,
-  basePath,
-  categories,
-  spotlightsList,
-  type,
-  onSelectCategory,
-  onClosePopup,
-  desktopPopupType,
-  isMobile,
-  isLoading,
-  // className,
-  callApiHandler,
-  DISCOVER_URL_FE,
-  MARRY_BABY_FE,
-  siteType = 'helloSites',
-}: Props) => {
-  return siteType === 'helloSites' ? (
-    <HelloSitesMenuCategoriesList
-      locale={locale}
-      basePath={basePath}
-      // callApiHandler={callApiHandler}
-      // discoverApiDomain={discoverApiDomain}
-      DISCOVER_URL_FE={DISCOVER_URL_FE}
-      isDisplayed={isDisplayed}
-      type={type}
-      onSelectCategory={onSelectCategory}
-      categories={categories}
-      spotlightsList={spotlightsList}
-      isLoading={isLoading}
-      isMobile={isMobile}
-      siteType={siteType}
-      onClosePopup={onClosePopup}
-      desktopPopupType={desktopPopupType}
-    />
-  ) : (
-    <MarryBabyMenuCategoriesList
-      basePath={basePath}
-      callApiHandler={callApiHandler}
-      discoverApiDomain={discoverApiDomain}
-      isDisplayed={isDisplayed}
-      type={type}
-      onSelectCategory={onSelectCategory}
-      categories={categories}
-      isLoading={isLoading}
-      isMobile={isMobile}
-      // onClosePopup={onClosePopup}
-      MARRY_BABY_FE={MARRY_BABY_FE}
-      desktopPopupType={desktopPopupType}
-      // className={className}
-    />
-  )
-}
-
-export { MenuCategoriesList }