From d9f4b0f49d5f64aa834bf2311548ee5788be723f Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@sg.social.gouv.fr>
Date: Fri, 16 Dec 2022 01:22:42 +0100
Subject: [PATCH 1/2] fix(Breadcrumb): classes+i18n

---
 src/Breadcrumb.tsx | 48 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
index 2d3a79bc5..81383c560 100644
--- a/src/Breadcrumb.tsx
+++ b/src/Breadcrumb.tsx
@@ -1,18 +1,19 @@
 import React, { memo, forwardRef, useId } from "react";
 import { symToStr } from "tsafe/symToStr";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
 import { RegisteredLinkProps, useLink } from "./lib/routing";
+import { createComponentI18nApi } from "./lib/i18n";
 import { fr } from "./lib";
 import { cx } from "./lib/tools/cx";
 
-// We make users import dsfr.css, so we don't need to import the scoped CSS
-// but in the future if we have a complete component coverage it
-// we could stop requiring users to import the hole CSS and only import on a
-// per component basis.
 import "./dsfr/component/breadcrumb/breadcrumb.css";
 
 export type BreadcrumbProps = {
     className?: string;
     links: BreadcrumbProps.Link[];
+    classes?: Partial<Record<"root" | "button" | "collapse" | "list" | "link" | "text", string>>;
 };
 
 export namespace BreadcrumbProps {
@@ -23,7 +24,7 @@ export namespace BreadcrumbProps {
     };
 }
 
-//Longueur et lisibilité : Afin qu’il reste lisible, évitez que le fil d’Ariane soit trop long et passe sur plusieurs lignes.
+// Note DSFR: Longueur et lisibilité : Afin qu’il reste lisible, évitez que le fil d’Ariane soit trop long et passe sur plusieurs lignes.
 // Si les titres de page de votre site sont longs, nous conseillons de n’afficher que les 4 premiers mots du nom de la page courante et d’indiquer que l’élément est tronqué par l’affichage de “…”
 const trimText = (label: string) => {
     if (label && label.split(" ").length > 4) {
@@ -35,7 +36,11 @@ const trimText = (label: string) => {
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-breadcrumb> */
 export const Breadcrumb = memo(
     forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
-        const { links, className, ...rest } = props;
+        const { links, className, classes = {}, ...rest } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        const { t } = useTranslation();
 
         const { Link } = useLink();
         const breadcrumbId = useId();
@@ -43,19 +48,19 @@ export const Breadcrumb = memo(
             <nav
                 ref={ref}
                 role="navigation"
-                className={cx(fr.cx("fr-breadcrumb"), className)}
-                aria-label="vous êtes ici :"
+                className={cx(fr.cx("fr-breadcrumb"), classes.root, className)}
+                aria-label={`${t("navigation label")} :`}
                 {...rest}
             >
                 <button
-                    className="fr-breadcrumb__button"
+                    className={cx(fr.cx("fr-breadcrumb__button"), classes.button)}
                     aria-expanded="false"
                     aria-controls={breadcrumbId}
                 >
-                    Voir le fil d’Ariane
+                    {t("show breadcrumb")}
                 </button>
-                <div className="fr-collapse" id={breadcrumbId}>
-                    <ol className="fr-breadcrumb__list">
+                <div className={cx(fr.cx("fr-collapse"), classes.collapse)} id={breadcrumbId}>
+                    <ol className={cx(fr.cx("fr-breadcrumb__list"), classes.list)}>
                         <>
                             {links.map(link => (
                                 <li key={link.linkProps.href}>
@@ -63,6 +68,7 @@ export const Breadcrumb = memo(
                                         {...link.linkProps}
                                         className={cx(
                                             fr.cx("fr-breadcrumb__link"),
+                                            classes.link,
                                             link.linkProps.className
                                         )}
                                         aria-current={link.isActive ? "page" : undefined}
@@ -81,4 +87,22 @@ export const Breadcrumb = memo(
 
 Breadcrumb.displayName = symToStr({ Breadcrumb });
 
+const { useTranslation, addBreadcrumbTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ Breadcrumb }),
+    "frMessages": {
+        "show breadcrumb": "Voir le fil d’Ariane",
+        "navigation label": "vous êtes ici"
+    }
+});
+
+addBreadcrumbTranslations({
+    "lang": "en",
+    "messages": {
+        "show breadcrumb": "Show navigation",
+        "navigation label": "you are here"
+    }
+});
+
+export { addBreadcrumbTranslations };
+
 export default Breadcrumb;

From ecb31cf3aa257f2dee0279467a26a6293322fd33 Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@sg.social.gouv.fr>
Date: Fri, 16 Dec 2022 01:26:45 +0100
Subject: [PATCH 2/2] fix

---
 src/Breadcrumb.tsx             | 16 ++++------------
 stories/Breadcrumb.stories.tsx |  8 --------
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
index 81383c560..771196151 100644
--- a/src/Breadcrumb.tsx
+++ b/src/Breadcrumb.tsx
@@ -1,4 +1,4 @@
-import React, { memo, forwardRef, useId } from "react";
+import React, { memo, forwardRef, useId, ReactNode } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
@@ -18,21 +18,12 @@ export type BreadcrumbProps = {
 
 export namespace BreadcrumbProps {
     export type Link = {
-        text: string;
+        text: ReactNode;
         linkProps: RegisteredLinkProps;
         isActive?: boolean;
     };
 }
 
-// Note DSFR: Longueur et lisibilité : Afin qu’il reste lisible, évitez que le fil d’Ariane soit trop long et passe sur plusieurs lignes.
-// Si les titres de page de votre site sont longs, nous conseillons de n’afficher que les 4 premiers mots du nom de la page courante et d’indiquer que l’élément est tronqué par l’affichage de “…”
-const trimText = (label: string) => {
-    if (label && label.split(" ").length > 4) {
-        return label.split(" ").slice(0, 4).join(" ") + "...";
-    }
-    return label;
-};
-
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-breadcrumb> */
 export const Breadcrumb = memo(
     forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
@@ -44,6 +35,7 @@ export const Breadcrumb = memo(
 
         const { Link } = useLink();
         const breadcrumbId = useId();
+
         return (
             <nav
                 ref={ref}
@@ -73,7 +65,7 @@ export const Breadcrumb = memo(
                                         )}
                                         aria-current={link.isActive ? "page" : undefined}
                                     >
-                                        {trimText(link.text)}
+                                        {link.text}
                                     </Link>
                                 </li>
                             ))}
diff --git a/stories/Breadcrumb.stories.tsx b/stories/Breadcrumb.stories.tsx
index 3064cf6ad..6598e884b 100644
--- a/stories/Breadcrumb.stories.tsx
+++ b/stories/Breadcrumb.stories.tsx
@@ -39,11 +39,3 @@ export const LongBreadcrumb = getStory({
         { text: "Page de démo 7", linkProps: { href: "/page7" }, isActive: true }
     ]
 });
-
-export const LongLabelBreadcrumb = getStory({
-    links: [
-        { text: "Accueil", linkProps: { href: "/" } },
-        { text: "Page 1", linkProps: { href: "/page1" } },
-        { text: "Un article très très long", linkProps: { href: "/article1" }, isActive: true }
-    ]
-});