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

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

@@ -1,87 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledPopup = styled.div`
-  background-color: white;
-  text-align: center;
-  .cancle-img {
-    margin-top: 24px;
-    ${MediaQueries.mbDown} {
-      width: 80px;
-      height: 80px;
-    }
-
-    ${MediaQueries.mbUp} {
-      width: 100px;
-      height: 100px;
-    }
-  }
-
-  h2 {
-    margin-top: 32px;
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    font-style: normal;
-    font-weight: bold;
-    ${MediaQueries.mbDown} {
-      font-size: 24px;
-      line-height: 32px;
-    }
-
-    ${MediaQueries.mbUp} {
-      font-size: 32px;
-      line-height: 42px;
-    }
-  }
-
-  p {
-    margin-top: 8px;
-    color: ${(props: ThemeProps) => props.theme.colors.gray600};
-    font-style: normal;
-    font-weight: normal;
-    ${MediaQueries.mbDown} {
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    ${MediaQueries.mbUp} {
-      font-size: 16px;
-      line-height: 24px;
-    }
-  }
-`
-type StyledButtonGroupProps = {
-  siteType: 'helloSites' | 'marryBaby'
-}
-export const StyledButtonGroup = styled.div<StyledButtonGroupProps>`
-  display: flex;
-
-  ${MediaQueries.mbDown} {
-    margin-top: 24px;
-  }
-
-  ${MediaQueries.mbUp} {
-    margin-top: 32px;
-  }
-  justify-content: space-around;
-  button {
-    flex: 1;
-    margin: 4px;
-  }
-
-  ${(props) =>
-    props.siteType === 'marryBaby'
-      ? `
-        .cancel-button {
-            background-color: #E55C8A;
-        }
-        .cancel-button:hover {
-          background-color: #E55C8A !important;
-        }
-        .logout-button {
-            border-color: #E55C8A;
-            color: #E55C8A;
-        }
-      `
-      : ''}
-`

package/src/components/organisms/navigationLayout/navigationLogoutPopup/index.tsx

@@ -1,95 +0,0 @@
-import React from 'react'
-import { useEffect } from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Popup } from 'components/molecules/popup'
-
-import { CloseLightIcon } from '../assets'
-import { useTranslation } from '../utils'
-import { StyledPopup, StyledButtonGroup } from './index.styled'
-
-type Props = {
-  // locale: LocaleType
-  callPostLogOutApi: () => void
-  openLogoutPopup: boolean
-  onCloseHandler: () => void
-  onLogoutHandler: () => void
-  basePath: string
-  siteType: 'helloSites' | 'marryBaby'
-}
-
-const NavigationLogoutPopup = ({
-  callPostLogOutApi,
-  openLogoutPopup,
-  onCloseHandler,
-  onLogoutHandler,
-  basePath,
-  siteType = 'helloSites',
-}: Props) => {
-  const f = useTranslation()
-
-  useEffect(() => {
-    document.body.classList.toggle('noscroll', openLogoutPopup)
-  }, [openLogoutPopup])
-
-  const logout = () => {
-    ;(async () => {
-      await callPostLogOutApi?.()
-      onLogoutHandler?.()
-      window.location.reload()
-    })()
-  }
-
-  return (
-    <Popup
-      type="confirm"
-      isOpen={openLogoutPopup}
-      closeIcon={
-        <img
-          src={CloseLightIcon}
-          style={{ width: 24, height: 24 }}
-          alt="close-icon"
-        />
-      }
-      onClose={onCloseHandler}
-    >
-      <StyledPopup>
-        {siteType === 'helloSites' && (
-          <img
-            className="cancle-img"
-            src={`${basePath}/images/arrowDoor.svg`}
-            alt="close-account"
-          />
-        )}
-        <h2>
-          {f(
-            siteType === 'helloSites'
-              ? 'logout.popup.ask1'
-              : 'logout.popup.ask.mb',
-          )}
-        </h2>
-        <p>{f('logout.popup.ask2')}</p>
-        <StyledButtonGroup siteType={siteType}>
-          <Button
-            className="logout-button"
-            color="tertiary"
-            size="lg"
-            onClick={logout}
-          >
-            {f('logout.popup.button.logout')}
-          </Button>
-          <Button
-            className="cancel-button"
-            color="primary"
-            size="lg"
-            onClick={onCloseHandler}
-          >
-            {f('logout.popup.button.cancel')}
-          </Button>
-        </StyledButtonGroup>
-      </StyledPopup>
-    </Popup>
-  )
-}
-
-export { NavigationLogoutPopup }

package/src/components/organisms/navigationLayout/profilePopup/index.tsx

