feat: content highlights stepper updates, including refactor to use context selectors and connects to Algolia for course search results

.env.development

@@ -15,6 +15,7 @@ ENTERPRISE_ACCESS_BASE_URL='http://localhost:18270'
 ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:8734'
 ENTERPRISE_SUPPORT_URL='https://edx.org'
 ENTERPRISE_SUPPORT_REVOKE_LICENSE_URL='https://edx.org'
+ENTERPRISE_SUPPORT_PROGRAM_OPTIMIZATION_URL='https://edx.org'
 SEGMENT_KEY=''
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 USER_INFO_COOKIE_NAME='edx-user-info'

package.json

@@ -30,7 +30,7 @@
     "@edx/frontend-enterprise-logistration": "2.1.0",
     "@edx/frontend-enterprise-utils": "2.1.0",
     "@edx/frontend-platform": "2.4.0",
-    "@edx/paragon": "20.19.0",
+    "@edx/paragon": "20.20.0",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",
@@ -43,7 +43,6 @@
     "color-contrast-checker": "^2.1.0",
     "core-js": "3.7.0",
     "dash-embedded-component": "file:packages/dash-embedded-component-2.0.2.tgz",
-    "faker": "4.1.0",
     "file-saver": "1.3.8",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
@@ -68,9 +67,11 @@
     "redux-mock-store": "1.5.4",
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "0.13.7",
+    "scheduler": "^0.23.0",
     "timeago.js": "^4.0.2",
     "universal-cookie": "4.0.4",
     "url": "0.11.0",
+    "use-context-selector": "^1.4.1",
     "uuid": "9.0.0",
     "validator": "10.11.0"
   },
@@ -86,6 +87,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.0.0",
     "@edx/frontend-build": "^12.3.0",
+    "@faker-js/faker": "^7.6.0",
     "@testing-library/dom": "7.31.2",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.7",

src/components/ContentHighlights/ContentHighlightCardItem.jsx

@@ -1,40 +1,55 @@
 import React from 'react';
-import { Card } from '@edx/paragon';
+import { Card, Truncate } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import { FOOTER_TEXT_BY_CONTENT_TYPE } from './data/constants';
 
-const ContentHighlightCardItem = ({ title, type, authoringOrganizations }) => (
-  <Card>
-    <Card.ImageCap
-      src="https://source.unsplash.com/360x200/?nature,flower"
-      srcAlt=""
-      logoSrc={authoringOrganizations[0].logoImageUrl}
-      logoAlt={`${authoringOrganizations[0].name}'s logo`}
-    />
-    <Card.Header title={title} subtitle={authoringOrganizations[0].name} />
-    {/* footer for spacing purposes */}
-    <Card.Section>
-      <span />
-    </Card.Section>
-    <Card.Footer textElement={FOOTER_TEXT_BY_CONTENT_TYPE[type]}>
-      <span />
-    </Card.Footer>
-  </Card>
-);
+const ContentHighlightCardItem = ({
+  title,
+  contentType,
+  partners,
+  cardImageUrl,
+}) => {
+  const cardLogoSrc = partners.length === 1 ? partners[0].logoImageUrl : undefined;
+  const cardLogoAlt = partners.length === 1 ? `${partners[0].name}'s logo` : undefined;
+  const cardSubtitle = partners.map(p => p.name).join(', ');
+
+  return (
+    <Card>
+      <Card.ImageCap
+        src={cardImageUrl}
+        srcAlt=""
+        logoSrc={cardLogoSrc}
+        logoAlt={cardLogoAlt}
+      />
+      <Card.Header
+        title={<Truncate lines={3} title={title}>{title}</Truncate>}
+        subtitle={<Truncate lines={2}>{cardSubtitle}</Truncate>}
+      />
+      {contentType && (
+        <>
+          <Card.Section />
+          <Card.Footer
+            textElement={FOOTER_TEXT_BY_CONTENT_TYPE[contentType.toLowerCase()]}
+          />
+        </>
+      )}
+    </Card>
+  );
+};
 
 ContentHighlightCardItem.propTypes = {
+  cardImageUrl: PropTypes.string,
   title: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(['course', 'program', 'learnerpathway']),
-  authoringOrganizations: PropTypes.arrayOf(PropTypes.shape({
+  contentType: PropTypes.oneOf(['course', 'program', 'learnerpathway']).isRequired,
+  partners: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     uuid: PropTypes.string,
     logoImageUrl: PropTypes.string,
-  })),
+  })).isRequired,
 };
 
 ContentHighlightCardItem.defaultProps = {
-  type: undefined,
-  authoringOrganizations: [],
+  cardImageUrl: undefined,
 };
 
 export default ContentHighlightCardItem;