@onewelcome/react-lib-components 0.1.0-alpha → 0.1.3-alpha

package/src/Notifications/BaseModal/BaseModalContent/BaseModalContent.tsx

@@ -0,0 +1,36 @@
+import React, { ComponentPropsWithRef, createRef, useEffect } from 'react';
+import classes from './BaseModalContent.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  id?: string;
+  children: React.ReactNode;
+  className?: string;
+  disableAutoFocus?: boolean;
+}
+
+export const BaseModalContent = React.forwardRef<HTMLDivElement, Props>(
+  ({ id, children, className = '', disableAutoFocus = false, ...rest }: Props, ref) => {
+    const contentRef = createRef<HTMLDivElement>();
+
+    useEffect(() => {
+      if (!disableAutoFocus && ref) {
+        (ref as React.RefObject<HTMLDivElement>).current?.focus();
+      } else if (!disableAutoFocus) {
+        contentRef.current?.focus();
+      }
+    }, []);
+
+    /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
+    return (
+      <div
+        {...rest}
+        ref={ref || contentRef}
+        id={id}
+        className={`${classes['content']} ${className}`}
+        tabIndex={-1}
+      >
+        {children}
+      </div>
+    );
+  }
+);

package/src/{BaseModal → Notifications/BaseModal}/BaseModalHeader/BaseModalHeader.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { BaseModalHeader, Props } from './BaseModalHeader';
 import { render, getByRole, getByTestId, getByText } from '@testing-library/react';
 import { labelId } from '../BaseModalContext';
