@veeqo/ui 0.0.1 → 0.0.3

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,211 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import userEvent from '@testing-library/user-event';
+import { ButtonVariant } from '../Button/types';
+import { Modal } from '.';
+
+// Jest does not currently mock the HTML Dialog Element.
+HTMLDialogElement.prototype.show = jest.fn(function mock(this: HTMLDialogElement) {
+  this.open = true;
+});
+
+HTMLDialogElement.prototype.showModal = jest.fn(function mock(this: HTMLDialogElement) {
+  this.open = true;
+});
+
+HTMLDialogElement.prototype.close = jest.fn(function mock(this: HTMLDialogElement) {
+  this.open = false;
+});
+
+const HEADER_TITLE = 'TEST TITLE';
+const HEADER_SUBTITLE = 'TEST SUBTITLE';
+
+const LEFT_ACTIONS = [
+  { label: 'Cancel', variant: 'primaryDestructive' as ButtonVariant, onClick: () => {} },
+];
+
+const RIGHT_ACTIONS = [
+  { label: 'Save', variant: 'primary' as ButtonVariant, onClick: () => {} },
+  {
+    label: 'Cancel',
+    variant: 'default' as ButtonVariant,
+    onClick: () => {},
+    disabled: true,
+    iconName: 'close',
+  },
+];
+
+const headerSlot = () => <div data-testid="header-slot" />;
+const footerSlot = () => <div data-testid="footer-slot" />;
+
+describe('Modal', () => {
+  it('looks as expected without slots', () => {
+    const { asFragment } = render(
+      <Modal
+        shouldShow
+        onClose={() => {}}
+        headerTitle={HEADER_TITLE}
+        headerSubtitle={HEADER_SUBTITLE}
+        leftActions={LEFT_ACTIONS}
+        rightActions={RIGHT_ACTIONS}
+      >
+        <div data-testid="main-content" />
+      </Modal>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByText(HEADER_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(HEADER_SUBTITLE)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+
+    const leftActions = screen.getByTestId('left-actions-container');
+    expect(within(leftActions).getByText('Cancel')).toBeInTheDocument();
+
+    const rightActions = screen.getByTestId('right-actions-container');
+    expect(within(rightActions).getByText('Save')).toBeInTheDocument();
+    expect(within(rightActions).getByRole('button', { name: 'Cancel' })).toBeDisabled();
+  });
+
+  it('looks as expected with a header slot provided', () => {
+    const { asFragment } = render(
+      <Modal
+        shouldShow
+        onClose={() => {}}
+        headerSlot={headerSlot()}
+        leftActions={LEFT_ACTIONS}
+        rightActions={RIGHT_ACTIONS}
+      >
+        <div data-testid="main-content" />
+      </Modal>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+
+    expect(screen.getByTestId('header-slot')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+
+    const leftActions = screen.getByTestId('left-actions-container');
+    expect(within(leftActions).getByText('Cancel')).toBeInTheDocument();
+
+    const rightActions = screen.getByTestId('right-actions-container');
+    expect(within(rightActions).getByText('Save')).toBeInTheDocument();
+  });
+
+  it('looks as expected with a footer slot provided', () => {
+    const { asFragment } = render(
+      <Modal
+        shouldShow
+        onClose={() => {}}
+        headerTitle={HEADER_TITLE}
+        headerSubtitle={HEADER_SUBTITLE}
+        footerSlot={footerSlot()}
+      >
+        <div data-testid="main-content" />
+      </Modal>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByText(HEADER_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(HEADER_SUBTITLE)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+    expect(screen.getByTestId('footer-slot')).toBeInTheDocument();
+  });
+
+  it('displays header and footer slots when provided', () => {
+    const { asFragment } = render(
+      <Modal shouldShow onClose={() => {}} headerSlot={headerSlot()} footerSlot={footerSlot()}>
+        <div data-testid="main-content" />
+      </Modal>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('header-slot')).toBeInTheDocument();
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+    expect(screen.getByTestId('footer-slot')).toBeInTheDocument();
+  });
+
+  it('displays header slot instead of title and subtitle if also provided', () => {
+    const { asFragment } = render(
+      <Modal
+        shouldShow
+        onClose={() => {}}
+        headerSlot={headerSlot()}
+        headerTitle={HEADER_TITLE}
+        headerSubtitle={HEADER_SUBTITLE}
+      >
+        <div data-testid="main-content" />
+      </Modal>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('header-slot')).toBeInTheDocument();
+    expect(screen.queryByText(HEADER_TITLE)).not.toBeInTheDocument();
+    expect(screen.queryByText(HEADER_SUBTITLE)).not.toBeInTheDocument();
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+  });
+
+  it('displays footer slot instead of if actions if provided', () => {
+    const { asFragment } = render(
+      <Modal
+        shouldShow
+        onClose={() => {}}
+        headerTitle={HEADER_TITLE}
+        headerSubtitle={HEADER_SUBTITLE}
+        footerSlot={footerSlot()}
+        leftActions={LEFT_ACTIONS}
+        rightActions={RIGHT_ACTIONS}
+      >
+        <div data-testid="main-content" />
+      </Modal>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Save' })).not.toBeInTheDocument();
+    expect(screen.getByTestId('footer-slot')).toBeInTheDocument();
+  });
+
+  test('clicking on the close button calls the onClose prop', () => {
+    const mockOnClose = jest.fn();
+    render(
+      <Modal
+        shouldShow
+        onClose={mockOnClose}
+        headerTitle={HEADER_TITLE}
+        headerSubtitle={HEADER_SUBTITLE}
+        leftActions={LEFT_ACTIONS}
+        rightActions={RIGHT_ACTIONS}
+      >
+        <div data-testid="main-content" />
+      </Modal>,
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  // Conditional rendering check.
+  test('the modal does not show when shouldShow is false', () => {
+    render(
+      <Modal
+        shouldShow={false}
+        onClose={() => {}}
+        headerTitle={HEADER_TITLE}
+        headerSubtitle={HEADER_SUBTITLE}
+      >
+        <div data-testid="main-content" />
+      </Modal>,
+    );
+
+    expect(screen.queryByTestId('main-content')).not.toBeInTheDocument();
+  });
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { useEffect, useRef, useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
+
+import { MainSection, NonScrollableBody } from './components/styled';
+import { ModalProps, hasFooterSlot, hasHeaderSlot } from './types';
+import { Dialog } from './components/Dialog/Dialog';
+
+import { useIsOverflowing } from '../../hooks/useIsOverflowing';
+import { Button } from '../Button';
+import { Card } from '../Card';
+import { CardHeader } from '../CardHeader';
+import { Stack } from '../Stack';
+
+export const Modal = (props: ModalProps) => {
+  const {
+    shouldShow,
+    showHeaderCloseButton = true,
+    fullBleed = false,
+    variant = 'base',
+    onClose: parentOnClose,
+    children,
+  } = props;
+
+  const modalRef = useRef<HTMLDialogElement | null>(null);
+  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (shouldShow) {
+      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.
+      modalRef.current?.showModal();
+    }
+  }, [shouldShow]);
+
+  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);
+
+  const onClose = () => {
+    modalRef.current?.close();
+    parentOnClose();
+  };
+
+  return (
+    <AnimatePresence>
+      {shouldShow && (
+        <>
+          <NonScrollableBody />
+          <Dialog ref={modalRef} onClose={onClose} variant={variant} aria-describedby="modal_title">
+            <Card.Surface>
+              {hasHeaderSlot(props) ? (
+                props.headerSlot
+              ) : (
+                <CardHeader
+                  id="modal_title"
+                  headerVariant="headingLarge"
+                  title={props.headerTitle}
+                  subtitle={props.headerSubtitle}
+                  {...(showHeaderCloseButton && { onClickClose: onClose })}
+                />
+              )}
+
+              <MainSection
+                onScroll={onScroll}
+                ref={setMainSectionRef}
+                isScrollable={isContentOverflowing}
+                fullBleed={fullBleed}
+              >
+                {children}
+              </MainSection>
+
+              {hasFooterSlot(props) && props.footerSlot}
+
+              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (
+                <Card.Footer>
+                  <Stack direction="horizontal" alignX="between">
+                    {props.leftActions && (
+                      <Stack
+                        direction="horizontal"
+                        alignX="start"
+                        data-testid="left-actions-container"
+                      >
+                        {props.leftActions.map(({ label, ...actionProps }) => (
+                          <Button key={label} type="button" {...actionProps}>
+                            {label}
+                          </Button>
+                        ))}
+                      </Stack>
+                    )}
+                    {props.rightActions && (
+                      <Stack
+                        direction="horizontal"
+                        alignX="start"
+                        data-testid="right-actions-container"
+                      >
+                        {props.rightActions.map(({ label, ...actionProps }) => (
+                          <Button key={label} type="button" {...actionProps}>
+                            {label}
+                          </Button>
+                        ))}
+                      </Stack>
+                    )}
+                  </Stack>
+                </Card.Footer>
+              )}
+            </Card.Surface>
+          </Dialog>
+        </>
+      )}
+    </AnimatePresence>
+  );
+};