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

package/src/Form/Radio/Radio.tsx

@@ -1,98 +1,116 @@
-import React from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import { Icon, Icons } from '../../Icon/Icon';
 import { Props as HelperProps } from '../FormHelperText/FormHelperText';
 import classes from './Radio.module.scss';
 import { useFormSelector } from '../../hooks/useFormSelector';
 import { FormSelector } from '../form.interfaces';
-import { HTMLProps } from '../../interfaces';
-import { FormSelectorWrapper } from '../FormSelectorWrapper/FormSelectorWrapper';
+import {
+  FormSelectorWrapper,
+  Props as FormSelectorWrapperProps,
+} from '../FormSelectorWrapper/FormSelectorWrapper';
 
-export interface Props extends FormSelector<HTMLInputElement> {
+export interface Props extends ComponentPropsWithRef<'input'>, FormSelector {
   children: string;
   value: string;
-  wrapperProps?: HTMLProps<HTMLDivElement>;
+  formSelectorWrapperProps?: FormSelectorWrapperProps;
   helperProps?: HelperProps;
 }
 
-export const Radio = ({
-  children,
-  disabled,
-  className,
-  value,
-  name,
-  helperText,
-  parentErrorId,
-  parentHelperId,
-  error,
-  errorMessage,
-  checked = false,
-  wrapperProps,
-  helperProps,
-  onChange,
-  ...rest
-}: Props) => {
-  const { errorId, identifier, describedBy } = useFormSelector({
-    name,
-    helperText,
-    parentErrorId,
-    errorMessage,
-    error,
-    parentHelperId,
-  });
+export const Radio = React.forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      children,
+      disabled,
+      className,
+      value,
+      name,
+      helperText,
+      parentErrorId,
+      parentHelperId,
+      error,
+      errorMessage,
+      checked = false,
+      formSelectorWrapperProps,
+      helperProps,
+      onChange,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const { errorId, identifier, describedBy } = useFormSelector({
+      name,
+      helperText,
+      parentErrorId,
+      errorMessage,
+      error,
+      parentHelperId,
+    });
 
-  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
-    if (disabled) {
-      return;
-    }
-    /** We have to clone the native event we got here and change the "target" property to the value. Otherwise, this regular event has "on" as it's event.target.value, which is useless. */
-    const nativeEvent: any = event.nativeEvent || event;
-    const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+    const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
+      if (disabled) {
+        return;
+      }
+      /** We have to clone the native event we got here and change the "target" property to the value. Otherwise, this regular event has "on" as it's event.target.value, which is useless. */
+      const nativeEvent: any = event.nativeEvent || event;
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
 
-    Object.defineProperty(clonedEvent, 'target', {
-      writable: true,
-      value: { value: value },
-    });
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: { value: value },
+      });
 
-    onChange && onChange(clonedEvent);
-  };
+      onChange && onChange(clonedEvent);
+    };
 
