diff --git a/.circleci/config.yml b/.circleci/config.yml index a6edc20235..0eb81da181 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -349,14 +349,14 @@ workflows: filters: branches: only: - - sprig-lib + - free # This is alternate dev env for parallel testing - "build-test": context : org-global filters: branches: only: - - PROD-3199 + - TCA-768_member-profile-tca-certs # This is alternate dev env for parallel testing - "build-qa": context : org-global diff --git a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap index b9e6eccc2c..311b33847a 100644 --- a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap @@ -715,6 +715,7 @@ exports[`renders a full Profile correctly 1`] = ` } } tcAcademyCertifications={Array []} + tcAcademyCourses={Array []} /> `; @@ -866,5 +867,6 @@ exports[`renders an empty Profile correctly 1`] = ` } } tcAcademyCertifications={Array []} + tcAcademyCourses={Array []} /> `; diff --git a/src/assets/images/profile/tca-certificates/tca-certifications-badges-sprite.png b/src/assets/images/profile/tca-certificates/tca-certifications-badges-sprite.png new file mode 100644 index 0000000000..b5711bf0d0 Binary files /dev/null and b/src/assets/images/profile/tca-certificates/tca-certifications-badges-sprite.png differ diff --git a/src/shared/components/ProfilePage/ProfileModal/index.jsx b/src/shared/components/ProfilePage/ProfileModal/index.jsx index 41a4f1bbfa..67cbabd98c 100644 --- a/src/shared/components/ProfilePage/ProfileModal/index.jsx +++ b/src/shared/components/ProfilePage/ProfileModal/index.jsx @@ -25,7 +25,7 @@ const ProfileModal = ({

{title}

