From 0bfd8fac8224103e93e243e2e4182b863b64cd6d Mon Sep 17 00:00:00 2001
From: Joe Baker <joe.baker@thenational.academy>
Date: Wed, 24 Jul 2024 10:51:03 +0100
Subject: [PATCH] feat: style and prop updates to unit list and container

---
 .../OakUnitListItem.stories.tsx               | 39 +++++++----
 .../OakUnitListItem/OakUnitListItem.test.tsx  | 66 ++++++++++++++++--
 .../OakUnitListItem/OakUnitListItem.tsx       | 24 +++----
 .../OakUnitListItem.test.tsx.snap             | 69 ++++++++++---------
 .../OakUnitsContainer/OakUnitsContainer.tsx   | 11 ++-
 .../OakUnitsContainer.test.tsx.snap           | 13 +++-
 src/components/organisms/teacher/index.ts     |  1 +
 7 files changed, 156 insertions(+), 67 deletions(-)

diff --git a/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.stories.tsx b/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.stories.tsx
index 6e74fab2..fc38feb6 100644
--- a/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.stories.tsx
+++ b/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.stories.tsx
@@ -14,15 +14,15 @@ const meta: Meta<typeof OakUnitListItem> = {
       "Migration: What do sources tell us about the British Empire in India and Africa?",
     index: 1,
     href: "#",
-    yearGroup: "Year 10",
-    numberOfLessons: 10,
+    yearTitle: "Year 10",
+    lessonCount: 10,
     isLegacy: false,
   },
   argTypes: {
     title: { control: { type: "text" } },
-    yearGroup: { control: { type: "text" } },
+    yearTitle: { control: { type: "text" } },
     index: { control: { type: "number" } },
-    numberOfLessons: { control: { type: "number" } },
+    lessonCount: { control: { type: "number" } },
     disabled: { control: { type: "boolean" } },
     unavailable: { control: { type: "boolean" } },
     isLegacy: { control: { type: "boolean" } },
@@ -49,37 +49,46 @@ const meta: Meta<typeof OakUnitListItem> = {
           {Story()}
           <OakUnitListItem
             title={"Numerals 1-10 (Legacy example)"}
-            numberOfLessons={10}
+            lessonCount={10}
             index={2}
             isLegacy={true}
-            yearGroup="Year 10"
+            yearTitle="Year 10"
+            href={""}
           />
           <OakUnitListItem
             title={"'The Three Billy Goats Gruff': reading and writing"}
-            numberOfLessons={7}
+            lessonCount={7}
             index={3}
-            yearGroup="Year 10"
+            yearTitle="Year 10"
             disabled={true}
+            isLegacy={false}
+            href={""}
           />
           <OakUnitListItem
             title={"Test Unit"}
-            numberOfLessons={8}
+            lessonCount={8}
             index={4}
-            yearGroup="Year 9"
+            yearTitle="Year 9"
+            isLegacy={false}
+            href={""}
           />
           <OakUnitListItem
             title={"Apple"}
-            numberOfLessons={41}
+            lessonCount={41}
             index={5}
-            yearGroup="Year 9"
+            yearTitle="Year 9"
+            isLegacy={false}
+            href={""}
           />
           <OakUnitListItem
             title={
               "'The Three Billy Goats Gruff': reading and writing 'The Three Billy Goats Gruff': reading and writing"
             }
-            numberOfLessons={41}
+            lessonCount={41}
             index={5}
-            yearGroup="Year 9"
+            yearTitle="Year 9"
+            isLegacy={false}
+            href={""}
           />
         </OakFlex>
       );
@@ -90,7 +99,7 @@ const meta: Meta<typeof OakUnitListItem> = {
       include: [
         "title",
         "index",
-        "numberOfLessons",
+        "lessonCount",
         "disabled",
         "unavailable",
         "isLegacy",
diff --git a/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.test.tsx b/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.test.tsx
index 807067fe..0c7a6dd1 100644
--- a/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.test.tsx
+++ b/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.test.tsx
@@ -11,7 +11,15 @@ import { oakDefaultTheme } from "@/styles";
 describe("OakUnitListItem", () => {
   it("renders", () => {
     const { getByTestId } = renderWithTheme(
-      <OakUnitListItem data-testid="test" />,
+      <OakUnitListItem
+        data-testid="test"
+        index={0}
+        title={""}
+        yearTitle={""}
+        lessonCount={0}
+        isLegacy={false}
+        href={""}
+      />,
     );
     expect(getByTestId("test")).toBeInTheDocument();
   });
@@ -19,7 +27,15 @@ describe("OakUnitListItem", () => {
   it("matches snapshot", () => {
     const tree = create(
       <OakThemeProvider theme={oakDefaultTheme}>
-        <OakUnitListItem title="Lesson 1" index={1} />,
+        <OakUnitListItem
+          title="Lesson 1"
+          index={1}
+          yearTitle={""}
+          lessonCount={0}
+          isLegacy={false}
+          href={""}
+        />
+        ,
       </OakThemeProvider>,
     ).toJSON();
 
@@ -28,7 +44,16 @@ describe("OakUnitListItem", () => {
 
   it("renders a div when the item is disabled", () => {
     const { getByTestId } = renderWithTheme(
-      <OakUnitListItem data-testid="unit-card" disabled />,
+      <OakUnitListItem
+        data-testid="unit-card"
+        disabled
+        index={0}
+        title={""}
+        yearTitle={""}
+        lessonCount={0}
+        isLegacy={false}
+        href={""}
+      />,
     );
 
     expect(getByTestId("unit-card").tagName).toBe("DIV");
@@ -36,7 +61,15 @@ describe("OakUnitListItem", () => {
 
   it("renders an anchor when the item is not disabled", () => {
     const { getByTestId } = renderWithTheme(
-      <OakUnitListItem data-testid="unit-card" />,
+      <OakUnitListItem
+        data-testid="unit-card"
+        index={0}
+        title={""}
+        yearTitle={""}
+        lessonCount={0}
+        isLegacy={false}
+        href={""}
+      />,
     );
 
     expect(getByTestId("unit-card").tagName).toBe("A");
@@ -44,9 +77,32 @@ describe("OakUnitListItem", () => {
 
   it("renders the number of lessons when provided", () => {
     const { getByTestId } = renderWithTheme(
-      <OakUnitListItem data-testid="unit-card" numberOfLessons={6} />,
+      <OakUnitListItem
+        data-testid="unit-card"
+        lessonCount={6}
+        index={0}
+        title={""}
+        yearTitle={""}
+        isLegacy={false}
+        href={""}
+      />,
     );
 
     expect(getByTestId("unit-card").textContent).toContain("6");
   });
+  it("renders the year title when provided", () => {
+    const { getByTestId } = renderWithTheme(
+      <OakUnitListItem
+        data-testid="unit-card"
+        lessonCount={6}
+        index={0}
+        title={""}
+        yearTitle={"Year 4"}
+        isLegacy={false}
+        href={""}
+      />,
+    );
+
+    expect(getByTestId("unit-card").textContent).toContain("Year 4");
+  });
 });
diff --git a/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.tsx b/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.tsx
index 42ba864f..d82ba825 100644
--- a/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.tsx
+++ b/src/components/organisms/teacher/OakUnitListItem/OakUnitListItem.tsx
@@ -76,19 +76,23 @@ export type OakUnitListItemProps<C extends ElementType> = {
   unavailable?: boolean;
   index: number;
   title: string;
-  yearGroup: string;
-  numberOfLessons: number;
+  yearTitle?: string | null;
+  lessonCount: number | null;
   isLegacy: boolean;
   href: string;
 } & ComponentPropsWithoutRef<C>;
 
-const UnstyledComponent = <C extends ElementType = "a">(
+/**
+ *
+ * OakUnitsListItem component used as links for unit cards
+ */
+export const OakUnitListItem = <C extends ElementType = "a">(
   props: OakUnitListItemProps<C>,
 ) => {
   const {
     as,
     lessonSectionName,
-    numberOfLessons,
+    lessonCount,
     progress,
     disabled,
     href,
@@ -102,7 +106,7 @@ const UnstyledComponent = <C extends ElementType = "a">(
   const disabledOrUnavailable = disabled || unavailable;
 
   return (
-    <OakBox role="listitem">
+    <OakBox $width={"100%"} role="listitem">
       <StyledUnitListItem
         as={disabledOrUnavailable ? "div" : as ?? "a"}
         $alignItems={"center"}
@@ -165,7 +169,7 @@ const UnstyledComponent = <C extends ElementType = "a">(
                   disabledOrUnavailable ? "text-disabled" : "text-primary"
                 }
               >
-                {props.yearGroup}
+                {props.yearTitle}
               </OakP>
             </OakFlex>
             <OakFlex>
@@ -180,7 +184,7 @@ const UnstyledComponent = <C extends ElementType = "a">(
                     disabledOrUnavailable ? "text-disabled" : "text-primary"
                   }
                 >
-                  {numberOfLessons} Lessons
+                  {lessonCount} Lessons
                 </OakSpan>
               </StyledLessonLink>
             </OakFlex>
@@ -190,9 +194,3 @@ const UnstyledComponent = <C extends ElementType = "a">(
     </OakBox>
   );
 };
-
-/**
- *
- * OakUnitsListItem component used as links for unit cards
- */
-export const OakUnitListItem = styled(UnstyledComponent)``;
diff --git a/src/components/organisms/teacher/OakUnitListItem/__snapshots__/OakUnitListItem.test.tsx.snap b/src/components/organisms/teacher/OakUnitListItem/__snapshots__/OakUnitListItem.test.tsx.snap
index 4687a00e..1d86dc3e 100644
--- a/src/components/organisms/teacher/OakUnitListItem/__snapshots__/OakUnitListItem.test.tsx.snap
+++ b/src/components/organisms/teacher/OakUnitListItem/__snapshots__/OakUnitListItem.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`OakUnitListItem matches snapshot 1`] = `
 [
   .c0 {
+  width: 100%;
   font-family: Lexend,sans-serif;
 }
 
@@ -37,7 +38,11 @@ exports[`OakUnitListItem matches snapshot 1`] = `
   white-space: nowrap;
 }
 
-.c23 {
+.c16 {
+  font-family: Lexend,sans-serif;
+}
+
+.c24 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
@@ -109,7 +114,7 @@ exports[`OakUnitListItem matches snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -120,18 +125,18 @@ exports[`OakUnitListItem matches snapshot 1`] = `
   justify-content: flex-start;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c21 {
+.c22 {
   font-family: Lexend,sans-serif;
 }
 
-.c22 {
+.c23 {
   color: #222222;
   font-family: Lexend,sans-serif;
   font-weight: 400;
@@ -143,7 +148,7 @@ exports[`OakUnitListItem matches snapshot 1`] = `
   letter-spacing: 0.0115rem;
 }
 
-.c26 {
+.c27 {
   object-fit: contain;
 }
 
@@ -171,7 +176,7 @@ exports[`OakUnitListItem matches snapshot 1`] = `
   color: #222222;
 }
 
-.c17 {
+.c18 {
   font-family: Lexend,sans-serif;
   font-weight: 400;
   font-size: 1rem;
@@ -183,12 +188,12 @@ exports[`OakUnitListItem matches snapshot 1`] = `
   color: #222222;
 }
 
-.c25 {
+.c26 {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.c19 {
+.c20 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -214,39 +219,39 @@ exports[`OakUnitListItem matches snapshot 1`] = `
   color: #222222;
 }
 
-.c19 .c24 {
+.c20 .c25 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
 }
 
-.c19:focus-visible {
+.c20:focus-visible {
   box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
 }
 
-.c19:visited {
+.c20:visited {
   color: #575757;
 }
 
-.c19:active {
+.c20:active {
   color: #222222;
 }
 
-.c19:active .c24 {
+.c20:active .c25 {
   -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   color: #808080;
 }
 
-.c19[disabled] .c24 {
+.c20[disabled] .c25 {
   -webkit-filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%);
   filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%);
 }
 
-.c20 {
+.c21 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -293,7 +298,7 @@ exports[`OakUnitListItem matches snapshot 1`] = `
 }
 
 @media (min-width:750px) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
     -ms-flex-pack: end;
@@ -302,13 +307,13 @@ exports[`OakUnitListItem matches snapshot 1`] = `
 }
 
 @media (hover:hover) {
-  .c19:hover,
-  .c19:visited:hover {
+  .c20:hover,
+  .c20:visited:hover {
     color: #222222;
   }
 
-  .c19:hover .c24,
-  .c19:visited:hover .c24 {
+  .c20:hover .c25,
+  .c20:visited:hover .c25 {
     -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
     filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%);
   }
@@ -353,7 +358,8 @@ exports[`OakUnitListItem matches snapshot 1`] = `
     role="listitem"
   >
     <a
-      className="c1 c2 c3 "
+      className="c1 c2 c3"
+      href=""
       title="Lesson 1"
     >
       <div
@@ -381,33 +387,34 @@ exports[`OakUnitListItem matches snapshot 1`] = `
           className="c13 c14 c15"
         >
           <div
-            className="c0 c16"
+            className="c16 c17"
           >
             <p
-              className="c17"
+              className="c18"
             />
           </div>
           <div
-            className="c0 c18"
+            className="c16 c19"
           >
             <a
-              className="c19 c20"
+              className="c20 c21"
             >
               <span
-                className="c21"
+                className="c22"
               >
                 <span
-                  className="c22"
+                  className="c23"
                 >
+                  0
                    Lessons
                 </span>
               </span>
               <div
-                className="c23 c24 c25"
+                className="c24 c25 c26"
               >
                 <img
                   alt="chevron-right"
-                  className="c26"
+                  className="c27"
                   data-nimg="fill"
                   decoding="async"
                   loading="lazy"
diff --git a/src/components/organisms/teacher/OakUnitsContainer/OakUnitsContainer.tsx b/src/components/organisms/teacher/OakUnitsContainer/OakUnitsContainer.tsx
index 26fafa21..ebd7ea6d 100644
--- a/src/components/organisms/teacher/OakUnitsContainer/OakUnitsContainer.tsx
+++ b/src/components/organisms/teacher/OakUnitsContainer/OakUnitsContainer.tsx
@@ -4,6 +4,13 @@ import styled, { css } from "styled-components";
 import { OakUnitsHeader } from "../OakUnitsHeader";
 
 import { OakFlex, OakUL } from "@/components/atoms";
+import { parseSpacing } from "@/styles/helpers/parseSpacing";
+
+const OakULFlex = styled(OakUL)`
+  display: flex;
+  flex-direction: column;
+  gap: ${parseSpacing("space-between-xs")};
+`;
 
 export type OakUnitsContainerProps = {
   isLegacy: boolean;
@@ -45,9 +52,9 @@ const UnstyledComponent = (props: OakUnitsContainerProps) => {
           $width="100%"
         />
       )}
-      <OakUL aria-label="A list of units" $reset $width="100%">
+      <OakULFlex aria-label="A list of units" $reset $width="100%">
         {...unitCards}
-      </OakUL>
+      </OakULFlex>
     </OakFlex>
   );
 };
diff --git a/src/components/organisms/teacher/OakUnitsContainer/__snapshots__/OakUnitsContainer.test.tsx.snap b/src/components/organisms/teacher/OakUnitsContainer/__snapshots__/OakUnitsContainer.test.tsx.snap
index 946ec5f2..32594384 100644
--- a/src/components/organisms/teacher/OakUnitsContainer/__snapshots__/OakUnitsContainer.test.tsx.snap
+++ b/src/components/organisms/teacher/OakUnitsContainer/__snapshots__/OakUnitsContainer.test.tsx.snap
@@ -300,6 +300,17 @@ exports[`OakUnitsContainer matches snapshot 1`] = `
   width: 100%;
 }
 
+.c28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 @media (min-width:750px) {
   .c8 {
     width: 3rem;
@@ -497,7 +508,7 @@ exports[`OakUnitsContainer matches snapshot 1`] = `
   </div>
   <ul
     aria-label="A list of units"
-    className="c27"
+    className="c27 c28"
   >
     <div
       className="c2"
diff --git a/src/components/organisms/teacher/index.ts b/src/components/organisms/teacher/index.ts
index 9b996b29..e7749708 100644
--- a/src/components/organisms/teacher/index.ts
+++ b/src/components/organisms/teacher/index.ts
@@ -2,3 +2,4 @@ export * from "./OakSearchFilterCheckBox";
 export * from "./OakTertiaryOLNav";
 export * from "./OakUnitsContainer";
 export * from "./OakUnitsHeader";
+export * from "./OakUnitListItem";