@indico-data/design-system 2.60.15 → 3.0.0

package/src/components/modal/ConfirmationModal.mdx

@@ -0,0 +1,69 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as ModalStories from './Modal.stories';
+
+<Meta title="Components/Modal" name="ConfirmationModal" of={ModalStories} />
+
+# ConfirmationModal
+The ConfirmationModal is a component that provides us with a way to display a confirmation modal. It extends the Modal component. For more information on props not listed here, please visit the [react-modal documentation](https://github.com/reactjs/react-modal).
+
+<Canvas of={ModalStories.ConfirmationModalStory} source={{
+    code: `
+     const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <ConfirmationModal
+                className: '',
+                onRequestClose: () => {
+                  console.log('closed');
+                },
+                title: 'Disable User',
+                confirmationButtonText: 'Delete',
+                confirmationButtonVariant: 'destructive',
+                cancelButtonText: 'Cancel',
+                shouldCloseOnOverlayClick: true,
+                icon: 'trash',
+                status: 'error',
+                shouldCloseOnEsc: true,
+                parentSelector: () => document.body,
+                maxWidthInPixels: 600,
+                isOpen={isOpen}
+                onRequestClose={handleClose}
+              >
+              <p>
+                Deleting user will no longer allow this person to have access to this organization.
+                You can always invite them again if you change your mind.
+              </p>
+            </ConfirmationModal>
+            <Button ariaLabel="open modal" onClick={handleOpen}>
+              Open modal
+            </Button>
+          </Col>
+        </Row>
+      </Container>   
+    `
+}} />
+
+### The following props are available for the ConfirmationModal component:
+
+<Controls of={ModalStories.ConfirmationModalStory}  />
+
+## Usage
+
+The ConfirmationModal component is designed to be used as a confirmation modal. It is a wrapper around the Modal component and extends it with the following additional props:
+
+- **confirmationButtonText** (string): The text displayed on the confirmation button. Default: 'Confirm'
+- **confirmationButtonVariant** (string): The variant of the confirmation button. Options: 'solid', 'outline', 'link', 'action', 'destructive', 'soft'. Default: 'solid'
+- **cancelButtonText** (string): The text displayed on the cancel button. Default: 'Cancel'
+- **status** (string): The status of the modal which determines the icon color. Options: 'info', 'success', 'error'. Default: 'info'
+- **icon** (string): The icon to display in the modal. Uses the available icon names from the design system.

package/src/components/modal/ConfirmationModal.tsx

@@ -0,0 +1,103 @@
+import { Button } from '../button/Button';
+import { ButtonVariants } from '../button/types';
+import { Col, Row } from '../grid';
+import { Icon } from '../icons/Icon';
+import { Modal } from './Modal';
+import { ConfirmationModalProps } from './types';
+import classNames from 'classnames';
+
+const defaultFooter = ({
+  onCancelRequest,
+  onConfirmRequest,
+  confirmationButtonText,
+  confirmationButtonVariant,
+  cancelButtonText,
+}: {
+  onCancelRequest?: () => void;
+  onConfirmRequest?: () => void;
+  confirmationButtonText?: string;
+  confirmationButtonVariant?: ButtonVariants;
+  cancelButtonText?: string;
+}) => (
+  <Row gutterWidth={12} justify="end" align="center">
+    <Col xs="content">
+      <Button onClick={onCancelRequest} ariaLabel={cancelButtonText || 'Cancel'} variant="outline">
+        {cancelButtonText}
+      </Button>
+    </Col>
+    <Col xs="content">
+      <Button
+        onClick={onConfirmRequest}
+        ariaLabel={confirmationButtonText || 'Confirm'}
+        variant={confirmationButtonVariant}
+      >
+        {confirmationButtonText}
+      </Button>
+    </Col>
+  </Row>
+);
+
+export const ConfirmationModal = ({
+  className,
+  overlayClassName,
+  testId,
+  isOpen,
+  onRequestClose,
+  portalClassName,
+  appElement,
+  parentSelector,
+  shouldCloseOnOverlayClick,
+  shouldCloseOnEsc,
+  contentElement,
+  overlayElement,
+  footer,
+  children,
+  onConfirmRequest,
+  onCancelRequest,
+  confirmationButtonText = 'Confirm',
+  cancelButtonText = 'Cancel',
+  confirmationButtonVariant = 'solid',
+  icon,
+  title,
+  status = 'info',
+  maxWidthInPixels,
+}: ConfirmationModalProps) => {
+  const modalFooter =
+    footer ||
+    defaultFooter({
+      onCancelRequest,
+      onConfirmRequest,
+      confirmationButtonText,
+      cancelButtonText,
+      confirmationButtonVariant,
+    });
+
+  return (
+    <Modal
+      className={classNames('confirmation-modal', className)}
+      overlayClassName={overlayClassName}
+      testId={testId}
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      portalClassName={portalClassName}
+      appElement={appElement}
+      parentSelector={parentSelector}
+      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+      shouldCloseOnEsc={shouldCloseOnEsc}
+      contentElement={contentElement}
+      overlayElement={overlayElement}
+      footer={modalFooter}
+      maxWidthInPixels={maxWidthInPixels}
+    >
+      {icon && (
+        <Icon
+          name={icon}
+          className={classNames('confirmation-modal-icon', `color-${status}`)}
+          size="xl"
+        />
+      )}
+      {title && <h2 className="confirmation-modal-title">{title}</h2>}
+      {children}
+    </Modal>
+  );
+};

package/src/components/modal/Modal.mdx

@@ -5,17 +5,85 @@ import * as Modal from './Modal.stories';
 
 # 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} />
-
+<Canvas of={Modal.Default} source={{
+    code: `
+     const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    const footer = (
+      <>
+        <Row gutterWidth={12} justify="end" align="center">
+          <Col xs="content">
+            <Button onClick={handleClose} ariaLabel="Cancel" variant="outline">
+              Cancel
+            </Button>
+          </Col>
+          <Col xs="content">
+            <Button onClick={handleClose} ariaLabel="Confirm" variant="solid">
+              Confirm
+            </Button>
+          </Col>
+        </Row>
+      </>
+    );
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Modal
+              title: 'The Legend of Zelda',
+              subtitle: 'A timeless tale of courage and adventure',
+              className: '',
+              maxWidthInPixels: 800,
+              onRequestClose: () => {
+                console.log('closed');
+              },
+              shouldCloseOnOverlayClick: true,
+              shouldCloseOnEsc: true,
+            >
+              <p className="mb-4">
+                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 className="mb-4">
+                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>
+            </Modal>
+            <Button ariaLabel="open modal" onClick={handleOpen}>
+              Open modal
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    )
+` }} />
 ### 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.
+The modal component is designed to be an opinionated wrapper for your content. The header has conditionals that will reveal a horizontal line if there is atleast a title or a subtitle. The footer is also conditionally rendered based on the presence of a footer prop. If you need a simple confirmation modal, you can use the ConfirmationModal component. If you need something a little more custom, you should use this component.
 
 ### Parent Selector
-You may have an issue with styling and require the modal to be displayed in a specific part of your application. You can use the `parentSelector` prop to pass in a function that returns the element you want to use as the parent element for the modal. In insights we have the following example.
+You may have an issue with styling and require the modal to be displayed in a specific part of your application. You can use the `parentSelector` prop to pass in a function that returns the element you want to use as the parent element for the modal. In insights we have the following example. This is baked into the modal as of the latst version.
 
 ```tsx
   const parentSelector = () =>
@@ -81,41 +149,3 @@ The content inside of the Modal tag will be displayed when you open the modal. A
   </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>
-```

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

@@ -6,6 +6,7 @@ import { Button } from '../button';
 import { registerFontAwesomeIcons } from '@/setup/setupIcons';
 import { indiconDefinitions } from '@/components/icons/indicons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { ConfirmationModal } from './ConfirmationModal';
 
 registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 
@@ -150,6 +151,99 @@ const meta: Meta = {
         disable: true,
       },
     },
