TCA-710 TCACert card updates

Author: kkartunov

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certifications.provider.tsx

@@ -46,7 +46,7 @@ export function useGetAllTCACertificationsMOCK(): TCACertificationsProviderData
         sequentialCourses: false,
         status: 'active',
         certificationCategoryId: '',
-        skills: ['HTML', 'CSS', 'JavaScript'],
+        skills: ['HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript'],
     },
     {
         id: 2,

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

@@ -10,7 +10,6 @@
     flex-direction: column;
 
     width: 100%;
-    min-height: 225px;
 
     @include ltemd {
         padding: $space-lg;
@@ -54,6 +53,11 @@
                 font-size: 14px;
                 line-height: 22px;
                 color: $black-60;
+                margin-right: $space-lg;
+
+                &:last-child {
+                    margin-right: 0;
+                }
             }
         }
     }

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

@@ -86,6 +86,11 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
                 <div className={styles.cardHeaderTitleWrap}>
                     <p className='body-medium-medium'>{props.certification.title}</p>
                     <div className={styles.subTitleWrap}>
+                        <IconSolid.DocumentTextIcon width={16} height={16} />
+                        <em>
+                            {/* {props.certification.estimatedCompletionTime} */}
+                            {' modules'}
+                        </em>
                         <IconSolid.ClockIcon width={16} height={16} />
                         <em>
                             {props.certification.completionHours}

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

@@ -30,6 +30,7 @@
 
                 >svg {
                     margin-right: $space-xs;
+                    color: $blue-140;
                 }
             }
         }
@@ -48,10 +49,12 @@
 
     .skills {
         display: flex;
+        flex-wrap: wrap;
         margin: $space-sm 0;
 
         >div {
             margin-right: $space-sm;
+            margin-bottom: $space-sm;
 
             &:last-child {
                 margin-right: 0;
@@ -68,5 +71,9 @@
 .infoText {
     font-style: italic;
     color: $black-60;
-    margin-right: $space-sm;
+    margin-right: $space-lg;
+
+    &:last-child {
+        margin-right: 0;
+    }
 }

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 } from '../../../../../lib'
+import { FccLogoBlackSvg, IconLevel1, IconLevel2, IconLevel3, IconSolid } from '../../../../../lib'
 import { TCACertification } from '../../../learn-lib/data-providers/tca-certifications-provider'
 import { SkillLabel } from '../../skill'
 import { ReactComponent as TCACertBadgeDEV1 } from '../assets/web-dev-cert-badge-1.svg'
@@ -34,6 +34,20 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
                         <span className={classNames('body-small', styles.infoText)}>
                             {props.certification.learnerLevel}
                         </span>
+                        <IconSolid.DocumentTextIcon width={16} height={16} />
+                        <span className={classNames('body-small', styles.infoText)}>
+                            {/* {props.certification.estimatedCompletionTime} */}
+                            {' courses'}
+                        </span>
+                        <IconSolid.ClockIcon width={16} height={16} />
+                        <span className={classNames('body-small', styles.infoText)}>
+                            {props.certification.estimatedCompletionTime}
+                            {' hours'}
+                        </span>
+                        <IconSolid.CurrencyDollarIcon width={16} height={16} />
+                        <span className={classNames('body-small', styles.infoText)}>
+                            {' One time payment'}
+                        </span>
                     </div>
                 </div>
                 <div className={styles.newLabel}>NEW</div>