diff --git a/example/index.jsx b/example/index.jsx index 167a8eee..9914eb60 100644 --- a/example/index.jsx +++ b/example/index.jsx @@ -7,11 +7,14 @@ 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( -
Load the forms here
+ {}}> +
Login Form
+
, document.getElementById('root'), ); diff --git a/src/base-container/PrivacyPolicyFooter.jsx b/src/base-container/PrivacyPolicyFooter.jsx new file mode 100644 index 00000000..6fecbd86 --- /dev/null +++ b/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 ( +

+ {formatMessage(messages.privacyPolicyLabel)} +

+ ); +}; +export default PrivacyPolicy; diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx new file mode 100644 index 00000000..908f554a --- /dev/null +++ b/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, +}) => ( + + +
+
+ {children} +
+ +
+ +
+ + + {isPrivacyPolicy && ()} + + +); + +BaseContainer.defaultProps = { + isPrivacyPolicy: false, +}; + +BaseContainer.propTypes = { + children: PropTypes.node.isRequired, + open: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + isPrivacyPolicy: PropTypes.bool, +}; + +export default BaseContainer; diff --git a/src/base-container/index.scss b/src/base-container/index.scss new file mode 100644 index 00000000..f80ec157 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/base-container/layout/LargeLayout.jsx b/src/base-container/layout/LargeLayout.jsx new file mode 100644 index 00000000..dbdea002 --- /dev/null +++ b/src/base-container/layout/LargeLayout.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LargeLayout = ({ children }) => ( +
+ {children} +
+); + +LargeLayout.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default LargeLayout; diff --git a/src/base-container/messages.js b/src/base-container/messages.js new file mode 100644 index 00000000..dfb6927e --- /dev/null +++ b/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;