Merge pull request #232 from codegouvfr/feature/add-consent-manager-placeholder

Feature / add consentManager Placeholder component

Author: garronej

src/consentManagement/Placeholder.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef, memo } from "react";
+import { fr } from "../fr";
+import { cx } from "../tools/cx";
+import { Equals, assert } from "tsafe";
+import { createComponentI18nApi } from "../i18n";
+import { symToStr } from "tsafe/symToStr";
+
+export type PlaceholderProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    titleAs?: "span" | `h${1 | 2 | 3 | 4 | 5 | 6}`;
+    classes?: Partial<Record<"root" | "title" | "description" | "button", string>>;
+    title: string;
+    description: string;
+    onGranted: () => void;
+};
+
+export const Placeholder = memo(
+    forwardRef<HTMLDivElement, PlaceholderProps>((props, ref) => {
+        const { t } = useTranslation();
+        const {
+            className,
+            titleAs: HtmlTitleTag = "h4",
+            classes = {},
+            style,
+            title,
+            description,
+            onGranted,
+            ...rest
+        } = props;
+        assert<Equals<keyof typeof rest, never>>();
+        return (
+            <div
+                className={cx(fr.cx("fr-consent-placeholder"), classes.root, className)}
+                ref={ref}
+                style={style}
+                {...rest}
+            >
+                <HtmlTitleTag className={cx(fr.cx("fr-h6", "fr-mb-2v"), classes.title)}>
+                    {title}
+                </HtmlTitleTag>
+                <p className={cx(fr.cx("fr-mb-6v"), classes.title)}>{description}</p>
+                <button
+                    className={cx(fr.cx("fr-btn"), classes.button)}
+                    title={description}
+                    onClick={onGranted}
+                >
+                    {t("enable message")}
+                </button>
+            </div>
+        );
+    })
+);
+
+const { useTranslation, addPlaceholderTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ Placeholder }),
+    "frMessages": {
+        /* spell-checker: disable */
+        "enable message": "Autoriser"
+        /* spell-checker: enable */
+    }
+});
+
+addPlaceholderTranslations({
+    "lang": "en",
+    "messages": {
+        "enable message": "Authorize"
+    }
+});
+
+addPlaceholderTranslations({
+    "lang": "es",
+    "messages": {
+        /* spell-checker: disable */
+        "enable message": "Permitir"
+        /* spell-checker: enable */
+    }
+});
+
+export { addPlaceholderTranslations };

stories/ConsentManagement.stories.tsx

@@ -3,6 +3,7 @@ import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
 import { createConsentManagement } from "../dist/consentManagement";
 import { localStorageKeyPrefix } from "../dist/consentManagement/createConsentManagement";
+import { Placeholder } from "../dist/consentManagement/Placeholder";
 import { Footer } from "../dist/Footer";
 import { Button } from "../dist/Button";
 import { fr } from "../dist/fr";
@@ -263,7 +264,7 @@ const {
 });
 
 function Story() {
-    const { finalityConsent } = useConsent();
+    const { finalityConsent, assumeConsent } = useConsent();
 
     return (
         <>
@@ -272,6 +273,14 @@ function Story() {
             ) : (
                 <pre>{JSON.stringify({ finalityConsent }, null, 2)}</pre>
             )}
+            {finalityConsent && finalityConsent.analytics === false && (
+                <Placeholder
+                    title="Analytics are not enabled"
+                    description="We use cookies to measure the audience of our site and improve its content."
+                    onGranted={() => assumeConsent("analytics")}
+                    titleAs="span"
+                />
+            )}
             <Button
                 onClick={() => {
                     Object.keys(localStorage)

test/types/consentManagement.ts renamed to test/types/consentManagement.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import React from "react";
 import { assert, type Equals } from "tsafe/assert";
 import type {
     ExtractFinalityFromFinalityDescription,
     FinalityConsent
 } from "../../src/consentManagement/types";
+import { Placeholder } from "../../src/consentManagement/Placeholder";
 
 {
     type Input =
@@ -15,17 +17,17 @@ import type {
         | "advertising";
 
     type ExpectedOutput = {
-        analytics: boolean;
-        personalization: boolean;
-        advertising: boolean;
-        statistics: {
-            traffic: boolean;
-            deviceType: boolean;
-            browser: boolean;
+        readonly analytics: boolean;
+        readonly personalization: boolean;
+        readonly advertising: boolean;
+        readonly statistics: {
+            readonly traffic: boolean;
+            readonly deviceType: boolean;
+            readonly browser: boolean;
         } & {
-            isFullConsent: boolean;
+            readonly isFullConsent: boolean;
         };
-        isFullConsent: boolean;
+        readonly isFullConsent: boolean;
     };
 
     type ActualOutput = FinalityConsent<Input>;
@@ -74,3 +76,20 @@ import type {
 
     assert<Equals<Got, Expected>>();
 }
+
+{
+    <Placeholder
+        title="Instagram"
+        description="We use cookies to display Instagram content."
+        onGranted={() => console.log("clicked on enable button")}
+    />;
+}
+
+{
+    <Placeholder
+        title="Instagram"
+        description="We use cookies to display Instagram content."
+        onGranted={() => console.log("clicked on enable button")}
+        titleAs="h2"
+    />;
+}