TCA-868 status of a course into the course cards

Author: kkartunov

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

@@ -17,6 +17,11 @@
     }
 }
 
+.completed {
+    background: $tc-white;
+    border: 1px solid $black-20;
+}
+
 .cardHeader {
     display: flex;
 
@@ -94,4 +99,8 @@
 
 .cardBottom {
     color: $blue-140;
+
+    a:nth-child(2) {
+        margin-left: $space-sm;
+    }
 }

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

@@ -28,6 +28,8 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
         = useState<string>('secondary')
     const [courseProgress, setCourseProgress]: [number | undefined, Dispatch<SetStateAction<number | undefined>>]
         = useState<number | undefined>(undefined)
+    const [linkCompleted, setLinkCompleted]: [string, Dispatch<SetStateAction<string>>]
+        = useState<string>('')
 
     useEffect(() => {
 
@@ -46,10 +48,15 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
         if (isCompleted) {
             // if the course is completed, View the Certificate
             setButtonLabel('View Certificate')
+            setButtonStyle('primary')
             setLink(getCertificatePath(
                 props.certification.providerName,
                 props.certification.certification,
             ))
+            setLinkCompleted(getCoursePath(
+                props.certification.providerName,
+                props.certification.certification,
+            ))
 
         } else if (!inProgress) {
             // if there is no in-progress lesson for the course,
@@ -80,7 +87,7 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
     ])
 
     return (
-        <div className={classNames(styles.wrap, !link && 'soon')}>
+        <div className={classNames(styles.wrap, !link && 'soon', linkCompleted && styles.completed)}>
             <div className={styles.cardHeader}>
                 <CourseBadge type={props.certification.trackType ?? 'DEV'} />
                 <div className={styles.cardHeaderTitleWrap}>
@@ -101,7 +108,7 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
             </div>
 
             <div className={styles.cardHeaderDividerWrap}>
-                {courseProgress === undefined ? (
+                {courseProgress === undefined ? linkCompleted ? undefined : (
                     <div className={styles.cardHeaderDivider} />
                 ) : (
                     <ProgressBar progress={courseProgress} />
@@ -124,6 +131,14 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
                         route={link}
                     />
                 )}
+                {linkCompleted && (
+                    <Button
+                        buttonStyle='secondary'
+                        size='xs'
+                        label='Details'
+                        route={linkCompleted}
+                    />
+                )}
                 {!courseEnabled && (
                     <h4 className='details'>Coming Soon</h4>
                 )}

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

@@ -1,7 +1,7 @@
 import { FC, memo, ReactNode } from 'react'
 import classNames from 'classnames'
 
-import { FccLogoBlackSvg, IconLevel1, IconLevel2, IconLevel3, IconSolid } from '../../../../../lib'
+import { FccLogoBlackSvg, IconLevel1, IconLevel2, IconLevel3, IconSolid, Tooltip } from '../../../../../lib'
 import { TCACertification } from '../../../learn-lib'
 import { SkillLabel } from '../../skill'
 import { ReactComponent as TCACertBadgeDEV1 } from '../assets/web-dev-cert-badge-1.svg'
@@ -62,7 +62,15 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
 
             <div className={styles.skills}>
                 <span className={classNames('body-small', styles.infoText)}>skills taught</span>
-                {skills.map(skill => <SkillLabel skill={skill} />)}
+                {skills.slice(0, 3)
+                    .map(skill => <SkillLabel skill={skill} />)}
+                {skills.length > 3 && (
+                    <Tooltip
+                        content={skills.slice(0, 3)
+                            .join(', ')}
+                        trigger={<SkillLabel skill={`+ ${skills.slice(0, 3).length}`} />}
+                    />
+                )}
             </div>
 
             <div className={styles.contentFrom}>