@onewelcome/react-lib-components 0.1.0-alpha

package/src/Form/Select/Select.tsx

@@ -0,0 +1,217 @@
+import classes from './Select.module.scss';
+
+import React, {
+  HTMLProps,
+  ReactElement,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Input } from '../Input/Input';
+import { Icon, Icons } from '../../Icon/Icon';
+import { FormElement } from '../form.interfaces';
+import { useBodyClick } from '../../hooks/useBodyClick';
+import { Position } from '../../hooks/usePosition';
+import { useScroll } from '../../hooks/useScroll';
+
+export interface Props extends FormElement<HTMLSelectElement> {
+  children: ReactElement[];
+  name?: string;
+  labeledBy?: string;
+  describedBy?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  className?: string;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
+  onClear?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+export const Select = ({
+  children,
+  name,
+  disabled = false,
+  labeledBy,
+  placeholder,
+  describedBy,
+  searchPlaceholder = 'Search item',
+  className,
+  error = false,
+  value = '',
+  onChange,
+  onClear,
+  ...rest
+}: Props) => {
+  const [expanded, setExpanded] = useState(false);
+  const [filter, setFilter] = useState('');
+  const [display, setDisplay] = useState('');
+  const [listPosition, setListPosition] = useState<Partial<Position>>({});
+  const containerReference = useRef<HTMLDivElement>(null);
+  const optionListReference = useRef<HTMLDivElement>(null);
+
+  useBodyClick(
+    (event: MouseEvent) => !(event.target as Element).closest('.custom-select') && expanded,
+    () => {
+      setExpanded(!expanded);
+    },
+    expanded
+  );
+
+  const rePositionList = () => {
+    if (!expanded || !optionListReference.current || !containerReference.current) {
+      return;
+    }
+    const windowHeight = window.innerHeight;
+    const containerTopWithListHeight =
+      containerReference.current.getBoundingClientRect().bottom -
+      containerReference.current.getBoundingClientRect().height +
+      optionListReference.current.getBoundingClientRect().height;
+
+    if (containerTopWithListHeight > windowHeight) {
+      setListPosition({ top: 'initial', bottom: 0 });
+    } else {
+      setListPosition({ top: 0, bottom: 'initial' });
+    }
+  };
+
+  useScroll(rePositionList, [expanded]);
+
+  useLayoutEffect(() => {
+    rePositionList();
+  }, [expanded]);
+
+  const onOptionChangeHandler = (child: ReactElement) => (event: React.ChangeEvent) => {
+    /**
+     * We expose this to the outside inside of the onChange function as a parameter along with an optional second
+     * parameter of the option that was clicked.
+     */
+
+    setDisplay(child.props.children);
+
+    let newValue;
+    let multiple = false; // Potential support for future multiple select. This should be a prop obviously.
+
+    if (multiple) {
+      /** We will implement the mulitple select in the next iteration */
+    } else {
+      newValue = child.props.value;
+    }
+
+    if (onChange) {
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // Clone the event to not override `target` of the original event.
+      // Don't know how to fix this any.. compiler whines that it can't construct it otherwise.
+      const nativeEvent: any = event.nativeEvent || event;
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+
+      Object.defineProperty(clonedEvent as React.ChangeEvent<HTMLSelectElement>, 'target', {
+        writable: true,
+        value: { value: newValue },
+      });
+
+      onChange(clonedEvent as React.ChangeEvent<HTMLSelectElement>, child);
+    }
+
+    setDisplay((event.currentTarget as HTMLElement).innerText);
+    setExpanded(false);
+  };
+
+  /**
+   * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected at all times and if a filter is active.
+   * The `children` prop can be either a single object (1 child) or an array of multiple children.
+   */
+  const renderOptions = () =>
+    React.Children.map(children, (child) =>
+      React.cloneElement(child, {
+        onOptionSelect: onOptionChangeHandler(child),
+        selected: child.props.value === value,
+        filter: filter,
+      })
+    );
+
+  const renderSearch = () => (
+    <Input
+      autoFocus
+      onChange={filterResults}
+      className={classes['select-search']}
+      wrapperProps={{ className: classes['select-search-wrapper'] }}
+      type="text"
+      name="search-option"
+      placeholder={searchPlaceholder}
+    />
+  );
+
+  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(event.currentTarget.value);
+  };
+
+  const statusIcon = () => {
+    if (error) {
+      return <Icon className={classes['warning']} icon={Icons.Warning} />;
+    }
+    if (value.length !== 0 && onClear) {
+      return <Icon tag="div" icon={Icons.TimesThin} onClick={onClear} />;
+    }
+    return null;
+  };
+
+  /** Set initial display value */
+  useEffect(() => {
+    for (let child of children) {
+      if (child.props.value === value) {
+        setDisplay(child.props.children);
+      }
+    }
+  }, []);
+
+  const additionalClasses = [];
+  expanded && additionalClasses.push(classes.expanded);
+  error && additionalClasses.push(classes.error);
+  disabled && additionalClasses.push(classes.disabled);
+
+  return (
+    <div
+      {...(rest as HTMLProps<HTMLDivElement>)}
+      ref={containerReference}
+      className={`custom-select ${classes.select} ${additionalClasses.join(' ')} ${
+        className ?? ''
+      }`}
+    >
+      <button
+        onClick={() => setExpanded(!expanded)}
+        type="button"
+        name={name}
+        disabled={disabled}
+        aria-disabled={disabled}
+        aria-invalid={error}
+        aria-expanded={expanded}
+        aria-haspopup="listbox"
+        aria-labelledby={labeledBy}
+        aria-describedby={describedBy}
+      >
+        <div data-display className={classes['selected']}>
+          {value.length === 0 && placeholder && (
+            <span className={classes['placeholder']}>{placeholder}</span>
+          )}
+          {value.length > 0 && <span>{display}</span>}
+        </div>
+        <div className={classes['status']}>
+          {statusIcon()}
+          <Icon className={classes['triangle-down']} icon={Icons.TriangleDown} />
+        </div>
+      </button>
+      <div
+        ref={optionListReference}
+        className={`list-wrapper ${classes['list-wrapper']}`}
+        style={{ display: expanded ? 'block' : 'none', ...listPosition }}
+      >
+        {Array.isArray(children) && children.length > 10 && renderSearch()}
+        <ul role="listbox" tabIndex={-1}>
+          {renderOptions()}
+        </ul>
+      </div>
+    </div>
+  );
+};

