@onewelcome/react-lib-components 0.1.6-alpha → 0.1.7-alpha

package/src/Link/Link.tsx

@@ -7,11 +7,13 @@ import React, {
 import classes from './Link.module.scss';
 import { LinkProps } from './types';
 
-type AnchorType = 'external' | 'internal' | 'download';
+export type AnchorType = 'external' | 'internal' | 'download';
 
 export interface Props extends ComponentPropsWithRef<'a'> {
   children?: ReactNode;
   color?: 'primary' | 'secondary' | 'tertiary';
+  display?: 'link' | 'button';
+  buttonVariant?: 'outline' | 'text' | 'fill';
   type?: AnchorType;
   to: string;
   disabled?: boolean;
@@ -27,6 +29,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
       to,
       color = 'primary',
       type = 'internal',
+      display = 'link',
+      buttonVariant = 'fill',
       component,
       ...rest
     }: Props,
@@ -44,7 +48,9 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
       return '';
     };
 
-    const classNames = [classes['link'], classes[color]];
+    const classNames = [classes[color]];
+    display === 'link' && classNames.push(classes['link']);
+    display === 'button' && classNames.push(classes['button'], classes[buttonVariant]);
     disabled && classNames.push(classes['disabled']);
     className && classNames.push(className);
 

package/src/Notifications/BaseModal/BaseModal.test.tsx

@@ -6,48 +6,112 @@ import userEvent from '@testing-library/user-event';
 const classNames = ['class11', 'class12'];
 const containerClassNames = ['class21', 'class22'];
 
