From fdde74bb8e99f15efea0a1e3948dc39050af7659 Mon Sep 17 00:00:00 2001
From: Jeremy <jeremyasuncion808@gmail.com>
Date: Wed, 30 Oct 2024 10:28:44 -0700
Subject: [PATCH] refactor(navigationfooter): rename to NavigationFooter

---
 .../index.stories.tsx                         | 69 ++++++++++---------
 .../{Footer => NavigationFooter}/index.tsx    | 15 ++--
 .../{Footer => NavigationFooter}/style.ts     |  0
 packages/components/src/index.ts              |  4 +-
 4 files changed, 45 insertions(+), 43 deletions(-)
 rename packages/components/src/core/{Footer => NavigationFooter}/index.stories.tsx (67%)
 rename packages/components/src/core/{Footer => NavigationFooter}/index.tsx (89%)
 rename packages/components/src/core/{Footer => NavigationFooter}/style.ts (100%)

diff --git a/packages/components/src/core/Footer/index.stories.tsx b/packages/components/src/core/NavigationFooter/index.stories.tsx
similarity index 67%
rename from packages/components/src/core/Footer/index.stories.tsx
rename to packages/components/src/core/NavigationFooter/index.stories.tsx
index f002bcbf..164d0fd5 100644
--- a/packages/components/src/core/Footer/index.stories.tsx
+++ b/packages/components/src/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,22 +33,20 @@ 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}>
@@ -54,20 +54,23 @@ export default {
       </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/packages/components/src/core/Footer/index.tsx b/packages/components/src/core/NavigationFooter/index.tsx
similarity index 89%
rename from packages/components/src/core/Footer/index.tsx
rename to packages/components/src/core/NavigationFooter/index.tsx
index ed848c6b..4c07e155 100644
--- a/packages/components/src/core/Footer/index.tsx
+++ b/packages/components/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,7 +41,7 @@ function groupArray<T>(array: T[], groupSize: number): T[][] {
   return groups;
 }
 
-export default function Footer({
+export default function NavigationFooter({
   logo,
   images,
   navItems,
@@ -50,7 +49,7 @@ export default function Footer({
   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 b/packages/components/src/core/NavigationFooter/style.ts
similarity index 100%
rename from packages/components/src/core/Footer/style.ts
rename to packages/components/src/core/NavigationFooter/style.ts
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 007ebff7..2e6d6b58 100644
--- 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";