feat: style and prop updates to unit list and container

oaknational · Jul 24, 2024 · 0bfd8fa · 0bfd8fa
1 parent a291868
commit 0bfd8fa
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 67 deletions.
diff --git 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
@@ -11,15 +11,31 @@ 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();
   });
 
   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,25 +44,65 @@ 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");
   });
 
   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");
   });
 
   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
@@ -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)``;