style: formatting

src/containers/ResponseDisplay/PromptDisplay.jsx

@@ -1,20 +1,21 @@
 import React from 'react';
-import { Collapsible, Card } from '@openedx/paragon';
+import { Collapsible } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import PropTypes from 'prop-types';
 import messages from './messages';
 
 const PromptDisplay = ({
-  prompt, className, styling, headerTitle,
+  prompt,
 }) => {
   const intl = useIntl();
   const msg = intl.formatMessage(messages.promptCollapsibleHeader);
   return (
-    <div className={className}>
+    <div className="prompt-display">
       <Collapsible
-        styling={styling}
-        title={headerTitle ? <h3>{msg}</h3> : msg}
+        defaultOpen
+        styling="card-lg"
+        title={<h3>{msg}</h3>}
       >
         { prompt }
       </Collapsible>
@@ -24,28 +25,6 @@ const PromptDisplay = ({
 
 PromptDisplay.propTypes = {
   prompt: PropTypes.string.isRequired,
-  className: PropTypes.string.isRequired,
-  styling: PropTypes.string.isRequired,
-  headerTitle: PropTypes.bool.isRequired,
 };
 
-const SinglePromptDisplay = ({ prompt }) => (
-  <PromptDisplay prompt={prompt} className="prompt-display-single" styling="card-lg" headerTitle />
-);
-
-SinglePromptDisplay.propTypes = {
-  prompt: PropTypes.string.isRequired,
-};
-
-const MultiplePromptDisplay = ({ prompt }) => (
-  <>
-    <PromptDisplay prompt={prompt} className="prompt-display-multiple" styling="basic" headerTitle={false} />
-    <Card.Divider />
-  </>
-);
-
-MultiplePromptDisplay.propTypes = {
-  prompt: PropTypes.string.isRequired,
-};
-
-export { SinglePromptDisplay, MultiplePromptDisplay };
+export default PromptDisplay;

src/containers/ResponseDisplay/ResponseDisplay.scss

@@ -8,8 +8,8 @@
     padding: var(--pgn-spacing-spacer-3) 0;
   }
 
-  .prompt-display-multiple > .collapsible-basic .collapsible-trigger{
-    text-decoration: none!important;
+  .prompt-display-multiple > .collapsible-basic .collapsible-trigger {
+    text-decoration: none !important;
   }
 
   .submission-files {

src/containers/ResponseDisplay/index.jsx

@@ -14,7 +14,7 @@ import { fileUploadResponseOptions } from 'data/services/lms/constants';
 import { getConfig } from '@edx/frontend-platform';
 import SubmissionFiles from './SubmissionFiles';
 import PreviewDisplay from './PreviewDisplay';
-import { SinglePromptDisplay, MultiplePromptDisplay } from './PromptDisplay';
+import PromptDisplay from './PromptDisplay';
 import './ResponseDisplay.scss';
 
 /**
@@ -56,16 +56,18 @@ export class ResponseDisplay extends React.Component {
     const multiPrompt = prompts.length > 1;
     return (
       <div className="response-display">
-        {!multiPrompt && <SinglePromptDisplay prompt={prompts[0]} />}
+        {!multiPrompt && <PromptDisplay prompt={prompts[0]} />}
         {this.allowFileUpload && <SubmissionFiles files={this.submittedFiles} data-testid="submission-files" />}
         {this.allowFileUpload && <PreviewDisplay files={this.submittedFiles} data-testid="allow-file-upload" />}
         {
           /*  eslint-disable react/no-array-index-key */
           this.textContents.map((textContent, index) => (
-            <Card className="response-display-card" key={index}>
-              {multiPrompt && <MultiplePromptDisplay prompt={prompts[index]} />}
-              <Card.Section className="response-display-text-content" data-testid="response-display-text-content">{textContent}</Card.Section>
-            </Card>
+            <>
+              { multiPrompt && <PromptDisplay prompt={prompts[index]} /> }
+              <Card className="response-display-card" key={index}>
+                <Card.Section className="response-display-text-content" data-testid="response-display-text-content">{textContent}</Card.Section>
+              </Card>
+            </>
           ))
         }
       </div>

src/data/redux/app/selectors.js

@@ -34,7 +34,7 @@ export const ora = {
   name: oraMetadataSelector(data => data.name),
   /**
    * Returns the ORA Prompts
-   * @return {array[string]} - ORA prompt
+   * @return {array[]} - List of ORA prompts
    */
   prompts: oraMetadataSelector(data => (data.prompts ? data.prompts.map((oraPrompt) => oraPrompt.description) : [])),
   /**