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

package/src/components/molecules/modal/index.stories.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Modal, Props } from './index'
+
+export default {
+  component: Modal,
+  title: 'Molecules/Modal',
+  argTypes: { onClick: { action: 'clicked' } },
+}
+
+const Template: Story<Props> = (args) => (
+  <div>
+    <Modal {...args} />
+  </div>
+)
+
+export const Lead = Template.bind({})
+
+Lead.args = {
+  type: 'lead',
+  closeIcon: <img src="https://source.unsplash.com/random/16x16" />,
+  children: <div>ok</div>,
+  isOpen: true,
+}
+
+export const Form = Template.bind({})
+
+Form.args = {
+  type: 'form',
+  closeIcon: <img src="https://source.unsplash.com/random/16x16" />,
+  children: <div>ok</div>,
+  isOpen: true,
+}
+
+export const Confirm = Template.bind({})
+
+Confirm.args = {
+  type: 'confirm',
+  closeIcon: <img src="https://source.unsplash.com/random/16x16" />,
+  children: <div>ok</div>,
+  isOpen: true,
+}
+
+export const ScaleAnimation = () => {
+  const [isShow, setIsShow] = useState(false)
+  const [isShowSecond, setIsShowSecond] = useState(false)
+  const styleBtn = { border: '1px solid black' }
+  return (
+    <>
+      <button style={styleBtn} onClick={() => setIsShow(true)}>
+        Open First Modal
+      </button>
+      <Modal
+        type="tail"
+        isOpen={isShow}
+        onClose={() => setIsShow(false)}
+        animationType="scaleUp"
+        isStaticBackdrop
+      >
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          <h1>ScaleUp Animation</h1>
+          <button style={styleBtn} onClick={() => setIsShow(false)}>
+            Close First Modal
+          </button>
+        </div>
+      </Modal>
+    </>
+  )
+}
+export const TwoModals = () => {
+  const [isShow, setIsShow] = useState(false)
+  const [isShowSecond, setIsShowSecond] = useState(false)
+  const styleBtn = { border: '1px solid black' }
+  return (
+    <>
+      <button style={styleBtn} onClick={() => setIsShow(true)}>
+        Open First Modal
+      </button>
+      <Modal
+        type="tail"
+        isOpen={isShow}
+        onClose={() => setIsShow(false)}
+        animationType="scaleUp"
+        isStaticBackdrop
+      >
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          <h1>The first modal</h1>
+          <button style={styleBtn} onClick={() => setIsShow(false)}>
+            Close First Modal
+          </button>{' '}
+          <br />
+          <button style={styleBtn} onClick={() => setIsShowSecond(true)}>
+            Open Second Modal
+          </button>
+        </div>
+      </Modal>
+      <Modal
+        type="tail"
+        isOpen={isShowSecond}
+        onClose={() => setIsShow(false)}
+        animationType="slideTop"
+        isStaticBackdrop
+      >
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'pink',
+          }}
+        >
+          <h1>The second modal</h1>
+          <button style={styleBtn} onClick={() => setIsShowSecond(false)}>
+            Close Second Modal
+          </button>
+          <div
+            style={{
+              height: '100vh',
+              backgroundColor: 'aqua',
+            }}
+          >
+            Long Content
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+}

package/src/components/molecules/modal/index.styled.tsx

