TCA-400 - update behavior for fcc sidebar (course outline navigation)

src-ts/tools/learn/course-certificate/certificate-view/certificate/certificate-bg-pattern/CertificateBgPattern.module.scss

@@ -31,7 +31,7 @@
     > div {
         position: absolute;
         top: 0;
-        left: 0;
+        left: -1px;
         width: 100%;
         height: 100%;
         z-index: 1;
@@ -42,7 +42,7 @@
         }
 
         &:global(.wave-bg) {
-            background: url('./wave-bg.png') -1px 0 repeat-y;
+            background: url('./wave-bg.png') 0 0 repeat-y;
             background-size: 400px 116px;
         }
     }

src-ts/tools/learn/free-code-camp/FreeCodeCamp.module.scss

@@ -48,32 +48,3 @@
         }
     }
 }
-
-.course-outline-pane {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-
-    @include ltemd {
-        position: relative;
-        top: auto;
-        left: auto;
-        bottom: auto;
-        flex: 0 0 auto;
-    }
-}
-
-.course-outline-wrap {
-    width: 406px;
-
-    @include ltemd {
-        width: 100%;
-    }
-}
-
-.course-outline-title {
-    @extend .body-main-bold;
-    flex: 0 0 auto;
-    margin-bottom: $space-xl;
-}

src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx

