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

package/src/Form/Checkbox/Checkbox.test.tsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import { Checkbox, CheckboxProps as Props } from './Checkbox';
+import { Checkbox, Props } from './Checkbox';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Toggle } from '../Toggle/Toggle';
 
-const onChangeHandeler = jest.fn();
+const onChangeHandler = jest.fn();
 
 const defaultParams: Props = {
   name: 'Testing',
   children: 'checkbox content',
   helperText: 'example helper',
-  onChange: onChangeHandeler,
+  onChange: onChangeHandler,
 };
 
 const createCheckbox = (params?: (defaultParams: Props) => Props) => {
@@ -83,9 +84,35 @@ describe('Checkbox should have proper attributes', () => {
   });
 
   it('should be disabled', () => {
-    const { checkbox } = createCheckbox((defaultParams) => ({ ...defaultParams, disabled: true }));
+    const onChangeHandler = jest.fn();
+    const { checkbox } = createCheckbox((defaultParams) => ({
+      ...defaultParams,
+      onChange: onChangeHandler,
+      disabled: true,
+    }));
+
+    expect(checkbox).toBeDisabled();
+
+    userEvent.click(checkbox);
+
+    expect(onChangeHandler).not.toHaveBeenCalled();
+  });
+
+  it('nested checkbox should be disabled', () => {
+    const { getByTestId } = createCheckbox((defaultParams) => ({
+      ...defaultParams,
+      indeterminate: false,
+      label: 'test',
+      children: (
+        <Checkbox data-testid="nested-checkbox" name="test" disabled={true}>
+          test
+        </Checkbox>
+      ),
+    }));
+
+    const nestedCheckbox = getByTestId('nested-checkbox');
 
-    expect(checkbox).toHaveAttribute('disabled');
+    expect(nestedCheckbox).toBeDisabled();
   });
 
   it('should have helpertext rendered', () => {
@@ -131,15 +158,124 @@ describe('Checkbox should be interactive', () => {
   it('should call onChange when clicked', () => {
     const { checkbox } = createCheckbox();
 
-    expect(onChangeHandeler).not.toBeCalled();
+    expect(onChangeHandler).not.toBeCalled();
     userEvent.click(checkbox);
-    expect(onChangeHandeler).toBeCalledTimes(1);
+    expect(onChangeHandler).toBeCalledTimes(1);
   });
 
   it('should not call onChange when disabled', () => {
     const { checkbox } = createCheckbox((defaultParams) => ({ ...defaultParams, disabled: true }));
 
     userEvent.click(checkbox);
-    expect(onChangeHandeler).not.toBeCalled();
+    expect(onChangeHandler).not.toBeCalled();
+  });
+});
+
+describe('toggle version', () => {
+  it('should turn into a toggle', () => {
+    const { container } = render(<Toggle name="toggle">Test</Toggle>);
+
+    expect(container.querySelector('[data-toggle]')).toBeInTheDocument();
+  });
+});
+
+describe('missing attributes gets us errors', () => {
+  it('throws an error for missing label prop', () => {
+    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
+    const err = console.error;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      createCheckbox((defaultParams) => ({
+        ...defaultParams,
+        name: 'testing',
+        children: <Checkbox name="test">Test</Checkbox>,
+      }));
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected =
+      'If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.';
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+
+  it('throws an error for indeterminate prop', () => {
+    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
+    const err = console.error;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      createCheckbox((defaultParams) => ({
+        ...defaultParams,
+        label: 'testing',
+        children: <Checkbox name="test">Test</Checkbox>,
+      }));
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected =
+      'If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.';
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+
+  it('throws an error for incorrect children prop', () => {
+    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
+    const err = console.error;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      createCheckbox((defaultParams) => ({
+        name: undefined,
+      }));
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected =
+      'Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.';
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+
+  it('throws an error for missing name prop', () => {
+    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
+    const err = console.error;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      createCheckbox((defaultParams) => ({
+        children: 'test',
+      }));
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected = "Please pass a 'name' prop to your <Checkbox> component.";
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
   });
 });

package/src/Form/Checkbox/Checkbox.tsx

@@ -11,7 +11,7 @@ import { FormSelector } from '../form.interfaces';
 
 const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.['data-toggle'];
 
-export interface CheckboxProps extends ComponentPropsWithRef<'input'>, FormSelector {
+export interface Props extends ComponentPropsWithRef<'input'>, FormSelector {
   children: ReactNode;
   label?: string;
   indeterminate?: boolean;
@@ -20,7 +20,7 @@ export interface CheckboxProps extends ComponentPropsWithRef<'input'>, FormSelec
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
   (
     {
       children,
@@ -39,7 +39,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       formSelectorWrapperProps,
       onChange,
       ...rest
-    }: CheckboxProps,
+    }: Props,
     ref
   ) => {
     const { errorId, identifier, describedBy } = useFormSelector({
@@ -53,7 +53,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 
     useEffect(() => {
       if (!name) {
-        console.error("Please pass a 'name' prop to your <Checkbox> component.");
+        throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
       }
 
       if (typeof children === 'object' && !isToggle(children) && indeterminate === undefined) {
@@ -83,17 +83,17 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 
     const renderNestedCheckboxes = () => (
       <ul className={classes['checkbox-list']}>
-        {React.Children.map(children as ReactNode[], (child) => {
+        {React.Children.map(children as ReactElement[], (child) => {
           return (
             <li>
               <Checkbox
-                {...(child as ReactElement).props}
+                {...child.props}
                 parentHelperId={parentHelperId}
                 parentErrorId={parentErrorId}
                 error={error}
-                disabled={disabled ? disabled : (child as CheckboxProps).disabled}
+                disabled={child.props.disabled ? child.props.disabled : disabled}
               >
-                {(child as ReactElement).props.children}
+                {child.props.children}
               </Checkbox>
             </li>
           );

package/src/Form/Select/Option.tsx

@@ -1,14 +1,19 @@
-import React, { ComponentPropsWithRef, useEffect, useState } from 'react';
+import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from 'react';
 import classes from './Select.module.scss';
 
 export interface Props extends ComponentPropsWithRef<'li'> {
   children: string;
   value: string;
   disabled?: boolean;
-  selected?: boolean;
+  isSelected?: boolean;
+  selectOpened?: boolean;
+  hasFocus?: boolean;
+  shouldClick?: boolean;
+  isSearching?: boolean;
   label?: string;
-  filter?: string;
-  onOptionSelect?: (event: React.SyntheticEvent<HTMLLIElement>) => void;
+  childIndex?: number;
+  onOptionSelect?: (ref: React.RefObject<HTMLLIElement>) => void;
+  onFocusChange?: (childIndex: number) => void;
 }
 
 export const Option = React.forwardRef<HTMLLIElement, Props>(
@@ -16,44 +21,57 @@ export const Option = React.forwardRef<HTMLLIElement, Props>(
     {
       children,
       className,
-      selected = false,
+      isSelected = false,
+      shouldClick,
+      hasFocus,
+      selectOpened,
+      isSearching,
+      childIndex,
       onOptionSelect,
+      onFocusChange,
       disabled,
-      filter,
       value,
       ...rest
     }: Props,
     ref
   ) => {
-    const [showOption, setShowOption] = useState(true);
+    let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
 
-    const onSelectHandler = (event: React.SyntheticEvent<HTMLLIElement>) => {
-      if (onOptionSelect) onOptionSelect(event);
-    };
+    useEffect(() => {
+      if (isSelected && innerOptionRef.current && shouldClick) {
+        innerOptionRef.current.click();
+      }
+    }, [isSelected, shouldClick]);
 
     useEffect(() => {
-      if (filter) {
-        setShowOption(children.toLowerCase().match(filter.toLowerCase()) !== null);
-      } else {
-        setShowOption(true);
+      if (innerOptionRef.current && hasFocus && selectOpened && !isSearching) {
+        onFocusChange && childIndex && onFocusChange(childIndex);
+        innerOptionRef.current.focus();
       }
-    }, [filter]);
+    }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
 
-    if (!showOption) return null;
+    const onSelectHandler = () => {
+      if (onOptionSelect) onOptionSelect(innerOptionRef);
+    };
 
     return (
       <li
         {...rest}
-        ref={ref}
+        ref={innerOptionRef}
         data-value={value}
-        className={`${selected ? classes['selected-option'] : ''} ${
+        className={`${isSelected ? classes['selected-option'] : ''} ${
           disabled ? classes.disabled : ''
         } ${className ?? ''}`}
         onClick={onSelectHandler}
-        onKeyPress={(e) => {
-          e.key === 'Enter' && onSelectHandler(e);
+        onKeyDownCapture={(event) => {
+          if (event.code === 'Enter') {
+            event.stopPropagation();
+            event.preventDefault();
+
+            onSelectHandler();
+          }
         }}
-        aria-selected={selected}
+        aria-selected={isSelected}
         role="option"
         tabIndex={disabled ? -1 : 0}
       >

package/src/Form/Select/Select.module.scss

@@ -37,7 +37,7 @@ $listItemHeight: 2.125rem;
     border-color: var(--default);
   }
 
-  button {
+  .custom-select {
     width: 100%;
     min-height: 4rem;
     background-color: transparent;