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

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

@@ -1,151 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-import { Z_INDEX } from '../constants'
-
-export const StyledMarryBabyListContainer = styled.div``
-
-export const StyledMarryBabyIconContainer = styled.div`
-  display: flex;
-  width: 40px;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-
-  margin-right: 16px;
-  border-radius: 50%;
-`
-
-export const StyledMarryBabySubMenuItem = styled.div`
-  display: flex;
-  margin-left: 48px;
-
-  > :first-child {
-    margin-right: 24px;
-  }
-`
-
-export const StyledMarryBabyCategoryContainer = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  //height: 40px;
-
-  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};
-  }
-
-  > svg:first-child {
-    margin-right: 24px;
-  }
-`
-
-export const StyledMarryBabyCategoryCollapsibleContainer = styled.div`
-  overflow: hidden;
-  > .expanding {
-    animation-duration: 0.3s;
-    animation-name: expandingTopToBottom;
-  }
-
-  > .collapsing {
-    margin-top: -100%;
-    animation-duration: 0.3s;
-    animation-name: collapsingBottomToTop;
-  }
-`
-
-export const StyledMarryBabyMenuPopupWrapper = styled.div`
-  position: absolute;
-  z-index: ${Z_INDEX.menuCategoryPopupWrapper};
-  top: 64px;
-
-  min-width: 375px;
-  align-items: center;
-  background-color: transparent;
-  &[data-is-display='false'] {
-    display: none;
-  }
-`
-
-export const StyledFullScreenLayer = styled.div`
-  position: fixed;
-  top: 69px;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-`
-
-export const StyledMarryBabyMenuPopupContainer = styled.div`
-  z-index: ${Z_INDEX.menuCategoryPopupContainer};
-
-  width: 100%;
-
-  max-height: 80vh;
-
-  padding: 20px 0;
-
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral50};
-  //align-items: center;
-  //display: flex;
-  //flex: 1;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-
-  border-radius: 16px;
-  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);
-
-  overflow-y: auto;
-`
-
-export const StyledMarryBabyMenuPopupInner = styled.div`
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: 24px;
-`
-
-export const StyledMarryBabyHealthCategoriesContainer = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-`
-
-export const StyledMarryBabyCategoryItem = styled.div`
-  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;
-    }
-  }
-`

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

