From 63deb05632489d05185ebe6503140eb9283e6b24 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 10 Aug 2023 11:01:21 +0200 Subject: [PATCH] refactor: Footer to match NavHeader --- .../src/components/NavFooter/FooterLink.tsx | 34 --------------- .../{Footer.css.ts => NavFooter.css.ts} | 0 ...oter.stories.tsx => NavFooter.stories.tsx} | 17 +++----- .../{Footer.test.tsx => NavFooter.test.tsx} | 10 ++--- .../NavFooter/{Footer.tsx => NavFooter.tsx} | 6 +-- ...IconButton.tsx => NavFooterIconButton.tsx} | 6 +-- .../components/NavFooter/NavFooterLink.tsx | 43 +++++++++++++++++++ .../{FooterPanel.tsx => NavFooterPanel.tsx} | 6 +-- .../src/components/NavFooter/index.ts | 40 ++++++++--------- 9 files changed, 83 insertions(+), 79 deletions(-) delete mode 100644 packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx rename packages/libs/react-ui/src/components/NavFooter/{Footer.css.ts => NavFooter.css.ts} (100%) rename packages/libs/react-ui/src/components/NavFooter/{Footer.stories.tsx => NavFooter.stories.tsx} (85%) rename packages/libs/react-ui/src/components/NavFooter/{Footer.test.tsx => NavFooter.test.tsx} (92%) rename packages/libs/react-ui/src/components/NavFooter/{Footer.tsx => NavFooter.tsx} (72%) rename packages/libs/react-ui/src/components/NavFooter/{FooterIconButton.tsx => NavFooterIconButton.tsx} (77%) create mode 100644 packages/libs/react-ui/src/components/NavFooter/NavFooterLink.tsx rename packages/libs/react-ui/src/components/NavFooter/{FooterPanel.tsx => NavFooterPanel.tsx} (52%) diff --git a/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx b/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx deleted file mode 100644 index 44b18c40e8d..00000000000 --- a/packages/libs/react-ui/src/components/NavFooter/FooterLink.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { linkBoxClass, linkClass } from './Footer.css'; - -import React, { FC } from 'react'; - -export type Target = '_self' | '_blank'; -export interface IFooterLinkProps { - children: React.ReactNode; -} - -export const FooterLink: FC = ({ children }) => { - const colorStyles = { - color: 'inherit', - textDecorationColor: 'inherit', - }; - - const clones = React.Children.map(children, (child) => { - return React.cloneElement( - child as React.ReactElement< - any, - string | React.JSXElementConstructor - >, - { - className: [linkClass], - style: colorStyles, - }, - ); - }); - - return ( -
- {clones} -
- ); -}; diff --git a/packages/libs/react-ui/src/components/NavFooter/Footer.css.ts b/packages/libs/react-ui/src/components/NavFooter/NavFooter.css.ts similarity index 100% rename from packages/libs/react-ui/src/components/NavFooter/Footer.css.ts rename to packages/libs/react-ui/src/components/NavFooter/NavFooter.css.ts diff --git a/packages/libs/react-ui/src/components/NavFooter/Footer.stories.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx similarity index 85% rename from packages/libs/react-ui/src/components/NavFooter/Footer.stories.tsx rename to packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx index dbb6c1fbaba..152b8d01773 100644 --- a/packages/libs/react-ui/src/components/NavFooter/Footer.stories.tsx +++ b/packages/libs/react-ui/src/components/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 = { {linkItems.map((item, index) => { return ( - - {item.href !== undefined ? ( - - {item.title} - - ) : ( - {item.title} - )} + + {item.title} ); })} diff --git a/packages/libs/react-ui/src/components/NavFooter/Footer.test.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooter.test.tsx similarity index 92% rename from packages/libs/react-ui/src/components/NavFooter/Footer.test.tsx rename to packages/libs/react-ui/src/components/NavFooter/NavFooter.test.tsx index 878d4435bec..93e3a85cbf0 100644 --- a/packages/libs/react-ui/src/components/NavFooter/Footer.test.tsx +++ b/packages/libs/react-ui/src/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', () => { {menuLinks.map((item, index) => { return ( - - {item.title} + + {item.title} ); })} @@ -82,8 +82,8 @@ describe('Footer', () => { {menuLinks.map((item, index) => { return ( - - {item.title} + + {item.title} ); })} diff --git a/packages/libs/react-ui/src/components/NavFooter/Footer.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx similarity index 72% rename from packages/libs/react-ui/src/components/NavFooter/Footer.tsx rename to packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx index 69f60c67fb6..dd331d2500e 100644 --- a/packages/libs/react-ui/src/components/NavFooter/Footer.tsx +++ b/packages/libs/react-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 = ({ +export const NavFooterContainer: FC = ({ children, darkMode = false, }) => { diff --git a/packages/libs/react-ui/src/components/NavFooter/FooterIconButton.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooterIconButton.tsx similarity index 77% rename from packages/libs/react-ui/src/components/NavFooter/FooterIconButton.tsx rename to packages/libs/react-ui/src/components/NavFooter/NavFooterIconButton.tsx index cfef763935a..df965b5133d 100644 --- a/packages/libs/react-ui/src/components/NavFooter/FooterIconButton.tsx +++ b/packages/libs/react-ui/src/components/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, 'color'> { icon: (typeof SystemIcon)[keyof typeof SystemIcon]; onClick?: React.MouseEventHandler; text?: string; } -export const FooterIconButton: FC = ({ +export const NavFooterIconButton: FC = ({ 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 new file mode 100644 index 00000000000..eb76347b1da --- /dev/null +++ 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 = ({ + children, + href, + target, +}) => { + return ( +
+ + {href !== undefined ? ( + + {children} + + ) : ( + {children} + )} + +
+ ); +}; diff --git a/packages/libs/react-ui/src/components/NavFooter/FooterPanel.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooterPanel.tsx similarity index 52% rename from packages/libs/react-ui/src/components/NavFooter/FooterPanel.tsx rename to packages/libs/react-ui/src/components/NavFooter/NavFooterPanel.tsx index a47f6bfff2c..9fd9dd0e87c 100644 --- a/packages/libs/react-ui/src/components/NavFooter/FooterPanel.tsx +++ b/packages/libs/react-ui/src/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 = ({ children }) => { +export const NavFooterPanel: FC = ({ children }) => { return (
{children} diff --git a/packages/libs/react-ui/src/components/NavFooter/index.ts b/packages/libs/react-ui/src/components/NavFooter/index.ts index c9b951f338c..35614c7aa3a 100644 --- 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; - Panel: FC; - Link: FC; - IconButton: FC; + Root: FC; + Panel: FC; + Link: FC; + IconButton: FC; } export const NavFooter: INavFooterProps = { - Root: FooterContainer, - Panel: FooterPanel, - Link: FooterLink, - IconButton: FooterIconButton, + Root: NavFooterContainer, + Panel: NavFooterPanel, + Link: NavFooterLink, + IconButton: NavFooterIconButton, };