refactor(design-system): Rename props

Signed-off-by: Jeroen Branje <[email protected]>
ASCS-eV · Mar 6, 2024 · 3e1d087 · 3e1d087
1 parent 1ed09c1
commit 3e1d087
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 20 deletions.
diff --git a/apps/design-system/src/components/Atoms/Dialog/Dialog.stories.tsx b/apps/design-system/src/components/Atoms/Dialog/Dialog.stories.tsx
@@ -8,15 +8,15 @@ export default {
   title: 'Components/Dialog',
 } as Meta
 
-const Template: Story = ({ open, setOpen, heading, description }) => (
-  <Dialog open={open} setOpen={setOpen} heading={heading} description={description} action={<button>CLICK</button>} />
+const Template: Story = ({ isOpen, setShowHide, heading, description }) => (
+  <Dialog isOpen={isOpen} setShowHide={setShowHide} heading={heading} description={description} action={<button>CLICK</button>} />
 )
 
 export const DialogStory = Template.bind({})
 
 DialogStory.args = {
-  open: true,
-  setOpen: () => {},
+  isOpen: true,
+  setShowHide: () => {},
   heading: 'Heading',
   description: 'Description',
 }
diff --git a/apps/design-system/src/components/Atoms/Dialog/Dialog.tsx b/apps/design-system/src/components/Atoms/Dialog/Dialog.tsx
@@ -3,17 +3,17 @@ import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { FC, Fragment, JSXElementConstructor, ReactElement } from 'react'
 
 interface DialogProps {
-  open: boolean
-  setOpen: (x: boolean) => void
+  isOpen: boolean
+  setShowHide: (x: boolean) => void
   heading: string | ReactElement<any, string | JSXElementConstructor<any>>
   description: string | ReactElement<any, string | JSXElementConstructor<any>>
   action: ReactElement
 }
 
-export const Dialog: FC<DialogProps> = ({ open, setOpen, heading, description, action }) => {
+export const Dialog: FC<DialogProps> = ({ isOpen, setShowHide, heading, description, action }) => {
   return (
-    <Transition.Root show={open} as={Fragment}>
-      <ReactDialog as="div" className="relative z-50" onClose={setOpen}>
+    <Transition.Root show={isOpen} as={Fragment}>
+      <ReactDialog as="div" className="relative z-50" onClose={setShowHide}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -43,7 +43,7 @@ export const Dialog: FC<DialogProps> = ({ open, setOpen, heading, description, a
                     type="button"
                     className="rounded-md bg-white dark:bg-gray-900 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-900 focus:ring-offset-0"
                     onClick={() => {
-                      setOpen(false)
+                      setShowHide(false)
                     }}
                   >
                     <span className="sr-only">Close</span>
@@ -72,7 +72,7 @@ export const Dialog: FC<DialogProps> = ({ open, setOpen, heading, description, a
                     type="button"
                     className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                     onClick={() => {
-                      setOpen(false)
+                      setShowHide(false)
                     }}
                   >
                     Cancel

diff --git a/apps/design-system/src/components/Atoms/Dialog/Dialog.ui.test.tsx b/apps/design-system/src/components/Atoms/Dialog/Dialog.ui.test.tsx
@@ -6,13 +6,13 @@ describe('atoms/Dialog', () => {
   describe('render', () => {
     it('should render Dialog with content', () => {
       // when ... rendering component
-      const setOpenStub = jest.fn()
+      const setShowHideStub = jest.fn()
       render(
         <Dialog
           heading="HEADING"
           description="DESCRIPTION"
-          open={true}
-          setOpen={setOpenStub}
+          isOpen={true}
+          setShowHide={setShowHideStub}
           action={<button>BUTTON</button>}
         />,
       )

diff --git a/apps/envited.ascs.digital/modules/Users/UsersDialogConfirm.tsx b/apps/envited.ascs.digital/modules/Users/UsersDialogConfirm.tsx
@@ -2,7 +2,7 @@
 
 import { Dialog } from '@envited-marketplace/design-system'
 import { TrashIcon } from '@heroicons/react/24/outline'
-import { FC, Fragment, ReactElement, useState } from 'react'
+import { FC, useState } from 'react'
 
 import { useTranslation } from '../../common/i18n'
 import { useNotification } from '../../common/notifications'
@@ -15,29 +15,29 @@ interface DialogConfirmProps {
 export const UserDialogConfirm: FC<DialogConfirmProps> = ({ id }) => {
   const { t } = useTranslation('Users')
   const { error, success } = useNotification()
-  const [open, setOpen] = useState(true)
+  const [showDialog, setShowDialog] = useState(true)
 
   const deleteUserWithId = (id: string) => async () => {
     try {
       await deleteUser(id)
       success(t('[Notification] success'))
-      setOpen(false)
+      setShowDialog(false)
     } catch (e) {
       error(t('[Notification] error'))
     }
   }
 
   return (
     <>
-      <button className="text-white bg-red-500 hover:bg-red-600 p-1.5 rounded-lg" onClick={() => setOpen(true)}>
+      <button className="text-white bg-red-500 hover:bg-red-600 p-1.5 rounded-lg" onClick={() => setShowDialog(true)}>
         <span className="sr-only">{t('[Button] deactivate')}</span>
         <TrashIcon className="w-3" />
       </button>
       <Dialog
         heading={t('[Heading] deactivate account')}
         description={t('[Description] deactivate account')}
-        open={open}
-        setOpen={setOpen}
+        isOpen={showDialog}
+        setShowHide={setShowDialog}
         action={
           <form action={deleteUserWithId(id)}>
             <button className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto">