Bw/recommendations panel (#63)

Co-authored-by: Shafqat Farhan <shafqat.farhan@arbisoft.com>

src/widgets/RecommendationsPanel/components/CourseCard.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Card, Hyperlink, Truncate } from '@edx/paragon';
+
+import { useIsCollapsed } from 'containers/CourseCard/hooks';
+import './index.scss';
+
+export const CourseCard = ({ course }) => {
+  const isCollapsed = useIsCollapsed();
+  return (
+    <Hyperlink destination={course?.marketingUrl} className="card-link">
+      <Card orientation={isCollapsed ? 'vertical' : 'horizontal'} className="p-3 mb-1 recommended-course-card">
+        <div className={isCollapsed ? '' : 'd-flex align-items-center'}>
+          <Card.ImageCap
+            src={course.logoImageUrl}
+            srcAlt={course.title}
+          />
+          <Card.Body className="d-flex align-items-center">
+            <Card.Section className={isCollapsed ? 'pt-3' : 'pl-3'}>
+              <h4 className="text-info-500">
+                <Truncate lines={3}>
+                  {course.title}
+                </Truncate>
+              </h4>
+            </Card.Section>
+          </Card.Body>
+        </div>
+      </Card>
+    </Hyperlink>
+  );
+};
+
+CourseCard.propTypes = {
+  course: PropTypes.shape({
+    courseKey: PropTypes.string,
+    title: PropTypes.string,
+    logoImageUrl: PropTypes.string,
+    marketingUrl: PropTypes.string,
+  }).isRequired,
+};
+
+export default CourseCard;

src/widgets/RecommendationsPanel/components/index.scss

@@ -0,0 +1,33 @@
+@import "@edx/paragon/scss/core/core";
+
+.card-link{
+  display: block !important;
+  margin: 0.5rem 0 0.5rem 0 !important;
+}
+
+.recommended-course-card {
+    margin: 0.5rem 0 0.5rem 0 !important;
+
+  .pgn__card-wrapper-image-cap {
+    width: 7.188rem !important;
+    max-width: 7.188rem !important;
+    min-width: 7.188rem !important;
+    height: 4.125rem !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    padding: 0.5rem;
+
+    .pgn__card-image-cap {
+      max-width: 100% !important;
+      max-height: 100% !important;
+    }
+  }
+  .pgn__card-section {
+    padding: 0;
+  }
+  margin-top: 0.313rem;
+}
+
+.text-info-500 {
+  margin: 0 !important;
+}