chore(Modal): add more testing data attributes

src/Modal.tsx

@@ -15,6 +15,14 @@ export interface ModalProps {
     cy?: string
     test?: string
   }
+  dataOverlay?: {
+    cy?: string
+    test?: string
+  }
+  dataContent?: {
+    cy?: string
+    test?: string
+  }
   className?: {
     overlayOverride?: string
     contentOverride?: string
@@ -47,6 +55,8 @@ export interface ModalProps {
  *
  * @param id - The id of the modal.
  * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy)
+ * @param dataOverlay - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the overlay
+ * @param dataContent - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the content
  * @param trigger - The optional trigger that opens the modal, if the state is not managed by some parent component already.
  * @param title - The optional title of the modal.
  * @param children - The content of the modal.
@@ -67,6 +77,8 @@ export interface ModalProps {
 export function Modal({
   id,
   data,
+  dataOverlay,
+  dataContent,
   trigger,
   title = '',
   children,
@@ -105,6 +117,8 @@ export function Modal({
         'fixed bottom-0 left-0 right-0 top-0 z-20 flex justify-center gap-4 bg-uzh-grey-100 bg-opacity-50 p-4 md:items-center',
         className?.overlay
       )}
+      data-cy={dataOverlay?.cy}
+      data-test={dataOverlay?.test}
     >
       {(onPrev || onNext) && (
         <Button
@@ -129,6 +143,8 @@ export function Modal({
         onPointerDownOutside={
           onPrev || onNext || escapeDisabled ? undefined : onClose
         }
+        data-cy={dataContent?.cy}
+        data-test={dataContent?.test}
       >
         <div className="flex flex-initial flex-row items-end justify-between">
           <div>