feat: add verified ribbon

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 {

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

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();
+    });
   });
 });

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>
+`;

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;