@onewelcome/react-lib-components 0.1.5-alpha → 0.1.8-alpha

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.test.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridHeaderCell, Props } from './DataGridHeaderCell';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = { name: 'name-123', headline: 'Test' };
+
+const createDataGridHeaderCell = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('tr');
+  const queries = render(<DataGridHeaderCell {...parameters} data-testid="dataGridHeaderCell" />, {
+    container,
+  });
+  const dataGridHeaderCell = queries.getByTestId('dataGridHeaderCell');
+
+  return {
+    ...queries,
+    dataGridHeaderCell,
+  };
+};
+
+describe('DataGridHeaderCell should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridHeaderCell, queryByRole } = createDataGridHeaderCell();
+
+    expect(dataGridHeaderCell).toBeDefined();
+    expect(dataGridHeaderCell).toHaveTextContent(defaultParams.headline);
+    expect(queryByRole('button')).toBeDefined();
+    expect(dataGridHeaderCell.querySelectorAll('[data-icon]')).toHaveLength(2);
+  });
+
+  it('renders without sorting indicators (icons)', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+      ...params,
+      disableSorting: true,
+    }));
+
+    expect(dataGridHeaderCell.querySelector('[data-icon]')).toBeNull();
+  });
+
+  it('renders DESC and ASC sorting indicators (icons) when sorting is enabled and current sorting is not defined', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell();
+
+    expect(dataGridHeaderCell).toBeDefined();
+    const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+    expect(sortingIcons).toHaveLength(2);
+    sortingIcons.forEach((icon) => {
+      expect(icon).toHaveClass('indicator');
+      expect(icon).not.toHaveClass('active');
+      expect(icon).not.toHaveClass('hidden');
+    });
+  });
+
+  it('renders ASC sorting indicator (icon) when sorting is enabled and current sorting is ASC', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+      ...params,
+      activeSortDirection: 'ASC',
+    }));
+
+    expect(dataGridHeaderCell).toBeDefined();
+    const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+    expect(sortingIcons).toHaveLength(2);
+    sortingIcons.forEach((icon) => expect(icon).toHaveClass('indicator'));
+    expect(sortingIcons[0]).toHaveClass('indicator', 'active', 'icon-triangle-up');
+    expect(sortingIcons[0]).not.toHaveClass('hidden');
+    expect(sortingIcons[1]).toHaveClass('indicator', 'hidden', 'icon-triangle-down');
+    expect(sortingIcons[1]).not.toHaveClass('active');
+  });
+});
+
+it('renders DESC sorting indicator (icon) when sorting is enabled and current sorting is DESC', () => {
+  const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+    ...params,
+    activeSortDirection: 'DESC',
+  }));
+
+  expect(dataGridHeaderCell).toBeDefined();
+  const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+  expect(sortingIcons).toHaveLength(2);
+  sortingIcons.forEach((icon) => expect(icon).toHaveClass('indicator'));
+  expect(sortingIcons[0]).toHaveClass('indicator', 'hidden', 'icon-triangle-up');
+  expect(sortingIcons[0]).not.toHaveClass('active');
+  expect(sortingIcons[1]).toHaveClass('indicator', 'active', 'icon-triangle-down');
+  expect(sortingIcons[1]).not.toHaveClass('hidden');
+});
+
+describe('DataGridHeaderCell should be interactive', () => {
+  it('clicking on cell calls onSort callback', () => {
+    const onSortHandler = jest.fn();
+    const { getByRole } = createDataGridHeaderCell((params) => ({
+      ...params,
+      disableSorting: false,
+      onSort: onSortHandler,
+    }));
+
+    userEvent.click(getByRole('button'));
+
+    expect(onSortHandler).toBeCalledWith(defaultParams.name);
+  });
+});
+
+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(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGridHeaderCell {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('tr');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.tsx

@@ -0,0 +1,72 @@
+import React, { ComponentPropsWithRef, Fragment } from 'react';
+import { Icon, Icons } from '../../Icon/Icon';
+import { ColumnName, Direction } from '../datagrid.interfaces';
+import classes from './DataGridHeaderCell.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'th'> {
+  headline: string;
+  name: ColumnName;
+  disableSorting?: boolean;
+  activeSortDirection?: Direction;
+  onSort?: (name: ColumnName) => void;
+}
+
+const ariaSortMapping = {
+  ASC: 'ascending',
+  DESC: 'descending',
+} as const;
+
+export const DataGridHeaderCell = React.forwardRef<HTMLTableCellElement, Props>(
+  ({ headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props, ref) => {
+    const onCellClick = () => {
+      onSort && onSort(name);
+    };
+
+    const sortingIndicator = () => {
+      const getSortingIndicatorClasses = (direction: Direction) => {
+        const sortingIndicatorClasses = [classes['indicator']];
+        activeSortDirection &&
+          sortingIndicatorClasses.push(
+            activeSortDirection === direction ? classes['active'] : classes['hidden']
+          );
+        return sortingIndicatorClasses;
+      };
+
+      return (
+        <Fragment>
+          <Icon className={getSortingIndicatorClasses('ASC').join(' ')} icon={Icons.TriangleUp} />
+          <Icon
+            className={getSortingIndicatorClasses('DESC').join(' ')}
+            icon={Icons.TriangleDown}
+          />
+        </Fragment>
+      );
+    };
+
+    const innerContent = (
+      <Fragment>
+        <span className={classes['headline']}>{headline}</span>
+        {!disableSorting && (
+          <div className={classes['sorting-indicator-container']}>{sortingIndicator()}</div>
+        )}
+      </Fragment>
+    );
+
+    return (
+      <th
+        {...rest}
+        ref={ref}
+        className={classes['header-cell']}
+        aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}
+      >
+        {disableSorting ? (
+          <div key={name}>{innerContent}</div>
+        ) : (
+          <button key={name} onClick={onCellClick}>
+            {innerContent}
+          </button>
+        )}
+      </th>
+    );
+  }
+);

package/src/DataGrid/datagrid.interfaces.ts

@@ -0,0 +1,14 @@
+export type ColumnName = string;
+export type Direction = 'ASC' | 'DESC';
+export type Sort = {
+  name: ColumnName;
+  direction: Direction;
+}[];
+export type OnSortFunction = (sort: Sort) => void;
+
+export interface HeaderCell {
+  name: ColumnName;
+  headline: string;
+  disableSorting?: boolean;
+  hidden?: boolean;
+}

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;