@onewelcome/react-lib-components 0.1.5-alpha → 0.1.8-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.module.scss

@@ -46,7 +46,7 @@ $marginTop: 3.125rem;
   flex-direction: column;
 }
 
-@media only screen and (min-width: 50rem) {
+@media only screen and (min-width: 50em) {
   .container {
     margin-top: $marginTop;
     width: 50rem;

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

@@ -6,48 +6,113 @@ 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 handle clicking on backdrop & ESC key', () => {
-    const { getByRole } = render(<BaseModal {...initParams} />);
+  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(initParams.onClose).toHaveBeenCalledTimes(0);
+
+    expect(backdrop).toBeInTheDocument();
+    expect(backdrop).toHaveAttribute('id', 'backdrop');
+  });
+
+  it('should handle clicking on backdrop & ESC key', () => {
+    const { getByRole } = createBaseModal();
+
+    const modal = getByRole('dialog');
+
+    const backdrop = modal.querySelector('.backdrop')!;
+    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.module.scss

@@ -2,7 +2,7 @@
   align-items: center;
 }
 
-@media only screen and (min-width: 800px) {
+@media only screen and (min-width: 50em) {
   .container {
     width: auto;
     max-width: 440px;

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/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -24,7 +24,7 @@
   }
 }
 
-@media only screen and (min-width: 37.5rem) {
+@media only screen and (min-width: 37.5em) {
   .snackbars {
     width: initial;
 

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -128,7 +128,7 @@
   }
 }
 
-@media only screen and (min-width: 37.5rem) {
+@media only screen and (min-width: 37.5em) {
   .snackbar {
     width: 37.5rem;
   }

package/src/Pagination/Pagination.module.scss

@@ -4,117 +4,117 @@
   color: var(--greyed-out);
   display: flex;
   flex-direction: column;
-}
 
-.form-element {
-  height: 2.5rem;
+  .form-element {
+    height: 2.5rem;
 
-  button {
-    min-height: 2.5rem;
+    button {
+      min-height: 2.5rem;
+    }
   }
-}
 
-.total {
-  flex: 1 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  span > span {
-    font-weight: 700;
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    margin-left: 0.25rem;
-  }
-}
+  .total {
+    flex: 1 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-.pagination {
-  flex: 1 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1rem;
+    span > span {
+      font-weight: 700;
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      margin-left: 0.25rem;
+    }
+  }
 
-  .previous,
-  .next {
+  .pagination {
+    flex: 1 0 auto;
     display: flex;
     align-items: center;
+    justify-content: center;
+    margin-top: 1rem;
 
-    button {
-      margin: 0.25rem;
-    }
+    .previous,
+    .next {
+      display: flex;
+      align-items: center;
+
+      button {
+        margin: 0.25rem;
+      }
 
-    button span:before {
-      font-size: 0.75rem;
+      button span:before {
+        font-size: 0.75rem;
+      }
     }
   }
-}
 
-.per-page {
-  display: none;
-  align-items: center;
-}
+  .per-page {
+    display: none;
+    align-items: center;
+  }
 
-.page {
-  display: flex;
-  align-items: center;
-  flex-basis: min-content;
-}
+  .page {
+    display: flex;
+    align-items: center;
+    flex-basis: min-content;
+  }
 
-.page-size-select {
-  border-color: #fff;
-  margin: 0 0.25rem;
+  .page-size-select {
+    border-color: #fff;
+    margin: 0 0.25rem;
 
-  button {
-    min-width: 55px;
-    padding: 0;
+    button {
+      min-width: 3.4375rem;
+      padding: 0;
 
-    div[data-display] {
-      left: 0.5rem;
-    }
+      div[data-display] {
+        left: 0.5rem;
+      }
 
-    div:not([data-display]) {
-      right: 0.5rem;
+      div:not([data-display]) {
+        right: 0.5rem;
+      }
     }
   }
-}
 
-.current-value-input {
-  margin: 0 0.25rem 0 0;
-  padding: 0;
+  .current-value-input {
+    margin: 0 0.25rem 0 0;
+    padding: 0;
 
-  input {
-    border-radius: var(--input-border-radius);
-    padding: 0 1rem;
-    width: auto;
-    text-align: center;
+    input {
+      border-radius: var(--input-border-radius);
+      padding: 0 1rem;
+      width: auto;
+      text-align: center;
+    }
   }
 }
 
 @media screen and (min-width: 30em) {
   .pagination-wrapper {
     flex-direction: row;
-  }
 
-  .total {
-    justify-content: flex-start;
-  }
+    .total {
+      justify-content: flex-start;
+    }
 
-  .pagination {
-    margin-top: 0;
-    justify-content: flex-end;
+    .pagination {
+      margin-top: 0;
+      justify-content: flex-end;
 
-    .previous,
-    .next {
-      button {
-        margin: 0.5rem;
+      .previous,
+      .next {
+        button {
+          margin: 0.5rem;
+        }
       }
     }
   }
 }
 
 @media screen and (min-width: 48em) {
-  .per-page {
+  .pagination-wrapper .per-page {
     display: flex;
   }
 }

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);
+}