@indico-data/design-system 1.0.47 → 1.0.49

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

@@ -16,21 +16,29 @@ export {
 } from './tokens';
 
 export {
+  AbstractRadio,
+  AbstractRadioGroup,
   Accordion,
   BarSpinner,
   BorderSelect,
   Button,
   CirclePulse,
   CircleSpinner,
+  ConfirmModal,
+  Drawer,
   EditableInput,
   Icon,
   IconButton,
   ListTable,
+  LoadingAwareContainer,
   LoadingList,
+  ModalBase,
   MultiCombobox,
   NumberInput,
   Pagination,
   PercentageRing,
+  Radio,
+  RadioGroup,
   RandomLoadingMessage,
   SearchInput,
   Section,
@@ -42,4 +50,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',
@@ -17,6 +18,7 @@ export const allColors = {
   bouqet: '#a35c9a',
   brick: '#c62828',
   brightDusk: '#efebf7',
+  britishShorthair: '#4b94eb',
   brown: '#785349',
   candyCorn: '#fcef4d',
   carnation: '#ff8adf',
@@ -27,23 +29,27 @@ export const allColors = {
   charcoal: '#474b4b',
   chartreuse: '#34ff01',
   clay: '#283243',
+  clementine: '#F16E00',
   cocoaBean: '#5c1200',
   comet: '#5a6982',
   cornflower: '#2060ff',
   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 +61,7 @@ export const allColors = {
   green: '#4caf50',
   harlequin: '#20cb00',
   harvestGold: '#e6c079',
+  hawkes: '#DCEAFD',
   hemlock: '#626740',
   imperial: '#4b0134',
   iron: '#d9dee0',
@@ -100,12 +107,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/*"]