fix(navigationfooter): address styling issues

chanzuckerberg · Nov 28, 2024 · 96fbc01 · 96fbc01
1 parent d33459f
commit 96fbc01
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 22 deletions.
diff --git a/packages/components/src/core/NavigationFooter/index.stories.tsx b/packages/components/src/core/NavigationFooter/index.stories.tsx
@@ -4,6 +4,8 @@ import NavigationFooter, {
   NavigationFooterProps,
 } from "./index";
 import { ReactNode } from "react";
+import { getSemanticColors } from "../styles";
+import { useTheme } from "@mui/material";
 
 function ExampleLogo({
   children,
@@ -14,13 +16,18 @@ function ExampleLogo({
   height: number;
   width: number;
 }) {
+  const theme = useTheme();
+  const colors = getSemanticColors({ theme });
+
   return (
     <div
       style={{
         alignItems: "center",
-        border: "1px dashed black",
+        border: `1px dashed ${colors?.base.border}`,
+        color: colors?.base.textPrimary,
         display: "flex",
         fontSize: 10,
+        fontWeight: "normal",
         height,
         justifyContent: "center",
         whiteSpace: "nowrap",
@@ -35,17 +42,32 @@ function ExampleLogo({
 export default {
   args: {
     images: [
-      <ExampleLogo key="1" width={100} height={40}>
-        Image Slot
-      </ExampleLogo>,
+      {
+        image: (
+          <ExampleLogo width={100} height={40}>
+            Image Slot
+          </ExampleLogo>
+        ),
+        url: "https://example.com/1",
+      },
 
-      <ExampleLogo key="2" width={100} height={40}>
-        Image Slot
-      </ExampleLogo>,
+      {
+        image: (
+          <ExampleLogo width={100} height={40}>
+            Image Slot
+          </ExampleLogo>
+        ),
+        url: "https://example.com/2",
+      },
 
-      <ExampleLogo key="3" width={100} height={40}>
-        Image Slot
-      </ExampleLogo>,
+      {
+        image: (
+          <ExampleLogo width={100} height={40}>
+            Image Slot
+          </ExampleLogo>
+        ),
+        url: "https://example.com/3",
+      },
     ],
 
     logo: (
@@ -54,6 +76,8 @@ export default {
       </ExampleLogo>
     ),
 
+    logoUrl: "https://example.com",
+
     navItems: Array.from(Array(5)).map<NavigationFooterNavItem>((_, idx) => ({
       label: `Nav Item ${idx + 1}`,
       url: `https://example.com/nav/${idx + 1}`,
@@ -64,7 +88,7 @@ export default {
       url: `https://example.com/nav/${idx + 1}`,
     })),
 
-    tag: "BETA",
+    tag: "Beta",
     tagColor: "beta",
     title: "Logo Name",
   } satisfies NavigationFooterProps,

diff --git a/packages/components/src/core/NavigationFooter/index.tsx b/packages/components/src/core/NavigationFooter/index.tsx
@@ -15,15 +15,22 @@ import {
 } from "./style";
 import { Divider, useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
+import Link from "../Link";
 
 export interface NavigationFooterNavItem {
   label: string;
   url: string;
 }
 
+export interface FooterImage {
+  image: ReactNode;
+  url: string;
+}
+
 export interface NavigationFooterProps {
+  images?: FooterImage[];
   logo?: ReactNode;
-  images?: ReactNode[];
+  logoUrl?: string;
   navItems?: NavigationFooterNavItem[];
   navLinks?: NavigationFooterNavItem[];
   tag?: string;
@@ -42,8 +49,9 @@ function groupArray<T>(array: T[], groupSize: number): T[][] {
 }
 
 export default function NavigationFooter({
-  logo,
   images,
+  logo,
+  logoUrl,
   navItems,
   navLinks,
   tag,
@@ -59,11 +67,21 @@ export default function NavigationFooter({
     }
 
     if (!isNarrow) {
-      return images;
+      return images.map(({ image, url }) => (
+        <Link key={url} href={url}>
+          {image}
+        </Link>
+      ));
     }
 
     return groupArray(images, 2).map((imageGroup, index) => (
-      <StyledMobileImageRow key={index}>{imageGroup}</StyledMobileImageRow>
+      <StyledMobileImageRow key={index}>
+        {imageGroup.map(({ image, url }) => (
+          <Link key={url} href={url}>
+            {image}
+          </Link>
+        ))}
+      </StyledMobileImageRow>
     ));
   }
 
@@ -99,16 +117,24 @@ export default function NavigationFooter({
     ));
   }
 
+  let logoNode = (
+    <StyledLogoWrapper>
+      {logo}
+
+      <p>{title}</p>
+
+      {tag && <Tag tagColor={tagColor} label={tag} hover={false} />}
+    </StyledLogoWrapper>
+  );
+
+  if (logoUrl) {
+    logoNode = <Link href={logoUrl}>{logoNode}</Link>;
+  }
+
   return (
     <StyledFooter>
       <StyledTopSection>
-        <StyledLogoWrapper>
-          {logo}
-
-          <p>{title}</p>
-
-          {tag && <Tag tagColor={tagColor} label={tag} />}
-        </StyledLogoWrapper>
+        {logoNode}
 
         {navItems && navItems.length > 0 && (
           <StyledNavSection>

diff --git a/packages/components/src/core/NavigationFooter/style.ts b/packages/components/src/core/NavigationFooter/style.ts
@@ -29,6 +29,10 @@ export const StyledLogoWrapper = styled.div`
   display: flex;
   align-items: center;
 
+  a {
+    text-decoration: none;
+  }
+
   p {
     ${fontHeader("l")}
     ${fontHeader("l", /* isNarrow */ true)}
@@ -111,6 +115,10 @@ export const StyledTopSection = styled.div`
   justify-content: space-between;
   margin-bottom: 60px;
 
+  a:hover {
+    text-decoration: none;
+  }
+
   ${(props: CommonThemeProps) => {
     const colors = getSemanticColors(props);
     const spaces = getSpaces(props);
@@ -224,6 +232,10 @@ export const StyledBottomSection = styled.div`
   display: flex;
   justify-content: space-between;
 
+  a:hover {
+    text-decoration: none;
+  }
+
   ${(props: CommonThemeProps) => {
     const spaces = getSpaces(props);