feat: lesson overview vocab button component

oaknational · Dec 4, 2024 · fb0edf2 · fb0edf2
1 parent 517ea18
commit fb0edf2
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 0 deletions.
diff --git a/src/components/TeacherComponents/LessonOverviewDetails/LessonOverviewDetails.test.tsx b/src/components/TeacherComponents/LessonOverviewDetails/LessonOverviewDetails.test.tsx
@@ -37,6 +37,7 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={supervisionLevel}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
@@ -55,6 +56,7 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={supervisionLevel}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
@@ -74,6 +76,7 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={supervisionLevel}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
@@ -93,6 +96,7 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={supervisionLevel}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
@@ -112,6 +116,7 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={supervisionLevel}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
@@ -131,13 +136,40 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={supervisionLevel}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
     const componentTitle = queryByText("Keywords");
     expect(componentTitle).not.toBeInTheDocument();
   });
 
+  it("should render Vocab button component", () => {
+    const { getByText, getByRole } = renderWithTheme(
+      <LessonOverviewDetails
+        keyLearningPoints={keyLearningPoints}
+        commonMisconceptions={commonMisconceptions}
+        keyWords={keyWords}
+        teacherTips={teacherTips}
+        equipmentAndResources={equipmentAndResources}
+        contentGuidance={contentGuidance}
+        supervisionLevel={supervisionLevel}
+        isMathJaxLesson={false}
+        updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={true}
+      />,
+    );
+
+    const vocabHeading = getByText(
+      "Vocabulary and transcripts for this lessons",
+    );
+    const vocabButton = getByRole("button", {
+      name: /View vocabulary and transcripts in additional material/i,
+    });
+    expect(vocabButton).toBeInTheDocument();
+    expect(vocabHeading).toBeInTheDocument();
+  });
+
   it("should render TeacherTips component with keywords", () => {
     const { getByText } = renderWithTheme(
       <LessonOverviewDetails
@@ -150,6 +182,7 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={supervisionLevel}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
@@ -169,6 +202,7 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={supervisionLevel}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
@@ -188,6 +222,7 @@ describe("LessonOverviewDetails component", () => {
         supervisionLevel={undefined}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 
@@ -212,6 +247,7 @@ describe("LessonOverviewDetails component", () => {
         isLegacyLicense={true}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
     const preAlbCopyright = getByText(
@@ -236,6 +272,7 @@ describe("LessonOverviewDetails component", () => {
         isLegacyLicense={false}
         isMathJaxLesson={false}
         updatedAt="2024-01-01T00:00:00Z"
+        hasVocabAndTranscripts={false}
       />,
     );
 

diff --git a/src/components/TeacherComponents/LessonOverviewDetails/LessonOverviewDetails.tsx b/src/components/TeacherComponents/LessonOverviewDetails/LessonOverviewDetails.tsx
@@ -19,6 +19,7 @@ import {
   Equipment,
 } from "@/components/TeacherComponents/LessonOverviewRequirements/LessonOverviewRequirements";
 import { MathJaxWrap } from "@/browser-lib/mathjax/MathJaxWrap";
+import LessonOverviewVocabButton from "@/components/TeacherComponents/LessonOverviewVocabButton";
 
 type LessonOverviewDetailsProps = {
   keyLearningPoints: LessonOverviewKeyLearningPointProps[] | null | undefined;
@@ -27,6 +28,7 @@ type LessonOverviewDetailsProps = {
   teacherTips: LessonOverviewTeacherTipProps[] | null | undefined;
   equipmentAndResources: Equipment[] | null | undefined;
   contentGuidance: ContentGuidance[] | null | undefined;
+  hasVocabAndTranscripts: boolean;
   supervisionLevel: string | null | undefined;
   isLegacyLicense?: boolean;
   isMathJaxLesson: boolean;
@@ -44,6 +46,7 @@ const LessonOverviewDetails: FC<LessonOverviewDetailsProps> = ({
   isLegacyLicense,
   isMathJaxLesson,
   updatedAt,
+  hasVocabAndTranscripts,
 }) => {
   const MathJaxWrapper = isMathJaxLesson ? MathJaxWrap : Fragment;
   return (
@@ -61,6 +64,11 @@ const LessonOverviewDetails: FC<LessonOverviewDetailsProps> = ({
           $gap="all-spacing-9"
           $mb="space-between-m"
         >
+          {hasVocabAndTranscripts && (
+            <OakBox>
+              <LessonOverviewVocabButton />
+            </OakBox>
+          )}
           {keyLearningPoints && (
             <OakBox>
               <LessonOverviewKeyLearningPoints

diff --git a/src/components/TeacherComponents/LessonOverviewVocabButton/LessonOverviewVocabButton.tsx b/src/components/TeacherComponents/LessonOverviewVocabButton/LessonOverviewVocabButton.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import {
+  OakHeading,
+  OakSecondaryButton,
+  OakFlex,
+} from "@oaknational/oak-components";
+
+import { getContainerId } from "../LessonItemContainer/LessonItemContainer";
+
+const LessonOverviewVocabButton = () => {
+  return (
+    <OakFlex $gap={"all-spacing-6"} $flexDirection={"column"}>
+      <OakHeading $font={["heading-6", "heading-5"]} tag="h3">
+        Vocabulary and transcripts for this lessons
+      </OakHeading>
+      <OakSecondaryButton
+        onClick={() => {
+          document.getElementById("additional-material")?.scrollIntoView();
+          document
+            .getElementById(getContainerId("additional-material"))
+            ?.focus();
+        }}
+      >
+        View vocabulary and transcripts in additional material
+      </OakSecondaryButton>
+    </OakFlex>
+  );
+};
+
+export default LessonOverviewVocabButton;
diff --git a/src/components/TeacherComponents/LessonOverviewVocabButton/index.tsx b/src/components/TeacherComponents/LessonOverviewVocabButton/index.tsx
@@ -0,0 +1 @@
+export { default } from "./LessonOverviewVocabButton";
diff --git a/src/components/TeacherViews/LessonOverview/LessonOverview.view.tsx b/src/components/TeacherViews/LessonOverview/LessonOverview.view.tsx
@@ -97,6 +97,7 @@ export function LessonOverview({ lesson }: LessonOverviewProps) {
     isCanonical,
     lessonGuideUrl,
     teacherShareButton,
+    additionalMaterialUrl,
   } = lesson;
   const { track } = useAnalytics();
   const { analyticsUseCase } = useAnalyticsPageProps();
@@ -382,6 +383,8 @@ export function LessonOverview({ lesson }: LessonOverviewProps) {
                     supervisionLevel={supervisionLevel}
                     isLegacyLicense={isLegacyLicense}
                     isMathJaxLesson={isMathJaxLesson}
+                    // change
+                    hasVocabAndTranscripts={Boolean(additionalMaterialUrl)}
                     updatedAt={updatedAt}
                   />
                 </LessonItemContainer>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from "./LessonOverviewVocabButton";