@indico-data/design-system 2.46.0 → 2.47.1

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

@@ -22,6 +22,7 @@
 @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} />;
-  },
-};

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

@@ -1,72 +0,0 @@
-import React from 'react';
-import ReactModal from 'react-modal';
-import styled from 'styled-components';
-
-// see: https://github.com/reactjs/react-modal/issues/603
-function ModalAdapter(props: any): React.ReactElement {
-  const { className } = props;
-  const contentClassName = `${className}__content`;
-  const overlayClassName = `${className}__overlay`;
-
-  return (
-    <ReactModal
-      {...props}
-      portalClassName={className}
-      className={contentClassName}
-      overlayClassName={overlayClassName}
-      closeTimeoutMS={120}
-      appElement={document.getElementById(props.node || 'root')}
-    >
-      <div className="modal-content">{props.children}</div>
-    </ReactModal>
-  );
-}
-
-export const StyledModalBase = styled(ModalAdapter)`
-  .modal-content {
-    background-color: var(--pf-primary-color-600);
-    padding: var(--pf-padding-4);
-    border-radius: var(--pf-rounded-lg);
-  }
-
-  .${(props) => props.className}__content {
-    position: absolute;
-    top: 70px;
-    left: 50%;
-    transform: translateX(-50%);
-
-    overflow: visible;
-    padding: 0;
-
-    border-radius: 4px;
-    outline: none;
-
-    width: ${(props) => (props.maxWidth ? '100%' : 'auto')};
-    max-width: ${(props) => props.maxWidth || 'none'};
-  }
-
-  .${(props) => props.className}__overlay {
-    z-index: 900;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-  }
-
-  .ReactModal__Overlay {
-    opacity: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    transition: opacity 120ms ease-in-out;
-  }
-
-  .ReactModal__Overlay--after-open {
-    opacity: 1;
-    position: fixed;
-  }
-
-  .ReactModal__Overlay--before-close {
-    opacity: 0;
-  }
-`;

package/src/legacy/components/modals/ModalBase/ModalBase.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 type { PermafrostComponent } from '../../../../types';
-
-import { StyledModalBase } from './ModalBase.styles';
-
-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 function ModalBase(props: ModalBaseProps) {
-  const {
-    children,
-    className,
-    clickToDismiss,
-    describedBy,
-    id,
-    node,
-    open,
-    preventEscDismiss,
-    preventReturnFocus,
-    maxWidth,
-  } = props;
-
-  const ariaProps = {} as { labelledby?: string; describedby?: string };
-
-  if ('labelElement' in props) {
-    ariaProps['labelledby'] = props.labelElement;
-  }
-
-  if (describedBy) {
-    ariaProps['describedby'] = describedBy;
-  }
-
-  // Try to render modal within the theme-root, otherwise attach to the root
-  const parentSelector = () => {
-    const themeRoot = document.getElementById('theme-root');
-    const root = document.getElementById('root');
-    return themeRoot || root || document.body;
-  };
-
-  return (
-    <StyledModalBase
-      ariaHideApp={false}
-      data-cy={props['data-cy']}
-      aria={ariaProps}
-      className={className || 'baseModal'}
-      contentLabel={'labelText' in props ? props.labelText : null}
-      id={id}
-      isOpen={open}
-      node={node}
-      onRequestClose={clickToDismiss}
-      parentSelector={parentSelector}
-      shouldCloseOnEsc={!preventEscDismiss}
-      shouldReturnFocusAfterClose={!preventReturnFocus}
-      maxWidth={maxWidth}
-    >
-      {children}
-    </StyledModalBase>
-  );
-}

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

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

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

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