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

package/src/components/organisms/navigationLayout/menuServiceList/marryBabyMobileMenuSection.tsx

@@ -0,0 +1,239 @@
+import React, { useRef, useState } from 'react'
+
+import { theme } from 'misc/theme'
+
+import { MarryBabyText } from '../marryBabyText'
+import { MenuItemType, MenuServiceType } from '../types'
+import { StyledUnderLine } from './index.styled'
+
+type Props = {
+  menuItems: MenuItemType[]
+  activeItem: MenuItemType
+  onServiceClicked: (id: MenuServiceType) => void
+}
+
+const menuIcons: {
+  [key in MenuServiceType]?: {
+    icon: JSX.Element
+    color: string
+  }
+} = {
+  categories: {
+    icon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.1174 3.67709C12.8717 2.70759 11.1272 2.70787 9.8809 3.67705L14.1174 3.67709ZM14.1174 3.67709L19.717 8.0327C20.5579 8.68619 21.049 9.69161 21.049 10.7561V17.6001C21.049 19.5056 19.5045 21.0501 17.599 21.0501H6.39918C4.49368 21.0501 2.94922 19.5056 2.94922 17.6001V10.7561C2.94922 9.6915 3.44016 8.68619 4.28119 8.0327L9.8809 3.67705M10.679 4.70326L5.07908 9.05903C4.5556 9.46579 4.24922 10.0921 4.24922 10.7561V17.6001C4.24922 18.7876 5.21165 19.7501 6.39918 19.7501H17.599C18.7866 19.7501 19.749 18.7876 19.749 17.6001V10.7561C19.749 10.0921 19.4429 9.46599 18.9194 9.05923L13.3192 4.70322C12.5433 4.09928 11.4561 4.09892 10.679 4.70326Z"
+          fill="#3E3F58"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.2363 13.1623C12.5537 12.4791 11.4456 12.4788 10.7619 13.1625C10.0783 13.8461 10.0783 14.9535 10.7619 15.6371C11.4455 16.3207 12.5529 16.3207 13.2365 15.6371C13.9201 14.9535 13.9201 13.8461 13.2365 13.1625L13.2363 13.1623ZM14.1558 12.2433C12.9651 11.0518 11.0338 11.0522 9.84268 12.2433C8.6514 13.4346 8.6514 15.3651 9.84268 16.5563C11.034 17.7476 12.9645 17.7476 14.1558 16.5563C15.347 15.3651 15.347 13.4346 14.1558 12.2433Z"
+          fill="#3E3F58"
+        />
+      </svg>
+    ),
+    color: theme.mbColors.lightPink,
+  },
+  healthTools: {
+    icon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.7899 3.65C17.1559 3.65 16.6802 4.2267 16.6809 4.79725L16.6809 4.798C16.6809 5.41974 17.104 6.05554 17.7236 6.58451C18.0209 6.83831 18.3337 7.04083 18.5977 7.17695C18.7296 7.245 18.8416 7.29248 18.9268 7.32147C18.9708 7.33646 18.9995 7.34373 19.0149 7.34719C19.0302 7.34373 19.0589 7.33646 19.1029 7.32147C19.1881 7.29248 19.3001 7.245 19.4321 7.17695C19.696 7.04083 20.0088 6.83831 20.3061 6.58451C20.9257 6.05554 21.3489 5.41974 21.3489 4.798C21.3489 4.22619 20.8732 3.65 20.2399 3.65C19.8662 3.65 19.6352 3.81824 19.4969 3.97109C19.3738 4.10711 19.199 4.1848 19.0156 4.185C18.8321 4.1852 18.6572 4.10789 18.5338 3.97214C18.3936 3.81789 18.1622 3.65 17.7899 3.65ZM15.3809 4.79838C15.3797 3.63503 16.318 2.35 17.7899 2.35C18.2971 2.35 18.703 2.4988 19.0145 2.69438C19.3261 2.49862 19.7323 2.35 20.2399 2.35C21.7125 2.35 22.6489 3.63581 22.6489 4.798C22.6489 5.98926 21.875 6.95446 21.1501 7.57324C20.7752 7.89331 20.3789 8.15136 20.028 8.33233C19.8525 8.42282 19.6807 8.49802 19.522 8.55207C19.3755 8.60198 19.1942 8.65 19.0149 8.65C18.8355 8.65 18.6543 8.60198 18.5077 8.55207C18.349 8.49802 18.1772 8.42282 18.0018 8.33233C17.6509 8.15136 17.2545 7.89331 16.8796 7.57324C16.1548 6.95452 15.381 5.98947 15.3809 4.79838ZM15.3809 4.79838C15.3809 4.79825 15.3809 4.79813 15.3809 4.798H16.0309L15.3809 4.79875C15.3809 4.79863 15.3809 4.7985 15.3809 4.79838Z"
+          fill="#3E3F58"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.91051 8.78301C4.23607 5.03996 7.79796 2.35 12.0002 2.35C12.3662 2.35 12.7248 2.37267 13.077 2.41455C13.4334 2.45693 13.6881 2.78027 13.6457 3.13674C13.6033 3.49322 13.28 3.74784 12.9235 3.70545C12.6196 3.66932 12.3123 3.65 12.0002 3.65C8.36849 3.65 5.28438 5.97404 4.13594 9.21698C4.0161 9.55538 3.64463 9.73255 3.30624 9.61271C2.96785 9.49287 2.79067 9.12141 2.91051 8.78301Z"
+          fill="#3E3F58"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.07473 7.35106C9.33041 7.35465 9.56024 7.50781 9.66196 7.74242L12.5334 14.3647L13.6702 11.7415C13.7732 11.5038 14.0075 11.35 14.2666 11.35H15.9996C16.3586 11.35 16.6496 11.641 16.6496 12C16.6496 12.359 16.3586 12.65 15.9996 12.65H14.6933L13.13 16.2575C13.027 16.4951 12.7927 16.649 12.5337 16.649C12.2746 16.649 12.0403 16.4952 11.9373 16.2576L9.0434 9.58369L7.78547 12.2752C7.6786 12.5039 7.44902 12.65 7.19661 12.65H2.99961C2.64062 12.65 2.34961 12.359 2.34961 12C2.34961 11.641 2.64062 11.35 2.99961 11.35H6.78291L8.47675 7.72578C8.58502 7.49413 8.81905 7.34747 9.07473 7.35106Z"
+          fill="#3E3F58"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20.8654 10.3543C21.222 10.313 21.5446 10.5686 21.5859 10.9252C21.6264 11.2747 21.6502 11.6328 21.6502 12C21.6502 17.33 17.3302 21.65 12.0002 21.65C7.79796 21.65 4.23607 18.96 2.91051 15.217C2.79067 14.8786 2.96785 14.5071 3.30624 14.3873C3.64463 14.2674 4.0161 14.4446 4.13594 14.783C5.28438 18.026 8.36849 20.35 12.0002 20.35C16.6122 20.35 20.3502 16.612 20.3502 12C20.3502 11.6892 20.3301 11.3813 20.2945 11.0748C20.2532 10.7182 20.5088 10.3956 20.8654 10.3543Z"
+          fill="#3E3F58"
+        />
+      </svg>
+    ),
+    color: theme.mbColors.lightOrange,
+  },
+  together: {
+    icon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.99961 4.65C7.4256 4.65 6.14961 5.92599 6.14961 7.5C6.14961 9.07401 7.4256 10.35 8.99961 10.35C10.5736 10.35 11.8496 9.07401 11.8496 7.5C11.8496 5.92599 10.5736 4.65 8.99961 4.65ZM4.84961 7.5C4.84961 5.20802 6.70763 3.35 8.99961 3.35C11.2916 3.35 13.1496 5.20802 13.1496 7.5C13.1496 9.79198 11.2916 11.65 8.99961 11.65C6.70763 11.65 4.84961 9.79198 4.84961 7.5ZM6.71218 15.0233L6.53409 15.0517C4.87235 15.3169 3.64961 16.7503 3.64961 18.433C3.64961 18.9395 4.06015 19.35 4.56658 19.35H13.4326C13.9391 19.35 14.3496 18.9395 14.3496 18.433C14.3496 16.7503 13.1269 15.3169 11.4651 15.0517L11.287 15.0233C9.77167 14.7814 8.22754 14.7814 6.71218 15.0233ZM6.5073 13.7395C8.15839 13.476 9.84083 13.476 11.4919 13.7395L11.67 13.768C13.9626 14.1338 15.6496 16.1114 15.6496 18.433C15.6496 19.6574 14.657 20.65 13.4326 20.65H4.56658C3.34218 20.65 2.34961 19.6574 2.34961 18.433C2.34961 16.1114 4.03657 14.1338 6.3292 13.768L6.5073 13.7395Z"
+          fill="#3E3F58"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.3496 4C14.3496 3.64101 14.6406 3.35 14.9996 3.35C17.2916 3.35 19.1496 5.20802 19.1496 7.5C19.1496 9.79198 17.2916 11.65 14.9996 11.65C14.6406 11.65 14.3496 11.359 14.3496 11C14.3496 10.641 14.6406 10.35 14.9996 10.35C16.5736 10.35 17.8496 9.07401 17.8496 7.5C17.8496 5.92599 16.5736 4.65 14.9996 4.65C14.6406 4.65 14.3496 4.35898 14.3496 4ZM15.5908 14.3814C15.5908 14.0224 15.8818 13.7314 16.2408 13.7314H17.2089C17.3632 13.7314 17.5175 13.7436 17.67 13.768C19.9626 14.1338 21.6496 16.1114 21.6496 18.433C21.6496 19.6574 20.657 20.65 19.4326 20.65H17.3895C17.0305 20.65 16.7395 20.359 16.7395 20C16.7395 19.641 17.0305 19.35 17.3895 19.35H19.4326C19.9391 19.35 20.3496 18.9395 20.3496 18.433C20.3496 16.7503 19.1269 15.3169 17.4651 15.0517C17.3805 15.0382 17.2947 15.0314 17.2089 15.0314H16.2408C15.8818 15.0314 15.5908 14.7404 15.5908 14.3814Z"
+          fill="#3E3F58"
+        />
+      </svg>
+    ),
+    color: theme.mbColors.lightBlue,
+  },
+}
+
+const MenuItem = ({
+  item,
+  isActive,
+  isGoingForward,
+  onServiceClicked,
+}: {
+  item: MenuItemType
+  isActive: boolean
+  isGoingForward: boolean
+  onServiceClicked: (id: MenuServiceType) => void
+}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          // flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: 56,
+          width: 56,
+          marginBottom: 8,
+          borderRadius: 16,
+        }}
+        onClick={() => {
+          onServiceClicked?.(item.id)
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            // flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 48,
+            width: 48,
+            flexShrink: 0,
+            backgroundColor: menuIcons[item.id]?.color ?? 'white',
+            borderRadius: 16,
+
+            ...(isActive
+              ? {
+                  height: 56,
+                  width: 56,
+                  boxShadow: '0px 0px 24px rgba(0, 0, 0, 0.08)',
+                  border: '4px solid white',
+                }
+              : {}),
+          }}
+          // onClick={() => {
+          //   onServiceClicked?.(item.id)
+          // }}
+        >
+          {menuIcons[item.id]?.icon}
+        </div>
+      </div>
+
+      <MarryBabyText
+        type="subtitle-3"
+        color={isActive && theme.mbColors.pink}
+        style={{ fontWeight: theme.sizes.fwSemiBold } as React.CSSProperties}
+      >
+        {item.name}
+      </MarryBabyText>
+      {isActive &&
+        (isGoingForward ? (
+          <StyledUnderLine
+            style={{
+              animationDuration: '0.2s',
+              animationName: 'menuLeftToRightTrans',
+            }}
+          />
+        ) : (
+          <StyledUnderLine
+            style={{
+              animationDuration: '0.2s',
+              animationName: 'menuRightToLeftTrans',
+            }}
+          />
+        ))}
+    </div>
+  )
+}
+
+const MarryBabyMobileMenuShelf = ({
+  menuItems,
+  activeItem,
+  onServiceClicked,
+}: Props) => {
+  const [currentActiveTab, setCurrentActiveTab] = useState(0)
+  const isGoingForward = useRef(true)
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        // flexDirection: 'column',
+        alignItems: 'flex-start',
+        justifyContent: 'space-evenly',
+      }}
+    >
+      {menuItems.map((item, i) => (
+        <MenuItem
+          onServiceClicked={(id: MenuServiceType) => {
+            currentActiveTab < i
+              ? (isGoingForward.current = true)
+              : (isGoingForward.current = false)
+
+            setCurrentActiveTab(i)
+            onServiceClicked?.(id)
+          }}
+          key={'item' + i}
+          item={item}
+          isGoingForward={isGoingForward.current}
+          isActive={activeItem.id === item.id}
+        />
+      ))}
+    </div>
+  )
+}
+
+export { MarryBabyMobileMenuShelf }

