Merge pull request #2272 from bryanjenningz/make-admin-lesson-nav-gen…

…eric

Make AdminLessonNav more generic

__tests__/__snapshots__/storyshots.test.js.snap

@@ -866,46 +866,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components/AdminLessonNav Basic 1`] = `
-<div>
-  <div
-    className="lessons_tabsNav"
-  >
-    <div
-      className="lessons__tabsNav__nav"
-    >
-      <a
-        className="lessons_tabsNav__nav__item--inactive nav-pills"
-        href="/admin/lessons/1/introduction"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        INTRODUCTION
-      </a>
-      <a
-        className="lessons_tabsNav__nav__item--inactive nav-pills"
-        href="/admin/lessons/1/modules"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        MODULES
-      </a>
-      <a
-        className="lessons_tabsNav__nav__item--inactive nav-pills"
-        href="/admin/lessons/1/challenges"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        CHALLENGES
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Components/AdminLessonSideNav Basic 1`] = `
 <div
   className="container"
@@ -12203,6 +12163,44 @@ exports[`Storyshots Components/ModalCard Small 1`] = `
 </button>
 `;
 
+exports[`Storyshots Components/NavCard Basic 1`] = `
+<div
+  className="navCard__tabsNav"
+>
+  <div
+    className="navCard__tabsNav__nav"
+  >
+    <a
+      className="navCard__tabsNav__nav__item--inactive nav-pills"
+      href="/admin/lessons/1/introduction"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      INTRODUCTION
+    </a>
+    <a
+      className="navCard__tabsNav__nav__item--inactive nav-pills"
+      href="/admin/lessons/1/modules"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      MODULES
+    </a>
+    <a
+      className="navCard__tabsNav__nav__item--inactive nav-pills"
+      href="/admin/lessons/1/challenges"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+      onTouchStart={[Function]}
+    >
+      CHALLENGES
+    </a>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/NavLink Active Link 1`] = `
 Array [
   <a

__tests__/pages/admin/lessons/[lessonSlug]/[pageName]/modules.test.js

@@ -252,7 +252,7 @@ describe('modules', () => {
     await act(() => new Promise(res => setTimeout(res, 0)))
 
     expect(screen.getByText('MODULES').className).not.toEqual(
-      'lessons_tabsNav__nav__item'
+      'navCard__tabsNav__nav__item'
     )
   })
 })

components/NavCard.tsx

@@ -0,0 +1,47 @@
+import Link from 'next/link'
+import React from 'react'
+import styles from '../scss/navCard.module.scss'
+
+type Tab = {
+  text: string
+  url: string
+}
+
+type NavCardProps = {
+  tabSelected: number
+  tabs: Tab[]
+}
+
+const NavCard = ({ tabSelected, tabs }: NavCardProps) => {
+  return (
+    <div className={styles.navCard__tabsNav}>
+      <div className={styles.navCard__tabsNav__nav}>
+        {tabs.map((tab, i) => (
+          <NavCardItem key={i} isSelected={i === tabSelected} tab={tab} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+type NavCardItemProps = {
+  isSelected: boolean
+  tab: Tab
+}
+
+const NavCardItem = ({ isSelected, tab }: NavCardItemProps) => {
+  const className =
+    styles[
+      isSelected
+        ? 'navCard__tabsNav__nav__item'
+        : 'navCard__tabsNav__nav__item--inactive'
+    ]
+
+  return (
+    <Link href={tab.url}>
+      <a className={`${className} nav-pills`}>{tab.text.toUpperCase()}</a>
+    </Link>
+  )
+}
+
+export default NavCard

pages/admin/lessons/[lessonSlug]/[pageName]/index.tsx

@@ -1,18 +1,15 @@
 import { gql, useQuery } from '@apollo/client'
 import { GetAppProps, withGetApp } from '../../../../../graphql'
-import { toUpper } from 'lodash'
 import React, { useMemo, useState } from 'react'
-import AdminLessonNav from '../../../../../components/admin/lessons/AdminLessonSideNavLayout'
 import AdminLessonSideNav from '../../../../../components/admin/lessons/AdminLessonSideNav'
 import AdminLessonInputs from '../../../../../components/admin/lessons/AdminLessonInputs'
 import { Props } from '../../../../../components/admin/lessons/AdminLessonInputs/AdminLessonInputs'
 import Breadcrumbs from '../../../../../components/Breadcrumbs'
 import styles from '../../../../../scss/modules.module.scss'
-import navStyles from '../../../../../scss/adminLessonNav.module.scss'
 import { AdminLayout } from '../../../../../components/admin/AdminLayout'
 import { useRouter } from 'next/router'
-import Link from 'next/link'
 import { compose, filter, get, sortBy } from 'lodash/fp'
+import NavCard from '../../../../../components/NavCard'
 
 const MAIN_PATH = '/admin/lessons'
 
@@ -114,25 +111,13 @@ const Lessons = ({ data }: GetAppProps) => {
     return sortModules(modulesData)
   }, [lesson.id, get('modules', modulesData)])
 
-  const LessonNav = ({
-    tab
-  }: {
-    tab: { tabName: string; urlPageName: string }
-  }) => {
-    const isSelected = tab.urlPageName === pageName
-    const className =
-      navStyles[
-        isSelected
-          ? 'lessons_tabsNav__nav__item'
-          : 'lessons_tabsNav__nav__item--inactive'
-      ]
-
-    return (
-      <Link href={`${MAIN_PATH}/${lessonSlug}/${tab.urlPageName}`}>
-        <a className={`${className} nav-pills`}>{toUpper(tab.tabName)}</a>
-      </Link>
-    )
-  }
+  const tabs = [
+    {
+      text: 'modules',
+      url: `${MAIN_PATH}/${lesson.slug}/modules`
+    }
+  ]
+  const tabSelected = tabs.findIndex(tab => tab.text === pageName)
 
   return (
     <AdminLayout data={data}>
@@ -148,15 +133,7 @@ const Lessons = ({ data }: GetAppProps) => {
           />
         </header>
         <section>
-          <AdminLessonNav
-            tabs={[
-              {
-                tabName: 'modules',
-                urlPageName: 'modules'
-              }
-            ]}
-            Component={LessonNav}
-          />
+          <NavCard tabSelected={tabSelected} tabs={tabs} />
         </section>
         <section>
           <Content

scss/adminLessonNav.module.scss → scss/navCard.module.scss

@@ -6,7 +6,7 @@ $light: hsl(0, 0%, 98.4%);
 $dark_primary: color.adjust(variables.$primary, $lightness: -20%);
 $light_primary: color.adjust(variables.$primary, $lightness: 28%);
 
-.lessons_tabsNav {
+.navCard__tabsNav {
   font-family: 'PT Mono';
   max-width: fit-content;
   padding: 8px 16px;
@@ -20,15 +20,15 @@ $light_primary: color.adjust(variables.$primary, $lightness: 28%);
   border: 1px solid $light_primary;
 }
 
-.lessons__tabsNav__nav {
+.navCard__tabsNav__nav {
   display: flex;
   column-gap: 20px;
   justify-content: center;
   row-gap: 20px;
   flex-wrap: nowrap;
 }
 
-.lessons_tabsNav__nav__item {
+.navCard__tabsNav__nav__item {
   padding: 7px 16px;
   border-radius: 4px;
   background-color: variables.$primary;
@@ -39,11 +39,11 @@ $light_primary: color.adjust(variables.$primary, $lightness: 28%);
   font-size: 14px;
 }
 
-.lessons_tabsNav__nav__item:hover {
+.navCard__tabsNav__nav__item:hover {
   color: white;
 }
 
-.lessons_tabsNav__nav__item--inactive {
+.navCard__tabsNav__nav__item--inactive {
   padding: 7px 16px;
   border-radius: 4px;
   color: $dark_primary;
@@ -55,12 +55,8 @@ $light_primary: color.adjust(variables.$primary, $lightness: 28%);
   font-size: 14px;
 }
 
-.lessons_tabsNav__nav__item--inactive:hover {
+.navCard__tabsNav__nav__item--inactive:hover {
   background-color: color.change(variables.$primary, $lightness: 95%);
   color: $dark_primary;
   transition: background-color 0.3s ease-out;
 }
-
-.lessons_tabs {
-  margin-top: 40px;
-}

stories/components/NavCard.stories.tsx

@@ -0,0 +1,28 @@
+import { useRouter } from 'next/router'
+import * as React from 'react'
+import NavCard from '../../components/NavCard'
+
+export default {
+  component: NavCard,
+  title: 'Components/NavCard'
+}
+
+export const Basic = () => {
+  const router = useRouter()
+  const pageName = router.asPath.split('/').slice(-1)[0]
+  const tabs = ['introduction', 'modules', 'challenges'].map(text => ({
+    text,
+    url: `/admin/lessons/1/${text}`
+  }))
+  const tabSelected = tabs.findIndex(tab => tab.text === pageName)
+
+  return <NavCard tabSelected={tabSelected} tabs={tabs} />
+}
+
+const parameters = {
+  nextRouter: {
+    asPath: 'c0d3.com/admin/lessons/1/introduction'
+  }
+}
+
+Basic.parameters = parameters