doc

Author: lsagetlethias

src/ConsentBanner/ConsentBannerContent.tsx

@@ -1,32 +1,33 @@
-import React, { ElementType, PropsWithChildren } from "react";
+import React from "react";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in doc
+import { FooterProps } from "../Footer";
 import { fr } from "../fr";
+import { getLink } from "../link";
 import { ConsentBannerActions, ConsentBannerActionsProps } from "./ConsentBannerActions";
 
 export interface ConsentBannerContentProps extends ConsentBannerActionsProps {
+    /** Usually the same as {@link FooterProps.personalDataLinkProps} */
     gdprPageLink: string;
-    gdprPageLinkAs?: ElementType<PropsWithChildren<{ href: any }>> | string;
+    /** Current website name */
     siteName: string;
 }
 
 export const ConsentBannerContent = ({
     gdprPageLink,
-    gdprPageLinkAs: GdprPageLinkAs = "a",
     siteName,
     services,
     consentModalButtonProps
 }: ConsentBannerContentProps) => {
+    const { Link } = getLink();
     return (
         <div className={fr.cx("fr-consent-banner")}>
             <h2 className={fr.cx("fr-h6")}>À propos des cookies sur {siteName}</h2>
             <div className="fr-consent-banner__content">
                 <p className="fr-text--sm">
                     Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les
                     services disponibles sur ce site. Pour en savoir plus, visitez la page{" "}
-                    <GdprPageLinkAs href={gdprPageLink}>
-                        Données personnelles et cookies
-                    </GdprPageLinkAs>
-                    . Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous
-                    souhaitez activer.
+                    <Link href={gdprPageLink}>Données personnelles et cookies</Link>. Vous pouvez, à
+                    tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.
                 </p>
             </div>
             <ConsentBannerActions

src/ConsentBanner/ConsentManager.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import ButtonsGroup from "../ButtonsGroup";
 import { fr } from "../fr";
 import { GdprService } from "../gdpr";
+import { getLink } from "../link";
 import { useGdprStore } from "../useGdprStore";
 import { ConsentBannerContentProps } from "./ConsentBannerContent";
 
@@ -14,9 +15,9 @@ type ConsentManagerProps = Required<Omit<ConsentBannerContentProps, "siteName">>
 export const ConsentManager = ({
     gdprPageLink,
     services,
-    gdprPageLinkAs: GdprPageLinkAs,
     consentModalButtonProps
 }: ConsentManagerProps) => {
+    const { Link } = getLink();
     const setConsent = useGdprStore(state => state.setConsent);
     const setFirstChoiceMade = useGdprStore(state => state.setFirstChoiceMade);
     const consents = useGdprStore(state => state.consents);
@@ -70,9 +71,7 @@ export const ConsentManager = ({
                     >
                         Préférences pour tous les services.
                         <br />
-                        <GdprPageLinkAs href={gdprPageLink}>
-                            Données personnelles et cookies
-                        </GdprPageLinkAs>
+                        <Link href={gdprPageLink}>Données personnelles et cookies</Link>
                     </legend>
                     <div className={fr.cx("fr-consent-service__radios")}>
                         <ButtonsGroup

src/ConsentBanner/index.tsx

@@ -19,7 +19,7 @@ export { consentModalButtonProps };
 export type ConsentBannerProps = Omit<ConsentBannerContentProps, "consentModalButtonProps">;
 
 export const ConsentBanner = memo((props: ConsentBannerProps) => {
-    const { gdprPageLink, gdprPageLinkAs: GdprPageLinkAs = "a", services } = props;
+    const { gdprPageLink, services } = props;
 
     const firstChoiceMade = useGdprStore(state => state.firstChoiceMade);
     const __inited = useGdprStore(state => state.__inited);
@@ -34,7 +34,6 @@ export const ConsentBanner = memo((props: ConsentBannerProps) => {
             <ConsentModal title="Panneau de gestion des cookies" size="large">
                 <ConsentManager
                     gdprPageLink={gdprPageLink}
-                    gdprPageLinkAs={GdprPageLinkAs}
                     services={services}
                     consentModalButtonProps={consentModalButtonProps}
                 />

src/gdpr/GdprStore.tsx

@@ -33,7 +33,6 @@ export const GdprStoreProvider = ({ children }: PropsWithChildren) => {
     const [__inited, setInited] = useState(defaultStore.__inited);
 
     const setConsentImpl: GdprStore["setConsent"] = (serviceName, consent) => {
-        console.log("In provider setConsent", consents, serviceName, consent);
         setConsents({ ...consents, [serviceName]: consent });
     };
 

src/gdpr/types.ts

@@ -1,15 +1,11 @@
-type UnknownMapping = string & {
-    _?: never & symbol;
-};
-
 /**
- * format: `<serviceName>: <isMandatory>`
+ * format: `<serviceName>: never`
  * @example
  * ```ts
  * declare module "@codegouvfr/react-dsfr/gdpr" {
  *   interface RegisterGdprServices {
- *     matomo: true;
- *     youtube: false;
+ *     matomo: never;
+ *     youtube: never;
  *   }
  * }
  * ```
@@ -18,12 +14,20 @@ type UnknownMapping = string & {
 export interface RegisterGdprServices {}
 export type GdprServiceName = keyof RegisterGdprServices extends never
     ? string
-    : keyof RegisterGdprServices | UnknownMapping;
+    :
+          | keyof RegisterGdprServices
+          | (string & {
+                _?: never & symbol;
+            });
 export type Consents = Record<GdprServiceName, boolean | undefined>;
 
 export interface GdprService {
+    /** Will be displayed in consent modal. */
     description: string;
+    /** If true, consent for this service will always be true and not switchable. */
     mandatory?: boolean;
+    /** Technical name. Not displayed. */
     name: GdprServiceName;
+    /** Displayed name. */
     title: string;
 }

test/integration/next-appdir/app/layout.tsx

@@ -54,7 +54,7 @@ export default function RootLayout({ children }: { children: JSX.Element; }) {
 				}}
 			>
 				<DsfrProvider defaultColorScheme={defaultColorScheme}>
-					<ConsentBanner gdprPageLinkAs={Link} gdprPageLink="/mui" siteName='Next Test App' services={[
+					<ConsentBanner gdprPageLink="/mui" siteName='Next Test App' services={[
 						{
 							name: "matomo",
 							title: "Matomo",