@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

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

@@ -0,0 +1,151 @@
+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/raw/src/components/organisms/navigationLayout/menuCategoriesList/marryBaby.tsx

@@ -0,0 +1,409 @@
+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/raw/src/components/organisms/navigationLayout/menuCategoriesList/spotlightsList/index.styled.tsx

@@ -0,0 +1,147 @@
+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;
+`