From 7cea51ed7b214a5b921c0c5e621c6d3838cd6c2c Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 17 Jul 2023 21:46:34 +0330
Subject: [PATCH] fix: use @docusaurus/Link component for CTA links

---
 .../CallToActionButton/CallToActionButton.tsx | 38 +++++++------------
 .../components/mdx/HeroAction/HeroAction.scss |  2 +
 .../components/mdx/HeroAction/HeroAction.tsx  |  7 ++--
 3 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx
index 7307736..cd477ec 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx
@@ -1,26 +1,16 @@
-import {
-  Button,
-  ButtonProps,
-  Typography,
-  TypographyProps,
-} from '@acid-info/lsd-react'
+import { Button, ButtonProps, Typography } from '@acid-info/lsd-react'
+import Link, { Props } from '@docusaurus/Link'
 import clsx from 'clsx'
 import React from 'react'
 import './CallToActionButton.scss'
 
-export type CallToActionButtonProps = Omit<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  'title'
-> & {
+export type CallToActionButtonProps = Props & {
   href?: string
   size?: ButtonProps['size']
   variant?: ButtonProps['variant']
 }
 
-const LinkElement = Typography as React.FC<TypographyProps & { component: 'a' }>
-
 export const CallToActionButton: React.FC<CallToActionButtonProps> = ({
-  href,
   className,
   variant = 'filled',
   size = 'large',
@@ -28,17 +18,15 @@ export const CallToActionButton: React.FC<CallToActionButtonProps> = ({
   ...props
 }) => {
   return (
-    <LinkElement
-      className={clsx('mdx-cta-button', className)}
-      variant={size === 'large' ? 'label1' : 'label2'}
-      component="a"
-      href={href}
-      target={'_blank'}
-      {...(props as any)}
-    >
-      <Button size={size} variant={variant}>
-        {children}
-      </Button>
-    </LinkElement>
+    <Link className={clsx('mdx-cta-button', className)} {...(props as any)}>
+      <Typography
+        component="span"
+        variant={size === 'large' ? 'label1' : 'label2'}
+      >
+        <Button size={size} variant={variant}>
+          {children}
+        </Button>
+      </Typography>
+    </Link>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.scss
index 73a83cb..f477a58 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.scss
@@ -18,6 +18,8 @@
 
 @include utils.responsive('lg', 'down') {
   .mdx-hero-action {
+    text-decoration: none !important;
+
     button {
       padding: 6px 12px !important;
     }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.tsx
index 52d3f7f..d0cd513 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.tsx
@@ -1,9 +1,10 @@
 import { Button, ButtonProps, Typography } from '@acid-info/lsd-react'
+import Link, { Props } from '@docusaurus/Link'
 import clsx from 'clsx'
 import React from 'react'
 import './HeroAction.scss'
 
-export type HeroActionProps = React.HTMLAttributes<HTMLAnchorElement> & {
+export type HeroActionProps = Props & {
   variant?: ButtonProps['variant']
   size?: 'medium' | 'large'
 }
@@ -16,7 +17,7 @@ export const HeroAction: React.FC<HeroActionProps> = ({
   ...props
 }) => {
   return (
-    <a
+    <Link
       className={clsx(className, 'mdx-hero-action', `mdx-hero-action--${size}`)}
       {...props}
     >
@@ -29,6 +30,6 @@ export const HeroAction: React.FC<HeroActionProps> = ({
           {children}
         </Typography>
       </Button>
-    </a>
+    </Link>
   )
 }