feat: improve naviButton

ost-cas-fee-adv-22-23 · Mar 22, 2023 · 333c51a · 333c51a
1 parent 101550a
commit 333c51a
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 33 deletions.
diff --git a/src/components/Atoms/Link/Link.tsx b/src/components/Atoms/Link/Link.tsx
@@ -48,6 +48,7 @@ export function Link<
 		className?: string;
 		rel?: string;
 		target?: string;
+		title?: string;
 	} = LinkHTMLAttributes<HTMLElement>
 >({ children, as, ...props }: TLink<T>): JSX.Element {
 	const Tag = as || 'a';

diff --git a/src/components/Molecules/Button/Button.tsx b/src/components/Molecules/Button/Button.tsx
@@ -88,6 +88,7 @@ export function Button<
 	T extends {
 		className?: string;
 		type?: 'button' | 'submit' | 'reset';
+		title?: string;
 	} = ButtonHTMLAttributes<HTMLElement>
 >({ children, as, colorScheme = 'violet', size = 'M', icon = 'mumble', ...props }: TButton<T>): JSX.Element {
 	const Tag = as || 'button';

diff --git a/src/components/Molecules/InteractionButton/InteractionButton.tsx b/src/components/Molecules/InteractionButton/InteractionButton.tsx
@@ -87,6 +87,7 @@ export function InteractionButton<
 	T extends {
 		className?: string;
 		type?: 'button' | 'submit' | 'reset';
+		title?: string;
 	} = ButtonHTMLAttributes<HTMLElement>
 >({ as, colorScheme, buttonText, iconName, isActive = false, ...props }: TInteractionButton<T>): JSX.Element {
 	const Tag = as || 'button';

diff --git a/src/components/Molecules/Navi/Navi.stories.tsx b/src/components/Molecules/Navi/Navi.stories.tsx
@@ -17,13 +17,31 @@ export const Navi = Template.bind({});
 Navi.args = {
 	children: (
 		<>
-			<NaviButton as="a" href="/" icon="settings" title="Settings">
+			<NaviButton
+				onClick={(): void => {
+					window.location.href = '/';
+				}}
+				icon="settings"
+				title="Settings"
+			>
 				Settings
 			</NaviButton>
-			<NaviButton as="a" href="/" icon="settings" title="Settings">
+			<NaviButton
+				onClick={(): void => {
+					window.location.href = '/';
+				}}
+				icon="settings"
+				title="Settings"
+			>
 				Settings
 			</NaviButton>
-			<NaviButton as="a" href="/" icon="settings" title="Settings">
+			<NaviButton
+				onClick={(): void => {
+					window.location.href = '/';
+				}}
+				icon="settings"
+				title="Settings"
+			>
 				Settings
 			</NaviButton>
 		</>

diff --git a/src/components/Molecules/Navi/NaviButton.stories.tsx b/src/components/Molecules/Navi/NaviButton.stories.tsx
@@ -20,7 +20,6 @@ const Template: ComponentStory<typeof Component> = (args): JSX.Element => <Compo
 export const NaviButton = Template.bind({});
 
 NaviButton.args = {
-	href: '/',
 	icon: 'settings',
 	title: 'Settings',
 	children: 'Settings',

diff --git a/src/components/Molecules/Navi/NaviButton.tsx b/src/components/Molecules/Navi/NaviButton.tsx
@@ -1,24 +1,16 @@
-import React, { FC, ReactNode, HTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, Children } from 'react';
+import React, { FC, ReactNode, ButtonHTMLAttributes, Children } from 'react';
 import { Icon } from '../../Atoms/Icon';
 import { Label } from '../../Atoms/Label';
 
-/*
- * Settings
- */
-
-const possibleNaviButtonTags = ['button', 'a'] as const;
-
 /*
  * Type
  */
 
-type TNaviButtonTag = (typeof possibleNaviButtonTags)[number];
-
-type TNaviButton = {
+type TNaviButton<T> = {
 	/**
 	 * Choose a HTML tag as Navigation Button:
 	 */
-	as: TNaviButtonTag;
+	as?: FC<T>;
 	/**
 	 * Icon name from the Icon library
 	 */
@@ -27,20 +19,7 @@ type TNaviButton = {
 	 * React Node children: Buttontext
 	 */
 	children: ReactNode;
-};
-/**
- * If the button is rendered as button tag, use this one
- */
-type HTMLButtonProps = TNaviButton &
-	HTMLAttributes<HTMLElement> & { as: 'button' } & ButtonHTMLAttributes<HTMLButtonElement>;
-/**
- * LinkButtonProps: if the button is rendered as a tag, use this
- */
-type LinkButtonProps = TNaviButton & HTMLAttributes<HTMLElement> & { as: 'a' } & AnchorHTMLAttributes<HTMLAnchorElement>;
-/**
- * generic: LinkButton or HTML Button props
- */
-type NaviButtonProps = LinkButtonProps | HTMLButtonProps;
+} & Omit<T, 'className'>;
 
 /*
  * Styles
@@ -54,8 +33,19 @@ const style = [
 	'bg-violet-600 hover:bg-violet-700',
 	'group',
 ];
+export function NaviButton<
+	T extends {
+		className?: string;
+		type?: 'button' | 'submit' | 'reset';
+		title?: string;
+	} = ButtonHTMLAttributes<HTMLElement>
+>({ children, as, icon, ...props }: TNaviButton<T>): JSX.Element {
+	const Tag = as || 'button';
+
+	if (Tag === 'button') {
+		props.type = 'button';
+	}
 
-export const NaviButton: FC<NaviButtonProps> = ({ as: Tag = 'a', children, icon, ...props }) => {
 	if (Children.count(children) === 1 && typeof children === 'string') {
 		children = (
 			<span className="leading-none sm:sr-only">

diff --git a/src/templates/Snippets/Header/Header.tsx b/src/templates/Snippets/Header/Header.tsx
@@ -90,18 +90,29 @@ export const Header: FC<THeader> = ({ user }) => {
 						</a>
 						<nav className="">
 							<Navi>
-								<NaviButton as="a" icon="" href={user.profileLink} title="My Mumble Profile">
+								<NaviButton
+									icon=""
+									onClick={(): void => {
+										window.location.href = user.profileLink;
+									}}
+									title="My Mumble Profile"
+								>
 									<UserProfile
 										userName={user.userName}
 										avatar={user.avatar}
 										size="S"
 										buttonLabel="My Mumble Profile"
 									/>
 								</NaviButton>
-								<NaviButton as="button" icon="settings" onClick={handleSettingsModalClick}>
+								<NaviButton icon="settings" onClick={handleSettingsModalClick}>
 									Settings
 								</NaviButton>
-								<NaviButton as="a" icon="logout" href="/logout">
+								<NaviButton
+									icon="logout"
+									onClick={(): void => {
+										window.location.href = '/logout';
+									}}
+								>
 									Log out
 								</NaviButton>
 							</Navi>