@@ -1,409 +0,0 @@
-import React, { useState } from 'react'
-
-import { theme } from 'misc/theme'
-import { CSSProperties } from 'styled-components'
-
-import { MarryBabyText } from '../marryBabyText'
-import { Category, DesktopMenuPopup } from '../types'
-import CategorySkeleton from './categorySkeleton'
-import {
-  StyledCategoryIcon,
-  StyledContainer,
-  StyledSameLineIndicator,
-} from './index.styled'
-import {
-  StyledFullScreenLayer,
-  StyledMarryBabyCategoryCollapsibleContainer,
-  StyledMarryBabyCategoryContainer,
-  StyledMarryBabyHealthCategoriesContainer,
-  StyledMarryBabyIconContainer,
-  StyledMarryBabyListContainer,
-  StyledMarryBabyMenuPopupContainer,
-  StyledMarryBabyMenuPopupWrapper,
-  StyledMarryBabySubMenuItem,
-} from './marryBaby.styled'
-
-export type Props = {
-  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') => unknown
-  MARRY_BABY_FE: string
-  // siteType: SiteType
-}
-
-const MarryBabyMenuCategoriesList = ({
-  // locale,
-  // discoverApiDomain,
-  // basePath,
-  isDisplayed = false,
-  categories,
-  type,
-  onSelectCategory,
-  // onClosePopup,
-  desktopPopupType,
-  isMobile,
-  isLoading,
-  MARRY_BABY_FE,
-}: // className,
-// callApiHandler,
-// DISCOVER_URL_FE,
-// siteType = 'helloSites',
-Props) => {
-  const [expandingItem, setExpandingItem] = useState(-1)
-  const [isClosingItem, setIsClosingItem] = useState(false)
-
-  const onParentItemClosed = () => {
-    setIsClosingItem(true)
-
-    setTimeout(() => {
-      setExpandingItem(-1)
-
-      setTimeout(() => {
-        setIsClosingItem(false)
-      }, 100)
-    }, 300)
-  }
-
-  // useEffect(() => {
-  //   ;(async () => {
-  //     const response = (await callApiHandler(
-  //       getDiscoverDefaultSpotlightsApiPath(locale, discoverApiDomain, {
-  //         perPage: 100,
-  //         orderBy: 'start_date',
-  //       }),
-  //       'GET',
-  //     )) as {
-  //       data: { articles: SpotlightSummaryApi[] }
-  //     }
-
-  //     if (response?.data) {
-  //       const formattedSpotlights = formatSpotlightsList(
-  //         response?.data?.articles,
-  //       )
-  //         .filter(checkAvailableSpotlight)
-  //         .slice(0, 4)
-
-  //       setSpotlightsList(formattedSpotlights)
-  //     }
-  //   })()
-  // }, [])
-
-  return isMobile ? (
-    <>
-      {isLoading && isDisplayed ? (
-        <StyledContainer>
-          <CategorySkeleton />
-        </StyledContainer>
-      ) : (
-        <StyledContainer
-          data-is-displayed={isDisplayed}
-          data-category-list-type={type}
-          // className={className}
-          style={{ marginTop: 24 }}
-        >
-          <StyledMarryBabyListContainer className="marry-bb-menu-categories">
-            {categories.map((category, index) => (
-              <div
-                key={type + '-category-' + index}
-                className={`wrapper-menu-category wrapper-menu-category-${index}`}
-                data-event-category="Hamburger Navigation"
-                data-event-action="Click"
-                data-event-label={`https://marrybaby.vn${category.permalink}`}
-              >
-                <a
-                  data-event-category="Hamburger Navigation"
-                  data-event-action="Click"
-                  data-event-label={`https://marrybaby.vn${category.permalink}`}
-                  style={{
-                    textDecoration: 'none',
-                    color: theme.colors.gray800,
-                  }}
-                  onClick={(
-                    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-                  ) => {
-                    e.preventDefault()
-                  }}
-                  href={`${MARRY_BABY_FE}${category.permalink}`}
-                >
-                  <StyledMarryBabyCategoryContainer
-                    data-event-category="Hamburger Navigation"
-                    data-event-action="Click"
-                    data-event-label={`https://marrybaby.vn${category.permalink}`}
-                    onClick={() => {
-                      type === 'main' || category.childCates?.length === 0
-                        ? onSelectCategory?.(category)
-                        : expandingItem === index
-                        ? onParentItemClosed()
-                        : setExpandingItem(index)
-                    }}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                    }}
-                  >
-                    {type === 'main' ? (
-                      <StyledMarryBabyIconContainer
-                        style={{
-                          backgroundColor: category.imageColor,
-                        }}
-                      >
-                        <img
-                          src={category.iconUrl}
-                          style={{ width: '24px', height: '24px' }}
-                          alt={category.name}
-                        />
-                      </StyledMarryBabyIconContainer>
-                    ) : (
-                      <svg
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
-                          stroke="#3E3F58"
-                          strokeWidth="1.3"
-                          strokeLinecap="round"
-                        />
-                      </svg>
-                    )}
-                    <MarryBabyText
-                      style={
-                        { fontWeight: theme.sizes.fwSemiBold } as CSSProperties
-                      }
-                      type="subtitle-2"
-                    >
-                      {category.displayName}
-                    </MarryBabyText>
-                    <StyledSameLineIndicator />
-                    {type === 'main' ? (
-                      <StyledCategoryIcon>
-                        <svg
-                          width="18"
-                          height="18"
-                          viewBox="0 0 18 18"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M8.5 6L11 8.5L8.5 11"
-                            stroke="#9495A0"
-                            strokeWidth="1.3"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-
-                        {/* )} */}
-                      </StyledCategoryIcon>
-                    ) : (
-                      <StyledCategoryIcon>
-                        {expandingItem !== index ? (
-                          <svg
-                            width="18"
-                            height="18"
-                            viewBox="0 0 18 18"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M8.5 6L11 8.5L8.5 11"
-                              stroke="#9495A0"
-                              strokeWidth="1.3"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </svg>
-                        ) : (
-                          <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="#2661AD"
-                              strokeWidth="1.3"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </svg>
-                        )}
-
-                        {/* )} */}
-                      </StyledCategoryIcon>
-                    )}
-                  </StyledMarryBabyCategoryContainer>
-                </a>
-                {type === 'sub' &&
-                  category.childCates &&
-                  expandingItem === index &&
-                  category.childCates.length > 0 && (
-                    <StyledMarryBabyCategoryCollapsibleContainer>
-                      <div
-                        className={isClosingItem ? 'collapsing' : 'expanding'}
-                      >
-                        {category.childCates.map((subCategory, subIndex) => (
-                          <a
-                            data-event-category="Hamburger Navigation"
-                            data-event-action="Click"
-                            data-event-label={`https://marrybaby.vn${category.permalink}`}
-                            style={{ textDecoration: 'none' }}
-                            href={`${MARRY_BABY_FE}${subCategory.permalink}`}
-                            key={type + '-2-' + subIndex}
-                          >
-                            <StyledMarryBabyCategoryContainer
-                              data-is-heading-category={
-                                type === 'sub' &&
-                                subCategory.childCates &&
-                                subCategory.childCates.length > 0
-                              }
-                            >
-                              <StyledMarryBabySubMenuItem>
-                                <svg
-                                  width="24"
-                                  height="24"
-                                  viewBox="0 0 24 24"
-                                  fill="none"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
-                                    stroke="#3E3F58"
-                                    strokeWidth="1.3"
-                                    strokeLinecap="round"
-                                  />
-                                </svg>
-                                <MarryBabyText type="subtitle-2">
-                                  {subCategory.displayName}
-                                </MarryBabyText>
-                              </StyledMarryBabySubMenuItem>
-                            </StyledMarryBabyCategoryContainer>
-                          </a>
-                        ))}
-                      </div>
-                    </StyledMarryBabyCategoryCollapsibleContainer>
-                  )}
-
-                <div style={{ display: 'none' }}>
-                  {category.childCates &&
-                    category.childCates.map((subCategory, subIndex) => (
-                      <a
-                        href={`${MARRY_BABY_FE}${subCategory.permalink}`}
-                        key={subIndex}
-                        style={{ textDecoration: 'none' }}
-                      >
-                        <div
-                          data-is-heading-category={
-                            type === 'sub' &&
-                            subCategory.childCates &&
-                            subCategory.childCates.length > 0
-                          }
-                        >
-                          <p>{subCategory.displayName}</p>
-                        </div>
-                      </a>
-                    ))}
-                </div>
-              </div>
-            ))}
-          </StyledMarryBabyListContainer>
-        </StyledContainer>
-      )}
-    </>
-  ) : (
-    <StyledMarryBabyMenuPopupWrapper
-      className="top-menu-categories"
-      data-is-display={desktopPopupType === 'categories'}
-      tabIndex={0}
-    >
-      <StyledFullScreenLayer />
-      <StyledMarryBabyMenuPopupContainer data-popup-type={desktopPopupType}>
-        <StyledMarryBabyHealthCategoriesContainer className="marry-bb-menu-categories">
-          {isLoading ? (
-            <div
-              style={{
-                width: '100%',
-                padding: '0 20px',
-              }}
-            >
-              <CategorySkeleton />
-            </div>
-          ) : (
-            categories.map((category, categoryIndex) => (
-              <div
-                className={`wrapper-menu-category wrapper-menu-category-${categoryIndex}`}
-                data-event-category="Hamburger Navigation"
-                data-event-action="Click"
-                data-event-label={`https://marrybaby.vn${category.permalink}`}
-                key={type + '-category-' + categoryIndex}
-                onClick={() => {
-                  onSelectCategory(category)
-                }}
-              >
-                <a
-                  data-event-category="Hamburger Navigation"
-                  data-event-action="Click"
-                  data-event-label={`https://marrybaby.vn${category.permalink}`}
-                  style={{
-                    textDecoration: 'none',
-                    color: theme.colors.gray800,
-                  }}
-                  href={`${MARRY_BABY_FE}${category.permalink}`}
-                >
-                  <StyledMarryBabyCategoryContainer
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'flex-start',
-                    }}
-                  >
-                    {/* <StyledCategory></StyledCategory> */}
-                    <StyledMarryBabyIconContainer
-                      style={{
-                        backgroundColor: category.imageColor,
-                      }}
-                    >
-                      <img
-                        src={category.iconUrl}
-                        style={{ width: '24px', height: '24px' }}
-                        alt={category.name}
-                      />
-                    </StyledMarryBabyIconContainer>
-
-                    <MarryBabyText
-                      style={
-                        {
-                          fontWeight: theme.sizes.fwSemiBold,
-                        } as CSSProperties
-                      }
-                      type="subtitle-2"
-                    >
-                      {category.displayName}
-                    </MarryBabyText>
-                  </StyledMarryBabyCategoryContainer>
-                </a>
-              </div>
-            ))
-          )}
-        </StyledMarryBabyHealthCategoriesContainer>
-      </StyledMarryBabyMenuPopupContainer>
-    </StyledMarryBabyMenuPopupWrapper>
-  )
-}
-
-export { MarryBabyMenuCategoriesList }

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

