Footer diamond

.gitignore

@@ -1,5 +1,6 @@
 /dist/
 /node_modules/
+/coverage
 
 *storybook.log
 

jest.config.js

@@ -1,3 +1,6 @@
 module.exports = {
     testEnvironment: "jsdom",
+    moduleNameMapper: {
+        '^.+.(svg)$': 'jest-transform-stub',
+    }
 };

src/components/Footer.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { Footer, FooterLink, FooterLinks } from "./Footer";
+
+const meta: Meta<typeof Footer> = {
+  title: "SciReactUI/Navigation/Footer",
+  component: Footer,
+  decorators: [
+    (Story) => (
+      <div style={{ position: "relative" }}>
+        <div style={{ position: "relative" }}>
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LogoOnly: Story = {
+  args: {},
+};
+
+export const CopyrightOnly: Story = {
+  args: {
+    logo: "",
+    copyright: "Copyright © text",
+  },
+};
+
+export const CopyrightAndLogo: Story = {
+  args: { copyright: "Copyright © text" },
+};
+
+export const WithOneLink: Story = {
+  args: {
+    copyright: "Copyright © text",
+    children: [
+      <FooterLinks key="footer-links">
+        <FooterLink href="#" key="first-footer-link">
+          Link one
+        </FooterLink>
+      </FooterLinks>,
+    ],
+  },
+};
+
+export const WithTwoLinks: Story = {
+  args: {
+    copyright: "Copyright © text",
+    children: [
+      <FooterLinks key="footer-links">
+        <FooterLink href="#" key="first-footer-link">
+          Link one
+        </FooterLink>
+        <FooterLink href="#" key="second-footer-link">
+          Link two
+        </FooterLink>
+      </FooterLinks>,
+    ],
+  },
+};
+
+export const WithThreeLinks: Story = {
+  args: {
+    copyright: "Copyright © text",
+    children: [
+      <FooterLinks key="footer-links">
+        <FooterLink href="#" key="first-footer-link">
+          Link one
+        </FooterLink>
+        <FooterLink href="#" key="second-footer-link">
+          Link two
+        </FooterLink>
+        <FooterLink href="#" key="third-footer-link">
+          Link three
+        </FooterLink>
+      </FooterLinks>,
+    ],
+  },
+};

src/components/Footer.test.tsx

@@ -0,0 +1,120 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import dlsLogo from "../public/dls.svg";
+import { Footer, FooterLink, FooterLinks } from "./Footer";
+
+describe("Footer", () => {
+  test("Should render blank", async () => {
+    render(<Footer logo={null} />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("footer-container")).not.toBeNull();
+      expect(screen.getByTestId("footer-link-container")).not.toBeNull();
+      // footer container only loads empty div
+      expect(
+        screen.getByTestId("footer-logo-container").childElementCount
+      ).toBe(1);
+    });
+  });
+
+  test("Should render logo only", async () => {
+    render(<Footer logo={dlsLogo} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("img")).not.toBeNull();
+    });
+  });
+
+  test("Should render copyright only", async () => {
+    render(<Footer logo={null} copyright="test copyright text" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("test copyright text")).not.toBeNull();
+    });
+  });
+
+  test("Should render logo and copyright", async () => {
+    render(<Footer logo={dlsLogo} copyright="test copyright text" />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("img")).not.toBeNull();
+      expect(screen.getByText("test copyright text")).not.toBeNull();
+    });
+  });
+
+  test("Should render with one link", async () => {
+    render(
+      <Footer>
+        <FooterLinks>
+          <FooterLink href="link-one-href">Link one</FooterLink>
+        </FooterLinks>
+      </Footer>
+    );
+
+    await waitFor(() => {
+      const linkOneContainer = screen.getByTestId("link-container");
+      expect(
+        screen.getByTestId("footer-links-container").childElementCount
+      ).toBe(1);
+      expect(linkOneContainer).not.toBeNull();
+      expect(linkOneContainer.getAttribute("href")).toStrictEqual(
+        "link-one-href"
+      );
+      expect(linkOneContainer.textContent).toStrictEqual("Link one");
+    });
+  });
+
+  test("Should render with two links", async () => {
+    render(
+      <Footer>
+        <FooterLinks>
+          <FooterLink data-testid="link-one-container" href="link-one-href">
+            Link one
+          </FooterLink>
+          <FooterLink data-testid="link-two-container" href="link-two-href">
+            Link two
+          </FooterLink>
+        </FooterLinks>
+      </Footer>
+    );
+
+    await waitFor(() => {
+      const linkTwoContainer = screen.getByTestId("link-two-container");
+      expect(screen.getByTestId("footer-links-container")).not.toBeNull();
+      expect(
+        screen.getByTestId("footer-links-container").childElementCount
+      ).toBe(2);
+      expect(linkTwoContainer).not.toBeNull();
+      expect(linkTwoContainer.getAttribute("href")).toStrictEqual(
+        "link-two-href"
+      );
+      expect(linkTwoContainer.textContent).toStrictEqual("Link two");
+    });
+  });
+
+  test("Should render with three links", async () => {
+    render(
+      <Footer>
+        <FooterLinks>
+          <FooterLink href="link-one-href">Link one</FooterLink>
+          <FooterLink href="link-two-href">Link two</FooterLink>
+          <FooterLink data-testid="link-three-container" href="link-three-href">
+            Link three
+          </FooterLink>
+        </FooterLinks>
+      </Footer>
+    );
+
+    await waitFor(() => {
+      const linkThreeContainer = screen.getByTestId("link-three-container");
+      expect(screen.getByTestId("footer-links-container")).not.toBeNull();
+      expect(
+        screen.getByTestId("footer-links-container").childElementCount
+      ).toBe(3);
+      expect(linkThreeContainer).not.toBeNull();
+      expect(linkThreeContainer.getAttribute("href")).toStrictEqual(
+        "link-three-href"
+      );
+      expect(linkThreeContainer.textContent).toStrictEqual("Link three");
+    });
+  });
+});

