Use the themeable image in footer.

Author: akademy

src/components/Footer.stories.tsx

@@ -11,19 +11,48 @@ const meta: Meta<typeof Footer> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+
+export const All: Story = {
+  args: {
+    logo: "theme",
+    copyright: "Company",
+    children: [
+      <FooterLinks key="footer-links">
+        <FooterLink href="#TheMoon" key="the-moon">
+          The Moon
+        </FooterLink>
+        <FooterLink href="#Phobos" key="phobos">
+          Phobos
+        </FooterLink>
+        <FooterLink href="#Ganymede" key="ganymede">
+          Ganymede
+        </FooterLink>
+        <FooterLink href="#Titan" key="titan">
+          Titan
+        </FooterLink>
+      </FooterLinks>,
+    ],
+  },
+};
+
 export const LogoOnly: Story = {
-  args: {},
+  args: {
+    logo: "theme"
+  },
 };
 
 export const CopyrightOnly: Story = {
   args: {
-    logo: "",
+    logo: null,
     copyright: "Company",
   },
 };
 
 export const CopyrightAndLogo: Story = {
-  args: { copyright: "Company" },
+  args: {
+    logo: "theme",
+    copyright: "Company"
+  },
 };
 
 export const WithOneLink: Story = {

src/components/Footer.test.tsx

@@ -1,18 +1,23 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import dlsLogo from "../public/dls.svg";
-
+import dlsLogo from "../public/generic/logo-short.svg";
 import { Footer, FooterLink, FooterLinks } from "./Footer";
-describe("Footer", () => {
-  test("Should render logo only", async () => {
-    render(<Footer logo={dlsLogo} />);
+import {ImageColorSchemeSwitch} from './ImageColorSchemeSwitch';
 
-    await waitFor(() => {
-      expect(screen.getByRole("img")).toBeInTheDocument();
-      // No copyright text
-      expect(screen.queryByRole("paragraph")).not.toBeTruthy();
-    });
+
+jest.mock('./ImageColorSchemeSwitch');
+// @ts-ignore: doesn't find mockImplementation
+ImageColorSchemeSwitch.mockImplementation(() => <img src="src" alt="alt"/>)
+
+
+describe("Footer", () => {
+  test("Should render logo only", () => {
+    render(<Footer logo={{src:dlsLogo, alt:"t"}} />);
+    
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    // No copyright text
+    expect(screen.queryByRole("paragraph")).not.toBeInTheDocument();
   });
 
   test("Should render copyright only", async () => {
@@ -33,13 +38,14 @@ describe("Footer", () => {
   test("Should render logo and copyright", async () => {
     const copyrightText = "add text here";
     const currentYear = new Date().getFullYear();
-    render(<Footer logo={dlsLogo} copyright={copyrightText} />);
+    render(<Footer logo={{"src":dlsLogo,"alt":""}} copyright={copyrightText} />);
 
     await waitFor(() => {
       expect(screen.getByRole("img")).toBeInTheDocument();
-      expect(screen.queryByRole("paragraph")).toBeInTheDocument();
-      expect(screen.queryByRole("paragraph")?.textContent).toStrictEqual(
-        `Copyright © ${currentYear} ${copyrightText}`,
+      const paragraph = screen.getByRole("paragraph")
+      expect(paragraph).toBeInTheDocument();
+      expect(paragraph.textContent).toStrictEqual(
+        `Copyright © ${currentYear} ${copyrightText}`
       );
     });
   });

src/components/Footer.tsx

@@ -1,15 +1,16 @@
 import { Link, LinkProps, Typography, useTheme } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import dlsLogo from "../public/logo-short.svg";
+
 import React from "react";
+import {ImageColorSchemeSwitch, ImageColorSchemeSwitchType} from "./ImageColorSchemeSwitch";
 
 interface FooterLinksProps {
   children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
 }
 
 interface FooterProps extends React.HTMLProps<HTMLDivElement> {
   /** Location/content of the logo */
-  logo?: string | null;
+  logo?: ImageColorSchemeSwitchType | "theme" | null;
   copyright?: string | null;
   children?: React.ReactElement | React.ReactElement[];
 }
@@ -58,13 +59,17 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
  * Can be used with `FooterLinks` and `FooterLink` to display a list of links.
  */
 const Footer = ({
-  logo = dlsLogo as string,
+  logo,
   copyright,
   children,
   ...props
 }: FooterProps) => {
   const theme = useTheme();
 
+  if(logo === "theme") {
+    logo = theme.logos?.short
+  }
+  
   return (
     <footer
       style={{
@@ -93,7 +98,7 @@ const Footer = ({
               textAlign: "right",
             }}
           >
-            {logo ? <img alt="footer-logo" src={logo} /> : null}
+            {logo && <ImageColorSchemeSwitch image={logo} />}
             {copyright ? (
               <Typography
                 style={{

src/components/Navbar.stories.tsx

@@ -15,8 +15,33 @@ const meta: Meta<typeof Navbar> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Empty: Story = {
-  args: {},
+export const All: Story = {
+  args: {
+    children: [
+      <NavLinks key="links">
+        <NavLink href="#Mercury" key="mercury">
+          Mercury
+        </NavLink>
+        <NavLink href="#Venus" key="venus">
+          Venus
+        </NavLink>
+        <NavLink href="#Earth" key="earth">
+          Earth
+        </NavLink>
+        <NavLink href="#Mars" key="mars">
+          Mars
+        </NavLink>
+      </NavLinks>,
+      <User
+          key="user"
+          onLogin={() => {}}
+          onLogout={() => {}}
+          user={{ name: "Name", fedid: "FedID" }}
+          color={"white"}
+      />,
+    ],
+    logo: "theme"
+  },
 };
 
 export const WithLogin: Story = {
@@ -133,3 +158,7 @@ export const CustomChildElement: Story = {
     children: <Chip label="Hello, World" sx={{ backgroundColor: "#aaaaaa" }} />,
   },
 };
+
+export const Empty: Story = {
+  args: {},
+};

src/public/logo-short.svg src/public/diamond/logo-short.svgsrc/public/logo-short.svg renamed to src/public/diamond/logo-short.svg

@@ -4,6 +4,7 @@ import { BaseThemeOptions } from "./BaseTheme";
 
 import logoImageDark from "../public/diamond/logo-dark.svg";
 import logoImageLight from "../public/diamond/logo-light.svg";
+import logoShort from "../public/diamond/logo-short.svg";
 
 const dlsLogoBlue = "#202740";
 const dlsLogoYellow = "#facf07";
@@ -17,6 +18,11 @@ const DiamondTheme: Theme = createTheme({
       alt: "Diamond Source Logo",
       width: "100",
     },
+    short: {
+      src: logoShort,
+      alt: "Diamond Source Logo",
+      width: "65"
+    },
   },
   colorSchemes: {
     // https://zenoo.github.io/mui-theme-creator/

src/public/generic/logo-short.svg

@@ -14,6 +14,11 @@ const GenericTheme: Theme = createTheme({
       alt: "Diamond Source Logo",
       width: "100",
     },
+    short: {
+      src: logoImageDark,
+      alt: "Diamond Source Logo",
+      width: "60"
+    },
   },
 });