package/src/components/organisms/navigationLayout/navigationBar/ArrowLeftPopupIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export function ArrowLeftPopupIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5 17L9.5 12L14.5 7"
+        stroke="#3E3F58"
+        strokeWidth="1.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/components/organisms/navigationLayout/navigationBar/ClosePopupIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export function ClosePopupIcon() {
+  return (
+    <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>
+  )
+}

package/src/components/organisms/navigationLayout/navigationBar/HamburgerIcon.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import { HamburgerMenuIcon } from '../assets'
+import { SiteType } from '../types'
+import { TypeProps } from './NavigationBar.types'
+
+type Props = {
+  siteType: SiteType
+  type: TypeProps
+}
+
+export function HamburgerIcon({ siteType, type }: Props) {
+  if (siteType === 'helloSites') {
+    return (
+      <img
+        data-list-type="Header"
+        data-content-type="Navigation"
+        data-content-topic="Hamburger"
+        src={HamburgerMenuIcon}
+        style={{ width: '24px', height: '24px' }}
+        alt={type}
+      />
+    )
+  }
+
+  /** Marry Baby */
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.34961 15C3.34961 14.641 3.64062 14.35 3.99961 14.35L13.9996 14.35C14.3586 14.35 14.6496 14.641 14.6496 15C14.6496 15.359 14.3586 15.65 13.9996 15.65L3.99961 15.65C3.64062 15.65 3.34961 15.359 3.34961 15ZM3.34961 8.99999C3.34961 8.64101 3.64062 8.34999 3.99961 8.34999L19.9992 8.34999C20.3582 8.34999 20.6492 8.64101 20.6492 8.99999C20.6492 9.35898 20.3582 9.64999 19.9992 9.64999L3.99961 9.64999C3.64062 9.64999 3.34961 9.35898 3.34961 8.99999Z"
+        fill="#3E3F58"
+      />
+    </svg>
+  )
+}

