Merge branch 'main' into feat-updates-to-unit-list-item-and-container

oaknational · Jul 24, 2024 · db16865 · db16865
2 parents f8bfe71 + bba0834
commit db16865
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "1.11.0",
+  "version": "1.12.2",
   "licence": "MIT",
   "description": "Shared components for Oak applications",
   "main": "dist/cjs/index.js",

diff --git a/src/components/organisms/pupil/OakLessonLayout/OakLessonLayout.stories.tsx b/src/components/organisms/pupil/OakLessonLayout/OakLessonLayout.stories.tsx
@@ -5,7 +5,11 @@ import { OakLessonTopNav } from "../OakLessonTopNav";
 import { OakLessonBottomNav } from "../OakLessonBottomNav";
 import { OakQuizCounter } from "../OakQuizCounter";
 
-import { OakLessonLayout, OakLessonLayoutProps } from "./OakLessonLayout";
+import {
+  OakLessonLayout,
+  OakLessonLayoutProps,
+  lessonSectionNames,
+} from "./OakLessonLayout";
 
 import { OakBackLink, OakPrimaryButton } from "@/components/molecules";
 import { OakBox } from "@/components/atoms";
@@ -15,14 +19,28 @@ const meta: Meta<typeof OakLessonLayout> = {
   tags: ["autodocs"],
   title: "components/organisms/pupil/OakLessonLayout",
   decorators: [(Story) => <Story />],
+  argTypes: {
+    lessonSectionName: {
+      options: [...lessonSectionNames],
+      control: { type: "radio" },
+    },
+    phase: {
+      options: ["primary", "secondary"],
+      control: { type: "radio" },
+    },
+    celebrate: {
+      control: { type: "boolean" },
+    },
+  },
   parameters: {
     controls: {
-      include: ["lessonSectionName"],
+      include: ["lessonSectionName", "celebrate", "phase"],
     },
     layout: "fullscreen",
   },
   args: {
-    lessonSectionName: "intro",
+    lessonSectionName: lessonSectionNames[0],
+    celebrate: false,
   },
 };
 export default meta;

diff --git a/src/components/organisms/pupil/OakLessonLayout/OakLessonLayout.tsx b/src/components/organisms/pupil/OakLessonLayout/OakLessonLayout.tsx
@@ -1,22 +1,30 @@
 import React, { ReactNode } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { OakBox, OakFlex } from "@/components/atoms";
 import { parseSpacing } from "@/styles/helpers/parseSpacing";
 import { getBreakpoint } from "@/styles/utils/responsiveStyle";
 import { OakCombinedColorToken, oakDefaultTheme } from "@/styles";
+import { backgrounds } from "@/image-map";
 import { parseColor } from "@/styles/helpers/parseColor";
 
