chore: component re-organization for work sharing

src/containers/CourseCard/components/Banners/index.jsx

@@ -0,0 +1,3 @@
+export { default as CourseBanner } from './CourseBanner';
+export { default as CertificateBanner } from './CertificateBanner';
+export { default as EntitlementBanner } from './EntitlementBanner';

src/containers/CourseCard/components/CourseCardBanners/index.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import shapes from 'data/services/lms/shapes';
-
-import CourseBanner from './components/CourseBanner';
-import CertificateBanner from './components/CertificateBanner';
-import EntitlementBanner from './components/EntitlementBanner';
-
-export const CourseCardBanners = ({ cardData }) => (
-  <>
-    <CourseBanner cardData={cardData} />
-    <CertificateBanner cardData={cardData} />
-    <EntitlementBanner cardData={cardData} />
-  </>
-);
-CourseCardBanners.propTypes = {
-  cardData: shapes.courseRunCardData.isRequired,
-};
-
-export default CourseCardBanners;

src/containers/CourseCard/index.jsx

@@ -6,7 +6,11 @@ import shapes from 'data/services/lms/shapes';
 
 import RelatedProgramsBadge from './components/RelatedProgramsBadge';
 import CourseCardMenu from './components/CourseCardMenu';
-import CourseCardBanners from './components/CourseCardBanners';
+import {
+  CourseBanner,
+  CertificateBanner,
+  EntitlementBanner,
+} from './components/Banners';
 import CourseCardActions from './components/CourseCardActions';
 
 export const CourseCard = ({ cardData }) => {
@@ -27,8 +31,6 @@ export const CourseCard = ({ cardData }) => {
         <Card.ImageCap
           src={imageUrl}
           srcAlt="course thumbnail"
-          // logoSrc='https://via.placeholder.com/150'
-          // logoAlt='Card logo'
         />
         <Card.Body>
           <Card.Header
@@ -46,7 +48,11 @@ export const CourseCard = ({ cardData }) => {
           </Card.Footer>
         </Card.Body>
       </Card>
-      <CourseCardBanners cardData={cardData} />
+      <div className="course-card-banners">
+        <CourseBanner cardData={cardData} />
+        <CertificateBanner cardData={cardData} />
+        <EntitlementBanner cardData={cardData} />
+      </div>
     </div>
   );
 };

src/containers/EmptyCourse/components/ExampleCoursesWidget/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleCoursesWidget = () => (
+  <div className="example-courses-widget">
+    Some courses you may be interested in
+  </div>
+);
+
+export default ExampleCoursesWidget;

src/containers/EmptyCourse/index.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
-import messages from './messages';
 
+import ExampleCoursesWidget from './components/ExampleCoursesWidget';
+import messages from './messages';
 import './index.scss';
 
 export const EmptyCourse = () => (
@@ -17,6 +18,7 @@ export const EmptyCourse = () => (
     <Button variant="brand">
       <FormattedMessage {...messages.exploreCoursesButton} />
     </Button>
+    <ExampleCoursesWidget />
   </div>
 );
 

src/containers/LearnerDashboardHeader/index.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from 'react-intl';
 import { AppContext } from '@edx/frontend-platform/react';
 import { Program } from '@edx/paragon/icons';
 import { Button } from '@edx/paragon';
@@ -8,13 +8,16 @@ import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import GreetingBanner from './GreetingBanner';
 import messages from './messages';
 
-export const LearnerDashboardHeader = ({ intl }) => {
+export const LearnerDashboardHeader = () => {
   const { authenticatedUser } = useContext(AppContext);
+  const { formatMessage } = useIntl();
   return (
     <div className="d-flex flex-column bg-primary">
       <header className="learner-dashboard-header">
         <div className="d-flex">
-          <Button variant="inverse-tertiary" iconBefore={Program}>{intl.formatMessage(messages.switchToProgram)}</Button>
+          <Button variant="inverse-tertiary" iconBefore={Program}>
+            {formatMessage(messages.switchToProgram)}
+          </Button>
           <div className="flex-grow-1" />
           {authenticatedUser && (
             <AuthenticatedUserDropdown username={authenticatedUser.username} />
@@ -27,10 +30,6 @@ export const LearnerDashboardHeader = ({ intl }) => {
 };
 
 LearnerDashboardHeader.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-LearnerDashboardHeader.defaultProps = {
-};
-
-export default injectIntl(LearnerDashboardHeader);
+export default LearnerDashboardHeader;

src/containers/RelatedProgramsModal/index.jsx

@@ -23,9 +23,9 @@ export const RelatedProgramsModal = ({ isOpen, closeModal, cardData }) => {
       size="lg"
       className="related-programs-modal p-4"
     >
-      <ModalDialog.Title className="programs-title m-0 p-0">
+      <ModalDialog.Header className="programs-title m-0 p-0" as="h3">
         {formatMessage(messages.header)}
-      </ModalDialog.Title>
+      </ModalDialog.Header>
       <ModalDialog.Header as="h4" className="programs-header p-0">
         {cardData.course.title}
       </ModalDialog.Header>