Merge pull request #24 from codegouvfr/breadcrumb

feat: add Breadcrumb component

Author: garronej

package.json

@@ -131,6 +131,7 @@
         "./Footer": "./dist/Footer.js",
         "./Display": "./dist/Display.js",
         "./Button": "./dist/Button.js",
+        "./Breadcrumb": "./dist/Breadcrumb.js",
         "./Badge": "./dist/Badge.js",
         "./Alert": "./dist/Alert.js",
         "./Accordion": "./dist/Accordion.js"

src/Breadcrumb.tsx

@@ -0,0 +1,84 @@
+import React, { memo, forwardRef, useId } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { RegisteredLinkProps, 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
+// 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[];
+};
+
+export namespace BreadcrumbProps {
+    export type Link = {
+        text: string;
+        linkProps: RegisteredLinkProps;
+        isActive?: boolean;
+    };
+}
+
+//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) => {
+        const { links, className, ...rest } = props;
+
+        const { Link } = useLink();
+        const breadcrumbId = useId();
+        return (
+            <nav
+                ref={ref}
+                role="navigation"
+                className={cx(fr.cx("fr-breadcrumb"), className)}
+                aria-label="vous êtes ici :"
+                {...rest}
+            >
+                <button
+                    className="fr-breadcrumb__button"
+                    aria-expanded="false"
+                    aria-controls={breadcrumbId}
+                >
+                    Voir le fil d’Ariane
+                </button>
+                <div className="fr-collapse" id={breadcrumbId}>
+                    <ol className="fr-breadcrumb__list">
+                        <>
+                            {links.map(link => (
+                                <li key={link.linkProps.href}>
+                                    <Link
+                                        {...link.linkProps}
+                                        className={cx(
+                                            fr.cx("fr-breadcrumb__link"),
+                                            link.linkProps.className
+                                        )}
+                                        aria-current={link.isActive ? "page" : undefined}
+                                    >
+                                        {trimText(link.text)}
+                                    </Link>
+                                </li>
+                            ))}
+                        </>
+                    </ol>
+                </div>
+            </nav>
+        );
+    })
+);
+
+Breadcrumb.displayName = symToStr({ Breadcrumb });
+
+export default Breadcrumb;

stories/Breadcrumb.stories.tsx

@@ -0,0 +1,49 @@
+import { Breadcrumb } from "../dist/Breadcrumb";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { Breadcrumb },
+    "description": `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/fil-d-ariane)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Breadcrumb.tsx)`,
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    links: [
+        { text: "Accueil", linkProps: { href: "/" } },
+        { text: "Page 1", linkProps: { href: "/page1" } }
+    ]
+});
+
+export const ActiveBreadcrumb = getStory({
+    links: [
+        { text: "Accueil", linkProps: { href: "/" } },
+        { text: "Page 1", linkProps: { href: "/page1" }, isActive: true }
+    ]
+});
+
+export const LongBreadcrumb = getStory({
+    links: [
+        { text: "Accueil", linkProps: { href: "/" } },
+        { text: "Page de démo 1", linkProps: { href: "/page1" } },
+        { text: "Page de démo 2", linkProps: { href: "/page2" } },
+        { text: "Page de démo 3", linkProps: { href: "/page3" } },
+        { text: "Page de démo 4", linkProps: { href: "/page4" } },
+        { text: "Page de démo 5", linkProps: { href: "/page5" } },
+        { text: "Page de démo 6", linkProps: { href: "/page6" } },
+        { 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 }
+    ]
+});