@indico-data/design-system 2.46.0 → 2.47.0

package/lib/legacy/components/index.d.ts

@@ -1,3 +1,2 @@
 export { BarSpinner, CirclePulse, CircleSpinner } from './loading-indicators';
-export { ConfirmModal, ModalBase } from './modals';
 export { Tooltip } from './Tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.46.0",
+  "version": "2.47.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/index.ts

@@ -18,4 +18,5 @@ export { DatePicker } from './forms/date/datePicker/DatePicker';
 export { IconTriggerDatePicker } from './forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
+export { Modal } from './modal';
 export { Badge } from './badge';

package/src/components/modal/Modal.mdx

@@ -0,0 +1,111 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Modal from './Modal.stories';
+
+<Meta title="Components/Modal" name="Modal" of={Modal} />
+
+# Modal
+The Modal component provides us with a way to display content in a modal window. It can be used as a confirmation modal or as a content modal. It extends the react-modal library. For more information on props not listed here, please visit the [react-modal documentation](https://github.com/reactjs/react-modal).
+<Canvas of={Modal.Default} />
+
+### The following props are available for the Modal component:
+
+<Controls of={Modal.Default} />
+
+## Usage
+We have designed this modal with the intention for it to be used as a wrapper for content as you will see below. The recommended way to best use this component is to create your own wrapper in your application for specific modal needs. For example, you may create a wrapper component that displays a confirmation modal. You may also wish to create one for a stepper modal. The idea is that you wrap this modal in a component and build the body of your modal in that wrapped component so that you can reuse the modal component for different modal needs.
+
+### Opening The Modal
+To open the modal, you can use the following as an example. You create a state variable to control the modal's open/close state and then pass that state variable to the modal component.
+
+```tsx
+const [isOpen, setIsOpen] = useState<boolean>(false);
+
+const handleOpen = () => {
+  setIsOpen(true);
+};
+
+const handleClose = () => {
+  setIsOpen(false);
+};
+
+<Button onClick={handleOpen}>Open Modal</Button>
+
+// Modal Component
+<Modal isOpen={isOpen} onRequestClose={handleClose}>
+  <h2>The Legend of Zelda</h2>
+</Modal>
+```
+
+### Content Modal
+The content inside of the Modal tag will be displayed when you open the modal. Anything you pass to the modal should be visible. There is also no set width for the modal, it will take up the width you provide the body elements.
+
+```tsx
+<Modal
+  isOpen={isOpen}
+  onRequestClose={() => {}}
+  shouldCloseOnEsc
+  shouldCloseOnOverlayClick
+>
+  <h2>
+    The Legend of Zelda
+  </h2>
+  <p>
+    In the mystical realm of Hyrule, where ancient magic flows through verdant fields and towering mountains, a timeless tale unfolds across countless generations. The legendary hero Link, eternally reborn when darkness threatens the land, stands as the chosen wielder of the Master Sword and bearer of the Triforce of Courage. Through the ages, he has faced the malevolent forces of Ganon, whose insatiable desire for power has brought destruction and chaos to this peaceful kingdom.
+  </p>
+  <p>
+    Princess Zelda, blessed with the wisdom of the goddesses and keeper of the royal bloodline, serves as both ruler and guardian of Hyrule's most sacred treasures. Together with Link, she maintains the delicate balance between light and shadow, protecting the realm from those who would seek to corrupt its divine power. From the windswept peaks of Death Mountain to the depths of Lake Hylia, their epic saga continues to inspire hope and courage in all who call Hyrule home, as they battle against the forces of evil that would plunge their world into darkness.
+  </p>
+  <div className="actions text-align--right">
+    <hr />
+    <Button
+      ariaLabel="Close"
+      onClick={() => {}}
+      variant="outline"
+    >
+      Close
+    </Button>
+  </div>
+</Modal>
+```
+
+### Confirmation Modal
+If you are looking for a confirmation modal, you can use the following as an example.
+
+```tsx
+<Modal isOpen={isOpen} onRequestClose={handleClose}>
+  <h2>Would you like to continue?</h2>
+  <p>
+    If you would like to proceed, please click the confirm button. Otherwise, click the
+    cancel button.
+  </p>
+  <hr />
+  <Row nogutter justify="end" align="center">
+    <Col xs="content">
+      <Button
+        onClick={() => {
+          console.log('cancelled');
+          handleClose();
+        }}
+        className="mr-2"
+        variant="outline"
+        ariaLabel="Cancel"
+      >
+        Cancel
+      </Button>
+      <Button
+        onClick={() => {
+          console.log('confirmed');
+          handleClose();
+        }}
+        ariaLabel="Confirm"
+      >
+        Confirm
+      </Button>
+    </Col>
+  </Row>
+</Modal>
+```
+
+### Title vs Content
+The title prop is optional for the modal. If you do not provide a title, the modal will only display the content. If you do provide a title, the modal will display the title and content.
+  

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

@@ -0,0 +1,275 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Modal } from './Modal';
+import { Col, Container, Row } from '../grid';
+import { useState } from 'react';
+import { Button } from '../button';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { indiconDefinitions } from '@/components/icons/indicons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+
+registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
+
+const meta: Meta = {
+  title: 'Components/Modal',
+  component: Modal,
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes for the badge component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    children: {
+      control: false,
+      description: 'The content of the badge (superseded by the string prop)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    isOpen: {
+      control: false,
+      description: 'Whether the modal is open',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    onRequestClose: {
+      control: false,
+      description: 'Callback function to be called when the modal is closed',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'function',
+        },
+      },
+    },
+    portalClassName: {
+      control: false,
+      description: 'Additional classes for the portal element',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    overlayClassName: {
+      control: false,
+      description: 'Additional classes for the overlay element',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    appElement: {
+      control: false,
+      description: 'The element to use as the app element',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'HTMLElement',
+        },
+      },
+    },
+    shouldCloseOnOverlayClick: {
+      control: 'boolean',
+      description: 'Whether the modal should close when the overlay is clicked',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    shouldCloseOnEsc: {
+      control: 'boolean',
+      description: 'Whether the modal should close when the escape key is pressed',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    contentElement: {
+      control: false,
+      description: 'Custom content element for the modal',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    overlayElement: {
+      control: false,
+      description: 'Custom overlay element for the modal',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    position: {
+      control: 'select',
+      options: ['top', 'center'],
+      description: 'The position of the modal opens on the page',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    testId: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    className: '',
+    onRequestClose: () => {
+      console.log('closed');
+    },
+    shouldCloseOnOverlayClick: true,
+    shouldCloseOnEsc: true,
+  },
+
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
+              <h2>The Legend of Zelda</h2>
+              <p>
+                In the mystical realm of Hyrule, where ancient magic flows through verdant fields
+                and towering mountains, a timeless tale unfolds across countless generations. The
+                legendary hero Link, eternally reborn when darkness threatens the land, stands as
+                the chosen wielder of the Master Sword and bearer of the Triforce of Courage.
+                Through the ages, he has faced the malevolent forces of Ganon, whose insatiable
+                desire for power has brought destruction and chaos to this peaceful kingdom.
+              </p>
+              <p>
+                Princess Zelda, blessed with the wisdom of the goddesses and keeper of the royal
+                bloodline, serves as both ruler and guardian of Hyrule's most sacred treasures.
+                Together with Link, she maintains the delicate balance between light and shadow,
+                protecting the realm from those who would seek to corrupt its divine power. From the
+                windswept peaks of Death Mountain to the depths of Lake Hylia, their epic saga
+                continues to inspire hope and courage in all who call Hyrule home, as they battle
+                against the forces of evil that would plunge their world into darkness.
+              </p>
+              <div className="actions text-align--right">
+                <hr />
+                <Button onClick={handleClose} ariaLabel="Close" variant="outline">
+                  Close
+                </Button>
+              </div>
+            </Modal>
+            <Button ariaLabel="open modal" onClick={handleOpen}>
+              Open modal
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};
+
+export const ConfirmationModal: Story = {
+  args: {
+    className: '',
+    onRequestClose: () => {
+      console.log('closed');
+    },
+    shouldCloseOnOverlayClick: true,
+    shouldCloseOnEsc: true,
+  },
+
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
+              <h2>Would you like to continue?</h2>
+              <p>
+                If you would like to proceed, please click the confirm button. Otherwise, click the
+                cancel button.
+              </p>
+              <hr />
+              <Row nogutter justify="end" align="center">
+                <Col xs="content">
+                  <Button
+                    onClick={() => {
+                      console.log('cancelled');
+                      handleClose();
+                    }}
+                    className="mr-2"
+                    variant="outline"
+                    ariaLabel="Cancel"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      console.log('confirmed');
+                      handleClose();
+                    }}
+                    ariaLabel="Confirm"
+                  >
+                    Confirm
+                  </Button>
+                </Col>
+              </Row>
+            </Modal>
+            <Button ariaLabel="open modal" onClick={handleOpen}>
+              Open modal
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/modal/Modal.tsx

@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import ReactModal from 'react-modal';
+import { Button } from '../button/Button';
+import { Col, Row } from '../grid';
+import { ModalProps } from './types';
+
+export const Modal = ({
+  className = '',
+  children,
+  isOpen,
+  onRequestClose,
+  portalClassName,
+  overlayClassName,
+  appElement,
+  shouldCloseOnOverlayClick,
+  shouldCloseOnEsc,
+  testId,
+  contentElement,
+  overlayElement,
+  position = 'center',
+  ...rest
+}: ModalProps) => {
+  const modalClasses = classNames('modal', `modal--${position}`, className);
+  const overlayClasses = classNames('modal-overlay', overlayClassName);
+
+  return (
+    <ReactModal
+      style={{}}
+      className={modalClasses}
+      overlayClassName={overlayClasses}
+      testId={testId}
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      portalClassName={portalClassName}
+      appElement={appElement}
+      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+      shouldCloseOnEsc={shouldCloseOnEsc}
+      contentElement={contentElement}
+      overlayElement={overlayElement}
+      {...rest}
+    >
+      <div className="modal-content">
+        <div className="modal-header">
+          <Row nogutter>
+            <Col xs={12} className="modal-close">
+              <Button
+                className="modal-close-button"
+                onClick={onRequestClose}
+                variant="link"
+                size="md"
+                iconLeft="fa-xmark"
+                ariaLabel="Close"
+              />
+            </Col>
+          </Row>
+        </div>
+        <div className="modal-body">{children}</div>
+      </div>
+    </ReactModal>
+  );
+};

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

@@ -0,0 +1,60 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Modal } from '../Modal';
+
+// Mock ReactModal's app element setting to avoid warnings
+beforeAll(() => {
+  const div = document.createElement('div');
+  div.setAttribute('id', 'root');
+  document.body.appendChild(div);
+});
+
+describe('Modal', () => {
+  const mockOnRequestClose = jest.fn();
+
+  const defaultProps = {
+    isOpen: true,
+    onRequestClose: mockOnRequestClose,
+    title: 'Test Modal',
+    ariaHideApp: false, // Disable aria hiding for tests
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders children content', () => {
+    render(
+      <Modal {...defaultProps}>
+        <p>Modal content</p>
+      </Modal>,
+    );
+    expect(screen.getByText('Modal content')).toBeInTheDocument();
+  });
+
+  it('calls onRequestClose when close button is clicked', () => {
+    render(<Modal {...defaultProps} />);
+    const closeButton = screen.getByLabelText('Close');
+    fireEvent.click(closeButton);
+    expect(mockOnRequestClose).toHaveBeenCalledTimes(1);
+  });
+
+  describe('Modal positioning', () => {
+    it('applies center position class by default', () => {
+      render(<Modal {...defaultProps} />);
+      const modal = screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal--center');
+    });
+
+    it('applies top position class when specified', () => {
+      render(<Modal {...defaultProps} position="top" />);
+      const modal = screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal--top');
+    });
+  });
+
+  it('applies custom className when provided', () => {
+    render(<Modal {...defaultProps} className="custom-modal" />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('custom-modal');
+  });
+});

package/src/components/modal/index.ts

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

package/src/components/modal/styles/Modal.scss

@@ -0,0 +1,100 @@
+// Common Variables
+:root {
+  --pf-modal-rounded: var(--pf-rounded-lg);
+}
+
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+  --pf-modal-background-color: var(--pf-white-color);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'],
+:root {
+  --pf-modal-background-color: var(--pf-primary-color-600);
+  --pf-modal-border-color: var(--pf-border-color);
+}
+
+// Library overrides
+.ReactModal__Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+// New CSS
+.modal {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--pf-background-color);
+  border-radius: var(--pf-modal-rounded);
+  outline: none;
+
+  &--center {
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &--top {
+    top: 50px;
+  }
+
+  .modal-content {
+    background-color: var(--pf-modal-background-color);
+    border: var(--pf-border-sm) solid var(--pf-modal-border-color);
+    border-radius: var(--pf-modal-rounded);
+
+    .modal-body {
+      padding: var(--pf-padding-8);
+      padding-top: 0;
+
+      h2 {
+        font-size: var(--pf-font-size-h1);
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin-bottom: var(--pf-margin-4);
+      }
+
+      p {
+        margin-bottom: var(--pf-margin-4);
+      }
+
+      // We should build a divider component for this
+      hr {
+        margin-top: var(--pf-margin-8);
+        margin-bottom: var(--pf-margin-8);
+        border: var(--pf-border-sm) solid var(--pf-border-color);
+      }
+    }
+
+    .modal-close {
+      text-align: right;
+    }
+  }
+}

package/src/components/modal/types.ts

@@ -0,0 +1,15 @@
+export interface ModalProps {
+  className?: string;
+  children?: React.ReactNode;
+  isOpen: boolean;
+  onRequestClose?: () => void;
+  portalClassName?: string;
+  overlayClassName?: string;
+  appElement?: HTMLElement;
+  shouldCloseOnOverlayClick?: boolean;
+  shouldCloseOnEsc?: boolean;
+  testId?: string;
+  contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
+  overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
+  position?: 'top' | 'center';
+}

package/src/index.ts

@@ -4,14 +4,7 @@ import './setup/setupIcons';
 // This is so consumers of the DS can import floating ui functions/hooks/types from the DS rather than the (peer dependency) floating-ui package
 export * from '@floating-ui/react-dom';
 
-export {
-  BarSpinner,
-  CirclePulse,
-  CircleSpinner,
-  ConfirmModal,
-  ModalBase,
-  Tooltip,
-} from './legacy/components';
+export { BarSpinner, CirclePulse, CircleSpinner, Tooltip } from './legacy/components';
 
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
@@ -34,6 +27,7 @@ export { FloatUI } from './components/floatUI';
 export { Menu } from './components/menu';
 export { Pill } from './components/pill';
 export { Badge } from './components/badge';
+export { Modal } from './components/modal';
 
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';

package/src/legacy/components/index.ts

@@ -1,3 +1,2 @@
 export { BarSpinner, CirclePulse, CircleSpinner } from './loading-indicators';
-export { ConfirmModal, ModalBase } from './modals';
 export { Tooltip } from './Tooltip';

package/src/setup/setupIcons.ts

@@ -22,6 +22,7 @@ import {
   faFileDownload,
   faQuestionCircle,
   faCopy,
+  faXmark,
 } from '@fortawesome/free-solid-svg-icons';
 import { indiconDefinitions } from '@/components/icons/indicons';
 
@@ -52,6 +53,7 @@ registerFontAwesomeIcons(
   faFileDownload,
   faQuestionCircle,
   faCopy,
+  faXmark,
   // backwards compat, don't require registration of custom indicons
   // might want to consider doing so in the future
   ...indiconDefinitions,