Created FullscreenModal component (#670)

Author: dlymonk

packages/public/common-ui-web/src/components/FullscreenModal/FullscreenModal.styles.ts

@@ -0,0 +1,37 @@
+import { Styles } from '@monkvision/types';
+
+export const styles: Styles = {
+  container: {
+    width: '100%',
+    height: '100%',
+    top: '0',
+    left: '0',
+    position: 'fixed',
+    zIndex: '999',
+    backgroundColor: 'black',
+  },
+  title: {
+    position: 'absolute',
+    top: '8px',
+    left: '50%',
+    transform: 'translate(-50%)',
+    padding: '8px',
+    margin: '8px',
+    fontWeight: '500',
+    fontSize: '20px',
+    color: 'white',
+  },
+  closeButton: {
+    cursor: 'pointer',
+    position: 'absolute',
+    padding: '8px',
+    top: '8px',
+    right: '8px',
+  },
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+  },
+};

packages/public/common-ui-web/src/components/FullscreenModal/FullscreenModal.tsx

@@ -0,0 +1,32 @@
+import { JSX } from 'react';
+import { Button } from '../Button';
+import { styles } from './FullscreenModal.styles';
+
+/**
+ * Props that can be passed to the Fullscreen Modal component.
+ */
+export interface FullscreenModalProps {
+  show: boolean;
+  onClose?: () => void;
+  title?: string;
+  children?: string | JSX.Element | JSX.Element[];
+}
+
+/**
+ * Generic Fullscreen Modal component used to display a full screen modal on top of the screen.
+ */
+export function FullscreenModal({ show, onClose, title = '', children }: FullscreenModalProps) {
+  return show ? (
+    <div style={styles['container']} data-testid='container'>
+      <div style={styles['content']}> {children}</div>
+      <div style={styles['title']}>{title}</div>
+      <Button
+        style={styles['closeButton']}
+        icon='close'
+        variant='text'
+        primaryColor={'text-white'}
+        onClick={onClose}
+      />
+    </div>
+  ) : null;
+}

packages/public/common-ui-web/src/components/FullscreenModal/index.ts

@@ -0,0 +1 @@
+export { FullscreenModal } from './FullscreenModal';

packages/public/common-ui-web/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './TakePictureButton';
 export * from './DynamicSVG';
 export * from './SightOverlay';
 export * from './SwitchButton';
+export * from './FullscreenModal';

packages/public/common-ui-web/test/components/FullscreenModal.test.tsx

@@ -0,0 +1,33 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { FullscreenModal } from '../../src';
+
+describe('FullsreenModal component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const mockOnClose = jest.fn();
+  const title = 'test title';
+  const content = 'test content';
+
+  it('should not render modal when show is false', () => {
+    const { unmount } = render(<FullscreenModal show={false}></FullscreenModal>);
+    expect(screen.queryByText(title)).toBeNull();
+    expect(screen.queryByText(content)).toBeNull();
+
+    unmount();
+  });
+
+  it('renders modal with title and content when show is true', () => {
+    const { unmount } = render(
+      <FullscreenModal show={true} onClose={mockOnClose} title={title}>
+        {content}
+      </FullscreenModal>,
+    );
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(screen.getByText(content)).toBeInTheDocument();
+
+    unmount();
+  });
+});