package/src/Form/Textarea/Textarea.module.scss

@@ -0,0 +1,53 @@
+.textarea-wrapper {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.textarea {
+  padding: 0.75rem 3.75rem 0.75rem 1.25rem;
+  border-color: var(--input-border-color);
+  border-style: var(--input-border-style);
+  border-width: var(--input-border-width);
+  border-radius: var(--input-border-radius);
+  transition: all 0.2s ease-in-out;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  width: 100%;
+  box-sizing: border-box;
+  vertical-align: top;
+  resize: vertical;
+
+  &:disabled {
+    color: var(--greyed-out);
+    background-color: var(--disabled);
+    border-color: #fff;
+    cursor: not-allowed;
+  }
+
+  &:active:not(:disabled) {
+    border-color: var(--color-primary);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--default);
+  }
+
+  &:focus:not(:disabled) {
+    border-color: var(--color-primary);
+    outline: none;
+  }
+}
+
+.error {
+  border-color: var(--error);
+  color: var(--error);
+}
+
+.warning {
+  color: var(--error);
+  position: absolute;
+  right: 1.25rem;
+  top: 0.75rem;
+  font-size: 1.25rem;
+}

package/src/Form/Textarea/Textarea.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Textarea, Props } from './Textarea';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const createTextarea = (params?: Props) => {
+  const queries = render(<Textarea data-testid="textarea" {...params} />);
+  const textarea = queries.getByRole('textbox');
+
+  return {
+    ...queries,
+    textarea,
+  };
+};
+
+describe('Textarea should render', () => {
+  it('renders without crashing', () => {
+    const { textarea } = createTextarea();
+    expect(textarea).toBeTruthy();
+  });
+});
+
+describe('Textarea properties', () => {
+  it('is disabled', () => {
+    const { textarea } = createTextarea({ disabled: true });
+
+    expect(textarea).toHaveAttribute('disabled');
+  });
+
+  it('has 20 columns', () => {
+    const { textarea } = createTextarea({ cols: 20 });
+
+    expect(textarea).toHaveAttribute('cols', '20');
+  });
+
+  it('has autofocus', () => {
+    const { textarea } = createTextarea({ autoFocus: true });
+
+    setTimeout(() => {
+      expect(textarea).toHaveAttribute('autofocus');
+    }, 0);
+  });
+});
+
+describe('Textarea listeners', () => {
+  it('executes the functions', () => {
+    const onChangeHandler = jest.fn();
+    const onKeyUpHandler = jest.fn();
+    const onKeyDownHandler = jest.fn();
+
+    const { textarea } = createTextarea({
+      onKeyUp: onKeyUpHandler,
+      onKeyDown: onKeyDownHandler,
+      onChange: onChangeHandler,
+    });
+
+    textarea.focus();
+
+    expect(textarea).toHaveFocus();
+
+    userEvent.keyboard('test');
+
+    expect(onKeyUpHandler).toHaveBeenCalled();
+    expect(onKeyDownHandler).toHaveBeenCalled();
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+});
+
+describe('Error status', () => {
+  it('has error class, and an icon', () => {
+    const { textarea } = createTextarea({ error: true });
+
+    expect(textarea).toHaveClass('error');
+    expect(textarea.nextElementSibling).toHaveClass('icon-warning');
+  });
+});

package/src/Form/Textarea/Textarea.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icon, Icons } from '../../Icon/Icon';
+import { FormElement } from '../form.interfaces';
+import classes from './Textarea.module.scss';
+
+export interface Props extends FormElement<HTMLTextAreaElement> {
+  wrapperClassName?: string;
+  errorClassName?: string;
+}
+
+export const Textarea = ({
+  error = false,
+  disabled = false,
+  className,
+  rows = 4,
+  wrapperClassName,
+  errorClassName,
+  ...rest
+}: Props) => {
+  return (
+    <div className={`${classes['textarea-wrapper']} ${wrapperClassName ? wrapperClassName : ''}`}>
+      <textarea
+        {...rest}
+        rows={rows}
+        className={`${error ? classes['error'] : ''} ${classes['textarea']} ${className ?? ''}`}
+        disabled={disabled}
+      />
+      {error && (
+        <Icon className={`${classes['warning']} ${errorClassName ?? ''}`} icon={Icons.Warning} />
+      )}
+    </div>
+  );
+};

package/src/Form/Toggle/Toggle.module.scss

@@ -0,0 +1,58 @@
+$borderRadius: 2.5rem;
+
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.toggle {
+  width: 2rem;
+  height: 1.25rem;
+  background-color: var(--default);
+  border-radius: $borderRadius;
+  position: relative;
+  transition: background-color 0.2s ease-in-out;
+  display: block;
+  pointer-events: none;
+
+  &:before {
+    content: '';
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    display: block;
+    background-color: #fff;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%) translateX(0);
+    left: 0.125rem;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  &.checked {
+    background-color: var(--color-primary);
+    &:before {
+      transform: translateY(-50%) translateX(calc(100% - 0.25rem));
+    }
+  }
+}
+
+.checkbox {
+  z-index: 10;
+  position: static;
+
+  input {
+    width: 2rem;
+  }
+
+  input ~ [data-icon][aria-hidden] {
+    display: none;
+  }
+
+  input:focus-visible {
+    + * {
+      border-radius: $borderRadius;
+    }
+  }
+}

package/src/Form/Toggle/Toggle.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Toggle } from './Toggle';
+import { render } from '@testing-library/react';
+
+describe('Toggle should render', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = render(
+      <Toggle name="toggle" data-testid="component">
+        Toggle
+      </Toggle>
+    );
+    const component = getByTestId('component');
+    expect(component).toBeDefined();
+  });
+});
+
+describe('Toggle attributes', () => {
+  it('should be checked', () => {
+    const { getByTestId } = render(
+      <Toggle checked={true} name="toggle" data-testid="component">
+        Toggle
+      </Toggle>
+    );
+
+    const component = getByTestId('component');
+
+    expect(component).toHaveAttribute('aria-checked', 'true');
+  });
+});

