Merge pull request #161 from oaknational/feat/pupil-679/pupil-journey…

…-list

docs: improve storybook entry

src/components/organisms/pupil/OakPupilJourneyList/OakPupilJourneyList.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { OakPupilJourneyList } from "./OakPupilJourneyList";
+
+import { OakPupilJourneyListItem } from "@/components/organisms/pupil/OakPupilJourneyListItem";
+
+const meta: Meta<typeof OakPupilJourneyList> = {
+  component: OakPupilJourneyList,
+  tags: ["autodocs"],
+  title: "components/organisms/pupil/OakPupilJourneyList",
+  argTypes: {
+    phase: { control: { options: ["primary", "secondary"] } },
+  },
+  parameters: {
+    controls: {
+      include: ["phase"],
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof OakPupilJourneyList>;
+
+export const Default: Story = {
+  render: (args) => (
+    <OakPupilJourneyList {...args}>
+      <OakPupilJourneyListItem title="Lesson 1" index={1} href="#" />
+      <OakPupilJourneyListItem title="Lesson 2" index={2} href="#" />
+      <OakPupilJourneyListItem title="Lesson 3" index={3} href="#" />
+    </OakPupilJourneyList>
+  ),
+  args: {
+    phase: "primary",
+  },
+};

src/components/organisms/pupil/OakPupilJourneyList/OakPupilJourneyList.test.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+
+import { OakPupilJourneyList } from "./OakPupilJourneyList";
+
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+import { OakThemeProvider } from "@/components/atoms";
+import { oakDefaultTheme } from "@/styles";
+
+describe("OakPupilJourneyList", () => {
+  it("should render successfully", () => {
+    const { getByText } = renderWithTheme(
+      <OakPupilJourneyList phase="primary">
+        <p>Hello World</p>
+      </OakPupilJourneyList>,
+    );
+    expect(getByText("Hello World")).toBeInTheDocument();
+  });
+
+  it("matches snapshot", () => {
+    const tree = create(
+      <OakThemeProvider theme={oakDefaultTheme}>
+        <OakPupilJourneyList phase="primary">
+          <p>Hello World</p>
+        </OakPupilJourneyList>
+      </OakThemeProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/organisms/pupil/OakPupilJourneyList/OakPupilJourneyList.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { OakFlex } from "@/components/atoms/OakFlex";
+
+export type OakPupilJourneyListProps = {
+  children: React.ReactNode;
+  phase: "primary" | "secondary";
+};
+
+/**
+ *
+ * A styled list container for use with OakPupilJourneyListItems
+ *
+ */
+
+export const OakPupilJourneyList = ({
+  children,
+  phase,
+}: OakPupilJourneyListProps) => {
+  const backgroundColor =
+    phase === "primary" ? "bg-decorative4-subdued" : "bg-decorative3-subdued";
+  return (
+    <OakFlex
+      $flexDirection={"column"}
+      $pa={"inner-padding-m"}
+      $background={backgroundColor}
+      $borderRadius={"border-radius-l"}
+      $gap={"space-between-s"}
+    >
+      {children}
+    </OakFlex>
+  );
+};

src/components/organisms/pupil/OakPupilJourneyList/__snapshots__/OakPupilJourneyList.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OakPupilJourneyList matches snapshot 1`] = `
+.c0 {
+  padding: 1rem;
+  background: #e5d1e0;
+  border-radius: 1rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+<div
+  className="c0 c1"
+>
+  <p>
+    Hello World
+  </p>
+</div>
+`;

src/components/organisms/pupil/OakPupilJourneyList/index.ts

@@ -0,0 +1 @@
+export * from "./OakPupilJourneyList";

src/components/organisms/pupil/index.ts

@@ -21,3 +21,4 @@ export * from "./OakPupilJourneyListItem";
 export * from "./OakPupilJourneyYearButton";
 export * from "./OakPupilJourneySubjectButton";
 export * from "./OakPreviousLessonsHeading";
+export * from "./OakPupilJourneyList";