Allow props to change individual styles without overriding *all* defaults (#58)

* Allow props to change individual styles without overriding *all* the styles.

Author: akademy

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

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",

src/components/Footer.test.tsx

@@ -10,7 +10,29 @@ 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 +78,9 @@ describe("Footer", () => {
       );
     });
   });
+});
 
+describe("Footer Links", () => {
   test("Should render with one link", async () => {
     const lineOneText = "Link one";
     const linkOneName = "link-one-href";

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";
 
@@ -16,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) => {
@@ -67,6 +68,13 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
   );
 };
 
+const BoxStyled = styled(Box)<BoxProps>(({ theme }) => ({
+  bottom: 0,
+  marginTop: "auto",
+  minHeight: "50px",
+  backgroundColor: theme.vars.palette.primary.light,
+}));
+
 /*
  * Basic footer bar.
  * Can be used with `FooterLinks` and `FooterLink` to display a list of links.
@@ -79,15 +87,7 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
   }
 
   return (
-    <footer
-      style={{
-        bottom: 0,
-        marginTop: "auto",
-        minHeight: 50,
-        backgroundColor: theme.vars.palette.primary.light,
-      }}
-      {...props}
-    >
+    <BoxStyled role="contentinfo" {...props}>
       <Grid container>
         <Grid
           size={logo || copyright ? { xs: 6, md: 8 } : { xs: 12, md: 12 }}
@@ -130,7 +130,7 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
           </Grid>
         )}
       </Grid>
-    </footer>
+    </BoxStyled>
   );
 };
 

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} />);

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";
@@ -22,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) => {
@@ -112,6 +111,18 @@ 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,20 +134,7 @@ 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,
-      }}
-      {...props}
-    >
+    <BoxStyled role="banner" {...props}>
       <Container maxWidth="lg" sx={{ height: "100%" }}>
         <Stack
           direction="row"
@@ -159,7 +157,7 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
           {children}
         </Stack>
       </Container>
-    </Box>
+    </BoxStyled>
   );
 };