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

package/src/Form/Wrapper/Wrapper/Wrapper.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement } from 'react';
+import React, { ComponentPropsWithRef, ReactElement } from 'react';
 import { FormGroup, Props as FormGroupProps } from '../../FormGroup/FormGroup';
 import { Label, Props as LabelProps } from '../../Label/Label';
 import classes from './Wrapper.module.scss';
 import { Props as HelperProps } from '../../FormHelperText/FormHelperText';
-import { HTMLProps } from '../../../interfaces';
+import { FormElement } from '../../form.interfaces';
 
-export interface Props extends Omit<FormGroupProps, 'children'> {
+export interface Props extends ComponentPropsWithRef<'div'>, FormGroupProps {
   children: ReactElement | ReactElement[];
   floatingLabelActive?: boolean;
   floatingLabel?: boolean;
@@ -19,83 +19,88 @@ export interface Props extends Omit<FormGroupProps, 'children'> {
 }
 
 /** For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */
-export interface WrapperProps extends HTMLProps<HTMLDivElement> {
+export interface WrapperProps extends FormElement {
   errorMessage?: string;
-  error: boolean;
   helperText?: string;
   helperProps?: HelperProps;
   label?: string;
   name: string;
   required?: boolean;
+  disabled?: boolean;
 }
 
-export const Wrapper = ({
-  children,
-  className,
-  error,
-  errorMessage,
-  errorId,
-  errorMessageIcon,
-  errorMessageIconPosition,
-  helperText,
-  helperId,
-  floatingLabel = true,
-  floatingLabelActive,
-  required,
-  helperProps,
-  helperIndent,
-  labelProps,
-  label,
-  disabled,
-  name,
-  innerClassName,
-  ...rest
-}: Props) => {
-  const renderChildren = () =>
-    React.Children.map(children, (child) =>
-      React.cloneElement(child, {
-        disabled,
-      })
-    );
+export const Wrapper = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      className,
+      error,
+      errorMessage,
+      errorId,
+      errorMessageIcon,
+      errorMessageIconPosition,
+      helperText,
+      helperId,
+      floatingLabel = true,
+      floatingLabelActive,
+      required,
+      helperProps,
+      helperIndent,
+      labelProps,
+      label,
+      disabled,
+      name,
+      innerClassName,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const renderChildren = () =>
+      React.Children.map(children, (child) =>
+        React.cloneElement(child, {
+          disabled,
+        })
+      );
 
-  const labelClasses = [];
+    const labelClasses = [];
 
-  floatingLabel && labelClasses.push(classes['floating-label']);
-  floatingLabel && floatingLabelActive && labelClasses.push(classes['floating-label-active']);
-  labelProps?.className && labelClasses.push(labelProps.className);
-  required && labelClasses.push(classes['required']);
-  error && labelClasses.push(classes['error']);
+    floatingLabel && labelClasses.push(classes['floating-label']);
+    floatingLabel && floatingLabelActive && labelClasses.push(classes['floating-label-active']);
+    labelProps?.className && labelClasses.push(labelProps.className);
+    required && labelClasses.push(classes['required']);
+    error && labelClasses.push(classes['error']);
 
-  return (
-    <div {...rest} className={`${classes.wrapper} ${className ? className : ''}`}>
-      <FormGroup
-        error={error}
-        errorMessage={errorMessage}
-        errorId={errorId}
-        errorMessageIcon={errorMessageIcon}
-        errorMessageIconPosition={errorMessageIconPosition}
-        helperText={helperText}
-        helperId={helperId}
-        helperProps={helperProps}
-        helperIndent={helperIndent}
-      >
-        <div
-          className={`${floatingLabel ? classes['floating-wrapper'] : ''} ${
-            innerClassName ? innerClassName : ''
-          }`}
+    return (
+      <div {...rest} ref={ref} className={`${classes.wrapper} ${className ? className : ''}`}>
+        <FormGroup
+          error={error}
+          errorMessage={errorMessage}
+          errorId={errorId}
+          errorMessageIcon={errorMessageIcon}
+          errorMessageIconPosition={errorMessageIconPosition}
+          helperText={helperText}
+          helperId={helperId}
+          helperProps={helperProps}
+          helperIndent={helperIndent}
         >
-          {label && (
-            <Label
-              {...labelProps}
-              className={`${classes.label} ${labelClasses.join(' ')}`}
-              htmlFor={name}
-            >
-              {label}
-            </Label>
-          )}
-          {renderChildren()}
-        </div>
-      </FormGroup>
-    </div>
-  );
-};
+          <div
+            className={`${floatingLabel ? classes['floating-wrapper'] : ''} ${
+              innerClassName ? innerClassName : ''
+            }`}
+          >
+            {label && (
+              <Label
+                {...labelProps}
+                className={`${classes.label} ${labelClasses.join(' ')}`}
+                htmlFor={name}
+              >
+                {label}
+              </Label>
+            )}
+            {renderChildren()}
+          </div>
+        </FormGroup>
+      </div>
+    );
+  }
+);

package/src/Form/form.interfaces.ts

@@ -1,7 +1,7 @@
-import { HTMLProps } from '../interfaces';
+import { DataAttributeKey } from '../interfaces';
 
 /** Radios */
-export interface FormSelector<T> extends FormElement<T> {
+export interface FormSelector extends FormElement {
   helperText?: string;
   errorMessage?: string;
   parentHelperId?: string;
@@ -9,6 +9,7 @@ export interface FormSelector<T> extends FormElement<T> {
 }
 
 /** Default form elements */
-export interface FormElement<T> extends HTMLProps<T> {
+export interface FormElement {
   error?: boolean;
+  [dataAttribute: DataAttributeKey]: any;
 }

package/src/Icon/Icon.module.scss

@@ -272,6 +272,10 @@
   content: '\e93c';
   @include fontProperties();
 }
+.icon-error-circle:before {
+  content: '\e93d';
+  @include fontProperties();
+}
 .icon-circle:before {
   content: '\e93e';
   @include fontProperties();

package/src/Icon/Icon.test.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Icon, Props, Icons } from './Icon';
 import { render } from '@testing-library/react';
 
-const initParams: Props = {
+interface PartialProps extends Omit<Props, 'ref'> {}
+
+const initParams: PartialProps = {
   icon: Icons.Calendar,
   color: 'rgb(26, 153, 60)',
 };
@@ -37,3 +39,29 @@ describe('Icon', () => {
     expect(icon.tagName.toLowerCase()).toBe(tag);
   });
 });
+
+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 <Icon {...initParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Icon/Icon.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import classes from './Icon.module.scss';
-import { HTMLAttributes } from '../interfaces';
 
 export enum Icons {
   Bell = 'bell',
@@ -26,6 +25,7 @@ export enum Icons {
   Ellipsis = 'ellipsis',
   EllipsisAlt = 'ellipsis-alt',
   Equal = 'equal',
+  Error = 'error-circle',
   Eye = 'eye',
   Filter = 'filter',
   FilterAlt = 'filter-alt',
@@ -69,21 +69,21 @@ export enum Icons {
 
 type Tag = 'span' | 'div' | 'i';
 
-export interface Props extends Omit<HTMLAttributes<HTMLOrSVGElement>, 'size'> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   icon: Icons;
   color?: string;
   size?: string;
   tag?: Tag;
 }
 
-export const Icon = React.forwardRef(
+export const Icon = React.forwardRef<HTMLDivElement, Props>(
   ({ icon, color, className, style, size, tag = 'span', ...rest }: Props, ref) => {
     const Component = tag;
 
     return (
       <Component
         {...rest}
-        ref={ref as React.LegacyRef<HTMLDivElement>}
+        ref={ref}
         style={{ color: color, ...style, fontSize: size }}
         data-icon
         aria-hidden="true"

package/src/Link/Link.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Link, Props } from './Link';
 import { render } from '@testing-library/react';
 import { BrowserRouter, Link as RouterLink } from 'react-router-dom';
@@ -101,6 +101,32 @@ describe('Link should render', () => {
   });
 });
 
+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 <Link {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('colors', () => {
   it('should be color primary', () => {
     const { link } = createLink((defaultParams) => ({ ...defaultParams, color: 'primary' }));

package/src/Link/Link.tsx

@@ -1,21 +1,19 @@
-import React, { ForwardRefExoticComponent, Ref, RefAttributes } from 'react';
-import { HTMLProps } from '../interfaces';
+import React, { ComponentPropsWithRef, ForwardRefExoticComponent, RefAttributes } from 'react';
 import classes from './Link.module.scss';
 import { LinkProps } from './types';
 
 type AnchorType = 'external' | 'internal' | 'download';
 
-export interface Props extends HTMLProps<HTMLAnchorElement> {
+export interface Props extends ComponentPropsWithRef<'a'> {
   children?: string;
   color?: 'primary' | 'secondary' | 'tertiary';
   type?: AnchorType;
   to: string;
   disabled?: boolean;
   component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
-  ref?: Ref<HTMLAnchorElement>;
 }
 
-export const Link = React.forwardRef(
+export const Link = React.forwardRef<HTMLAnchorElement, Props>(
   (
     {
       children,
@@ -27,7 +25,7 @@ export const Link = React.forwardRef(
       component,
       ...rest
     }: Props,
-    ref: Ref<HTMLAnchorElement>
+    ref
   ) => {
     const determineTarget = () => {
       if (rest.target) {

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

@@ -1,13 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { BaseModal, Props } from './BaseModal';
-import {
-  render,
-  getByRole,
-  getByText,
-  queryByText,
-  queryByRole,
-  fireEvent,
-} from '@testing-library/react';
+import { render, getByText, queryByText, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 const classNames = ['class11', 'class12'];
@@ -24,8 +17,8 @@ const initParams: Props = {
 
 describe('BaseModal', () => {
   it('renders without crashing', () => {
-    const { container } = render(<BaseModal {...initParams} />);
-    const dialog = getByRole(container, 'dialog');
+    const { getByRole } = render(<BaseModal {...initParams} />);
+    const dialog = getByRole('dialog');
     expect(dialog).toHaveAttribute('aria-modal', 'true');
     expect(dialog).toHaveAttribute('aria-labelledby', 'modal-label');
     expect(dialog).toHaveAttribute('aria-describedby', 'modal-description');
@@ -36,17 +29,17 @@ describe('BaseModal', () => {
   });
 
   it('should render close modal without content', () => {
-    const { container } = render(<BaseModal {...initParams} open={false} />);
-    const dialogByRole = queryByRole(container, 'dialog');
-    const dialog = container.children[0] as HTMLElement;
+    const { queryByRole } = render(<BaseModal {...initParams} 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();
   });
 
   it('should handle clicking on backdrop & ESC key', () => {
-    const { container } = render(<BaseModal {...initParams} />);
-    const modal = getByRole(container, 'dialog');
+    const { getByRole } = render(<BaseModal {...initParams} />);
+    const modal = getByRole('dialog');
     const backdrop = modal.querySelector('.backdrop') as HTMLElement;
     expect(initParams.onClose).toHaveBeenCalledTimes(0);
 
@@ -57,3 +50,29 @@ describe('BaseModal', () => {
     expect(initParams.onClose).toHaveBeenCalledTimes(2);
   });
 });
+
+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 <BaseModal 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/BaseModal/BaseModal.tsx

@@ -0,0 +1,105 @@
+import React, { ComponentPropsWithRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import classes from './BaseModal.module.scss';
+import { labelId, descriptionId } from './BaseModalContext';
+
+const SCROLL_PROPERTY_NAME = 'overflow';
+const SCROLL_PROPERTY_VALUE = 'hidden';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  id: string;
+  children: React.ReactNode;
+  open: boolean;
+  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
+  className?: string;
+  containerClassName?: string;
+  labelledby?: string;
+  describedby?: string;
+  disableEscapeKeyDown?: boolean;
+  disableBackdrop?: boolean;
+  zIndex?: number;
+  domRoot?: HTMLElement;
+}
+
+export const useSetBodyScroll = (open: boolean) => {
+  const hideBodyScroll = () => {
+    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;
+  };
+
+  const showBodyScroll = () => {
+    const allModalsClosed =
+      document.querySelectorAll('[role=dialog][data-hidden=false]').length === 0;
+    if (allModalsClosed) {
+      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      hideBodyScroll();
+    } else {
+      showBodyScroll();
+    }
+  }, [open]);
+};
+
+export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      id,
+      children,
+      open,
+      onClose,
+      className = '',
+      containerClassName = '',
+      labelledby,
+      describedby,
+      disableEscapeKeyDown = false,
+      disableBackdrop = false,
+      zIndex,
+      domRoot = document.body,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    useSetBodyScroll(open);
+
+    const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!disableEscapeKeyDown && event.key === 'Escape') {
+        event.stopPropagation();
+        onClose && onClose();
+      }
+    };
+
+    const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
+
+    return createPortal(
+      <div
+        {...rest}
+        ref={ref}
+        id={id}
+        className={`${classes['modal']} ${open && classes['visible']} ${className}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelledby || labelId(id)}
+        aria-describedby={describedby || descriptionId(id)}
+        aria-hidden={!open}
+        tabIndex={-1}
+        data-hidden={!open}
+        onKeyDown={handleEscKeyPress}
+        style={{ zIndex }}
+      >
+        <div className={classes['backdrop']} onClick={handleBackdropClick}></div>
+        {open && (
+          <div
+            style={{ zIndex: zIndex && zIndex + 1 }}
+            className={`${classes['container']} ${containerClassName}`}
+          >
+            {children}
+          </div>
+        )}
+      </div>,
+      domRoot
+    );
+  }
+);

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

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from 'react';
+import { BaseModalActions } from './BaseModalActions';
+import { render } from '@testing-library/react';
+
+describe('BaseModalActions', () => {
+  it('renders without crashing', () => {
+    const children = 'Content';
+    const classNames = ['class1', 'class2'];
+    const { container } = render(
+      <BaseModalActions className={classNames.join(' ')}>{children}</BaseModalActions>
+    );
+
+    const dialogActionsContainer = container.children[0];
+    expect(dialogActionsContainer).toHaveClass('actions', classNames[0], classNames[1]);
+    expect(dialogActionsContainer).toHaveTextContent(children);
+  });
+});
+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 <BaseModalActions 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/BaseModalActions/BaseModalActions.tsx

@@ -0,0 +1,16 @@
+import React, { ComponentPropsWithRef } from 'react';
+import classes from './BaseModalActions.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'footer'> {
+  children?: React.ReactNode;
+}
+
+export const BaseModalActions = React.forwardRef<HTMLElement, Props>(
+  ({ children, className = '', ...rest }: Props, ref) => {
+    return (
+      <footer {...rest} ref={ref} className={`${classes['actions']} ${className}`}>
+        {children}
+      </footer>
+    );
+  }
+);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { BaseModalContent, Props } from './BaseModalContent';
 import { render } from '@testing-library/react';
 import { descriptionId } from '../BaseModalContext';
@@ -20,6 +20,32 @@ describe('BaseModalContent', () => {
     expect(dialogContentContainer).toEqual(document.activeElement);
   });
 
+  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 <BaseModalContent children="test" data-ref="testing" ref={ref} />;
+      };
+
+      const refCheck = (ref: React.RefObject<HTMLElement>) => {
+        expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      };
+
+      render(<ExampleComponent propagateRef={refCheck} />);
+    });
+  });
+
   it('should renders not focused div', () => {
     const { container } = render(<BaseModalContent {...initParams} disableAutoFocus />);