@squiz/generic-browser-lib 1.35.1-alpha.34

package/src/Modal/Modal.spec.tsx

@@ -0,0 +1,269 @@
+import React from 'react';
+import { screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ModalTrigger } from './ModalTrigger';
+
+describe('Modal', () => {
+  it('Modal is closed by default', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testingid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+    expect(screen.queryByTestId('modal')).toBeFalsy();
+  });
+
+  it('Modal opens when triggered', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+  });
+
+  it('Clicking outside the modal closes it', async () => {
+    render(
+      <div data-testid="outside">
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+
+    user.click(screen.getByTestId('outside'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeFalsy();
+    });
+  });
+
+  it('ESC closes modal', async () => {
+    render(
+      <div data-testid="outside">
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+
+    user.type(screen.getByTestId('modal'), '{escape}');
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeFalsy();
+    });
+  });
+
+  it('Invoking onClose function closes modal', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button data-testid="closeButton" type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+
+    user.click(screen.getByTestId('closeButton'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeFalsy();
+    });
+  });
+
+  it('Modal does not open if modal trigger button is disabled', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel isDisabled={true}>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).not.toBeTruthy();
+    });
+  });
+
+  it('Focus is trapped within modal', async () => {
+    render(
+      <div>
+        <button />
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button data-testid="closeButton" type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+
+    user.type(screen.getByTestId('modal'), '{tab}');
+    user.type(screen.getByTestId('modal'), '{tab}');
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('closeButton')).toHaveFocus();
+    });
+  });
+
+  it('Focus should start on the dialog', async () => {
+    render(
+      <div>
+        <button />
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div data-testid="title" {...titleProps}>
+                Testing
+              </div>
+              <button data-testid="closeButton" type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+      expect(screen.queryByRole('dialog')).toHaveFocus();
+    });
+  });
+
+  it('Title props provides id for dialog link', async () => {
+    let titleId: string | undefined = '';
+    render(
+      <div>
+        <button />
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => {
+            titleId = titleProps.id;
+
+            return (
+              <div data-testid="modal">
+                <div data-testid="title" {...titleProps}>
+                  Testing
+                </div>
+                <button data-testid="closeButton" type="button" onClick={onClose}>
+                  Close
+                </button>
+              </div>
+            );
+          }}
+        </ModalTrigger>
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+      expect(screen.queryByTestId('title')).toHaveAttribute('id'); // Title was provided an id by 'titleProps'
+      expect(screen.queryByRole('dialog')).toHaveAttribute('aria-labelledby', titleId); // 'titleProps' id is added to the dialog label
+    });
+  });
+});

package/src/Modal/Modal.tsx

