add component: AbModal

README.md

@@ -52,6 +52,8 @@ Segue abaixo a lista de componentes disponíveis. Lembrando que você pode visua
 
 - `<AbTextInput />`: input de texto com uma label, em que é possível passar via props o texto para a label e o placeholder, bem como escolher o tipo do input (`text`, `passoword`, `email` e `date`).
 
+- `<AbModal /`>: um modal que recebe um título, um booleano para controlar se o modal está aberto ou fechado, e uma função onClose. Você pode adicionar conteúdo ao modal passando-o como `children`.
+
 ## O que eu aprendi
 
 ### TSDX
@@ -190,6 +192,8 @@ Here is the list of available components (their content is rendered in Portugues
 
 - `<AbTextInput />`: A text input with a label where you can pass the texts to the label and placeholder via props, as well as choose the input type (`text`, `password`, `email`, and `date`).
 
+- `<AbModal /`>: A modal that receives a title string, a boolean to open/close the modal and a onClose function. You can add content to the modal by passing other elements as `children`.
+
 ## Installation
 
 This project was bootstrapped with TSDX (version 0.14.1), using Node.js (version v16.15.1) and npm (version 8.11.0). You need Node.js and npm installed in order to run this project.

example/index.tsx

@@ -1,12 +1,18 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { AbButton } from '../.';
+import { AbButton, AbModal } from '../.';
 
+// in order to import new components from your storybook, 
+// remember to run npm run build
 const App = () => {
+  const [open, setOpen] = React.useState(false);
   return (
     <div>
-      <AbButton />
+      <AbButton text='Abrir modal' onClick={() => setOpen(true)} />
+      <AbModal title='Testando' open={open} onClose={() => setOpen(false)}>
+        <p>Conteúdo muuuuuuuuito legal</p>
+      </AbModal>
     </div>
   );
 };

src/components/AbModal/index.tsx

@@ -0,0 +1,69 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+
+export interface AbModalProps {
+    children: ReactNode,
+    title: string,
+    open: boolean, // wheter the Modal will be visible or not
+    onClose: () => void
+}
+
+const ModalWindow = styled.section`
+    position: fixed;
+    padding: 64px;
+    background: #FFF;
+    box-shadow: 4px 4px 24px -4px rgba(0,0,0,.15);
+    border-radius: 24px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); // sliding effect
+`;
+
+// darker, kind of opaque background covering the entire screen
+const ModalBg = styled.div`
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: rgba(101,101,101,.85);
+`;
+
+const ModalTitleWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+    font-family: sans-serif;
+    align-items: center;
+`;
+
+const ModalTitle = styled.h2`
+    font-weight: 700px;
+    font-size: 32px;
+    line-height: 48px;
+    color: #EB9B00;
+    margin: 0;
+`;
+
+const ModalCloseBtn = styled.button`
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: #002F52;
+`;
+
+export const AbModal = ({ children, title, open, onClose }: AbModalProps) => {
+    if (!open) return <></>
+    return (
+        <>
+            {/* close the modal either by clicking on the background or the close button */}
+            <ModalBg onClick={onClose}></ModalBg>
+            <ModalWindow>
+                <ModalTitleWrapper>
+                    <ModalTitle>{title}</ModalTitle>
+                    <ModalCloseBtn onClick={onClose}>X</ModalCloseBtn>
+                </ModalTitleWrapper>
+                {children}
+            </ModalWindow>
+        </>
+    )
+}

src/index.tsx

@@ -19,4 +19,5 @@ export * from './components/AbCard';
 export * from './components/AbTag';
 export * from './components/AbOptionsGroup';
 export * from './components/AbTextInput';
-export * from './components/AbQuantityInput';
+export * from './components/AbQuantityInput';
+export * from './components/AbModal';

stories/AbModal.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { AbModal, AbModalProps } from '../src'
+
+export default {
+    title: 'Components/AbModal',
+    component: AbModal
+} as ComponentMeta<typeof AbModal>
+
+const Template: ComponentStory<typeof AbModal> = (args) => <AbModal {...args} />;
+
+export const Modal = Template.bind({});
+Modal.args = {
+    children: <p>This is the content of the modal</p>,
+    title: 'Title of this modal',
+    open: true,
+} as AbModalProps