Merge pull request #1 from edx/ahtesham/van-1840

feat: create popup base layout for forms

src/authn-component/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import BaseContainer from '../base-container';
+
+/**
+ * Main component that holds the logic for conditionally rendering login or registration form.
+ *
+ * @param {boolean} open - Required. Whether to open the modal window containing login or registration form.
+ * @param {function} setOpen - Required. Is used to toggle the modal window's open flag.
+ *
+ * @returns {JSX.Element} The rendered BaseContainer component containing either login or registration form.
+ */
+
+const AuthnComponent = ({
+  open, setOpen,
+}) => (
+  <BaseContainer open={open} setOpen={setOpen}>
+    <div>Login form</div>
+  </BaseContainer>
+);
+
+AuthnComponent.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+};
+
+export default AuthnComponent;

src/base-container/index.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { ModalDialog } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+
+import './index.scss';
+
+/**
+ * Base component for registration or login form modals.
+ *
+ * @param {boolean} open - Required. Whether to open the modal window.
+ * @param {function} setOpen - Required. Is used to toggle the modal window's open flag.
+ * @param {string} footerText - Optional. The text for the modal footer.
+ * @param {React.node} children - Required. The login or registration form.
+ *
+ * @returns {JSX.Element} The rendered login or registration form modal.
+ */
+
+const BaseContainer = ({
+  children, footerText, open, setOpen,
+}) => (
+  <ModalDialog
+    isOpen={open}
+    onClose={setOpen}
+    size="fullscreen"
+    variant="default"
+    className="bg-light-400"
+    hasCloseButton
+  >
+    <ModalDialog.Body className="modal-body-container overflow-hidden">
+      <div className="d-flex w-100 h-100">
+        <div className="w-50 d-flex">
+          {children}
+        </div>
+        <div className="w-50 d-flex">
+          <div className="w-100 h-100 bg-dark-500" />
+        </div>
+      </div>
+    </ModalDialog.Body>
+    {footerText && (
+      <ModalDialog.Footer className="bg-dark-500 p-4.5">
+        <p className="mb-0 text-white">{footerText}</p>
+      </ModalDialog.Footer>
+    )}
+  </ModalDialog>
+
+);
+
+BaseContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  footerText: PropTypes.string,
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+};
+
+BaseContainer.defaultProps = {
+  footerText: '',
+};
+
+export default BaseContainer;

src/base-container/index.scss

@@ -0,0 +1,18 @@
+@import "@edx/brand/paragon/variables";
+
+.modal-body-container .pgn__modal-body-content {
+    height: 100%;
+}
+
+// This class is related to close button of modal
+.pgn__modal-close-container {
+    background: $white;
+    border-radius: 50%;
+    border: 2px solid $light-500;
+}
+
+.pgn__modal-close-container .btn-icon__icon-container {
+    color: $light-700;
+}
+
+