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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.0-alpha",
+  "version": "0.1.1-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/Button/IconButton.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import React, { Fragment, RefObject } from 'react';
 import { BaseButton, Props as BaseButtonProps } from './BaseButton';
 import classes from './IconButton.module.scss';
 import readyclasses from '../readyclasses.module.scss';
@@ -7,22 +7,26 @@ export interface Props extends Omit<BaseButtonProps, 'ref'> {
   children?: React.ReactNode;
   iconSize?: 's' | 'm' | 'l';
   className?: string;
-  title: string;
+  title?: string;
   ref?: RefObject<HTMLButtonElement>;
 }
 
 export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
   ({ children, color = 'primary', iconSize = 'm', title, ...rest }, ref) => {
+    if (!title) {
+      console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
+    }
+
     return (
       <BaseButton
         {...rest}
         ref={ref}
         className={`${classes['icon-button']} ${classes[color]} ${classes['button-' + iconSize]}`}
       >
-        <>
+        <Fragment>
           {children}
           <span className={readyclasses['sr-only']}>{title}</span>
-        </>
+        </Fragment>
       </BaseButton>
     );
   }

package/src/Form/Checkbox/Checkbox.module.scss

@@ -63,3 +63,7 @@
   font-size: 1.25rem;
   pointer-events: none;
 }
+
+.disabled {
+  color: var(--disabled);
+}

package/src/Form/Checkbox/Checkbox.tsx

