@onewelcome/react-lib-components 0.1.0-alpha

package/src/Button/IconButton.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { IconButton, Props } from './IconButton';
+import { render, getByRole } from '@testing-library/react';
+import { Icon, Icons } from '../Icon/Icon';
+
+const createButton = ({
+  title = 'Icon',
+  children = <Icon icon={Icons.Calendar} />,
+  ...rest
+}: Partial<Props> = {}) => {
+  const queries = render(
+    <IconButton {...rest} title={title}>
+      {children}
+    </IconButton>
+  );
+  const button = getByRole(queries.container, 'button');
+
+  return {
+    ...queries,
+    button,
+  };
+};
+
+describe('IconButton', () => {
+  it('renders without crashing', () => {
+    const { button } = createButton();
+
+    expect(button).toBeDefined();
+  });
+});
+
+describe('Different variants of the button', () => {
+  it('should have a class of "primary"', () => {
+    const { button } = createButton({ color: 'primary' });
+    expect(button.classList.contains('primary')).toBe(true);
+  });
+
+  it('should have a class of "secondary"', () => {
+    const { button } = createButton({ color: 'secondary' });
+    expect(button.classList.contains('secondary')).toBe(true);
+  });
+
+  it('should have a class of "tertiary"', () => {
+    const { button } = createButton({ color: 'tertiary' });
+    expect(button.classList.contains('tertiary')).toBe(true);
+  });
+});

package/src/Button/IconButton.tsx

@@ -0,0 +1,29 @@
+import React, { RefObject } from 'react';
+import { BaseButton, Props as BaseButtonProps } from './BaseButton';
+import classes from './IconButton.module.scss';
+import readyclasses from '../readyclasses.module.scss';
+
+export interface Props extends Omit<BaseButtonProps, 'ref'> {
+  children?: React.ReactNode;
+  iconSize?: 's' | 'm' | 'l';
+  className?: string;
+  title: string;
+  ref?: RefObject<HTMLButtonElement>;
+}
+
+export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ children, color = 'primary', iconSize = 'm', title, ...rest }, ref) => {
+    return (
+      <BaseButton
+        {...rest}
+        ref={ref}
+        className={`${classes['icon-button']} ${classes[color]} ${classes['button-' + iconSize]}`}
+      >
+        <>
+          {children}
+          <span className={readyclasses['sr-only']}>{title}</span>
+        </>
+      </BaseButton>
+    );
+  }
+);

package/src/ContextMenu/ContextMenu.module.scss

@@ -0,0 +1,20 @@
+.context-menu {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+
+  ul {
+    white-space: nowrap;
+    margin: 1rem 0;
+  }
+}
+
+.menu {
+  list-style: none;
+  padding: 0;
+  min-width: 200px;
+
+  button {
+    text-align: left;
+  }
+}