-type LessonSectionName =
-  | "overview"
-  | "intro"
-  | "starter-quiz"
-  | "video"
-  | "exit-quiz"
-  | "review";
+export const lessonSectionNames: string[] = [
+  "overview",
+  "intro",
+  "starter-quiz",
+  "video",
+  "exit-quiz",
+  "review",
+];
+
+export type LessonSectionName = (typeof lessonSectionNames)[number];
+
+type Phase = "primary" | "secondary";
 
 export type OakLessonLayoutProps = {
   lessonSectionName: LessonSectionName;
+  phase?: Phase;
+  celebrate?: boolean;
   topNavSlot: ReactNode;
   bottomNavSlot: ReactNode;
   children: ReactNode;
@@ -26,10 +34,26 @@ export type OakLessonLayoutProps = {
  * `OakBox` does not support space-between tokens on `padding` only `margin`, so we need to
  * set it here to apply appropriate padding to the top of the content.
  */
-const StyledLayoutBox = styled(OakBox)`
+const StyledLayoutBox = styled(OakBox)<{
+  sectionName: LessonSectionName;
+  phase: Phase;
+  celebrate: boolean;
+}>`
   @media (min-width: ${getBreakpoint("small")}px) {
     padding-top: ${parseSpacing("space-between-xl")};
   }
+  @media (min-width: ${getBreakpoint("large")}px) {
+    ${(props) => css`
+      ${getBackgroundUrlForLesson(
+        props.sectionName,
+        props.phase,
+        props.celebrate,
+      )}
+    `}
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-size: 100%;
+  }
 `;
 
 const StickyFooter = styled(OakBox)`
@@ -43,6 +67,8 @@ const StickyFooter = styled(OakBox)`
  */
 export const OakLessonLayout = ({
   lessonSectionName,
+  phase = "primary",
+  celebrate = false,
   topNavSlot,
   bottomNavSlot,
   children,
@@ -52,7 +78,7 @@ export const OakLessonLayout = ({
     contentBackgroundColor,
     contentBorderColor,
     mobileContentBackgroundColor,
-  ] = pickSectionColours(lessonSectionName);
+  ] = pickSectionColours(lessonSectionName, phase);
 
   return (
     <StyledLayoutBox
@@ -61,6 +87,9 @@ export const OakLessonLayout = ({
       $minHeight={"100%"}
       $ph={["inner-padding-none", "inner-padding-xl"]}
       $background={pageBackgroundColor}
+      sectionName={lessonSectionName}
+      celebrate={celebrate}
+      phase={phase}
     >
       <OakFlex
         $flexDirection="column"
@@ -148,6 +177,7 @@ export const OakLessonLayout = ({
 
 function pickSectionColours(
   sectionName: LessonSectionName,
+  phase: Phase,
 ): [
   pageBackgroundColor: OakCombinedColorToken,
   contentBackgroundColor: OakCombinedColorToken,
@@ -156,12 +186,19 @@ function pickSectionColours(
 ] {
   switch (sectionName) {
     case "overview":
-      return [
-        "bg-decorative1-main",
-        "bg-primary",
-        "border-decorative1-stronger",
-        "bg-primary",
-      ];
+      return phase === "secondary"
+        ? [
+            "bg-decorative3-subdued",
+            "bg-primary",
+            "border-decorative3",
+            "bg-primary",
+          ]
+        : [
+            "bg-decorative4-subdued",
+            "bg-primary",
+            "border-decorative4",
+            "bg-primary",
+          ];
     case "intro":
       return [
         "bg-decorative2-subdued",
@@ -191,11 +228,57 @@ function pickSectionColours(
         "bg-decorative5-subdued",
       ];
     case "review":
+      return phase === "secondary"
+        ? [
+            "bg-decorative3-subdued",
+            "bg-primary",
+            "border-decorative3",
+            "bg-primary",
+          ]
+        : [
+            "bg-decorative4-subdued",
+            "bg-primary",
+            "border-decorative4",
+            "bg-primary",
+          ];
+    default:
       return [
-        "bg-decorative1-main",
+        "bg-decorative3-subdued",
         "bg-primary",
-        "border-decorative1-stronger",
+        "border-decorative3",
         "bg-primary",
       ];
   }
 }
+
+function getBackgroundUrlForLesson(
+  sectionName: LessonSectionName,
+  phase: Phase,
+  celebrate: boolean,
+) {
+  const prefix = `https://${process.env.NEXT_PUBLIC_OAK_ASSETS_HOST}/${process.env.NEXT_PUBLIC_OAK_ASSETS_PATH}/`;
+  switch (sectionName) {
+    case "overview":
+      return phase === "secondary"
+        ? `background-image: url(${prefix}${backgrounds["lesson-confetti-lavender"]});`
+        : `background-image: url(${prefix}${backgrounds["lesson-confetti-pink"]});`;
+    case "intro":
+      return `background-image: url(${prefix}${backgrounds["lesson-confetti-mint"]});`;
+    case "starter-quiz":
+      return celebrate
+        ? `background-image: url(${prefix}${backgrounds["lesson-confetti-green"]});`
+        : ``;
+    case "video":
+      return `background-image: url(${prefix}${backgrounds["lesson-confetti-pink"]});`;
+    case "exit-quiz":
+      return celebrate
+        ? `background-image: url(${prefix}${backgrounds["lesson-confetti-green-lemon"]});`
+        : ``;
+    case "review":
+      return phase === "secondary"
+        ? `background-image: url(${prefix}${backgrounds["lesson-confetti-lavender"]});`
+        : `background-image: url(${prefix}${backgrounds["lesson-confetti-pink"]});`;
+    default:
+      return "";
+  }
+}
diff --git a/src/components/organisms/pupil/OakLessonTopNav/OakLessonTopNav.tsx b/src/components/organisms/pupil/OakLessonTopNav/OakLessonTopNav.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode } from "react";
 import styled from "styled-components";
 
+import { LessonSectionName } from "../OakLessonLayout";
+
 import {
   OakBox,
   OakFlex,
@@ -11,7 +13,7 @@ import {
 import { OakRoundIcon } from "@/components/molecules";
 import { getBreakpoint } from "@/styles/utils/responsiveStyle";
 
-type LessonSectionName = "intro" | "starter-quiz" | "video" | "exit-quiz";
+type LessonTopNavSectionName = Omit<LessonSectionName, "overview" | "review">;
 
 const StyledMobileSummary = styled(OakSpan)`
   @media (min-width: ${getBreakpoint("small")}px) {
@@ -20,7 +22,7 @@ const StyledMobileSummary = styled(OakSpan)`
 `;
 
 export type OakLessonTopNavProps = {
-  lessonSectionName: LessonSectionName;
+  lessonSectionName: LessonTopNavSectionName;
   /**
    * Slot to render `OakBackLink` or similar
    */
@@ -75,7 +77,7 @@ export const OakLessonTopNav = ({
 };
 
 function pickSectionIcon(
-  sectionName: LessonSectionName,
+  sectionName: LessonTopNavSectionName,
 ): Pick<OakIconProps, "iconName" | "$background"> {
   switch (sectionName) {
     case "intro":
@@ -98,5 +100,10 @@ function pickSectionIcon(
         iconName: "quiz",
         $background: "lemon110",
       };
+    default:
+      return {
+        iconName: "intro",
+        $background: "aqua110",
+      };
   }
 }
diff --git a/src/image-map.ts b/src/image-map.ts
@@ -120,6 +120,13 @@ export const backgrounds = {
   "confetti-pink": "pupil-journey/confetti-pink.svg",
   "confetti-lavender": "pupil-journey/confetti-lavender.svg",
   "confetti-mint": "pupil-journey/confetti-mint.svg",
+  "lesson-confetti-green": "pupil-journey/lesson/lesson-confetti-green.svg",
+  "lesson-confetti-mint": "pupil-journey/lesson/lesson-confetti-mint.svg",
+  "lesson-confetti-pink": "pupil-journey/lesson/lesson-confetti-pink.svg",
+  "lesson-confetti-green-lemon":
+    "pupil-journey/lesson/lesson-confetti-green-lemon.svg",
+  "lesson-confetti-lavender":
+    "pupil-journey/lesson/lesson-confetti-lavender.svg",
   "line-pink": "pupil-journey/line-pink.svg",
   "line-lavender": "pupil-journey/line-lavender.svg",
   "line-mint": "pupil-journey/line-mint.svg",