Add accessible modal

lms/static/js/accessible_components/Modal.jsx → lms/static/js/accessible_components/InstructorBioModal.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Modal from '@edx/paragon/src/Modal/index';
 import PropTypes from 'prop-types';
 
-class ModalWrapper extends React.Component {
+export class InstructorBioModal extends React.Component {
     constructor(props) {
         super(props);
 
@@ -30,33 +30,18 @@ class ModalWrapper extends React.Component {
             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; }}
-            />
+            <button className="btn btn-primary" onClick={this.openModal} ref={(button)=>{this.button=button}}>
+                {gettext('View Bio')}
+            </button>
         </div>
         );
     }
 }
-ModalWrapper.propTypes = {
+InstructorBioModal.propTypes = {
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
     body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
 };
   
-ModalWrapper.defaultProps = {
+InstructorBioModal.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

@@ -338,17 +338,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>
       % for instructor in instructors:
+        <%
+          instructor_hash = hash(instructor['name'])
+        %>
         <div class="col-12 col-sm-6 col-md-4 instructor">
           <div>
             <img alt="" src="${instructor['image']}"/>
@@ -363,9 +359,14 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
             <div class="instructor-bio">
               ${HTML(instructor.get('bio'))}
             </div>
-            <button class="btn btn-primary">
-                ${_('View Bio')}
-            </button>
+            ${static.renderReact(
+              component="InstructorBioModal",
+              id="container-id-" + str(instructor_hash),
+              props={
+                'title': instructor['name'],
+                'body': HTML(instructor.get('bio'))
+              }
+            )}
           </div>
           % endif
         </div>

webpack.common.config.js

@@ -25,7 +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',
+        InstructorBioModal: './lms/static/js/accessible_components/InstructorBioModal.jsx',
 
         // Features
         CourseGoals: './openedx/features/course_experience/static/course_experience/js/CourseGoals.js',