From 7397189b075b77b83deb2af7467642097ae9884b Mon Sep 17 00:00:00 2001
From: Matthew Wilcoxson <Matthew.Wilcoxson@diamond.ac.uk>
Date: Fri, 25 Apr 2025 16:10:54 +0100
Subject: [PATCH 1/3] Allow props to change individual styles without
 overriding *all* the styles.

---
 changelog.md                   | 15 ++++++++++++++-
 package.json                   |  2 +-
 src/components/Footer.test.tsx | 30 +++++++++++++++++++++++++++++-
 src/components/Footer.tsx      | 25 ++++++++++++++++---------
 src/components/Navbar.test.tsx | 22 ++++++++++++++++++++++
 src/components/Navbar.tsx      | 33 +++++++++++++++++++--------------
 6 files changed, 101 insertions(+), 26 deletions(-)

diff --git a/changelog.md b/changelog.md
index 291e6f0..e386614 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,6 +1,19 @@
 SciReactUI Changelog
 ====================
 
+
+[v0.1.1] - 2025-?-?
+--------------------
+
+### Added
+- 
+
+### Fixed
+- Styles added to Navbar and Footer incorrectly remove built in styles.
+
+### Changed
+-
+
 [v0.1.0] - 2025-04-10
 ---------------------
 
@@ -56,7 +69,7 @@ SciReactUI Changelog
   - Generic
 
 
-[0.0.0] - 2024-06-04
+[v0.0.0] - 2024-06-04
 --------------------
 
 ### Added
diff --git a/package.json b/package.json
index fa75a40..1f412b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@diamondlightsource/sci-react-ui",
-  "version": "0.1.0",
+  "version": "0.1.1alpha",
   "description": "A theme and component library to make websites at scientific institutions simple to create.",
   "author": "Diamond Light Source",
   "license": "ISC",
diff --git a/src/components/Footer.test.tsx b/src/components/Footer.test.tsx
index e2185d5..09b7ea1 100644
--- a/src/components/Footer.test.tsx
+++ b/src/components/Footer.test.tsx
@@ -10,7 +10,32 @@ jest.mock("./ImageColorSchemeSwitch");
 // @ts-expect-error: doesn't find mockImplementation outside of testing.
 ImageColorSchemeSwitch.mockImplementation(() => <img src="src" alt="alt" />);
 
-describe("Footer", () => {
+
+describe("Footer logo and copyright", () => {
+  test("Should render", async () => {
+    renderWithProviders(<Footer/>);
+    expect(await screen.findByRole("contentinfo")).toBeInTheDocument();
+  });
+  
+  test("Should renders correctly with styles", async () => {
+    const borderStyle = "1px solid orange"
+    renderWithProviders(<Footer style={{border:borderStyle}}/>);
+    
+    const footerComputedStyle = window.getComputedStyle(
+        await screen.findByRole("contentinfo")
+    )
+    
+    // check new style is set
+    expect(footerComputedStyle.border).toBe(borderStyle)
+    
+    // Check default values are still set
+    expect(footerComputedStyle.minHeight).toBe('50px')
+  });
+  
+  
+});
+
+describe("Footer logo and copyright", () => {
   test("Should render logo only", () => {
     renderWithProviders(<Footer logo={{ src: dlsLogo, alt: "t" }} />);
 
@@ -56,7 +81,10 @@ describe("Footer", () => {
       );
     });
   });
+});
 
+describe("Footer Links", () => {
+  
   test("Should render with one link", async () => {
     const lineOneText = "Link one";
     const linkOneName = "link-one-href";
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b97f3a6..c66251f 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,8 +1,11 @@
 import {
+  Box,
+  BoxProps,
+  Grid2 as Grid,
   Link,
   LinkProps,
+  styled,
   Typography,
-  Grid2 as Grid,
   useTheme,
 } from "@mui/material";
 
@@ -67,6 +70,15 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
   );
 };
 
+const BoxStyled = styled(Box)<BoxProps>(
+    ({ theme }) => ({
+      bottom: 0,
+      marginTop: "auto",
+      minHeight: 50,
+      backgroundColor: theme.vars.palette.primary.light
+    })
+);
+
 /*
  * Basic footer bar.
  * Can be used with `FooterLinks` and `FooterLink` to display a list of links.
@@ -79,13 +91,8 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
   }
 
   return (
-    <footer
-      style={{
-        bottom: 0,
-        marginTop: "auto",
-        minHeight: 50,
-        backgroundColor: theme.vars.palette.primary.light,
-      }}
+    <BoxStyled
+      role="contentinfo"
       {...props}
     >
       <Grid container>
@@ -130,7 +137,7 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
           </Grid>
         )}
       </Grid>
-    </footer>
+    </BoxStyled>
   );
 };
 
diff --git a/src/components/Navbar.test.tsx b/src/components/Navbar.test.tsx
index 03645ef..2c44394 100644
--- a/src/components/Navbar.test.tsx
+++ b/src/components/Navbar.test.tsx
@@ -4,6 +4,28 @@ import "@testing-library/jest-dom";
 import { renderWithProviders } from "../__test-utils__/helpers";
 
 describe("Navbar", () => {
+  it("should render", async () => {
+    renderWithProviders(<Navbar />);
+    expect(await screen.findByRole("banner")).toBeInTheDocument();
+  });
+  
+  it("should render with styles", async () => {
+    const borderStyle = "1px solid orange"
+    renderWithProviders(<Navbar style={{border:borderStyle}}/>);
+    
+    const headerComputedStyle = window.getComputedStyle(
+        await screen.findByRole("banner")
+    )
+    
+    // check new style is set
+    expect(headerComputedStyle.border).toBe(borderStyle)
+    
+    // Check default values are still set
+    expect(headerComputedStyle.height).toBe('50px')
+  });
+});
+
+describe("Navbar Logo", () => {
   it("should not display logo if null", () => {
     global.innerWidth = 600;
     renderWithProviders(<Navbar logo={null} />);
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 067e079..a34d7f1 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -4,10 +4,11 @@ import {
   BoxProps,
   Container,
   Drawer,
-  LinkProps,
   Link,
+  LinkProps,
   IconButton,
   Stack,
+  styled,
   useTheme,
 } from "@mui/material";
 import { MdMenu, MdClose } from "react-icons/md";
@@ -112,6 +113,20 @@ const NavLinks = ({ children }: NavLinksProps) => {
   );
 };
 
+const BoxStyled = styled(Box)<BoxProps>(
+    ({ theme }) => ({
+      top:0,
+      zIndex:1,
+      width:"100%",
+      height:"50px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      borderRadius: 0,
+      backgroundColor: theme.vars.palette.primary.main,
+    })
+);
+
 /**
  * Basic navigation bar. Can be used with `NavLinks` and `NavLink` to display a responsive list of links.
  */
@@ -123,18 +138,8 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
   }
 
   return (
-    <Box
-      top="0"
-      zIndex={1}
-      width="100%"
-      height="50px"
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        borderRadius: 0,
-        backgroundColor: theme.vars.palette.primary.main,
-      }}
+    <BoxStyled
+      role="banner"
       {...props}
     >
       <Container maxWidth="lg" sx={{ height: "100%" }}>
@@ -159,7 +164,7 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
           {children}
         </Stack>
       </Container>
-    </Box>
+    </BoxStyled>
   );
 };
 

