@arbor-education/design-system.components 0.1.5 → 0.2.1

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

@@ -0,0 +1,244 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Modal } from './Modal';
+import '@testing-library/jest-dom/vitest';
+
+describe('Modal', () => {
+  test('renders when open prop is true', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Body>Modal content</Modal.Body>
+      </Modal>,
+    );
+    expect(screen.getByText('Modal content')).toBeInTheDocument();
+  });
+
+  test('does not render when open prop is false', () => {
+    render(
+      <Modal open={false}>
+        <Modal.Body>Modal content</Modal.Body>
+      </Modal>,
+    );
+    expect(screen.queryByText('Modal content')).not.toBeInTheDocument();
+  });
+
+  test('renders with custom className', () => {
+    render(
+      <Modal open={true} className="custom-modal">
+        <Modal.Body>Content</Modal.Body>
+      </Modal>,
+    );
+    const modalContainer = document.querySelector('.custom-modal');
+    expect(modalContainer).toBeInTheDocument();
+  });
+
+  test('renders with custom overlayClassName', () => {
+    render(
+      <Modal open={true} overlayClassName="custom-overlay">
+        <Modal.Body>Content</Modal.Body>
+      </Modal>,
+    );
+    const overlay = document.querySelector('.custom-overlay');
+    expect(overlay).toBeInTheDocument();
+  });
+
+  test('renders with title prop', () => {
+    render(
+      <Modal open={true} title="Test Modal Title">
+        <Modal.Body>Content</Modal.Body>
+      </Modal>,
+    );
+    expect(screen.getByText('Test Modal Title')).toBeInTheDocument();
+  });
+
+  test('renders close button by default', () => {
+    const closeHandler = vi.fn();
+    render(
+      <Modal open={true} closeHandler={closeHandler}>
+        <Modal.Body>Content</Modal.Body>
+      </Modal>,
+    );
+    const closeButton = screen.getByRole('button');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  test('hides close button when hideCloseButton is true', () => {
+    const closeHandler = vi.fn();
+    render(
+      <Modal open={true} hideCloseButton={true} closeHandler={closeHandler}>
+        <Modal.Body>Content</Modal.Body>
+      </Modal>,
+    );
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  test('calls closeHandler when close button is clicked', async () => {
+    const user = userEvent.setup();
+    const closeHandler = vi.fn();
+    render(
+      <Modal open={true} closeHandler={closeHandler}>
+        <Modal.Body>Content</Modal.Body>
+      </Modal>,
+    );
+    const closeButton = screen.getByRole('button');
+    await user.click(closeButton);
+    expect(closeHandler).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls closeHandler when Escape key is pressed', async () => {
+    const user = userEvent.setup();
+    const closeHandler = vi.fn();
+    render(
+      <Modal open={true} closeHandler={closeHandler}>
+        <Modal.Body>Content</Modal.Body>
+      </Modal>,
+    );
+    await user.keyboard('{Escape}');
+    expect(closeHandler).toHaveBeenCalledTimes(1);
+  });
+
+  test('renders Modal.Header component', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Header>Header content</Modal.Header>
+      </Modal>,
+    );
+    expect(screen.getByText('Header content')).toBeInTheDocument();
+    const header = document.querySelector('.ds-modal__header');
+    expect(header).toBeInTheDocument();
+  });
+
+  test('renders Modal.Body component', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Body>Body content</Modal.Body>
+      </Modal>,
+    );
+    expect(screen.getByText('Body content')).toBeInTheDocument();
+    const body = document.querySelector('.ds-modal__body');
+    expect(body).toBeInTheDocument();
+  });
+
+  test('renders Modal.Footer component', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Footer>Footer content</Modal.Footer>
+      </Modal>,
+    );
+    expect(screen.getByText('Footer content')).toBeInTheDocument();
+    const footer = document.querySelector('.ds-modal__footer');
+    expect(footer).toBeInTheDocument();
+  });
+
+  test('renders Modal.Title component', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Header>
+          <Modal.Title>Title content</Modal.Title>
+        </Modal.Header>
+      </Modal>,
+    );
+    expect(screen.getByText('Title content')).toBeInTheDocument();
+    const title = document.querySelector('.ds-modal__title');
+    expect(title).toBeInTheDocument();
+  });
+
+  test('renders complete modal structure with all components', () => {
+    const closeHandler = vi.fn();
+    render(
+      <Modal open={true} closeHandler={closeHandler}>
+        <Modal.Header>
+          <Modal.Title>Complete Modal</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>This is the modal body</Modal.Body>
+        <Modal.Footer>
+          <button>Action</button>
+        </Modal.Footer>
+      </Modal>,
+    );
+
+    expect(screen.getByText('Complete Modal')).toBeInTheDocument();
+    expect(screen.getByText('This is the modal body')).toBeInTheDocument();
+    expect(screen.getByText('Action')).toBeInTheDocument();
+  });
+
+  test('applies custom className to Modal.Header', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Header className="custom-header">Header</Modal.Header>
+      </Modal>,
+    );
+    const header = document.querySelector('.custom-header');
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveClass('ds-modal__header');
+  });
+
+  test('applies custom className to Modal.Body', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Body className="custom-body">Body</Modal.Body>
+      </Modal>,
+    );
+    const body = document.querySelector('.custom-body');
+    expect(body).toBeInTheDocument();
+    expect(body).toHaveClass('ds-modal__body');
+  });
+
+  test('applies custom className to Modal.Footer', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Footer className="custom-footer">Footer</Modal.Footer>
+      </Modal>,
+    );
+    const footer = document.querySelector('.custom-footer');
+    expect(footer).toBeInTheDocument();
+    expect(footer).toHaveClass('ds-modal__footer');
+  });
+
+  test('renders to custom portal target', () => {
+    const container = document.createElement('div');
+    container.id = 'custom-portal';
+    document.body.appendChild(container);
+
+    render(
+      <Modal open={true} portalTarget={container}>
+        <Modal.Body>Portal content</Modal.Body>
+      </Modal>,
+    );
+
+    expect(container.querySelector('.ds-modal__overlay')).toBeInTheDocument();
+    document.body.removeChild(container);
+  });
+
+  test('Modal.CloseButton does not render without closeHandler', () => {
+    render(
+      <Modal open={true}>
+        <Modal.Body>Content</Modal.Body>
+        <Modal.CloseButton />
+      </Modal>,
+    );
+    // Only the default close button should be present
+    const buttons = screen.queryAllByRole('button');
+    expect(buttons).toHaveLength(0);
+  });
+
+  test('Modal.CloseButton renders with closeHandler in context', async () => {
+    const user = userEvent.setup();
+    const closeHandler = vi.fn();
+    render(
+      <Modal open={true} closeHandler={closeHandler}>
+        <Modal.Body>Content</Modal.Body>
+        <Modal.CloseButton className="custom-close" />
+      </Modal>,
+    );
+
+    const closeButtons = screen.getAllByRole('button');
+    expect(closeButtons.length).toBeGreaterThan(0);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    await user.click(closeButtons[0]);
+    expect(closeHandler).toHaveBeenCalled();
+  });
+});

