From a553c30c012af0a92eb6210ec891e69326d453c4 Mon Sep 17 00:00:00 2001
From: Benjamin Arias <benjamin.j.arias@gmail.com>
Date: Fri, 31 Mar 2023 17:38:00 +0200
Subject: [PATCH] feat: Ajoute fix permettant de conserver le comportement des
 cards

---
 site/source/design-system/card/Card.tsx       | 38 +++++++++++++++++--
 site/source/design-system/card/SmallCard.tsx  |  2 +-
 site/source/design-system/typography/link.tsx |  1 +
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx
index d76f29383..c9cd71e5d 100644
--- a/site/source/design-system/card/Card.tsx
+++ b/site/source/design-system/card/Card.tsx
@@ -1,6 +1,6 @@
 import { AriaButtonProps } from '@react-types/button'
 import React, { ComponentPropsWithRef, ReactHTML, useRef } from 'react'
-import { Link as BaseLink } from 'react-router-dom'
+import { Link as BaseLink, useNavigate } from 'react-router-dom'
 import styled, { css } from 'styled-components'
 
 import { StyledButton } from '@/design-system/buttons/Button'
@@ -18,6 +18,9 @@ type GenericButtonOrLinkProps = (
 	| AriaButtonProps<'button'>
 ) & {
 	openInSameWindow?: true
+	to: {
+		pathname: string
+	}
 }
 
 export type GenericCardProps = {
@@ -55,17 +58,31 @@ export function Card(props: CardProps) {
 	const titleProps = getTitleProps(title, 'h3')
 	const linkProps = useExternalLinkProps(ariaButtonProps)
 
+	const navigate = useNavigate()
+
 	const buttonOrLinkProps = useButtonOrLink(ariaButtonProps, ref)
 	// @ts-ignore
 	delete buttonOrLinkProps.title
 
+	const handleClick = () => {
+		if (onClick) {
+			onClick()
+		}
+		navigate(
+			(
+				buttonOrLinkProps as typeof buttonOrLinkProps & {
+					to: { pathname: string }
+				}
+			).to.pathname || ''
+		)
+	}
+
 	return (
 		<CardContainer
 			$compact={compact}
 			tabIndex={tabIndex}
-			onClick={onClick}
+			onClick={handleClick}
 			className={className}
-			aria-label={props?.['aria-label']}
 		>
 			{icon && <IconContainer>{icon}</IconContainer>}
 			{title &&
@@ -90,6 +107,7 @@ export function Card(props: CardProps) {
 					$color="primary"
 					{...buttonOrLinkProps}
 					role={role || buttonOrLinkProps?.role}
+					tabIndex={undefined}
 				>
 					{ctaLabel}
 					{linkProps.external && <NewWindowLinkIcon />}
@@ -132,6 +150,14 @@ const CardButton = styled(StyledButton)`
 	@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
 		width: initial;
 	}
+
+	&::before {
+		content: '';
+		inset: 0;
+		box-sizing: inherit;
+		z-index: 1;
+		position: absolute;
+	}
 `
 
 const IconContainer = styled.div`
@@ -146,6 +172,7 @@ export const CardContainer = styled.div<{
 	display: flex;
 	width: 100%;
 	height: 100%;
+	position: relative;
 	text-decoration: none;
 	flex-direction: column;
 	align-items: center;
@@ -161,6 +188,11 @@ export const CardContainer = styled.div<{
 		box-shadow: ${({ theme, $inert }) =>
 			!$inert &&
 			(theme.darkMode ? theme.elevationsDarkMode[3] : theme.elevations[3])};
+		background-color: ${({ theme, $inert }) =>
+			!$inert &&
+			(theme.darkMode
+				? theme.colors.extended.dark[500]
+				: theme.colors.bases.primary[100])};
 	}
 	padding: ${({ theme: { spacings }, $compact = false }) =>
 		$compact
diff --git a/site/source/design-system/card/SmallCard.tsx b/site/source/design-system/card/SmallCard.tsx
index f228135bd..c64aba187 100644
--- a/site/source/design-system/card/SmallCard.tsx
+++ b/site/source/design-system/card/SmallCard.tsx
@@ -42,7 +42,7 @@ export function SmallCard({
 						margin: 0;
 					`}
 					{...titleProps}
-					as="p"
+					as="span"
 				>
 					{titleProps.children}
 					{linkProps.external && <NewWindowLinkIcon />}
diff --git a/site/source/design-system/typography/link.tsx b/site/source/design-system/typography/link.tsx
index c48051525..54395ec59 100644
--- a/site/source/design-system/typography/link.tsx
+++ b/site/source/design-system/typography/link.tsx
@@ -1,6 +1,7 @@
 import { useButton } from '@react-aria/button'
 import { AriaButtonProps } from '@react-types/button'
 import React, {
+	CSSProperties,
 	ComponentProps,
 	ComponentPropsWithRef,
 	ForwardedRef,