Merge branch 'main' into card

Signed-off-by: Julien Bouquillon <julien.bouquillon@sg.social.gouv.fr>

Author: Julien Bouquillon

COMPONENTS.md

@@ -0,0 +1,43 @@
+# Components implementation status
+
+-   [x] Accordion
+-   [ ] File upload
+-   [x] Alert
+-   [x] Badge
+-   [x] Notice
+-   [x] Button
+-   [x] Buttons group
+-   [ ] France Connect button
+-   [ ] Radio button
+-   [ ] Radio rich
+-   [ ] Checkbox
+-   [ ] Cards
+-   [x] Quote
+-   [ ] Media
+-   [x] Header
+-   [x] Breadcrumb
+-   [ ] Consent banner
+-   [ ] Favicon (?)
+-   [x] Stepper
+-   [ ] Toggle switch
+-   [ ] Follow
+-   [ ] Link
+-   [x] SkipLinks
+-   [ ] Select
+-   [ ] Side menu
+-   [ ] Call out
+-   [x] Highlight
+-   [ ] Modal
+-   [x] Main navigation
+-   [x] Tabs
+-   [ ] Pagination
+-   [x] Display
+-   [ ] Share
+-   [x] Footer
+-   [ ] Translate
+-   [ ] Summary
+-   [ ] Table
+-   [ ] Tag
+-   [ ] Download
+-   [ ] Transcription
+-   [ ] Tile

README.md

@@ -30,6 +30,10 @@
 
 This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), the vanilla JS/CSS implementation of the DSFR.
 
