From 0e213fb3795b93756e00ef53cce40d3620d00d98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrgen=20Rudigier?= <juergen.rudigier@deptagency.com>
Date: Sat, 25 Mar 2023 11:13:14 +0100
Subject: [PATCH] feat: improve links

---
 src/components/Atoms/Link/Link.tsx            |  4 ++-
 src/components/Molecules/Button/Button.tsx    |  2 +-
 .../InteractionButton/InteractionButton.tsx   |  1 +
 .../RoundButton/RoundButton.stories.tsx       |  2 +-
 .../Molecules/RoundButton/RoundButton.tsx     | 30 ++++++++-----------
 .../Molecules/UserProfile/UserProfile.tsx     |  2 +-
 6 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/Atoms/Link/Link.tsx b/src/components/Atoms/Link/Link.tsx
index af82801..d6cb664 100644
--- a/src/components/Atoms/Link/Link.tsx
+++ b/src/components/Atoms/Link/Link.tsx
@@ -27,6 +27,8 @@ type TLink<T> = {
 	newTab?: boolean;
 } & Omit<T, 'className' | 'target' | 'rel'>;
 
+
+
 /*
  * Style
  */
@@ -42,7 +44,7 @@ const hoverStyle = 'hover:text-violet-700 hover:decoration-violet-200';
 /**
  * Link Component
  *
- * @param {string} as - HTML tag to render a link
+ * @param {string} component - Component to render a link (e.g. NextLink)
  * @param {string} href - provide a link reference (target url) as string for the 'a' tag
  * @param {ReactNode} children - Child Nodes
  *
diff --git a/src/components/Molecules/Button/Button.tsx b/src/components/Molecules/Button/Button.tsx
index f8f71bb..051a4e3 100644
--- a/src/components/Molecules/Button/Button.tsx
+++ b/src/components/Molecules/Button/Button.tsx
@@ -75,7 +75,7 @@ export const ButtonColorMap: Record<string, string> = {
 /**
  * Button component
  *
- * @param { string } as - HTML tag to render
+ * @param { string } component - Component to render a link (e.g. NextLink)
  * @param { string } size - text size options of this button (S, M, L)
  * @param { string } colorScheme - color scheme options of this button (slate, violet, gradient)
  * @param { string } icon - icon name to render
diff --git a/src/components/Molecules/InteractionButton/InteractionButton.tsx b/src/components/Molecules/InteractionButton/InteractionButton.tsx
index 71a1aa2..5217ba1 100644
--- a/src/components/Molecules/InteractionButton/InteractionButton.tsx
+++ b/src/components/Molecules/InteractionButton/InteractionButton.tsx
@@ -74,6 +74,7 @@ const InteractionButtonIconColorSchemeMap: Record<string, Record<string, string>
 
 /**
  * Typography for InteractionButton Component
+ * @param { string } component - Component to render a link (e.g. NextLink)
  * @param { buttonText } buttonText label of the button
  * @param { colorScheme } colorScheme of the Button: `pink`, `violet`, or `slate`
  * @param { iconName } iconName name of Icon -see Library
diff --git a/src/components/Molecules/RoundButton/RoundButton.stories.tsx b/src/components/Molecules/RoundButton/RoundButton.stories.tsx
index 99711ec..96f7eee 100644
--- a/src/components/Molecules/RoundButton/RoundButton.stories.tsx
+++ b/src/components/Molecules/RoundButton/RoundButton.stories.tsx
@@ -25,5 +25,5 @@ const Template: ComponentStory<typeof Component> = (args): JSX.Element => <Compo
 export const RoundButton = Template.bind({});
 RoundButton.args = {
 	icon: 'edit',
-	children: 'Button Round',
+	buttonLabel: 'Button Round',
 };
diff --git a/src/components/Molecules/RoundButton/RoundButton.tsx b/src/components/Molecules/RoundButton/RoundButton.tsx
index cbb2e40..4cb831f 100644
--- a/src/components/Molecules/RoundButton/RoundButton.tsx
+++ b/src/components/Molecules/RoundButton/RoundButton.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
+import React, { FC, ButtonHTMLAttributes } from 'react';
 
 import { Icon } from '../../Atoms/Icon';
 import { ButtonBaseStyle, ButtonColorMap } from '../Button';
@@ -7,11 +7,11 @@ import { ButtonBaseStyle, ButtonColorMap } from '../Button';
  * Type
  */
 
-type TRoundButton = {
+type TRoundButton<T> = {
 	/**
-	 * HTML tag to render a button (button, a)
+	 * HTML tag to render a button
 	 */
-	as?: 'button' | 'a';
+	component?: FC<T>;
 
 	/**
 	 * label for screenreaders
@@ -27,11 +27,7 @@ type TRoundButton = {
 	 * specify a Icon-name string from the IconLibrary
 	 */
 	icon?: string;
-};
-
-type HTMLButtonProps = TRoundButton & { as: 'button' } & ButtonHTMLAttributes<HTMLButtonElement>;
-type LinkButtonProps = TRoundButton & { as: 'a' } & AnchorHTMLAttributes<HTMLAnchorElement>;
-type TButtonProps = HTMLButtonProps | LinkButtonProps;
+} & Omit<T, 'className'>;
 
 /*
  * Style
@@ -43,7 +39,7 @@ export const RoundButtonColorMap: Record<string, string> = ButtonColorMap;
 /**
  * RoundButton Component
  *
- * @param {string} as - choose HTML Tag to render the RoundButton (button, a)
+ * @param {string} component - Component to render a link (e.g. NextLink)
  * @param {string} buttonLabel - label for screenreaders
  * @param {string} colorScheme - colorscheme for RoundButton background: slate, violet or gradient
  * @param {string} icon - specify a Icon-name string from the IconLibrary
@@ -51,14 +47,12 @@ export const RoundButtonColorMap: Record<string, string> = ButtonColorMap;
  *
  * @example <RoundButton buttonLabel="Mumble" as="button" colorScheme="violet" icon="mumble" />
  */
-
-export const RoundButton: FC<TButtonProps> = ({
-	as: Tag = 'button',
-	colorScheme = 'violet',
-	icon = 'mumble',
-	buttonLabel,
-	...props
-}) => {
+export function RoundButton<
+	T extends {
+		className?: string;
+	} = ButtonHTMLAttributes<HTMLElement>
+>({ component, colorScheme = 'violet', icon = 'mumble', buttonLabel, ...props }: TRoundButton<T>): JSX.Element {
+	const Tag = component || 'button';
 	const style = [...RoundButtonBaseStyle, RoundButtonColorMap[colorScheme]];
 
 	return (
diff --git a/src/components/Molecules/UserProfile/UserProfile.tsx b/src/components/Molecules/UserProfile/UserProfile.tsx
index 48e2d8c..7237058 100644
--- a/src/components/Molecules/UserProfile/UserProfile.tsx
+++ b/src/components/Molecules/UserProfile/UserProfile.tsx
@@ -102,7 +102,7 @@ export const UserProfile: FC<TUserProfile> = ({ size = 'M', border, href, userNa
 						<Image src={avatar || noAvatar} alt={userName} width={imgMap[size]} height={imgMap[size]} />
 					</div>
 					<div className="absolute -bottom-1 -right-1 md:-bottom-2 md:-right-2 sm:-bottom-4 sm:-right-4">
-						<RoundButton as="a" href={href} icon="edit" colorScheme="slate" buttonLabel={buttonLabel} />
+						<RoundButton icon="edit" colorScheme="slate" buttonLabel={buttonLabel} />
 					</div>
 				</div>
 			);