@hyphen/hyphen-components 2.9.0

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,194 @@
+import React, { useRef } from 'react';
+import { Modal } from './Modal';
+import type { Meta } from '@storybook/react';
+import { Button } from '../Button/Button';
+import { useOpenClose } from '../../hooks/useOpenClose/useOpenClose';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+};
+
+export default meta;
+
+export const BasicUsage = () => {
+  const {
+    isOpen: isModalOpen,
+    handleOpen: openModal,
+    handleClose: closeModal,
+  } = useOpenClose();
+  return (
+    <div>
+      <Button variant="primary" onClick={openModal}>
+        Show Modal
+      </Button>
+      <Modal
+        ariaLabelledBy="titleBasic"
+        isOpen={isModalOpen}
+        onDismiss={closeModal}
+      >
+        <Modal.Header
+          id="titleBasic"
+          title="The Modal Title"
+          onDismiss={closeModal}
+        />
+        <Modal.Body>Modal content</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={closeModal}>
+            Cancel
+          </Button>
+          <Button variant="primary">Primary Action</Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
+};
+
+export const BodyAndFooter = () => {
+  const {
+    isOpen: isModalOpen,
+    handleOpen: openModal,
+    handleClose: closeModal,
+  } = useOpenClose();
+  return (
+    <div>
+      <Button variant="primary" onClick={openModal}>
+        Show Modal With Body and Footer
+      </Button>
+      <Modal
+        ariaLabelledBy="titleFooterBody"
+        isOpen={isModalOpen}
+        onDismiss={closeModal}
+      >
+        <Modal.Header
+          id="titleFooterBody"
+          title="The Modal Title"
+          onDismiss={closeModal}
+        />
+        <Modal.Body>Modal body content</Modal.Body>
+        <Modal.Footer>This is content in the modal footer</Modal.Footer>
+      </Modal>
+    </div>
+  );
+};
+
+export const CloseButton = () => {
+  const {
+    isOpen: isModalOpen,
+    handleOpen: openModal,
+    handleClose: closeModal,
+  } = useOpenClose();
+  return (
+    <div>
+      <Button variant="primary" onClick={openModal}>
+        Show Modal With Close Button
+      </Button>
+      <Modal
+        ariaLabel="modal with close button"
+        isOpen={isModalOpen}
+        onDismiss={closeModal}
+      >
+        <Modal.Header id="header" onDismiss={closeModal} />
+        <Modal.Body>Modal content</Modal.Body>
+      </Modal>
+    </div>
+  );
+};
+
+export const WithoutHeader = () => {
+  const {
+    isOpen: isModalOpen,
+    handleOpen: openModal,
+    handleClose: closeModal,
+  } = useOpenClose();
+  return (
+    <div>
+      <Button variant="primary" onClick={openModal}>
+        Show Modal Without Header
+      </Button>
+      <Modal
+        ariaLabel="Modal without a header"
+        isOpen={isModalOpen}
+        onDismiss={closeModal}
+      >
+        <Modal.Body>Modal content</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={closeModal}>
+            Cancel
+          </Button>
+          <Button variant="primary">Primary Action</Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
+};
+
+export const FullscreenMobile = () => {
+  const {
+    isOpen: isModalOpen,
+    handleOpen: openModal,
+    handleClose: closeModal,
+  } = useOpenClose();
+  return (
+    <div>
+      <Button variant="primary" onClick={openModal}>
+        Show Fullscreen On Mobile Modal
+      </Button>
+      <Modal
+        ariaLabelledBy="titleFullscreen"
+        fullScreenMobile
+        isOpen={isModalOpen}
+        onDismiss={closeModal}
+      >
+        <Modal.Header
+          id="titleFullscreen"
+          title="Fullscreen Modal on Mobile"
+          onDismiss={closeModal}
+        />
+        <Modal.Body>Modal content</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={closeModal}>
+            Cancel
+          </Button>
+          <Button variant="primary">Primary Action</Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
+};
+
+export const MaxWidth = () => {
+  const {
+    isOpen: isModalOpen,
+    handleOpen: openModal,
+    handleClose: closeModal,
+  } = useOpenClose();
+  const ref = useRef(null);
+
+  return (
+    <div>
+      <Button variant="primary" onClick={openModal}>
+        Open Max Width Modal
+      </Button>
+      <Modal
+        ariaLabelledBy="titleFooterBody"
+        isOpen={isModalOpen}
+        onDismiss={closeModal}
+        maxWidth={{ tablet: '8xl', desktop: '9xl' }}
+        initialFocusRef={ref}
+      >
+        <Modal.Header
+          id="titleFooterBody"
+          title="The Modal Title"
+          onDismiss={closeModal}
+        />
+        <Modal.Body>Modal body content</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" ref={ref} onClick={closeModal}>
+            Cancel
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
+};

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Modal } from './Modal';
+
+describe('Modal', () => {
+  test('renders its children', () => {
+    const { getByText } = render(
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      <Modal isOpen onDismiss={() => {}} ariaLabel="testDefault">
+        test modal
+      </Modal>
+    );
+    expect(getByText('test modal')).toBeInTheDocument();
+  });
+
+  test('it open and closes based on isOpen prop', () => {
+    const { queryByText, getByText, rerender } = render(
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      <Modal isOpen={false} onDismiss={() => {}} ariaLabel="testIsOpen">
+        test modal
+      </Modal>
+    );
+
+    expect(queryByText('test modal')).toBe(null);
+
+    rerender(
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      <Modal isOpen onDismiss={() => {}} ariaLabel="testIsOpen">
+        test modal
+      </Modal>
+    );
+
+    expect(getByText('test modal')).toBeInTheDocument();
+  });
+
+  test('Subcomponents', () => {
+    const { getByText } = render(
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      <Modal isOpen onDismiss={() => {}} ariaLabel="testSubcomponents">
+        {/* eslint-disable-next-line @typescript-eslint/no-empty-function */}
+        <Modal.Header
+          id="titleFooterBody"
+          title="The Modal Title"
+          onDismiss={() => {}}
+        />
+        <Modal.Body>Modal body content</Modal.Body>
+        <Modal.Footer>This is content in the modal footer</Modal.Footer>
+      </Modal>
+    );
+
+    expect(getByText('The Modal Title')).toBeInTheDocument();
+    expect(getByText('Modal body content')).toBeInTheDocument();
+    expect(
+      getByText('This is content in the modal footer')
+    ).toBeInTheDocument();
+  });
+
+  test('onDismiss', async () => {
+    const mockOnDismiss = jest.fn();
+    const { getByTestId } = render(
+      <Modal isOpen onDismiss={mockOnDismiss} ariaLabel="testSubcomponents">
+        <Modal.Header
+          id="titleFooterBody"
+          title="The Modal Title"
+          onDismiss={mockOnDismiss}
+        />
+        <Modal.Body>Modal body content</Modal.Body>
+        <Modal.Footer>This is content in the modal footer</Modal.Footer>
+      </Modal>
+    );
+
+    const closeButton = getByTestId('icon-testid--remove').closest('button');
+    expect(closeButton).toBeInTheDocument();
+
+    if (closeButton) {
+      await fireEvent.click(closeButton);
+    }
+
+    expect(mockOnDismiss).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,174 @@
+import React, { ReactNode, RefObject, forwardRef, useCallback } from 'react';
+import ReactModal from 'react-modal';
+import FocusLock from 'react-focus-lock';
+import { RemoveScroll } from 'react-remove-scroll';
+import classNames from 'classnames';
+import { CssOverflowValue } from '../../types';
+import { getDimensionCss } from '../../lib/getDimensionCss';
+import { Box, BoxProps } from '../Box/Box';
+import { ModalFooter, ModalHeader, ModalBody } from './components';
+import styles from './Modal.module.scss';
+
+export interface ModalProps {
+  /**
+   * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
+   */
+  allowPinchZoom?: boolean;
+  /**
+   * Each modal needs to be properly labeled to provide context for users with
+   * assistive technology such as screen readers. If a modal is announced to
+   * the user without a label, it can be confusing and difficult to navigate.
+   */
+  ariaLabel?: string;
+  /**
+   * The id of the element that should be used as the Modal's label by assistive
+   * technologies like screen readers. Usually the id is set on the `Modal.Header`
+   */
+  ariaLabelledBy?: string;
+  /**
+   * Contents of the dialog.
+   */
+  children?: ReactNode;
+  /**
+   * Additional ClassNames to add to dialog.
+   */
+  className?: string;
+  /**
+   * The ref of the container where the dialog will be inserted into the DOM.
+   * By default, Modals are inserted in the document.body, but if need be they can
+   * be scoped as necessary.
+   */
+  containerRef?: React.RefObject<Node>;
+  /**
+   * At mobile viewport widths, the modal will take up the fullscreen
+   */
+  fullScreenMobile?: boolean;
+  /**
+   * By default the first focusable element will receive focus when the dialog
+   * opens but you can provide a ref to focus instead.
+   *
+   * @see Docs https://reach.tech/dialog#dialog-initialfocusref
+   */
+  initialFocusRef?: RefObject<HTMLDivElement>;
+  /**
+   * Whether the modal is visible or not
+   */
+  isOpen: boolean;
+  /**
+   * Max width for modal content. Uses the same maxWidth prop as the `Box` component,
+   * and as such can be responsive as well.
+   */
+  maxWidth?: BoxProps['maxWidth'];
+  /**
+   * Function that is called whenever the user hits "Escape" key or clicks outside the modal.
+   */
+  onDismiss: (event?: React.SyntheticEvent) => void;
+  /**
+   * The css overflow behavior of the Modal
+   */
+  overflow?: CssOverflowValue;
+  /**
+   * Allows spread props
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
+  HTMLDivElement,
+  ModalProps
+>(
+  (
+    {
+      ariaLabel,
+      ariaLabelledBy,
+      allowPinchZoom = false,
+      children,
+      className,
+      containerRef = undefined,
+      fullScreenMobile = false,
+      initialFocusRef,
+      isOpen,
+      maxWidth = undefined,
+      onDismiss,
+      overflow = 'hidden',
+      ...restProps
+    },
+    ref
+  ) => {
+    const activateFocusLock = useCallback(() => {
+      setTimeout(() => {
+        if (initialFocusRef && initialFocusRef.current) {
+          initialFocusRef.current.focus();
+        }
+      }, 100);
+    }, [initialFocusRef]);
+
+    const maxWidthCss = getDimensionCss('mw', maxWidth);
+
+    const overlayClassnames = classNames(styles.overlay, styles.modal, {
+      fullscreen: fullScreenMobile,
+    });
+    const contentClassnames = classNames(
+      styles['modal-content'],
+      className,
+      maxWidthCss.classes,
+      {
+        [`overflow-${overflow}`]: overflow,
+      }
+    );
+
+    const parentElement = containerRef?.current
+      ? (containerRef.current as HTMLElement)
+      : undefined;
+    return (
+      <FocusLock
+        autoFocus
+        returnFocus
+        disabled={!isOpen}
+        onActivation={activateFocusLock}
+        crossFrame
+      >
+        <RemoveScroll allowPinchZoom={allowPinchZoom} enabled={isOpen}>
+          <Box ref={ref}>
+            <ReactModal
+              isOpen={isOpen}
+              overlayClassName={overlayClassnames}
+              className={contentClassnames}
+              onRequestClose={onDismiss}
+              ariaHideApp={false}
+              parentSelector={parentElement ? () => parentElement : undefined}
+              {...restProps}
+            >
+              <Box
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
+                style={{ ...maxWidthCss.styles }}
+                height="100"
+              >
+                {children}
+              </Box>
+            </ReactModal>
+          </Box>
+        </RemoveScroll>
+      </FocusLock>
+    );
+  }
+);
+
+export interface ModalStatic {
+  Body: typeof ModalBody;
+  Header: typeof ModalHeader;
+  Footer: typeof ModalFooter;
+}
+
+export type ModalWithStaticComponents = typeof ModalBaseComponent & ModalStatic;
+
+// Actual component is wrapped in an IIFE for the export
+// To allow tree-shaking even with static properties (subcomponents in this case).
+export const Modal = (() => {
+  const Modal = ModalBaseComponent as ModalWithStaticComponents; // eslint-disable-line no-shadow
+  Modal.Body = ModalBody;
+  Modal.Footer = ModalFooter;
+  Modal.Header = ModalHeader;
+  return Modal;
+})();

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ModalBody } from './ModalBody';
+
+describe('ModalBody', () => {
+  test('renders its children', () => {
+    const { getByText } = render(<ModalBody>test modal</ModalBody>);
+    expect(getByText('test modal')).toBeInTheDocument();
+  });
+
+  test('xl padding class is applied by default', () => {
+    const { container } = render(<ModalBody>test modal</ModalBody>);
+    expect(container.children[0].classList).toContain('p-xl');
+  });
+
+  test('flex-auto class is applied by default', () => {
+    const { container } = render(<ModalBody>test modal</ModalBody>);
+    expect(container.children[0].classList).toContain('flex-auto');
+  });
+});

package/src/components/Modal/components/ModalBody/ModalBody.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { Box, BoxProps } from '../../../Box/Box';
+
+export type ModalBodyProps = BoxProps;
+
+export const ModalBody: FC<ModalBodyProps> = ({
+  children,
+  flex = 'auto',
+  padding = 'xl',
+  overflow = 'auto',
+  height = '100',
+  ...restProps
+}) => (
+  <Box
+    padding={padding}
+    flex={flex}
+    overflow={overflow}
+    height={height}
+    style={{ position: 'relative' }}
+    {...restProps}
+  >
+    {children}
+  </Box>
+);

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ModalFooter } from './ModalFooter';
+
+describe('ModalFooter', () => {
+  test('renders its children', () => {
+    const { getByText } = render(<ModalFooter>test modal</ModalFooter>);
+    expect(getByText('test modal')).toBeInTheDocument();
+  });
+
+  test('xl padding class is applied by default', () => {
+    const { container } = render(<ModalFooter>test modal</ModalFooter>);
+    expect(container.children[0].classList).toContain('p-xl');
+  });
+
+  test('row direction class is applied by default', () => {
+    const { container } = render(<ModalFooter>test modal</ModalFooter>);
+    expect(container.children[0].classList).toContain('flex-direction-row');
+  });
+
+  test('align-items center class is applied by default', () => {
+    const { container } = render(<ModalFooter>test modal</ModalFooter>);
+    expect(container.children[0].classList).toContain('align-items-center');
+  });
+
+  test('justify content flex-end class is applied by default', () => {
+    const { container } = render(<ModalFooter>test modal</ModalFooter>);
+    expect(container.children[0].classList).toContain(
+      'justify-content-flex-end'
+    );
+  });
+});

package/src/components/Modal/components/ModalFooter/ModalFooter.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { Box, BoxProps } from '../../../Box/Box';
+
+export type ModalFooterProps = Omit<
+  BoxProps,
+  'as' | 'background' | 'borderColor' | 'borderWidth' | 'radius'
+>;
+
+export const ModalFooter: FC<ModalFooterProps> = ({
+  children,
+  padding = 'xl',
+  direction = 'row',
+  alignItems = 'center',
+  justifyContent = 'flex-end',
+  background = 'secondary',
+  gap = 'sm',
+  style,
+  ...restProps
+}) => (
+  <Box
+    background={background}
+    padding={padding}
+    direction={direction}
+    alignItems={alignItems}
+    justifyContent={justifyContent}
+    borderWidth="sm 0 0 0"
+    borderColor="default"
+    gap={gap}
+    style={{
+      flexShrink: 0,
+      ...style,
+    }}
+    {...restProps}
+  >
+    {children}
+  </Box>
+);

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { fireEvent, screen, render } from '@testing-library/react';
+import { ModalHeader } from './ModalHeader';
+
+describe('ModalHeader', () => {
+  test('renders a title if provided', () => {
+    const { getByText } = render(
+      <ModalHeader id="modal" title="modal title" />
+    );
+    expect(getByText('modal title')).toBeInTheDocument();
+  });
+
+  test('renders close button if onDismiss is set', () => {
+    render(<ModalHeader id="modal" onDismiss={() => null} />);
+    expect(screen.getByLabelText('close')).toBeDefined();
+  });
+
+  test('clicking the close button fires onDismiss', () => {
+    const mockOnDismiss = jest.fn();
+    render(<ModalHeader id="modal" onDismiss={mockOnDismiss} />);
+    fireEvent.click(screen.getByLabelText('close'));
+    expect(mockOnDismiss).toBeCalledTimes(1);
+  });
+
+  test('xl padding class is applied by default', () => {
+    const { container } = render(<ModalHeader id="modal" />);
+    expect(container.children[0].classList).toContain('p-xl');
+  });
+});

package/src/components/Modal/components/ModalHeader/ModalHeader.tsx

@@ -0,0 +1,58 @@
+import React, { FC } from 'react';
+import { Box } from '../../../Box/Box';
+import { Icon } from '../../../Icon/Icon';
+import styles from '../../Modal.module.scss';
+
+export type ModalHeaderProps = {
+  /**
+   * id of the element containing the title, used by the Modal `aria-labelledby` prop
+   */
+  id: string;
+  /**
+   * Modal's header title
+   */
+  title?: string;
+  /**
+   * If defined, will render a 'x' close button on the right side of the ModalHeader
+   */
+  onDismiss?: (event?: React.SyntheticEvent) => void;
+};
+
+export const ModalHeader: FC<ModalHeaderProps> = ({
+  id,
+  onDismiss,
+  title = undefined,
+}) => {
+  const justifyContentValue =
+    title === undefined && onDismiss ? 'flex-end' : 'space-between';
+
+  return (
+    <Box
+      padding="xl"
+      direction="row"
+      alignItems="center"
+      justifyContent={justifyContentValue}
+      borderWidth="0 0 sm 0"
+      borderColor="default"
+      style={{
+        flexShrink: 0,
+      }}
+    >
+      {title && (
+        <Box as="h4" fontSize={{ base: 'md', tablet: 'lg' }} id={id}>
+          {title}
+        </Box>
+      )}
+      {onDismiss && (
+        <button
+          aria-label="close"
+          type="button"
+          className={styles['modal-close']}
+          onClick={onDismiss}
+        >
+          <Icon name="remove" />
+        </button>
+      )}
+    </Box>
+  );
+};

package/src/components/Modal/components/index.ts

@@ -0,0 +1,5 @@
+import { ModalFooter } from './ModalFooter/ModalFooter';
+import { ModalHeader } from './ModalHeader/ModalHeader';
+import { ModalBody } from './ModalBody/ModalBody';
+
+export { ModalFooter, ModalHeader, ModalBody };

package/src/components/Pagination/Pagination.mdx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { Meta, Story, Canvas, ArgTypes } from '@storybook/addon-docs';
+import { Pagination } from './Pagination';
+import * as Stories from './Pagination.stories';
+
+<Meta of={Stories} />
+
+# Pagination
+
+Use pagination to improve user scanning, as well as load times, for large collections or lists.
+
+## Props
+
+<ArgTypes of={Pagination} />
+
+## Default
+
+<Canvas of={Stories.Default} />
+
+## Compact
+
+<Canvas of={Stories.Compact} />
+
+## With Interactive Page Numbers
+
+<Canvas of={Stories.PageNumbers} />