feat(frontend): add extra-large size to the PrecisionModal

MTES-MCT · Jan 24, 2025 · 312edc1 · 312edc1
1 parent 2dbf8c7
commit 312edc1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/frontend/src/components/Precision/PrecisionModalNext.tsx b/frontend/src/components/Precision/PrecisionModalNext.tsx
@@ -33,7 +33,7 @@ function createPrecisionModalNext() {
         <confirmationModal.Component
           {...rest}
           title="Précisez la situation du logement"
-          size="large"
+          size="extra-large"
           onSubmit={() => {
             onSubmit(internalValue);
           }}

diff --git a/frontend/src/components/modals/ConfirmationModal/ConfirmationModalNext.tsx b/frontend/src/components/modals/ConfirmationModal/ConfirmationModalNext.tsx
@@ -1,5 +1,5 @@
 import { createModal, ModalProps } from '@codegouvfr/react-dsfr/Modal';
-import { JSX } from 'react';
+import { JSX, useEffect } from 'react';
 
 export type ConfirmationModalOptions = {
   id: string;
@@ -9,7 +9,8 @@ export type ConfirmationModalOptions = {
   isOpenedByDefault?: boolean;
 };
 
-export interface ConfirmationModalProps extends ModalProps {
+export interface ConfirmationModalProps extends Omit<ModalProps, 'size'> {
+  size?: ModalProps['size'] | 'extra-large';
   onSubmit?(): void;
 }
 
@@ -22,6 +23,17 @@ export function createConfirmationModal(options: ConfirmationModalOptions) {
   return {
     ...modal,
     Component(props: ConfirmationModalProps): JSX.Element {
+      const { size, onSubmit, ...rest } = props;
+
+      useEffect(() => {
+        if (size === 'extra-large') {
+          const container = document
+            .getElementById(options.id)
+            ?.querySelector('.fr-col-12');
+          container?.classList?.remove('fr-col-md-10', 'fr-col-lg-8');
+        }
+      }, [size]);
+
       return (
         <modal.Component
           buttons={[
@@ -32,11 +44,12 @@ export function createConfirmationModal(options: ConfirmationModalOptions) {
             },
             {
               children: 'Confirmer',
-              onClick: props.onSubmit,
+              onClick: onSubmit,
               doClosesModal: true
             }
           ]}
-          {...props}
+          size={size === 'extra-large' ? 'large' : size}
+          {...rest}
         />
       );
     }