Merge pull request #109 from InseeFr/feat/use-classnames-and-fr-cx

feat: use classnames and fr cx
InseeFr · Sep 25, 2023 · eea6a70 · eea6a70
2 parents 3a648ae + 98046df
commit eea6a70
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic-dsfr",
-    "version": "0.0.36",
+    "version": "0.0.37",
     "description": "Couche graphique pour Lunatic reposant sur le Système de Design de l'État (DSFR)",
     "repository": {
         "type": "git",

diff --git a/src/Datepicker/Datepicker.tsx b/src/Datepicker/Datepicker.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { DatepickerInput } from "./DatepickerInput";
 import { getState, getStateRelatedMessage } from "../utils/errors/getErrorStates";
 import { LunaticError } from "../utils/type/type";
+import { fr } from "@codegouvfr/react-dsfr";
 
 type DatepickerType = {
     disabled: boolean;
@@ -40,10 +41,10 @@ function DisplayErrors({ ...props }) {
     const { state, stateRelatedMessage, id } = props;
     if (props.state && stateRelatedMessage) {
         return (
-            <div className="fr-messages-group">
+            <div className={fr.cx("fr-messages-group")}>
                 <p
                     id={`${id}-desc-${state}`}
-                    className={`fr-message fr-message--${state} fr-col-12 fr-mt-0`}
+                    className={`fr-message--${state} ${fr.cx("fr-message", "fr-col-12", "fr-mt-0")}`}
                 >
                     {stateRelatedMessage}
                 </p>
@@ -55,7 +56,7 @@ function DisplayErrors({ ...props }) {
 
 function displayDescription(description: string) {
     if (description) {
-        return <span className="fr-hint-text">{description}</span>;
+        return <span className={fr.cx("fr-hint-text")}>{description}</span>;
     }
     return null;
 }
@@ -88,7 +89,7 @@ export function Datepicker({
             role="group"
             aria-labelledby={`${id}-fieldset-legend ${id}-fieldset-messages`}
         >
-            <legend className="fr-fieldset__legend" id={`${id}-fieldset-legend`}>
+            <legend className={fr.cx("fr-fieldset__legend")} id={`${id}-fieldset-legend`}>
                 {label}
                 {displayDescription(description)}
             </legend>

diff --git a/src/Datepicker/DatepickerInput.tsx b/src/Datepicker/DatepickerInput.tsx
@@ -1,3 +1,4 @@
+import { fr } from "@codegouvfr/react-dsfr";
 import { Input as InputDSFR } from "@codegouvfr/react-dsfr/Input";
 import { useState, useEffect } from "react";
 
@@ -84,7 +85,13 @@ export function DatepickerInput({
 
     return (
         <>
-            <div className="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--number">
+            <div
+                className={fr.cx(
+                    "fr-fieldset__element",
+                    "fr-fieldset__element--inline",
+                    "fr-fieldset__element--number",
+                )}
+            >
                 <InputDSFR
                     disabled={disabled}
                     label="Jour"
@@ -97,7 +104,13 @@ export function DatepickerInput({
                     }}
                 />
             </div>
-            <div className="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--number">
+            <div
+                className={fr.cx(
+                    "fr-fieldset__element",
+                    "fr-fieldset__element--inline",
+                    "fr-fieldset__element--number",
+                )}
+            >
                 <InputDSFR
                     disabled={disabled}
                     label="Mois"
@@ -110,7 +123,13 @@ export function DatepickerInput({
                     }}
                 />
             </div>
-            <div className="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--year">
+            <div
+                className={fr.cx(
+                    "fr-fieldset__element",
+                    "fr-fieldset__element--inline",
+                    "fr-fieldset__element--year",
+                )}
+            >
                 <InputDSFR
                     disabled={disabled}
                     label="Année"

diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
@@ -4,6 +4,8 @@ import { useCallback, useState } from "react";
 import { NumberFormatValues, NumericFormat, NumericFormatProps } from "react-number-format";
 import { getState, getStateRelatedMessage } from "./utils/errors/getErrorStates";
 import { LunaticError } from "./utils/type/type";
+import { fr } from "@codegouvfr/react-dsfr";
+import classnames from "classnames";
 
 function checkValue(value: number) {
     if (!value && value != 0) {
@@ -81,7 +83,12 @@ export function InputNumber({
     const stateRelatedMessage = getStateRelatedMessage(errors, id);
 
     return (
-        <div className="lunatic-input-number-container fr-grid-row fr-grid-row--middle">
+        <div
+            className={classnames(
+                "lunatic-input-number-container",
+                fr.cx("fr-grid-row", "fr-grid-row--middle"),
+            )}
+        >
             <NumberFormatDSFR
                 DSFRProps={{
                     label: label,

diff --git a/src/Modal.tsx b/src/Modal.tsx
@@ -2,6 +2,8 @@ import { type ReactEventHandler, MouseEventHandler, RefObject } from "react";
 import { createPortal } from "react-dom";
 import { Button } from "./Button";
 import { type LunaticComponentProps } from "./type";
+import { fr } from "@codegouvfr/react-dsfr";
+import classnames from "classnames";
 
 type Props = Pick<LunaticComponentProps<"Modal">, "id" | "label" | "description"> & {
     onClose: ReactEventHandler<HTMLDialogElement>;
@@ -15,20 +17,20 @@ export function Modal(props: Props) {
 
     return createPortal(
         <dialog
-            className="lunatic-dsfr-modal fr-modal fr-modal--opened"
+            className={classnames("lunatic-dsfr-modal", fr.cx("fr-modal", "fr-modal--opened"))}
             ref={dialogRef}
             id={id}
             onClose={onClose}
             onCancel={onCancel}
             onClick={onClick}
         >
-            <div className="fr-container fr-container--fluid fr-container-md">
-                <div className="fr-grid-row fr-grid-row--center">
-                    <div className="fr-col-12 fr-col-md-8 fr-col-lg-6">
-                        <form method="dialog" className="fr-modal__body">
-                            <div className="fr-modal__header">
+            <div className={fr.cx("fr-container", "fr-container--fluid", "fr-container-md")}>
+                <div className={fr.cx("fr-grid-row", "fr-grid-row--center")}>
+                    <div className={fr.cx("fr-col-12", "fr-col-md-8", "fr-col-lg-6")}>
+                        <form method="dialog" className={fr.cx("fr-modal__body")}>
+                            <div className={fr.cx("fr-modal__header")}>
                                 <Button
-                                    className={"fr-btn--close"}
+                                    className={fr.cx("fr-btn--close")}
                                     disabled={false}
                                     type="submit"
                                     value="cancel"
@@ -37,16 +39,24 @@ export function Modal(props: Props) {
                                     Fermer
                                 </Button>
                             </div>
-                            <div className="fr-modal__content">
-                                <span id={`${id}-title`} className="fr-modal__title">
+                            <div className={fr.cx("fr-modal__content")}>
+                                <span id={`${id}-title`} className={fr.cx("fr-modal__title")}>
                                     {/* Label is defined in the source.json, and we can accept VTL|MD or VTL */}
                                     {label}
                                 </span>
                                 {/* Label is defined in the source.json, and we can accept VTL|MD or VTL */}
                                 <span>{description}</span>
                             </div>
-                            <div className="fr-modal__footer">
-                                <ul className="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+                            <div className={fr.cx("fr-modal__footer")}>
+                                <ul
+                                    className={fr.cx(
+                                        "fr-btns-group",
+                                        "fr-btns-group--right",
+                                        "fr-btns-group--inline-reverse",
+                                        "fr-btns-group--inline-lg",
+                                        "fr-btns-group--icon-left",
+                                    )}
+                                >
                                     <li>
                                         <Button
                                             value="default"

diff --git a/src/QuestionExplication.tsx b/src/QuestionExplication.tsx
@@ -33,9 +33,17 @@ export function QuestionExplication({ label, description, bgColor }: QuestionExp
             style={{
                 backgroundColor,
             }}
-            className="fr-py-2w"
+            className={fr.cx("fr-py-2w")}
         >
-            <div className={"fr-container fr-grid-row fr-grid-row--center fr-grid-row--middle fr-px-1w"}>
+            <div
+                className={fr.cx(
+                    "fr-container",
+                    "fr-grid-row",
+                    "fr-grid-row--center",
+                    "fr-grid-row--middle",
+                    "fr-px-1w",
+                )}
+            >
                 <section className={fr.cx("fr-accordion", "fr-col-lg-6", "fr-col-md-9", "fr-col-12")}>
                     <h3 className={fr.cx("fr-accordion__title")}>
                         <button

diff --git a/src/Roundabout/roundabout-container.tsx b/src/Roundabout/roundabout-container.tsx
@@ -1,9 +1,11 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import classnames from "classnames";
 import React from "react";
 
 export function RoundaboutContainer({ children }: { children: React.ReactNode }) {
     return (
-        <div className="lunatic-roundabout fr-container--fluid">
-            <div className="fr-grid-row">{children}</div>
+        <div className={classnames("lunatic-roundabout", fr.cx("fr-container--fluid"))}>
+            <div className={fr.cx("fr-grid-row")}>{children}</div>
         </div>
     );
 }
diff --git a/src/Roundabout/roundabout-it-button.tsx b/src/Roundabout/roundabout-it-button.tsx
@@ -39,7 +39,7 @@ const CompleteBadge = ({ status, locked }: { status: string; locked?: boolean })
     if (status === "complete" && locked) {
         return (
             <div className={classnames({ "fr-mb-2w": !locked })}>
-                <p className="fr-badge fr-badge--success">Complété</p>
+                <p className={fr.cx("fr-badge", "fr-badge--success")}>Complété</p>
             </div>
         );
     }
@@ -105,7 +105,7 @@ export function RoundaboutItButton({
         return null;
     }
     return (
-        <div className="fr-col-12 fr-col-md-6">
+        <div className={fr.cx("fr-col-12", "fr-col-md-6")}>
             <div
                 className={css({
                     [fr.breakpoints.up("md")]: {

diff --git a/src/Roundabout/roundabout-it-container.tsx b/src/Roundabout/roundabout-it-container.tsx
@@ -1,10 +1,12 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import classnames from "classnames";
 import React from "react";
 
 export function RoundaboutItContainer({ children }: { children: React.ReactNode }) {
     return (
-        <div className="roundabout-iteration-title fr-col-12">
-            <hr className="fr-pb-2w" />
-            <div className="fr-grid-row fr-border fr-pb-2w">{children}</div>
+        <div className={classnames("roundabout-iteration-title", fr.cx("fr-col-12"))}>
+            <hr className={fr.cx("fr-pb-2w")} />
+            <div className={fr.cx("fr-grid-row", "fr-pb-2w")}>{children}</div>
         </div>
     );
 }
diff --git a/src/Roundabout/roundabout-it-title.tsx b/src/Roundabout/roundabout-it-title.tsx
@@ -8,8 +8,11 @@ function UnnecessaryText({ unnecessary }: { unnecessary?: string | boolean }) {
 
     if (unnecessary) {
         return (
-            <div className="fr-col-12 fr-mt-1w">
-                <p className="fr-mb-0" style={{ color: theme.decisions.text.disabled.grey.default }}>
+            <div className={fr.cx("fr-col-12", "fr-mt-1w")}>
+                <p
+                    className={fr.cx("fr-mb-0")}
+                    style={{ color: theme.decisions.text.disabled.grey.default }}
+                >
                     {unnecessary}
                 </p>
             </div>
@@ -37,14 +40,14 @@ export function RoundaboutItTitle({
                         margin: "auto",
                     },
                 }),
-                "fr-col-12",
-                !unnecessary ? "fr-col-md-6" : "",
+                fr.cx("fr-col-12"),
+                !unnecessary ? fr.cx("fr-col-md-6") : "",
             )}
         >
-            <div className="fr-grid-row">
-                <div className="fr-col-12">
+            <div className={fr.cx("fr-grid-row")}>
+                <div className={fr.cx("fr-col-12")}>
                     <h2
-                        className={classnames("roundabout-it-title", "fr-h4", "fr-mb-0")}
+                        className={classnames("roundabout-it-title", fr.cx("fr-h4", "fr-mb-0"))}
                         style={unnecessary ? { color: theme.decisions.text.disabled.grey.default } : {}}
                     >
                         {label}

diff --git a/src/Roundabout/roundabout-label.tsx b/src/Roundabout/roundabout-label.tsx
@@ -1,7 +1,10 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import classnames from "classnames";
+
 export function RoundaboutLabel({ value }: { value: string }) {
     return (
-        <div className="fr-col-12">
-            <h1 className="roundabout-label fr-h3">{value}</h1>
+        <div className={fr.cx("fr-col-12")}>
+            <h1 className={classnames("roundabout-label", fr.cx("fr-h3"))}>{value}</h1>
         </div>
     );
 }
diff --git a/src/Sequence.tsx b/src/Sequence.tsx
@@ -16,7 +16,7 @@ function Description({ description }: { description?: DeclarationType[] }) {
                 {description.map(({ label, id: idD }) => {
                     if (typeof label === "string") {
                         return (
-                            <p className="fr-mb-0" key={idD}>
+                            <p className={fr.cx("fr-mb-0")} key={idD}>
                                 {label}
                             </p>
                         );

diff --git a/src/Suggester/elements/Label.tsx b/src/Suggester/elements/Label.tsx
@@ -1,6 +1,7 @@
 import { CSSProperties, PropsWithChildren, ReactNode } from "react";
 import classnames from "classnames";
 import React from "react";
+import { fr } from "@codegouvfr/react-dsfr";
 
 type Props = PropsWithChildren<{
     id?: string;
@@ -18,7 +19,9 @@ type DescriptionProps = {
 function OneDescription({ value, className }: { value?: ReactNode; className?: string }) {
     if ((typeof value === "string" && value.length > 0) || React.isValidElement(value)) {
         return (
-            <span className={classnames("label-description", "fr-hint-text", className)}>{value}</span>
+            <span className={classnames("label-description", fr.cx("fr-hint-text"), className)}>
+                {value}
+            </span>
         );
     }
 
@@ -48,11 +51,11 @@ export function Label({ children, id, htmlFor, className, style, description }:
             <label
                 htmlFor={htmlFor}
                 id={id}
-                className={classnames("lunatic-dsfr-label fr-label fr-mb-1w", className)}
+                className={classnames("lunatic-dsfr-label", fr.cx("fr-label", "fr-mb-1w"), className)}
                 style={style}
             >
                 {children}
-                <Description className="fr-mb-1w" value={description} />
+                <Description className={fr.cx("fr-mb-1w")} value={description} />
             </label>
         );
     }

diff --git a/src/Suggester/elements/SuggesterInput.tsx b/src/Suggester/elements/SuggesterInput.tsx
@@ -1,3 +1,4 @@
+import { fr } from "@codegouvfr/react-dsfr";
 import { LegacyRef, forwardRef } from "react";
 
 type SuggesterInputProps = Record<string, unknown>;
@@ -11,5 +12,5 @@ export const SuggesterInput = forwardRef(function SuggesterInput(
     props: SuggesterInputProps,
     ref: LegacyRef<HTMLInputElement>,
 ) {
-    return <input className="fr-input" type="text" {...props} ref={ref} />;
+    return <input className={fr.cx("fr-input")} type="text" {...props} ref={ref} />;
 });
diff --git a/src/Suggester/elements/SuggesterLabel.tsx b/src/Suggester/elements/SuggesterLabel.tsx
@@ -1,3 +1,4 @@
+import { fr } from "@codegouvfr/react-dsfr";
 import { PropsWithChildren } from "react";
 
 type SuggesterLabelProps = {
@@ -9,7 +10,7 @@ export function SuggesterLabel(props: PropsWithChildren<SuggesterLabelProps>) {
 
     if (children) {
         return (
-            <label className="fr-label" htmlFor={id}>
+            <label className={fr.cx("fr-label")} htmlFor={id}>
                 {children}
             </label>
         );

diff --git a/src/Summary/SummaryResponses.tsx b/src/Summary/SummaryResponses.tsx
@@ -1,10 +1,12 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import classnames from "classnames";
 import { PropsWithChildren, ReactNode } from "react";
 
 function ListResponses({ title, children }: PropsWithChildren<{ title: ReactNode }>) {
     return (
-        <div className="lunatic-dsfr-summary-responses-iteration fr-pb-2w">
-            <hr className="fr-pb-2w" />
-            <h6 className="fr-mb-0">{title}</h6>
+        <div className={classnames("lunatic-dsfr-summary-responses-iteration", fr.cx("fr-pb-2w"))}>
+            <hr className={fr.cx("fr-pb-2w")} />
+            <h6 className={fr.cx("fr-mb-0")}>{title}</h6>
             {children}
         </div>
     );
@@ -26,7 +28,7 @@ function Responses({
             {values.map(({ label, value }, index) => {
                 return (
                     <div key={index}>
-                        <p className="fr-mb-0">
+                        <p className={fr.cx("fr-mb-0")}>
                             {label} {value}
                         </p>
                     </div>