From b6708d657473487c3c89875794d850047ba09abf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Mon, 4 Apr 2022 19:19:44 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20la=20d=C3=A9sactivation=20sur=20le?=
 =?UTF-8?q?s=20Link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/source/design-system/typography/link.tsx | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/site/source/design-system/typography/link.tsx b/site/source/design-system/typography/link.tsx
index f243aa33a..662c4a67f 100644
--- a/site/source/design-system/typography/link.tsx
+++ b/site/source/design-system/typography/link.tsx
@@ -19,9 +19,9 @@ export const StyledLinkHover = css`
 			? theme.colors.bases.primary[100]
 			: theme.colors.bases.primary[800]};
 `
-export const StyledLink = styled.a<{ isDisabled?: boolean }>`
-	color: ${({ theme, isDisabled }) =>
-		isDisabled
+export const StyledLink = styled.a<{ $isDisabled?: boolean }>`
+	color: ${({ theme, $isDisabled }) =>
+		$isDisabled
 			? theme.colors.extended.grey[600]
 			: theme.colors.bases.primary[700]};
 	${({ theme }) =>
@@ -31,8 +31,8 @@ export const StyledLink = styled.a<{ isDisabled?: boolean }>`
 				color: ${theme.colors.extended.grey[100]};
 			}
 		`}
-	${({ isDisabled }) =>
-		isDisabled &&
+	${({ $isDisabled }) =>
+		$isDisabled &&
 		css`
 			cursor: default;
 		`}
@@ -43,20 +43,36 @@ export const StyledLink = styled.a<{ isDisabled?: boolean }>`
 	text-decoration: none;
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	&:hover {
-		${({ isDisabled }) => !isDisabled && StyledLinkHover}
+		${({ $isDisabled }) => !$isDisabled && StyledLinkHover}
 	}
 	&:focus-visible {
-		${FocusStyle}
+		${({ $isDisabled }) =>
+			$isDisabled
+				? css`
+						outline: none;
+				  `
+				: FocusStyle}
 	}
 `
 
 export const Link = React.forwardRef<
 	HTMLAnchorElement | HTMLButtonElement,
-	GenericButtonOrLinkProps & { children: React.ReactNode }
->(function Link(ariaButtonProps, forwardedRef) {
+	GenericButtonOrLinkProps & {
+		children: React.ReactNode
+		isDisabled?: boolean
+	}
+>(function Link(props, forwardedRef) {
+	const { isDisabled, ...ariaButtonProps } = props
 	const buttonOrLinkProps = useButtonOrLink(ariaButtonProps, forwardedRef)
 
-	return <StyledLink {...buttonOrLinkProps} />
+	return (
+		<StyledLink
+			{...buttonOrLinkProps}
+			$isDisabled={isDisabled}
+			tabIndex={isDisabled ? -1 : buttonOrLinkProps.tabIndex}
+			as={isDisabled ? 'span' : buttonOrLinkProps.as}
+		/>
+	)
 })
 
 export function useExternalLinkProps({
@@ -139,6 +155,8 @@ export function useButtonOrLink(
 		)
 	)
 
+	console.log(initialProps)
+
 	const buttonOrLinkProps = {
 		...initialProps,
 		...buttonProps,