Modal work

lms/static/js/accessible_components/Modal.jsx

+import React from 'react';
+import Modal from '@edx/paragon/src/Modal/index';
+import PropTypes from 'prop-types';
+
+class ModalWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.openModal = this.openModal.bind(this);
+        this.resetModalWrapperState = this.resetModalWrapperState.bind(this);
+
+        this.state = { open: false };
+    }
+
+    openModal() {
+        this.setState({ open: true });
+    }
+
+    resetModalWrapperState() {
+        this.setState({ open: false });
+        this.button.focus();
+    }
+
+    render() {
+        return (
+        <div>
+            <Modal
+            open={this.state.open}
+            title={this.props.title}
+            body={this.props.body}
+            onClose={this.resetModalWrapperState}
+            />
+            <Button
+            onClick={this.openModal}
+            label="Click me to open a modal!"
+            buttonType="light"
+            inputRef={(input) => { this.button = input; }}
+            />
+        </div>
+        );
+    }
+}
+ModalWrapper.propTypes = {
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+    body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+};
+  
+ModalWrapper.defaultProps = {
+    open: false,
+};
+
+
+export class Modalx extends React.Component{
+    render(){
+        return (
+            <ModalWrapper
+                title="Matt's Modal"
+                body="This is Matt's Bio"
+            />
+        )
+    }
+}
\ No newline at end of file

lms/templates/courseware/program_marketing.html

@@ -337,6 +337,13 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
   % if instructors:
     <hr class="thick_rule">
     <div id="instructors" class="row">
+      ${static.renderReact(
+        component="Modalx",
+        id="container-id",
+        props={
+          'title': 'bar'
+        }
+      )}
       <div class="col-12">
         <h2>${_('Instructors')}</h2>
       </div>

webpack.common.config.js

@@ -25,6 +25,7 @@ module.exports = {
         // LMS
         SingleSupportForm: './lms/static/support/jsx/single_support_form.jsx',
         AlertStatusBar: './lms/static/js/accessible_components/StatusBarAlert.jsx',
+        Modalx: './lms/static/js/accessible_components/Modal.jsx',
 
         // Features
         CourseGoals: './openedx/features/course_experience/static/course_experience/js/CourseGoals.js',