-const initParams: Props = {
+const defaultParams: Props = {
   id: 'modal',
   open: true,
   onClose: jest.fn(),
   className: classNames.join(' '),
-  containerClassName: containerClassNames.join(' '),
+  containerProps: { className: containerClassNames.join(' ') },
   children: 'This is example dialog content.',
 };
 
+const createBaseModal = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<BaseModal {...parameters} data-testid="BaseModal" />);
+  const slideInModal = queries.getByTestId('BaseModal');
+
+  return {
+    ...queries,
+    slideInModal,
+  };
+};
+
 describe('BaseModal', () => {
   it('renders without crashing', () => {
-    const { getByRole } = render(<BaseModal {...initParams} />);
+    const { getByRole } = createBaseModal();
     const dialog = getByRole('dialog');
+
     expect(dialog).toHaveAttribute('aria-modal', 'true');
     expect(dialog).toHaveAttribute('aria-labelledby', 'modal-label');
     expect(dialog).toHaveAttribute('aria-describedby', 'modal-description');
     expect(dialog).toHaveAttribute('data-hidden', 'false');
     expect(dialog).toHaveAttribute('aria-hidden', 'false');
-    expect(getByText(dialog, initParams.children as string)).toBeDefined();
+    expect(getByText(dialog, defaultParams.children as string)).toBeDefined();
     expect(document.body).toHaveStyle('overflow: hidden');
   });
 
-  it('should render close modal without content', () => {
-    const { queryByRole } = render(<BaseModal {...initParams} open={false} />);
+  it('should render closed modal without content', () => {
+    const { queryByRole } = createBaseModal((params) => ({ ...params, open: false }));
+
     const dialogByRole = queryByRole('dialog');
     const dialog = document.body.children[1] as HTMLElement;
+
     expect(dialogByRole).toBeNull();
     expect(dialog).toHaveAttribute('aria-hidden', 'true');
-    expect(queryByText(dialog, initParams.children as string)).toBeNull();
+    expect(queryByText(dialog, defaultParams.children as string)).toBeNull();
+  });
+
+  it('should render closed modal with content when forceContainerOpen is provided', () => {
+    const { getByRole } = createBaseModal((params) => ({
+      ...params,
+      open: false,
+      forceContainerOpen: true,
+    }));
+
+    const modal = getByRole('dialog', { hidden: true });
+    const container = modal.querySelector('.container') as HTMLElement;
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('propagates containerProps to container element', () => {
+    const { getByRole } = createBaseModal((params) => ({
+      ...params,
+      open: true,
+      containerProps: {
+        id: 'container',
+      },
+    }));
+
+    const modal = getByRole('dialog');
+    const container = modal.querySelector('.container') as HTMLElement;
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveAttribute('id', 'container');
+  });
+
+  it('propagates backdropProps to backdrop element', () => {
+    const { getByRole } = createBaseModal((params) => ({
+      ...params,
+      open: true,
+      backdropProps: {
+        id: 'backdrop',
+      },
+    }));
+
+    const modal = getByRole('dialog');
+    const backdrop = modal.querySelector('.backdrop') as HTMLElement;
+
+    expect(backdrop).toBeInTheDocument();
+    expect(backdrop).toHaveAttribute('id', 'backdrop');
   });
 
   it('should handle clicking on backdrop & ESC key', () => {
-    const { getByRole } = render(<BaseModal {...initParams} />);
+    const { getByRole } = createBaseModal();
+
     const modal = getByRole('dialog');
     const backdrop = modal.querySelector('.backdrop') as HTMLElement;
-    expect(initParams.onClose).toHaveBeenCalledTimes(0);
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(0);
 
     userEvent.click(backdrop);
-    expect(initParams.onClose).toHaveBeenCalledTimes(1);
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(1);
 
     fireEvent.keyDown(modal, { key: 'Escape' });
-    expect(initParams.onClose).toHaveBeenCalledTimes(2);
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(2);
   });
 });
 

package/src/Notifications/BaseModal/BaseModal.tsx

@@ -12,11 +12,13 @@ export interface Props extends ComponentPropsWithRef<'div'> {
   open: boolean;
   onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
   className?: string;
-  containerClassName?: string;
+  containerProps?: ComponentPropsWithRef<'div'>;
+  backdropProps?: ComponentPropsWithRef<'div'>;
   labelledby?: string;
   describedby?: string;
   disableEscapeKeyDown?: boolean;
   disableBackdrop?: boolean;
+  forceContainerOpen?: boolean;
   zIndex?: number;
   domRoot?: HTMLElement;
 }
@@ -51,11 +53,13 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
       open,
       onClose,
       className = '',
-      containerClassName = '',
+      containerProps,
+      backdropProps,
       labelledby,
       describedby,
       disableEscapeKeyDown = false,
       disableBackdrop = false,
+      forceContainerOpen = false,
       zIndex,
       domRoot = document.body,
       ...rest
@@ -78,7 +82,7 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref}
         id={id}
-        className={`${classes['modal']} ${open && classes['visible']} ${className}`}
+        className={`${classes['modal']} ${open ? classes['visible'] : ''} ${className}`}
         role="dialog"
         aria-modal="true"
         aria-labelledby={labelledby || labelId(id)}
@@ -89,14 +93,31 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
         onKeyDown={handleEscKeyPress}
         style={{ zIndex }}
       >
-        <div className={classes['backdrop']} onClick={handleBackdropClick}></div>
-        {open && (
+        <div
+          {...backdropProps}
+          className={`${classes['backdrop']} ${backdropProps?.className ?? ''}`}
+          onClick={handleBackdropClick}
+        ></div>
+        {forceContainerOpen ? (
           <div
+            {...containerProps}
+            aria-hidden={!open}
+            hidden={!open}
             style={{ zIndex: zIndex && zIndex + 1 }}
-            className={`${classes['container']} ${containerClassName}`}
+            className={`${classes['container']} ${containerProps?.className ?? ''}`}
           >
             {children}
           </div>
+        ) : (
+          open && (
+            <div
+              {...containerProps}
+              style={{ zIndex: zIndex && zIndex + 1 }}
+              className={`${classes['container']} ${containerProps?.className ?? ''}`}
+            >
+              {children}
+            </div>
+          )
         )}
       </div>,
       domRoot

package/src/Notifications/Dialog/Dialog.tsx

@@ -74,7 +74,7 @@ export const Dialog = React.forwardRef<HTMLDivElement, Props>(
         ref={ref}
         id={dialogId}
         className={classes['dialog']}
-        containerClassName={classes['container']}
+        containerProps={{ className: classes['container'] }}
         open={open}
         disableBackdrop
         onClose={onClose}

package/src/Notifications/SlideInModal/SlideInModal.module.scss

@@ -0,0 +1,36 @@
+.slide-in-modal {
+  justify-content: flex-end;
+
+  visibility: visible;
+
+  transition: transform 0.5s ease-in-out;
+  transform: translate(120%);
+
+  &.hidden {
+    visibility: hidden;
+  }
+
+  &.visible {
+    visibility: visible;
+    transform: translate(0%);
+
+    .backdrop-slide {
+      background-color: transparent;
+    }
+  }
+}
+
+.backdrop-slide {
+  background-color: transparent;
+}
+
+@media only screen and (min-width: 50rem) {
+  .container {
+    margin-top: 0;
+    width: 50rem;
+    height: 100%;
+    max-height: unset;
+    border-radius: 0;
+    box-shadow: 0 1.875rem 3.125rem var(--modal-shadow-color);
+  }
+}

package/src/Notifications/SlideInModal/SlideInModal.test.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react';
+import { SlideInModal } from './SlideInModal';
+import { Props } from '../Modal/Modal';
+import { render, fireEvent } from '@testing-library/react';
+
+const defaultParams: Props = {
+  id: '',
+  children: undefined,
+  open: false,
+};
+
+const createSlideInModal = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<SlideInModal {...parameters} data-testid="SlideInModal" />);
+  const slideInModal = queries.getByTestId('SlideInModal');
+
+  return {
+    ...queries,
+    slideInModal,
+  };
+};
+
+describe('SlideInModal should render', () => {
+  it('renders without crashing', () => {
+    const { slideInModal } = createSlideInModal();
+
+    expect(slideInModal).toBeDefined();
+  });
+
+  it("makes modal content's container visible after opening transition ends", () => {
+    const { slideInModal, rerender } = createSlideInModal();
+
+    expect(slideInModal).toHaveClass('hidden');
+
+    rerender(<SlideInModal {...defaultParams} open />);
+    fireEvent.transitionEnd(slideInModal);
+
+    expect(slideInModal).not.toHaveClass('hidden');
+  });
+});
+
+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 <SlideInModal {...defaultParams} 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/SlideInModal/SlideInModal.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Props as ModalProps, Modal } from '../Modal/Modal';
+import classes from './SlideInModal.module.scss';
+
+export const SlideInModal = React.forwardRef<HTMLDivElement, ModalProps>(
+  ({ children, id, open, ...rest }: ModalProps, ref) => {
+    const [classHideOnTransition, setClassHideOnTransition] = useState<'hidden' | ''>('hidden');
+
+    const onTransitionEnd = () => setClassHideOnTransition((prev) => (prev ? '' : 'hidden'));
+
+    return (
+      <Modal
+        {...rest}
+        id={id}
+        open={open}
+        className={`${classes['slide-in-modal']} ${open ? classes['visible'] : ''} ${
+          !open ? classes[classHideOnTransition] : ''
+        }`}
+        containerProps={{ className: classes['container'] }}
+        backdropProps={{ className: classes['backdrop-slide'] }}
+        forceContainerOpen
+        onTransitionEnd={onTransitionEnd}
+        ref={ref}
+      >
+        {children}
+      </Modal>
+    );
+  }
+);
+
+export { Props } from '../Modal/Modal';

package/src/StatusIndicator/StatusIndicator.module.scss

@@ -0,0 +1,27 @@
+.status-indicator {
+  display: flex;
+  align-items: center;
+}
+
+.status-badge {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+}
+
+.active {
+  background-color: var(--success);
+}
+
+.error {
+  background-color: var(--error);
+}
+
+.neutral {
+  background-color: var(--greyed-out);
+}
+
+.warning {
+  background-color: var(--warning);
+}

package/src/StatusIndicator/StatusIndicator.test.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useRef } from 'react';
+import { StatusIndicator, Props } from './StatusIndicator';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  status: 'active',
+};
+
+const createStatusIndicator = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <StatusIndicator {...parameters} data-testid="StatusIndicator">
+      content
+    </StatusIndicator>
+  );
+  const statusIndicator = queries.getByTestId('StatusIndicator');
+
+  return {
+    ...queries,
+    statusIndicator,
+  };
+};
+
+describe('StatusIndicator should render', () => {
+  it('renders without crashing', () => {
+    const { statusIndicator, getByText } = createStatusIndicator();
+
+    expect(statusIndicator).toBeDefined();
+    expect(getByText('content')).toBeInTheDocument();
+  });
+
+  it('passes through custom typography props', () => {
+    const { statusIndicator, getByText } = createStatusIndicator((params) => ({
+      ...params,
+      typographyProps: {
+        variant: 'body',
+        children: <strong>custom children</strong>,
+      },
+    }));
+
+    expect(statusIndicator).toBeDefined();
+    expect(getByText('custom children')).toBeInTheDocument();
+  });
+
+  it('passes through custom props', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      'aria-label': 'status indicator',
+    }));
+
+    expect(statusIndicator).toBeDefined();
+    expect(statusIndicator).toHaveAttribute('aria-label', 'status indicator');
+  });
+
+  it('should set "active" class on status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      status: 'active',
+    }));
+
+    expect(statusIndicator.firstChild).toHaveClass('active');
+  });
+
+  it('should set "error" class on status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({ ...params, status: 'error' }));
+
+    expect(statusIndicator.firstChild).toHaveClass('error');
+  });
+
+  it('should set "neutral" class on status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      status: 'neutral',
+    }));
+
+    expect(statusIndicator.firstChild).toHaveClass('neutral');
+  });
+
+  it('should pass "warning" class to status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      status: 'warning',
+    }));
+
+    expect(statusIndicator.firstChild).toHaveClass('warning');
+  });
+
+  it('should pass custom class to status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      badgeProps: { className: 'custom' },
+    }));
+
+    expect(statusIndicator.firstChild).toHaveClass('custom');
+  });
+});
+
+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 (
+        <StatusIndicator id="test" children="test" data-ref="testing" ref={ref} status="active" />
+      );
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,25 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { Typography, Props as TypographyProps } from '../Typography/Typography';
+import classes from './StatusIndicator.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
+  status: 'active' | 'error' | 'neutral' | 'warning';
+  badgeProps?: ComponentPropsWithRef<'div'>;
+  typographyProps?: TypographyProps;
+}
+
+export const StatusIndicator = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, status, badgeProps, typographyProps, ...rest }: Props, ref) => {
+    return (
+      <div {...rest} className={classes['status-indicator']} ref={ref}>
+        <div
+          className={`${classes['status-badge']} ${classes[status]} ${badgeProps?.className ?? ''}`}
+        />
+        <Typography {...typographyProps} spacing={{ margin: '0' }} variant="body" tag="div">
+          {typographyProps?.children || children}
+        </Typography>
+      </div>
+    );
+  }
+);

package/src/Tiles/Tile.module.scss

@@ -1,4 +1,4 @@
-@import '../readyclasses.module.scss';
+@import '../mixins.module.scss';
 
 .tile {
   border: 1px solid #e9e9eb;

package/src/Tiles/Tile.test.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Tile, Props } from './Tile';
-import { render, getByRole } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Icon, Icons } from '../Icon/Icon';
 import { ContextMenu } from '../ContextMenu/ContextMenu';
 import { IconButton } from '../Button/IconButton';
@@ -130,9 +130,9 @@ describe('contextmenu', () => {
     expect(popover).toHaveClass('show');
     expect(popover).toHaveStyle({ opacity: '1;' });
 
-    userEvent.click(getByRole(menuitem1, 'button'));
-    userEvent.click(getByRole(menuitem2, 'button'));
-    userEvent.click(getByRole(menuitem3, 'button'));
+    userEvent.click(menuitem1);
+    userEvent.click(menuitem2);
+    userEvent.click(menuitem3);
 
     expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
   });