package/src/components/modal/Modal.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { Dialog } from 'radix-ui';
+import { ModalHeader } from './ModalHeader';
+import { ModalFooter } from './ModalFooter';
+import { ModalBody } from './ModalBody';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+import { createContext, useRef } from 'react';
+import { ModalCloseButon } from './ModalCloseButton';
+import { ModalTitle } from './ModalTitle';
+
+type ModalContextValue = {
+  closeHandler?: () => void;
+};
+
+export const ModalContext = createContext<ModalContextValue>({});
+
+export type ModalProps = {
+  className?: string;
+  overlayClassName?: string;
+  open?: boolean;
+  portalTarget?: HTMLElement | null;
+  children?: React.ReactNode;
+  hideCloseButton?: boolean;
+  closeHandler?: ModalContextValue['closeHandler'];
+  title?: string;
+};
+
+export const Modal = (props: ModalProps) => {
+  const {
+    className,
+    overlayClassName,
+    open,
+    portalTarget,
+    children,
+    closeHandler,
+    hideCloseButton = false,
+    title,
+  } = props;
+
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <PopupParentContext.Provider value={overlayRef}>
+      <ModalContext.Provider value={{ closeHandler }}>
+        <Dialog.Root open={open}>
+          <Dialog.Portal container={portalTarget}>
+            <Dialog.Overlay ref={overlayRef} className={classNames('ds-modal__overlay', overlayClassName)}>
+              <Dialog.Content className={classNames('ds-modal__container', className)}>
+                {title && <ModalHeader><ModalTitle>{title}</ModalTitle></ModalHeader>}
+                {children}
+                {!hideCloseButton && <ModalCloseButon className="ds-modal__close-button--top-right" />}
+              </Dialog.Content>
+            </Dialog.Overlay>
+          </Dialog.Portal>
+        </Dialog.Root>
+      </ModalContext.Provider>
+    </PopupParentContext.Provider>
+  );
+};
+
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+Modal.CloseButton = ModalCloseButon;
+Modal.Title = ModalTitle;

