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

package/raw/together/components/molecules/popupDanger/index.styled.tsx

@@ -1,174 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledPopupDanger = styled.div`
-  [data-type='confirm'] {
-    width: min(360px, 100%);
-    height: auto;
-    &[data-open='false'] {
-      top: calc(-100% - 500px);
-    }
-  }
-
-  .header {
-    display: none !important;
-  }
-
-  .confirm-dialog {
-    position: relative;
-    overflow: auto;
-    width: 100%;
-    padding-top: 44px;
-    background: #fff;
-    border-radius: 6px;
-
-    .confirm-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 0 16px 16px;
-      text-align: center;
-
-      .title {
-        margin-bottom: 8px;
-        font-size: 24px;
-        line-height: 32px;
-        word-break: break-word;
-        overflow-wrap: break-word;
-      }
-
-      .desc {
-        margin-bottom: 24px;
-        color: ${(props: ThemeProps) => props.theme.colors.gray500};
-        font-size: 18px;
-        line-height: 24px;
-        text-align: center;
-        word-break: break-word;
-        overflow-wrap: break-word;
-      }
-
-      .btn-group {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-
-        button {
-          margin: 0 4px 0.5rem;
-        }
-      }
-    }
-  }
-  .thumbnail-container {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 32px;
-    .thumbnail {
-      width: 100%;
-      height: 100%;
-    }
-    &.is-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: #e0e9fc;
-      border-radius: 1rem;
-      .thumbnail {
-        width: 40px;
-        height: 40px;
-      }
-    }
-  }
-  &[data-is-marrybaby='true'] {
-    .popup-frame {
-      > div:first-child {
-        overflow: hidden;
-        border-radius: 1rem;
-        &[data-open='true'] {
-          ${MediaQueries.mbDown} {
-            top: 100%;
-            transform: translate(-50%, -100%);
-            max-width: unset;
-            width: 100%;
-            background: unset;
-            overflow: unset;
-          }
-        }
-      }
-      .popup-content {
-        .close-button {
-          ${MediaQueries.mbDown} {
-            display: none;
-          }
-        }
-        .confirm-dialog {
-          ${MediaQueries.mbDown} {
-            background: unset;
-            position: relative;
-            overflow-x: hidden;
-            &::before {
-              content: '';
-              width: 200%;
-              background: #fff;
-              position: absolute;
-              left: 50%;
-              top: 0;
-              transform: translateX(-50%);
-              z-index: -1;
-              height: 100%;
-              border-top-left-radius: 100%;
-              border-top-right-radius: 100%;
-            }
-          }
-          .confirm-content {
-            padding: 0 40px 40px;
-            ${MediaQueries.mbDown} {
-              padding-left: 1.5rem;
-              padding-right: 1.5rem;
-            }
-            .btn-group {
-              width: 100%;
-              justify-content: space-between;
-              button {
-                flex: 1;
-                margin: 0;
-                &:first-child {
-                  margin-right: 0.5rem;
-                }
-              }
-            }
-          }
-        }
-      }
-      .thumbnail-container {
-        ${MediaQueries.mbDown} {
-          display: none;
-        }
-        &.is-icon {
-          background: #ffeaf1;
-          border-radius: 24px;
-        }
-        &.is-mobile {
-          position: absolute;
-          top: 0;
-          left: 50%;
-          display: none;
-          width: 48px;
-          height: 48px;
-          transform: translate(-50%, -50%);
-          &.is-icon {
-            border-radius: 1rem;
-            .thumbnail {
-              width: 24px;
-              height: 24px;
-            }
-          }
-          ${MediaQueries.mbDown} {
-            display: flex;
-          }
-        }
-      }
-    }
-  }
-`

package/raw/together/components/molecules/popupDanger/index.tsx

