feat(oakjourneylayout): background size 100%

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "licence": "MIT",
   "description": "Shared components for Oak applications",
   "main": "dist/cjs/index.js",

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { StoryObj, Meta } from "@storybook/react";
+
+import { OakPreviousLessonsHeading } from "./OakPreviousLessonsHeading";
+
+const meta: Meta<typeof OakPreviousLessonsHeading> = {
+  title: "Components/organisms/pupil/OakPreviousLessonsHeading",
+  component: OakPreviousLessonsHeading,
+  tags: ["autodocs"],
+  argTypes: {},
+  parameters: {
+    controls: {
+      include: ["numberOfLessons", "listItems"],
+    },
+  },
+  args: {
+    numberOfLessons: 5,
+    listItems: ["Year 7", "Maths", "Higher"],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OakPreviousLessonsHeading>;
+
+export const Default: Story = {
+  render: (args) => <OakPreviousLessonsHeading {...args} />,
+  args: {},
+};

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

@@ -0,0 +1,37 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+import { ThemeProvider } from "styled-components";
+
+import { OakPreviousLessonsHeading } from "./OakPreviousLessonsHeading";
+
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+import { oakDefaultTheme } from "@/styles";
+
+describe("OakPreviousLessonsHeading", () => {
+  it("renders", () => {
+    const { getByText } = renderWithTheme(
+      <ThemeProvider theme={oakDefaultTheme}>
+        <OakPreviousLessonsHeading
+          numberOfLessons={5}
+          listItems={["Year 7", "Maths", "Higher"]}
+          data-testid="test"
+        />
+      </ThemeProvider>,
+    );
+    expect(getByText(`Previously released lessons`)).toBeInTheDocument();
+  });
+
+  it("matches snapshot", () => {
+    const tree = create(
+      <ThemeProvider theme={oakDefaultTheme}>
+        {" "}
+        <OakPreviousLessonsHeading
+          numberOfLessons={5}
+          listItems={["Year 7", "Maths", "Higher"]}
+        />
+      </ThemeProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { OakBulletList, OakBulletListProps } from "@/components/molecules";
+import { OakFlex, OakHeading, OakSpan } from "@/components/atoms";
+
+export type OakPreviousLessonsHeadingProps = {
+  numberOfLessons: number;
+} & OakBulletListProps;
+
+/**
+ * This component displays a heading for the previous lessons
+ *
+ * numberOfLessons - The number of lessons that have been released
+ *
+ * listItems - add the a list of descriptions to be displayed
+ *
+ *
+ */
+export const OakPreviousLessonsHeading = (
+  props: OakPreviousLessonsHeadingProps,
+) => {
+  const { numberOfLessons, listItems } = props;
+
+  return (
+    <OakFlex
+      $flexDirection={["column", "row"]}
+      $flexWrap={"wrap"}
+      $justifyContent={"space-between"}
+      $alignItems={"flex-start"}
+      $gap={"space-between-m"}
+    >
+      <OakHeading tag="h1" $font={["heading-6", "heading-6"]}>
+        Previously released lessons
+        <OakSpan $font={"heading-light-6"}>{` (${numberOfLessons})`}</OakSpan>
+      </OakHeading>
+      <OakBulletList
+        listItems={listItems}
+        $background={"bg-decorative5-very-subdued"}
+        $borderRadius={"border-radius-s"}
+        $borderColor={"border-decorative5"}
+        $ba={"border-solid-s"}
+        $ph={"inner-padding-xs"}
+        $pv={"inner-padding-ssx"}
+      />
+    </OakFlex>
+  );
+};

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

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OakPreviousLessonsHeading matches snapshot 1`] = `
+[
+  " ",
+  .c0 {
+  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;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.c3 {
+  font-family: Lexend,sans-serif;
+  font-weight: 400;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+  -webkit-letter-spacing: 0.0115rem;
+  -moz-letter-spacing: 0.0115rem;
+  -ms-letter-spacing: 0.0115rem;
+  letter-spacing: 0.0115rem;
+}
+
+.c4 {
+  background: #fff7cc;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border: 0.063rem solid;
+  border-color: #ffe555;
+  border-radius: 0.25rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c5 {
+  font-family: Lexend,sans-serif;
+}
+
+.c2 {
+  font-family: Lexend,sans-serif;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+  -webkit-letter-spacing: 0.0115rem;
+  -moz-letter-spacing: 0.0115rem;
+  -ms-letter-spacing: 0.0115rem;
+  letter-spacing: 0.0115rem;
+}
+
+@media (min-width:750px) {
+  .c1 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+}
+
+@media (min-width:750px) {
+  .c2 {
+    font-weight: 600;
+  }
+}
+
+@media (min-width:750px) {
+  .c2 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width:750px) {
+  .c2 {
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width:750px) {
+  .c2 {
+    -webkit-letter-spacing: 0.0115rem;
+    -moz-letter-spacing: 0.0115rem;
+    -ms-letter-spacing: 0.0115rem;
+    letter-spacing: 0.0115rem;
+  }
+}
+
+<div
+    className="c0 c1"
+  >
+    <h1
+      className="c2"
+    >
+      Previously released lessons
+      <span
+        className="c3"
+      >
+         (5)
+      </span>
+    </h1>
+    <span
+      className="c4"
+    >
+      <span
+        className="c5"
+      >
+        <span
+          className="c5"
+        >
+          Year 7
+        </span>
+      </span>
+      <span
+        className="c5"
+      >
+        <span
+          className="c5"
+        >
+           • 
+        </span>
+        <span
+          className="c5"
+        >
+          Maths
+        </span>
+      </span>
+      <span
+        className="c5"
+      >
+        <span
+          className="c5"
+        >
+           • 
+        </span>
+        <span
+          className="c5"
+        >
+          Higher
+        </span>
+      </span>
+    </span>
+  </div>,
+]
+`;

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

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

src/components/organisms/pupil/index.ts

@@ -14,7 +14,10 @@ export * from "./OakLessonVideoTranscript";
 export * from "./OakQuizOrder";
 export * from "./OakQuizMatch";
 export * from "./OakPupilJourneyLayout";
+export * from "./OakPupilJourneyHeader";
 export * from "./Oakinfo";
 export * from "./OakinfoButton";
+export * from "./OakPupilJourneyListItem";
 export * from "./OakPupilJourneyYearButton";
 export * from "./OakPupilJourneySubjectButton";
+export * from "./OakPreviousLessonsHeading";