+[Preview.webm](https://user-images.githubusercontent.com/6702424/208798079-52c39962-94a3-4ff5-adbc-800d47b50757.webm)
+
+[Youtube link](https://youtu.be/5q88JgXUAY4)
+
 > For TypeScript and JavaScript projects.
 
 -   [x] Fully TypeSafe, well documented API.
@@ -38,7 +42,7 @@ This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.c
 -   [x] Exactly the same look and feel than with [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr).
 -   [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
 -   [x] [Perfect integration with all major React framework: Next.js, Create React App, Vue](https://react-dsfr.etalab.studio/).
--   [ ] All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are implemented (14/42)
+-   [ ] All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are implemented (14/42, [see details](COMPONENTS.md))
 -   [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)
 -   [x] Optional integration with [MUI](https://mui.com/). If you use MUI components they will
         be automatically adapted to look like [DSFR components](https://www.systeme-de-design.gouv.fr/elements-d-interface). See [documentation](https://react-dsfr.etalab.studio/mui-integration).

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.5.1",
+    "version": "0.10.0",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",
@@ -74,7 +74,7 @@
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
         "@gouvfr/dsfr": "1.8.4",
-        "@mui/material": "5.10.7",
+        "@mui/material": "^5.11.0",
         "@storybook/addon-actions": "^6.5.13",
         "@storybook/addon-essentials": "^6.5.13",
         "@storybook/addon-interactions": "^6.5.13",
@@ -126,12 +126,14 @@
         "./Tabs": "./dist/Tabs.js",
         "./Stepper": "./dist/Stepper.js",
         "./SkipLinks": "./dist/SkipLinks.js",
+        "./Quote": "./dist/Quote.js",
         "./Notice": "./dist/Notice.js",
         "./Highlight": "./dist/Highlight.js",
         "./Header": "./dist/Header/index.js",
         "./Footer": "./dist/Footer.js",
         "./Display": "./dist/Display.js",
         "./Card": "./dist/Card.js",
+        "./ButtonsGroup": "./dist/ButtonsGroup.js",
         "./Button": "./dist/Button.js",
         "./Breadcrumb": "./dist/Breadcrumb.js",
         "./Badge": "./dist/Badge.js",

src/Badge.tsx

@@ -4,29 +4,27 @@ import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 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/badge/badge.css";
+import type { AlertProps } from "./Alert";
 
 export type BadgeProps = {
     className?: string;
-    severity?: BadgeProps.Severity;
-    isSmall?: boolean;
+    severity?: AlertProps.Severity | "new";
+    small?: boolean;
     noIcon?: boolean;
     label: NonNullable<ReactNode>;
 };
 
-export namespace BadgeProps {
-    export type Severity = "info" | "success" | "error" | "warning" | "new";
-}
-
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-badge> */
 export const Badge = memo(
     forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
-        const { className, severity, label, isSmall, noIcon, ...rest } = props;
+        const {
+            className,
+            severity,
+            label,
+            small: isSmall = false,
+            noIcon = false,
+            ...rest
+        } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
@@ -35,9 +33,9 @@ export const Badge = memo(
                 className={cx(
                     fr.cx(
                         "fr-badge",
-                        { [`fr-badge--${severity}`]: severity != null },
+                        severity !== undefined && `fr-badge--${severity}`,
                         { "fr-badge--sm": isSmall },
-                        { "fr-badge--no-icon": noIcon || severity == null }
+                        { "fr-badge--no-icon": noIcon || severity === undefined }
                     ),
                     className
                 )}

src/Breadcrumb.tsx

@@ -1,73 +1,71 @@
-import React, { memo, forwardRef, useId } from "react";
+import React, { memo, forwardRef, useId, ReactNode } from "react";
 import { symToStr } from "tsafe/symToStr";
-import { RegisteredLinkProps, useLink } from "./lib/routing";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+import { RegisteredLinkProps, getLink } 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 {
     export type Link = {
-        text: string;
+        text: ReactNode;
         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 { links, className, classes = {}, ...rest } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        const { t } = useTranslation();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
         const breadcrumbId = useId();
+
         return (
             <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}>
                                     <Link
                                         {...link.linkProps}
                                         className={cx(
                                             fr.cx("fr-breadcrumb__link"),
+                                            classes.link,
                                             link.linkProps.className
                                         )}
                                         aria-current={link.isActive ? "page" : undefined}
                                     >
-                                        {trimText(link.text)}
+                                        {link.text}
                                     </Link>
                                 </li>
                             ))}
@@ -81,4 +79,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;

src/Button.tsx

@@ -8,7 +8,7 @@ import type {
 import { fr } from "./lib";
 import { cx } from "./lib/tools/cx";
 import type { FrIconClassName, RiIconClassName } from "./lib/generatedFromCss/classNames";
-import { RegisteredLinkProps, useLink } from "./lib/routing";
+import { RegisteredLinkProps, getLink } from "./lib/routing";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import { symToStr } from "tsafe/symToStr";
@@ -26,15 +26,15 @@ export namespace ButtonProps {
     };
 
     export type IconOnly = {
-        label?: never;
+        children?: never;
         /** Function of the button */
         title: string;
         iconId: FrIconClassName | RiIconClassName;
         iconPosition?: never;
     };
 
     export type WithIcon = {
-        label: ReactNode;
+        children: ReactNode;
         /** Function of the button, to provide if the label isn't explicit */
         title?: string;
         iconId: FrIconClassName | RiIconClassName;
@@ -43,7 +43,7 @@ export namespace ButtonProps {
     };
 
     export type WithoutIcon = {
-        label: ReactNode;
+        children: ReactNode;
         /** Function of the button, to provide if the label isn't explicit */
         title?: string;
         iconId?: never;
@@ -69,7 +69,7 @@ export const Button = memo(
     forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
         const {
             className: prop_className,
-            label,
+            children,
             title,
             iconId,
             iconPosition = "left",
@@ -84,29 +84,28 @@ export const Button = memo(
 
         assert<Equals<keyof typeof rest, never>>();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
 
         const className = cx(
-            fr.cx("fr-btn"),
-            priority !== "primary" &&
-                fr.cx(
+            fr.cx(
+                "fr-btn",
+                priority !== "primary" &&
                     `fr-btn--${
                         priority === "tertiary no outline" ? "tertiary-no-outline" : priority
-                    }`
-                ),
-            size !== "medium" &&
-                fr.cx(
+                    }`,
+                size !== "medium" &&
                     `fr-btn--${(() => {
                         switch (size) {
                             case "small":
                                 return "sm";
                             case "large":
                                 return "lg";
                         }
-                    })()}`
-                ),
-            iconId !== undefined &&
-                fr.cx(iconId, label !== undefined && `fr-btn--icon-${iconPosition}`),
+                    })()}`,
+                ...(iconId === undefined
+                    ? []
+                    : [iconId, children !== undefined && (`fr-btn--icon-${iconPosition}` as const)])
+            ),
             linkProps !== undefined && linkProps.className,
             prop_className
         );
@@ -119,7 +118,7 @@ export const Button = memo(
                 ref={ref as React.ForwardedRef<HTMLAnchorElement>}
                 {...rest}
             >
-                {label}
+                {children}
             </Link>
         ) : (
             <button
@@ -131,7 +130,7 @@ export const Button = memo(
                 ref={ref as React.ForwardedRef<HTMLButtonElement>}
                 {...rest}
             >
-                {label}
+                {children}
             </button>
         );
     })