From 35451f7a3985462a532484a1109c8f7a4c94f7e7 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Fri, 15 Nov 2024 06:42:16 -0600
Subject: [PATCH] Fix k12 resources section (#2682)

Fix width
Fix specifier so it displays as grid
---
 src/app/components/tablist/tablist.scss  |  1 +
 src/app/pages/k12/subject/resources.scss |  2 +-
 src/app/pages/k12/subject/resources.tsx  | 68 ++++++++++++++----------
 src/app/pages/k12/subject/subject.js     |  2 +-
 test/src/pages/k12/resources.test.tsx    |  4 ++
 5 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/app/components/tablist/tablist.scss b/src/app/components/tablist/tablist.scss
index e314f3661..d447e713c 100644
--- a/src/app/components/tablist/tablist.scss
+++ b/src/app/components/tablist/tablist.scss
@@ -3,6 +3,7 @@
 .tabs {
     display: flex;
     flex-direction: column;
+    width: 100%;
 
     .vertical {
         flex-direction: row;
diff --git a/src/app/pages/k12/subject/resources.scss b/src/app/pages/k12/subject/resources.scss
index 11237b19d..d2b98ee80 100644
--- a/src/app/pages/k12/subject/resources.scss
+++ b/src/app/pages/k12/subject/resources.scss
@@ -18,7 +18,7 @@
         width: 100%;
     }
 
-    .content-group {
+    [role="tabpanel"] {
         padding: 6rem 0;
 
         .card-grid:not([hidden]) {
diff --git a/src/app/pages/k12/subject/resources.tsx b/src/app/pages/k12/subject/resources.tsx
index c21a7e73f..4c52c44df 100644
--- a/src/app/pages/k12/subject/resources.tsx
+++ b/src/app/pages/k12/subject/resources.tsx
@@ -7,7 +7,11 @@ import {TrackedMouseEvent} from '~/components/shell/router-helpers/use-link-hand
 import bookTitles from '~/models/book-titles';
 import './resources.scss';
 
-function LinkWithGiveDialog({href, book, track}: {
+function LinkWithGiveDialog({
+    href,
+    book,
+    track
+}: {
     href: string;
     book: string;
     track: string;
@@ -33,10 +37,14 @@ function LinkWithGiveDialog({href, book, track}: {
 
     return (
         <React.Fragment>
-            <a href={href} onClick={openGiveDialog} data-track={track}>{book}</a>
+            <a href={href} onClick={openGiveDialog} data-track={track}>
+                {book}
+            </a>
             <GiveDialog
-            link={href} variant='K12 resource' track={track}
-            onDownload={trackDownloadClick}
+                link={href}
+                variant="K12 resource"
+                track={track}
+                onDownload={trackDownloadClick}
             />
         </React.Fragment>
     );
@@ -50,20 +58,17 @@ type LinkData = {
     linkDocumentUrl: string;
 };
 
-function ResourceLink({ data, track }: {
-    data: LinkData;
-    track: string;
-}) {
+function ResourceLink({data, track}: {data: LinkData; track: string}) {
     const url = data.linkExternal || data.linkDocumentUrl;
     const {isVerified} = useUserContext();
 
     return (
         <li>
-            {
-                data.resourceUnlocked || isVerified ?
-                <LinkWithGiveDialog href={url} book={data.book} track={track} /> :
+            {data.resourceUnlocked || isVerified ? (
+                <LinkWithGiveDialog href={url} book={data.book} track={track} />
+            ) : (
                 <span>{data.book} (verified instructor only)</span>
-            }
+            )}
         </li>
     );
 }
@@ -82,9 +87,9 @@ type ResourceHeader = LinkData & {
 };
 type ResourceDict = {
     [name: string]: ResourceHeader[];
-}
+};
 
-function ResourceToContent({ resources }: {resources: ResourceDict}) {
+function ResourceToContent({resources}: {resources: ResourceDict}) {
     return (
         <div className="card-grid">
             {(Reflect.ownKeys(resources) as string[])?.map((name) => {
@@ -98,7 +103,11 @@ function ResourceToContent({ resources }: {resources: ResourceDict}) {
                         </div>
                         <ul>
                             {resourceList.map((r) => (
-                                <ResourceLink key={r.book} data={r} track={name} />
+                                <ResourceLink
+                                    key={r.book}
+                                    data={r}
+                                    track={name}
+                                />
                             ))}
                         </ul>
                     </div>
@@ -124,7 +133,8 @@ type HeaderKeys = 'facultyResourceHeaders' | 'studentResourceHeaders';
 export default function Resources({
     data,
     labels,
-    selectedLabel
+    selectedLabel,
+    setSelectedLabel
 }: {
     data: {
         resourcesHeading: string;
@@ -133,11 +143,13 @@ export default function Resources({
     };
     labels: string[];
     selectedLabel: string;
+    setSelectedLabel: (s: unknown) => void;
 }) {
     const resources = React.useMemo(
-        () => ['facultyResourceHeaders', 'studentResourceHeaders'].map(
-            (k) => resourceHeadersToResources(data[k as HeaderKeys])
-        ),
+        () =>
+            ['facultyResourceHeaders', 'studentResourceHeaders'].map((k) =>
+                resourceHeadersToResources(data[k as HeaderKeys])
+            ),
         [data]
     );
 
@@ -145,14 +157,16 @@ export default function Resources({
         <section id="resources">
             <div className="boxed">
                 <h1>{data.resourcesHeading}</h1>
-                <Tabs aria-label="Resource tabs" selectedKey={selectedLabel}>
-                    {
-                        labels.map((label, i) =>
-                            <Item key={label} title={label}>
-                                <ResourceToContent resources={resources[i]} />
-                            </Item>
-                        )
-                    }
+                <Tabs
+                    aria-label="Resource tabs"
+                    selectedKey={selectedLabel}
+                    onSelectionChange={setSelectedLabel}
+                >
+                    {labels.map((label, i) => (
+                        <Item key={label} title={label}>
+                            <ResourceToContent resources={resources[i]} />
+                        </Item>
+                    ))}
                 </Tabs>
             </div>
         </section>
diff --git a/src/app/pages/k12/subject/subject.js b/src/app/pages/k12/subject/subject.js
index 522e0a57a..dc5b5f9bc 100644
--- a/src/app/pages/k12/subject/subject.js
+++ b/src/app/pages/k12/subject/subject.js
@@ -71,7 +71,7 @@ function Subject({ data }) {
             <QuickLinks {...{ labels, setSelectedLabel }} />
             <Books data={data} />
             <WhatTeachersSay data={data} />
-            <Resources {...{ data, labels, selectedLabel }} />
+            <Resources {...{ data, labels, selectedLabel, setSelectedLabel }} />
             {/* <Blogs data={data} /> */}
             <Contact data={data} />
         </div>
diff --git a/test/src/pages/k12/resources.test.tsx b/test/src/pages/k12/resources.test.tsx
index 46b3131b8..e07ecb90f 100644
--- a/test/src/pages/k12/resources.test.tsx
+++ b/test/src/pages/k12/resources.test.tsx
@@ -56,6 +56,7 @@ describe('k12 subject resources', () => {
                     }}
                     labels={['one', 'two']}
                     selectedLabel="one"
+                    setSelectedLabel={jest.fn()}
                 />
             </MemoryRouter>
         );
@@ -94,6 +95,7 @@ describe('k12 subject resources', () => {
                 }}
                 labels={['one', 'two']}
                 selectedLabel="one"
+                setSelectedLabel={jest.fn()}
             />
         );
         expect(screen.queryAllByRole('link')).toHaveLength(0);
@@ -126,6 +128,7 @@ describe('k12 subject resources', () => {
                     }}
                     labels={['one', 'two']}
                     selectedLabel="one"
+                    setSelectedLabel={jest.fn()}
                 />
             </MemoryRouter>
         );
@@ -169,6 +172,7 @@ describe('k12 subject resources', () => {
                     }}
                     labels={['one', 'two']}
                     selectedLabel="one"
+                    setSelectedLabel={jest.fn()}
                 />
             </MemoryRouter>
         );