DO NOT MERGE: Chapter organisms/03

src/organisms/Modal/Modal.component.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react'
+import styled from '@emotion/styled'
+import Portal from '../../utils/Portal'
+import Button from '../../atoms/Button'
+import { CloseOutlined } from '@material-ui/icons'
+
+export interface IModalProps extends IModalStyledProps {
+  header?: React.ReactNode
+  title: string
+  children: React.ReactNode
+  footer?: React.ReactNode
+  shouldShow: boolean
+  onCloseModal?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+}
+
+const Modal: React.FC<IModalProps> = ({
+  header,
+  title,
+  children,
+  footer,
+  shouldShow,
+  onCloseModal,
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = React.useState(shouldShow)
+
+  const onCloseModalHandler = (e) => {
+    onCloseModal && onCloseModal(e)
+    setIsOpen(false)
+  }
+
+  return isOpen ? (
+    <Portal>
+      <OverlayStyled onClick={onCloseModalHandler}>
+        <ModalStyled {...rest}>
+          <ButtonCloseStyled
+            backgroundColorHover="transparent"
+            backgroundColor="transparent"
+            StartIcon={CloseOutlined}
+            onClick={onCloseModalHandler}
+          />
+          {(header || title) && <HeaderStyled>{title}</HeaderStyled>}
+          <BodyStyled>{children}</BodyStyled>
+          {footer && <FooterStyled>{footer}</FooterStyled>}
+        </ModalStyled>
+      </OverlayStyled>
+    </Portal>
+  ) : null
+}
+
+interface IOverlayStyledProps {
+  background?: string
+  zIndex?: number
+}
+
+const OverlayStyled = styled.div<IOverlayStyledProps>`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  background: ${(props) => props.background ?? 'rgba(0,0,0,0.6)'};
+  top: 0;
+  left: 0;
+  z-index: ${(props) => props.zIndex ?? '20'};
+`
+
+export interface IModalStyledProps {
+  backgroundColor?: string
+  width?: string
+}
+const ModalStyled = styled.div<IModalStyledProps>`
+  position: relative;
+  border-radius: 2px;
+  margin: 48px 0 80px;
+  /* display:none; */
+  padding: 1.5rem;
+  background-color: ${(props) => props.backgroundColor ?? '#eaeaea'};
+  width: ${(props) => props.width ?? '768px'};
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`
+const ButtonCloseStyled = styled(Button)`
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  color: #ababab;
+  &:hover {
+    color: #7b7b7b;
+  }
+`
+
+const HeaderStyled = styled.div``
+
+const BodyStyled = styled.div``
+
+const FooterStyled = styled.div`
+  position: absolute;
+  bottom: 1.5rem;
+`
+
+export default Modal

src/organisms/Modal/Modal.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import Modal from '.'
+
+storiesOf('Organisms|Modal', module).add('Default', () => (
+  <Modal title="Some title here" shouldShow footer={<span>This is my footer</span>}>
+    <p>Test</p>
+  </Modal>
+))

src/organisms/Modal/Modal.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { matchers } from 'jest-emotion'
+import '@testing-library/jest-dom/extend-expect'
+
+import Modal, { IModalProps } from '.'
+
+expect.extend(matchers)
+
+describe('Modal Component', () => {
+  const renderComponent = (props: IModalProps, dataTestId: string) =>
+    render(<Modal data-testid={dataTestId} {...props} />)
+
+  let props
+  beforeEach(() => {
+    props = {
+      title: 'Some title here',
+      shouldShow: true,
+      footer: <span>This is my footer</span>,
+      children: <p>Test body</p>,
+    }
+  })
+
+  it('matches snapshot and default render', () => {
+    const dataTestId = 'modal'
+    const { getByTestId } = renderComponent(props, dataTestId)
+    const container = getByTestId('modal')
+    expect(container).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
+  })
+
+  it('closes the snapshot', () => {
+    const dataTestId = 'modal'
+    const { getByRole, getByTestId } = renderComponent(props, dataTestId)
+    const container = getByTestId('modal')
+    const closeButton = getByRole(/button/)
+    fireEvent.click(closeButton)
+    expect(container).not.toBeInTheDocument()
+  })
+})

src/organisms/Modal/__snapshots__/Modal.test.tsx.snap

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal Component matches snapshot and default render 1`] = `
+.emotion-4 {
+  position: relative;
+  border-radius: 2px;
+  margin: 48px 0 80px;
+  padding: 1.5rem;
+  background-color: #eaeaea;
+  width: 768px;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-0 {
+  color: #fff;
+  background-color: transparent;
+  font-size: 1rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  color: #ababab;
+}
+
+.emotion-0:hover {
+  color: #ababab;
+  background-color: transparent;
+}
+
+.emotion-0 svg:first-of-type {
+  margin-right: 4px;
+}
+
+.emotion-0 svg:last-child {
+  margin-left: 4px;
+}
+
+.emotion-0 svg:only-child {
+  margin: 0;
+}
+
+.emotion-0 > svg,
+.emotion-0 > span {
+  vertical-align: middle;
+}
+
+.emotion-0:hover {
+  color: #7b7b7b;
+}
+
+.emotion-3 {
+  position: absolute;
+  bottom: 1.5rem;
+}
+
+<div
+  class="emotion-4"
+  data-testid="modal"
+>
+  <button
+    class="emotion-0"
+  >
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+      />
+    </svg>
+  </button>
+  <div
+    class="emotion-1"
+  >
+    Some title here
+  </div>
+  <div
+    class="emotion-1"
+  >
+    <p>
+      Test body
+    </p>
+  </div>
+  <div
+    class="emotion-3"
+  >
+    <span>
+      This is my footer
+    </span>
+  </div>
+</div>
+`;

src/organisms/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Modal.component'
+export type { IModalProps } from './Modal.component'