@@ -0,0 +1,146 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledModal = styled.div`
+  position: relative;
+  z-index: 200;
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+  border-radius: 6px;
+  box-shadow: 0px 4px 8px ${(props: ThemeProps) => props.theme.colors.gray200};
+
+  .hhg-modal__content {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    padding: 16px;
+  }
+  .hhg-modal__video {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    background-color: none;
+    box-shadow: none;
+  }
+`
+export const StyledModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  visibility: hidden;
+  background-color: rgba(38, 38, 38, 0.3);
+
+  .hhg-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  &[data-type='video'] {
+    z-index: 1001;
+  }
+  &[data-open='true'] {
+    visibility: visible;
+  }
+
+  &.slideTop {
+    ${StyledModal} {
+      transform: translate(0, -100vh);
+      transition: all 0.5s ease;
+    }
+
+    &[data-open='true'] {
+      ${StyledModal} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    ${StyledModal} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal} {
+        transition: all 0.3s ease-out;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    ${StyledModal} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    ${StyledModal} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    ${StyledModal} {
+      height: 100%;
+      max-height: 539px;
+      ${MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: 6px;
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    ${StyledModal} {
+      width: 100%;
+      max-width: 407px;
+      ${MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`
+
+export const StyledModalMask = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${(props: ThemeProps) =>
+      props.theme.colors.secondaryDark};
+  }
+`

package/src/components/molecules/modal/index.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { Modal } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const popup = render(
+    <MockTheme>
+      <Modal
+        isOpen
+        type="lead"
+        closeIcon={<img src="https://source.unsplash.com/random/16x16" />}
+        onClose={() => console.log('onClose')}
+      />
+    </MockTheme>,
+  )
+
+  const self = popup.container.firstChild
+
+  expect(self).toMatchSnapshot()
+})

package/src/components/molecules/modal/index.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { useScrollbarSize } from 'hooks/useScrollbarSize'
+import { createPortal } from 'react-dom'
+
+import {
+  StyledModal,
+  StyledModalWrapper,
+  StyledModalMask,
+} from './index.styled'
+
+export type Props = {
+  type: 'tail' | 'lead' | 'form' | 'confirm' | 'profile' | 'video'
+  animationType?: 'slideTop' | 'scaleUp'
+  closeIcon?: JSX.Element
+  isOpen: boolean
+  onClose: () => void
+  children?: any
+  className?: string
+  isStaticBackdrop?: boolean
+}
+const MODAL_ROOT_ID = 'hhg-modals'
+const getModalsRoot = () => {
+  let el = document.getElementById(MODAL_ROOT_ID)
+
+  if (!el) {
+    el = document.createElement('div')
+    el.setAttribute('id', MODAL_ROOT_ID)
+    document.body.append(el)
+  }
+
+  return el
+}
+const cleanUpModalShow = () => {
+  const selector = '.hhg-modal[data-open="true"]'
+  const remainingPopupOpened = document.querySelectorAll(selector)
+  // Remove the opening class if there are only 1 popup is shown
+  if (remainingPopupOpened.length < 1) {
+    document.body.classList.remove('hhc-modal-show')
+  }
+}
+const cleanUpDisabledScroll = () => {
+  // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero
+  const selector = '.hhg-modal[data-open="true"]'
+  const remainingPopupOpened = document.querySelectorAll(selector)
+  if (remainingPopupOpened.length < 1) {
+    document.body.style.overflow = ''
+    document.body.style.paddingRight = ''
+    document.body.classList.remove('hhc-disabled-scroll')
+  }
+}
+
+const Modal = ({
+  type = 'lead',
+  closeIcon,
+  isOpen = true,
+  onClose,
+  children,
+  className = '',
+  animationType = 'slideTop',
+  isStaticBackdrop = false,
+}: Props) => {
+  const [mounted, setMounted] = useState(false)
+  const elRef = useRef(null)
+  const { width: scrollBarWidth } = useScrollbarSize()
+
+  if (!elRef.current && mounted) {
+    elRef.current = document.createElement('div')
+  }
+
+  useEffect(() => {
+    setMounted(true)
+    return () => {
+      setMounted(false)
+      cleanUpModalShow()
+      cleanUpDisabledScroll()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (mounted) {
+      const modalsRoot = getModalsRoot()
+      modalsRoot.appendChild(elRef.current)
+      return () => {
+        modalsRoot.removeChild(elRef.current)
+      }
+    }
+  }, [mounted])
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.classList.add('hhc-modal-show')
+    } else {
+      cleanUpModalShow()
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+      document.body.style.paddingRight = scrollBarWidth + 'px'
+      document.body.classList.add('hhc-disabled-scroll')
+    } else {
+      cleanUpDisabledScroll()
+    }
+  }, [isOpen, scrollBarWidth])
+
+  if (!mounted) return null
+
+  const classes = ['hhg-modal__wrapper', className, animationType]
+    .filter((s) => s)
+    .join(' ')
+
+  return createPortal(
+    <StyledModalWrapper className={classes} data-open={isOpen} data-type={type}>
+      {!isStaticBackdrop && (
+        <StyledModalMask
+          data-open={isOpen}
+          onClick={onClose}
+          data-type={type}
+        />
+      )}
+      {!isStaticBackdrop && type === 'video' && !!closeIcon && (
+        <div className="hhg-modal__close" onClick={onClose}>
+          {closeIcon}
+        </div>
+      )}
+      <StyledModal className="hhg-modal" data-open={isOpen}>
+        <div
+          className={
+            type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content'
+          }
+        >
+          {!!closeIcon && type !== 'video' && (
+            <div className="hhg-modal__close" onClick={onClose}>
+              {closeIcon}
+            </div>
+          )}
+          {children}
+        </div>
+      </StyledModal>
+    </StyledModalWrapper>,
+    elRef.current,
+  )
+}
+
+export { Modal }

package/src/components/molecules/popup/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0 {
+  position: fixed;
+  left: 50%;
+  padding: 0 16px 32px;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0px 4px 8px #d9d9d9;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  -webkit-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+  visibility: hidden;
+}
+
+.c0[data-open='true'] {
+  z-index: 200;
+  top: 50%;
+  opacity: 1;
+  visibility: visible;
+}
+
+.c0[data-open='false'] {
+  top: -50%;
+}
+
+.c0[data-type='lead'] {
+  width: 332px;
+  height: 460px;
+}
+
+.c0[data-type='lead'] div {
+  top: -15px;
+  right: -15px;
+}
+
+.c0[data-type='form'] {
+  width: 496px;
+  height: 548px;
+}
+
+.c0 .popup-content {
+  position: relative;
+  z-index: 111;
+  height: 100%;
+  padding: 16px;
+}
+
+.c0 .close-button {
+  position: absolute;
+  top: 16px;
+  right: 0;
+  cursor: pointer;
+}
+
+.c0 .close-button img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+@media (max-width:767px) {
+  .c0[data-type='form'] {
+    width: 340px;
+  }
+}
+
+@media (max-width:767px) {
+  .c0[data-type='confirm'] {
+    width: calc(100% - 32px);
+  }
+}
+
+@media (min-width:768px) {
+  .c0[data-type='confirm'] {
+    width: 100%;
+    max-width: 407px;
+  }
+}
+
+<div
+  class="c0"
+  data-animation="true"
+  data-open="true"
+  data-type="lead"
+>
+  <div
+    class=" popup-content"
+  >
+    <div
+      class="close-button"
+    >
+      <img
+        src="https://source.unsplash.com/random/16x16"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/molecules/popup/index.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Popup, Props } from './index'
+
+export default {
+  component: Popup,
+  title: 'Molecules/Popup',
+  argTypes: { onClick: { action: 'clicked' } },
+}
+
+const Template: Story<Props> = (args) => <Popup {...args} />
+
+export const Lead = Template.bind({})
+
+Lead.args = {
+  type: 'lead',
+  closeIcon: <img src="https://source.unsplash.com/random/16x16" />,
+  children: <div>ok</div>,
+}

package/src/components/molecules/popup/index.styled.tsx

@@ -0,0 +1,90 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledPopup = styled.div`
+  position: fixed;
+  left: 50%;
+
+  padding: 0 16px 32px;
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+  border-radius: 6px;
+  box-shadow: 0px 4px 8px ${(props: ThemeProps) => props.theme.colors.gray200};
+  transform: translate(-50%, -50%);
+  transition: all 0.5s ease-in-out;
+  visibility: hidden;
+
+  &[data-open='true'] {
+    z-index: 200;
+    top: 50%;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &[data-open='false'] {
+    top: -50%;
+  }
+
+  &[data-type='lead'] {
+    width: 332px;
+    height: 460px;
+
+    div {
+      top: -15px;
+      right: -15px;
+    }
+  }
+
+  &[data-type='form'] {
+    width: 496px;
+    height: 548px;
+    ${MediaQueries.mbDown} {
+      width: 340px;
+    }
+  }
+
+  &[data-type='confirm'] {
+    ${MediaQueries.mbDown} {
+      width: calc(100% - 32px);
+    }
+    ${MediaQueries.mbUp} {
+      width: 100%;
+      max-width: 407px;
+    }
+  }
+
+  .popup-content {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    padding: 16px;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 16px;
+    right: 0;
+    cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+`
+
+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;
+  }
+`

package/src/components/molecules/popup/index.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { Popup } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const popup = render(
+    <MockTheme>
+      <Popup
+        isOpen
+        type="lead"
+        closeIcon={<img src="https://source.unsplash.com/random/16x16" />}
+        onClose={() => console.log('onClose')}
+      />
+    </MockTheme>,
+  )
+
+  const self = popup.container.firstChild
+
+  expect(self).toMatchSnapshot()
+})