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

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

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

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

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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Dialog } from '../../Dialog/Dialog';
+import { HTMLProps } from '../../../interfaces';
+import { Typography } from '../../../Typography/Typography';
+
+export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'children'> {
+  open: boolean;
+  discardChangesButtonLabel: string;
+  keepEditingButtonLabel: string;
+  contentLabel: string;
+  titleLabel: string;
+  onKeepEditing: () => void;
+  onDiscardChanges: () => void;
+}
+
+export const DiscardChangesDialog = ({
+  open,
+  onKeepEditing,
+  onDiscardChanges,
+  discardChangesButtonLabel,
+  keepEditingButtonLabel,
+  contentLabel,
+  titleLabel,
+  ...rest
+}: Props) => {
+  return (
+    <Dialog
+      {...rest}
+      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>
+  );
+};

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import { DiscardChangesModal, Props } from './DiscardChangesModal';
+import { findByTestId, getAllByRole, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  id: 'modal',
+  open: true,
+  hasUnsavedChanges: jest.fn(),
+  onClose: jest.fn(),
+  headerProps: {
+    title: 'Header',
+  },
+  discardChangedDialogProps: {
+    'data-testid': 'discardChangesDialog',
+    discardChangesButtonLabel: 'Discard',
+    keepEditingButtonLabel: 'Keep editing',
+    contentLabel: 'Unsaved changes',
+    titleLabel: 'Dialog',
+  },
+  children: <span>children</span>,
+};
+
+const createDiscardChangesModal = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<DiscardChangesModal {...parameters} data-testid="discardChangesModal" />);
+  const discardChangesModal = queries.getByTestId('discardChangesModal');
+  const closeBtn = queries.getByRole('button', { name: 'close modal' });
+
+  return {
+    ...queries,
+    discardChangesModal,
+    closeBtn,
+  };
+};
+
+const getDiscardChangesButtons = (container: HTMLElement) =>
+  getAllByRole(container, 'button', {
+    name: new RegExp(
+      `(${defaultParams.discardChangedDialogProps.discardChangesButtonLabel}|${defaultParams.discardChangedDialogProps.keepEditingButtonLabel})`
+    ),
+  });
+
+const findDiscardChangesDialog = (container: HTMLElement) =>
+  findByTestId(container, 'discardChangesDialog');
+
+describe('DiscardChangesModal should render', () => {
+  it('renders without crashing', () => {
+    const { discardChangesModal, container } = createDiscardChangesModal();
+
+    expect(discardChangesModal).toBeDefined();
+    expect(discardChangesModal).toHaveTextContent('children');
+    expect(discardChangesModal).toHaveTextContent(defaultParams.headerProps.title);
+    expect(container).not.toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
+  });
+
+  it('clicking on close button without making any changes close the modal', () => {
+    (
+      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
+    ).mockReturnValue(false);
+    const { closeBtn } = createDiscardChangesModal();
+
+    userEvent.click(closeBtn);
+    expect(defaultParams.onClose).toBeCalledTimes(1);
+  });
+});
+
+describe('DiscardChangesModal should show DiscardChangesDialog', () => {
+  it('showing DiscardChangesDialog and clicking on `keep editing` button', async () => {
+    (
+      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
+    ).mockReturnValue(true);
+    const { closeBtn } = createDiscardChangesModal();
+    const container = document.body;
+    expect(defaultParams.onClose).not.toBeCalled();
+
+    userEvent.click(closeBtn);
+
+    expect(defaultParams.onClose).not.toBeCalled();
+    await findDiscardChangesDialog(container);
+    const [_, keepEditingBtn] = getDiscardChangesButtons(container);
+    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
+    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.contentLabel);
+
+    userEvent.click(keepEditingBtn);
+    expect(defaultParams.onClose).not.toBeCalled();
+    await waitFor(() =>
+      expect(container).not.toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel)
+    );
+  });
+
+  it('showing DiscardChangesDialog and clicking on `discard` button', async () => {
+    (
+      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
+    ).mockReturnValue(true);
+    const { closeBtn } = createDiscardChangesModal();
+    const container = document.body;
+
+    userEvent.click(closeBtn);
+
+    await findDiscardChangesDialog(container);
+    const [discardBtn] = getDiscardChangesButtons(container);
+    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
+
+    userEvent.click(discardBtn);
+    expect(defaultParams.onClose).toBeCalled();
+  });
+});

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.tsx