@@ -0,0 +1,55 @@
+import React, { useRef } from 'react';
+
+import { Overlay, useModalOverlay, useDialog } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+/*
+  This has to be a separate element otherwise the focus trap fails. Assuming this is because it needs
+  to fit inside the 'Overlay' as a form of context.
+*/
+function ModalContent({
+  children,
+  ...props
+}: {
+  children: (titleProps: DOMAttributes<FocusableElement>) => React.ReactElement;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { dialogProps, titleProps } = useDialog(props, ref);
+
+  return (
+    <div
+      {...dialogProps}
+      ref={ref}
+      className="z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg"
+    >
+      {children(titleProps)}
+    </div>
+  );
+}
+
+export type ModalProps = {
+  isDismissable?: boolean;
+  state: OverlayTriggerState;
+  overlayProps: DOMAttributes<FocusableElement>;
+  children: (titleProps: DOMAttributes<FocusableElement>) => React.ReactElement; // Returns the title props from the 'ModalContent'
+};
+export function Modal({ isDismissable, state, overlayProps, children, ...props }: ModalProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { modalProps, underlayProps } = useModalOverlay({ isDismissable, ...props }, state, ref);
+
+  return (
+    <Overlay>
+      <div className="squiz-gb-scope">
+        <div
+          {...underlayProps}
+          className="h-full z-[9998] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25"
+        >
+          <div {...modalProps} ref={ref} className="h-full flex items-center justify-center">
+            <ModalContent {...overlayProps}>{(titleProps) => children(titleProps)}</ModalContent>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  );
+}

package/src/Modal/ModalContainer.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { ModalTrigger } from './ModalTrigger';
+
+export default {
+  title: 'Modal',
+  component: ModalTrigger,
+} as Meta<typeof ModalTrigger>;
+
+const Template: StoryFn<typeof ModalTrigger> = ({ label }) => {
+  return (
+    <>
+      <ModalTrigger label={label} showLabel>
+        {(onClose, titleProps) => (
+          <div>
+            <div {...titleProps}>Testing</div>
+            <button type="button" onClick={onClose}>
+              Close
+            </button>
+          </div>
+        )}
+      </ModalTrigger>
+      <div style={{ height: '150vh' }} />
+    </>
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  label: 'Resource Browser Modal',
+};

package/src/Modal/ModalOpeningButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useButton, AriaButtonProps } from 'react-aria';
+
+interface ModalOpeningButtonProps extends AriaButtonProps<'button'> {
+  className?: string;
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+  title?: string;
+}
+
+export function ModalOpeningButton({ className, children, title, ...props }: ModalOpeningButtonProps) {
+  const ref = React.useRef<HTMLButtonElement>(null);
+
+  const { buttonProps } = useButton(props, ref);
+  return (
+    <button {...buttonProps} ref={ref} className={className} title={title}>
+      {children}
+    </button>
+  );
+}

package/src/Modal/ModalTrigger.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useOverlayTrigger } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import clsx from 'clsx';
+
+import { Modal } from './Modal';
+import { ModalOpeningButton } from './ModalOpeningButton';
+
+export function ModalTrigger({
+  label,
+  showLabel,
+  icon,
+  isDisabled,
+  children,
+  ...props
+}: {
+  label: string;
+  showLabel?: boolean;
+  icon?: React.ReactNode;
+  isDisabled?: boolean;
+  children: (onClose: () => void, titleProps: DOMAttributes<FocusableElement>) => React.ReactElement; // Child needs to be a functions which generates the 'content' so we can pass the onClose function and title aria props
+}) {
+  const state = useOverlayTriggerState(props);
+  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state);
+
+  let ariaAttr: React.AriaAttributes = {};
+  if (!showLabel) {
+    ariaAttr = { ...ariaAttr, 'aria-label': label };
+  }
+
+  return (
+    <>
+      <ModalOpeningButton
+        type="button"
+        {...triggerProps}
+        {...ariaAttr}
+        isDisabled={isDisabled}
+        className={clsx(
+          'flex p-1 px-1.5 rounded mr-auto text-blue-300 hover:bg-blue-100 focus:bg-blue-100 focus:outline-none',
+          isDisabled && 'hover:bg-transparent cursor-not-allowed text-gray-600',
+        )}
+      >
+        {icon}
+        {showLabel && <span className="ml-1 text-sm font-semibold leading-4">{label}</span>}
+      </ModalOpeningButton>
+      {state.isOpen && (
+        <Modal isDismissable state={state} overlayProps={overlayProps}>
+          {(titleProps) => children(state.close, titleProps)}
+        </Modal>
+      )}
+    </>
+  );
+}

package/src/PreviewPanel/PreviewModal.spec.tsx