@@ -28,3 +28,31 @@ describe('BaseModalHeader', () => {
     expect(initParams.onClose).toBeCalledTimes(1);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return (
+        <BaseModalHeader id="test" title="test" onClose={jest.fn()} data-ref="testing" ref={ref} />
+      );
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentPropsWithRef } from 'react';
+import classes from './BaseModalHeader.module.scss';
+import { IconButton } from '../../../Button/IconButton';
+import { Icon, Icons } from '../../../Icon/Icon';
+import { Typography } from '../../../Typography/Typography';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  id: string;
+  title: string;
+  children?: React.ReactNode;
+  onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const BaseModalHeader = React.forwardRef<HTMLDivElement, Props>(
+  ({ id, title, children, onClose, ...rest }: Props, ref) => {
+    return (
+      <div {...rest} ref={ref} className={classes['header']}>
+        <div className={classes['headline']}>
+          <Typography id={id} className={classes['title']} tag="h1" variant="h4">
+            {title}
+          </Typography>
+          <IconButton onClick={onClose} className={classes['closeBtn']} title="close modal">
+            <Icon icon={Icons.Times} />
+          </IconButton>
+        </div>
+        {children}
+      </div>
+    );
+  }
+);

package/src/{Dialog → Notifications/Dialog}/Dialog.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Dialog, Props } from './Dialog';
-import { render, getAllByRole, getByRole, fireEvent, getByText } from '@testing-library/react';
+import { render, getAllByRole } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 const initParams: Props = {
@@ -24,11 +24,11 @@ const getButtons = (container: HTMLElement) => getAllByRole(container, 'button')
 
 describe('Dialog', () => {
   it('renders without crashing', () => {
-    const { container } = render(<Dialog {...initParams} />);
-    const [primaryButton, secondaryButton] = getButtons(container);
+    const { getByText } = render(<Dialog {...initParams} />);
+    const [primaryButton, secondaryButton] = getButtons(document.body);
 
-    expect(getByText(container, initParams.title)).toBeDefined();
-    expect(getByText(container, initParams.children as string)).toBeDefined();
+    expect(getByText(initParams.title)).toBeDefined();
+    expect(getByText(initParams.children as string)).toBeDefined();
     const actionsDiv = primaryButton.closest('footer');
     expect(actionsDiv).toHaveClass('left');
     expect(actionsDiv?.children[0]).toEqual(primaryButton);
@@ -38,8 +38,8 @@ describe('Dialog', () => {
   });
 
   it('renders action aligned to right', () => {
-    const { container } = render(<Dialog {...initParams} alignActions="right" />);
-    const [secondaryButton, primaryButton] = getButtons(container);
+    render(<Dialog {...initParams} alignActions="right" />);
+    const [secondaryButton, primaryButton] = getButtons(document.body);
 
     const actionsDiv = primaryButton.closest('footer');
     expect(actionsDiv).not.toHaveClass('left');
@@ -50,30 +50,65 @@ describe('Dialog', () => {
   });
 
   it('renders only one button', () => {
-    const { container } = render(<Dialog {...initParams} secondaryAction={undefined} />);
-    const buttons = getButtons(container);
+    render(<Dialog {...initParams} secondaryAction={undefined} />);
+    const buttons = getButtons(document.body);
 
     expect(buttons).toHaveLength(1);
     expect(buttons[0]).toHaveClass('fill');
   });
 
-  it('should handle clicking on buttons, ESC and ENTER keys', () => {
-    const { container } = render(<Dialog {...initParams} />);
-    const [primaryButton, secondaryButton] = getButtons(container);
+  it('should handle clicking on buttons and ENTER press', () => {
+    render(<Dialog {...initParams} />);
+    const [primaryButton, secondaryButton] = getButtons(document.body);
     expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(0);
     expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(0);
     expect(initParams.onClose).toHaveBeenCalledTimes(0);
 
-    const autoSummissionInput = container.querySelector('input') as HTMLElement;
+    const autoSummissionInput = document.body.querySelector('input') as HTMLElement;
     userEvent.type(autoSummissionInput, '{enter}');
     expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(1);
 
-    fireEvent.keyDown(getByRole(container, 'dialog'), { key: 'Escape' });
-    expect(initParams.onClose).toHaveBeenCalledTimes(1);
-
     userEvent.click(primaryButton);
     expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(2);
     userEvent.click(secondaryButton);
     expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return (
+        <Dialog
+          children="test"
+          open={false}
+          alignActions={'left'}
+          onClose={jest.fn()}
+          primaryAction={{ label: 'test', onClick: jest.fn() }}
+          title="test"
+          id="test"
+          data-ref="testing"
+          ref={ref}
+        />
+      );
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/Dialog/Dialog.tsx

@@ -0,0 +1,113 @@
+import React, { ComponentPropsWithRef, useState } from 'react';
+import { BaseModal } from '../BaseModal/BaseModal';
+import { BaseModalContent } from '../BaseModal/BaseModalContent/BaseModalContent';
+import { DialogActions } from './DialogActions/DialogActions';
+import classes from './Dialog.module.scss';
+import { DialogTitle } from './DialogTitle/DialogTitle';
+import { Button, Props as ButtonProps } from '../../Button/Button';
+import { labelId, descriptionId } from '../BaseModal/BaseModalContext';
+import { generateID } from '../../util/helper';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  id?: string;
+  open: boolean;
+  children: React.ReactNode;
+  alignActions: 'left' | 'right';
+  onClose: () => void;
+  title: string;
+  primaryAction: Action;
+  secondaryAction?: Action;
+  zIndex?: number;
+  disableEscapeKeyDown?: boolean;
+}
+
+export interface Action extends Omit<ButtonProps, 'variant' | 'ref'> {
+  label: string;
+  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
+}
+
+export const Dialog = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      id,
+      open,
+      children,
+      alignActions,
+      onClose,
+      title,
+      primaryAction,
+      secondaryAction,
+      zIndex,
+      disableEscapeKeyDown = true,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const [dialogId] = useState(id ?? generateID(20));
+    const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
+    const PrimaryButton = (
+      <Button key="primary" {...restOfPrimaryAction}>
+        {primaryLabel}
+      </Button>
+    );
+    const TertiaryButton =
+      secondaryAction &&
+      (function () {
+        const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
+        return (
+          <Button key="tertiary" variant="text" {...restOfSecondaryAction}>
+            {secondaryLabel}
+          </Button>
+        );
+      })();
+
+    const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
+      if (event.key === 'Enter') {
+        primaryAction.onClick();
+      }
+    };
+
+    return (
+      <BaseModal
+        {...rest}
+        ref={ref}
+        id={dialogId}
+        className={classes['dialog']}
+        containerClassName={classes['container']}
+        open={open}
+        disableBackdrop
+        onClose={onClose}
+        zIndex={zIndex}
+        disableEscapeKeyDown={disableEscapeKeyDown}
+      >
+        <DialogTitle id={labelId(dialogId)} title={title} />
+        <BaseModalContent
+          id={descriptionId(dialogId)}
+          className={classes['content']}
+          disableAutoFocus
+        >
+          {children}
+        </BaseModalContent>
+        <DialogActions align={alignActions}>
+          {alignActions === 'left'
+            ? [PrimaryButton, TertiaryButton]
+            : [TertiaryButton, PrimaryButton]}
+        </DialogActions>
+        <input
+          autoFocus
+          aria-hidden={true}
+          style={{
+            position: 'absolute',
+            width: 0,
+            height: 0,
+            opacity: 0,
+          }}
+          maxLength={0}
+          tabIndex={-1}
+          onKeyPress={onHiddenInputKeyPress}
+        />
+      </BaseModal>
+    );
+  }
+);

package/src/Notifications/Dialog/DialogActions/DialogActions.test.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef } from 'react';
+import { DialogActions, Props } from './DialogActions';
+import { render } from '@testing-library/react';
+
+const initParams: Props = {
+  align: 'right',
+  children: 'Content',
+};
+
+describe('DialogActions', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<DialogActions {...initParams} />);
+
+    const dialogActionsContainer = container.children[0];
+    expect(dialogActionsContainer).toHaveClass('actions');
+    expect(dialogActionsContainer).toHaveTextContent(initParams.children as string);
+  });
+
+  it('should align items to left', () => {
+    const { container } = render(<DialogActions {...initParams} align="left" />);
+
+    const dialogActionsContainer = container.children[0];
+    expect(dialogActionsContainer).toHaveClass('actions', 'left');
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <DialogActions id="test" children="test" open={true} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -0,0 +1,24 @@
+import React, { ComponentPropsWithRef } from 'react';
+import {
+  BaseModalActions,
+  Props as BaseModalActionsProps,
+} from '../../BaseModal/BaseModalActions/BaseModalActions';
+import classes from './DialogActions.module.scss';
+
+export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps {
+  align: 'left' | 'right';
+}
+
+export const DialogActions = React.forwardRef<HTMLElement, Props>(
+  ({ children, align, ...rest }: Props, ref) => {
+    return (
+      <BaseModalActions
+        {...rest}
+        ref={ref}
+        className={`${classes['actions']}${align === 'left' ? ' ' + classes['left'] : ''}`}
+      >
+        {children}
+      </BaseModalActions>
+    );
+  }
+);

package/src/Notifications/Dialog/DialogTitle/DialogTitle.test.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react';
+import { DialogTitle, Props } from './DialogTitle';
+import { render, getByText } from '@testing-library/react';
+
+const initParams: Props = {
+  id: 'dialog-label',
+  title: 'Example title',
+};
+
+describe('DialogTitle', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<DialogTitle {...initParams} />);
+
+    const dialogTitleContainer = container.children[0];
+    expect(dialogTitleContainer).toHaveClass('header');
+    expect(getByText(container, initParams.title));
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <DialogTitle title="test" id="test" data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -0,0 +1,20 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { Typography } from '../../../Typography/Typography';
+import classes from './DialogTitle.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  id: string;
+  title: string;
+}
+
+export const DialogTitle = React.forwardRef<HTMLDivElement, Props>(
+  ({ id, title, ...rest }: Props, ref) => {
+    return (
+      <div {...rest} ref={ref} className={classes['header']}>
+        <Typography id={id} className={classes['title']} tag="h1" variant="h4">
+          {title}
+        </Typography>
+      </div>
+    );
+  }
+);

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.test.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useRef } from 'react';
+import { DiscardChangesDialog, Props } from './DiscardChangesDialog';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  open: true,
+  onKeepEditing: jest.fn(),
+  onDiscardChanges: jest.fn(),
+  discardChangesButtonLabel: 'Discard Changes',
+  keepEditingButtonLabel: 'Keep Editing',
+  contentLabel: 'Content',
+  titleLabel: 'Unsaved changes',
+};
+
+const createDiscardChangesDialog = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <DiscardChangesDialog {...parameters} data-testid="DiscardChangesDialog"></DiscardChangesDialog>
+  );
+  const discardChangesDialog = queries.getByTestId('DiscardChangesDialog');
+  const discardChangesBtn = queries.getByRole('button', {
+    name: defaultParams.discardChangesButtonLabel,
+  });
+  const keepEditingBtn = queries.getByRole('button', {
+    name: defaultParams.keepEditingButtonLabel,
+  });
+
+  return {
+    ...queries,
+    discardChangesDialog,
+    discardChangesBtn,
+    keepEditingBtn,
+  };
+};
+
+describe('DiscardChangesDialog should render', () => {
+  it('renders without crashing', () => {
+    const { discardChangesDialog, discardChangesBtn, keepEditingBtn } =
+      createDiscardChangesDialog();
+
+    expect(discardChangesDialog).toBeDefined();
+    expect(discardChangesDialog).toHaveTextContent(defaultParams.contentLabel);
+    expect(discardChangesDialog).toHaveTextContent(defaultParams.titleLabel);
+
+    userEvent.click(discardChangesBtn);
+    expect(defaultParams.onDiscardChanges).toBeCalledTimes(1);
+
+    userEvent.click(keepEditingBtn);
+    expect(defaultParams.onKeepEditing).toBeCalledTimes(1);
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return (
+        <DiscardChangesDialog
+          open={false}
+          onKeepEditing={jest.fn()}
+          onDiscardChanges={jest.fn()}
+          discardChangesButtonLabel="test"
+          keepEditingButtonLabel="test"
+          contentLabel="test"
+          titleLabel="test"
+          title="test"
+          id="test"
+          data-ref="testing"
+          ref={ref}
+        />
+      );
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -0,0 +1,55 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { Dialog } from '../../Dialog/Dialog';
+import { Typography } from '../../../Typography/Typography';
+import { DataAttributeKey } from '../../../interfaces';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  open: boolean;
+  discardChangesButtonLabel: string;
+  keepEditingButtonLabel: string;
+  contentLabel: string;
+  titleLabel: string;
+  [dataAttribute: DataAttributeKey]: any;
+  onKeepEditing: () => void;
+  onDiscardChanges: () => void;
+}
+
+export const DiscardChangesDialog = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      open,
+      onKeepEditing,
+      onDiscardChanges,
+      discardChangesButtonLabel,
+      keepEditingButtonLabel,
+      contentLabel,
+      titleLabel,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    return (
+      <Dialog
+        {...rest}
+        ref={ref}
+        open={open}
+        alignActions="left"
+        title={titleLabel}
+        onClose={onKeepEditing}
+        primaryAction={{
+          label: discardChangesButtonLabel,
+          onClick: onDiscardChanges,
+        }}
+        secondaryAction={{
+          label: keepEditingButtonLabel,
+          onClick: onKeepEditing,
+        }}
+        disableEscapeKeyDown={false}
+      >
+        <Typography variant="body" spacing={{ margin: 0 }}>
+          {contentLabel}
+        </Typography>
+      </Dialog>
+    );
+  }
+);