-
+
diff --git a/src/shared/components/ProfilePage/ProfileModal/styles.scss b/src/shared/components/ProfilePage/ProfileModal/styles.scss index a93949450d..03f12bb6be 100644 --- a/src/shared/components/ProfilePage/ProfileModal/styles.scss +++ b/src/shared/components/ProfilePage/ProfileModal/styles.scss @@ -30,6 +30,8 @@ justify-content: space-between; align-items: center; padding-bottom: 24px; + z-index: 1; + position: relative; .title { @include barlow-medium; diff --git a/src/shared/components/ProfilePage/TcaCertificates/CertificationBadge/index.jsx b/src/shared/components/ProfilePage/TcaCertificates/CertificationBadge/index.jsx new file mode 100644 index 0000000000..5e76f1f6a9 --- /dev/null +++ b/src/shared/components/ProfilePage/TcaCertificates/CertificationBadge/index.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PT from 'prop-types'; + +import 'assets/images/profile/tca-certificates/tca-certifications-badges-sprite.png'; +import './styles.scss'; + +const CertificationBadge = ({ type: badgeType, level, size }) => ( +
+); + +CertificationBadge.defaultProps = { + size: 'md', +}; + +CertificationBadge.propTypes = { + size: PT.oneOf(['md']), + level: PT.oneOf(['Beginner', 'Intermediate', 'Expert', 'All Levels']).isRequired, + type: PT.oneOf(['DATASCIENCE', 'DESIGN', 'DEV', 'DATABASE', 'INTERVIEW', 'QA', 'SECURITY']).isRequired, +}; + + +export default CertificationBadge; diff --git a/src/shared/components/ProfilePage/TcaCertificates/CertificationBadge/styles.scss b/src/shared/components/ProfilePage/TcaCertificates/CertificationBadge/styles.scss new file mode 100644 index 0000000000..e3710be830 --- /dev/null +++ b/src/shared/components/ProfilePage/TcaCertificates/CertificationBadge/styles.scss @@ -0,0 +1,95 @@ +.tca-badge-wrap { + background-repeat: no-repeat; + background-position: 0 0; + background-size: 300px 283.6363px; + background-image: url('../../../../../assets/images/profile/tca-certificates/tca-certifications-badges-sprite.png'); + + &.size-md { + width: 48px; + height: 48px; + } + + &:global(.badge-interview--beginner) { + background-position: -6px -6px; + } + + &:global(.badge-interview--intermediate) { + background-position: -66px -6px; + } + + &:global(.badge-interview--expert) { + background-position: -6px -63px; + } + + &:global(.badge-datascience--beginner) { + background-position: -126px -6px; + } + + &:global(.badge-datascience--intermediate) { + background-position: -66px -63px; + } + + &:global(.badge-datascience--expert) { + background-position: -6px -119px; + } + + &:global(.badge-database--beginner) { + background-position: -126px -63px; + } + + &:global(.badge-database--intermediate) { + background-position: -126px -119px; + } + + &:global(.badge-database--expert) { + background-position: -66px -119px; + } + + &:global(.badge-design--beginner) { + background-position: -186px -6px; + } + + &:global(.badge-design--intermediate) { + background-position: -186px -63px; + } + + &:global(.badge-design--expert) { + background-position: -186px -119px; + } + + &:global(.badge-dev--beginner) { + background-position: -6px -176px; + } + + &:global(.badge-dev--intermediate) { + background-position: -66px -176px; + } + + &:global(.badge-dev--expert) { + background-position: -126px -176px; + } + + &:global(.badge-qa--beginner) { + background-position: -186px -176px; + } + + &:global(.badge-qa--intermediate) { + background-position: -246px -6px; + } + + &:global(.badge-qa--expert) { + background-position: -246px -63px; + } + + &:global(.badge-security--beginner) { + background-position: -246px -119px; + } + + &:global(.badge-security--intermediate) { + background-position: -246px -176px; + } + + &:global(.badge-security--expert) { + background-position: -6px -233px; + } +} diff --git a/src/shared/components/ProfilePage/TcaCertificates/List/index.jsx b/src/shared/components/ProfilePage/TcaCertificates/List/index.jsx index ae77b2203d..98d0efc0c1 100644 --- a/src/shared/components/ProfilePage/TcaCertificates/List/index.jsx +++ b/src/shared/components/ProfilePage/TcaCertificates/List/index.jsx @@ -2,13 +2,13 @@ import React from 'react'; import PT from 'prop-types'; import './styles.scss'; -import CourseBadge from '../CourseBadge'; const preventDefault = ev => ev.stopPropagation(); const List = ({ certificates, onClick, + renderIcon, }) => (
{certificates.map(certificate => ( @@ -16,22 +16,24 @@ const List = ({ styleName="list-item" key={certificate.id} onClick={() => onClick(certificate)} - onKeyPress={() => onClick(certificate)} + onKeyDown={() => onClick(certificate)} role="button" tabIndex={-1} >
- + {renderIcon(certificate)}
- {certificate.certificationTitle} -
-
- - by {certificate.provider} - + {certificate.certificationTitle || certificate.topcoderCertification.title}
+ {certificate.resourceProvider && ( +
+ + by {certificate.resourceProvider.name} + +
+ )}
))} @@ -41,6 +43,7 @@ const List = ({ List.propTypes = { certificates: PT.arrayOf(PT.shape()).isRequired, onClick: PT.func.isRequired, + renderIcon: PT.element.isRequired, }; export default List; diff --git a/src/shared/components/ProfilePage/TcaCertificates/TcaCertificationCertificateModal/index.jsx b/src/shared/components/ProfilePage/TcaCertificates/TcaCertificationCertificateModal/index.jsx new file mode 100644 index 0000000000..1849fac13b --- /dev/null +++ b/src/shared/components/ProfilePage/TcaCertificates/TcaCertificationCertificateModal/index.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import PT from 'prop-types'; +import { noop } from 'lodash/noop'; +import { config } from 'topcoder-react-utils'; + +import ProfileModal from '../../ProfileModal'; +import styles from './styles.scss'; + +const tcAcademyPath = `${config.PLATFORMUI_SITE_URL}${config.TC_ACADEMY_BASE_PATH}`; + +const TcaCertificationCertificateModal = ({ + certificate, + onCancel, +}) => ( + +