@@ -1,102 +0,0 @@
-import React from 'react'
-
-import { TranslationsProvider } from 'i18n/translationsProvider'
-import { LocaleType } from 'interfaces/types'
-
-import { UserProfileNavigation } from '../../userProfileNavigation'
-import { Popup } from '../profilePopupWrapper'
-import { UserInfo } from '../types'
-
-export type Props = {
-  SSO_URL?: string
-  UP_BASEPATH?: string
-  isOpen: boolean
-  locale: LocaleType
-  targetAvatar?: string
-  userInfo?: UserInfo
-  ENABLE_COMMUNITY_PROFILE_MENU_LOCALES: LocaleType[]
-  ENABLE_CARE_PROFILE_MENU_LOCALES: LocaleType[]
-  closePopup: () => void
-  dispatchLogout: () => void
-  userProfileRouterPush?: (s: string) => void
-  siteType: 'marryBaby' | 'helloSites'
-  isUserProfileNavigatorMenuHidden?: boolean
-  isMyHealthEnabled?: boolean
-  togetherApiDomain?: string
-}
-
-const ProfilePopup = ({
-  SSO_URL,
-  UP_BASEPATH,
-  isOpen,
-  locale,
-  targetAvatar,
-  userInfo,
-  ENABLE_CARE_PROFILE_MENU_LOCALES,
-  ENABLE_COMMUNITY_PROFILE_MENU_LOCALES,
-  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={false}
-      targetAvatar={targetAvatar}
-      onClose={closePopup}
-    >
-      <TranslationsProvider locale={locale}>
-        <UserProfileNavigation
-          SSO_URL={SSO_URL}
-          UP_BASEPATH={UP_BASEPATH}
-          themeName={siteType}
-          userInfo={userInfo}
-          ENABLE_COMMUNITY_PROFILE_MENU_LOCALES={
-            ENABLE_COMMUNITY_PROFILE_MENU_LOCALES
-          }
-          ENABLE_CARE_PROFILE_MENU_LOCALES={ENABLE_CARE_PROFILE_MENU_LOCALES}
-          onClickLogout={handleClickLogout}
-          onClickMenuItem={handleClickOnMenu}
-          onClickNavigationCard={handleClickOnMenu}
-          onClickMyProfileButton={handleClickMyProfileButton}
-          userProfileRouterPush={userProfileRouterPush}
-          isUserProfileNavigatorMenuHidden={isUserProfileNavigatorMenuHidden}
-          isMyHealthEnabled={isMyHealthEnabled}
-          togetherApiDomain={togetherApiDomain}
-        />
-      </TranslationsProvider>
-    </Popup>
-  )
-}
-
-export { ProfilePopup }

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

@@ -1,164 +0,0 @@
-import { 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%;
-  }
-
-  &[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: 64px;
-      width: 100%;
-    }
-    ${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: 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;
-  }
-`

package/src/components/organisms/navigationLayout/profilePopupWrapper/index.tsx

@@ -1,58 +0,0 @@
-import React 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?: any
-  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/navigationLayout/siteWide/index.styled.tsx

@@ -1,116 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledSiteWideContainer = styled.div`
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  background-position: center;
-  background-size: cover;
-  transition: height 0.3s;
-  background-color: ${(props: ThemeProps) => props.theme.colors.secondaryBase};
-
-  &[data-is-marrybaby='true'] {
-    background-color: ${(props: ThemeProps) => props.theme.mbColors.cobalt};
-  }
-
-  &[data-is-mobile='true'] {
-    &[data-is-marrybaby='false'] {
-      justify-content: flex-start;
-    }
-  }
-  &[data-is-mobile='false'] {
-    justify-content: center;
-  }
-
-  &[data-is-collapse='false'] {
-    height: 64px;
-    &[data-is-marrybaby='true'] {
-      &[data-is-mobile='true'] {
-        height: 120px;
-      }
-    }
-  }
-  &[data-is-collapse='true'] {
-    height: 0;
-  }
-
-  .amp-close-banner * {
-    pointer-events: none;
-  }
-
-  .content {
-    display: -webkit-box;
-    overflow: hidden;
-    padding-right: 48px;
-    -webkit-box-orient: vertical;
-    color: white;
-    font-size: 16px;
-    font-weight: 600;
-    -webkit-line-clamp: 2;
-    line-height: 24px;
-    text-overflow: ellipsis;
-    a {
-      color: white;
-    }
-    &[data-is-mobile='true'] {
-      font-size: 14px;
-    }
-  }
-`
-
-export const StyledIcon = styled.div`
-  max-width: 100px;
-  margin-right: 16px;
-  height: 100%;
-  img {
-    width: 64px;
-    height: 64px;
-    object-fit: contain;
-  }
-  &[data-is-marrybaby='true'] {
-    height: unset;
-    max-height: 100%;
-  }
-  &[data-is-mobile='true'] {
-    img {
-      width: 52px;
-      height: 52px;
-    }
-  }
-`
-
-export const StyledCloseIconWrapper = styled.div`
-  position: absolute;
-  right: 20px;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  &[data-is-marrybaby='true'] {
-    background-color: ${(props: ThemeProps) => props.theme.colors.white};
-    border-radius: 50%;
-    top: 12px;
-    right: 32px;
-    padding: 10px;
-    height: 40px;
-    width: 40px;
-    .close-icon {
-      width: 20px;
-      height: 20px;
-    }
-    &[data-is-mobile='true'] {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      padding: 8px;
-      height: 32px;
-      width: 32px;
-      .close-icon {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-`