refacto(web): move titles and breadcrumbs inside each impact modal de…

…scription components
incubateur-ademe · Jan 8, 2025 · d702eea · d702eea
1 parent 510e20c
commit d702eea
Show file tree

Hide file tree

Showing 54 changed files with 962 additions and 1,205 deletions.
diff --git a/.../projects/views/project-page/impacts/impact-description-modals/ImpactDescriptionModal.css b/.../projects/views/project-page/impacts/impact-description-modals/ImpactDescriptionModal.css
@@ -0,0 +1,11 @@
+#modal-impacts-description .fr-modal__title {
+  display: none;
+}
+
+#modal-impacts-description.fr-modal .fr-modal__content {
+  padding-top: 0;
+}
+
+#modal-impacts-description .fr-modal__header {
+  padding-bottom: 0;
+}
diff --git a/...cts/views/project-page/impacts/impact-description-modals/ImpactDescriptionModalWizard.tsx b/...cts/views/project-page/impacts/impact-description-modals/ImpactDescriptionModalWizard.tsx
diff --git a/...s/views/project-page/impacts/impact-description-modals/ImpactModalDescriptionProvider.tsx b/...s/views/project-page/impacts/impact-description-modals/ImpactModalDescriptionProvider.tsx
@@ -1,4 +1,6 @@
-import { ReactNode, useState } from "react";
+import { createModal } from "@codegouvfr/react-dsfr/Modal";
+import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";
+import { ReactNode, useEffect, useLayoutEffect, useState } from "react";
 import {
   BuildingFloorAreaUsageDistribution,
   ReconversionProjectImpacts,
@@ -46,6 +48,11 @@ type State = ImpactDescriptionModalCategory;
 
 const INITAL_OPEN_STATE = undefined;
 
+const modal = createModal({
+  id: `modal-impacts-description`,
+  isOpenedByDefault: false,
+});
+
 function ImpactModalDescriptionProvider({
   children,
   projectData,
@@ -62,6 +69,23 @@ function ImpactModalDescriptionProvider({
     setOpenState(INITAL_OPEN_STATE);
   };
 
+  useIsModalOpen(modal, {
+    onConceal: resetOpenState,
+  });
+
+  useEffect(() => {
+    if (openState) {
+      modal.open();
+    }
+  }, [openState]);
+
+  useLayoutEffect(() => {
+    const domModalBody = document.querySelector(`#${modal.id} .fr-modal__body`);
+    if (domModalBody) {
+      domModalBody.scrollTo({ top: 0, left: 0, behavior: "instant" });
+    }
+  }, [openState]);
+
   return (
     <ImpactModalDescriptionContext.Provider
       value={{
@@ -71,11 +95,14 @@ function ImpactModalDescriptionProvider({
       }}
     >
       {children}
-      <ImpactDescriptionModalWizard
-        projectData={projectData}
-        siteData={siteData}
-        impactsData={impactsData}
-      />
+
+      <modal.Component title={undefined} concealingBackdrop={true} size="large">
+        <ImpactDescriptionModalWizard
+          projectData={projectData}
+          siteData={siteData}
+          impactsData={impactsData}
+        />
+      </modal.Component>
     </ImpactModalDescriptionContext.Provider>
   );
 }

diff --git a/...ct-page/impacts/impact-description-modals/economic-balance/EconomicBalanceDescription.tsx b/...ct-page/impacts/impact-description-modals/economic-balance/EconomicBalanceDescription.tsx
@@ -1,10 +1,19 @@
 import ExternalLink from "@/shared/views/components/ExternalLink/ExternalLink";
 
+import ModalHeader from "../shared/ModalHeader";
 import ModalTitleTwo from "../shared/ModalTitleTwo";
 
 const EconomicBalanceDescription = () => {
   return (
     <>
+      <ModalHeader
+        title="📉 Bilan de l'opération"
+        breadcrumbSegments={[
+          {
+            label: "Bilan de l'opération",
+          },
+        ]}
+      />
       <p>
         Le bilan d'opération regroupe l'ensemble des recettes et des dépenses d'une opération
         d'aménagement ou de construction. Son périmètre est donc circonscrit au porteur du projet.

diff --git a/...ws/project-page/impacts/impact-description-modals/economic-balance/ModalContentWizard.tsx b/...ws/project-page/impacts/impact-description-modals/economic-balance/ModalContentWizard.tsx
diff --git a/...rojects/views/project-page/impacts/impact-description-modals/economic-balance/getTitle.ts b/...rojects/views/project-page/impacts/impact-description-modals/economic-balance/getTitle.ts
diff --git a/...act-description-modals/economic-balance/real-estate-acquisition/RealEstateAcquisition.tsx b/...act-description-modals/economic-balance/real-estate-acquisition/RealEstateAcquisition.tsx
@@ -1,6 +1,18 @@
+import ModalHeader from "../../shared/ModalHeader";
+
 const RealEstateAcquisitionDescription = () => {
   return (
     <>
+      <ModalHeader
+        title="🏠 Acquisition du site"
+        breadcrumbSegments={[
+          {
+            label: "Bilan de l'opération",
+            id: "economic-balance",
+          },
+          { label: "Acquisition du site" },
+        ]}
+      />
       <p>
         Il s'agit des dépenses d'acquisition foncière (y compris bâtiments) nécessaires à la
         réalisation du projet, auxquelles s'ajoutent les éventuels frais d'enregistrement (« frais

diff --git a/...t-description-modals/economic-balance/site-reinstatement/SiteReinstatementDescription.tsx b/...t-description-modals/economic-balance/site-reinstatement/SiteReinstatementDescription.tsx
@@ -1,10 +1,23 @@
 import ExternalLink from "@/shared/views/components/ExternalLink/ExternalLink";
 
+import ModalHeader from "../../shared/ModalHeader";
 import ModalTitleTwo from "../../shared/ModalTitleTwo";
 
 const SiteReinstatementDescription = () => {
   return (
     <>
+      <ModalHeader
+        title="🚧 Remise en état de la friche"
+        breadcrumbSegments={[
+          {
+            label: "Bilan de l'opération",
+            id: "economic-balance",
+          },
+
+          { label: "Remise en état de la friche" },
+        ]}
+      />
+
       <p>
         Le recyclage de friches ou de fonciers déjà artificialisés implique le plus souvent des
         études et de travaux du fait des activités passées qu’elles ont accueillies : présence de

diff --git a/...ect-page/impacts/impact-description-modals/environmental/EnvironmentalMainDescription.tsx b/...ect-page/impacts/impact-description-modals/environmental/EnvironmentalMainDescription.tsx
@@ -1,6 +1,12 @@
+import ModalHeader from "../shared/ModalHeader";
+
 const EnvironmentalMainDescription = () => {
   return (
     <>
+      <ModalHeader
+        title="Impacts environnementaux"
+        breadcrumbSegments={[{ label: "Impacts environnementaux" }]}
+      />
       <p>Les impacts environnementaux se décompose en différents types d'indicateurs :</p>
       <ul>
         <li>les quantités de CO2-eq stocké ou d'émissions de CO2-eq évitées,</li>