@indico-data/design-system 2.45.6 → 2.47.0

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,16 +4,8 @@ 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';
 
-// New Components
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
 export { Icon } from './components/icons';
@@ -34,6 +26,8 @@ export { Card } from './components/card';
 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,

package/src/styles/index.scss

@@ -21,6 +21,8 @@
 @import '../components/menu/styles/Menu.scss';
 @import '../components/floatUI/styles/FloatUI.scss';
 @import '../components/forms/date/datePicker/styles/DatePicker.scss';
+@import '../components/badge/styles/Badge.scss';
+@import '../components/modal/styles/Modal.scss';
 
 @import '../components/pill/styles/Pill.scss';
 @import 'sheets'; // Port to an sheets component when we build it

package/lib/legacy/components/modals/ConfirmModal/ConfirmModal.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ModalBaseProps } from '../ModalBase';
-import type { PermafrostComponent } from '../../../../types';
-type Props = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
-    describedBy?: string;
-    clickOutsideHandler(e?: React.SyntheticEvent): void;
-    confirmText?: string;
-    message?: string | React.ReactNode;
-    modalNode?: string;
-    processing?: boolean;
-    rejectText?: string;
-    responseHandler(response: boolean, event: React.SyntheticEvent): void;
-    title?: string | React.ReactNode;
-    width?: number;
-};
-export declare function ConfirmModal(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/legacy/components/modals/ConfirmModal/ConfirmModal.stories.d.ts

@@ -1,44 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { ConfirmModal } from './ConfirmModal';
-declare const meta: {
-    component: typeof ConfirmModal;
-    title: string;
-    args: {
-        title: string;
-        message: string;
-        confirmText: string;
-        rejectText: string;
-    };
-    argTypes: {
-        open: {
-            control: {
-                disable: true;
-            };
-        };
-        className: {
-            control: {
-                disable: true;
-            };
-        };
-        describedBy: {
-            control: {
-                disable: true;
-            };
-        };
-        modalNode: {
-            control: {
-                disable: true;
-            };
-        };
-        width: {
-            control: {
-                disable: true;
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof ConfirmModal>;
-export declare const Base: Story;
-export declare const Open: Story;
-export declare const processing: Story;

package/lib/legacy/components/modals/ConfirmModal/ConfirmModal.styles.d.ts

@@ -1 +0,0 @@
-export declare const StyledConfirmModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

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

package/lib/legacy/components/modals/ModalBase/ModalBase.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import type { PermafrostComponent } from '../../../../types';
-export type ModalBaseProps = PermafrostComponent & {
-    children: React.ReactNode | React.ReactNode[];
-    clickToDismiss?(): void;
-    describedBy?: string;
-    node?: string;
-    open: boolean;
-    preventEscDismiss?: boolean;
-    preventReturnFocus?: boolean;
-    maxWidth?: string;
-} & ({
-    labelElement: string;
-} | {
-    labelText: string;
-});
-/**
- * Base modal component, powered by [react-modal](http://reactcommunity.org/react-modal/#usage)
- *
- * (Also see `ModalAdapter` in the styles file)
- *
- * Accessible element label must be included either as a string passed to `labelText`, or
- * the id of one of the children passed to `labelElement`. If a description is available,
- * pass that element’s id to the `describedBy` prop.
- */
-export declare function ModalBase(props: ModalBaseProps): import("react/jsx-runtime").JSX.Element;

package/lib/legacy/components/modals/ModalBase/ModalBase.stories.d.ts

@@ -1,9 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { ModalBase } from './ModalBase';
-declare const meta: {
-    component: typeof ModalBase;
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof ModalBase>;
-export declare const Base: Story;

package/lib/legacy/components/modals/ModalBase/ModalBase.styles.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-declare function ModalAdapter(props: any): React.ReactElement;
-export declare const StyledModalBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never>> & string & Omit<typeof ModalAdapter, keyof React.Component<any, {}, any>>;
-export {};

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

@@ -1,2 +0,0 @@
-export { ModalBase } from './ModalBase';
-export type { ModalBaseProps } from './ModalBase';

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

@@ -1,2 +0,0 @@
-export { ConfirmModal } from './ConfirmModal';
-export { ModalBase } from './ModalBase';

package/src/legacy/components/modals/ConfirmModal/ConfirmModal.stories.tsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ConfirmModal } from './ConfirmModal';
-
-const meta = {
-  component: ConfirmModal,
-  title: 'legacy/Modals/ConfirmModal',
-  args: {
-    title: 'Im sorry, Dave. Im afraid I cant do that.',
-    message: 'This mission is too important for me to allow you to jeopardize it.',
-    confirmText: 'I dont know what youre talking about, Hal.',
-    rejectText: 'I dont know what youre talking about, Hal.',
-  },
-  argTypes: {
-    open: { control: { disable: true } },
-    className: { control: { disable: true } },
-    describedBy: { control: { disable: true } },
-    modalNode: { control: { disable: true } },
-    width: { control: { disable: true } },
-  },
-} satisfies Meta<typeof ConfirmModal>;
-
-export default meta;
-type Story = StoryObj<typeof ConfirmModal>;
-
-function StoryRender(props: any) {
-  const [isOpen, setIsOpen] = useState<boolean>(props.open);
-
-  const handleOpen = () => {
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <>
-      <button type="button" onClick={handleOpen}>
-        Open the pod bay doors, HAL.
-      </button>
-
-      <ConfirmModal {...props} open={isOpen} responseHandler={handleClose} />
-    </>
-  );
-}
-
-export const Base: Story = {
-  args: {
-    processing: false,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Open: Story = {
-  args: {
-    open: true,
-    processing: false,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const processing: Story = {
-  args: {
-    open: true,
-    processing: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};

package/src/legacy/components/modals/ConfirmModal/ConfirmModal.styles.ts

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledConfirmModal = styled.div`
-  padding: 20px;
-
-  .title {
-    margin: 30px 16px;
-
-    text-align: center;
-  }
-
-  .message {
-    text-align: center;
-    padding-bottom: 16px;
-  }
-
-  .actions {
-    text-align: center;
-    padding-bottom: 40px;
-
-    button {
-      min-width: 300px;
-      display: block;
-      margin: 16px auto 0;
-    }
-  }
-`;

package/src/legacy/components/modals/ConfirmModal/ConfirmModal.tsx

@@ -1,79 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import { v4 as uuid } from 'uuid';
-
-import { ModalBase } from '@/legacy/components/modals/ModalBase';
-import { Button } from '@/components/button';
-import { ModalBaseProps } from '../ModalBase';
-import type { PermafrostComponent } from '../../../../types';
-
-import { StyledConfirmModal } from './ConfirmModal.styles';
-
-type Props = PermafrostComponent &
-  Pick<ModalBaseProps, 'open'> & {
-    describedBy?: string;
-    clickOutsideHandler(e?: React.SyntheticEvent): void;
-    confirmText?: string;
-    message?: string | React.ReactNode;
-    modalNode?: string;
-    processing?: boolean;
-    rejectText?: string;
-    responseHandler(response: boolean, event: React.SyntheticEvent): void;
-    title?: string | React.ReactNode;
-    width?: number;
-  };
-
-export function ConfirmModal(props: Props) {
-  const id = uuid();
-  const {
-    className,
-    clickOutsideHandler,
-    confirmText,
-    describedBy,
-    message,
-    modalNode,
-    open,
-    processing,
-    rejectText,
-    responseHandler,
-    title,
-    width,
-  } = props;
-
-  return (
-    <ModalBase
-      className={className}
-      clickToDismiss={clickOutsideHandler}
-      data-cy={props['data-cy']}
-      describedBy={describedBy}
-      id={props.id}
-      labelElement={id}
-      node={modalNode}
-      open={open}
-    >
-      <StyledConfirmModal style={{ width: width || 555 }}>
-        {title && (
-          <div id={id} className="title">
-            {title || 'Please confirm'}
-          </div>
-        )}
-
-        {message && <div className="message">{message}</div>}
-
-        <Button ariaLabel="confirm" onClick={(event) => responseHandler(true, event)}>
-          {confirmText || 'Yes'}
-        </Button>
-
-        <Button
-          variant="outline"
-          ariaLabel="reject"
-          onClick={(event) => responseHandler(false, event)}
-        >
-          {rejectText || 'No'}
-        </Button>
-      </StyledConfirmModal>
-    </ModalBase>
-  );
-}

package/src/legacy/components/modals/ConfirmModal/index.ts

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

package/src/legacy/components/modals/ModalBase/ModalBase.stories.tsx

@@ -1,45 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ModalBase } from './ModalBase';
-
-const meta = {
-  component: ModalBase,
-  title: 'legacy/Modals/ModalBase',
-} satisfies Meta<typeof ModalBase>;
-
-export default meta;
-type Story = StoryObj<typeof ModalBase>;
-
-function StoryRender(props: any) {
-  const [isOpen, setIsOpen] = useState<boolean>(props.isOpen);
-
-  const handleOpen = () => {
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <>
-      <button type="button" onClick={handleOpen}>
-        open modal
-      </button>
-
-      <ModalBase {...props} open={isOpen} width="300px" clickToDismiss={handleClose}>
-        There is nothing to this modal at all. It is completely up to you to style its contents.
-      </ModalBase>
-    </>
-  );
-}
-
-export const Base: Story = {
-  args: {
-    labelText: 'my modal',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};