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

package/src/ContextMenu/ContextMenu.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ContextMenu, Props } from './ContextMenu';
 import { render, getByRole } from '@testing-library/react';
 import { Button } from '../Button/Button';
@@ -91,3 +91,29 @@ describe('ContextMenu should render', () => {
     console.error = err;
   });
 });
+
+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 <ContextMenu {...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/ContextMenu/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLProps, ReactElement, useEffect, useRef, useState } from 'react';
+import React, { ComponentPropsWithRef, ReactElement, useEffect, useRef, useState } from 'react';
 import { Props as ButtonProps } from '../Button/Button';
 import { Props as IconButtonProps } from '../Button/IconButton';
 import { Popover } from '../Popover/Popover';
@@ -8,7 +8,7 @@ import classes from './ContextMenu.module.scss';
 import { useBodyClick } from '../hooks/useBodyClick';
 import { createPortal } from 'react-dom';
 
-export interface Props extends HTMLProps<HTMLDivElement> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
   children: ReactElement<ContextMenuItemProps> | ReactElement<ContextMenuItemProps>[];
   placement?: Placement;
@@ -21,71 +21,76 @@ export interface Props extends HTMLProps<HTMLDivElement> {
   onClose?: () => void;
 }
 
-export const ContextMenu = ({
-  trigger,
-  children,
-  id,
-  show = false,
-  onShow,
-  onClose,
-  placement = { horizontal: 'right', vertical: 'top' },
-  offset = { top: 0, bottom: 0, left: 0, right: 0 },
-  transformOrigin = { horizontal: 'left', vertical: 'top' },
-  domRoot = document.body,
-  ...rest
-}: Props) => {
-  const anchorEl = useRef<HTMLButtonElement>(null);
-  const [showContextMenu, setShowContextMenu] = useState(show);
+export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      trigger,
+      children,
+      id,
+      show = false,
+      onShow,
+      onClose,
+      placement = { horizontal: 'right', vertical: 'top' },
+      offset = { top: 0, bottom: 0, left: 0, right: 0 },
+      transformOrigin = { horizontal: 'left', vertical: 'top' },
+      domRoot = document.body,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const anchorEl = useRef<HTMLButtonElement>(null);
+    const [showContextMenu, setShowContextMenu] = useState(show);
 
-  if (!id) {
-    throw new Error('You need to provide an ID to the context menu');
-  }
+    if (!id) {
+      throw new Error('You need to provide an ID to the context menu');
+    }
 
-  useBodyClick(
-    (event) => {
-      return showContextMenu && anchorEl.current !== event.target;
-    },
-    () => {
-      setShowContextMenu(false);
-    },
-    showContextMenu
-  );
+    useBodyClick(
+      (event) => {
+        return showContextMenu && anchorEl.current !== event.target;
+      },
+      () => {
+        setShowContextMenu(false);
+      },
+      showContextMenu
+    );
 
-  useEffect(() => {
-    if (showContextMenu === true) {
-      onShow && onShow();
-    } else {
-      onClose && onClose();
-    }
-  }, [showContextMenu]);
+    useEffect(() => {
+      if (showContextMenu === true) {
+        onShow && onShow();
+      } else {
+        onClose && onClose();
+      }
+    }, [showContextMenu]);
 
-  const renderTrigger = () =>
-    React.cloneElement(trigger, {
-      id: id,
-      ['aria-haspopup']: 'true',
-      ['aria-controls']: `${id}-menu`,
-      ['aria-expanded']: show,
-      onClick: () => setShowContextMenu(!showContextMenu),
-      ref: anchorEl,
-    });
+    const renderTrigger = () =>
+      React.cloneElement(trigger, {
+        id: id,
+        'aria-haspopup': 'true',
+        'aria-controls': `${id}-menu`,
+        'aria-expanded': show,
+        onClick: () => setShowContextMenu(!showContextMenu),
+        ref: anchorEl,
+      });
 
-  return (
-    <div {...rest} className={classes['context-menu']}>
-      {renderTrigger()}
-      {createPortal(
-        <Popover
-          placement={placement}
-          transformOrigin={transformOrigin}
-          offset={offset}
-          anchorEl={anchorEl}
-          show={showContextMenu}
-        >
-          <ul className={classes.menu} id={`${id}-menu`} aria-describedby={id} role="menu">
-            {children}
-          </ul>
-        </Popover>,
-        domRoot
-      )}
-    </div>
-  );
-};
+    return (
+      <div {...rest} ref={ref} className={classes['context-menu']}>
+        {renderTrigger()}
+        {createPortal(
+          <Popover
+            placement={placement}
+            transformOrigin={transformOrigin}
+            offset={offset}
+            anchorEl={anchorEl}
+            show={showContextMenu}
+          >
+            <ul className={classes.menu} id={`${id}-menu`} aria-describedby={id} role="menu">
+              {children}
+            </ul>
+          </Popover>,
+          domRoot
+        )}
+      </div>
+    );
+  }
+);

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.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Checkbox, CheckboxProps as Props } from './Checkbox';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -33,6 +33,32 @@ describe('Checkbox 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 <Checkbox {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('Checkbox should have proper attributes', () => {
   it('should be unchecked', () => {
     const { checkbox } = createCheckbox();
@@ -75,7 +101,7 @@ describe('Checkbox should have proper attributes', () => {
       ...defaultParams,
       error: true,
       errorMessage: 'This is an error',
-      wrapperProps: { 'data-testid': 'checkbox-wrapper' },
+      formSelectorWrapperProps: { 'data-testid': 'checkbox-wrapper' },
     }));
 
     expect(checkbox).toHaveAttribute(

package/src/Form/Checkbox/Checkbox.tsx

@@ -1,145 +1,160 @@
-import React, { ReactElement, ReactNode, useEffect } from 'react';
+import React, { ComponentPropsWithRef, ReactElement, ReactNode, useEffect } from 'react';
 import { Icon, Icons } from '../../Icon/Icon';
 import { Props as FormHelperTextProps } from '../FormHelperText/FormHelperText';
 import classes from './Checkbox.module.scss';
 import { useFormSelector } from '../../hooks/useFormSelector';
+import {
+  FormSelectorWrapper,
+  Props as FormSelectorWrapperProps,
+} from '../FormSelectorWrapper/FormSelectorWrapper';
 import { FormSelector } from '../form.interfaces';
-import { HTMLProps } from '../../interfaces';
-import { FormSelectorWrapper } from '../FormSelectorWrapper/FormSelectorWrapper';
 
 const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.['data-toggle'];
 
-export interface CheckboxProps extends FormSelector<HTMLInputElement> {
+export interface CheckboxProps extends ComponentPropsWithRef<'input'>, FormSelector {
   children: ReactNode;
   label?: string;
   indeterminate?: boolean;
   helperProps?: FormHelperTextProps;
-  wrapperProps?: HTMLProps<HTMLDivElement>;
+  formSelectorWrapperProps?: FormSelectorWrapperProps;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Checkbox = ({
-  children,
-  name,
-  helperText,
-  helperProps,
-  indeterminate,
-  parentErrorId,
-  errorMessage,
-  disabled,
-  label,
-  parentHelperId,
-  className,
-  error,
-  checked = false,
-  wrapperProps,
-  onChange,
-  ...rest
-}: CheckboxProps) => {
-  const { errorId, identifier, describedBy } = useFormSelector({
-    name,
-    helperText,
-    parentErrorId,
-    errorMessage,
-    error,
-    parentHelperId,
-  });
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      children,
+      name,
+      helperText,
+      helperProps,
+      indeterminate,
+      parentErrorId,
+      errorMessage,
+      disabled,
+      label,
+      parentHelperId,
+      className,
+      error,
+      checked = false,
+      formSelectorWrapperProps,
+      onChange,
+      ...rest
+    }: CheckboxProps,
+    ref
+  ) => {
+    const { errorId, identifier, describedBy } = useFormSelector({
+      name,
+      helperText,
+      parentErrorId,
+      errorMessage,
+      error,
+      parentHelperId,
+    });
 
-  useEffect(() => {
-    if (!name) {
-      console.error("Please pass a 'name' prop to your <Checkbox> component.");
-    }
+    useEffect(() => {
+      if (!name) {
+        console.error("Please pass a 'name' prop to your <Checkbox> component.");
+      }
 
-    if (typeof children === 'object' && !isToggle(children) && indeterminate === undefined) {
-      throw new Error(
-        'If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.'
-      );
-    }
-  }, []);
+      if (typeof children === 'object' && !isToggle(children) && indeterminate === undefined) {
+        throw new Error(
+          'If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.'
+        );
+      }
+    }, []);
+
+    const determineLabel = () => {
+      if (label) {
+        return label;
+      } else if (children === undefined) {
+        throw new Error(
+          'Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.'
+        );
+      }
+
+      if (typeof children === 'string') {
+        return children;
+      }
 
-  const determineLabel = () => {
-    if (label) {
-      return label;
-    } else if (children === undefined) {
       throw new Error(
-        'Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.'
+        'If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.'
       );
-    }
+    };
 
-    if (typeof children === 'string') {
-      return children;
-    }
-
-    throw new Error(
-      'If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.'
+    const renderNestedCheckboxes = () => (
+      <ul className={classes['checkbox-list']}>
+        {React.Children.map(children as ReactNode[], (child) => {
+          return (
+            <li>
+              <Checkbox
+                {...(child as ReactElement).props}
+                parentHelperId={parentHelperId}
+                parentErrorId={parentErrorId}
+                error={error}
+                disabled={disabled ? disabled : (child as CheckboxProps).disabled}
+              >
+                {(child as ReactElement).props.children}
+              </Checkbox>
+            </li>
+          );
+        })}
+      </ul>
     );
-  };
 
-  const renderNestedCheckboxes = () => (
-    <ul className={classes['checkbox-list']}>
-      {React.Children.map(children as ReactElement[], (child) => {
-        return (
-          <li>
-            <Checkbox
-              {...child.props}
-              parentHelperId={parentHelperId}
-              parentErrorId={parentErrorId}
-              error={error}
-            >
-              {child.props.children}
-            </Checkbox>
-          </li>
-        );
-      })}
-    </ul>
-  );
+    const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (disabled) {
+        return;
+      }
+      onChange && onChange(event);
+    };
 
-  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (disabled) {
-      return;
-    }
-    onChange && onChange(event);
-  };
+    const renderToggle = () => React.Children.toArray(children).filter(isToggle);
 
-  const renderToggle = () => React.Children.toArray(children).filter(isToggle);
+    const iconClasses = [classes['input'], disabled ? classes['disabled'] : ''];
 
-  /** Default return value is the default checkbox */
-  return (
-    <FormSelectorWrapper
-      {...wrapperProps}
-      className={`${classes['checkbox-wrapper']} ${className ? className : ''}`}
-      containerProps={{ className: classes['checkbox-container'] }}
-      helperText={helperText}
-      helperProps={helperProps}
-      parentErrorId={parentErrorId}
-      errorId={errorId}
-      errorMessage={errorMessage}
-      error={error}
-      disabled={disabled}
-      identifier={identifier}
-      nestedChildren={
-        typeof children === 'object' && !isToggle(children) && renderNestedCheckboxes()
-      }
-    >
-      <input
-        {...rest}
+    /** Default return value is the default checkbox */
+    return (
+      <FormSelectorWrapper
+        {...formSelectorWrapperProps}
+        className={`${classes['checkbox-wrapper']} ${className ? className : ''}`}
+        containerProps={{ className: classes['checkbox-container'] }}
+        helperText={helperText}
+        helperProps={helperProps}
+        parentErrorId={parentErrorId}
+        errorId={errorId}
+        errorMessage={errorMessage}
+        error={error}
         disabled={disabled}
-        className={`${classes['native-input']} ${error ? classes['error'] : ''}`}
-        checked={checked}
-        onChange={onChangeHandler}
-        aria-invalid={error as boolean}
-        aria-checked={indeterminate ? 'mixed' : checked}
-        aria-describedby={describedBy}
-        id={`${identifier}-checkbox`}
-        name={name}
-        type="checkbox"
-      />
-      {renderToggle()}
+        identifier={identifier}
+        nestedChildren={
+          typeof children === 'object' && !isToggle(children) && renderNestedCheckboxes()
+        }
+      >
+        <input
+          {...rest}
+          ref={ref}
+          disabled={disabled}
+          className={`${classes['native-input']} ${error ? classes['error'] : ''}`}
+          checked={checked}
+          onChange={onChangeHandler}
+          aria-invalid={error as boolean}
+          aria-checked={indeterminate ? 'mixed' : checked}
+          aria-describedby={describedBy}
+          id={`${identifier}-checkbox`}
+          name={name}
+          type="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} />}
-      <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
-    </FormSelectorWrapper>
-  );
-};
+        {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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Fieldset, Props } from './Fieldset';
 import { render } from '@testing-library/react';
 import { FormControl } from '../FormControl/FormControl';
@@ -7,14 +7,14 @@ 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" />
     </FormControl>,
     <FormControl data-testid="form-control">
-      <Select value="placeholder" onChange={jest.fn}>
+      <Select name="Example select" value="placeholder" onChange={jest.fn}>
         <Option value="option1">Option1</Option>
         <Option value="option2">Option2</Option>
         <Option value="option3">Option3</Option>
@@ -45,6 +45,32 @@ describe('Fieldset 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 <Fieldset {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('Fieldset should get proper attributes and classes', () => {
   it('has no padding class', () => {
     const { fieldset } = createFieldset((defaultParams) => ({ ...defaultParams, noPadding: true }));