Fixed button not sending to external link

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

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
+}

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}>
+				<Link linkProps={{onClick: this.props.onClick}} hideIcon noStyle href={this.props.href} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
-					<a onClick={this.props.onClick} className={buildClassName([classes], [css.disabled, this.props.disabled])}>{inner}</a>
+					{inner}
 				</Link>
 			)
 		}

src/dzeio/Link/index.tsx

@@ -1,65 +1,65 @@
-import React from 'react'
+import React from 'react'
-import NextLink from 'next/link'
+import NextLink from 'next/link'
-import { ExternalLink } from 'lucide-react'
+import { ExternalLink } from 'lucide-react'
-
+
-import css from './Link.module.styl'
+import css from './Link.module.styl'
-import { buildClassName } from '../Util'
+import { buildClassName } from '../Util'
-
+
-interface Props {
+interface Props {
-	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
-	href: string
+	href: string
-	children?: React.ReactNode
+	children?: React.ReactNode
-	className?: string
+	className?: string
-	/**
+	/**
-	 * Remove styling
+	 * Remove styling
-	 */
+	 */
-	noStyle?: boolean
+	noStyle?: boolean
-
+
-	/**
+	/**
-	 * Override external detection system
+	 * Override external detection system
-	 */
+	 */
-	external?: boolean
+	external?: boolean
-
+
-	/**
+	/**
-	 * force hiding the icon
+	 * force hiding the icon
-	 */
+	 */
-	hideIcon?: boolean
+	hideIcon?: boolean
-}
+}
-
+
-export default class Link extends React.Component<Props> {
+export default class Link extends React.Component<Props> {
-
+
-	public render() {
+	public render() {
-		const isExternal = this.props.href.startsWith('http')
+		const isExternal = this.props.href.startsWith('http')
-		const externalProps = this.props.external ? {
+		const externalProps = this.props.external ?? isExternal ? {
-			rel: 'noreferrer nofollow',
+			rel: 'noreferrer nofollow',
-			target: '_blank'
+			target: '_blank'
-		} : {}
+		} : {}
-		
+
-		if (isExternal) {
+		if (isExternal) {
-			// external link
+			// external link
-			return (
+			return (
-				<a
+				<a
-					{...this.props.linkProps}
+					{...this.props.linkProps}
-					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
-					href={this.props.href}
+					href={this.props.href}
-					{...externalProps}
+					{...externalProps}
-				>
+				>
-					{this.props.children}
+					{this.props.children}
-					{(this.props.external !== false && !this.props.hideIcon) && (
+					{(this.props.external !== false && !this.props.hideIcon) && (
-						<ExternalLink size={16} className={css.icon} />
+						<ExternalLink size={16} className={css.icon} />
-					)}
+					)}
-				</a>
+				</a>
-			)
+			)
-		}
+		}
-		return (
+		return (
-			<NextLink href={this.props.href}>
+			<NextLink href={this.props.href}>
-				<a
+				<a
-					{...this.props.linkProps}
+					{...this.props.linkProps}
-					{...externalProps}
+					{...externalProps}
-					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
-				>{this.props.children}</a>
+				>{this.props.children}</a>
-			</NextLink>
+			</NextLink>
-		)
+		)
-	}
+	}
-
+
-}
+}