@@ -0,0 +1,164 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import { screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { useOverlayTrigger } from 'react-aria';
+
+import PreviewModal from './PreviewModal';
+
+function PreviewModalTestWrapper({
+  constructFunction,
+}: {
+  constructFunction: (state: OverlayTriggerState, overlayProps: DOMAttributes<FocusableElement>) => JSX.Element;
+}) {
+  const previewModalState = useOverlayTriggerState({ isOpen: true });
+  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
+
+  return constructFunction(previewModalState, overlayProps);
+}
+
+describe('PreviewModal', () => {
+  it('Modal is open by default', async () => {
+    const onClose = jest.fn();
+
+    render(
+      <PreviewModalTestWrapper
+        constructFunction={(state, overlayProps) => {
+          return (
+            <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+              Modal Content
+            </PreviewModal>
+          );
+        }}
+      />,
+    );
+    expect(screen.queryByRole('dialog')).toBeTruthy();
+  });
+
+  it('Clicking outside the modal calls onClose', async () => {
+    const onClose = jest.fn();
+    render(
+      <div data-testid="outside">
+        <PreviewModalTestWrapper
+          constructFunction={(state, overlayProps) => {
+            return (
+              <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+                Modal Content
+              </PreviewModal>
+            );
+          }}
+        />
+        ,
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+
+    // Modal Open
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeTruthy();
+    });
+
+    await user.click(screen.getByTestId('outside'));
+
+    // Modal Closed
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it('ESC closes modal', async () => {
+    const onClose = jest.fn();
+    render(
+      <div data-testid="outside">
+        <PreviewModalTestWrapper
+          constructFunction={(state, overlayProps) => {
+            return (
+              <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+                Modal Content
+              </PreviewModal>
+            );
+          }}
+        />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+
+    // Modal Open
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeTruthy();
+    });
+
+    user.type(screen.getByRole('dialog'), '{escape}');
+
+    // Modal Closed
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it('Focus is trapped within modal', async () => {
+    const onClose = jest.fn();
+
+    render(
+      <div>
+        <button />
+        <PreviewModalTestWrapper
+          constructFunction={(state, overlayProps) => {
+            return (
+              <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+                Modal Content
+              </PreviewModal>
+            );
+          }}
+        />
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeTruthy();
+    });
+
+    user.type(screen.getByRole('dialog'), '{tab}');
+    user.type(screen.getByRole('dialog'), '{tab}');
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'Close details' })).toHaveFocus();
+    });
+  });
+
+  it('Focus should start on the dialog', async () => {
+    const onClose = jest.fn();
+
+    render(
+      <div>
+        <button />
+        <PreviewModalTestWrapper
+          constructFunction={(state, overlayProps) => {
+            return (
+              <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+                Modal Content
+              </PreviewModal>
+            );
+          }}
+        />
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toHaveFocus();
+    });
+  });
+});

package/src/PreviewPanel/PreviewModal.tsx

@@ -0,0 +1,94 @@
+import React, { ReactNode, useRef, useEffect } from 'react';
+import { Overlay, useModalOverlay, useDialog, useKeyboard } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+import { Icon, IconOptions } from '../Icons/Icon';
+
+/*
+  This has to be a separate element otherwise the focus trap fails. Assuming this is because it needs
+  to fit inside the 'Overlay' as a form of context.
+*/
+function PreviewModalContent({ children, onClose, ...props }: { children: ReactNode; onClose: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { dialogProps, titleProps } = useDialog(props, ref);
+
+  return (
+    <div {...dialogProps} ref={ref} className="h-full flex flex-col">
+      <h3 {...titleProps} className="sr-only">
+        Resource Details
+      </h3>
+      <button type="button" aria-label="Close details" onClick={onClose} className="absolute top-3 right-3">
+        <Icon icon={'close' as IconOptions} className="" />
+      </button>
+      {children}
+    </div>
+  );
+}
+
+export type PreviewModalProps = {
+  state: OverlayTriggerState;
+  overlayProps: DOMAttributes<FocusableElement>;
+  children?: ReactNode;
+  onClose: () => void;
+};
+
+// Accept a ref for the top level modal
+function PreviewModal({ state, overlayProps, children, onClose, ...props }: PreviewModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const { modalProps, underlayProps } = useModalOverlay(
+    { isKeyboardDismissDisabled: true, ...props },
+    state,
+    overlayRef,
+  );
+
+  // Need to handle the ESC escape hatch ourselves as we need to run onClose to deselect the current node
+  const { keyboardProps } = useKeyboard({
+    onKeyDown: (e) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else {
+        // Need to do this so TAB get handled up higher and cycles though the focus trap
+        e.continuePropagation();
+      }
+    },
+  });
+
+  useEffect(() => {
+    // Check if the click event has happened outside the modal
+    function handleClickOutside(event: MouseEvent) {
+      if (modalRef.current && !modalRef.current.contains(event?.target as Node)) {
+        onClose();
+      }
+    }
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [modalRef]);
+
+  return (
+    <Overlay>
+      <div className="squiz-gb-scope">
+        <div
+          ref={modalRef}
+          {...underlayProps}
+          {...keyboardProps}
+          className="fixed z-[9999] overflow-y-scroll bottom-0 w-full h-[50vh] bg-white border-t border-gray-300"
+        >
+          <div ref={overlayRef} {...modalProps} className="h-full">
+            <PreviewModalContent {...overlayProps} onClose={onClose}>
+              {children}
+            </PreviewModalContent>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  );
+}
+
+export default PreviewModal;