@@ -1,113 +0,0 @@
-import React, { CSSProperties, useContext, useEffect, useState } from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Heading } from 'components/atoms/heading'
-import { Text } from 'components/atoms/text'
-import { toggleNoScroll } from 'misc/utils'
-import * as ReactDOM from 'react-dom'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { PopupFrame } from '../popupFrame/index'
-import { StyledPopupDanger } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  isMarryBaby?: boolean
-  title?: string
-  description?: string
-  acceptText?: string
-  cancelText?: string
-  onAccept?: () => void
-  thumbnail?: string
-  isThumbnailIcon?: boolean
-  onClose?: () => void
-}
-
-export const PopupDanger = ({
-  className,
-  isMarryBaby: isMarryBabyProp,
-  style,
-  title,
-  description,
-  acceptText,
-  cancelText,
-  onAccept,
-  thumbnail,
-  isThumbnailIcon,
-  onClose,
-}: Props) => {
-  const {
-    data: {
-      env: { isMarryBaby: isMarryBabyContext },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const isMarryBaby =
-    typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext
-  const [isOpen, setIsOpen] = useState(false)
-  useEffect(() => {
-    toggleNoScroll(true)
-    setTimeout(() => setIsOpen(true), 0)
-    return () => toggleNoScroll(false)
-  }, [])
-  return ReactDOM.createPortal(
-    <StyledPopupDanger
-      data-is-marrybaby={isMarryBaby}
-      className={className}
-      style={style}
-      data-open={isOpen}
-    >
-      <PopupFrame className="popup-frame" isOpen={isOpen} onClose={onClose}>
-        <div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
-          <div className="confirm-content">
-            {thumbnail && (
-              <div
-                className={`thumbnail-container ${
-                  isThumbnailIcon ? 'is-icon' : ''
-                }`}
-              >
-                <img className="thumbnail" src={thumbnail} />
-              </div>
-            )}
-            <Heading className="title" tag="h2">
-              {title}
-            </Heading>
-            <Text className="desc" size="lg">
-              {description}
-            </Text>
-            <div className="btn-group">
-              <Button
-                theme={isMarryBaby ? 'marryBaby' : 'helloSites'}
-                size="md"
-                color="secondary"
-                onClick={() => {
-                  onAccept?.()
-                  onClose?.()
-                }}
-              >
-                {acceptText}
-              </Button>
-              <Button
-                theme={isMarryBaby ? 'marryBaby' : 'helloSites'}
-                size="md"
-                onClick={onClose}
-              >
-                {cancelText}
-              </Button>
-            </div>
-          </div>
-        </div>
-        {isMarryBaby && thumbnail && (
-          <div
-            className={`thumbnail-container is-mobile ${
-              isThumbnailIcon ? 'is-icon' : ''
-            }`}
-          >
-            <img className="thumbnail" src={thumbnail} />
-          </div>
-        )}
-      </PopupFrame>
-    </StyledPopupDanger>,
-    document.body,
-  )
-}

package/raw/together/components/molecules/popupDoctor/index.styled.tsx

@@ -1,185 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledPopup = styled.div`
-  position: fixed;
-  left: 50%;
-  width: 343px;
-  background-color: ${(props: ThemeProps) => props.theme.colors.white};
-  border-radius: 6px;
-  box-shadow: 0px 0px 4px ${(props: ThemeProps) => props.theme.colors.gray200};
-  transform: translate(-50%, -50%);
-  transition: all 0.5s ease-in-out;
-
-  ${MediaQueries.tdUp} {
-    width: 750px;
-  }
-
-  &[data-animation='true'] {
-    transition: all 0.5s ease-in-out;
-  }
-
-  &[data-open='true'] {
-    z-index: 200;
-    top: 50%;
-    opacity: 1;
-    visibility: visible;
-  }
-
-  &[data-open='false'] {
-    top: -50%;
-  }
-
-  .popup-content {
-    ${MediaQueries.mbDown} {
-      display: block;
-    }
-    display: flex;
-    position: relative;
-    z-index: 111;
-    height: 100%;
-    .button-see-more {
-      margin: 32px 0;
-      padding: 0;
-      > * {
-        display: inline-block;
-      }
-    }
-    .close-button {
-      position: absolute;
-      z-index: 100;
-      top: 10px;
-      right: 10px;
-      cursor: pointer;
-      width: unset;
-      height: unset;
-      img {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  .main-info {
-    padding-bottom: 32px;
-    background-color: ${(props: ThemeProps) => props.theme.colors.blue50};
-    border-radius: 6px;
-    .btn-booking {
-      display: flex;
-      margin: 12px auto;
-    }
-    .avatar-title {
-      position: relative;
-      width: 100%;
-      padding-top: 46px;
-      text-align: center;
-    }
-  }
-`
-
-export const StyledPopupWrapper = styled.div`
-  position: fixed;
-  z-index: 110;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  background: rgba(38, 38, 38, 0.3);
-
-  &[data-open='false'] {
-    display: none;
-  }
-`
-
-export const StyledProfileImage = styled.div`
-  .image-container {
-    .badge-avatar {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      top: 0;
-    }
-  }
-  display: flex;
-  justify-content: center;
-  padding-bottom: 15px;
-  text-align: center;
-  .profile-image {
-    width: 100px;
-    min-width: 100px;
-    height: 100px;
-    min-height: 100px;
-    border-radius: 50%;
-    object-fit: cover;
-  }
-  .badge-avatar {
-    width: 24px;
-    height: 24px;
-  }
-`
-
-export const StyledTitleContainer = styled.div`
-  position: relative;
-  z-index: 9;
-  .specialty {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  padding: 0px 16px;
-  text-align: center;
-  .specialty {
-    justify-content: center;
-  }
-
-  .experience {
-    padding: 16px 0px 32px;
-    text-align: left;
-    .btn-wrapper {
-      margin-top: 24px;
-    }
-  }
-  p {
-    max-width: 100%;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-`
-export const StyledSeparator = styled.span`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin: 0 0.4em;
-  color: ${(props: ThemeProps) => props.theme.colors.neutral300};
-`
-export const StyledDotSeparator = styled.div`
-  display: inline-block;
-  width: 3px;
-  height: 3px;
-  margin: 0;
-  background-color: ${(props: ThemeProps) => props.theme.colors.gray400};
-  border-radius: 50%;
-`
-
-export const StyledItem = styled.div`
-  display: flex;
-  margin-top: 8px;
-
-  .bullet-point {
-    width: 24px;
-    height: 24px;
-  }
-`
-
-export const StyledExperienceList = styled.ul`
-  padding-left: 18px;
-  li {
-    list-style-type: disc;
-  }
-`