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

package/src/components/organisms/navigationProfileButton/index.styled.tsx

@@ -1,254 +0,0 @@
-import { theme, ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledPopup = styled.div`
-  position: absolute;
-  right: 0;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-
-  &[data-animation='true'] {
-    transition: all 0.5s ease-in-out;
-  }
-
-  &[data-open='true'] {
-    z-index: 200;
-    top: 120%;
-    opacity: 1;
-    visibility: visible;
-  }
-
-  &[data-open='false'] {
-    display: none;
-  }
-
-  &[data-type='lead'] {
-    width: 332px;
-    height: 460px;
-
-    div {
-      top: -15px;
-      right: -15px;
-    }
-  }
-
-  &[data-type='welcome'] {
-    position: fixed;
-    ${MediaQueries.mbDown} {
-      width: 100%;
-      height: 424px;
-      bottom: 0;
-      top: unset;
-    }
-    ${MediaQueries.mbUp} {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 100%;
-      min-height: 445px;
-      max-width: 407px;
-    }
-  }
-
-  &[data-type='due-date'] {
-    position: fixed;
-    ${MediaQueries.mbDown} {
-      width: 100%;
-      height: 100%;
-      overflow-y: scroll;
-      bottom: 0;
-      top: unset;
-    }
-    ${MediaQueries.mbUp} {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 100vw;
-      height: 55vw;
-      max-height: 598px;
-      max-width: 1080px;
-    }
-  }
-
-  .popup-content {
-    z-index: 111;
-    height: 100%;
-    max-height: calc(100vh - var(--header-height, 64px));
-    overflow: auto;
-  }
-
-  &[data-type='form'] {
-    width: 496px;
-    height: 548px;
-  }
-
-  &[data-type='confirm'] {
-    width: 380px;
-    height: 252px;
-  }
-
-  &[data-type='profile'] {
-    /* min-height: 415px; */
-    ${MediaQueries.mbUp} {
-      border-radius: 6px;
-      box-shadow: 0px 4px 8px
-        ${(props: ThemeProps) => props.theme.colors.gray200};
-      &:before {
-        position: absolute;
-        right: 11px;
-        bottom: 100%;
-        width: 0;
-        height: 0;
-        border: 0.5rem solid transparent;
-        border-top: none;
-        border-bottom-color: #fff;
-        content: '';
-        filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
-      }
-    }
-    ${MediaQueries.mbDown} {
-      position: fixed;
-      left: 0;
-      top: var(--header-height, 69px);
-      width: 100%;
-      border-top: 1px solid ${theme.colors.neutral100};
-    }
-    ${MediaQueries.mbUp} {
-      width: 368px;
-    }
-  }
-
-  .close-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-    }
-  }
-`
-
-export const StyledPopupWrapper = styled.div`
-  position: fixed;
-  z-index: 150;
-  top: var(--header-height, 69px);
-  left: 0;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-
-  ${MediaQueries.mbUp} {
-    background-color: transparent;
-    &[data-type='welcome'] {
-      background: rgba(38, 38, 38, 0.3);
-    }
-    &[data-type='due-date'] {
-      background: rgba(38, 38, 38, 0.3);
-    }
-  }
-
-  ${MediaQueries.mbDown} {
-    background: rgba(38, 38, 38, 0.3);
-  }
-
-  &[data-type='welcome'] {
-    top: 0;
-  }
-
-  &[data-open='false'] {
-    display: none;
-  }
-`
-
-export const StyledAvatar = styled.div`
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-
-  img {
-    border-radius: 50%;
-  }
-
-  .avatar {
-    width: 40px;
-    height: 40px;
-    object-fit: cover;
-  }
-
-  .avatar-default {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(props: ThemeProps) =>
-      props.theme.colors.secondaryBase};
-    border-radius: 50%;
-    color: white;
-    font-size: 20px;
-    font-weight: bold;
-  }
-`
-
-export const StyledImageWrapper = styled.a`
-  display: inline-flex;
-  position: relative;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  flex-shrink: 0;
-
-  .user-close-icon {
-    display: none;
-  }
-  &:focus-within {
-    .user-close-icon {
-      display: block;
-    }
-    .user-avatar {
-      display: none;
-    }
-    ${StyledPopup} {
-      z-index: 200;
-      top: 120%;
-      opacity: 1;
-      visibility: visible;
-      display: initial;
-      &[data-type='profile'] {
-        ${MediaQueries.mbDown} {
-          top: var(--header-height, 69px);
-        }
-      }
-    }
-    ${StyledPopupWrapper} {
-      display: initial;
-    }
-  }
-`
-export const StyledLoggedOutAnchor = styled.a`
-  display: inline-flex;
-  .login-btn[data-color='tertiary'][data-size='md'] {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-  .mobile-only {
-    ${MediaQueries.mbUp} {
-      display: none;
-    }
-  }
-  .login-btn {
-    padding-left: 10px;
-    padding-right: 10px;
-    display: none;
-    ${MediaQueries.mbUp} {
-      display: block;
-    }
-  }
-`

package/src/components/organisms/navigationProfileButton/index.tsx

@@ -1,217 +0,0 @@
-import React, { CSSProperties, useState, useEffect } from 'react'
-
-import { LockIcon, LoginIcon } from 'src/assets/svg'
-import { Avatar, Button, Text } from 'src/components/atoms'
-import { useCSSFocusPopupHelper } from 'src/hooks/useCSSFocusPopupHelper'
-import { useTranslations } from 'src/hooks/useTranslations'
-import { SiteType, UserInfo } from 'src/interfaces/types'
-import { theme } from 'src/misc/theme'
-
-import { NavigationLogoutPopup } from '../navigationLogoutPopup'
-import {
-  StyledAvatar,
-  StyledImageWrapper,
-  StyledLoggedOutAnchor,
-} from './index.styled'
-import { ProfilePopup } from './profilePopup'
-
-export type Props = {
-  userInfo: UserInfo
-  siteType: SiteType
-  isAmp?: boolean
-  goToLogin?: () => void
-  SSO_URL?: string
-  currentUrl?: string
-  isMinifyLogin?: boolean
-
-  enableCare?: boolean
-  enableTogether?: boolean
-  enableEcom?: boolean
-  isUserProfileNavigatorMenuHidden?: boolean
-  isMyHealthEnabled?: boolean
-  UP_BASEPATH?: string
-  togetherApiDomain?: string
-  onLogout?: () => void
-  style?: CSSProperties
-  userProfileRouterPush?: (s: string) => void
-  isLoading?: boolean
-}
-
-export const NavigationProfileButton = ({
-  userInfo,
-  siteType,
-  isAmp,
-  goToLogin,
-  SSO_URL,
-  currentUrl,
-  isMinifyLogin,
-  enableCare,
-  enableTogether,
-  enableEcom,
-  isUserProfileNavigatorMenuHidden,
-  UP_BASEPATH,
-  isMyHealthEnabled,
-  togetherApiDomain,
-  onLogout,
-  style,
-  userProfileRouterPush,
-  isLoading,
-}: Props) => {
-  const { t } = useTranslations()
-  const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false)
-  const name = userInfo?.name || userInfo?.username
-  const [init, setInit] = useState(false)
-  useEffect(() => {
-    setInit(true)
-  }, [])
-
-  const {
-    containerRef,
-    onContainerFocus,
-    onContainerBlur,
-    onButtonMouseDown,
-    onClose,
-  } = useCSSFocusPopupHelper<HTMLAnchorElement>()
-  if (isLoading && !isAmp)
-    return <Button size="sm" color="transparent" isLoading />
-  return userInfo?.id ? (
-    <>
-      <StyledImageWrapper
-        ref={containerRef}
-        href={isAmp ? `${SSO_URL}user/profile` : undefined}
-        style={style}
-        tabIndex={0}
-        onBlur={onContainerBlur}
-        onFocus={onContainerFocus}
-      >
-        <div onMouseDown={onButtonMouseDown}>
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="user-close-icon"
-          >
-            <path
-              d="M18 6L6 18M18 18L6 6"
-              stroke="#3E3F58"
-              strokeWidth="1.3"
-              strokeLinecap="round"
-            />
-          </svg>
-          <Avatar
-            type="rounded"
-            size="medium"
-            className="user-avatar"
-            avatarUrl={userInfo?.avatar}
-            firstLetter={name && name.length ? name[0].toUpperCase() : 'A'}
-            backgroundColor={
-              siteType === 'marryBaby'
-                ? theme.mbColors.pink
-                : theme.colors.secondaryBase
-            }
-            isAmp={isAmp}
-          />
-        </div>
-        {!isAmp && (
-          <ProfilePopup
-            UP_BASEPATH={UP_BASEPATH}
-            SSO_URL={SSO_URL}
-            dispatchLogout={() => setIsLogoutConfirmOpen(true)}
-            isOpen={false}
-            isMyHealthEnabled={isMyHealthEnabled}
-            enableCare={enableCare}
-            enableTogether={enableTogether}
-            enableEcom={enableEcom}
-            closePopup={onClose}
-            userInfo={userInfo}
-            siteType={siteType}
-            isUserProfileNavigatorMenuHidden={isUserProfileNavigatorMenuHidden}
-            togetherApiDomain={togetherApiDomain}
-            userProfileRouterPush={userProfileRouterPush}
-          />
-        )}
-      </StyledImageWrapper>
-
-      {!isAmp && (
-        <NavigationLogoutPopup
-          openLogoutPopup={isLogoutConfirmOpen}
-          onCloseHandler={() => setIsLogoutConfirmOpen(false)}
-          siteType={siteType}
-          onLogoutHandler={async () => {
-            await onLogout()
-            setIsLogoutConfirmOpen(false)
-          }}
-        />
-      )}
-    </>
-  ) : (
-    <StyledLoggedOutAnchor
-      style={{ textDecoration: 'none', ...style }}
-      data-event-category="Sign Up"
-      data-event-action="Button Click"
-      data-event-label={currentUrl}
-      href={
-        isAmp
-          ? `${SSO_URL}?returnUrl=${currentUrl.replace('?amp=1', '')}`
-          : !init
-          ? `${SSO_URL}?returnUrl=${currentUrl}`
-          : undefined
-      }
-      data-site-type={siteType}
-    >
-      {isMinifyLogin ? (
-        <StyledAvatar onClick={goToLogin}>
-          <img src={LockIcon} className="avatar" alt="avatar" />
-        </StyledAvatar>
-      ) : (
-        // LOGIC:
-        // - DEsktop: always show button
-        // - Mobile: show button only for helloSites, show text for MarryBaby
-        <>
-          {siteType === 'helloSites' && (
-            <img
-              className="mobile-only"
-              src={LoginIcon}
-              style={{
-                cursor: 'pointer',
-                height: 24,
-                width: 24,
-              }}
-              onClick={goToLogin}
-            />
-          )}
-          {siteType === 'marryBaby' && (
-            <div
-              className="mobile-only"
-              onClick={goToLogin}
-              style={{
-                paddingLeft: 16,
-              }}
-            >
-              <Text size="p3">{t('navigation.loginJoin')}</Text>
-            </div>
-          )}
-          <Button
-            className="login-btn"
-            size="md"
-            color="tertiary"
-            onClick={goToLogin}
-            theme={siteType}
-            icon={
-              <img
-                src={LoginIcon}
-                width={18}
-                height={18}
-                style={{ marginRight: 8 }}
-              />
-            }
-          >
-            {t('navigation.loginJoin')}
-          </Button>
-        </>
-      )}
-    </StyledLoggedOutAnchor>
-  )
-}