+    title: {
+      control: 'text',
+      description: 'The title of the modal',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    footer: {
+      control: false,
+      description: 'The footer of the modal. It accepts a React Component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    subtitle: {
+      control: 'text',
+      description: 'The subtitle of the modal',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    maxWidthInPixels: {
+      control: 'number',
+      description: 'The maximum width of the modal in pixels',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    confirmationButtonText: {
+      control: 'text',
+      description: 'The text of the confirmation button',
+      table: {
+        category: 'Confirmation Modal',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    confirmationButtonVariant: {
+      control: 'select',
+      options: ['solid', 'outline', 'link', 'action', 'destructive', 'soft'],
+      description: 'The variant of the confirmation button. ',
+      table: {
+        category: 'Confirmation Modal',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    cancelButtonText: {
+      control: 'text',
+      description: 'The text of the cancel button',
+      table: {
+        category: 'Confirmation Modal',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    status: {
+      control: 'select',
+      options: ['info', 'success', 'error'],
+      description: 'The status of the modal. This will determine the color of the icon.',
+      table: {
+        category: 'Confirmation Modal',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    icon: {
+      control: 'select',
+      options: Object.keys(indiconDefinitions),
+      description: 'The icon of the modal',
+      table: {
+        category: 'Confirmation Modal',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
   },
 };
 
@@ -159,12 +253,17 @@ type Story = StoryObj<typeof Modal>;
 
 export const Default: Story = {
   args: {
+    title: 'The Legend of Zelda',
+    subtitle: 'A timeless tale of courage and adventure',
     className: '',
+    maxWidthInPixels: 800,
     onRequestClose: () => {
       console.log('closed');
     },
     shouldCloseOnOverlayClick: true,
     shouldCloseOnEsc: true,
+    parentSelector: () =>
+      document.getElementById('theme-root') || document.getElementById('root') || document.body,
   },
 
   render: (args) => {
@@ -178,12 +277,28 @@ export const Default: Story = {
       setIsOpen(false);
     };
 
+    const footer = (
+      <>
+        <Row gutterWidth={12} justify="end" align="center">
+          <Col xs="content">
+            <Button onClick={handleClose} ariaLabel="Cancel" variant="outline">
+              Cancel
+            </Button>
+          </Col>
+          <Col xs="content">
+            <Button onClick={handleClose} ariaLabel="Confirm" variant="solid">
+              Confirm
+            </Button>
+          </Col>
+        </Row>
+      </>
+    );
+
     return (
       <Container>
         <Row>
           <Col sm={4}>
-            <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
-              <h2 className="mb-4">The Legend of Zelda</h2>
+            <Modal {...args} isOpen={isOpen} onRequestClose={handleClose} footer={footer}>
               <p className="mb-4">
                 In the mystical realm of Hyrule, where ancient magic flows through verdant fields
                 and towering mountains, a timeless tale unfolds across countless generations. The
@@ -201,12 +316,6 @@ export const Default: Story = {
                 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
@@ -218,14 +327,22 @@ export const Default: Story = {
   },
 };
 
-export const ConfirmationModal: Story = {
+export const ConfirmationModalStory: StoryObj<typeof ConfirmationModal> = {
   args: {
     className: '',
     onRequestClose: () => {
       console.log('closed');
     },
+    title: 'Disable User',
+    confirmationButtonText: 'Delete',
+    confirmationButtonVariant: 'destructive',
+    cancelButtonText: 'Cancel',
     shouldCloseOnOverlayClick: true,
+    icon: 'trash',
+    status: 'error',
     shouldCloseOnEsc: true,
+    parentSelector: () => document.body,
+    maxWidthInPixels: 600,
   },
 
   render: (args) => {
@@ -243,38 +360,12 @@ export const ConfirmationModal: Story = {
       <Container>
         <Row>
           <Col sm={4}>
-            <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
-              <h2 className="mb-4">Would you like to continue?</h2>
-              <p className="mb-4">
-                If you would like to proceed, please click the confirm button. Otherwise, click the
-                cancel button.
+            <ConfirmationModal {...args} isOpen={isOpen} onRequestClose={handleClose}>
+              <p>
+                Deleting user will no longer allow this person to have access to this organization.
+                You can always invite them again if you change your mind.
               </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>
+            </ConfirmationModal>
             <Button ariaLabel="open modal" onClick={handleOpen}>
               Open modal
             </Button>

package/src/components/modal/Modal.tsx

@@ -20,15 +20,20 @@ export const Modal = ({
   contentElement,
   overlayElement,
   position = 'center',
-  parentSelector,
+  parentSelector = () => document.getElementById('theme-root') || document.getElementById('root')!, // default for our apps, storybook needs a different one
+  title,
+  subtitle,
+  footer,
+  maxWidthInPixels,
   ...rest
 }: ModalProps) => {
   const modalClasses = classNames('modal', `modal--${position}`, className);
   const overlayClasses = classNames('modal-overlay', overlayClassName);
 
+  const hasHeader = title || subtitle;
+
   return (
     <ReactModal
-      style={{}}
       className={modalClasses}
       overlayClassName={overlayClasses}
       testId={testId}
@@ -43,7 +48,7 @@ export const Modal = ({
       overlayElement={overlayElement}
       {...rest}
     >
-      <div className="modal-content">
+      <div className="modal-content" style={{ maxWidth: `${maxWidthInPixels}px` }}>
         <Button
           className="modal-close-button"
           onClick={onRequestClose}
@@ -52,7 +57,19 @@ export const Modal = ({
           iconLeft="x-close"
           ariaLabel="Close"
         />
+        {hasHeader && (
+          <div className="modal-header">
+            <Row justify="between" align="center">
+              <Col>
+                {title && <h2 className="modal-title">{title}</h2>}
+                {subtitle && <p className="modal-subtitle">{subtitle}</p>}
+              </Col>
+            </Row>
+          </div>
+        )}
+
         <div className="modal-body">{children}</div>
+        {footer && <div className="modal-footer">{footer}</div>}
       </div>
     </ReactModal>
   );

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

@@ -57,4 +57,16 @@ describe('Modal', () => {
     const modal = screen.getByRole('dialog');
     expect(modal).toHaveClass('custom-modal');
   });
+
+  it('shows header when title is provided', () => {
+    render(<Modal {...defaultProps} title="Test Modal" />);
+    const header = screen.getByRole('heading');
+    expect(header).toBeInTheDocument();
+  });
+
+  it('shows header when subtitle is provided', () => {
+    render(<Modal {...defaultProps} subtitle="Test Modal" />);
+    const header = screen.getByRole('heading');
+    expect(header).toBeInTheDocument();
+  });
 });

package/src/components/modal/index.ts

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