Permettre l'ajout d'un bandeau d'information

README.md

@@ -29,6 +29,9 @@ Several environment variables can be used to tailor the theme to your needs:
 DSFR_THEME_HOME_URL
 DSFR_THEME_SERVICE_TITLE
 DSFR_THEME_BRAND_TOP
+DSFR_NOTICE_TITLE
+DSFR_NOTICE_DESCRIPTION
+DSFR_NOTICE_SEVERITY
 ```
 
 These variables should be made available to the process running Keycloak on your server.
@@ -44,6 +47,12 @@ If you are deploying Keycloak on Kubernetes using Helm, here's how to configure
       value: CodeGouv
     - name: DSFR_THEME_BRAND_TOP
       value: "République<br/>Française"
+    - name: DSFR_NOTICE_TITLE
+      value: Title
+    - name: DSFR_NOTICE_DESCRIPTION
+      value: Description
+    - name: DSFR_NOTICE_SEVERITY
+      value: info
     ...
 ```
 

src/account/Template.tsx

@@ -13,9 +13,11 @@ import { Header as DsfrHeader } from "@codegouvfr/react-dsfr/Header";
 import { Footer as DsfrFooter } from "@codegouvfr/react-dsfr/Footer";
 import { SideMenu } from "@codegouvfr/react-dsfr/SideMenu";
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
+import { Notice } from "@codegouvfr/react-dsfr/Notice";
 import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
 import { fr } from "@codegouvfr/react-dsfr";
 import { getColorScheme } from "../shared/getColorScheme";
+import { getNoticeSeverityOrDefault } from "../shared/noticeSeverity";
 
 startReactDsfr({ defaultColorScheme: getColorScheme() ?? "system" });
 
@@ -83,6 +85,26 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                 ]}
             />
 
+            {(kcContext.properties.DSFR_NOTICE_TITLE || kcContext.properties.DSFR_NOTICE_DESCRIPTION) && (
+                <Notice
+                    severity={getNoticeSeverityOrDefault(kcContext.properties.DSFR_NOTICE_SEVERITY)}
+                    title={
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: kcContext.properties.DSFR_NOTICE_TITLE
+                            }}
+                        />
+                    }
+                    description={
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: kcContext.properties.DSFR_NOTICE_DESCRIPTION
+                            }}
+                        />
+                    }
+                />
+            )}
+
             <div
                 className={fr.cx("fr-container")}
                 style={{

src/kc.gen.tsx

@@ -1,5 +1,5 @@
 // This file is auto-generated by the `update-kc-gen` command. Do not edit it manually.
-// Hash: 3b508e89452af5c2abfd702000cd0e56db6739ec9016997d6b32b8ac1f39195d
+// Hash: 415229e332a814cae52152aa8f2b43dab69ceadc6ed220a115d8a8349abbde0b
 
 /* eslint-disable */
 
@@ -16,18 +16,27 @@ export const themeNames: ThemeName[] = ["DSFR"];
 export type KcEnvName =
     | "DSFR_THEME_HOME_URL"
     | "DSFR_THEME_SERVICE_TITLE"
-    | "DSFR_THEME_BRAND_TOP";
+    | "DSFR_THEME_BRAND_TOP"
+    | "DSFR_NOTICE_TITLE"
+    | "DSFR_NOTICE_DESCRIPTION"
+    | "DSFR_NOTICE_SEVERITY";
 
 export const kcEnvNames: KcEnvName[] = [
     "DSFR_THEME_HOME_URL",
     "DSFR_THEME_SERVICE_TITLE",
-    "DSFR_THEME_BRAND_TOP"
+    "DSFR_THEME_BRAND_TOP",
+    "DSFR_NOTICE_TITLE",
+    "DSFR_NOTICE_DESCRIPTION",
+    "DSFR_NOTICE_SEVERITY"
 ];
 
 export const kcEnvDefaults: Record<KcEnvName, string> = {
     DSFR_THEME_HOME_URL: "",
     DSFR_THEME_SERVICE_TITLE: "",
-    DSFR_THEME_BRAND_TOP: "République<br/>Française"
+    DSFR_THEME_BRAND_TOP: "République<br/>Française",
+    DSFR_NOTICE_TITLE: "Mon super titre",
+    DSFR_NOTICE_DESCRIPTION: "Ma super description",
+    DSFR_NOTICE_SEVERITY: "info"
 };
 
 /**

src/login/Template.tsx

@@ -12,10 +12,12 @@ import { redirectUrlOrigin } from "./shared/redirectUrlOrigin";
 import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
 import { Footer as DSFRFooter } from "@codegouvfr/react-dsfr/Footer";
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
+import { Notice } from "@codegouvfr/react-dsfr/Notice";
 import { fr } from "@codegouvfr/react-dsfr";
 import "@codegouvfr/react-dsfr/main.css";
 import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
 import { getColorScheme } from "../shared/getColorScheme";
+import { getNoticeSeverityOrDefault } from "../shared/noticeSeverity";
 
 startReactDsfr({ defaultColorScheme: getColorScheme() ?? "system" });
 
@@ -90,6 +92,25 @@ export default function Template(props: Props) {
                 }
             />
             <main role="main" id="content">
+                {(kcContext.properties.DSFR_NOTICE_TITLE || kcContext.properties.DSFR_NOTICE_DESCRIPTION) && (
+                    <Notice
+                        severity={getNoticeSeverityOrDefault(kcContext.properties.DSFR_NOTICE_SEVERITY)}
+                        title={
+                            <span
+                                dangerouslySetInnerHTML={{
+                                    __html: kcContext.properties.DSFR_NOTICE_TITLE
+                                }}
+                            />
+                        }
+                        description={
+                            <span
+                                dangerouslySetInnerHTML={{
+                                    __html: kcContext.properties.DSFR_NOTICE_DESCRIPTION
+                                }}
+                            />
+                        }
+                    />
+                )}
                 <div className={fr.cx("fr-container", "fr-container--fluid", "fr-my-md-14v")}>
                     <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters", "fr-grid-row--center")}>
                         <div className={fr.cx("fr-col-12", "fr-col-md-8", "fr-col-lg-6")}>

src/shared/noticeSeverity.ts

@@ -0,0 +1,12 @@
+export const allowedNoticeSeverities = ["info", "warning", "alert"] as const;
+export type NoticeSeverity = typeof allowedNoticeSeverities[number];
+
+export function isNoticeSeverity(value: unknown): value is NoticeSeverity {
+    return (allowedNoticeSeverities as readonly string[]).includes(value as string);
+}
+
+export function getNoticeSeverityOrDefault(value: unknown, fallback: NoticeSeverity = "info"): NoticeSeverity {
+    return isNoticeSeverity(value) ? value : fallback;
+}
+
+

vite.config.ts

@@ -13,6 +13,9 @@ export default defineConfig({
                 { name: "DSFR_THEME_HOME_URL", default: "" },
                 { name: "DSFR_THEME_SERVICE_TITLE", default: "" },
                 { name: "DSFR_THEME_BRAND_TOP", default: "République<br/>Française" },
+                { name: "DSFR_NOTICE_TITLE", default: "" },
+                { name: "DSFR_NOTICE_DESCRIPTION", default: "" },
+                { name: "DSFR_NOTICE_SEVERITY", default: "info" },
             ]
         })
     ]