package/src/components/organisms/navigationProfileButton/popupWrapper.tsx

@@ -1,58 +0,0 @@
-import React, { ReactNode } from 'react'
-
-import { StyledPopup, StyledPopupWrapper } from './index.styled'
-
-export type Props = {
-  type: 'lead' | 'form' | 'confirm' | 'profile' | 'welcome' | 'due-date'
-  closeIcon?: JSX.Element
-  onClose?: () => void
-  isOpen?: boolean
-  children?: ReactNode
-  enableAnimation?: boolean
-  targetAvatar?: string
-  id?: string
-  className?: string
-}
-
-const Popup = ({
-  type = 'lead',
-  closeIcon,
-  isOpen = true,
-  onClose,
-  children,
-  enableAnimation = true,
-  targetAvatar,
-  id,
-  className,
-}: Props) => {
-  return (
-    <>
-      <StyledPopup
-        data-open={isOpen}
-        data-type={type}
-        data-animation={enableAnimation}
-        data-target={targetAvatar}
-        id={id}
-        className={className}
-      >
-        <div className="popup-content">
-          {!!closeIcon && (
-            <div className="close-button" onClick={onClose}>
-              {closeIcon}
-            </div>
-          )}
-          {children}
-        </div>
-      </StyledPopup>
-      <StyledPopupWrapper
-        data-type={type}
-        data-open={isOpen}
-        onClick={onClose}
-        id={id ? `wrapper-${id}` : undefined}
-        className={`${className || ''}-wrapper`}
-      />
-    </>
-  )
-}
-
-export { Popup }