@@ -0,0 +1,56 @@
+import React, { Fragment, useState } from 'react';
+import { Modal, Props as ModalProps } from '../Modal/Modal';
+import { ModalHeader, Props as ModalHeaderProps } from '../Modal/ModalHeader/ModalHeader';
+import {
+  DiscardChangesDialog,
+  Props as DiscardChangesDialogProps,
+} from './DiscardChangesDialog/DiscardChangesDialog';
+
+export interface Props extends Omit<ModalProps, 'onClose'> {
+  hasUnsavedChanges: () => boolean;
+  onClose: (event?: React.MouseEvent<HTMLElement>) => unknown;
+  headerProps: Omit<ModalHeaderProps, 'onClose' | 'id'>;
+  discardChangedDialogProps: Omit<
+    DiscardChangesDialogProps,
+    'open' | 'onKeepEditing' | 'onDiscardChanges'
+  >;
+}
+
+export const DiscardChangesModal = ({
+  id,
+  onClose,
+  children,
+  hasUnsavedChanges,
+  headerProps,
+  discardChangedDialogProps,
+  ...rest
+}: Props) => {
+  const [openDiscardChangesDialog, setOpenDiscardChangesDialog] = useState(false);
+
+  const onCloseWrapper = () =>
+    hasUnsavedChanges() ? setOpenDiscardChangesDialog(true) : onClose();
+
+  const onDialogKeepEditing = () => {
+    setOpenDiscardChangesDialog(false);
+  };
+
+  const onDialogDiscardChanges = () => {
+    setOpenDiscardChangesDialog(false);
+    onClose();
+  };
+
+  return (
+    <Fragment>
+      <Modal id={id} onClose={onCloseWrapper} {...rest}>
+        <ModalHeader {...headerProps} id={`${id}-label`} onClose={onCloseWrapper} />
+        {children}
+      </Modal>
+      <DiscardChangesDialog
+        {...discardChangedDialogProps}
+        open={openDiscardChangesDialog}
+        onKeepEditing={onDialogKeepEditing}
+        onDiscardChanges={onDialogDiscardChanges}
+      />
+    </Fragment>
+  );
+};

package/src/{Snackbar → Notifications/Snackbar}/SnackbarItem/SnackbarItem.module.scss

@@ -1,4 +1,4 @@
-@import '../../readyclasses.module.scss';
+@import '../../../readyclasses.module.scss';
 
 .snackbar {
   padding: 1rem 1.25rem;

package/src/{Snackbar → Notifications/Snackbar}/SnackbarItem/SnackbarItem.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef } from 'react';
-import { IconButton } from '../../Button/IconButton';
-import { Icon, Icons } from '../../Icon/Icon';
+import { IconButton } from '../../../Button/IconButton';
+import { Icon, Icons } from '../../../Icon/Icon';
 import { Variant, Actions } from '../interfaces';
 import classes from './SnackbarItem.module.scss';
-import readyclasses from '../../readyclasses.module.scss';
-import { useAnimation } from '../../hooks/useAnimation';
-import { Typography } from '../../Typography/Typography';
+import readyclasses from '../../../readyclasses.module.scss';
+import { useAnimation } from '../../../hooks/useAnimation';
+import { Typography } from '../../../Typography/Typography';
 
 const textColor = 'var(--snackbar-text-color)';
 