src/components/Footer.tsx

@@ -0,0 +1,115 @@
+import { Link, LinkProps, Paper, Typography, useTheme } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import dlsLogo from "../public/dls.svg";
+
+export interface FooterLinksProps {
+  children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
+}
+
+export interface FooterProps {
+  /** Location/content of the logo */
+  logo?: string | null;
+  copyright?: string | null;
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+const FooterLinks = ({ children }: FooterLinksProps) => {
+  return (
+    <div
+      data-testid="footer-links-container"
+      style={{
+        float: "left",
+        alignItems: "center",
+        borderTop: "4px solid transparent",
+        borderBottom: "4px solid transparent",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const FooterLink = ({ children, ...props }: LinkProps) => {
+  const theme = useTheme();
+
+  return (
+    <Link
+      data-testid="link-container"
+      sx={{
+        "&:hover": {
+          color: theme.palette.secondary.main,
+          borderBottom: "solid 4px",
+        },
+        textDecoration: "none",
+        color: theme.palette.primary.contrastText,
+        marginLeft: "1.5rem",
+        cursor: "pointer",
+      }}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
+
+/*
+ * Basic footer bar.
+ * Can be used with `FooterLinks` and `FooterLink` to display a list of links.
+ */
+const Footer = ({
+  logo = dlsLogo as string,
+  copyright,
+  children,
+  ...props
+}: FooterProps) => {
+  const theme = useTheme();
+
+  return (
+    <Paper
+      data-testid="footer-container"
+      sx={{
+        position: "sticky",
+        bottom: 0,
+        backgroundColor: theme.palette.primary.light,
+        minHeight: 50,
+      }}
+      {...props}
+    >
+      <Grid container>
+        <Grid
+          data-testid="footer-link-container"
+          size={{ xs: 6, md: 8 }}
+          style={{
+            alignContent: "center",
+          }}
+        >
+          {children}
+        </Grid>
+        <Grid data-testid="footer-logo-container" size={{ xs: 6, md: 4 }}>
+          <div
+            style={{
+              float: "right",
+              paddingTop: "10px",
+              paddingRight: "15px",
+              textAlign: "right",
+            }}
+          >
+            {logo ? <img alt="footer-logo" src={logo} /> : null}
+            {copyright ? (
+              <Typography
+                style={{
+                  margin: 0,
+                  color: theme.palette.primary.contrastText,
+                }}
+              >
+                {copyright}
+              </Typography>
+            ) : null}
+          </div>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+};
+
+export { Footer, FooterLinks, FooterLink };

src/index.ts

@@ -1,5 +1,6 @@
 // components
 export * from "./components/Navbar";
+export * from "./components/Footer";
 export * from "./components/User";
 export * from "./components/VisitInput";