package/src/Form/Toggle/Toggle.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Checkbox, CheckboxProps } from '../Checkbox/Checkbox';
+import classes from './Toggle.module.scss';
+
+export interface Props
+  extends Omit<CheckboxProps, 'indeterminate' | 'errorMessage' | 'error' | 'children'> {
+  children: string;
+}
+
+export const Toggle = ({ children, checked, ...rest }: Props) => (
+  <div className={classes['toggle-wrapper']}>
+    <Checkbox {...rest} checked={checked} className={classes.checkbox} label={children}>
+      <span
+        data-toggle
+        aria-hidden="true"
+        className={`${classes.toggle} ${checked ? classes.checked : ''} `}
+      ></span>
+    </Checkbox>
+  </div>
+);

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.module.scss

@@ -0,0 +1,12 @@
+.checkbox-wrapper-helper {
+  margin-top: 1.25rem;
+}
+
+.checkbox-wrapper-error span {
+  font-size: 1rem;
+}
+
+.checkbox-wrapper-error [data-icon] {
+  font-size: 1.375rem;
+  vertical-align: bottom;
+}

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { CheckboxWrapper, Props } from './CheckboxWrapper';
+import { Checkbox, CheckboxProps } from '../../Checkbox/Checkbox';
+import { render } from '@testing-library/react';
+
+const defaultParentParams: CheckboxProps = {
+  indeterminate: false,
+  name: 'parentcheckbox',
+  label: 'testlabel',
+  children: [
+    <Checkbox checked={true} name="checkbox2">
+      Checkbox 2
+    </Checkbox>,
+    <Checkbox name="checkbox3">Checkbox 3</Checkbox>,
+  ],
+};
+
+const defaultParams: Props = {
+  onChange: jest.fn(),
+  errorMessage: 'This is an error',
+  error: false,
+  helperText: 'Helpertext',
+  name: 'Checkboxwrapper',
+  fieldsetProps: { title: 'Example title' },
+  label: 'Label',
+  children: [],
+};
+
+const createCheckboxWrapper = (
+  params?: (defaultParams: Props) => Props,
+  parentCheckboxParams?: (defaultParentParams: CheckboxProps) => CheckboxProps
+) => {
+  let parameters: Props = defaultParams;
+  let parentCheckboxParameters: CheckboxProps = defaultParentParams;
+
+  if (params) {
+    parameters = params(defaultParams);
+  }
+
+  if (parentCheckboxParams) {
+    parentCheckboxParameters = parentCheckboxParams(defaultParentParams);
+  }
+
+  const queries = render(
+    <CheckboxWrapper {...parameters} data-testid="checkboxwrapper">
+      <Checkbox data-testid="parentcheckbox" {...parentCheckboxParameters} />
+    </CheckboxWrapper>
+  );
+  const checkboxwrapper = queries.getByTestId('checkboxwrapper');
+  const parentcheckbox = queries.getByTestId('parentcheckbox');
+
+  return {
+    ...queries,
+    checkboxwrapper,
+    parentcheckbox,
+  };
+};
+
+describe('checkboxwrapper should render', () => {
+  it('renders without crashing', () => {
+    const { checkboxwrapper } = createCheckboxWrapper();
+    expect(checkboxwrapper).toBeTruthy();
+  });
+});
+
+describe('CheckboxWrapper should have an error', () => {
+  it('should have an error and the children checkboxes should have aria-describedby of the error message of the group.', () => {
+    const { checkboxwrapper } = createCheckboxWrapper((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+      errorMessage: 'This is an error',
+    }));
+
+    const checkboxes = checkboxwrapper?.querySelectorAll('.checkbox-container input');
+    const errorMessage = checkboxwrapper?.querySelector('.default-helper .error-message .message');
+
+    /** All of the children checkboxes should be described by the error message in the parent checkbox group. */
+    checkboxes?.forEach((box) => {
+      expect(box.getAttribute('aria-describedby')).toBe(errorMessage?.getAttribute('id'));
+    });
+
+    expect(checkboxes?.length).toBe(3);
+    expect(errorMessage).toHaveTextContent('This is an error');
+  });
+});
+
+describe('Parent checkbox attributes', () => {
+  it('is indeterminate, label is set', () => {
+    const { parentcheckbox, container } = createCheckboxWrapper(undefined, (defaultParams) => ({
+      ...defaultParams,
+      indeterminate: true,
+    }));
+
+    expect(parentcheckbox.getAttribute('aria-checked')).toBe('mixed');
+    expect(
+      container.querySelector(`label[for="${parentcheckbox.getAttribute('id')}"]`)
+    ).toHaveTextContent('testlabel');
+  });
+});

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