package/src/ContextMenu/ContextMenu.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { ContextMenu, Props } from './ContextMenu';
+import { render, getByRole } from '@testing-library/react';
+import { Button } from '../Button/Button';
+import { ContextMenuItem } from './ContextMenuItem';
+import userEvent from '@testing-library/user-event';
+
+const onShow = jest.fn();
+const onClick = jest.fn();
+
+const defaultParams: Props = {
+  id: 'example-contextmenu',
+  trigger: <Button data-testid="trigger">Click me for a context menu</Button>,
+  children: [
+    <ContextMenuItem onClick={onClick} data-testid="contextmenuitem" key="1">
+      Example item 1
+    </ContextMenuItem>,
+    <ContextMenuItem key="2">Example item 2</ContextMenuItem>,
+    <ContextMenuItem key="3">Example item 3</ContextMenuItem>,
+  ],
+  show: false,
+  onShow: onShow,
+};
+
+const createContextMenu = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+
+  const queries = render(<ContextMenu {...parameters} data-testid="contextmenu"></ContextMenu>);
+
+  const contextmenu = queries.getByTestId('contextmenu');
+  const trigger = queries.getByTestId('trigger');
+
+  return {
+    ...queries,
+    contextmenu,
+    trigger,
+  };
+};
+
+describe('ContextMenu should render', () => {
+  it('renders without crashing', () => {
+    const { contextmenu } = createContextMenu();
+
+    expect(contextmenu).toBeTruthy();
+  });
+
+  it('executed onShow function', () => {
+    const { trigger } = createContextMenu();
+
+    userEvent.click(trigger);
+
+    expect(onShow).toHaveBeenCalled();
+  });
+
+  it('executed onShow function', () => {
+    const { getByTestId } = createContextMenu((defaultParams) => ({
+      ...defaultParams,
+      show: true,
+    }));
+
+    const contextmenuitem = getByTestId('contextmenuitem');
+    const button = getByRole(contextmenuitem, 'button');
+
+    userEvent.click(button);
+
+    expect(contextmenuitem).toBeTruthy();
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should throw an error', () => {
+    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
+    const err = console.error;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      render(<ContextMenu />);
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected = 'You need to provide an ID to the context menu';
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+});

package/src/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,91 @@
+import React, { HTMLProps, ReactElement, useEffect, useRef, useState } from 'react';
+import { Props as ButtonProps } from '../Button/Button';
+import { Props as IconButtonProps } from '../Button/IconButton';
+import { Popover } from '../Popover/Popover';
+import { Placement, Offset } from '../hooks/usePosition';
+import { Props as ContextMenuItemProps } from './ContextMenuItem';
+import classes from './ContextMenu.module.scss';
+import { useBodyClick } from '../hooks/useBodyClick';
+import { createPortal } from 'react-dom';
+
+export interface Props extends HTMLProps<HTMLDivElement> {
+  trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
+  children: ReactElement<ContextMenuItemProps> | ReactElement<ContextMenuItemProps>[];
+  placement?: Placement;
+  transformOrigin?: Placement;
+  offset?: Offset;
+  id: string;
+  show?: boolean;
+  domRoot?: HTMLElement;
+  onShow?: () => void;
+  onClose?: () => void;
+}
+
+export const ContextMenu = ({
+  trigger,
+  children,
+  id,
+  show = false,
+  onShow,
+  onClose,
+  placement = { horizontal: 'right', vertical: 'top' },
+  offset = { top: 0, bottom: 0, left: 0, right: 0 },
+  transformOrigin = { horizontal: 'left', vertical: 'top' },
+  domRoot = document.body,
+  ...rest
+}: Props) => {
+  const anchorEl = useRef<HTMLButtonElement>(null);
+  const [showContextMenu, setShowContextMenu] = useState(show);
+
+  if (!id) {
+    throw new Error('You need to provide an ID to the context menu');
+  }
+
+  useBodyClick(
+    (event) => {
+      return showContextMenu && anchorEl.current !== event.target;
+    },
+    () => {
+      setShowContextMenu(false);
+    },
+    showContextMenu
+  );
+
+  useEffect(() => {
+    if (showContextMenu === true) {
+      onShow && onShow();
+    } else {
+      onClose && onClose();
+    }
+  }, [showContextMenu]);
+
+  const renderTrigger = () =>
+    React.cloneElement(trigger, {
+      id: id,
+      ['aria-haspopup']: 'true',
+      ['aria-controls']: `${id}-menu`,
+      ['aria-expanded']: show,
+      onClick: () => setShowContextMenu(!showContextMenu),
+      ref: anchorEl,
+    });
+
+  return (
+    <div {...rest} className={classes['context-menu']}>
+      {renderTrigger()}
+      {createPortal(
+        <Popover
+          placement={placement}
+          transformOrigin={transformOrigin}
+          offset={offset}
+          anchorEl={anchorEl}
+          show={showContextMenu}
+        >
+          <ul className={classes.menu} id={`${id}-menu`} aria-describedby={id} role="menu">
+            {children}
+          </ul>
+        </Popover>,
+        domRoot
+      )}
+    </div>
+  );
+};

package/src/ContextMenu/ContextMenuItem.module.scss

@@ -0,0 +1,31 @@
+.context-menu-item {
+  position: relative;
+
+  button {
+    background-color: transparent;
+    border: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    padding: 0.5rem 1.25rem;
+    box-sizing: border-box;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: transparent;
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+    pointer-events: none;
+  }
+
+  &:hover:after {
+    background-color: var(--color-primary);
+  }
+}

package/src/ContextMenu/ContextMenuItem.tsx

@@ -0,0 +1,15 @@
+import React, { HTMLProps } from 'react';
+import classes from './ContextMenuItem.module.scss';
+
+export interface Props extends Omit<HTMLProps<HTMLLIElement>, 'onClick'> {
+  children?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const ContextMenuItem = ({ children, onClick, ...rest }: Props) => {
+  return (
+    <li {...rest} role="menuitem" className={classes['context-menu-item']}>
+      <button onClick={(event) => onClick && onClick(event)}>{children}</button>
+    </li>
+  );
+};

package/src/Dialog/Dialog.module.scss

@@ -0,0 +1,16 @@
+.dialog {
+  align-items: center;
+}
+
+@media only screen and (min-width: 800px) {
+  .container {
+    width: auto;
+    max-width: 440px;
+    margin-top: 0;
+    max-height: 90%;
+  }
+}
+
+.content {
+  padding-top: 0;
+}

package/src/Dialog/Dialog.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Dialog, Props } from './Dialog';
+import { render, getAllByRole, getByRole, fireEvent, getByText } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const initParams: Props = {
+  id: 'modal',
+  open: true,
+  onClose: jest.fn(),
+  alignActions: 'left',
+  title: 'Example dialog',
+  primaryAction: {
+    label: 'Save',
+    onClick: jest.fn(),
+  },
+  secondaryAction: {
+    label: 'Cancel',
+    onClick: jest.fn(),
+  },
+  children: 'This is example dialog content.',
+};
+
+const getButtons = (container: HTMLElement) => getAllByRole(container, 'button');
+
+describe('Dialog', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Dialog {...initParams} />);
+    const [primaryButton, secondaryButton] = getButtons(container);
+
+    expect(getByText(container, initParams.title)).toBeDefined();
+    expect(getByText(container, initParams.children as string)).toBeDefined();
+    const actionsDiv = primaryButton.closest('footer');
+    expect(actionsDiv).toHaveClass('left');
+    expect(actionsDiv?.children[0]).toEqual(primaryButton);
+    expect(actionsDiv?.children[1]).toEqual(secondaryButton);
+    expect(primaryButton).toHaveClass('fill');
+    expect(secondaryButton).toHaveClass('text');
+  });
+
+  it('renders action aligned to right', () => {
+    const { container } = render(<Dialog {...initParams} alignActions="right" />);
+    const [secondaryButton, primaryButton] = getButtons(container);
+
+    const actionsDiv = primaryButton.closest('footer');
+    expect(actionsDiv).not.toHaveClass('left');
+    expect(actionsDiv?.children[0]).toEqual(secondaryButton);
+    expect(actionsDiv?.children[1]).toEqual(primaryButton);
+    expect(primaryButton).toHaveClass('fill');
+    expect(secondaryButton).toHaveClass('text');
+  });
+
+  it('renders only one button', () => {
+    const { container } = render(<Dialog {...initParams} secondaryAction={undefined} />);
+    const buttons = getButtons(container);
+
+    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);
+    expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(0);
+    expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(0);
+    expect(initParams.onClose).toHaveBeenCalledTimes(0);
+
+    const autoSummissionInput = container.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);
+  });
+});

