Merge branch 'main' into feature/consent-banner

Author: lsagetlethias

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.47.0",
+    "version": "0.48.0",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",

src/Footer.tsx

@@ -183,9 +183,10 @@ export const Footer = memo(
                                 )}
                             >
                                 {linkList.map(
-                                    column =>
+                                    (column, columnIndex) =>
                                         column !== undefined && (
                                             <div
+                                                key={`fr-footer__top-cat-${columnIndex}`}
                                                 className={fr.cx(
                                                     "fr-col-12",
                                                     "fr-col-sm-3",
@@ -198,18 +199,22 @@ export const Footer = memo(
                                                     </h3>
                                                 )}
                                                 <ul className={fr.cx("fr-footer__top-list")}>
-                                                    {column?.links.map(linkItem => (
-                                                        <li>
-                                                            <Link
-                                                                {...linkItem?.linkProps}
-                                                                className={fr.cx(
-                                                                    "fr-footer__top-link"
-                                                                )}
+                                                    {column?.links.map(
+                                                        (linkItem, linkItemIndex) => (
+                                                            <li
+                                                                key={`fr-footer__top-link-${linkItemIndex}`}
                                                             >
-                                                                {linkItem?.text}
-                                                            </Link>
-                                                        </li>
-                                                    ))}
+                                                                <Link
+                                                                    {...linkItem?.linkProps}
+                                                                    className={fr.cx(
+                                                                        "fr-footer__top-link"
+                                                                    )}
+                                                                >
+                                                                    {linkItem?.text}
+                                                                </Link>
+                                                            </li>
+                                                        )
+                                                    )}
                                                 </ul>
                                             </div>
                                         )

src/Tile.tsx

@@ -15,6 +15,8 @@ export type TileProps = {
     desc?: ReactNode;
     imageUrl?: string;
     imageAlt?: string;
+    imageWidth?: string | number;
+    imageHeight?: string | number;
     grey?: boolean;
 
     /** make the whole tile clickable */
@@ -39,6 +41,8 @@ export const Tile = memo(
             desc,
             imageUrl,
             imageAlt,
+            imageWidth,
+            imageHeight,
             horizontal = false,
             grey = false,
             classes = {},
@@ -88,6 +92,8 @@ export const Tile = memo(
                             className={cx(fr.cx("fr-responsive-img"), classes.imgTag)}
                             src={imageUrl}
                             alt={imageAlt}
+                            width={imageWidth}
+                            height={imageHeight}
                         />
                     </div>
                 )) ||