feat(components): Create LessonTabs

__tests__/__snapshots__/storyshots.test.js.snap

@@ -11096,6 +11096,44 @@ exports[`Storyshots Components/LessonLayout With Text 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/LessonTabs Lesson Tabs 1`] = `
+<div
+  className="navCard__tabsNav"
+>
+  <div
+    className="navCard__tabsNav__nav"
+  >
+    <a
+      className="navCard__tabsNav__nav__item--inactive nav-pills"
+      href="/curriculum/js0"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      CHALLENGES
+    </a>
+    <a
+      className="navCard__tabsNav__nav__item nav-pills"
+      href="/exercises/js0"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      EXERCISES
+    </a>
+    <a
+      className="navCard__tabsNav__nav__item--inactive nav-pills"
+      href="/curriculum/js0/mentor"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      MENTOR EXERCISES
+    </a>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/LessonTitleCard Basic 1`] = `
 <div
   className="card shadow-sm mt-3 col-12 px-0 pt-3 border-0"

__tests__/pages/exercises/[lessonSlug].test.js

@@ -32,7 +32,7 @@ describe('Exercises page', () => {
 
     screen.getByRole('link', { name: 'CHALLENGES' })
     screen.getByRole('link', { name: 'EXERCISES' })
-    screen.getByRole('link', { name: 'LESSONS' })
+    screen.getByRole('link', { name: 'LESSON' })
   })
 
   test('Renders exercise card with the skip, previous, and exit buttons', async () => {

components/LessonTabs/LessonTabs.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { CURRICULUM_PATH } from '../../constants'
+import NavCard from '../NavCard'
+
+type Lesson = {
+  title: string
+  docUrl?: string | null
+  slug: string
+}
+
+type Props = {
+  lesson: Lesson
+  activeTab: 'lesson' | 'challenges' | 'exercises' | 'mentor exercises'
+}
+
+const LessonTabs = ({ lesson, activeTab }: Props) => {
+  const tabs = [
+    ...(lesson.docUrl ? [{ text: 'lesson', url: lesson.docUrl }] : []),
+    { text: 'challenges', url: `${CURRICULUM_PATH}/${lesson.slug}` },
+    { text: 'exercises', url: `/exercises/${lesson.slug}` },
+    {
+      text: 'mentor exercises',
+      url: `${CURRICULUM_PATH}/${lesson.slug}/mentor`
+    }
+  ]
+
+  return (
+    <NavCard
+      tabSelected={tabs.findIndex(tab => tab.text === activeTab)}
+      tabs={tabs}
+    />
+  )
+}
+
+export default LessonTabs

components/LessonTabs/index.tsx

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

pages/curriculum/[lessonSlug]/mentor/index.tsx

@@ -8,11 +8,17 @@ import { GetExercisesQuery, useGetSessionQuery } from '../../../../graphql'
 import Error, { StatusCode } from '../../../../components/Error'
 import LoadingSpinner from '../../../../components/LoadingSpinner'
 import AlertsDisplay from '../../../../components/AlertsDisplay'
-import NavCard from '../../../../..../../components/NavCard'
 import ExercisePreviewCard from '../../../../..../../components/ExercisePreviewCard'
 import { NewButton } from '../../../../..../../components/theme/Button'
 import GET_EXERCISES from '../../../../..../../graphql/queries/getExercises'
 import styles from '../../../../scss/exercises.module.scss'
+import LessonTabs from '../../../../components/LessonTabs'
+
+type ExerciseLesson = {
+  title: string
+  docUrl?: string | null
+  slug: string
+}
 
 const MentorPage: React.FC<QueryDataProps<GetExercisesQuery>> = ({
   queryData
@@ -65,7 +71,7 @@ const MentorPage: React.FC<QueryDataProps<GetExercisesQuery>> = ({
         tabs={tabs}
         lessonTitle={currentLesson.title}
         exercises={currentExercises}
-        lessonSlug={currentLesson.slug}
+        lesson={currentLesson}
       />
 
       {alerts && <AlertsDisplay alerts={alerts} />}
@@ -81,24 +87,20 @@ type ExerciseListProps = {
     problem: string
     answer: string
   }[]
-  lessonSlug: string
+  lesson: ExerciseLesson
 }
 
 const ExerciseList = ({
-  tabs,
   lessonTitle,
   exercises,
-  lessonSlug
+  lesson
 }: ExerciseListProps) => {
   const router = useRouter()
 
   return (
     <>
       <div className="mb-4">
-        <NavCard
-          tabSelected={tabs.findIndex(tab => tab.text === 'mentor exercises')}
-          tabs={tabs}
-        />
+        <LessonTabs lesson={lesson} activeTab="mentor exercises" />
       </div>
       <div className="d-flex flex-column flex-md-row justify-content-between align-items-center">
         <h1 className="my-2 my-md-5 fs-2">{lessonTitle}</h1>
@@ -108,7 +110,7 @@ const ExerciseList = ({
           <NewButton
             className="flex-grow-1"
             onClick={() =>
-              router.push(`/curriculum/${lessonSlug}/mentor/addExercise`)
+              router.push(`/curriculum/${lesson.slug}/mentor/addExercise`)
             }
           >
             ADD EXERCISE

pages/exercises/[lessonSlug].tsx

@@ -11,7 +11,6 @@ import {
 import Error, { StatusCode } from '../../components/Error'
 import LoadingSpinner from '../../components/LoadingSpinner'
 import AlertsDisplay from '../../components/AlertsDisplay'
-import NavCard from '../../components/NavCard'
 import ExercisePreviewCard, {
   ExercisePreviewCardProps
 } from '../../components/ExercisePreviewCard'
@@ -20,6 +19,13 @@ import ExerciseCard, { Message } from '../../components/ExerciseCard'
 import { ArrowLeftIcon } from '@primer/octicons-react'
 import GET_EXERCISES from '../../graphql/queries/getExercises'
 import styles from '../../scss/exercises.module.scss'
+import LessonTabs from '../../components/LessonTabs'
+
+type ExerciseLesson = {
+  title: string
+  docUrl?: string | null
+  slug: string
+}
 
 const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
   queryData
@@ -51,18 +57,6 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
   if (!currentLesson)
     return <Error code={StatusCode.NOT_FOUND} message="Lesson not found" />
 
-  const tabs = [
-    ...(currentLesson.docUrl
-      ? [{ text: 'lessons', url: currentLesson.docUrl }]
-      : []),
-    { text: 'challenges', url: `/curriculum/${currentLesson.slug}` },
-    { text: 'exercises', url: `/exercises/${currentLesson.slug}` },
-    {
-      text: 'mentor exercises',
-      url: `/curriculum/${currentLesson.slug}/mentor/`
-    }
-  ]
-
   const currentExercises = exercises
     .filter(exercise => exercise?.module.lesson.slug === slug)
     .map(exercise => {
@@ -103,12 +97,12 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
         />
       ) : (
         <ExerciseList
-          tabs={tabs}
           onClickSolveExercises={() => setSolvingExercise(true)}
           lessonTitle={currentLesson.title}
           hideAnswered={hideAnswered}
           setHideAnswered={setHideAnswered}
           exercises={currentExercises}
+          lesson={currentLesson}
         />
       )}
       {alerts && <AlertsDisplay alerts={alerts} />}
@@ -233,29 +227,26 @@ type ExerciseListItem = {
 }
 
 type ExerciseListProps = {
-  tabs: { text: string; url: string }[]
   onClickSolveExercises: () => void
   lessonTitle: string
   hideAnswered: boolean
   setHideAnswered: (hideAnswered: boolean) => void
   exercises: ExerciseListItem[]
+  lesson: ExerciseLesson
 }
 
 const ExerciseList = ({
-  tabs,
   onClickSolveExercises,
   lessonTitle,
   hideAnswered,
   setHideAnswered,
-  exercises
+  exercises,
+  lesson
 }: ExerciseListProps) => {
   return (
     <>
       <div className="mb-4">
-        <NavCard
-          tabSelected={tabs.findIndex(tab => tab.text === 'exercises')}
-          tabs={tabs}
-        />
+        <LessonTabs lesson={lesson} activeTab={'exercises'} />
       </div>
       <div className="d-flex flex-column flex-md-row justify-content-between align-items-center">
         <div className="my-2 my-md-5">

stories/components/LessonTabs.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import LessonTabs from '../../components/LessonTabs'
+
+export default {
+  components: LessonTabs,
+  title: 'Components/LessonTabs'
+}
+
+export const _LessonTabs: React.FC = () => (
+  <LessonTabs
+    lesson={{
+      title: 'Foundations of JavaScript',
+      docUrl: '',
+      slug: 'js0'
+    }}
+    activeTab={'exercises'}
+  />
+)