@@ -0,0 +1,62 @@
+import React, { ReactElement, useEffect } from 'react';
+import classes from './CheckboxWrapper.module.scss';
+import { useWrapper } from '../../../hooks/useWrapper';
+import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
+import { Icons } from '../../../Icon/Icon';
+import { Fieldset, Props as FieldsetProps } from '../../../Form/Fieldset/Fieldset';
+
+export interface Props extends WrapperProps {
+  children: ReactElement[] | ReactElement;
+  fieldsetProps: FieldsetProps;
+}
+
+export const CheckboxWrapper = ({
+  children,
+  error = false,
+  helperText,
+  helperProps,
+  fieldsetProps,
+  ...rest
+}: Props) => {
+  const { errorId, helperId } = useWrapper();
+
+  useEffect(() => {
+    if (fieldsetProps.title === 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" }})`
+      );
+    }
+  }, []);
+
+  const renderChildren = () =>
+    React.Children.map(children, (child) =>
+      React.cloneElement(child, {
+        parentErrorId: errorId,
+        error: error,
+        parentHelperId: helperText ? helperId : false,
+        disabled: rest.disabled,
+      })
+    );
+
+  return (
+    <Fieldset {...fieldsetProps}>
+      <Wrapper
+        {...rest}
+        label=""
+        helperId={helperId}
+        helperText={helperText}
+        helperProps={{
+          ...helperProps,
+          className: `${classes['checkbox-wrapper-helper']} ${
+            error ? classes['checkbox-wrapper-error'] : ''
+          } ${helperProps?.className ?? ''}`,
+        }}
+        error={error}
+        errorMessageIcon={Icons.Warning}
+        errorId={errorId}
+      >
+        {renderChildren()}
+      </Wrapper>
+    </Fieldset>
+  );
+};

package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -0,0 +1,24 @@
+.input-label {
+  left: calc(
+    1.25rem + 2px
+  ); // 2px is for offset of the textarea border. It's relative to the parent div which doesn't have a border.
+
+  &.focus {
+    color: var(--color-primary);
+  }
+}
+
+input {
+  &.floating-label {
+    padding-top: 0.625rem;
+  }
+}
+
+.input-wrapper-helper {
+  margin-top: 0.25rem;
+}
+
+.input-wrapper [data-icon]:before {
+  transform: translateY(5px);
+  font-size: 1.125rem;
+}