Merge pull request #80 from Giveth/remove-all-a-tags

change LinkButtons to span

Author: alireza-sharifpour

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.0",
+	"version": "1.11.1",
 	"files": [
 		"/lib"
 	],

src/components/buttonLinks/ButtonLink.tsx

@@ -5,7 +5,7 @@ import { brandColors, neutralColors } from '../../common/colors';
 import { ButtonText } from '../typography/ButtonText';
 import { IButtonLinkContainerProps, IButtonLinkProps } from './type';
 
-const ButtonLinkContainer = styled.a<IButtonLinkContainerProps>`
+const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 	border: none;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '24px' : '16px')} 24px;
@@ -134,15 +134,15 @@ export const ButtonLink: FC<IButtonLinkProps> = forwardRef(
 			target,
 			className,
 			href,
-			onClick,
+			isExternal,
 		},
 		ref,
 	) => {
 		return (
 			<ButtonLinkContainer
 				ref={ref as any}
 				href={href}
-				onClick={onClick}
+				as={isExternal ? 'a' : 'span'}
 				target={target}
 				linkType={linkType}
 				disabled={disabled}

src/components/buttonLinks/OutlineButtonLink.tsx

@@ -5,7 +5,7 @@ import { brandColors } from '../../common/colors';
 import { ButtonText } from '../typography/ButtonText';
 import { IButtonLinkContainerProps, IButtonLinkProps } from './type';
 
-const ButtonLinkContainer = styled.a<IButtonLinkContainerProps>`
+const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 	border: 2px solid;
 	border-radius: 48px;
 	padding: ${props => (props.size === 'large' ? '22px' : '14px')} 24px;
@@ -87,20 +87,20 @@ export const OutlineLinkButton: FC<IButtonLinkProps> = forwardRef(
 			href,
 			target,
 			className,
-			onClick,
+			isExternal,
 		},
 		ref,
 	) => {
 		return (
 			<ButtonLinkContainer
 				ref={ref as any}
 				href={href}
-				onClick={onClick}
 				target={target}
 				linkType={linkType}
 				size={size}
 				disabled={disabled}
 				className={className}
+				as={isExternal ? 'a' : 'span'}
 			>
 				<ButtonText as='span' size={size}>
 					{label}

src/components/buttonLinks/type.ts

@@ -9,6 +9,7 @@ export interface IButtonLinkContainerProps {
 		| 'texty-secondary';
 	size?: 'small' | 'medium' | 'large';
 	disabled?: boolean;
+	isExternal?: boolean;
 }
 
 export interface IButtonLinkProps

src/components/typography/ButtonText.tsx

@@ -4,7 +4,7 @@ export interface IButtonTextProps {
 	size?: 'small' | 'medium' | 'large';
 }
 
-export const ButtonText = styled.a<IButtonTextProps>`
+export const ButtonText = styled.span<IButtonTextProps>`
 	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
 	text-transform: uppercase;