feat: unit list and list item

src/components/UnitList/UnitList.tsx

@@ -0,0 +1,52 @@
+import { FC } from "react";
+import Box from "../Box";
+
+import Flex from "../Flex";
+import Pagination, { PaginationProps } from "../Pagination";
+import { Hr, LI, UL } from "../Typography";
+import UnitListItem from "./UnitListItem";
+import { UnitListItemProps } from "./UnitListItem/UnitListItem";
+
+export type UnitListProps = {
+  units: UnitListItemProps[];
+  paginationProps: PaginationProps;
+};
+/**
+ * Contains a list of UnitListItem with dividers between them. Optionally
+ * displays an upcoming webinar at the top.
+ *
+ * ## Usage
+ *
+ * Use `useUnitList()` to get props to pass to `<UnitList />`
+ */
+const UnitList: FC<UnitListProps> = (props) => {
+  const { units, paginationProps } = props;
+
+  return (
+    <Flex
+      $flexDirection="column"
+      $alignItems="flex-start"
+      $minHeight={[0, 840]}
+    >
+      {units.length ? (
+        <>
+          <UL $reset>
+            {units.map((item, i) => (
+              <LI key={`UnitList-UnitListItem-${i}`}>
+                {i !== 0 && <Hr thickness={4} $mv={32} />}
+                <UnitListItem {...item} />
+              </LI>
+            ))}
+          </UL>
+        </>
+      ) : null}
+      {units.length > 20 && (
+        <Box $width="100%" $mt={[0, "auto"]} $pt={48}>
+          <Pagination {...paginationProps} />
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default UnitList;

src/components/UnitList/UnitListItem/UnitListItem.tsx

@@ -0,0 +1,81 @@
+import { FC } from "react";
+import { useHover } from "react-aria";
+
+import useClickableCard from "../../../hooks/useClickableCard";
+
+import Flex from "../../Flex";
+import Icon, { IconName } from "../../Icon";
+import { Heading } from "../../Typography";
+import { OakColorName } from "../../../styles/theme/types";
+
+export type UnitListItemProps = {
+  title: string;
+  learningTheme?: string;
+  totalLessons: number;
+  unitQuiz?: string;
+  subjectIcon: IconName;
+  background: OakColorName;
+};
+
+/**
+ * Contains an image, title, and text summary.
+ * The component contains a link styled as a button, which
+ * whose click target stretches across the entire component.
+ * The title tag (h1, h2, ...) is passed as a prop.
+ */
+const UnitListItem: FC<UnitListItemProps> = (props) => {
+  const { title, learningTheme, totalLessons, unitQuiz, subjectIcon } = props;
+
+  const {
+    containerProps,
+    primaryTargetProps,
+    isHovered: cardIsHovered,
+  } = useClickableCard<HTMLAnchorElement>();
+  const { hoverProps: categoryHoverProps, isHovered: categoryIsHovered } =
+    useHover({});
+
+  return (
+    <Flex
+      {...containerProps}
+      $position={"relative"}
+      $flexDirection={["column", "row"]}
+      $justifyContent={"space-between"}
+      $alignItems={"center"}
+      $pa={0}
+    >
+      <Flex $flexDirection={"column"}>
+        <Heading $font={"heading-6"} tag={"h3"}>
+          {title}
+        </Heading>
+        <Flex $flexDirection={["column", "row"]}>
+          {learningTheme && (
+            <Heading $font={"heading-light-7"} tag={"h4"}>
+              {learningTheme}
+            </Heading>
+          )}
+          <Heading $font={"heading-light-7"} tag={"h4"}>
+            {totalLessons}
+          </Heading>
+          {unitQuiz && (
+            <Heading $font={"heading-light-7"} tag={"h4"}>
+              {unitQuiz}
+            </Heading>
+          )}
+        </Flex>
+      </Flex>
+      <Flex
+        $justifyContent={"center"}
+        $alignItems={"center"}
+        $minHeight={110}
+        $width={[72, 130]}
+        $background={"pupilsPink"}
+      >
+        <Icon size={92} name={subjectIcon}>
+          {title}
+        </Icon>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default UnitListItem;

src/components/UnitList/UnitListItem/index.tsx

@@ -0,0 +1 @@
+export { default } from "./UnitListItem";

src/components/UnitList/index.tsx

@@ -0,0 +1 @@
+export { default } from "./UnitList";

src/styles/theme/types.ts

@@ -45,7 +45,9 @@ export type PixelSpacing =
   | 80
   | 92
   | 96
+  | 110
   | 120
+  | 130
   | 140
   | 150
   | 160