package/src/components/organisms/navigationProfileButton/profilePopup.tsx

@@ -1,97 +0,0 @@
-import React from 'react'
-
-import { UserInfo } from 'interfaces/types'
-
-import { UserProfileNavigation } from '../userProfileNavigation'
-import { Popup } from './popupWrapper'
-
-export type Props = {
-  SSO_URL?: string
-  UP_BASEPATH?: string
-  isOpen: boolean
-  targetAvatar?: string
-  userInfo?: UserInfo
-
-  enableCare?: boolean
-  enableTogether?: boolean
-  enableEcom?: boolean
-  closePopup: () => void
-  dispatchLogout: () => void
-  userProfileRouterPush?: (s: string) => void
-  siteType: 'marryBaby' | 'helloSites'
-  isUserProfileNavigatorMenuHidden?: boolean
-  isMyHealthEnabled?: boolean
-  togetherApiDomain?: string
-}
-
-const ProfilePopup = ({
-  SSO_URL,
-  UP_BASEPATH,
-  isOpen,
-  targetAvatar,
-  userInfo,
-  enableCare,
-  enableTogether,
-  enableEcom,
-  closePopup,
-  siteType = 'helloSites',
-  dispatchLogout,
-  userProfileRouterPush,
-  isUserProfileNavigatorMenuHidden,
-  isMyHealthEnabled = false,
-  togetherApiDomain,
-}: Props) => {
-  const push = (link: string) => {
-    if (userProfileRouterPush) {
-      userProfileRouterPush(`/${link}`)
-    } else if (SSO_URL) {
-      window.location.href = `${SSO_URL}${UP_BASEPATH}/${link}`
-    }
-  }
-
-  const handleClickOnMenu = (link: string) => {
-    push(link)
-    closePopup()
-  }
-
-  const handleClickMyProfileButton = () => {
-    push('profile')
-    closePopup()
-  }
-
-  const handleClickLogout = () => {
-    if (dispatchLogout) {
-      dispatchLogout()
-      closePopup()
-    }
-  }
-
-  return (
-    <Popup
-      isOpen={isOpen}
-      type="profile"
-      enableAnimation={true}
-      targetAvatar={targetAvatar}
-      onClose={closePopup}
-    >
-      <UserProfileNavigation
-        SSO_URL={SSO_URL}
-        UP_BASEPATH={UP_BASEPATH}
-        themeName={siteType}
-        userInfo={userInfo}
-        enableCare={enableCare}
-        enableTogether={enableTogether}
-        enableEcom={enableEcom}
-        onClickLogout={handleClickLogout}
-        onClickMenuItem={handleClickOnMenu}
-        onClickNavigationCard={handleClickOnMenu}
-        onClickMyProfileButton={handleClickMyProfileButton}
-        isUserProfileNavigatorMenuHidden={isUserProfileNavigatorMenuHidden}
-        isMyHealthEnabled={isMyHealthEnabled}
-        togetherApiDomain={togetherApiDomain}
-      />
-    </Popup>
-  )
-}
-
-export { ProfilePopup }

package/src/components/organisms/navigationV2/components/atoms/ArrowLeftPopupIcon.tsx

@@ -1,21 +0,0 @@
-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/navigationV2/components/atoms/ClosePopupIcon.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-export function ClosePopupIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        d="M18 6L6 18M18 18L6 6"
-        stroke="#3E3F58"
-        strokeWidth="1.3"
-        strokeLinecap="round"
-      />
-    </svg>
-  )
-}