@@ -19,8 +19,6 @@ import {
     ProfileContextData,
 } from '../../../lib'
 import {
-    CollapsiblePane,
-    CourseOutline,
     CoursesProviderData,
     LearnLesson,
     LearnModule,
@@ -39,6 +37,7 @@ import {
 import { getCertificationCompletedPath, getCoursePath, getLessonPathFromModule } from '../learn.routes'
 
 import { FccFrame } from './fcc-frame'
+import { FccSidebar } from './fcc-sidebar'
 import styles from './FreeCodeCamp.module.scss'
 import { TitleNav } from './title-nav'
 
@@ -362,24 +361,13 @@ const FreeCodeCamp: FC<{}> = () => {
 
             {lesson && (
                 <div className={styles['main-wrap']}>
-                    <div className={styles['course-outline-pane']}>
-                        <CollapsiblePane
-                            title='Course Outline'
-                            onToggle={(isOpen) => isOpen && refetchProgress()}
-                        >
-                            <div className={styles['course-outline-wrap']}>
-                                <div className={styles['course-outline-title']}>
-                                    {courseData?.title}
-                                </div>
-                                <CourseOutline
-                                    course={courseData}
-                                    ready={courseDataReady}
-                                    currentStep={`${moduleParam}/${lessonParam}`}
-                                    progress={certificateProgress}
-                                />
-                            </div>
-                        </CollapsiblePane>
-                    </div>
+                    <FccSidebar
+                        courseData={courseData}
+                        courseDataReady={courseDataReady}
+                        currentStep={`${moduleParam}/${lessonParam}`}
+                        certificateProgress={certificateProgress}
+                        refetchProgress={refetchProgress}
+                    />
 
                     <div className={styles['course-frame']}>
                         <TitleNav

src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.module.scss

@@ -0,0 +1,31 @@
+@use '../../../../lib/styles/typography';
+@import '../../../../lib/styles/includes';
+
+.course-outline-pane {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+
+    @include ltemd {
+        position: relative;
+        top: auto;
+        left: auto;
+        bottom: auto;
+        flex: 0 0 auto;
+    }
+}
+
+.course-outline-wrap {
+    width: 406px;
+
+    @include ltemd {
+        width: 100%;
+    }
+}
+
+.course-outline-title {
+    @extend .body-main-bold;
+    flex: 0 0 auto;
+    margin-bottom: $space-xl;
+}

src-ts/tools/learn/free-code-camp/fcc-sidebar/FccSidebar.tsx

@@ -0,0 +1,49 @@
+import { FC, useState } from 'react'
+
+import { CollapsiblePane, CourseOutline, LearnCourse, LearnUserCertificationProgress } from '../../learn-lib'
+
+import styles from './FccSidebar.module.scss'
+
+interface FccSidebarProps {
+    certificateProgress?: LearnUserCertificationProgress
+    courseData?: LearnCourse
+    courseDataReady: boolean
+    currentStep: string
+    refetchProgress: () => void
+}
+
+const FccSidebar: FC<FccSidebarProps> = (props: FccSidebarProps) => {
+    const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+
+    const handleToggle: (isOutlineOpen: boolean) => void = (isOutlineOpen: boolean) => {
+        setIsOpen(isOutlineOpen)
+        if (isOutlineOpen) {
+            props.refetchProgress()
+        }
+    }
+
+    return (
+        <div className={styles['course-outline-pane']}>
+            <CollapsiblePane
+                title='Course Outline'
+                onToggle={handleToggle}
+                isOpen={isOpen}
+            >
+                <div className={styles['course-outline-wrap']}>
+                    <div className={styles['course-outline-title']}>
+                        {props.courseData?.title}
+                    </div>
+                    <CourseOutline
+                        course={props.courseData}
+                        ready={props.courseDataReady}
+                        currentStep={props.currentStep}
+                        progress={props.certificateProgress}
+                        onItemNavigate={() => setIsOpen(false)}
+                    />
+                </div>
+            </CollapsiblePane>
+        </div>
+    )
+}
+
+export default FccSidebar

src-ts/tools/learn/free-code-camp/fcc-sidebar/index.ts

@@ -0,0 +1 @@
+export { default as FccSidebar } from './FccSidebar'

src-ts/tools/learn/learn-lib/collapsible-pane/CollapsiblePane.tsx

@@ -1,13 +1,24 @@
 import classNames from 'classnames'
 import { noop } from 'lodash'
-import { Dispatch, FC, ReactNode, SetStateAction, useCallback, useState } from 'react'
+import {
+    Dispatch,
+    FC,
+    MutableRefObject,
+    ReactNode,
+    SetStateAction,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from 'react'
 
-import { IconSolid } from '../../../../lib'
+import { IconSolid, useClickOutside } from '../../../../lib'
 
 import styles from './CollapsiblePane.module.scss'
 
 interface CollapsiblePaneProps {
     children: ReactNode
+    isOpen?: boolean
     onToggle?: (isOpen: boolean) => void
     position?: 'to-left'|'to-right'
     title: string
@@ -17,13 +28,26 @@ const CollapsiblePane: FC<CollapsiblePaneProps> = (props: CollapsiblePaneProps)
     const {onToggle = noop}: CollapsiblePaneProps = props
     const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
+    const elRef: MutableRefObject<HTMLElement | any> = useRef()
+
     const toggle: () => void = useCallback(() => {
       setIsOpen(!isOpen)
       onToggle(!isOpen)
     }, [isOpen, onToggle])
 
+    const close: () => void = useCallback(() => {
+        setIsOpen(false)
+        onToggle(false)
+    }, [onToggle])
+
+    useEffect(() => {
+        setIsOpen(!!props.isOpen)
+    }, [props.isOpen])
+
+    useClickOutside(elRef.current, close, isOpen)
+
     return (
-        <div className={
+        <div ref={elRef} className={
             classNames(
                 styles['wrap'],
                 props.position ?? 'to-left',

src-ts/tools/learn/learn-lib/course-outline/CourseOutline.tsx

@@ -16,6 +16,7 @@ import styles from './CourseOutline.module.scss'
 interface CourseOutlineProps {
     course?: LearnCourse
     currentStep?: string
+    onItemNavigate: (item: LearnLesson) => void
     progress?: LearnUserCertificationProgress
     ready?: boolean
 }
@@ -52,6 +53,7 @@ const CourseOutline: FC<CourseOutlineProps> = (props: CourseOutlineProps) => {
                             progress={props.progress?.modules}
                             shortDescription={module.meta.introCopy}
                             title={module.meta.name}
+                            onItemClick={props.onItemNavigate}
                         />
                     ))}
                 </div>

src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx

@@ -21,6 +21,7 @@ interface CollapsibleItemProps {
     items: Array<CollapsibleListItem>
     lessonsCount: number
     moduleKey: string
+    onItemClick: (item: any) => void
     path?: (item: any) => string
     progress?: LearnUserCertificationProgress['modules']
     shortDescription: Array<string>
@@ -72,6 +73,7 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
             <li
                 key={key}
                 className={classNames(styles['item-wrap'], !stepCount && 'full-width')}
+                onClick={() => props.onItemClick(item)}
             >
                 {props.path ? (
                     <Link className={styles['item-wrap']} to={props.path(item)}>