@@ -92,7 +92,6 @@ export const SnackbarItem = ({
             <Icon icon={Icons.Times} color={textColor} />
           </IconButton>
         </div>
-        {/* @TODO: change it to Typography*/}
         {!!content && (
           <Typography className={classes['content']} variant="body">
             {content}

package/src/{Snackbar → Notifications/Snackbar}/SnackbarProvider/SnackbarProvider.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { SnackbarContextProvider } from './SnackbarStateProvider';
 import { Actions, SnackbarOptionsProps, Variant } from '../interfaces';
 import { Placement, SnackbarContainer } from '../SnackbarContainer/SnackbarContainer';
-import { generateID } from '../../util/helper';
+import { generateID } from '../../../util/helper';
 import { SnackbarItem } from '../SnackbarItem/SnackbarItem';
 
 /** Short msg is when only title is provided. Long one when content or/and actions are provided (or type is error). */
@@ -14,7 +14,7 @@ interface Duration {
 
 export interface Props {
   closeButtonTitle: string;
-  children?: ReactNode | ReactNode[];
+  children?: ReactNode;
   placement?: Placement;
   stackSize?: number;
   domRoot?: HTMLElement;

package/src/Popover/Popover.test.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { Popover, Props } from './Popover';
 import { render } from '@testing-library/react';
 import { usePosition } from '../hooks/usePosition';
@@ -32,7 +32,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
     });
 
     return (
-      <>
+      <Fragment>
         <button data-testid="button" onClick={calculatePosition} ref={relativeElement}>
           Test
         </button>
@@ -44,7 +44,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
         >
           Test
         </Popover>
-      </>
+      </Fragment>
     );
   };
 

package/src/Tiles/Tile.module.scss

@@ -7,6 +7,7 @@
   padding: 0 0 2rem;
   background-color: #fff;
   transition: box-shadow 0.2s ease-in-out;
+  font-family: var(--font-family);
 
   &:hover {
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
@@ -14,7 +15,6 @@
 
   header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
 
     .icon {

package/src/Tiles/Tile.test.tsx

@@ -10,7 +10,6 @@ import userEvent from '@testing-library/user-event';
 const onShow = jest.fn();
 const onClose = jest.fn();
 const contextMenuItemOnClick = jest.fn();
-const iconClick = jest.fn();
 
 const contextMenu = (
   <ContextMenu
@@ -38,8 +37,8 @@ const contextMenu = (
 
 const defaultParams: Props = {
   title: 'tile',
-  iconProps: { icon: Icons.Bell, onClick: iconClick, 'data-testid': 'icon' },
-  menu: contextMenu,
+  enabled: true,
+  tileAction: contextMenu,
 };
 
 const createTile = (params?: (defaultParams: Props) => Props) => {
@@ -54,25 +53,36 @@ const createTile = (params?: (defaultParams: Props) => Props) => {
   );
   const tile = queries.getByTestId('tile');
   const menutrigger = queries.getByTestId('contextmenu-trigger');
-  const icon = queries.getByTestId('icon');
 
   return {
     ...queries,
     tile,
     menutrigger,
-    icon,
   };
 };
 
 describe('Tile should render', () => {
-  it('renders without crashing', () => {
-    const { tile, icon } = createTile();
+  it('renders without crashing and enabled', () => {
+    const { tile } = createTile();
 
-    userEvent.click(icon);
-
-    expect(iconClick).toHaveBeenCalled();
+    expect(tile.querySelector('.icon-checkmark')).toBeTruthy();
+    expect(tile.querySelector('.icon-forbidden')).toBeFalsy();
     expect(tile).toBeDefined();
   });
+
+  it('renders disabled', () => {
+    const { tile } = createTile((defaultParams) => ({ ...defaultParams, enabled: false }));
+
+    expect(tile.querySelector('.icon-checkmark')).toBeFalsy();
+    expect(tile.querySelector('.icon-forbidden')).toBeTruthy();
+  });
+
+  it('renders no status', () => {
+    const { tile } = createTile((defaultParams) => ({ ...defaultParams, enabled: undefined }));
+
+    expect(tile.querySelector('.icon-checkmark')).toBeFalsy();
+    expect(tile.querySelector('.icon-forbidden')).toBeFalsy();
+  });
 });
 
 describe("should throw errors since we don't pass props", () => {
@@ -85,7 +95,7 @@ describe("should throw errors since we don't pass props", () => {
 
     try {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
-      render(<Tile imageProps={{ src: 'test', alt: 'test' }} />);
+      render(<Tile imageProps={{ src: 'test' }} />);
     } catch (e: any) {
       actual = e.message;
     }

package/src/Tiles/Tile.tsx

@@ -1,48 +1,85 @@
-import React, { HTMLProps, ReactElement } from 'react';
-import { Icon, Icons, Props as IconProps } from '../Icon/Icon';
+import React, { HTMLProps, ReactElement, useState } from 'react';
+import { Icon, Icons } from '../Icon/Icon';
 import classes from './Tile.module.scss';
+import readyClasses from '../readyclasses.module.scss';
 
 import { Props as ContextMenuProps } from '../ContextMenu/ContextMenu';
+import { generateID } from '../util/helper';
+import { Props as IconButtonProps } from '../Button/IconButton';
 
 interface ImageProps {
   src: string;
-  alt: string;
 }
 
 export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'contextMenu'> {
   title: string;
   imageProps?: ImageProps;
-  iconProps?: IconProps;
+  enabled?: boolean;
   loading?: boolean;
-  menu?: ReactElement<ContextMenuProps>;
+  tileAction?: ReactElement<ContextMenuProps> | ReactElement<IconButtonProps>;
 }
 
 export const Tile = ({
   title,
   imageProps,
-  iconProps,
+  enabled,
   className,
   loading,
-  menu,
+  tileAction,
   ...rest
 }: Props) => {
+  const [tileDescriptionID] = useState(generateID(20));
+
   if (!title) {
     throw new Error('Please make sure to pass a title prop to your Tile component.');
   }
 
+  const statusMessage = () => {
+    if (enabled) {
+      return 'Status: enabled';
+    }
+
+    return 'Status: disabled';
+  };
+
   return (
-    <div {...rest} className={`${classes['tile']} ${loading ? classes['loading'] : ''}`}>
-      <header>
-        {iconProps && <Icon {...iconProps} className={`${classes['icon']} ${className ?? ''}`} />}
-        {menu ?? null}
+    <article
+      tabIndex={0}
+      aria-labelledby={tileDescriptionID}
+      {...rest}
+      className={`${classes['tile']} ${loading ? classes['loading'] : ''}`}
+    >
+      <header style={{ justifyContent: enabled === undefined ? 'flex-end' : 'space-between' }}>
+        {enabled === true && (
+          <Icon
+            color="var(--success)"
+            icon={Icons.Checkmark}
+            className={`${classes['icon']} ${className ?? ''}`}
+          />
+        )}
+        {enabled === false && (
+          <Icon
+            color="var(--greyed-out)"
+            icon={Icons.Forbidden}
+            className={`${classes['icon']} ${className ?? ''}`}
+          />
+        )}
+        {enabled !== undefined && (
+          <span id={tileDescriptionID} className={readyClasses['sr-only']}>
+            {`${title}. ${statusMessage()}`}
+          </span>
+        )}
+        {tileAction ?? null}
       </header>
       <div className={classes['content']}>
-        {imageProps && imageProps.src && imageProps.alt && (
-          <figure className={classes['image']}>{!loading && <img {...imageProps} />}</figure>
+        {imageProps && imageProps.src.length > 0 && (
+          <figure className={classes['image']}>{!loading && <img {...imageProps} alt="" />}</figure>
+        )}
+        {(!imageProps || imageProps.src.length === 0) && (
+          <Icon className={classes['placeholder']} icon={Icons.Image} />
         )}
-        {!imageProps && <Icon className={classes['placeholder']} icon={Icons.Image} />}
         <span className={classes['title']}>{title}</span>
       </div>
-    </div>
+    </article>
   );
 };

package/src/Tiles/Tiles.test.tsx

@@ -34,6 +34,12 @@ const contextMenu = (
   </ContextMenu>
 );
 
+const addToFavoriteButton = (
+  <IconButton title="Add to favorite">
+    <Icon icon={Icons.Star} />
+  </IconButton>
+);
+
 const defaultParams: Props = {
   children: [
     <Tile
@@ -42,10 +48,9 @@ const defaultParams: Props = {
       title="Tile1"
       imageProps={{
         src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
-        alt: 'OneWelcome logo',
       }}
-      iconProps={{ icon: Icons.Checkmark }}
-      menu={contextMenu}
+      enabled={true}
+      tileAction={contextMenu}
     />,
     <Tile
       data-testid="tile"
@@ -53,10 +58,9 @@ const defaultParams: Props = {
       title="Tile2"
       imageProps={{
         src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
-        alt: 'OneWelcome logo',
       }}
-      iconProps={{ icon: Icons.Forbidden }}
-      menu={contextMenu}
+      enabled={false}
+      tileAction={addToFavoriteButton}
     />,
     <Tile
       data-testid="tile"
@@ -64,10 +68,8 @@ const defaultParams: Props = {
       title="Tile3"
       imageProps={{
         src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
-        alt: 'OneWelcome logo',
       }}
-      iconProps={{ icon: Icons.Checkmark }}
-      menu={contextMenu}
+      tileAction={contextMenu}
     />,
   ],
   className: 'example-classname',

package/src/Tiles/Tiles.tsx

@@ -14,19 +14,19 @@ export const Tiles = ({ children, className, loading = false, ...rest }: Props)
         <Tile
           key="placeholder1"
           title="placeholder"
-          imageProps={{ src: 'placeholder', alt: 'placeholder' }}
+          imageProps={{ src: 'placeholder' }}
           loading={true}
         />,
         <Tile
           key="placeholder2"
           title="placeholder"
-          imageProps={{ src: 'placeholder', alt: 'placeholder' }}
+          imageProps={{ src: 'placeholder' }}
           loading={true}
         />,
         <Tile
           key="placeholder3"
           title="placeholder"
-          imageProps={{ src: 'placeholder', alt: 'placeholder' }}
+          imageProps={{ src: 'placeholder' }}
           loading={true}
         />,
       ];