From 96466d3e5f51964c08ccbae366e44114a2dd19f0 Mon Sep 17 00:00:00 2001
From: Matthew Wilcoxson <Matthew.Wilcoxson@diamond.ac.uk>
Date: Tue, 29 Apr 2025 13:24:47 +0100
Subject: [PATCH 2/3] space nazis.

---
 src/components/Footer.test.tsx | 26 +++++++++++---------------
 src/components/Footer.tsx      | 19 +++++++------------
 src/components/Navbar.test.tsx | 20 ++++++++++----------
 src/components/Navbar.tsx      | 29 ++++++++++++-----------------
 4 files changed, 40 insertions(+), 54 deletions(-)

diff --git a/src/components/Footer.test.tsx b/src/components/Footer.test.tsx
index 09b7ea1..6bf319d 100644
--- a/src/components/Footer.test.tsx
+++ b/src/components/Footer.test.tsx
@@ -10,29 +10,26 @@ jest.mock("./ImageColorSchemeSwitch");
 // @ts-expect-error: doesn't find mockImplementation outside of testing.
 ImageColorSchemeSwitch.mockImplementation(() => <img src="src" alt="alt" />);
 
-
 describe("Footer logo and copyright", () => {
   test("Should render", async () => {
-    renderWithProviders(<Footer/>);
+    renderWithProviders(<Footer />);
     expect(await screen.findByRole("contentinfo")).toBeInTheDocument();
   });
-  
+
   test("Should renders correctly with styles", async () => {
-    const borderStyle = "1px solid orange"
-    renderWithProviders(<Footer style={{border:borderStyle}}/>);
-    
+    const borderStyle = "1px solid orange";
+    renderWithProviders(<Footer style={{ border: borderStyle }} />);
+
     const footerComputedStyle = window.getComputedStyle(
-        await screen.findByRole("contentinfo")
-    )
-    
+      await screen.findByRole("contentinfo"),
+    );
+
     // check new style is set
-    expect(footerComputedStyle.border).toBe(borderStyle)
-    
+    expect(footerComputedStyle.border).toBe(borderStyle);
+
     // Check default values are still set
-    expect(footerComputedStyle.minHeight).toBe('50px')
+    expect(footerComputedStyle.minHeight).toBe("50px");
   });
-  
-  
 });
 
 describe("Footer logo and copyright", () => {
@@ -84,7 +81,6 @@ describe("Footer logo and copyright", () => {
 });
 
 describe("Footer Links", () => {
-  
   test("Should render with one link", async () => {
     const lineOneText = "Link one";
     const linkOneName = "link-one-href";
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c66251f..ff7bf85 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -70,14 +70,12 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
   );
 };
 
-const BoxStyled = styled(Box)<BoxProps>(
-    ({ theme }) => ({
-      bottom: 0,
-      marginTop: "auto",
-      minHeight: 50,
-      backgroundColor: theme.vars.palette.primary.light
-    })
-);
+const BoxStyled = styled(Box)<BoxProps>(({ theme }) => ({
+  bottom: 0,
+  marginTop: "auto",
+  minHeight: 50,
+  backgroundColor: theme.vars.palette.primary.light,
+}));
 
 /*
  * Basic footer bar.
@@ -91,10 +89,7 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
   }
 
   return (
-    <BoxStyled
-      role="contentinfo"
-      {...props}
-    >
+    <BoxStyled role="contentinfo" {...props}>
       <Grid container>
         <Grid
           size={logo || copyright ? { xs: 6, md: 8 } : { xs: 12, md: 12 }}
diff --git a/src/components/Navbar.test.tsx b/src/components/Navbar.test.tsx
index 2c44394..640ce10 100644
--- a/src/components/Navbar.test.tsx
+++ b/src/components/Navbar.test.tsx
@@ -8,20 +8,20 @@ describe("Navbar", () => {
     renderWithProviders(<Navbar />);
     expect(await screen.findByRole("banner")).toBeInTheDocument();
   });
-  
+
   it("should render with styles", async () => {
-    const borderStyle = "1px solid orange"
-    renderWithProviders(<Navbar style={{border:borderStyle}}/>);
-    
+    const borderStyle = "1px solid orange";
+    renderWithProviders(<Navbar style={{ border: borderStyle }} />);
+
     const headerComputedStyle = window.getComputedStyle(
-        await screen.findByRole("banner")
-    )
-    
+      await screen.findByRole("banner"),
+    );
+
     // check new style is set
-    expect(headerComputedStyle.border).toBe(borderStyle)
-    
+    expect(headerComputedStyle.border).toBe(borderStyle);
+
     // Check default values are still set
-    expect(headerComputedStyle.height).toBe('50px')
+    expect(headerComputedStyle.height).toBe("50px");
   });
 });
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index a34d7f1..8c06ab7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -113,19 +113,17 @@ const NavLinks = ({ children }: NavLinksProps) => {
   );
 };
 
-const BoxStyled = styled(Box)<BoxProps>(
-    ({ theme }) => ({
-      top:0,
-      zIndex:1,
-      width:"100%",
-      height:"50px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      borderRadius: 0,
-      backgroundColor: theme.vars.palette.primary.main,
-    })
-);
+const BoxStyled = styled(Box)<BoxProps>(({ theme }) => ({
+  top: 0,
+  zIndex: 1,
+  width: "100%",
+  height: "50px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  borderRadius: 0,
+  backgroundColor: theme.vars.palette.primary.main,
+}));
 
 /**
  * Basic navigation bar. Can be used with `NavLinks` and `NavLink` to display a responsive list of links.
@@ -138,10 +136,7 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
   }
 
   return (
-    <BoxStyled
-      role="banner"
-      {...props}
-    >
+    <BoxStyled role="banner" {...props}>
       <Container maxWidth="lg" sx={{ height: "100%" }}>
         <Stack
           direction="row"

From 9e5fbe6b424bdc31629ae6b238a479736587bf09 Mon Sep 17 00:00:00 2001
From: Matthew Wilcoxson <Matthew.Wilcoxson@diamond.ac.uk>
Date: Tue, 29 Apr 2025 15:51:33 +0100
Subject: [PATCH 3/3] Fix build issue with wrong type.

---
 src/components/Footer.tsx | 6 ++----
 src/components/Navbar.tsx | 4 +---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ff7bf85..e355586 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -19,11 +19,9 @@ interface FooterLinksProps extends React.HTMLProps<HTMLDivElement> {
   children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
 }
 
-interface FooterProps extends React.HTMLProps<HTMLDivElement> {
-  /** Location/content of the logo */
+interface FooterProps extends BoxProps, React.PropsWithChildren {
   logo?: ImageColorSchemeSwitchType | "theme" | null;
   copyright?: string | null;
-  children?: React.ReactElement | React.ReactElement[];
 }
 
 const FooterLinks = ({ children, ...props }: FooterLinksProps) => {
@@ -73,7 +71,7 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
 const BoxStyled = styled(Box)<BoxProps>(({ theme }) => ({
   bottom: 0,
   marginTop: "auto",
-  minHeight: 50,
+  minHeight: "50px",
   backgroundColor: theme.vars.palette.primary.light,
 }));
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 8c06ab7..20ad9e9 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -23,10 +23,8 @@ interface NavLinksProps {
   children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
 }
 
-interface NavbarProps extends BoxProps {
-  /** Location/content of the logo */
+interface NavbarProps extends BoxProps, React.PropsWithChildren {
   logo?: ImageColorSchemeSwitchType | "theme" | null;
-  children?: React.ReactElement | React.ReactElement[];
 }
 
 const NavLink = ({ children, ...props }: LinkProps) => {