chore: change card body to card section

src/components/InfoPopover/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`Info Popover Component snapshot 1`] = `
   overlay={
     <Popover
       className="overlay-help-popover"
-      id="popover"
+      id="info-popover"
     >
       <Popover.Content>
         <div>

src/components/InfoPopover/index.jsx

@@ -23,7 +23,7 @@ export const InfoPopover = ({ onClick, children, intl }) => (
     placement="right-end"
     flip
     overlay={(
-      <Popover id="popover" className="overlay-help-popover">
+      <Popover id="info-popover" className="overlay-help-popover">
         <Popover.Content>{children}</Popover.Content>
       </Popover>
     )}

src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap

@@ -5,11 +5,11 @@ exports[`ResponseDisplay component snapshot file upload disable with valid respo
   className="response-display"
 >
   <Card>
-    <Card.Body
+    <Card.Section
       className="response-display-text-content"
     >
       parsed html (sanitized (some text response here))
-    </Card.Body>
+    </Card.Section>
   </Card>
 </div>
 `;
@@ -64,11 +64,11 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
     }
   />
   <Card>
-    <Card.Body
+    <Card.Section
       className="response-display-text-content"
     >
       parsed html (sanitized (some text response here))
-    </Card.Body>
+    </Card.Section>
   </Card>
 </div>
 `;

src/containers/ResponseDisplay/index.jsx

@@ -48,7 +48,7 @@ export class ResponseDisplay extends React.Component {
           /*  eslint-disable react/no-array-index-key */
           this.textContents.map((textContent, index) => (
             <Card key={index}>
-              <Card.Body className="response-display-text-content">{textContent}</Card.Body>
+              <Card.Section className="response-display-text-content">{textContent}</Card.Section>
             </Card>
           ))
         }

src/containers/Rubric/__snapshots__/index.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`Rubric Container shapshot: hide footer 1`] = `
   <Card
     className="grading-rubric-card"
   >
-    <Card.Body
+    <Card.Section
       className="grading-rubric-body"
     >
       <h3>
@@ -28,7 +28,7 @@ exports[`Rubric Container shapshot: hide footer 1`] = `
       />
       <hr />
       <RubricFeedback />
-    </Card.Body>
+    </Card.Section>
   </Card>
   <DemoAlert
     prop="demo-alert-props"
@@ -41,7 +41,7 @@ exports[`Rubric Container snapshot: show footer 1`] = `
   <Card
     className="grading-rubric-card"
   >
-    <Card.Body
+    <Card.Section
       className="grading-rubric-body"
     >
       <h3>
@@ -64,7 +64,7 @@ exports[`Rubric Container snapshot: show footer 1`] = `
       />
       <hr />
       <RubricFeedback />
-    </Card.Body>
+    </Card.Section>
     <div
       className="grading-rubric-footer"
     >

src/containers/Rubric/index.jsx

@@ -29,13 +29,13 @@ export const Rubric = ({ intl }) => {
   return (
     <>
       <Card className="grading-rubric-card">
-        <Card.Body className="grading-rubric-body">
+        <Card.Section className="grading-rubric-body">
           <h3>{intl.formatMessage(messages.rubric)}</h3>
           <hr className="m-2.5" />
           {criteria.map(props => <CriterionContainer {...props} />)}
           <hr />
           <RubricFeedback />
-        </Card.Body>
+        </Card.Section>
         {showFooter && (
           <div className="grading-rubric-footer">
             <StatefulButton

src/setupTest.js

@@ -38,6 +38,7 @@ jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedCompon
   Button: 'Button',
   Card: {
     Body: 'Card.Body',
+    Section: 'Card.Section',
     Footer: 'Card.Footer',
   },
   Col: 'Col',