handle subFinality description in typing and DOM

Author: enguerranws

src/consentManagement/ConsentBannerAndConsentManagement/ConsentBannerAndConsentManagement.tsx

@@ -1,6 +1,10 @@
 import React, { useReducer, useEffect, type ReactNode } from "react";
 import type { RegisteredLinkProps } from "../../link";
-import type { ExtractFinalityFromFinalityDescription, FinalityConsent } from "../types";
+import type {
+    ExtractFinalityFromFinalityDescription,
+    FinalityConsent,
+    SubFinalityContent
+} from "../types";
 import type { ProcessConsentChanges } from "../processConsentChanges";
 import { FooterBottomItem } from "../../Footer";
 import { createConsentBanner } from "./ConsentBanner";
@@ -10,7 +14,11 @@ import { useTranslation } from "./translation";
 export function createConsentBannerAndConsentManagement<
     FinalityDescription extends Record<
         string,
-        { title: ReactNode; description?: ReactNode; subFinalities?: Record<string, ReactNode> }
+        {
+            title: ReactNode;
+            description?: ReactNode;
+            subFinalities?: Record<string, SubFinalityContent>;
+        }
     >
 >(params: {
     finalityDescription: ((params: { lang: string }) => FinalityDescription) | FinalityDescription;

src/consentManagement/ConsentBannerAndConsentManagement/ConsentManagement.tsx

@@ -2,7 +2,11 @@ import React, { useEffect, useMemo, useState, useId, type ReactNode } from "reac
 import { fr } from "../../fr";
 import type { RegisteredLinkProps } from "../../link";
 import { createModal } from "../../Modal";
-import type { ExtractFinalityFromFinalityDescription, FinalityConsent } from "../types";
+import type {
+    ExtractFinalityFromFinalityDescription,
+    FinalityConsent,
+    SubFinalityContent
+} from "../types";
 import type { ProcessConsentChanges } from "../processConsentChanges";
 import { useLang } from "../../i18n";
 import { useIsModalOpen } from "../../Modal/useIsModalOpen";
@@ -20,7 +24,11 @@ import { useConst } from "../../tools/powerhooks/useConst";
 export function createConsentManagement<
     FinalityDescription extends Record<
         string,
-        { title: ReactNode; description?: ReactNode; subFinalities?: Record<string, ReactNode> }
+        {
+            title: ReactNode;
+            description?: ReactNode;
+            subFinalities?: Record<string, SubFinalityContent>;
+        }
     >
 >(params: {
     personalDataPolicyLinkProps: RegisteredLinkProps | undefined;
@@ -238,7 +246,7 @@ export function createConsentManagement<
     function ConsentService(props: {
         title: ReactNode;
         description: ReactNode | undefined;
-        subFinalities: Record<string, ReactNode> | undefined;
+        subFinalities: Record<string, { title: ReactNode; description?: ReactNode }> | undefined;
         finalityConsent:
             | boolean
             | ({
@@ -378,19 +386,22 @@ export function createConsentManagement<
                                     className={fr.cx("fr-consent-services", "fr-collapse")}
                                     id={subFinalityDivId}
                                 >
-                                    {Object.entries(subFinalities).map(([subFinality, title]) => (
-                                        <SubConsentService
-                                            key={subFinality}
-                                            title={title}
-                                            isConsentGiven={finalityConsent[subFinality]}
-                                            onChange={({ isConsentGiven }) =>
-                                                onChange({
-                                                    subFinality,
-                                                    isConsentGiven
-                                                })
-                                            }
-                                        />
-                                    ))}
+                                    {Object.entries(subFinalities).map(
+                                        ([subFinality, { title, description }]) => (
+                                            <SubConsentService
+                                                key={subFinality}
+                                                title={title}
+                                                description={description}
+                                                isConsentGiven={finalityConsent[subFinality]}
+                                                onChange={({ isConsentGiven }) =>
+                                                    onChange({
+                                                        subFinality,
+                                                        isConsentGiven
+                                                    })
+                                                }
+                                            />
+                                        )
+                                    )}
                                 </div>
                             </>
                         ))}
@@ -401,10 +412,11 @@ export function createConsentManagement<
 
     function SubConsentService(props: {
         title: ReactNode;
+        description?: ReactNode;
         onChange: (params: { isConsentGiven: boolean }) => void;
         isConsentGiven: boolean;
     }) {
-        const { title, onChange, isConsentGiven } = props;
+        const { title, description, onChange, isConsentGiven } = props;
 
         const { t } = useTranslation();
 
@@ -421,6 +433,9 @@ export function createConsentManagement<
             <div className={fr.cx("fr-consent-service")}>
                 <fieldset className={fr.cx("fr-fieldset", "fr-fieldset--inline")}>
                     <legend className={fr.cx("fr-consent-service__title")}>{title}</legend>
+                    {description !== undefined && (
+                        <p className={fr.cx("fr-consent-service__desc")}>{description}</p>
+                    )}
                     <div className={fr.cx("fr-consent-service__radios", "fr-fieldset--inline")}>
                         <div className={fr.cx("fr-radio-group")}>
                             <input

src/consentManagement/createConsentManagement.ts

@@ -1,5 +1,5 @@
 import { useReducer, useEffect, type ReactNode } from "react";
-import type { ExtractFinalityFromFinalityDescription } from "./types";
+import type { ExtractFinalityFromFinalityDescription, SubFinalityContent } from "./types";
 import type { RegisteredLinkProps } from "../link";
 import { createUseConsent } from "./useConsent";
 import { createProcessConsentChanges, type ConsentCallback } from "./processConsentChanges";
@@ -14,7 +14,11 @@ export const defaultLocalStorageKeyPrefix = "@codegouvfr/react-dsfr finalityCons
 export function createConsentManagement<
     FinalityDescription extends Record<
         string,
-        { title: ReactNode; description?: ReactNode; subFinalities?: Record<string, ReactNode> }
+        {
+            title: ReactNode;
+            description?: ReactNode;
+            subFinalities?: Record<string, SubFinalityContent>;
+        }
     >
 >(params: {
     finalityDescription: ((params: { lang: string }) => FinalityDescription) | FinalityDescription;
@@ -112,7 +116,11 @@ export function createConsentManagement<
 export function getFinalitiesFromFinalityDescription<
     FinalityDescription extends Record<
         string,
-        { title: ReactNode; description?: ReactNode; subFinalities?: Record<string, ReactNode> }
+        {
+            title: ReactNode;
+            description?: ReactNode;
+            subFinalities?: Record<string, SubFinalityContent>;
+        }
     >
 >(params: {
     finalityDescription: FinalityDescription;

src/consentManagement/types.ts

@@ -14,20 +14,26 @@ export type FinalityConsent<Finality extends string> = {
 export type ExtractFinalityFromFinalityDescription<
     FinalityDescription extends Record<
         string,
-        { title: ReactNode; subFinalities?: Record<string, ReactNode> }
+        {
+            title: ReactNode;
+            description?: ReactNode;
+            subFinalities?: Record<string, SubFinalityContent>;
+        }
     >
 > = {
     [K in keyof FinalityDescription]: K extends string
-        ? FinalityDescription[K] extends { subFinalities: Record<string, any> }
+        ? FinalityDescription[K] extends { subFinalities: Record<string, SubFinalityContent> }
             ? `${K}.${ExtractFinalityFromFinalityDescription.SubFinalities<FinalityDescription[K]>}`
             : K
         : never;
 }[keyof FinalityDescription];
 
 export namespace ExtractFinalityFromFinalityDescription {
     export type SubFinalities<T> = T extends { subFinalities: infer U }
-        ? U extends Record<string, any>
+        ? U extends Record<string, SubFinalityContent>
             ? keyof U
             : never
         : never;
 }
+
+export type SubFinalityContent = { title: ReactNode; description?: ReactNode };

stories/ConsentManagement.stories.tsx

@@ -236,8 +236,16 @@ const {
             "description":
                 "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu.",
             "subFinalities": {
-                "deviceInfo": "Informations sur votre appareil",
-                "traffic": "Informations sur votre navigation"
+                "deviceInfo": {
+                    "title": "Informations sur votre appareil",
+                    "description":
+                        "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu."
+                },
+                "traffic": {
+                    "title": "Informations sur votre navigation",
+                    "description":
+                        "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu."
+                }
             }
         }
     },