fix: update copy, icons, and use imported fallback img from @edx/brand for highlights (#938)

Author: adamstankiewicz

package-lock.json

@@ -24,13 +24,13 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@babel/plugin-transform-runtime": "7.12.1",
-    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.7",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/frontend-enterprise-catalog-search": "3.1.5",
     "@edx/frontend-enterprise-hotjar": "1.2.0",
     "@edx/frontend-enterprise-logistration": "2.1.0",
     "@edx/frontend-enterprise-utils": "2.1.0",
     "@edx/frontend-platform": "2.4.0",
-    "@edx/paragon": "20.24.1",
+    "@edx/paragon": "20.26.3",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",

package.json

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Card, Hyperlink } from '@edx/paragon';
 import Truncate from 'react-truncate';
 import PropTypes from 'prop-types';
+import { Card, Hyperlink } from '@edx/paragon';
+import cardImageCapFallbackSrc from '@edx/brand/paragon/images/card-imagecap-fallback.png';
+
 import { getContentHighlightCardFooter } from './data/utils';
 
 const ContentHighlightCardItem = ({
@@ -32,6 +34,7 @@ const ContentHighlightCardItem = ({
     <Card variant={contentType !== 'course' && 'dark'} isLoading={isLoading}>
       <Card.ImageCap
         src={cardInfo.cardImgSrc}
+        fallbackSrc={cardImageCapFallbackSrc}
         srcAlt=""
         logoSrc={cardInfo.cardLogoSrc}
         logoAlt={cardInfo.cardLogoAlt}

src/components/ContentHighlights/ContentHighlightCardItem.jsx

@@ -16,7 +16,7 @@ const ContentHighlights = () => {
   useEffect(() => {
     if (locationState?.deletedHighlightSet) {
       setToasts((prevState) => [...prevState, {
-        toastText: `"${enterpriseCuration?.toastText}" deleted.`,
+        toastText: `"${enterpriseCuration?.toastText}" deleted`,
         uuid: uuidv4(),
       }]);
       const newState = { ...locationState };
@@ -25,7 +25,7 @@ const ContentHighlights = () => {
     }
     if (locationState?.addHighlightSet) {
       setToasts((prevState) => [...prevState, {
-        toastText: `"${enterpriseCuration?.toastText}" added.`,
+        toastText: `"${enterpriseCuration?.toastText}" added`,
         uuid: uuidv4(),
       }]);
       const newState = { ...locationState };

src/components/ContentHighlights/ContentHighlights.jsx

@@ -88,8 +88,8 @@ const DeleteHighlightSet = ({ enterpriseSlug }) => {
           </p>
         </Alert>
         <p>
-          Deleting this highlight collection will remove it from your
-          learners. This action is permanent and cannot be undone.
+          Deleting this highlight will remove it from your
+          learners&apos; &quot;Find a Course&quot; This action is permanent and cannot be undone.
         </p>
       </AlertModal>
     </>

src/components/ContentHighlights/DeleteHighlightSet.jsx

@@ -130,19 +130,29 @@ SelectedContent.propTypes = {
   enterpriseId: PropTypes.string.isRequired,
 };
 
-const HighlightStepperConfirmContent = ({ enterpriseId }) => (
-  <Container>
-    <Row>
-      <Col xs={12} md={8} lg={6}>
-        <h3 className="mb-3 d-flex align-items-center">
-          <Icon src={Assignment} className="mr-2 color-brand-tertiary" />
-          {STEPPER_STEP_TEXT.confirmContent}
-        </h3>
-      </Col>
-    </Row>
-    <SelectedContent enterpriseId={enterpriseId} />
-  </Container>
-);
+const HighlightStepperConfirmContent = ({ enterpriseId }) => {
+  const highlightTitle = useContextSelector(
+    ContentHighlightsContext,
+    v => v[0].stepperModal.highlightTitle,
+  );
+
+  return (
+    <Container>
+      <Row>
+        <Col xs={12} md={8} lg={6}>
+          <h3 className="mb-3 d-flex align-items-center">
+            <Icon src={Assignment} className="mr-2 text-brand" />
+            {STEPPER_STEP_TEXT.confirmContent}
+          </h3>
+          <p>
+            {STEPPER_STEP_TEXT.getConfirmContentSubtitle(highlightTitle)}.
+          </p>
+        </Col>
+      </Row>
+      <SelectedContent enterpriseId={enterpriseId} />
+    </Container>
+  );
+};
 
 HighlightStepperConfirmContent.propTypes = {
   enterpriseId: PropTypes.string.isRequired,

src/components/ContentHighlights/HighlightStepper/HighlightStepperConfirmContent.jsx

@@ -10,11 +10,12 @@ const HighlightStepperSelectContentTitle = () => {
   return (
     <>
       <h3 className="mb-3 d-flex align-items-center">
-        <Icon src={AddCircle} className="mr-2 color-brand-tertiary" />
+        <Icon src={AddCircle} className="mr-2 text-brand" />
         {STEPPER_STEP_TEXT.selectContent}
       </h3>
       <p>
-        Select up to <b>{MAX_CONTENT_ITEMS_PER_HIGHLIGHT_SET}</b> items for &quot;{highlightTitle}&quot;.
+        Select up to <b>{MAX_CONTENT_ITEMS_PER_HIGHLIGHT_SET}</b> items for &quot;{highlightTitle}&quot;. Courses
+        in learners&apos; portal appear in the order of selection.
       </p>
       <p>
         <strong>

src/components/ContentHighlights/HighlightStepper/HighlightStepperSelectContentHeader.jsx

@@ -36,7 +36,7 @@ const HighlightStepperSelectContent = ({ enterpriseId }) => {
     ContentHighlightsContext,
     v => v[0].searchClient,
   );
-    // TODO: replace testEnterpriseId with enterpriseID before push,
+    // TODO: replace testEnterpriseId with enterpriseId before push,
     // uncomment out import and replace with testEnterpriseId to test
   const searchFilters = `enterprise_customer_uuids:${enterpriseId}`;
 

src/components/ContentHighlights/HighlightStepper/HighlightStepperSelectContentSearch.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Row, Col, Icon, Container,
 } from '@edx/paragon';
-import { AddCircle } from '@edx/paragon/icons';
+import { EditCircle } from '@edx/paragon/icons';
 
 import { STEPPER_STEP_TEXT } from '../data/constants';
 import HighlightStepperTitleInput from './HighlightStepperTitleInput';
@@ -12,13 +12,13 @@ const HighlightStepperTitle = () => (
     <Row>
       <Col xs={12} md={8} lg={6}>
         <h3 className="mb-3 d-flex align-items-center">
-          <Icon src={AddCircle} className="mr-2 color-brand-tertiary" />
+          <Icon src={EditCircle} className="mr-2 text-brand" />
           {STEPPER_STEP_TEXT.createTitle}
         </h3>
         <div className="mb-4.5">
           <p>
             Create a unique title for your highlight. This title is visible
-            to your learners and helps them discovery relevant content.
+            to your learners and helps them navigate to relevant content.
           </p>
           <p>
             <strong>

src/components/ContentHighlights/HighlightStepper/HighlightStepperTitle.jsx

@@ -25,7 +25,8 @@ export const HIGHLIGHT_TITLE_MAX_LENGTH = 60;
 export const STEPPER_STEP_TEXT = {
   createTitle: 'Create a title for your highlight',
   selectContent: 'Add content to your highlight',
-  confirmContent: 'Confirm your content selections',
+  confirmContent: 'Confirm your selections',
+  getConfirmContentSubtitle: (highlightTitle) => `Review content selections for "${highlightTitle}"`,
 };
 // Header text extracted into constant to maintain passing test on changes
 export const HEADER_TEXT = {