@@ -1,147 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledWrapper = styled.div`
-  ${MediaQueries.mbDown} {
-    margin: 48px 0;
-  }
-
-  ${MediaQueries.mbUp} {
-    padding: 0 16px;
-  }
-`
-
-export const StyledCardSkeleton = styled.div`
-  & > div {
-    width: 100%;
-    margin-bottom: 8px;
-  }
-`
-export const StyledContainer = styled.div`
-  ${MediaQueries.mbDown} {
-    & > :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;
-  }
-
-  display: flex;
-  flex-direction: column;
-`
-
-export const StyledListContainer = styled.div`
-  ${MediaQueries.mbDown} {
-    & > :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;
-
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  font-size: ${(props: ThemeProps) => props.theme.sizes.fsParagraph4};
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-
-  &[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};
-  }
-
-  ${MediaQueries.mbDown} {
-    padding: 8px;
-  }
-  &[data-event-category] > * {
-    pointer-events: none;
-  }
-`
-
-export const StyledCategoryItemDesktop = styled.div`
-  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 StyledCategory = styled.div``
-
-export const StyledCategoryIcon = styled.div``
-
-export const StyledSpotlightItemAll = styled.div`
-  display: flex;
-  align-items: center;
-
-  ${MediaQueries.mbDown} {
-    padding: 8px;
-  }
-
-  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;
-`