Merge pull request #537 from topcoder-platform/TCA-1078

TCA-1078 progressbar new look&feel

Author: kkartunov

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

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<ProgressBarProps> = (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 (
         <div className={styles.wrap}>
-            <div className='progress' style={progressProps} />
+            <div
+                className={classNames(
+                    showCompleted ? 'completed' : 'progress',
+                    showCompleted ? `completed-${props.track?.toLowerCase() || 'dev'}` : '',
+                )}
+                style={progressProps}
+            >
+                {
+                    !!showPercentage && (
+                        <span className={styles.percentage} style={persentageProps}>
+                            {Number(props.progress * 100)
+                                .toFixed(0)}
+                            %
+                        </span>
+                    )
+                }
+                {
+                    !!showCompleted && (
+                        <span className={styles.completedText}>Completed </span>
+                    )
+                }
+            </div>
         </div>
     )
 }

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

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

src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx

@@ -132,7 +132,15 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
 
             <div className={styles.btns}>
                 {(props.enrolled || completed) ? (
-                    <div className={classNames(styles.tag, completed ? styles.completed : styles.enrolled)}>
+                    <div className={classNames(
+                        styles.tag,
+                        completed
+                            ? styles[
+                                `completed-${props.certification.certificationCategory.track.toLowerCase() || 'dev'}`
+                            ]
+                            : styles.enrolled,
+                    )}
+                    >
                         <span className='body-main-medium'>{completed ? 'Completed' : 'Enrolled'}</span>
                     </div>
                 ) : (

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;

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,

src-ts/tools/learn/course-certificate/certificate-view/certificate/includes.scss

@@ -1,5 +1,4 @@
 @import '../../../../../lib/styles/includes';
-@import '../../../course-certificate/certificate-view/certificate/includes.scss';
 
 .wrap {
     background-color: $tc-white;

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';
 
 .hero {
     display: flex;

src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.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;
-            }
-        }
     }
 }
 

src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss

@@ -22,7 +22,7 @@ interface CoursesCardProps {
     progress?: LearnUserCertificationProgress
 }
 
-const EXCERPT_TEXT_LEN: number = 99
+const EXCERPT_TEXT_LEN: number = 95
 
 const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
     const desc: string = props.certification.description?.slice(0, EXCERPT_TEXT_LEN)
@@ -49,7 +49,6 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
                             <Button buttonStyle='secondary' size='xs' label='Details' route={detailsRoute} />
 
                         </div>
-                        <div className={styles.completedLabel}>Completed</div>
                     </div>
                 )
             case UserCertificationProgressStatus.inProgress:
@@ -88,7 +87,12 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
             </div>
 
             <div className={styles.cardHeaderDividerWrap}>
-                {isInProgress && <ProgressBar progress={(props.progress?.courseProgressPercentage ?? 0) / 100} />}
+                {(isInProgress || isCompleted) && (
+                    <ProgressBar
+                        progress={(props.progress?.courseProgressPercentage ?? 0) / 100}
+                        track={props.certification.certificationCategory.track}
+                    />
+                )}
                 {!isInProgress && !isCompleted && <div className={styles.cardHeaderDivider} />}
             </div>
 

src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx

@@ -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 {

src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss

@@ -55,7 +55,6 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
                         {getCtaBtn('primary', 'View Certificate', getTCACertificateUrl(dashedName))}
                         {getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName))}
                     </div>
-                    <div className={styles.completedLabel}>Completed</div>
                 </div>
             )
         }
@@ -64,13 +63,16 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
     }
 
     function renderProgressBar(): ReactNode {
-        if (props.progress?.status !== 'enrolled') {
+        if (!isEnrolled && !isCompleted) {
             return <div className={styles.separatorBar} />
         }
 
         return (
             <div className={styles.progressBar}>
-                <ProgressBar progress={props.progress.certificationProgress / 100} />
+                <ProgressBar
+                    progress={props.progress.certificationProgress / 100}
+                    track={props.certification.certificationCategory.track}
+                />
             </div>
         )
     }