refactor: Footer to match NavHeader

kadena-community · Aug 10, 2023 · 63deb05 · 63deb05
1 parent 38e1685
commit 63deb05
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 79 deletions.
diff --git a/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx b/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx
diff --git a/...ui/src/components/NavFooter/Footer.css.ts → ...src/components/NavFooter/NavFooter.css.ts b/...ui/src/components/NavFooter/Footer.css.ts → ...src/components/NavFooter/NavFooter.css.ts
diff --git a/...c/components/NavFooter/Footer.stories.tsx → ...omponents/NavFooter/NavFooter.stories.tsx b/...c/components/NavFooter/Footer.stories.tsx → ...omponents/NavFooter/NavFooter.stories.tsx
@@ -1,7 +1,8 @@
+import { Target } from './NavFooterLink';
+
 import { SystemIcon } from '@components/Icon';
 import { IconType } from '@components/Icon/IconWrapper';
 import { NavFooter } from '@components/NavFooter';
-import { Target } from '@components/NavFooter/FooterLink';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
@@ -10,7 +11,7 @@ const meta: Meta<{
   iconsCount: number;
   darkMode: boolean;
 }> = {
-  title: 'Navigation/Footer',
+  title: 'Navigation/NavFooter',
   argTypes: {
     darkMode: {
       control: {
@@ -87,7 +88,7 @@ type Story = StoryObj<{
 }>;
 
 export const Primary: Story = {
-  name: 'Footer',
+  name: 'NavFooter',
   args: {
     linksCount: 4,
     iconsCount: 3,
@@ -102,14 +103,8 @@ export const Primary: Story = {
         <NavFooter.Panel>
           {linkItems.map((item, index) => {
             return (
-              <NavFooter.Link key={index}>
-                {item.href !== undefined ? (
-                  <a href={item.href} target={item.target}>
-                    {item.title}
-                  </a>
-                ) : (
-                  <span>{item.title}</span>
-                )}
+              <NavFooter.Link key={index} href={item.href} target={item.target}>
+                {item.title}
               </NavFooter.Link>
             );
           })}

diff --git a/.../src/components/NavFooter/Footer.test.tsx → ...c/components/NavFooter/NavFooter.test.tsx b/.../src/components/NavFooter/Footer.test.tsx → ...c/components/NavFooter/NavFooter.test.tsx
@@ -3,7 +3,7 @@ import { NavFooter } from '@components/NavFooter';
 import { render } from '@testing-library/react';
 import React from 'react';
 
-describe('Footer', () => {
+describe('NavFooter', () => {
   test('renders correctly', () => {
     const menuLinks = [
       {
@@ -31,8 +31,8 @@ describe('Footer', () => {
         <NavFooter.Panel>
           {menuLinks.map((item, index) => {
             return (
-              <NavFooter.Link key={index}>
-                <a href={item.href}>{item.title}</a>
+              <NavFooter.Link key={index} href={item.href}>
+                {item.title}
               </NavFooter.Link>
             );
           })}
@@ -82,8 +82,8 @@ describe('Footer', () => {
         <NavFooter.Panel>
           {menuLinks.map((item, index) => {
             return (
-              <NavFooter.Link key={index}>
-                <a href={item.href}>{item.title}</a>
+              <NavFooter.Link key={index} href={item.href}>
+                {item.title}
               </NavFooter.Link>
             );
           })}

diff --git a/...ct-ui/src/components/NavFooter/Footer.tsx → ...ui/src/components/NavFooter/NavFooter.tsx b/...ct-ui/src/components/NavFooter/Footer.tsx → ...ui/src/components/NavFooter/NavFooter.tsx
@@ -1,14 +1,14 @@
-import { containerClass } from './Footer.css';
+import { containerClass } from './NavFooter.css';
 
 import { darkThemeClass } from '@theme/vars.css';
 import React, { FC } from 'react';
 
-export interface IFooterProps {
+export interface INavFooterContainerProps {
   children: React.ReactNode;
   darkMode?: boolean;
 }
 
-export const FooterContainer: FC<IFooterProps> = ({
+export const NavFooterContainer: FC<INavFooterContainerProps> = ({
   children,
   darkMode = false,
 }) => {

diff --git a/...components/NavFooter/FooterIconButton.tsx → ...ponents/NavFooter/NavFooterIconButton.tsx b/...components/NavFooter/FooterIconButton.tsx → ...ponents/NavFooter/NavFooterIconButton.tsx
@@ -1,17 +1,17 @@
 import { SystemIcon } from '..';
 
-import { iconButtonClass, iconTextClass } from './Footer.css';
+import { iconButtonClass, iconTextClass } from './NavFooter.css';
 
 import React, { FC } from 'react';
 
-export interface IFooterIconButtonProps
+export interface INavFooterIconButtonProps
   extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'> {
   icon: (typeof SystemIcon)[keyof typeof SystemIcon];
   onClick?: React.MouseEventHandler;
   text?: string;
 }
 
-export const FooterIconButton: FC<IFooterIconButtonProps> = ({
+export const NavFooterIconButton: FC<INavFooterIconButtonProps> = ({
   icon,
   onClick,
   text,

diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooterLink.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooterLink.tsx
@@ -0,0 +1,43 @@
+import { linkBoxClass, linkClass } from './NavFooter.css';
+
+import classNames from 'classnames';
+import React, { FC } from 'react';
+
+export type Target = '_self' | '_blank';
+export interface INavFooterLinkProps {
+  children: string;
+  href?: string;
+  target?: Target;
+}
+
+export const NavFooterLink: FC<INavFooterLinkProps> = ({
+  children,
+  href,
+  target,
+}) => {
+  return (
+    <div className={linkBoxClass} data-testid="kda-footer-link-item">
+      <span
+        className={classNames(linkClass, {
+          color: 'inherit',
+          textDecorationColor: 'inherit',
+        })}
+      >
+        {href !== undefined ? (
+          <a
+            style={{
+              color: 'inherit',
+              textDecorationColor: 'inherit',
+            }}
+            href={href}
+            target={target}
+          >
+            {children}
+          </a>
+        ) : (
+          <span>{children}</span>
+        )}
+      </span>
+    </div>
+  );
+};
diff --git a/.../src/components/NavFooter/FooterPanel.tsx → ...c/components/NavFooter/NavFooterPanel.tsx b/.../src/components/NavFooter/FooterPanel.tsx → ...c/components/NavFooter/NavFooterPanel.tsx
@@ -1,12 +1,12 @@
-import { footerPanel } from './Footer.css';
+import { footerPanel } from './NavFooter.css';
 
 import React, { FC } from 'react';
 
-export interface IFooterPanelProps {
+export interface INavFooterPanelProps {
   children: React.ReactNode;
 }
 
-export const FooterPanel: FC<IFooterPanelProps> = ({ children }) => {
+export const NavFooterPanel: FC<INavFooterPanelProps> = ({ children }) => {
   return (
     <div className={footerPanel} data-testid="kda-footer-panel">
       {children}

diff --git a/packages/libs/react-ui/src/components/NavFooter/index.ts b/packages/libs/react-ui/src/components/NavFooter/index.ts
@@ -1,31 +1,31 @@
-import type { IFooterProps } from './Footer';
-import { FooterContainer } from './Footer';
-import type { IFooterIconButtonProps } from './FooterIconButton';
-import { FooterIconButton } from './FooterIconButton';
-import type { IFooterLinkProps } from './FooterLink';
-import { FooterLink } from './FooterLink';
-import type { IFooterPanelProps } from './FooterPanel';
-import { FooterPanel } from './FooterPanel';
+import type { INavFooterContainerProps } from './NavFooter';
+import { NavFooterContainer } from './NavFooter';
+import type { INavFooterIconButtonProps } from './NavFooterIconButton';
+import { NavFooterIconButton } from './NavFooterIconButton';
+import type { INavFooterLinkProps } from './NavFooterLink';
+import { NavFooterLink } from './NavFooterLink';
+import type { INavFooterPanelProps } from './NavFooterPanel';
+import { NavFooterPanel } from './NavFooterPanel';
 
 import { FC } from 'react';
 
 export {
-  IFooterProps as INavFooterRootProps,
-  IFooterIconButtonProps as INavFooterIconButtonProps,
-  IFooterLinkProps as INavFooterLinkProps,
-  IFooterPanelProps as INavFooterPanelProps,
+  INavFooterContainerProps,
+  INavFooterIconButtonProps,
+  INavFooterLinkProps,
+  INavFooterPanelProps,
 };
 
 export interface INavFooterProps {
-  Root: FC<IFooterProps>;
-  Panel: FC<IFooterPanelProps>;
-  Link: FC<IFooterLinkProps>;
-  IconButton: FC<IFooterIconButtonProps>;
+  Root: FC<INavFooterContainerProps>;
+  Panel: FC<INavFooterPanelProps>;
+  Link: FC<INavFooterLinkProps>;
+  IconButton: FC<INavFooterIconButtonProps>;
 }
 
 export const NavFooter: INavFooterProps = {
-  Root: FooterContainer,
-  Panel: FooterPanel,
-  Link: FooterLink,
-  IconButton: FooterIconButton,
+  Root: NavFooterContainer,
+  Panel: NavFooterPanel,
+  Link: NavFooterLink,
+  IconButton: NavFooterIconButton,
 };