diff --git a/src/assets/verified-ribbon.png b/src/assets/verified-ribbon.png
new file mode 100644
index 0000000..289e70e
Binary files /dev/null and b/src/assets/verified-ribbon.png differ
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 (
<>
-
+
+ {
+ isVerified && (
+
+ {formatMessage(messages.verifiedBanner)}
+
+
+ )
+ }
({
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();
expect(wrapper).toMatchSnapshot();
});
test('orientation horizontal', () => {
+ hooks.useCardEnrollmentData.mockReturnValue({
+ isVerified: true,
+ });
const wrapper = shallow();
expect(wrapper).toMatchSnapshot();
});
+ test('not verified', () => {
+ hooks.useCardEnrollmentData.mockReturnValue({
+ isVerified: false,
+ });
+ const wrapper = shallow();
+ 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`] = `
-
-
-
-
- }
- title={
-
- }
- />
-
-
-
-
- }
- >
-
-
-
-
-`;
-
-exports[`CourseCardContent snapshot orientation vertical 1`] = `
-
-
`;
+
+exports[`CourseCardContent snapshot orientation horizontal 1`] = `
+
+
+
+
+
+ Verified
+
+
+
+
+
+
+ }
+ title={
+
+ }
+ />
+
+
+
+
+ }
+ >
+
+
+
+
+`;
+
+exports[`CourseCardContent snapshot orientation vertical 1`] = `
+
+
+
+
+
+ Verified
+
+
+
+
+
+
+ }
+ title={
+
+ }
+ />
+
+
+
+
+
+
+
+
+
+`;
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;