fix

Author: Julien Bouquillon

src/Breadcrumb.tsx

@@ -1,6 +1,8 @@
 import React, { memo, forwardRef, useId } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { useLink } from "./lib/routing";
+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
@@ -15,6 +17,7 @@ export type BreadcrumbLink = {
 };
 
 export type BreadcrumbProps = {
+    className?: string;
     links: BreadcrumbLink[];
 };
 
@@ -30,14 +33,19 @@ const trimLabel = (label: string) => {
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-breadcrumb> */
 export const Breadcrumb = memo(
     forwardRef<HTMLDivElement, BreadcrumbProps>(props => {
-        const { links } = props;
+        const { links, className, ...rest } = props;
 
+        <div className={cx(fr.cx("fr-highlight"), className)} {...rest}></div>;
         const router = useRouter();
         const { Link } = useLink();
         const breadcrumbId = useId();
 
         return (
-            <nav role="navigation" className="fr-breadcrumb" aria-label="vous êtes ici :">
+            <nav
+                role="navigation"
+                className={cx(fr.cx("fr-breadcrumb"), className)}
+                aria-label="vous êtes ici :"
+            >
                 <button
                     className="fr-breadcrumb__button"
                     aria-expanded="false"

stories/Breadcrumb.stories.tsx

@@ -14,71 +14,16 @@ const { meta, getStory } = getStoryFactory({
 export default meta;
 
 export const Default = getStory({
-    label: "io"
-    // links: [
-    //     { label: "Accueil", href = "/" },
-    //     { label: "Articles", href: "/articles" },
-    //     { label: "Le premier", href: "/articles/first" }
-    // ]
-    //...logCallbacks(["onClick"])
+    links: [
+        { label: "Accueil", href: "/" },
+        { label: "Page 1", href: "/page1" }
+    ]
 });
 
-export const BreadcrumbSecondary = getStory({
-    //"priority": "secondary",
-    "label": "Simple button - secondary"
-    // ...logCallbacks(["onClick"])
+export const LongBreadcrumb = getStory({
+    links: [
+        { label: "Accueil", href: "/" },
+        { label: "Page 1", href: "/page1" },
+        { label: "Article avec un titre très très long", href: "/article1" }
+    ]
 });
-
-// export const ButtonTertiary = getStory({
-//     "priority": "tertiary",
-//     "label": "Simple button - tertiary",
-//     ...logCallbacks(["onClick"])
-// });
-
-// export const ButtonDisabled = getStory({
-//     "label": "Simple button - disabled",
-//     "disabled": true,
-//     ...logCallbacks(["onClick"])
-// });
-
-// export const ButtonWithIconDefault = getStory({
-//     "label": "Simple button with icon",
-//     "icon": {
-//         iconId: "fr-icon-account-circle-fill"
-//     },
-//     ...logCallbacks(["onClick"])
-// });
-
-// export const ButtonWithIconLeft = getStory({
-//     "label": "Simple button with icon",
-//     "icon": {
-//         "iconId": "fr-icon-account-circle-fill",
-//         "position": "left"
-//     },
-//     ...logCallbacks(["onClick"])
-// });
-
-// export const ButtonWithIconRight = getStory({
-//     "label": "Simple button with icon",
-//     "icon": {
-//         "iconId": "fr-icon-account-circle-fill",
-//         "position": "right"
-//     },
-//     ...logCallbacks(["onClick"])
-// });
-
-// export const DefaultAnchorButton = getStory({
-//     "label": "Simple button - with href (anchor)",
-//     "linkProps": {
-//         "href": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton",
-//         "target": "_blank"
-//     }
-// });
-
-// export const DefaultAnchorButtonWithTargetBlank = getStory({
-//     "label": "Simple button - with href (anchor) and target _blank",
-//     "linkProps": {
-//         "target": "_blank",
-//         "href": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton"
-//     }
-// });