@indico-data/design-system 1.0.47 → 1.0.48

package/src/components/loading-indicators/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,61 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { RandomLoadingMessage } from '@/components';
+import { PermafrostComponent } from '@/types';
+import { COLORS } from '@/tokens';
+
+import { StyledLoadingIndicator, StyledMessageLoadingIndicator } from './LoadingIndicator.styles';
+
+type Props = PermafrostComponent & {
+  color?: string;
+  overallSize?: string | number;
+  rippleSize?: string | number;
+  showRandomMessage?: boolean;
+};
+
+export function LoadingIndicator(props: Props): React.ReactElement {
+  const {
+    className,
+    color,
+    id,
+    overallSize = '200px',
+    rippleSize = '76px',
+    showRandomMessage,
+  } = props;
+
+  const loadingIndicator = () => {
+    return (
+      <StyledLoadingIndicator
+        aria-hidden={true}
+        className={className}
+        data-cy={props['data-cy']}
+        id={id}
+        overallsize={returnSizeString(overallSize)}
+        ripplesize={returnSizeString(rippleSize)}
+        style={color ? { color } : { color: COLORS.curiousBlue }}
+      />
+    );
+  };
+
+  if (showRandomMessage) {
+    return (
+      <StyledMessageLoadingIndicator overallsize={returnSizeString(overallSize)}>
+        {loadingIndicator()}
+
+        <RandomLoadingMessage />
+      </StyledMessageLoadingIndicator>
+    );
+  }
+
+  return loadingIndicator();
+}
+
+function returnSizeString(size: string | number): string {
+  if (typeof size === 'number') {
+    return `${size}px`;
+  }
+
+  return size;
+}

package/src/components/loading-indicators/LoadingIndicator/index.ts

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

package/src/components/loading-indicators/index.ts

@@ -4,3 +4,4 @@ export { CirclePulse } from './CirclePulse';
 export { RandomLoadingMessage } from './RandomLoadingMessage';
 export { PercentageRing } from './PercentageRing';
 export { LoadingList } from './LoadingList';
+export { LoadingIndicator } from './LoadingIndicator';

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

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmModal } from './ConfirmModal';
+
+const meta = {
+  component: ConfirmModal,
+  title: '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/components/modals/ConfirmModal/ConfirmModal.styles.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+export const StyledConfirmModal = styled.div`
+  padding: 20px;
+
+  .title {
+    margin: 30px 16px;
+    font-size: ${TYPOGRAPHY.fontSize.display};
+    text-align: center;
+    color: ${COLORS.lightFontColor};
+  }
+
+  .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/components/modals/ConfirmModal/ConfirmModal.tsx

@@ -0,0 +1,84 @@
+// 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 { Button, LoadingAwareContainer, ModalBase } from '@/components';
+import { ModalBaseProps } from '../ModalBase';
+import { 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>}
+
+        <LoadingAwareContainer isLoading={processing} className="actions">
+          <Button
+            variant="cta"
+            className="confirm"
+            onClick={(event) => responseHandler(true, event)}
+          >
+            {confirmText || 'Yes'}
+          </Button>
+
+          <Button
+            variant="normal"
+            className="reject"
+            onClick={(event) => responseHandler(false, event)}
+          >
+            {rejectText || 'No'}
+          </Button>
+        </LoadingAwareContainer>
+      </StyledConfirmModal>
+    </ModalBase>
+  );
+}

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

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

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

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ModalBase } from './ModalBase';
+
+const meta = {
+  component: ModalBase,
+  title: '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} clickToDismiss={handleClose}>
+        <p>
+          There is nothing to this modal at all. It is completely up to you to style its contents.
+        </p>
+      </ModalBase>
+    </>
+  );
+}
+
+export const Base: Story = {
+  args: {
+    labelText: 'my modal',
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+import styled from 'styled-components';
+
+import { COLORS } from '@/tokens';
+import { colorUtils } from '@indico-data/utils';
+
+// 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')}
+    >
+      {props.children}
+    </ReactModal>
+  );
+}
+
+export const StyledModalBase = styled(ModalAdapter)`
+  .${(props) => props.className}__content {
+    position: absolute;
+    top: 70px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    overflow: visible;
+    padding: 0;
+
+    border-radius: 4px;
+    background-color: ${COLORS.clay};
+    border: solid 1px ${COLORS.oxfordBlue};
+    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%;
+
+    background-color: ${colorUtils.hexToRgb(COLORS.mirage, 0.95)};
+  }
+
+  .ReactModal__Overlay {
+    opacity: 0;
+
+    transition: opacity 120ms ease-in-out;
+  }
+
+  .ReactModal__Overlay--after-open {
+    opacity: 1;
+    position: fixed;
+  }
+
+  .ReactModal__Overlay--before-close {
+    opacity: 0;
+  }
+`;

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

