feat(BBBModal): add testId and closeButtonDataTest props

src/components/Modal/README.md

@@ -41,6 +41,8 @@ import { BBBModal } from 'bbb-ui-components-react';
 | `noFooter`                  | `boolean`                      | `false`   | Hides the modal footer.                                                     |
 | `footerContent`             | `React.ReactNode`              | `null`    | Custom content for the footer.                                              |
 | `stickyFooter`              | `boolean`                      | `true`    | Makes the footer sticky.                                                    |
+| `testId`                    | `string`                       | —         | Test identifier applied to the modal element (native `ReactModal` prop).    |
+| `closeButtonDataTest`       | `string`                       | —         | Test identifier applied to the close button. Omitted if empty.             |
 | `children`                  | `React.ReactNode`              | —         | Modal content.                                                              |
 | `...props`                  | `ReactModal.Props`             | —         | Any other props are passed down to the underlying `react-modal` instance.   |
 

src/components/Modal/component.stories.tsx

@@ -67,6 +67,14 @@ const meta = {
       control: 'boolean',
       description: 'When true, the footer is sticky to the bottom.',
     },
+    testId: {
+      control: 'text',
+      description: 'Test identifier applied to the modal element (native ReactModal prop).',
+    },
+    closeButtonDataTest: {
+      control: 'text',
+      description: 'Test identifier applied to the close button. Omitted if empty.',
+    },
     children: {
       control: false,
       description: 'Modal body content.',

src/components/Modal/component.tsx

@@ -27,9 +27,16 @@ const Modal: React.FC<ModalProps> = ({
   noFooter = false,
   footerContent = null,
   stickyFooter = true,
+  testId,
+  closeButtonDataTest,
   children,
   ...rest
 }) => {
+  let _closeButtonDataTest = closeButtonDataTest;
+
+  if (testId && !closeButtonDataTest) {
+    _closeButtonDataTest = `${testId}-close-button`;
+  }
 
   const renderFooter = useCallback((isSticky: boolean) => (
     <>
@@ -50,6 +57,7 @@ const Modal: React.FC<ModalProps> = ({
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       shouldCloseOnEsc={shouldCloseOnEsc}
       appElement={appElement}
+      testId={testId}
     >
       <Styled.ModalHeader>
         <BBBTypography
@@ -63,6 +71,7 @@ const Modal: React.FC<ModalProps> = ({
           onClick={onRequestClose}
           variant="subtle"
           ariaLabel="close"
+          {...(_closeButtonDataTest ? { dataTest: _closeButtonDataTest } : {})}
         />
       </Styled.ModalHeader>
 

src/components/Modal/types.ts

@@ -18,5 +18,7 @@ export interface ModalProps extends Omit<ReactModal.Props, 'style'> {
   noFooter?: boolean;
   stickyFooter?: boolean;
   footerContent?: React.ReactNode;
+  testId?: string;
+  closeButtonDataTest?: string;
   children: React.ReactNode;
 }