@@ -77,16 +77,17 @@ export const Checkbox = ({
 
   const renderNestedCheckboxes = () => (
     <ul className={classes['checkbox-list']}>
-      {React.Children.map(children as ReactElement[], (child) => {
+      {React.Children.map(children as ReactNode[], (child) => {
         return (
           <li>
             <Checkbox
-              {...child.props}
+              {...(child as ReactElement).props}
               parentHelperId={parentHelperId}
               parentErrorId={parentErrorId}
               error={error}
+              disabled={disabled ? disabled : (child as CheckboxProps).disabled}
             >
-              {child.props.children}
+              {(child as ReactElement).props.children}
             </Checkbox>
           </li>
         );
@@ -103,6 +104,8 @@ export const Checkbox = ({
 
   const renderToggle = () => React.Children.toArray(children).filter(isToggle);
 
+  const iconClasses = [classes['input'], disabled ? classes['disabled'] : ''];
+
   /** Default return value is the default checkbox */
   return (
     <FormSelectorWrapper
@@ -136,9 +139,11 @@ export const Checkbox = ({
       />
       {renderToggle()}
 
-      {indeterminate && <Icon className={classes.input} icon={Icons.MinusSquare} />}
-      {checked && !indeterminate && <Icon className={classes.input} icon={Icons.CheckmarkSquare} />}
-      {!checked && !indeterminate && <Icon className={classes.input} icon={Icons.Square} />}
+      {indeterminate && <Icon className={iconClasses.join(' ')} icon={Icons.MinusSquare} />}
+      {checked && !indeterminate && (
+        <Icon className={iconClasses.join(' ')} icon={Icons.CheckmarkSquare} />
+      )}
+      {!checked && !indeterminate && <Icon className={iconClasses.join(' ')} icon={Icons.Square} />}
       <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
     </FormSelectorWrapper>
   );

package/src/Form/Fieldset/Fieldset.module.scss

@@ -13,7 +13,17 @@
     margin-top: 1rem;
   }
 
-  .title {
+  .legend {
     display: block;
+
+    &.required {
+      &:after {
+        content: ' *';
+      }
+    }
+
+    &.error {
+      color: var(--error);
+    }
   }
 }

package/src/Form/Fieldset/Fieldset.test.tsx

@@ -7,8 +7,8 @@ import { Select } from '../Select/Select';
 import { Option } from '../Select/Option';
 
 const defaultParams: Props = {
-  title: 'Example',
-  titleVariant: 'h2',
+  legend: 'Example',
+  legendStyle: 'h2',
   children: [
     <FormControl data-testid="form-control">
       <Input placeholder="This is a placeholder" name="example" type="text" />

package/src/Form/Fieldset/Fieldset.tsx

@@ -6,24 +6,28 @@ import { Typography, Variant } from '../../Typography/Typography';
 
 export interface Props extends HTMLProps<HTMLFieldSetElement> {
   children?: ReactElement | ReactElement[];
-  title: string;
-  titleVariant?: Variant;
-  hideTitle?: boolean;
+  legend: string;
+  legendStyle?: Variant;
+  hideLegend?: boolean;
   background?: string;
   noPadding?: boolean;
   noBackground?: boolean;
+  required?: boolean;
+  error?: boolean;
 }
 
 export const Fieldset = ({
   children,
   className,
-  title,
-  titleVariant = 'body',
-  hideTitle = false,
+  legend,
+  legendStyle = 'body',
+  hideLegend = false,
   noBackground,
   background = noBackground ? '' : '#FFF',
   noPadding = false,
   disabled = false,
+  required = false,
+  error = false,
   ...rest
 }: Props) => {
   const renderChildren = () => {
@@ -32,6 +36,7 @@ export const Fieldset = ({
     return React.Children.map(children, (child: ReactElement) =>
       React.cloneElement(child, {
         disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
+        error: child.props.error !== undefined ? child.props.error : error,
       })
     );
   };
@@ -43,10 +48,17 @@ export const Fieldset = ({
       style={{ backgroundColor: background, ...rest.style }}
       className={`${classes.fieldset} ${noPadding ? classes['no-padding'] : ''} ${className ?? ''}`}
     >
-      {title && <legend className={readyclasses['sr-only']}>{title}</legend>}
-      {title && !hideTitle && (
-        <Typography variant={titleVariant} tag="span" aria-hidden="true" className={classes.title}>
-          {title}
+      {legend && <legend className={readyclasses['sr-only']}>{legend}</legend>}
+      {legend && !hideLegend && (
+        <Typography
+          variant={legendStyle}
+          tag="span"
+          aria-hidden="true"
+          className={`${classes['legend']} ${required ? classes['required'] : ''} ${
+            error ? classes['error'] : ''
+          }`}
+        >
+          {legend}
         </Typography>
       )}
       {renderChildren()}

package/src/Form/FormControl/FormControl.tsx

@@ -6,11 +6,13 @@ export interface Props extends HTMLProps<HTMLDivElement> {
   children: ReactElement | ReactElement[];
   grid?: 1 | 2 | 3;
   align?: 'top' | 'start' | 'middle' | 'center' | 'bottom' | 'end' | 'stretch';
+  error?: boolean;
 }
 
 export const FormControl = ({
   children,
   disabled,
+  error,
   className,
   grid,
   align = 'center',
@@ -24,6 +26,7 @@ export const FormControl = ({
 
       const childElement = React.cloneElement(child, {
         disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
+        error: child.props.error !== undefined ? child.props.error : error,
       });
 
       if (grid && grid > 1) {

package/src/Form/Radio/Radio.module.scss

@@ -98,3 +98,7 @@
     color: var(--disabled);
   }
 }
+
+.disabled {
+  color: var(--disabled);
+}

package/src/Form/Radio/Radio.tsx

@@ -87,8 +87,18 @@ export const Radio = ({
         type="radio"
       />
 
-      {checked && <Icon className={classes.input} icon={Icons.Radio} />}
-      {!checked && <Icon className={classes.input} icon={Icons.Circle} />}
+      {checked && (
+        <Icon
+          className={`${classes['input']} ${disabled ? classes['disabled'] : ''}`}
+          icon={Icons.Radio}
+        />
+      )}
+      {!checked && (
+        <Icon
+          className={`${classes['input']} ${disabled ? classes['disabled'] : ''}`}
+          icon={Icons.Circle}
+        />
+      )}
 
       <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
         {children}

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.test.tsx

@@ -21,7 +21,7 @@ const defaultParams: Props = {
   error: false,
   helperText: 'Helpertext',
   name: 'Checkboxwrapper',
-  fieldsetProps: { title: 'Example title' },
+  fieldsetProps: { legend: 'Example title' },
   label: 'Label',
   children: [],
 };

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

@@ -21,7 +21,7 @@ export const CheckboxWrapper = ({
   const { errorId, helperId } = useWrapper();
 
   useEffect(() => {
-    if (fieldsetProps.title === undefined) {
+    if (fieldsetProps.legend === undefined) {
       console.error(
         `You should give your Fieldset component a title prop so a legend element is rendered. This error was thrown in CheckboxWrapper. You can add this title prop through the fieldsetProps prop by passing an object (fieldsetProps={{ title: "title here" }})`
       );

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.test.tsx

@@ -12,7 +12,7 @@ const defaultParams: Props = {
   helperText: 'Helper text',
   error: false,
   onChange: onChangeHandler,
-  fieldsetProps: { title: 'Example title' },
+  fieldsetProps: { legend: 'Example title' },
   value: checkedOptionValue,
   name: 'my-group',
   children: [

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

@@ -27,7 +27,7 @@ export const RadioWrapper = ({
   const { errorId, helperId } = useWrapper(value);
 
   useEffect(() => {
-    if (fieldsetProps.title === undefined) {
+    if (fieldsetProps.legend === undefined) {
       console.error(
         `You should give your Fieldset component a title prop so a legend element is rendered. This error was thrown in RadioWrapper. You can add this title prop through the fieldsetProps prop by passing an object (fieldsetProps={{ title: "title here" }})`
       );

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

@@ -4,10 +4,11 @@ import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
 import { Select, Props as SelectProps } from '../../Select/Select';
 import { useWrapper } from '../../../hooks/useWrapper';
 
-export interface Props extends Omit<WrapperProps, 'onChange'> {
+export interface Props extends Omit<WrapperProps, 'onChange' | 'error'> {
   children: ReactChild | ReactChild[];
   placeholder?: string;
   value: string;
+  error?: boolean;
   selectProps?: SelectProps;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   onClear?: () => void;

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

@@ -1,13 +1,6 @@
 import React 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);
 

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

@@ -1,4 +1,6 @@
-import React, { HTMLAttributes, useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { HTMLAttributes } from '../../interfaces';
 import classes from './BaseModal.module.scss';
 import { labelId, descriptionId } from './BaseModalContext';
 
@@ -17,27 +19,9 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   disableEscapeKeyDown?: boolean;
   disableBackdrop?: boolean;
   zIndex?: number;
+  domRoot?: HTMLElement;
 }
 
-const useBackdropOnCloseClick = (
-  disableBackdrop: boolean,
-  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown
-) => {
-  const backdropRef = useRef<HTMLDivElement>(null);
-  const onBackdropClick = () => onClose && onClose();
-
-  useEffect(() => {
-    !disableBackdrop && backdropRef.current?.addEventListener('click', onBackdropClick);
-    return () => {
-      !disableBackdrop && backdropRef.current?.removeEventListener('click', onBackdropClick);
-    };
-  }, []);
-
-  return {
-    backdropRef,
-  };
-};
-
 export const useSetBodyScroll = (open: boolean) => {
   const hideBodyScroll = () => {
     document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;
@@ -72,9 +56,9 @@ export const BaseModal = ({
   disableEscapeKeyDown = false,
   disableBackdrop = false,
   zIndex,
+  domRoot = document.body,
   ...restProps
 }: Props) => {
-  const { backdropRef } = useBackdropOnCloseClick(disableBackdrop, onClose);
   useSetBodyScroll(open);
 
   const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -84,7 +68,9 @@ export const BaseModal = ({
     }
   };
 
-  return (
+  const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
+
+  return createPortal(
     <div
       {...restProps}
       id={id}
@@ -99,7 +85,7 @@ export const BaseModal = ({
       onKeyDown={handleEscKeyPress}
       style={{ zIndex }}
     >
-      <div ref={backdropRef} className={classes['backdrop']}></div>
+      <div className={classes['backdrop']} onClick={handleBackdropClick}></div>
       {open && (
         <div
           style={{ zIndex: zIndex && zIndex + 1 }}
@@ -108,6 +94,7 @@ export const BaseModal = ({
           {children}
         </div>
       )}
-    </div>
+    </div>,
+    domRoot
   );
 };

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

@@ -1,10 +1,10 @@
 import React, { HTMLAttributes } from 'react';
 import classes from './BaseModalHeader.module.scss';
-import { IconButton } from '../../Button/IconButton';
-import { Icon, Icons } from '../../Icon/Icon';
-import { Typography } from '../../Typography/Typography';
+import { IconButton } from '../../../Button/IconButton';
+import { Icon, Icons } from '../../../Icon/Icon';
+import { Typography } from '../../../Typography/Typography';
 
-export interface Props extends HTMLAttributes<HTMLElement> {
+export interface Props extends HTMLAttributes<HTMLDivElement> {
   id: string;
   title: string;
   children?: React.ReactNode;
@@ -13,7 +13,7 @@ export interface Props extends HTMLAttributes<HTMLElement> {
 
 export const BaseModalHeader = ({ id, title, children, onClose, ...restProps }: Props) => {
   return (
-    <header {...restProps} className={classes['header']}>
+    <div {...restProps} className={classes['header']}>
       <div className={classes['headline']}>
         <Typography id={id} className={classes['title']} tag="h1" variant="h4">
           {title}
@@ -23,6 +23,6 @@ export const BaseModalHeader = ({ id, title, children, onClose, ...restProps }:
         </IconButton>
       </div>
       {children}
-    </header>
+    </div>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dialog, Props } from './Dialog';
-import { render, getAllByRole, getByRole, fireEvent, getByText } from '@testing-library/react';
+import { render, getAllByRole } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 const initParams: Props = {
@@ -24,11 +24,11 @@ const getButtons = (container: HTMLElement) => getAllByRole(container, 'button')
 
 describe('Dialog', () => {
   it('renders without crashing', () => {
-    const { container } = render(<Dialog {...initParams} />);
-    const [primaryButton, secondaryButton] = getButtons(container);
+    const { getByText } = render(<Dialog {...initParams} />);
+    const [primaryButton, secondaryButton] = getButtons(document.body);
 
-    expect(getByText(container, initParams.title)).toBeDefined();
-    expect(getByText(container, initParams.children as string)).toBeDefined();
+    expect(getByText(initParams.title)).toBeDefined();
+    expect(getByText(initParams.children as string)).toBeDefined();
     const actionsDiv = primaryButton.closest('footer');
     expect(actionsDiv).toHaveClass('left');
     expect(actionsDiv?.children[0]).toEqual(primaryButton);
@@ -38,8 +38,8 @@ describe('Dialog', () => {
   });
 
   it('renders action aligned to right', () => {
-    const { container } = render(<Dialog {...initParams} alignActions="right" />);
-    const [secondaryButton, primaryButton] = getButtons(container);
+    render(<Dialog {...initParams} alignActions="right" />);
+    const [secondaryButton, primaryButton] = getButtons(document.body);
 
     const actionsDiv = primaryButton.closest('footer');
     expect(actionsDiv).not.toHaveClass('left');
@@ -50,27 +50,24 @@ describe('Dialog', () => {
   });
 
   it('renders only one button', () => {
-    const { container } = render(<Dialog {...initParams} secondaryAction={undefined} />);
-    const buttons = getButtons(container);
+    render(<Dialog {...initParams} secondaryAction={undefined} />);
+    const buttons = getButtons(document.body);
 
     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);
+  it('should handle clicking on buttons and ENTER press', () => {
+    render(<Dialog {...initParams} />);
+    const [primaryButton, secondaryButton] = getButtons(document.body);
     expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(0);
     expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(0);
     expect(initParams.onClose).toHaveBeenCalledTimes(0);
 
-    const autoSummissionInput = container.querySelector('input') as HTMLElement;
+    const autoSummissionInput = document.body.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);

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

@@ -1,14 +1,15 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useState } 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 { Button, Props as ButtonProps } from '../../Button/Button';
 import { labelId, descriptionId } from '../BaseModal/BaseModalContext';
+import { generateID } from '../../util/helper';
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
-  id: string;
+  id?: string;
   open: boolean;
   children: React.ReactNode;
   alignActions: 'left' | 'right';
@@ -17,6 +18,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   primaryAction: Action;
   secondaryAction?: Action;
   zIndex?: number;
+  disableEscapeKeyDown?: boolean;
 }
 
 export interface Action extends Omit<ButtonProps, 'variant' | 'ref'> {
@@ -34,8 +36,10 @@ export const Dialog = ({
   primaryAction,
   secondaryAction,
   zIndex,
+  disableEscapeKeyDown = true,
   ...restProps
 }: Props) => {
+  const [dialogId] = useState(id ?? generateID(20));
   const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
   const PrimaryButton = (
     <Button key="primary" {...restOfPrimaryAction}>
@@ -63,16 +67,21 @@ export const Dialog = ({
   return (
     <BaseModal
       {...restProps}
-      id={id}
+      id={dialogId}
       className={classes['dialog']}
       containerClassName={classes['container']}
       open={open}
       disableBackdrop
       onClose={onClose}
       zIndex={zIndex}
+      disableEscapeKeyDown={disableEscapeKeyDown}
     >
-      <DialogTitle id={labelId(id)} title={title} />
-      <BaseModalContent id={descriptionId(id)} className={classes['content']} disableAutoFocus>
+      <DialogTitle id={labelId(dialogId)} title={title} />
+      <BaseModalContent
+        id={descriptionId(dialogId)}
+        className={classes['content']}
+        disableAutoFocus
+      >
         {children}
       </BaseModalContent>
       <DialogActions align={alignActions}>
@@ -82,12 +91,14 @@ export const Dialog = ({
       </DialogActions>
       <input
         autoFocus
+        aria-hidden={true}
         style={{
           position: 'absolute',
           width: 0,
           height: 0,
           opacity: 0,
         }}
+        maxLength={0}
         tabIndex={-1}
         onKeyPress={onHiddenInputKeyPress}
       />