@@ -0,0 +1,72 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { PermafrostComponent } from '@/types';
+
+import { StyledModalBase } from './ModalBase.styles';
+
+export type ModalBaseProps = PermafrostComponent & {
+  children: React.ReactNode | React.ReactNode[];
+  clickToDismiss?(): void;
+  describedBy?: string;
+  /** a selector representing the desired parent; defaults to `#root` */
+  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;
+  }
+
+  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}
+      shouldCloseOnEsc={!preventEscDismiss}
+      shouldReturnFocusAfterClose={!preventReturnFocus}
+      maxWidth={maxWidth}
+    >
+      {children}
+    </StyledModalBase>
+  );
+}

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

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

package/src/components/modals/index.ts

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

package/src/index.ts

@@ -22,11 +22,15 @@ export {
   Button,
   CirclePulse,
   CircleSpinner,
+  ConfirmModal,
+  Drawer,
   EditableInput,
   Icon,
   IconButton,
   ListTable,
+  LoadingAwareContainer,
   LoadingList,
+  ModalBase,
   MultiCombobox,
   NumberInput,
   Pagination,
@@ -42,4 +46,9 @@ export {
   Shrug,
   SingleCombobox,
   TextInput,
+  Wizard,
+  WizardCard,
+  WizardSection,
+  StyledWizard,
+  WizardWithSidebar,
 } from './components';

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+import { configure } from '@testing-library/react';
+
+configure({ testIdAttribute: 'data-testid' });

package/src/tokens/colors.ts

@@ -1,5 +1,6 @@
 export const allColors = {
   akaroa: '#cbc98f',
+  alizarin: '#E72326',
   amber: '#f4c401',
   amethyst: '#8e57b3',
   aqua: '#10e4fe',
@@ -33,17 +34,20 @@ export const allColors = {
   crimson: '#e53126',
   curiousBlue: '#178ee0',
   cyan: '#0cf',
+  daisyBush: '#431B92',
   darkFontColor: '#0d151d',
   darkGray: '#333',
   darkPurple: '#6f3eae',
   darkRed: '#b30000',
   defaultFontColor: '#bbbfc5',
   dodgerBlue: '#1774ff',
+  dusty: '#999999',
   eagleGreen: '#005557',
   ebony: '#101a26',
   eggplant: '#7a0074',
   electricGreen: '#00ff0a',
   emerald: '#09c199',
+  endeavor: '#0055B9',
   espresso: '#5a3627',
   fieldPromptError: '#fd9693',
   fieldPromptInfo: '#00bfff',
@@ -55,6 +59,7 @@ export const allColors = {
   green: '#4caf50',
   harlequin: '#20cb00',
   harvestGold: '#e6c079',
+  hawkes: '#DCEAFD',
   hemlock: '#626740',
   imperial: '#4b0134',
   iron: '#d9dee0',
@@ -100,12 +105,14 @@ export const allColors = {
   seaGreen: '#0b8a51',
   seance: '#7f1f82',
   shiraz: '#c61021',
+  silverChalice: '#aaaaaa',
   sinopia: '#D14200',
   slaaneshGrey: '#dbd5e6',
   tangerine: '#ff9900',
   teal: '#008285',
   toast: '#997862',
   trueBlue: '#066CC6',
+  tundora: '#444444',
   turquoise: '#00b5b6',
   vermilion: '#b95555',
   viking: '#59cfe0',

package/src/tokens/typography.ts

@@ -28,10 +28,16 @@ export const spacing = {
   third: `${lineHeight.base / 3}em`,
 };
 
+export const weight = {
+  light: 300,
+  regular: 400,
+  semibold: 500,
+  bold: 600,
+};
 export const ellipsis = css`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
 
-export const typography = { fontFamily, fontSize, lineHeight, spacing, ellipsis };
+export const typography = { fontFamily, fontSize, lineHeight, spacing, ellipsis, weight };

package/src/types.ts

@@ -14,3 +14,11 @@ export type PermafrostComponent = {
   'data-cy'?: string;
   'data-testid'?: string;
 };
+
+export type ButtonVariant = 'default' | 'primary' | 'destructive';
+export type ButtonSize = 'normal' | 'large';
+
+// Component types -- TODO -- move to their own files
+import { ListItem } from './components/Navigation/Drawer/types';
+
+export type { ListItem };

package/tsconfig.json

@@ -16,7 +16,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]