package/src/components/organisms/navigationLayout/navigationBar/NavigationBar.types.ts

@@ -0,0 +1,99 @@
+import { TypeProps as LogoTypeProps } from 'components/atoms/logo'
+import {
+  DesktopMenuPopup,
+  MenuItemType,
+  MobileMenuPopup,
+  SiteType,
+  UserInfo,
+} from 'components/organisms/navigationLayout/types'
+import { LocaleType } from 'interfaces/types'
+
+export type TypeProps = 'popup' | 'popup-sub-level' | 'home'
+export type TypeOnMenuClick = (s: MobileMenuPopup) => void
+export type TypeStatics = {
+  HOME_PAGE_URL: string
+  DISCOVER_URL_FE: string
+  SSO_URL: string
+  MARRY_BABY_FE: string
+  CARE_URL_FE: string
+}
+
+export interface Props {
+  siteType: SiteType
+  currentPopupType: DesktopMenuPopup
+  isInit: boolean
+  isDisplayed: boolean
+  basePath: string
+  onTopBarAppears: (b: boolean) => void
+  isSearchBarDisplay: boolean
+  onSearchChange: (v: string) => void
+  onSearchKeyPress: (e: React.KeyboardEvent<Element>, t: string) => void
+  title: string
+  menu: JSX.Element
+  profileMenu: JSX.Element
+  openPopup: (s: DesktopMenuPopup) => void
+  searchPlaceholder: string
+  type: TypeProps
+  isMobile: boolean
+  isLoginButtonDisplayed: boolean
+  isStatic: boolean
+  onMenuClick: TypeOnMenuClick
+  userInfo: UserInfo
+  routerAsPath: string
+  locale: LocaleType
+  statics: TypeStatics
+  marryBaby: {
+    tone: 'pink' | 'white'
+  }
+  menuItems: MenuItemType[]
+  isAmp: boolean
+  sitewideBanner?: JSX.Element
+  sitewideBannerShown?: boolean
+  sponsorComponent?: JSX.Element
+  languageMenu?: JSX.Element
+  isSearchIconDisplayed?: boolean
+  enabledExperimentalCareHeader?: boolean
+  onCareHeaderClick?: (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  ) => void
+}
+
+export interface NavigationBarMobileProps {
+  type: TypeProps
+  isStatic: boolean
+  isAmp: boolean
+  isDisplayed: boolean
+  siteType: SiteType
+  isCollapsed: boolean
+  sitewideBannerShown?: boolean
+  sitewideBanner?: JSX.Element
+  sitewideBannerClosed: boolean
+  setSitewideBannerClosed: React.Dispatch<React.SetStateAction<boolean>>
+  isMobile: boolean
+  onMenuClick: TypeOnMenuClick
+  menu: JSX.Element
+  isSearchIconDisplayed?: boolean
+  statics: TypeStatics
+  basePath: string
+  languageMenu?: JSX.Element
+  enabledExperimentalCareHeader?: boolean
+  onCareHeaderClick?: (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  ) => void
+  logoType: LogoTypeProps
+  locale: LocaleType
+  isInit: boolean
+  title: string
+  sponsorComponent?: JSX.Element
+  currentUrl: string
+  userInfo: UserInfo
+  currentPopupType: DesktopMenuPopup
+  avatar: JSX.Element
+  profileMenu: JSX.Element
+  isLoginButtonDisplayed: boolean
+  goToLogin: () => void
+  isSearchBarDisplay: boolean
+  searchPlaceholder: string
+  onSearchValueChanged: (v: string) => void
+  keyPressed: (e: React.KeyboardEvent<Element>) => void
+}