TCA-407 - add empty placeholder & update cards theme

Author: vas3a

src-ts/lib/form/form-groups/form-input/input-select/InputSelect.tsx

@@ -68,7 +68,7 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
             hideInlineErrors={props.hideInlineErrors}
             ref={triggerRef}
         >
-            <div className={styles['selected']} onClick={toggleMenu}>
+            <div className={styles['selected']} onClick={() => !props.disabled && toggleMenu}>
                 <span className='body-small'>{selectedOption ? label(selectedOption) : ''}</span>
                 <span className={styles['selected-icon']}>
                     <IconOutline.ChevronDownIcon />

src-ts/lib/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss

@@ -78,6 +78,7 @@ $error-line-height: 14px;
         background-color: $black-10;
         background: $black-10;
         border-color: $black-40;
+        pointer-events: none;
     }
 
     &.input-error {

src-ts/tools/learn/learn-lib/my-course-card/completed/Completed.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { FC } from 'react'
 
 import { Button, textFormatDateLocaleShortString } from '../../../../../lib'
@@ -18,7 +19,7 @@ const Completed: FC<CompletedProps> = (props: CompletedProps) => {
     }
 
     return (
-        <div className={styles['wrap']}>
+        <div className={classNames(styles['wrap'], 'course-card-wrap', 'completed')}>
             <div className={styles['line']}>
                 <CourseTitle
                     title={props.certification.title}

src-ts/tools/learn/learn-lib/my-course-card/in-progress/InProgress.tsx

@@ -50,7 +50,7 @@ const InProgress: FC<InProgressProps> = (props: InProgressProps) => {
     }
 
     return (
-        <div className={classNames(styles['wrap'], styles['large'])}>
+        <div className={classNames(styles['wrap'], styles['large'], 'course-card-wrap', 'in-progress')}>
             <div className={styles['inner']}>
                 <div className={styles['line']}>
                     <CourseTitle

src-ts/tools/learn/my-learning/MyLearning.module.scss

@@ -3,10 +3,9 @@
 .wrap {
     flex: 1 1 auto;
     position: relative;
-}
-
-.content-layout {
-    background: $black-5;
+    margin-top: $space-xxxxl;
+    display: flex;
+    flex-direction: column;
 }
 
 .hero-wrap {

src-ts/tools/learn/my-learning/MyLearning.tsx

@@ -77,6 +77,7 @@ const MyLearning: FC<{}> = () => {
                     <div className={styles['hero-wrap']}>
                         <WaveHero
                             title='my learning'
+                            theme='light'
                             text={`
                                 This is your very own page to keep track of your professional education and skill building.
                                 From here you can resume your courses in progress or review past accomplishments.

src-ts/tools/learn/my-learning/completed-tab/CompletedTab.module.scss

@@ -9,9 +9,22 @@
         flex: 0 1 calc(50% - calc($space-xxl / 2));
     }
 
+    > :global(.course-card-wrap) {
+        background: $black-5;
+    }
+
     @include ltemd {
         > * {
             flex: 1 1 0;
         }
     }
 }
+
+.placeholder-wrap {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $space-xxl;
+}

src-ts/tools/learn/my-learning/completed-tab/CompletedTab.tsx

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from 'react'
 
+import { Button } from '../../../../lib'
 import { LearnCertification, MyCourseCompletedCard, UserCertificationCompleted } from '../../learn-lib'
+import { LEARN_PATHS } from '../../learn.routes'
 import { sortOptions } from '../my-learning-sort-options'
 import { MyTabsViews } from '../my-tabs-navbar'
 import { TabContentLayout } from '../tab-content-layout'
@@ -25,14 +27,30 @@ const CompletedTab: FC<CompletedTabProps> = (props: CompletedTabProps) => {
         props.certifications
     )
 
+    const hasCertifications: boolean = certifications.length >= 1
+
+    const renderPlaceholder: () => ReactNode = () => (
+        <div className={styles['placeholder-wrap']}>
+            <div className='body-medium-bold'>
+                Your Completed courses will live here. Let’s go!
+            </div>
+            <Button
+                route={LEARN_PATHS.root}
+                buttonStyle='primary'
+                size='md'
+                label='Start a course'
+            />
+        </div>
+    )
+
     const renderCertificationsList: () => ReactNode = () => (
-        certifications.map((certif) => (
+        hasCertifications ? certifications.map((certif) => (
             <MyCourseCompletedCard
                 certification={props.certificatesById[certif.certificationId]}
                 key={certif.certificationId}
                 completed={certif.completedDate}
             />
-        ))
+        )) : renderPlaceholder()
     )
 
     return (
@@ -42,6 +60,7 @@ const CompletedTab: FC<CompletedTabProps> = (props: CompletedTabProps) => {
             sortOptions={sortOptions.completed}
             onSortChange={handleSortChange}
             onCategoryChange={handleCategoryChange}
+            disableFilters={!hasCertifications}
         >
             <div className={styles['cards-wrap']}>
                 {renderCertificationsList()}

src-ts/tools/learn/my-learning/in-progress-tab/InProgressTab.module.scss

@@ -0,0 +1,25 @@
+@import '../../../../lib/styles/includes';
+
+.wrap {
+    gap: $space-lg;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    @include ltemd {
+        gap: $space-xxl;
+    }
+
+    > :global(.course-card-wrap) {
+        background: $black-5;
+    }
+}
+
+.placeholder-wrap {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $space-xxl;
+}

src-ts/tools/learn/my-learning/in-progress-tab/InProgressTab.tsx

@@ -1,11 +1,15 @@
 import { FC, ReactNode } from 'react'
 
+import { Button } from '../../../../lib'
 import { LearnCertification, MyCourseInProgressCard, UserCertificationInProgress } from '../../learn-lib'
+import { LEARN_PATHS } from '../../learn.routes'
 import { sortOptions } from '../my-learning-sort-options'
 import { MyTabsViews } from '../my-tabs-navbar'
 import { TabContentLayout } from '../tab-content-layout'
 import { useSortAndFilter, UseSortAndFilterValue } from '../use-sort-and-filter'
 
+import styles from './InProgressTab.module.scss'
+
 interface InProgressTabProps {
     allCertificates: ReadonlyArray<LearnCertification>
     certificatesById: {[key: string]: LearnCertification}
@@ -23,8 +27,24 @@ const InProgressTab: FC<InProgressTabProps> = (props: InProgressTabProps) => {
         props.certifications
     )
 
+    const hasCertifications: boolean = certifications.length >= 1
+
+    const renderPlaceholder: () => ReactNode = () => (
+        <div className={styles['placeholder-wrap']}>
+            <div className='body-medium-bold'>
+                Your In Progress courses will live here. Let’s go!
+            </div>
+            <Button
+                route={LEARN_PATHS.root}
+                buttonStyle='primary'
+                size='md'
+                label='Start a course'
+            />
+        </div>
+    )
+
     const renderCertificationsList: () => ReactNode = () => (
-        certifications.map((certif) => (
+        hasCertifications ? certifications.map((certif) => (
             <MyCourseInProgressCard
                 certification={props.certificatesById[certif.certificationId]}
                 key={certif.certificationId}
@@ -33,7 +53,7 @@ const InProgressTab: FC<InProgressTabProps> = (props: InProgressTabProps) => {
                 completedPercentage={certif.courseProgressPercentage / 100}
                 startDate={certif.startDate}
             />
-        ))
+        )) : renderPlaceholder()
     )
 
     return (
@@ -43,8 +63,11 @@ const InProgressTab: FC<InProgressTabProps> = (props: InProgressTabProps) => {
             sortOptions={sortOptions.inProgress}
             onSortChange={handleSortChange}
             onCategoryChange={handleCategoryChange}
+            disableFilters={!hasCertifications}
         >
-            {renderCertificationsList()}
+            <div className={styles.wrap}>
+                {renderCertificationsList()}
+            </div>
         </TabContentLayout>
     )
 }