package/src/Dialog/Dialog.tsx

@@ -0,0 +1,96 @@
+import React, { HTMLAttributes } 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';
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  id: string;
+  open: boolean;
+  children: React.ReactNode;
+  alignActions: 'left' | 'right';
+  onClose: () => void;
+  title: string;
+  primaryAction: Action;
+  secondaryAction?: Action;
+  zIndex?: number;
+}
+
+export interface Action extends Omit<ButtonProps, 'variant' | 'ref'> {
+  label: string;
+  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
+}
+
+export const Dialog = ({
+  id,
+  open,
+  children,
+  alignActions,
+  onClose,
+  title,
+  primaryAction,
+  secondaryAction,
+  zIndex,
+  ...restProps
+}: Props) => {
+  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
+      {...restProps}
+      id={id}
+      className={classes['dialog']}
+      containerClassName={classes['container']}
+      open={open}
+      disableBackdrop
+      onClose={onClose}
+      zIndex={zIndex}
+    >
+      <DialogTitle id={labelId(id)} title={title} />
+      <BaseModalContent id={descriptionId(id)} className={classes['content']} disableAutoFocus>
+        {children}
+      </BaseModalContent>
+      <DialogActions align={alignActions}>
+        {alignActions === 'left'
+          ? [PrimaryButton, TertiaryButton]
+          : [TertiaryButton, PrimaryButton]}
+      </DialogActions>
+      <input
+        autoFocus
+        style={{
+          position: 'absolute',
+          width: 0,
+          height: 0,
+          opacity: 0,
+        }}
+        tabIndex={-1}
+        onKeyPress={onHiddenInputKeyPress}
+      />
+    </BaseModal>
+  );
+};

package/src/Dialog/DialogActions/DialogActions.module.scss

@@ -0,0 +1,11 @@
+.actions {
+  margin: 1.5rem 1.25rem 1.25rem;
+
+  &.left {
+    justify-content: flex-start;
+  }
+
+  & * + * {
+    margin-left: 1.25rem;
+  }
+}

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

@@ -0,0 +1,25 @@
+import React 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');
+  });
+});

package/src/Dialog/DialogActions/DialogActions.tsx

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

package/src/Dialog/DialogTitle/DialogTitle.module.scss

@@ -0,0 +1,7 @@
+.header {
+  margin: 1.5rem 1.25rem 1.25rem;
+}
+
+.title {
+  margin: 0;
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DialogTitle, Props } from './DialogTitle';
+import { render, getByText } from '@testing-library/react';
+
+const initParams: Props = {
+  id: 'dialog-label',
+  title: 'Example title',
+};
+
+describe('DialogActions', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<DialogTitle {...initParams} />);
+
+    const dialogTitleContainer = container.children[0];
+    expect(dialogTitleContainer).toHaveClass('header');
+    expect(getByText(container, initParams.title));
+  });
+});

package/src/Dialog/DialogTitle/DialogTitle.tsx

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