feat: create popup base layout for forms

Description:
Create popup basic layout for forms
VAN-1840

example/index.jsx

@@ -7,11 +7,13 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initialize, subscribe, APP_READY } from '@edx/frontend-platform';
 
 import './index.scss';
+import BaseContainer from '../src/base-container'
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
-      <div>Load the forms here</div>
+      <BaseContainer open isPrivacyPolicy onClose={() => {}}>
+      </BaseContainer> 
     </AppProvider>,
     document.getElementById('root'),
   );

src/base-container/PrivacyPolicyFooter.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const PrivacyPolicy = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <p className="bg-dark-500 p-4 text-light-100 privacy-policy-content">
+      {formatMessage(messages.privacyPolicyLabel)}
+    </p>
+  );
+};
+export default PrivacyPolicy;

src/base-container/index.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { ModalDialog } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import PrivacyPolicy from './PrivacyPolicyFooter';
+import LargeLayout from './layout/LargeLayout';
+import './index.scss';
+
+const BaseContainer = ({
+  children, open, onClose, isPrivacyPolicy,
+}) => (
+  <ModalDialog
+    isOpen={open}
+    onClose={onClose}
+    size="fullscreen"
+    variant="default"
+    hasCloseButton
+  >
+    <ModalDialog.Body className="modal-body-container overflow-hidden">
+      <div className="modal-body-content-layout">
+        <div className="w-50 d-flex">
+          {children}
+        </div>
+        <LargeLayout>
+          <div className="w-100 h-100 bg-dark-500" />
+        </LargeLayout>
+      </div>
+    </ModalDialog.Body>
+    <ModalDialog.Footer className="modal-footer-content">
+      {isPrivacyPolicy && (<PrivacyPolicy />)}
+    </ModalDialog.Footer>
+  </ModalDialog>
+);
+
+BaseContainer.defaultProps = {
+  isPrivacyPolicy: false,
+};
+
+BaseContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  isPrivacyPolicy: PropTypes.bool,
+};
+
+export default BaseContainer;

src/base-container/index.scss

@@ -0,0 +1,22 @@
+.modal-body-container .pgn__modal-body-content {
+    height: 100%;
+}
+
+.modal-body-container .modal-body-content-layout {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.pgn__modal-close-container {
+    background: white;
+    border-radius: 50%;
+}
+
+.modal-footer-content {
+    padding: 0 !important;
+}
+
+.privacy-policy-content {
+    margin-bottom: 0px;
+}

src/base-container/layout/LargeLayout.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LargeLayout = ({ children }) => (
+  <div className="w-50 d-flex">
+    {children}
+  </div>
+);
+
+LargeLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default LargeLayout;

src/base-container/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  privacyPolicyLabel: {
+    id: 'privacy.policy.label',
+    defaultMessage: 'By creating an account, you agree to the Terms of '
+        + 'Service and Honor Code and you acknowledge that edX and '
+        + 'each Member process your personal data in accordance with the Privacy Policy.',
+    description: 'Label for Privacy Policy',
+  },
+});
+
+export default messages;