From f8b181e8c9bd4184c19e7481a8b3327b22cbbb2c Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Tue, 25 Oct 2022 13:33:26 -0400
Subject: [PATCH] feat: add verified ribbon

---
 src/assets/verified-ribbon.png                | Bin 0 -> 498 bytes
 src/containers/CourseCard/CourseCard.scss     |  23 ++
 .../components/CourseCardContent.jsx          |  14 +-
 .../components/CourseCardContent.test.jsx     |  14 ++
 .../CourseCardContent.test.jsx.snap           | 196 +++++++++++++-----
 src/containers/CourseCard/messages.js         |  15 ++
 6 files changed, 204 insertions(+), 58 deletions(-)
 create mode 100644 src/assets/verified-ribbon.png

diff --git a/src/assets/verified-ribbon.png b/src/assets/verified-ribbon.png
new file mode 100644
index 0000000000000000000000000000000000000000..289e70ef20b9605092d3c317d5eb60b69940ffc1
GIT binary patch
literal 498
zcmV<O0S*3ANk&HM0RRA3MM6+kP&iE80RR9mF+dCuH^ZonBuAe89gXA9>j-SP+%z0S
zlB7s^VD0=nf&XKgb`VLDBIU7x_wxSrF#jJ-GiW49QTf;R9`5d$`F{hFghamG_Z0~V
ziT|9v$KRKdbW)KjNqGO-Tb||Zei!FXDpIA6o7!i0ZOk7}AAO&sN-89_=Be$A>z&o|
zch{<xzh`-Sx1YZy`|Q6L`F5#5;KhXl6J~VCXpvB%#f%9%E<A_Bmqe=6c#_0;dYZ<2
z&JYN^xbfn^h8Ht_jA-y+K!+OxevCLVBG4nSVaJCXFJd2#f3=NjTh%rITe5A_&YE#f
zY#Zm^yJPcm#<q?B|A)i9!pDgIPk{Ubk_c&H{)4&gt~S?!<LYu900Uawy0RhTIsh7t
zmR6u_zyZ)`)bzo>(daRqK8;3`=>*VdbeT>x8f{VkSczPALfLR7xiqaQ)lm#mR_Dgl
zj5Yusk%dVmgB1vp<rxjhwjzX)wfS*tBlYkP5LukE)L)KhvNCHYY?wHIn%cL|DqW?$
zd9u(|qNpW9-}NRfHSZ+%udnt<epG8H?J1Bu=g%U~XWL|<yVP29n%q2j5Z{O64Km$q
oi{#<0guFSR*V69gtAu{J*tNBF`XrGbPq(Zb-Ak-@M>hWA04i?&^8f$<

literal 0
HcmV?d00001

diff --git a/src/containers/CourseCard/CourseCard.scss b/src/containers/CourseCard/CourseCard.scss
index 0383a07..bdaa71b 100644
--- a/src/containers/CourseCard/CourseCard.scss
+++ b/src/containers/CourseCard/CourseCard.scss
@@ -5,9 +5,32 @@
     .pgn__card-image-cap {
       border-bottom-left-radius: 0 !important;
     }
+    .overflow-visible {
+      overflow: visible;
+    }
     .pgn__card-header-content {
       margin-top: 1.5rem;
     }
+
+    .course-card-verify-ribbon-container {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      text-align: center;
+
+      .badge {
+        border-radius: 0;
+      }
+
+      > img {
+        width: 40px;
+        z-index: 1000;
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
   }
 
   .course-card-banners {
diff --git a/src/containers/CourseCard/components/CourseCardContent.jsx b/src/containers/CourseCard/components/CourseCardContent.jsx
index 54e8f59..cbc21ac 100644
--- a/src/containers/CourseCard/components/CourseCardContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardContent.jsx
@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 // import PropTypes from 'prop-types';
-import { Card } from '@edx/paragon';
+import { Card, Badge } from '@edx/paragon';
 
 import { hooks as appHooks } from 'data/redux';
 
+import verifiedRibbon from 'assets/verified-ribbon.png';
 import RelatedProgramsBadge from './RelatedProgramsBadge';
 import CourseCardMenu from './CourseCardMenu';
 import CourseCardActions from './CourseCardActions';
@@ -18,14 +19,23 @@ export const CourseCardContent = ({ cardId, orientation }) => {
   const { formatMessage } = useIntl();
   const { courseName, bannerImgSrc } = appHooks.useCardCourseData(cardId);
   const { homeUrl } = appHooks.useCardCourseRunData(cardId);
+  const { isVerified } = appHooks.useCardEnrollmentData(cardId);
   return (
     <>
-      <a className="pgn__card-wrapper-image-cap horizontal" href={homeUrl}>
+      <a className="pgn__card-wrapper-image-cap horizontal overflow-visible" href={homeUrl}>
         <img
           className="pgn__card-image-cap"
           src={bannerImgSrc}
           alt={formatMessage(messages.bannerAlt)}
         />
+        {
+          isVerified && (
+            <span className="course-card-verify-ribbon-container" title={formatMessage(messages.verifiedHoverDescription)}>
+              <Badge as="div" variant="success" className="w-100">{formatMessage(messages.verifiedBanner)}</Badge>
+              <img src={verifiedRibbon} alt={formatMessage(messages.verifiedBannerRibbonAlt)} />
+            </span>
+          )
+        }
       </a>
       <Card.Body>
         <Card.Header
diff --git a/src/containers/CourseCard/components/CourseCardContent.test.jsx b/src/containers/CourseCard/components/CourseCardContent.test.jsx
index b21464c..ae2c8b7 100644
--- a/src/containers/CourseCard/components/CourseCardContent.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardContent.test.jsx
@@ -7,6 +7,7 @@ jest.mock('data/redux', () => ({
   hooks: {
     useCardCourseData: jest.fn(),
     useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
   },
 }));
 
@@ -29,12 +30,25 @@ describe('CourseCardContent', () => {
   });
   describe('snapshot', () => {
     test('orientation vertical', () => {
+      hooks.useCardEnrollmentData.mockReturnValue({
+        isVerified: true,
+      });
       const wrapper = shallow(<CourseCardContent {...props} />);
       expect(wrapper).toMatchSnapshot();
     });
     test('orientation horizontal', () => {
+      hooks.useCardEnrollmentData.mockReturnValue({
+        isVerified: true,
+      });
       const wrapper = shallow(<CourseCardContent {...props} orientation="horizontal" />);
       expect(wrapper).toMatchSnapshot();
     });
+    test('not verified', () => {
+      hooks.useCardEnrollmentData.mockReturnValue({
+        isVerified: false,
+      });
+      const wrapper = shallow(<CourseCardContent {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap b/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap
index bc05335..d091162 100644
--- a/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap
+++ b/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap
@@ -1,63 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CourseCardContent snapshot orientation horizontal 1`] = `
+exports[`CourseCardContent snapshot not verified 1`] = `
 <Fragment>
   <a
-    className="pgn__card-wrapper-image-cap horizontal"
-    href="test-home-url"
-  >
-    <img
-      alt="Course thumbnail"
-      className="pgn__card-image-cap"
-      src="test-banner-img-src"
-    />
-  </a>
-  <Card.Body>
-    <Card.Header
-      actions={
-        <CourseCardMenu
-          cardId="test-card-id"
-        />
-      }
-      title={
-        <h3>
-          <a
-            className="course-card-title"
-            data-testid="CourseCardTitle"
-            href="test-home-url"
-          >
-            test-course-name
-          </a>
-        </h3>
-      }
-    />
-    <Card.Section
-      className="pt-0"
-    >
-      <CourseCardDetails
-        cardId="test-card-id"
-      />
-    </Card.Section>
-    <Card.Footer
-      orientation="vertical"
-      textElement={
-        <RelatedProgramsBadge
-          cardId="test-card-id"
-        />
-      }
-    >
-      <CourseCardActions
-        cardId="test-card-id"
-      />
-    </Card.Footer>
-  </Card.Body>
-</Fragment>
-`;
-
-exports[`CourseCardContent snapshot orientation vertical 1`] = `
-<Fragment>
-  <a
-    className="pgn__card-wrapper-image-cap horizontal"
+    className="pgn__card-wrapper-image-cap horizontal overflow-visible"
     href="test-home-url"
   >
     <img
@@ -105,3 +51,141 @@ exports[`CourseCardContent snapshot orientation vertical 1`] = `
   </Card.Body>
 </Fragment>
 `;
+
+exports[`CourseCardContent snapshot orientation horizontal 1`] = `
+<Fragment>
+  <a
+    className="pgn__card-wrapper-image-cap horizontal overflow-visible"
+    href="test-home-url"
+  >
+    <img
+      alt="Course thumbnail"
+      className="pgn__card-image-cap"
+      src="test-banner-img-src"
+    />
+    <span
+      className="course-card-verify-ribbon-container"
+      title="You're enrolled as a verified student"
+    >
+      <Badge
+        as="div"
+        className="w-100"
+        variant="success"
+      >
+        Verified
+      </Badge>
+      <img
+        alt="ID Verified Ribbon/Badge"
+        src="test-file-stub"
+      />
+    </span>
+  </a>
+  <Card.Body>
+    <Card.Header
+      actions={
+        <CourseCardMenu
+          cardId="test-card-id"
+        />
+      }
+      title={
+        <h3>
+          <a
+            className="course-card-title"
+            data-testid="CourseCardTitle"
+            href="test-home-url"
+          >
+            test-course-name
+          </a>
+        </h3>
+      }
+    />
+    <Card.Section
+      className="pt-0"
+    >
+      <CourseCardDetails
+        cardId="test-card-id"
+      />
+    </Card.Section>
+    <Card.Footer
+      orientation="vertical"
+      textElement={
+        <RelatedProgramsBadge
+          cardId="test-card-id"
+        />
+      }
+    >
+      <CourseCardActions
+        cardId="test-card-id"
+      />
+    </Card.Footer>
+  </Card.Body>
+</Fragment>
+`;
+
+exports[`CourseCardContent snapshot orientation vertical 1`] = `
+<Fragment>
+  <a
+    className="pgn__card-wrapper-image-cap horizontal overflow-visible"
+    href="test-home-url"
+  >
+    <img
+      alt="Course thumbnail"
+      className="pgn__card-image-cap"
+      src="test-banner-img-src"
+    />
+    <span
+      className="course-card-verify-ribbon-container"
+      title="You're enrolled as a verified student"
+    >
+      <Badge
+        as="div"
+        className="w-100"
+        variant="success"
+      >
+        Verified
+      </Badge>
+      <img
+        alt="ID Verified Ribbon/Badge"
+        src="test-file-stub"
+      />
+    </span>
+  </a>
+  <Card.Body>
+    <Card.Header
+      actions={
+        <CourseCardMenu
+          cardId="test-card-id"
+        />
+      }
+      title={
+        <h3>
+          <a
+            className="course-card-title"
+            data-testid="CourseCardTitle"
+            href="test-home-url"
+          >
+            test-course-name
+          </a>
+        </h3>
+      }
+    />
+    <Card.Section
+      className="pt-0"
+    >
+      <CourseCardDetails
+        cardId="test-card-id"
+      />
+    </Card.Section>
+    <RelatedProgramsBadge
+      cardId="test-card-id"
+    />
+    <Card.Footer
+      orientation="horizontal"
+    >
+      <CourseCardActions
+        cardId="test-card-id"
+      />
+    </Card.Footer>
+  </Card.Body>
+</Fragment>
+`;
diff --git a/src/containers/CourseCard/messages.js b/src/containers/CourseCard/messages.js
index d5f0c53..bc68cce 100644
--- a/src/containers/CourseCard/messages.js
+++ b/src/containers/CourseCard/messages.js
@@ -6,6 +6,21 @@ export const messages = StrictDict({
     description: 'Course card banner alt-text',
     defaultMessage: 'Course thumbnail',
   },
+  verifiedBanner: {
+    id: 'learner-dash.courseCard.verifiedBanner',
+    description: 'Course card verified banner',
+    defaultMessage: 'Verified',
+  },
+  verifiedHoverDescription: {
+    id: 'learner-dash.courseCard.verifiedHoverDescription',
+    description: 'Course card verified hover description',
+    defaultMessage: 'You\'re enrolled as a verified student',
+  },
+  verifiedBannerRibbonAlt: {
+    id: 'learner-dash.courseCard.verifiedBannerRibbonAlt',
+    description: 'Course card verified banner ribbon alt-text',
+    defaultMessage: 'ID Verified Ribbon/Badge',
+  },
 });
 
 export default messages;