1 files changed, 55 insertions, 0 deletions
diff --git a/src/react/Modal.js b/src/react/Modal.js
new file mode 100644
index 0000000..ab2f7d7
--- /dev/null
+++ b/src/react/Modal.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Portal  from './Portal.js';
+import Body from './ModalBody.js';
+import Header from './ModalHeader.js';
+import Footer from './ModalFooter.js';
+import Title from './ModalTitle.js';
+
+export const modalSize = {
+	medium: 'md',
+	large: 'l',
+	extraLarge: 'xl',
+	small: 'sm',
+	extraSmall: 'xsm'
+};
+
+
+class Modal extends React.Component {
+	
+	render() {       
+		const {size, type, children, show} = this.props;				
+		return (           
+            <Portal>  
+				<div ref={el => { this.modalRef = el;}}>
+					{show && <div className={`sdc-modal ${modalSize[size]}`}>
+						<div className={`sdc-modal__wrapper sdc-modal-type-${type}`}>
+							{children}
+						</div>
+					</div>}            
+					{show && <div className='modal-background' />}
+				</div>    
+            </Portal>
+		);
+	}	
+}
+
+Modal.defaultProps = {
+	show: false,
+	size: 'medium',
+	type: 'info'
+};
+
+Modal.propTypes = {
+	show: PropTypes.bool,
+	size: PropTypes.string,
+	children: PropTypes.node,
+	type: PropTypes.string
+};
+
+Modal.Body = Body;
+Modal.Header = Header;
+Modal.Footer = Footer;
+Modal.Title = Title; 
+export default Modal;
+\ No newline at end of file