codeforlife 2.6.15 → 2.6.16

package/.eslintrc.json

@@ -18,7 +18,7 @@
     "dist",
     "src/scripts",
     "**/*.d.ts",
-    "vite.config.js"
+    "vite.config.*"
   ],
   "rules": {
     "@typescript-eslint/consistent-type-imports": [

package/.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
     uses: ocadotechnology/codeforlife-workspace/.github/workflows/test-javascript-code.yaml@main
     secrets: inherit
     with:
-      node-version: 18
+      node-version: 22
 
   release:
     needs: [test]
@@ -40,4 +40,4 @@ jobs:
     secrets: inherit
     needs: [release]
     with:
-      node-version: 18
+      node-version: 22

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [2.6.16](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.15...v2.6.16) (2025-05-15)
+
+
+### Bug Fixes
+
+* Allow for 2 buttons in Banner ([#83](https://github.com/ocadotechnology/codeforlife-package-javascript/issues/83)) ([d203986](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/d2039869c1359906090b9973f2094753991a79ba))
+* Node 22 ([#86](https://github.com/ocadotechnology/codeforlife-package-javascript/issues/86)) ([e66e1ca](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/e66e1caa61fcaaf28afc5d2df8b05a6908590fe2))
+
 ## [2.6.15](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.14...v2.6.15) (2025-04-24)
 
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "codeforlife",
   "description": "Common frontend code",
   "private": false,
-  "version": "2.6.15",
+  "version": "2.6.16",
   "type": "module",
   "scripts": {
     "cli": "VITE_CONFIG=./vite.config.ts ../scripts/frontend/cli $@"

package/src/components/page/Banner.tsx

@@ -1,28 +1,36 @@
-import { Button, Stack, Typography, type ButtonProps } from "@mui/material"
-import { type FC } from "react"
+import { Stack, Typography } from "@mui/material"
 
+import { LinkButton, type LinkButtonProps } from "../router"
 import { primary, secondary, tertiary } from "../../theme/colors"
 import palette from "../../theme/palette"
 import Image, { type ImageProps } from "../Image"
 import Section from "./Section"
 
-export interface BannerProps {
+export interface BannerProps<
+  Button1State extends Record<string, any> = Record<string, any>,
+  Button2State extends Record<string, any> = Record<string, any>,
+> {
   header: string
   subheader?: string
   textAlign?: "start" | "center"
   imageProps?: ImageProps
-  buttonProps?: ButtonProps
+  button1Props?: LinkButtonProps<"to", Button1State>
+  button2Props?: LinkButtonProps<"to", Button2State>
   bgcolor?: "primary" | "secondary" | "tertiary"
 }
 
-const Banner: FC<BannerProps> = ({
+const Banner = <
+  Button1State extends Record<string, any> = Record<string, any>,
+  Button2State extends Record<string, any> = Record<string, any>,
+>({
   header,
   subheader,
   textAlign = "start",
   imageProps,
-  buttonProps,
+  button1Props,
+  button2Props,
   bgcolor = "primary",
-}) => {
+}: BannerProps<Button1State, Button2State>) => {
   // @ts-expect-error guaranteed to be in palette
   const contrastText = palette[bgcolor].contrastText
 
@@ -61,12 +69,15 @@ const Banner: FC<BannerProps> = ({
             <Typography
               color={contrastText}
               variant="h4"
-              mb={buttonProps !== undefined ? undefined : 0}
+              mb={button1Props !== undefined ? undefined : 0}
             >
               {subheader}
             </Typography>
           )}
-          {buttonProps !== undefined && <Button {...buttonProps} />}
+          <Stack direction="row" gap={2}>
+            {button1Props !== undefined && <LinkButton {...button1Props} />}
+            {button2Props !== undefined && <LinkButton {...button2Props} />}
+          </Stack>
         </Stack>
         {imageProps !== undefined && (
           <Image