From 8f9a492c596e96a0c95368bfed7c40b826178d7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Val=C3=A8re=20Pique?= <valere.pique@sg.social.gouv.fr>
Date: Thu, 10 Jul 2025 13:11:57 +0200
Subject: [PATCH 1/3] feat: add html attributes to cards

---
 src/Card.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/Card.tsx b/src/Card.tsx
index 5d604ebc4..1c5dc3c90 100644
--- a/src/Card.tsx
+++ b/src/Card.tsx
@@ -4,11 +4,10 @@ import React, {
     type ReactNode,
     type CSSProperties,
     DetailedHTMLProps,
-    ImgHTMLAttributes
+    ImgHTMLAttributes,
+    ReactHTMLElement
 } from "react";
 import { symToStr } from "tsafe/symToStr";
-import { assert } from "tsafe/assert";
-import type { Equals } from "tsafe";
 
 import type { FrIconClassName, RiIconClassName } from "./fr/generatedFromCss/classNames";
 import { fr } from "./fr";
@@ -62,9 +61,11 @@ export type CardProps = {
         >
     >;
     style?: CSSProperties;
+    nativeDivElement?: React.HTMLAttributes<HTMLDivElement>;
 } & (CardProps.EnlargedLink | CardProps.NotEnlargedLink) &
     (CardProps.Horizontal | CardProps.Vertical) &
-    (CardProps.WithImageLink | CardProps.WithImageComponent | CardProps.WithoutImage);
+    (CardProps.WithImageLink | CardProps.WithImageComponent | CardProps.WithoutImage) &
+    React.HTMLAttributes<HTMLDivElement>;
 
 export namespace CardProps {
     export type EnlargedLink = {
@@ -146,11 +147,10 @@ export const Card = memo(
             grey = false,
             iconId,
             style,
+            nativeDivElement = {},
             ...rest
         } = props;
 
-        assert<Equals<keyof typeof rest, never>>();
-
         const id = useAnalyticsId({
             "defaultIdPrefix": "fr-card",
             "explicitlyProvidedId": props_id
@@ -161,6 +161,7 @@ export const Card = memo(
         return (
             <div
                 id={id}
+                {...nativeDivElement}
                 className={cx(
                     fr.cx(
                         "fr-card",

From a2f959b1f1d8babc203d6ef1ec084f48fcca3d1e Mon Sep 17 00:00:00 2001
From: Dylan Decrulle <81740200+ddecrulle@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:28:20 +0200
Subject: [PATCH 2/3] review

---
 src/Card.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Card.tsx b/src/Card.tsx
index 1c5dc3c90..a4f35e53d 100644
--- a/src/Card.tsx
+++ b/src/Card.tsx
@@ -3,9 +3,8 @@ import React, {
     forwardRef,
     type ReactNode,
     type CSSProperties,
-    DetailedHTMLProps,
-    ImgHTMLAttributes,
-    ReactHTMLElement
+    type DetailedHTMLProps,
+    type ImgHTMLAttributes
 } from "react";
 import { symToStr } from "tsafe/symToStr";
 
@@ -15,6 +14,7 @@ import type { RegisteredLinkProps } from "./link";
 import { getLink } from "./link";
 import { cx } from "./tools/cx";
 import { useAnalyticsId } from "./tools/useAnalyticsId";
+import { assert, type Equals } from "tsafe/assert";
 
 //https://main--ds-gouv.netlify.app/example/component/card/
 export type CardProps = {
@@ -61,12 +61,10 @@ export type CardProps = {
         >
     >;
     style?: CSSProperties;
-    nativeDivElement?: React.HTMLAttributes<HTMLDivElement>;
+    nativeDivElement?: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 } & (CardProps.EnlargedLink | CardProps.NotEnlargedLink) &
     (CardProps.Horizontal | CardProps.Vertical) &
-    (CardProps.WithImageLink | CardProps.WithImageComponent | CardProps.WithoutImage) &
-    React.HTMLAttributes<HTMLDivElement>;
-
+    (CardProps.WithImageLink | CardProps.WithImageComponent | CardProps.WithoutImage);
 export namespace CardProps {
     export type EnlargedLink = {
         enlargeLink: true;
@@ -147,10 +145,12 @@ export const Card = memo(
             grey = false,
             iconId,
             style,
-            nativeDivElement = {},
+            nativeDivElement,
             ...rest
         } = props;
 
+        assert<Equals<keyof typeof rest, never>>();
+
         const id = useAnalyticsId({
             "defaultIdPrefix": "fr-card",
             "explicitlyProvidedId": props_id

From 9e6cab53fd40375c5bfd0d3b8841acd8699510d9 Mon Sep 17 00:00:00 2001
From: Dylan Decrulle <81740200+ddecrulle@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:32:18 +0200
Subject: [PATCH 3/3] rename `nativeDivElement` -> `nativeDivProps`

---
 src/Card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Card.tsx b/src/Card.tsx
index a4f35e53d..804ef5433 100644
--- a/src/Card.tsx
+++ b/src/Card.tsx
@@ -61,7 +61,7 @@ export type CardProps = {
         >
     >;
     style?: CSSProperties;
-    nativeDivElement?: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    nativeDivProps?: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 } & (CardProps.EnlargedLink | CardProps.NotEnlargedLink) &
     (CardProps.Horizontal | CardProps.Vertical) &
     (CardProps.WithImageLink | CardProps.WithImageComponent | CardProps.WithoutImage);
@@ -145,7 +145,7 @@ export const Card = memo(
             grey = false,
             iconId,
             style,
-            nativeDivElement,
+            nativeDivProps,
             ...rest
         } = props;
 
@@ -161,7 +161,7 @@ export const Card = memo(
         return (
             <div
                 id={id}
-                {...nativeDivElement}
+                {...nativeDivProps}
                 className={cx(
                     fr.cx(
                         "fr-card",