refactor(navigationfooter): rename to NavigationFooter

chanzuckerberg · Oct 30, 2024 · fdde74b · fdde74b
1 parent 8cbe60f
commit fdde74b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 43 deletions.
diff --git a/...ponents/src/core/Footer/index.stories.tsx → ...c/core/NavigationFooter/index.stories.tsx b/...ponents/src/core/Footer/index.stories.tsx → ...c/core/NavigationFooter/index.stories.tsx
@@ -1,6 +1,8 @@
 import { Meta } from "@storybook/react/*";
-import Footer, { FooterNavItem, FooterProps } from "./index";
-import Icon from "../Icon";
+import NavigationFooter, {
+  NavigationFooterNavItem,
+  NavigationFooterProps,
+} from "./index";
 import { ReactNode } from "react";
 
 function ExampleLogo({
@@ -15,14 +17,14 @@ function ExampleLogo({
   return (
     <div
       style={{
-        width,
-        height,
-        fontSize: 10,
-        whiteSpace: "nowrap",
-        display: "flex",
         alignItems: "center",
-        justifyContent: "center",
         border: "1px dashed black",
+        display: "flex",
+        fontSize: 10,
+        height,
+        justifyContent: "center",
+        whiteSpace: "nowrap",
+        width,
       }}
     >
       {children}
@@ -31,43 +33,44 @@ function ExampleLogo({
 }
 
 export default {
-  component: Footer,
-  title: "Components/Footer",
   args: {
-    title: "Logo Name",
-    tag: "BETA",
-    tagColor: "beta",
+    images: [
+      <ExampleLogo key="1" width={100} height={40}>
+        Image Slot
+      </ExampleLogo>,
 
-    navItems: Array.from(Array(5)).map<FooterNavItem>((_, idx) => ({
-      label: `Nav Item ${idx + 1}`,
-      url: `https://example.com/nav/${idx + 1}`,
-    })),
+      <ExampleLogo key="2" width={100} height={40}>
+        Image Slot
+      </ExampleLogo>,
 
-    navLinks: Array.from(Array(5)).map<FooterNavItem>((_, idx) => ({
-      label: `Link Item ${idx + 1}`,
-      url: `https://example.com/nav/${idx + 1}`,
-    })),
+      <ExampleLogo key="3" width={100} height={40}>
+        Image Slot
+      </ExampleLogo>,
+    ],
 
     logo: (
       <ExampleLogo width={50} height={24}>
         Logo Slot
       </ExampleLogo>
     ),
 
-    images: [
-      <ExampleLogo width={100} height={40}>
-        Image Slot
-      </ExampleLogo>,
+    navItems: Array.from(Array(5)).map<NavigationFooterNavItem>((_, idx) => ({
+      label: `Nav Item ${idx + 1}`,
+      url: `https://example.com/nav/${idx + 1}`,
+    })),
 
-      <ExampleLogo width={100} height={40}>
-        Image Slot
-      </ExampleLogo>,
+    navLinks: Array.from(Array(5)).map<NavigationFooterNavItem>((_, idx) => ({
+      label: `Link Item ${idx + 1}`,
+      url: `https://example.com/nav/${idx + 1}`,
+    })),
 
-      <ExampleLogo width={100} height={40}>
-        Image Slot
-      </ExampleLogo>,
-    ],
-  } satisfies FooterProps,
+    tag: "BETA",
+    tagColor: "beta",
+    title: "Logo Name",
+  } satisfies NavigationFooterProps,
+
+  component: NavigationFooter,
+  title: "Components/NavigationFooter",
 } as Meta;
 
 export const Default = {};
diff --git a/...ages/components/src/core/Footer/index.tsx → ...nents/src/core/NavigationFooter/index.tsx b/...ages/components/src/core/Footer/index.tsx → ...nents/src/core/NavigationFooter/index.tsx
@@ -3,7 +3,6 @@ import Tag, { TagProps } from "../Tag";
 import {
   StyledBottomSection,
   StyledFooter,
-  StyledLinkItemButton,
   StyledLinkItemLink,
   StyledLinkSection,
   StyledImageSection,
@@ -17,16 +16,16 @@ import {
 import { Divider, useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 
-export interface FooterNavItem {
+export interface NavigationFooterNavItem {
   label: string;
   url: string;
 }
 
-export interface FooterProps {
+export interface NavigationFooterProps {
   logo?: ReactNode;
   images?: ReactNode[];
-  navItems?: FooterNavItem[];
-  navLinks?: FooterNavItem[];
+  navItems?: NavigationFooterNavItem[];
+  navLinks?: NavigationFooterNavItem[];
   tag?: string;
   tagColor?: TagProps["tagColor"];
   title: string;
@@ -42,15 +41,15 @@ function groupArray<T>(array: T[], groupSize: number): T[][] {
   return groups;
 }
 
-export default function Footer({
+export default function NavigationFooter({
   logo,
   images,
   navItems,
   navLinks,
   tag,
   tagColor,
   title,
-}: FooterProps) {
+}: NavigationFooterProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
@@ -68,7 +67,7 @@ export default function Footer({
     ));
   }
 
-  function renderLink(link: FooterNavItem, showDivider: boolean) {
+  function renderLink(link: NavigationFooterNavItem, showDivider: boolean) {
     return (
       <>
         <StyledLinkItemLink key={link.label} href={link.url}>

diff --git a/packages/components/src/core/Footer/style.ts → ...onents/src/core/NavigationFooter/style.ts b/packages/components/src/core/Footer/style.ts → ...onents/src/core/NavigationFooter/style.ts
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -45,8 +45,6 @@ export * from "./core/Dropdown";
 export { default as Dropdown } from "./core/Dropdown";
 export * from "./core/DropdownMenu";
 export { default as DropdownMenu } from "./core/DropdownMenu";
-export * from "./core/Footer";
-export { default as Footer } from "./core/Footer";
 export * from "./core/Icon";
 export { default as Icon } from "./core/Icon";
 export * from "./core/InputCheckbox";
@@ -79,6 +77,8 @@ export * from "./core/MenuItem";
 export { default as MenuItem } from "./core/MenuItem";
 export * from "./core/MenuSelect";
 export { default as MenuSelect } from "./core/MenuSelect";
+export * from "./core/NavigationFooter";
+export { default as Footer } from "./core/NavigationFooter";
 export * from "./core/NavigationJumpTo";
 export { default as NavigationJumpTo } from "./core/NavigationJumpTo";
 export * from "./core/Notification";