-  /** Default return value is the default radio */
-  return (
-    <FormSelectorWrapper
-      {...wrapperProps}
-      className={`${classes['radio-wrapper']} ${className ?? ''}`}
-      containerProps={{ className: classes['radio-container'] }}
-      helperText={helperText}
-      helperProps={helperProps}
-      parentErrorId={parentErrorId}
-      errorId={errorId}
-      errorMessage={errorMessage}
-      error={error}
-      disabled={disabled}
-      identifier={identifier}
-    >
-      <input
-        {...rest}
+    /** Default return value is the default radio */
+    return (
+      <FormSelectorWrapper
+        {...formSelectorWrapperProps}
+        className={`${classes['radio-wrapper']} ${className ?? ''}`}
+        containerProps={{ className: classes['radio-container'] }}
+        helperText={helperText}
+        helperProps={helperProps}
+        parentErrorId={parentErrorId}
+        errorId={errorId}
+        errorMessage={errorMessage}
+        error={error}
         disabled={disabled}
-        tabIndex={0}
-        className={`${classes['native-input']} ${error ? classes['error'] : ''}`}
-        onChange={onChangeHandler}
-        checked={checked}
-        aria-invalid={error ? true : false}
-        aria-checked={checked}
-        aria-describedby={describedBy}
-        name={name}
-        value={value}
-        id={`${identifier}-radio`}
-        type="radio"
-      />
+        identifier={identifier}
+      >
+        <input
+          {...rest}
+          ref={ref}
+          disabled={disabled}
+          tabIndex={0}
+          className={`${classes['native-input']} ${error ? classes['error'] : ''}`}
+          onChange={onChangeHandler}
+          checked={checked}
+          aria-invalid={error ? true : false}
+          aria-checked={checked}
+          aria-describedby={describedBy}
+          name={name}
+          value={value}
+          id={`${identifier}-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}
-      </label>
-    </FormSelectorWrapper>
-  );
-};
+        <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
+          {children}
+        </label>
+      </FormSelectorWrapper>
+    );
+  }
+);

package/src/Form/Select/Option.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Option } from './Option';
 import { render } from '@testing-library/react';
 
@@ -13,3 +13,29 @@ describe('Option should render', () => {
     expect(component).toBeDefined();
   });
 });
+
+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 <Option value="test" children="Test" data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Form/Select/Option.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { ComponentPropsWithRef, useEffect, useState } from 'react';
 import classes from './Select.module.scss';
-import { HTMLProps } from '../../interfaces';
 
-export interface Props extends HTMLProps<HTMLLIElement> {
+export interface Props extends ComponentPropsWithRef<'li'> {
   children: string;
   value: string;
   disabled?: boolean;
@@ -12,46 +11,54 @@ export interface Props extends HTMLProps<HTMLLIElement> {
   onOptionSelect?: (event: React.SyntheticEvent<HTMLLIElement>) => void;
 }
 
-export const Option = ({
-  children,
-  className,
-  selected = false,
-  onOptionSelect,
-  disabled,
-  filter,
-  ...rest
-}: Props) => {
-  const [showOption, setShowOption] = useState(true);
+export const Option = React.forwardRef<HTMLLIElement, Props>(
+  (
+    {
+      children,
+      className,
+      selected = false,
+      onOptionSelect,
+      disabled,
+      filter,
+      value,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const [showOption, setShowOption] = useState(true);
 
-  const onSelectHandler = (event: React.SyntheticEvent<HTMLLIElement>) => {
-    if (onOptionSelect) onOptionSelect(event);
-  };
+    const onSelectHandler = (event: React.SyntheticEvent<HTMLLIElement>) => {
+      if (onOptionSelect) onOptionSelect(event);
+    };
 
-  useEffect(() => {
-    if (filter) {
-      setShowOption(children.toLowerCase().match(filter.toLowerCase()) !== null);
-    } else {
-      setShowOption(true);
-    }
-  }, [filter]);
+    useEffect(() => {
+      if (filter) {
+        setShowOption(children.toLowerCase().match(filter.toLowerCase()) !== null);
+      } else {
+        setShowOption(true);
+      }
+    }, [filter]);
 
-  if (!showOption) return null;
+    if (!showOption) return null;
 
-  return (
-    <li
-      {...rest}
-      className={`${selected ? classes['selected-option'] : ''} ${
-        disabled ? classes.disabled : ''
-      } ${className ?? ''}`}
-      onClick={onSelectHandler}
-      onKeyPress={(e) => {
-        e.key === 'Enter' && onSelectHandler(e);
-      }}
-      aria-selected={selected}
-      role="option"
-      tabIndex={disabled ? -1 : 0}
-    >
-      {children}
-    </li>
-  );
-};
+    return (
+      <li
+        {...rest}
+        ref={ref}
+        data-value={value}
+        className={`${selected ? classes['selected-option'] : ''} ${
+          disabled ? classes.disabled : ''
+        } ${className ?? ''}`}
+        onClick={onSelectHandler}
+        onKeyPress={(e) => {
+          e.key === 'Enter' && onSelectHandler(e);
+        }}
+        aria-selected={selected}
+        role="option"
+        tabIndex={disabled ? -1 : 0}
+      >
+        {children}
+      </li>
+    );
+  }
+);

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

@@ -13,6 +13,10 @@ $listItemHeight: 2.125rem;
   background-color: #fff;
   font-size: var(--font-size);
 
+  [data-display] {
+    color: var(--greyed-out);
+  }
+
   &.expanded {
     border: var(--input-border-width) solid transparent;
 
@@ -62,6 +66,7 @@ $listItemHeight: 2.125rem;
     width: 100%;
     opacity: 0;
     pointer-events: none;
+    overflow: auto;
   }
 
   ul {
@@ -74,7 +79,6 @@ $listItemHeight: 2.125rem;
     border-radius: var(--input-border-radius);
     color: var(--default);
     text-align: left;
-    overflow: auto;
     max-height: calc($listItemHeight * 10);
 
     li {

package/src/Form/Select/Select.test.tsx

@@ -1,32 +1,41 @@
-import React, { ReactElement } from 'react';
-import { Select, Props } from './Select';
+import React, { useEffect, useRef } from 'react';
+import { Select as SelectComponent, Props } from './Select';
 import { render } from '@testing-library/react';
 import { Option } from './Option';
 import userEvent from '@testing-library/user-event';
 
-const createSelect = (amountOfOptions = 5, params?: Props) => {
-  const renderOptions = (amount: number): ReactElement[] => {
-    const returnArr: ReactElement[] = [];
-
-    for (let i = 0; i < amount; i++) {
-      returnArr.push(<Option key={i} value={`option${i}`}>{`Option${i}`}</Option>);
-    }
-
-    return returnArr;
-  };
-
-  const queries = render(
-    <Select onChange={jest.fn()} {...params} data-testid="custom-select">
-      {renderOptions(amountOfOptions)}
-    </Select>
-  );
-  const select = queries.getByTestId('custom-select')!;
-  const button = select.querySelector('button');
+const defaultParams: Props = {
+  name: 'Example select',
+  children: [
+    <Option value="option1">Test</Option>,
+    <Option value="option2">Test2</Option>,
+    <Option value="option3">Test3</Option>,
+    <Option value="option4">Test4</Option>,
+    <Option value="option5">Test5</Option>,
+    <Option value="option6">Test6</Option>,
+    <Option value="option7">Test7</Option>,
+    <Option value="option8">Test8</Option>,
+    <Option value="option9">Test9</Option>,
+    <Option value="option10">Test10</Option>,
+    <Option value="option11">Test11</Option>,
+    <Option value="option12">Test12</Option>,
+    <Option value="option13">Test13</Option>,
+    <Option value="option14">Test14</Option>,
+    <Option value="option15">Test15</Option>,
+    <Option value="option16">Test16</Option>,
+    <Option value="option17">Test17</Option>,
+  ],
+  value: '',
+};
 
-  if (button) {
-    userEvent.click(button);
+const createSelect = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
   }
-
+  const queries = render(<SelectComponent {...parameters} data-testid="select" />);
+  const select = queries.getByTestId('select');
+  const button = select.querySelector('button');
   const list = select.querySelector('ul[role="listbox"]');
   const dropdownWrapper = select.querySelector('.list-wrapper');
 
@@ -41,39 +50,112 @@ const createSelect = (amountOfOptions = 5, params?: Props) => {
 
 describe('Select should render', () => {
   it('renders with 5 options and proper attributes', () => {
-    const { select, button, list } = createSelect(5);
+    const { select, button, list } = createSelect((defaultParams) => ({
+      ...defaultParams,
+      children: [
+        <Option value="option1">Test</Option>,
+        <Option value="option2">Test2</Option>,
+        <Option value="option3">Test3</Option>,
+        <Option value="option4">Test4</Option>,
+        <Option value="option5">Test5</Option>,
+      ],
+      placeholder: 'Placeholder',
+    }));
+
+    if (button) {
+      userEvent.click(button);
+    }
 
     expect(select).toBeDefined();
+    expect(select.querySelector('.placeholder')).toBeInTheDocument();
     expect(button?.getAttribute('aria-expanded')).toBe('true');
     expect(button?.getAttribute('aria-disabled')).toBe('false');
     expect(list).toBeDefined();
     expect(list?.querySelectorAll("li[role='option']").length).toBe(5);
   });
+
+  it('should be disabled', () => {
+    const { select, button } = createSelect((defaultParams) => ({
+      ...defaultParams,
+      disabled: true,
+    }));
+
+    expect(select).toHaveClass('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button).toHaveAttribute('disabled');
+  });
+
+  it('should have an error', () => {
+    const { select, button } = createSelect((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+      value: 'option4',
+    }));
+
+    expect(select).toHaveClass('error');
+    expect(button).toHaveAttribute('aria-invalid', 'true');
+    expect(select.querySelector('[data-clear]')).not.toBeInTheDocument();
+  });
+});
+
+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 <SelectComponent {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current!.nodeName).toBe('SELECT');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
 });
 
 describe('Select should render with search', () => {
   it('shows the search and filtering works', () => {
-    const { select, list, dropdownWrapper } = createSelect(20);
+    const { select, list, button, dropdownWrapper } = createSelect();
+
+    if (button) {
+      userEvent.click(button);
+    }
 
     const search = dropdownWrapper?.querySelector('input');
 
     expect(select).toBeTruthy();
     expect(search).toBeTruthy();
-    expect(list?.querySelectorAll("li[role='option']").length).toBe(20);
+    expect(list?.querySelectorAll("li[role='option']").length).toBe(17);
 
     if (search) {
-      userEvent.type(search, '19');
+      userEvent.type(search, '17');
     }
 
     expect(list?.querySelectorAll("li[role='option']").length).toBe(1);
-    expect(list?.querySelector("li[role='option']")?.innerHTML).toBe('Option19');
+    expect(list?.querySelector("li[role='option']")?.innerHTML).toBe('Test17');
   });
 });
 
 describe('Selecting options using keyboard', () => {
   it('should focus through list items and select on enterpress', () => {
-    const { select, list } = createSelect(7);
+    const { select, button, list } = createSelect();
 
+    if (button) {
+      userEvent.click(button);
+    }
+
+    userEvent.tab();
     userEvent.tab();
     expect(list?.querySelectorAll('li')[0]).toHaveFocus();
     userEvent.tab();
@@ -90,7 +172,119 @@ describe('Selecting options using keyboard', () => {
     userEvent.keyboard('{enter}');
 
     setTimeout(() => {
-      expect(select.querySelector('button > span > span')?.innerHTML).toBe('Option5');
+      expect(select.querySelector('button > span > span')?.innerHTML).toBe('Test5');
     }, 50);
   });
 });
+
+describe('Expanded should be false whenever we click the body', () => {
+  it('closes select on body click', () => {
+    const { button } = createSelect();
+
+    if (button) {
+      userEvent.click(button);
+    }
+
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    userEvent.click(document.body);
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+});
+
+describe('List expansion', () => {
+  it('should expand upwards', () => {
+    const { select, button } = createSelect();
+
+    Object.defineProperty(window, 'innerHeight', { value: 500, writable: true });
+
+    select.getBoundingClientRect = () => ({
+      x: 50,
+      y: 50,
+      width: 500,
+      height: 50,
+      top: 250,
+      left: 250,
+      right: 750,
+      bottom: 750,
+      toJSON: () => jest.fn(),
+    });
+
+    if (button) {
+      userEvent.click(button);
+    }
+
+    const listWrapper = select.querySelector('.list-wrapper');
+
+    expect(listWrapper).toHaveStyle({ bottom: '0px' });
+  });
+
+  it('should expand downwards with a max height set', () => {
+    const { select, getByRole } = createSelect();
+    const listWrapper = select.querySelector('.list-wrapper');
+
+    listWrapper!.getBoundingClientRect = () => ({
+      x: 50,
+      y: 50,
+      width: 500,
+      height: 600,
+      top: 10,
+      left: 250,
+      right: 750,
+      bottom: 50,
+      toJSON: () => jest.fn(),
+    });
+
+    Object.defineProperty(window, 'innerHeight', { value: 500, writable: true });
+
+    select.getBoundingClientRect = () => ({
+      x: 50,
+      y: 50,
+      width: 500,
+      height: 40,
+      top: 10,
+      left: 250,
+      right: 750,
+      bottom: 50,
+      toJSON: () => jest.fn(),
+    });
+
+    userEvent.click(document.body);
+    const button = getByRole('button');
+    userEvent.click(button);
+
+    expect(listWrapper).toHaveStyle({ maxHeight: '474px' });
+    expect(listWrapper).toHaveStyle({ top: '0px' });
+  });
+});
+
+describe('onClear method', () => {
+  it('should show a cross and fire the passed onClear function', async () => {
+    const onClearHandler = jest.fn();
+    const onChangeHandler = jest.fn();
+
+    const { button, container } = createSelect((defaultParams) => ({
+      ...defaultParams,
+      onClear: onClearHandler,
+      onChange: onChangeHandler,
+      value: 'option4',
+    }));
+
+    if (button) {
+      userEvent.click(button);
+    }
+
+    const optionToClick = container.querySelector('li[data-value="option5"]')!;
+    const onClearButton = container.querySelector('[data-clear]')!;
+
+    userEvent.click(optionToClick);
+    userEvent.click(onClearButton);
+
+    expect(onClearHandler).toHaveBeenCalled();
+    expect(onClearButton).toBeInTheDocument();
+    expect(container.querySelector('li[aria-selected="true"]')).toHaveTextContent('Test4');
+    expect(container.querySelector('.selected-option')).toHaveTextContent('Test4');
+    expect(onChangeHandler).toBeCalledWith(
+      expect.objectContaining({ target: expect.objectContaining({ value: 'option5' }) })
+    );
+  });
+});