From 1d0108ac807850fcb84332279b65d0ebe9bd1add Mon Sep 17 00:00:00 2001
From: Avior <florian.bouillon@delta-wings.net>
Date: Sun, 5 Sep 2021 14:02:46 +0200
Subject: [PATCH] Fixed button not sending to external link

Signed-off-by: Avior <florian.bouillon@delta-wings.net>
---
 src/dzeio/Button/Button.stories.tsx |   7 ++
 src/dzeio/Button/index.tsx          |   6 +-
 src/dzeio/Link/index.tsx            | 130 ++++++++++++++--------------
 3 files changed, 75 insertions(+), 68 deletions(-)

diff --git a/src/dzeio/Button/Button.stories.tsx b/src/dzeio/Button/Button.stories.tsx
index b6c8ef9..107b8b2 100644
--- a/src/dzeio/Button/Button.stories.tsx
+++ b/src/dzeio/Button/Button.stories.tsx
@@ -25,3 +25,10 @@ WithImg.args = {
 	href: '/pouet',
 	block: true
 }
+
+export const ExternalLinkButton = (args: any) => <Component {...args}>Button</Component>
+ExternalLinkButton.args = {
+	nomargintop: true,
+	href: 'https://example.com',
+	block: true
+}
diff --git a/src/dzeio/Button/index.tsx b/src/dzeio/Button/index.tsx
index 6c6bfe0..06b4446 100644
--- a/src/dzeio/Button/index.tsx
+++ b/src/dzeio/Button/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Link from 'next/link'
+import Link from '../Link'
 import { ColorType, IconProps } from '../interfaces'
 import { buildClassName } from '../Util'
 import Image from '../Image'
@@ -57,8 +57,8 @@ export default class Button extends React.Component<Props> {
 
 		if (this.props.href) {
 			return (
-				<Link href={this.props.href} as={this.props.as}>
-					<a onClick={this.props.onClick} className={buildClassName([classes], [css.disabled, this.props.disabled])}>{inner}</a>
+				<Link linkProps={{onClick: this.props.onClick}} hideIcon noStyle href={this.props.href} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
+					{inner}
 				</Link>
 			)
 		}
diff --git a/src/dzeio/Link/index.tsx b/src/dzeio/Link/index.tsx
index 88ebe6a..dcff89d 100644
--- a/src/dzeio/Link/index.tsx
+++ b/src/dzeio/Link/index.tsx
@@ -1,65 +1,65 @@
-import React from 'react'
-import NextLink from 'next/link'
-import { ExternalLink } from 'lucide-react'
-
-import css from './Link.module.styl'
-import { buildClassName } from '../Util'
-
-interface Props {
-	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
-	href: string
-	children?: React.ReactNode
-	className?: string
-	/**
-	 * Remove styling
-	 */
-	noStyle?: boolean
-
-	/**
-	 * Override external detection system
-	 */
-	external?: boolean
-
-	/**
-	 * force hiding the icon
-	 */
-	hideIcon?: boolean
-}
-
-export default class Link extends React.Component<Props> {
-
-	public render() {
-		const isExternal = this.props.href.startsWith('http')
-		const externalProps = this.props.external ? {
-			rel: 'noreferrer nofollow',
-			target: '_blank'
-		} : {}
-		
-		if (isExternal) {
-			// external link
-			return (
-				<a
-					{...this.props.linkProps}
-					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
-					href={this.props.href}
-					{...externalProps}
-				>
-					{this.props.children}
-					{(this.props.external !== false && !this.props.hideIcon) && (
-						<ExternalLink size={16} className={css.icon} />
-					)}
-				</a>
-			)
-		}
-		return (
-			<NextLink href={this.props.href}>
-				<a
-					{...this.props.linkProps}
-					{...externalProps}
-					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
-				>{this.props.children}</a>
-			</NextLink>
-		)
-	}
-
-}
+import React from 'react'
+import NextLink from 'next/link'
+import { ExternalLink } from 'lucide-react'
+
+import css from './Link.module.styl'
+import { buildClassName } from '../Util'
+
+interface Props {
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+	href: string
+	children?: React.ReactNode
+	className?: string
+	/**
+	 * Remove styling
+	 */
+	noStyle?: boolean
+
+	/**
+	 * Override external detection system
+	 */
+	external?: boolean
+
+	/**
+	 * force hiding the icon
+	 */
+	hideIcon?: boolean
+}
+
+export default class Link extends React.Component<Props> {
+
+	public render() {
+		const isExternal = this.props.href.startsWith('http')
+		const externalProps = this.props.external ?? isExternal ? {
+			rel: 'noreferrer nofollow',
+			target: '_blank'
+		} : {}
+
+		if (isExternal) {
+			// external link
+			return (
+				<a
+					{...this.props.linkProps}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
+					href={this.props.href}
+					{...externalProps}
+				>
+					{this.props.children}
+					{(this.props.external !== false && !this.props.hideIcon) && (
+						<ExternalLink size={16} className={css.icon} />
+					)}
+				</a>
+			)
+		}
+		return (
+			<NextLink href={this.props.href}>
+				<a
+					{...this.props.linkProps}
+					{...externalProps}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
+				>{this.props.children}</a>
+			</NextLink>
+		)
+	}
+
+}