feat(subject listing page): merge changes

CHANGE_LOG.md

@@ -1,3 +1,17 @@
+# [1.81.0](https://github.com/oaknational/Oak-Web-Application/compare/v1.80.0...v1.81.0) (2022-12-01)
+
+
+### Features
+
+* **mux:** zero-rate Mux event calls to Litix ([b3b5cd8](https://github.com/oaknational/Oak-Web-Application/commit/b3b5cd86613f228fa4bde8875dbaaab5aa786936))
+
+# [1.80.0](https://github.com/oaknational/Oak-Web-Application/compare/v1.79.0...v1.80.0) (2022-12-01)
+
+
+### Features
+
+* unit list and list item ([cd67b96](https://github.com/oaknational/Oak-Web-Application/commit/cd67b96d8e3e68134c9cc498e2683f8579051008))
+
 # [1.79.0](https://github.com/oaknational/Oak-Web-Application/compare/v1.78.0...v1.79.0) (2022-12-01)
 
 

src/common-lib/urls/urls.ts

@@ -85,8 +85,16 @@ export type UnitIndexLinkProps = {
   subject: string;
   search?: {
     ["learning-theme"]?: string | null;
+    ["tier"]?: string | null;
   };
 };
+export type LessonIndexLinkProps = {
+  page: "lesson-index";
+  keyStage: string;
+  subject: string;
+  slug: string;
+};
+
 export type ResolveOakHrefProps =
   | {
       page: Exclude<OakPageName, "blog-index" | "webinars-index">;
@@ -96,7 +104,8 @@ export type ResolveOakHrefProps =
       slug: string;
     }
   | PostIndexLinkProps
-  | UnitIndexLinkProps;
+  | UnitIndexLinkProps
+  | LessonIndexLinkProps;
 
 /**
  * Pass readable props which are unlikely to need to change, and return an href.
@@ -153,6 +162,9 @@ export const resolveOakHref = (props: ResolveOakHrefProps) => {
 
       return `${path}?${queryString}`;
     }
+    case "lesson-index": {
+      return `/beta/teachers/key-stage/${props.keyStage}/subject/${props.subject}/units/${props.slug}`;
+    }
 
     default:
       return OAK_PAGES[props.page];

src/components/Filters/LearningThemeFilters/LearningThemeFilters.tsx

@@ -2,7 +2,7 @@ import { UnitIndexLinkProps } from "../../../common-lib/urls";
 import CategoryFilterList from "../CategoryFilterList";
 import useCategoryFilterList from "../CategoryFilterList/useCategoryFilterList";
 
-type LearningThemeFiltersProps = {
+export type LearningThemeFiltersProps = {
   labelledBy: string;
   selectedThemeSlug: string;
   learningThemes: { label: string; slug: string | null }[];

src/components/UnitList/UnitList.stories.tsx

@@ -0,0 +1,93 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { UnitListProps } from "./UnitList";
+
+import Component from ".";
+
+const currentPageItems: UnitListProps = {
+  units: [
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: false,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: false,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: true,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: false,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: false,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+  ],
+  keyStageSlug: "4",
+  subjectSlug: "computing",
+  headingTag: "h1",
+  paginationProps: {
+    currentPage: 1,
+    totalPages: 2,
+  },
+};
+
+const tiers = [
+  { title: "Foundation", slug: "foundation", unitCount: 14 },
+  { title: "Core", slug: "core", unitCount: 14 },
+  { title: "Higher", slug: "higher", unitCount: 14 },
+];
+
+export default {
+  title: "Lists/Unit list",
+  component: Component,
+} as ComponentMeta<typeof Component>;
+
+const Template: ComponentStory<typeof Component> = (args) => {
+  return <Component {...args} />;
+};
+
+export const UnitList = Template.bind({});
+
+UnitList.args = currentPageItems;
+
+export const UnitListTiers = Template.bind({});
+
+UnitListTiers.args = {
+  ...currentPageItems,
+  tiers: tiers,
+};

src/components/UnitList/UnitList.test.tsx

@@ -0,0 +1,33 @@
+import renderWithProviders from "../../__tests__/__helpers__/renderWithProviders";
+import { mockPaginationProps } from "../Pagination/Pagination.test";
+
+import UnitList from ".";
+
+describe("components/UnitList", () => {
+  test("renders the list items", () => {
+    const { getByRole } = renderWithProviders(
+      <UnitList
+        paginationProps={mockPaginationProps}
+        subjectSlug={"computing"}
+        keyStageSlug={"2"}
+        headingTag={"h1"}
+        units={[
+          {
+            title:
+              "1, To build knowledge of the historical context of the play ‘Macbeth’",
+            slug: "To-build-knowledge",
+            learningThemeTitle: "MacBeth",
+            lessonCount: 4,
+            hasUnitQuiz: false,
+            subjectSlug: "english",
+            keyStageSlug: "2",
+          },
+        ]}
+      />
+    );
+
+    const listHeading = getByRole("heading", { level: 1 });
+
+    expect(listHeading).toBeInTheDocument();
+  });
+});

src/components/UnitList/UnitList.tsx

@@ -0,0 +1,89 @@
+import { FC } from "react";
+
+import Box from "../Box";
+import Flex from "../Flex";
+import Pagination, { PaginationProps } from "../Pagination";
+import { Heading, LI, Span, UL } from "../Typography";
+import { HeadingTag } from "../Typography/Heading";
+import OakLink from "../OakLink";
+
+import UnitListItem from "./UnitListItem";
+import { UnitListItemProps } from "./UnitListItem/UnitListItem";
+
+export type Tier = {
+  title: string;
+  slug: string;
+  unitCount: number;
+};
+
+export type UnitListProps = {
+  units: UnitListItemProps[];
+  keyStageSlug: string;
+  subjectSlug: string;
+  paginationProps: PaginationProps;
+  headingTag: HeadingTag;
+  tiers?: Tier[];
+};
+/**
+ * Contains a list of units
+ *
+ * ## Usage
+ * Used on subject, unit and search results page
+ */
+const UnitList: FC<UnitListProps> = (props) => {
+  const {
+    units,
+    paginationProps,
+    headingTag,
+    tiers,
+    keyStageSlug,
+    subjectSlug,
+  } = props;
+
+  return (
+    <Flex $flexDirection="column">
+      <Flex $flexDirection={["column-reverse", "column"]}>
+        <Heading $font={["heading-6", "heading-5"]} $mb={24} tag={headingTag}>
+          Units
+        </Heading>
+
+        {tiers && (
+          <Flex $mb={[24, 32]}>
+            {tiers.map(({ title, slug, unitCount }) => (
+              <OakLink
+                keyStage={keyStageSlug}
+                subject={subjectSlug}
+                search={{ tier: slug }}
+                page={"unit-index"}
+              >
+                <Span
+                  $font={"heading-7"}
+                  $mr={[12, 32]}
+                >{`${title} (${unitCount})`}</Span>
+              </OakLink>
+            ))}
+          </Flex>
+        )}
+      </Flex>
+
+      {units.length ? (
+        <>
+          <UL $reset>
+            {units.map((item) => (
+              <LI key={`UnitList-UnitListItem-${item.slug}`}>
+                <UnitListItem {...item} />
+              </LI>
+            ))}
+          </UL>
+        </>
+      ) : null}
+      {units.length > 20 && (
+        <Box $width="100%" $mt={[0, "auto"]} $pt={48}>
+          <Pagination {...paginationProps} />
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default UnitList;