package/src/components/modal/ModalBody.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import classNames from 'classnames';
+
+export type ModalBodyProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const ModalBody = (props: ModalBodyProps) => {
+  const { className, children } = props;
+  return (
+    <div className={classNames('ds-modal__body', className)}>
+      {children}
+    </div>
+  );
+};

package/src/components/modal/ModalCloseButton.tsx

@@ -0,0 +1,39 @@
+import { useContext, useEffect } from 'react';
+import { ModalContext } from './Modal';
+import { Button, type ButtonProps } from 'Components/button/Button';
+import classNames from 'classnames';
+
+export const ModalCloseButon = (props: ButtonProps) => {
+  const { className, ...rest } = props;
+  const { closeHandler } = useContext(ModalContext);
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && closeHandler) {
+      closeHandler();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closeHandler]);
+
+  if (!closeHandler) {
+    return null;
+  }
+
+  return (
+    <Button
+      size="S"
+      onClick={closeHandler}
+      variant="secondary"
+      iconRightName="x"
+      iconRightScreenReaderText="Close"
+      borderless
+      className={classNames('ds-modal__close-button', className)}
+      {...rest}
+    />
+  );
+};

package/src/components/modal/ModalFooter.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import classNames from 'classnames';
+
+export type ModalFooterProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const ModalFooter = (props: ModalFooterProps) => {
+  const { className, children } = props;
+  return (
+    <footer className={classNames('ds-modal__footer', className)}>{children}</footer>
+  );
+};

package/src/components/modal/ModalHeader.tsx

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import classNames from 'classnames';
+
+export type ModalHeaderProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const ModalHeader = (props: ModalHeaderProps) => {
+  const {
+    className,
+    children,
+  } = props;
+
+  return (
+    <header className={classNames('ds-modal__header', className)}>
+      {children}
+    </header>
+  );
+};

package/src/components/modal/ModalTitle.tsx

@@ -0,0 +1,12 @@
+import classNames from 'classnames';
+import { Dialog } from 'radix-ui';
+
+export const ModalTitle = (props: Dialog.DialogTitleProps) => {
+  const { children, className, ...rest } = props;
+
+  return (
+    <Dialog.Title className={classNames('ds-modal__title', className)} {...rest}>
+      {children}
+    </Dialog.Title>
+  );
+};

package/src/components/modal/modal.scss

@@ -0,0 +1,74 @@
+.ds-modal {
+  &__overlay {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    background-color: var(--modal-overlay-color-background);
+  }
+
+  &__container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--modal-radius);
+    background-color: var(--modal-color-background);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    max-width: calc(100vw - var(--spacing-medium));
+    max-height: calc(100vh - var(--spacing-medium));
+    min-width: var(--modal-min-width);
+    font-family: var(--type-body-p-family);
+    font-size: var(--type-body-p-size);
+    font-weight: var(--type-body-p-weight);
+    line-height: var(--type-body-line-height);
+    color: var(--type-body-p-color);
+
+    .ds-modal__close-button--top-right {
+      position: absolute;
+      top: var(--spacing-small);
+      right: var(--spacing-small);
+    }
+  }
+
+  &__header {
+    padding: var(--modal-header-spacing-padding);
+    background-color: var(--modal-header-color-background);
+
+    .ds-modal__close-button {
+      margin-left: auto;
+    }
+  }
+
+  &__title {
+    font-family: var(--type-headings-h2-family);
+    font-size: var(--type-headings-h2-size);
+    font-style: normal;
+    font-weight: var(--type-headings-h2-weight);
+    margin: 0;
+  }
+
+  &__footer {
+    padding: var(--modal-footer-spacing-padding);
+    background-color: var(--modal-footer-color-background);
+  }
+
+  &__footer, &__header {
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-large);
+  }
+
+  &__body {
+    background-color: var(--color-grey-050);
+    flex: 1;
+    padding: var(--spacing-xxlarge) var(--spacing-large);
+    overflow-y: auto;
+  }
+}