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

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

@@ -1,141 +0,0 @@
-import React from 'react'
-
-import { Heading } from 'components/atoms/heading'
-import { theme } from 'misc/theme'
-
-import { domainLocales } from '../../constants'
-import { LocaleType, SiteType, SpotlightSummary } from '../../types'
-import { useTranslation } from '../../utils'
-import {
-  StyledCategory,
-  StyledCategoryContainer,
-  StyledWrapper,
-  StyledContainer,
-  StyledImageWrapper,
-  StyledSpotlightItemAll,
-  StyledCategoryItemDesktop,
-} from './index.styled'
-import SpotlightSkeleton from './spotlightSkeleton'
-
-export type Props = {
-  isDisplayed?: boolean
-  spotlights: SpotlightSummary[]
-  isLoading?: boolean
-  isMobile?: boolean
-  className?: string
-  basePath: string
-  DISCOVER_URL_FE: string
-  locale: LocaleType
-  siteType: SiteType
-}
-
-const SpotlightsList = ({
-  isDisplayed = false,
-  spotlights,
-  isLoading,
-  className,
-  isMobile,
-  DISCOVER_URL_FE,
-  basePath,
-  locale,
-  siteType,
-}: Props) => {
-  const f = useTranslation()
-
-  if (!isDisplayed) return null
-  return (
-    <StyledWrapper>
-      <Heading tag="h3" style={{ marginBottom: 24 }}>
-        {f('home.navigator.menuItem.spotlights')}
-      </Heading>
-      {isLoading && isDisplayed ? (
-        <StyledContainer className={className}>
-          <SpotlightSkeleton />
-        </StyledContainer>
-      ) : (
-        <StyledContainer data-is-displayed={isDisplayed} className={className}>
-          {spotlights.map((spotlight, index) => (
-            <StyledCategoryItemDesktop
-              style={{
-                textDecoration: 'none',
-              }}
-              key={'spotlight-' + index}
-            >
-              {isMobile ? (
-                <a
-                  href={spotlight.permalink}
-                  style={{
-                    textDecoration: 'none',
-                    color: theme.colors.gray800,
-                  }}
-                >
-                  <StyledCategoryContainer
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label={`https://${domainLocales[locale]}${spotlight.permalink}`}
-                  >
-                    <StyledCategory>{spotlight.name}</StyledCategory>
-                  </StyledCategoryContainer>
-                </a>
-              ) : (
-                <a
-                  data-event-category="Hamburger Navigation"
-                  data-event-action="Click"
-                  data-event-label={`https://${domainLocales[locale]}${spotlight.permalink}`}
-                  style={{
-                    textDecoration: 'none',
-                    pointerEvents: 'auto',
-                  }}
-                  href={`${DISCOVER_URL_FE}${spotlight.permalink}`}
-                >
-                  {spotlight.name}
-                </a>
-              )}
-            </StyledCategoryItemDesktop>
-          ))}
-          <a
-            style={{ textDecoration: 'none' }}
-            href={`${DISCOVER_URL_FE}/spotlight/`}
-          >
-            <StyledSpotlightItemAll
-              key={'all-spotlights'}
-              data-theme={siteType}
-              data-event-category="Hamburger Navigation"
-              data-event-action="Click"
-              data-event-label={`${DISCOVER_URL_FE}/spotlight/`}
-            >
-              {f('home.navigator.menuItem.allSpotlight')}
-              <StyledImageWrapper>
-                {siteType === 'helloSites' ? (
-                  <img
-                    src={`${basePath}/svg/chevronRightActive.svg`}
-                    style={{ width: '16px', height: '16px' }}
-                    alt={f('home.navigator.menuItem.allSpotlight')}
-                  />
-                ) : (
-                  <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>
-            </StyledSpotlightItemAll>
-          </a>
-        </StyledContainer>
-      )}
-    </StyledWrapper>
-  )
-}
-
-export { SpotlightsList }

package/src/components/organisms/navigationLayout/menuCategoriesList/spotlightsList/spotlightSkeleton.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import Skeleton from 'react-loading-skeleton'
-
-import { StyledCardSkeleton } from './index.styled'
-
-const SpotlightSkeleton = () => (
-  <StyledCardSkeleton
-    style={{
-      marginTop: '16px',
-    }}
-  >
-    <div>
-      <Skeleton height={46} />
-    </div>
-    <div>
-      <Skeleton height={46} />
-    </div>
-    <div>
-      <Skeleton height={46} />
-    </div>
-  </StyledCardSkeleton>
-)
-
-export default SpotlightSkeleton

package/src/components/organisms/navigationLayout/menuCommunitiesList/categorySkeleton.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import Skeleton from 'react-loading-skeleton'
-
-import { StyledCardSkeleton } from './index.styled'
-
-const CategorySkeleton = () => (
-  <StyledCardSkeleton
-    style={{
-      marginTop: '16px',
-    }}
-  >
-    <div>
-      <Skeleton height={46} />
-    </div>
-    <div>
-      <Skeleton height={46} />
-    </div>
-    <div>
-      <Skeleton height={46} />
-    </div>
-  </StyledCardSkeleton>
-)
-
-export default CategorySkeleton

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

@@ -1,309 +0,0 @@
-import React from 'react'
-
-import { Container } from 'components/atoms/container'
-import { LocaleType } from 'interfaces/types'
-import { theme } from 'misc/theme'
-
-import { domainLocales } from '../constants'
-import { Community, DesktopMenuPopup, SiteType } from '../types'
-import { useTranslation } from '../utils'
-import CategorySkeleton from './categorySkeleton'
-import {
-  StyledCategory,
-  StyledCategoryIcon,
-  StyledCategoryContainer,
-  StyledContainer,
-  StyledCategoryInfo,
-  StyledMenuPopupWrapper,
-  StyledMenuPopupContainer,
-  StyledInnerMenuPopupContainer,
-  StyledHealthToolItem,
-  StyledCategoryItemAll,
-  StyledImageWrapper,
-  StyledCloseWrapper,
-} from './index.styled'
-
-export type Props = {
-  isDisplayed: boolean
-  locale: LocaleType
-  togetherApiDomain: string
-  communities: Community[]
-  type: 'sub' | 'main'
-  onSelectCommunity: ({}: {
-    community: Community
-    isSetToSubMenu: boolean
-  }) => void
-  onClosePopup: () => void
-  isLoading: boolean
-  isMobile: boolean
-  basePath: string
-  TOGETHER_URL_FE: string
-  siteType: SiteType
-  desktopPopupType: DesktopMenuPopup
-}
-
-const HelloSitesMenuCommunitiesList = ({
-  isDisplayed,
-  communities,
-  type,
-  onSelectCommunity,
-  onClosePopup,
-  isLoading,
-  basePath,
-  TOGETHER_URL_FE,
-  siteType = 'helloSites',
-  isMobile,
-  locale,
-  desktopPopupType,
-}: Props) => {
-  const f = useTranslation()
-  return isMobile ? (
-    <>
-      {isLoading && isDisplayed ? (
-        <StyledContainer>
-          <CategorySkeleton />
-        </StyledContainer>
-      ) : (
-        <StyledContainer
-          data-category-list-type={type}
-          data-is-displayed={isDisplayed}
-        >
-          {type === 'main' &&
-            communities.map((community, index) => (
-              <div key={type + '-category-' + index}>
-                <a
-                  style={{
-                    textDecoration: 'none',
-                    color: theme.colors.gray800,
-                  }}
-                  onClick={(
-                    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-                  ) => {
-                    e.preventDefault()
-                  }}
-                  href={`${TOGETHER_URL_FE}/${community.communitySlug}`}
-                >
-                  <StyledCategoryContainer
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label={`https://${domainLocales[locale]}/${community.communitySlug}`}
-                    onClick={() => {
-                      onSelectCommunity({ community, isSetToSubMenu: true })
-                    }}
-                    data-is-heading-category={false}
-                  >
-                    <StyledCategoryInfo>
-                      <img
-                        src={community.thumbnail}
-                        style={{ width: '40px', height: '40px' }}
-                        alt={community.title}
-                      />
-                      <StyledCategory>{community.title}</StyledCategory>
-                    </StyledCategoryInfo>
-                    <StyledCategoryIcon>
-                      {siteType === 'helloSites' ? (
-                        <img
-                          src={`${basePath}/svg/chevronRight.svg`}
-                          style={{ width: '16px', height: '16px' }}
-                          alt={community.title}
-                        />
-                      ) : (
-                        <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>
-                </a>
-              </div>
-            ))}
-          {type === 'sub' &&
-            communities.map((community, index) => (
-              <div key={type + '-category-' + index}>
-                <a
-                  style={{
-                    textDecoration: 'none',
-                    color: theme.colors.gray800,
-                  }}
-                  onClick={(
-                    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-                  ) => {
-                    e.preventDefault()
-                  }}
-                  href={`${TOGETHER_URL_FE}/${community.communitySlug}`}
-                >
-                  <StyledCategoryContainer
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label={`https://${domainLocales[locale]}/${community.communitySlug}`}
-                    onClick={() => {
-                      onSelectCommunity({ community, isSetToSubMenu: false })
-                    }}
-                    data-is-heading-category={false}
-                  >
-                    <StyledCategoryInfo>
-                      <img
-                        src={community.thumbnail}
-                        style={{ width: '40px', height: '40px' }}
-                        alt={community.title}
-                      />
-                      <StyledCategory>{community.title}</StyledCategory>
-                    </StyledCategoryInfo>
-                  </StyledCategoryContainer>
-                </a>
-              </div>
-            ))}
-          <a style={{ textDecoration: 'none' }} href={TOGETHER_URL_FE + '/'}>
-            <StyledCategoryItemAll
-              onClick={onClosePopup}
-              key={'all-communities'}
-              data-theme={siteType}
-              data-event-category="Hamburger Navigation"
-              data-event-action="Click"
-              data-event-label={TOGETHER_URL_FE + '/'}
-            >
-              {f('home.navigator.menuItem.allCommunities')}
-              <StyledImageWrapper>
-                <img
-                  src={`${basePath}/svg/chevronRightActive.svg`}
-                  style={{ width: '16px', height: '16px' }}
-                  alt={f('home.navigator.menuItem.allCommunities')}
-                />
-              </StyledImageWrapper>
-            </StyledCategoryItemAll>
-          </a>
-        </StyledContainer>
-      )}
-    </>
-  ) : (
-    <StyledMenuPopupWrapper
-      className="top-menu-communities"
-      onClick={onClosePopup}
-      data-is-display={desktopPopupType === 'communities'}
-      // key={nextId()}
-    >
-      <StyledMenuPopupContainer>
-        <Container style={{ padding: '0 16px' }} type={siteType}>
-          <StyledInnerMenuPopupContainer
-            data-popup-type={desktopPopupType}
-            onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-              e.stopPropagation()
-            }}
-          >
-            <>
-              {communities.map((community: Community) => (
-                <StyledHealthToolItem
-                  key={community.title}
-                  onClick={onClosePopup}
-                >
-                  <a
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label={`https://${domainLocales[locale]}/${community.communitySlug}`}
-                    style={{
-                      textDecoration: 'none',
-                      color: theme.colors.gray800,
-                    }}
-                    className="iconMenu"
-                    href={`${TOGETHER_URL_FE}/${community.communitySlug}`}
-                  >
-                    <div
-                      style={{
-                        display: 'flex',
-                      }}
-                    >
-                      <img
-                        alt="health-tool-icon"
-                        src={
-                          community.thumbnail || `${basePath}/images/avatar.jpg`
-                        }
-                        style={{ width: '32px', height: '32px' }}
-                      />
-                    </div>
-                    <p>{community.title}</p>
-                  </a>
-                </StyledHealthToolItem>
-              ))}
-              <a
-                style={{ textDecoration: 'none' }}
-                href={TOGETHER_URL_FE + '/'}
-              >
-                <StyledCategoryItemAll
-                  onClick={onClosePopup}
-                  key={'all-communities'}
-                  data-theme={siteType}
-                  data-event-category="Hamburger Navigation"
-                  data-event-action="Click"
-                  data-event-label={TOGETHER_URL_FE + '/'}
-                >
-                  {f('home.navigator.menuItem.allCommunities')}
-                  <StyledImageWrapper>
-                    {/* {siteType === 'helloSites' ? ( */}
-                    <img
-                      src={`${basePath}/svg/chevronRightActive.svg`}
-                      style={{ width: '16px', height: '16px' }}
-                      alt={f('home.navigator.menuItem.allCommunities')}
-                    />
-                    {/* // ) : (
-                    //   <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 { HelloSitesMenuCommunitiesList }

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

@@ -1,162 +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`
-  & > :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};
-  }
-
-  &[data-category-list-type='sub'] {
-    padding-bottom: 72px;
-  }
-
-  &[data-is-displayed='false'] {
-    display: none;
-  }
-
-  //margin-top: 112px;
-`
-export const StyledCategoryContainer = styled.div`
-  display: flex;
-  width: 100%;
-  height: 56px;
-  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``
-
-export const StyledCategoryInfo = styled.div`
-  display: flex;
-  align-items: center;
-
-  > :first-child {
-    min-width: 40px;
-    margin-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;
-
-  & > 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;
-`