added Modal component, demo, and docs

src/components/Modal/Modal.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Modal.scss';
+
+const Modal = (props) => {
+  if (props.isOpen) {
+    return (
+      <div className="modal__wrapper">
+        <div className="modal__backdrop" />
+        <div className="modal__box">{props.children}</div>
+      </div>
+    );
+  }
+  return null;
+};
+
+export default Modal;
+
+Modal.propTypes = {
+  isOpen: PropTypes.bool,
+};
+
+Modal.defaultProps = {
+  isOpen: false,
+};

src/components/Modal/Modal.scss

@@ -0,0 +1,31 @@
+.modal__wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.modal__backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.modal__box {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 70%;
+  width: 60%;
+  background-color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+  z-index: 101;
+  overflow-y: auto;
+  padding: 40px;
+}

src/components/Modal/Modal.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Modal from './Modal';
+
+describe('<Modal>', () => {
+  it('should create the component', () => {
+    const { container } = render(<Modal />);
+    expect(container).toBeTruthy();
+  });
+});

src/demos/DemoDisplay.jsx

@@ -1,8 +1,3 @@
-/* eslint-disable no-console */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import './DemoDisplay.scss';
 
 const importView = (DemoComponentName) =>
   React.lazy(() =>

src/demos/ModalDemo.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import Modal from '../components/Modal/Modal';
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const closeModalHandler = () => {
+    setIsOpen(false);
+  };
+
+  const openModalHandler = () => {
+    setIsOpen(true);
+  };
+
+  return (
+    <div className="App">
+      <button className="modal__btn-open" onClick={openModalHandler}>
+        Open Modal
+      </button>
+      <Modal isOpen={isOpen}>
+        <button className="modal__btn-close" onClick={closeModalHandler}>
+          Close
+        </button>
+        <h1>Modal Header</h1>
+        <p>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint eum
+          alias neque fuga asperiores, deleniti pariatur sapiente eligendi
+          doloremque. Mollitia, facere tempora modi asperiores eum perspiciatis
+          iste ipsum eaque explicabo.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi odit
+          ducimus similique quo a quis itaque hic, impedit atque voluptatem
+          doloribus assumenda nulla saepe molestiae aliquid corrupti magnam sint
+          laboriosam.
+        </p>
+      </Modal>
+    </div>
+  );
+}
+
+export default App;

src/docs/avatar.md

@@ -1,4 +1,4 @@
-## Usage 
+## Usage
 
 ```
 import React from 'react'
@@ -17,11 +17,10 @@ export default App;
 
 ### Properties
 
-| Property | Type   | Required | Default value | Description |
-|----------|--------|----------|---------------|------------|
-| name     | string | yes      | \-            |Alternative text description of the image or Title avatar|
-| src      | string | no       | \-            |Image to display.|
-| size     | string | no       | md            | sx, sm, md, lg and xl font sizes. |
-
+| Property | Type   | Required | Default value | Description                                               |
+| -------- | ------ | -------- | ------------- | --------------------------------------------------------- |
+| name     | string | yes      | \-            | Alternative text description of the image or Title avatar |
+| src      | string | no       | \-            | Image to display.                                         |
+| size     | string | no       | md            | sx, sm, md, lg and xl font sizes.                         |
 
 ### Sample

src/docs/modal.md

@@ -0,0 +1,54 @@
+## Usage
+
+```
+import React, { useState } from 'react';
+import Modal from '../components/Modal/Modal';
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const closeModalHandler = () => {
+    setIsOpen(false);
+  };
+
+  const openModalHandler = () => {
+    setIsOpen(true);
+  };
+
+  return (
+    <div className="App">
+      <button className="modal__btn-open" onClick={openModalHandler}>
+        Open Modal
+      </button>
+      <Modal isOpen={isOpen}>
+        <button className="modal__btn-close" onClick={closeModalHandler}>
+          Close
+        </button>
+        <h1>Modal Header</h1>
+        <p>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint eum
+          alias neque fuga asperiores, deleniti pariatur sapiente eligendi
+          doloremque. Mollitia, facere tempora modi asperiores eum perspiciatis
+          iste ipsum eaque explicabo.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi odit
+          ducimus similique quo a quis itaque hic, impedit atque voluptatem
+          doloribus assumenda nulla saepe molestiae aliquid corrupti magnam sint
+          laboriosam.
+        </p>
+      </Modal>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Properties
+
+| Property | Type    | Required | Default value | Description                                 |
+| :------- | :------ | :------- | :------------ | :------------------------------------------ |
+| `isOpen` | Boolean | yes      | none          | set to true if the modal is to be displayed |
+
+### Sample

src/exports/exports.js

@@ -3,3 +3,4 @@ export { default as SimpleButtonDemo } from '../demos/SimpleButtonDemo';
 export { default as HeadingDemo } from '../demos/HeadingDemo';
 export { default as AvatarDemo } from '../demos/AvatarDemo';
 export { default as ProgressBarDemo } from '../demos/ProgressBarDemo';
+