From ace1eb0d661d3d566f4ed40635c6d20640d6a6b2 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 24 Feb 2023 14:17:19 +0200 Subject: [PATCH] TCA-1078 progressbar new look&feel --- .../lib/progress-bar/ProgressBar.module.scss | 52 +++++++++++++++++-- src-ts/lib/progress-bar/ProgressBar.tsx | 34 +++++++++++- src-ts/lib/styles/variables/_palette.scss | 19 +++++++ .../CertificationDetailsSidebar.module.scss | 27 +++++++--- .../CertificationDetailsSidebar.tsx | 10 +++- .../certificate/Certificate.module.scss | 1 - .../CertificateBgPattern.module.scss | 2 +- .../certificate/includes.scss | 17 ------ .../TCACertificate.module.scss | 1 - .../ValidateTCACertificate.module.scss | 1 - .../courses-card/CoursesCard.module.scss | 14 +---- .../welcome/courses-card/CoursesCard.tsx | 10 ++-- .../cert-card/TCCertCard.module.scss | 16 +----- .../cert-card/TCCertCard.tsx | 8 +-- 14 files changed, 146 insertions(+), 66 deletions(-) delete mode 100644 src-ts/tools/learn/course-certificate/certificate-view/certificate/includes.scss diff --git a/src-ts/lib/progress-bar/ProgressBar.module.scss b/src-ts/lib/progress-bar/ProgressBar.module.scss index eabd01c2a..9a20dc566 100644 --- a/src-ts/lib/progress-bar/ProgressBar.module.scss +++ b/src-ts/lib/progress-bar/ProgressBar.module.scss @@ -3,14 +3,60 @@ .wrap { background: $black-10; border-radius: $space-xs; - height: $space-sm; + height: $space-lg; width: 100%; - display: flex; :global(.progress) { background: $turq-75; border-radius: inherit; width: calc(var(--progress, 0) * 100%); + position: relative; + + .percentage { + position: absolute; + top: 1px; + font-family: $font-barlow; + font-style: normal; + font-weight: $font-weight-bold; + font-size: 11px; + line-height: 14px; + color: $black-100; + } + } + + :global(.completed) { + border-radius: inherit; + width: calc(var(--progress, 0) * 100%); + position: relative; + + .completedText { + position: absolute; + top: 1px; + left: $space-xs; + font-family: $font-barlow; + font-style: normal; + font-weight: $font-weight-bold; + font-size: 11px; + line-height: 14px; + text-transform: uppercase; + color: $tc-white; + } + } + + :global(.completed-dev) { + background: $tc-dev-grad; + } + + :global(.completed-datascience) { + background: $tc-datascience-grad; + } + + :global(.completed-design) { + background: $tc-design-grad; + } + + :global(.completed-qa) { + background: $tc-qa-grad; } -} +} \ No newline at end of file diff --git a/src-ts/lib/progress-bar/ProgressBar.tsx b/src-ts/lib/progress-bar/ProgressBar.tsx index 694175062..047f5cb93 100644 --- a/src-ts/lib/progress-bar/ProgressBar.tsx +++ b/src-ts/lib/progress-bar/ProgressBar.tsx @@ -1,20 +1,50 @@ import React, { FC } from 'react' +import classNames from 'classnames' import styles from './ProgressBar.module.scss' interface ProgressBarProps { progress: number + track?: string } const ProgressBar: FC = (props: ProgressBarProps) => { - const progressProps: React.CSSProperties & {'--progress': number} = { + const progressProps: React.CSSProperties & { '--progress': number } = { '--progress': props.progress, } + const persentageProps: React.CSSProperties = { + [props.progress >= 0.05 ? 'right' : 'left']: '4px', + } + + const showPercentage: boolean = props.progress > 0 && props.progress < 1 + const showCompleted: boolean = props.progress === 1 + return (
-
+
+ { + !!showPercentage && ( + + {Number(props.progress * 100) + .toFixed(0)} + % + + ) + } + { + !!showCompleted && ( + Completed + ) + } +
) } diff --git a/src-ts/lib/styles/variables/_palette.scss b/src-ts/lib/styles/variables/_palette.scss index 948935ac0..22aa06c5e 100644 --- a/src-ts/lib/styles/variables/_palette.scss +++ b/src-ts/lib/styles/variables/_palette.scss @@ -207,3 +207,22 @@ $white-100-opacity-10: rgba(0, 0, 0, 0.1); /* SHADOW */ $tips-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.2); + +/* TRACK COLORS & GRADIENTS */ +$tc-dev-track-color: #048467; +$tc-design-track-color: #065D6E; +$tc-qa-track-color: #363D8C; +$tc-datascience-track-color: #723390; +$tc-dev-grad: linear-gradient(84.92deg, #048467 2.08%, #064871 97.43%); +$tc-design-grad: linear-gradient(84.92deg, #065D6E 2.08%, #06596E 2.09%, #3E3B91 97.43%); +$tc-qa-grad: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%); +$tc-datascience-grad: linear-gradient(84.92deg, #723390 2.08%, #8C384F 97.43%); +$tc-interview-grad: linear-gradient(84.92deg, #048467 2.08%, #064871 33.85%, #6831A8 66.15%, #8C384D 97.43%); +$tc-security-grad: linear-gradient(84.92deg, #048467 2.08%, #064871 97.43%); + +@mixin grad-text-color($grad) { + background: $grad; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} \ No newline at end of file diff --git a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss index 4f2bf5d62..3f3f761e9 100644 --- a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss +++ b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss @@ -20,10 +20,12 @@ .certification-details-list { margin-top: $space-xxl; + li { display: flex; align-items: center; margin-top: $space-sm; + .icon { width: 24px; height: 24px; @@ -33,7 +35,7 @@ margin-right: $space-sm; color: $blue-140; - > svg { + >svg { display: block; width: 100%; height: 100%; @@ -80,7 +82,7 @@ .providers { margin-top: $space-sm; - > span { + >span { @extend .body-small-medium; } } @@ -105,14 +107,25 @@ display: block; padding: $space-xs calc($space-sm + $border); border-radius: $space-xs; + color: $tc-white; &.enrolled { background: $blue-140; - color: $tc-white; } - &.completed { - background: $turq-75; - color: $black-100; + &.completed-dev { + background: $tc-dev-grad; } -} + + &.completed-datascience { + background: $tc-datascience-grad; + } + + &.completed-design { + background: $tc-design-grad; + } + + &.completed-qa { + background: $tc-qa-grad; + } +} \ No newline at end of file diff --git a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx index 11dae6f30..cb50a7361 100644 --- a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx +++ b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx @@ -132,7 +132,15 @@ const CertificationDetailsSidebar: FC = (props
{(props.enrolled || completed) ? ( -
+
{completed ? 'Completed' : 'Enrolled'}
) : ( diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss b/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss index 65481b84c..dc560fbfb 100644 --- a/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss +++ b/src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss @@ -1,5 +1,4 @@ @import '../../../../../lib/styles/includes'; -@import './includes'; .wrap { display: flex; diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.module.scss b/src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.module.scss index 02c4c5bec..41cf84566 100644 --- a/src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.module.scss +++ b/src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.module.scss @@ -1,4 +1,4 @@ -@import '../includes'; +@import '../../../../../../lib/styles/includes'; @mixin wave-bg-pattern($grad) { background: url('./wave-bg-2.png') 0 0 no-repeat, diff --git a/src-ts/tools/learn/course-certificate/certificate-view/certificate/includes.scss b/src-ts/tools/learn/course-certificate/certificate-view/certificate/includes.scss deleted file mode 100644 index 6db0d3dd5..000000000 --- a/src-ts/tools/learn/course-certificate/certificate-view/certificate/includes.scss +++ /dev/null @@ -1,17 +0,0 @@ -$tc-dev-track-color: #048467; -$tc-design-track-color: #065D6E; -$tc-qa-track-color: #363D8C; -$tc-datascience-track-color: #723390; -$tc-dev-grad: linear-gradient(84.92deg, #048467 2.08%, #064871 97.43%); -$tc-design-grad: linear-gradient(84.92deg, #065D6E 2.08%, #06596E 2.09%, #3E3B91 97.43%); -$tc-qa-grad: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%); -$tc-datascience-grad: linear-gradient(84.92deg, #723390 2.08%, #8C384F 97.43%); -$tc-interview-grad: linear-gradient(84.92deg, #048467 2.08%, #064871 33.85%, #6831A8 66.15%, #8C384D 97.43%); -$tc-security-grad: linear-gradient(84.92deg, #048467 2.08%, #064871 97.43%); - -@mixin grad-text-color($grad) { - background: $grad; - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} diff --git a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss index d71602e47..2d5350d44 100644 --- a/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss +++ b/src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss @@ -1,5 +1,4 @@ @import '../../../../../lib/styles/includes'; -@import '../../../course-certificate/certificate-view/certificate/includes.scss'; .wrap { background-color: $tc-white; diff --git a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss index 5793efee2..0210305e3 100644 --- a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss +++ b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss @@ -1,5 +1,4 @@ @import '../../../../lib/styles/includes'; -@import '../../course-certificate/certificate-view/certificate/includes.scss'; .hero { display: flex; diff --git a/src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss b/src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss index b1c002cee..305b31b53 100644 --- a/src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss +++ b/src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss @@ -75,6 +75,8 @@ .cardHeaderDividerWrap { margin-top: auto; + margin-bottom: $space-lg; + padding-top: $space-sm; .cardHeaderDivider { height: 1px; @@ -118,18 +120,6 @@ flex-direction: column; align-items: flex-start; } - - .completedLabel { - background-color: $turq-75; - padding: $space-xs $space-sm; - border-radius: $space-xs; - color: $black-100; - font-weight: $font-weight-medium; - - @include ltexs { - margin-top: $space-lg; - } - } } } diff --git a/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx b/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx index 0e9c33f41..c3247be0e 100644 --- a/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx +++ b/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx @@ -22,7 +22,7 @@ interface CoursesCardProps { progress?: LearnUserCertificationProgress } -const EXCERPT_TEXT_LEN: number = 99 +const EXCERPT_TEXT_LEN: number = 95 const CoursesCard: FC = (props: CoursesCardProps) => { const desc: string = props.certification.description?.slice(0, EXCERPT_TEXT_LEN) @@ -49,7 +49,6 @@ const CoursesCard: FC = (props: CoursesCardProps) => {
-
Completed
) case UserCertificationProgressStatus.inProgress: @@ -88,7 +87,12 @@ const CoursesCard: FC = (props: CoursesCardProps) => {
- {isInProgress && } + {(isInProgress || isCompleted) && ( + + )} {!isInProgress && !isCompleted &&
}
diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss index 844f6ab93..60f3a2423 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss +++ b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss @@ -77,11 +77,11 @@ .separatorBar { border-bottom: 2px solid $black-10; - margin: $space-lg 0; + margin: $space-xl 0 $space-xxl; } .progressBar { - margin: $space-lg 0; + margin: $space-lg 0 $space-xxl; } .providers { @@ -104,18 +104,6 @@ flex-direction: column; align-items: flex-start; } - - .completedLabel { - background-color: $turq-75; - padding: $space-xs $space-sm; - border-radius: $space-xs; - color: $black-100; - font-weight: $font-weight-medium; - - @include ltesm { - margin-top: $space-lg; - } - } } .certCTAButtons { diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx index 4d86b1da4..e0ef1c3ae 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx +++ b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx @@ -55,7 +55,6 @@ const TCCertCard: FC = (props: TCCertCardProps) => { {getCtaBtn('primary', 'View Certificate', getTCACertificateUrl(dashedName))} {getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName))}
-
Completed
) } @@ -64,13 +63,16 @@ const TCCertCard: FC = (props: TCCertCardProps) => { } function renderProgressBar(): ReactNode { - if (props.progress?.status !== 'enrolled') { + if (!isEnrolled && !isCompleted) { return
} return (
- +
) }