Add prefix. From openModal to isModalOpen

AtB-AS · Sep 27, 2024 · acfd611 · acfd611
1 parent f457032
commit acfd611
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/src/page-modules/contact/components/input/description-modal.tsx b/src/page-modules/contact/components/input/description-modal.tsx
@@ -4,21 +4,20 @@ import { motion } from 'framer-motion';
 import { FocusScope } from '@react-aria/focus';
 import { MonoIcon } from '@atb/components/icon';
 import { useEffect, useRef } from 'react';
-import { PageText, TranslatedString } from '@atb/translations';
 
 type DescriptionModalProps = {
   title: string;
   description: string;
   ariaLabel: string;
-  openModal: boolean;
+  isModalOpen: boolean;
   closeModal: () => void;
 };
 
 const DescriptionModal = ({
   title,
   description,
   ariaLabel,
-  openModal,
+  isModalOpen,
   closeModal,
 }: DescriptionModalProps) => {
   const modalRef = useRef<HTMLDivElement | null>(null);
@@ -53,7 +52,7 @@ const DescriptionModal = ({
     };
   }, []);
 
-  if (!openModal) return null;
+  if (!isModalOpen) return null;
 
   return (
     <motion.div
@@ -76,7 +75,7 @@ const DescriptionModal = ({
               <Typo.h2 textType="body__primary">{title}</Typo.h2>
               <button
                 type="button"
-                name="closeModal"
+                name="closeModalButton"
                 aria-label={ariaLabel}
                 className={style.iconButton}
                 onClick={closeModal}

diff --git a/src/page-modules/contact/components/input/input.tsx b/src/page-modules/contact/components/input/input.tsx
@@ -25,11 +25,11 @@ export const Input = ({
   onChange,
 }: InputProps) => {
   const { t } = useTranslation();
-  const [openModal, setOpenModal] = useState(false);
-  const displayDescriptionModal = description && openModal; // Condition to avoid rendering of useEffect inside DescriptionModal before opened.
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const displayDescriptionModal = description && isModalOpen; // Condition to avoid rendering of useEffect inside DescriptionModal before opened.
 
   const handleModal = () => {
-    setOpenModal(!openModal);
+    setIsModalOpen(!isModalOpen);
   };
 
   return (
@@ -47,7 +47,7 @@ export const Input = ({
         {description && (
           <button
             type="button"
-            name="openModal"
+            name="openModalButton"
             aria-label={t(PageText.Contact.components.modal.open.ariaLabel)}
             onClick={handleModal}
             className={style.iconButton}
@@ -73,7 +73,7 @@ export const Input = ({
         <DescriptionModal
           title={t(label)}
           description={description}
-          openModal={openModal}
+          isModalOpen={isModalOpen}
           closeModal={handleModal}
           ariaLabel={t(PageText.Contact.components.modal.close.ariaLabel)}
         />