@onewelcome/react-lib-components 0.1.0-alpha

package/src/Form/Label/Label.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classes from './Label.module.scss';
+import readyclasses from '../../readyclasses.module.scss';
+import { HTMLProps } from '../../interfaces';
+
+export interface Props extends HTMLProps<HTMLLabelElement> {
+  children?: string;
+}
+
+export const Label = ({ children, className, hidden = false, ...rest }: Props) => {
+  return (
+    <label
+      {...rest}
+      className={`${hidden ? readyclasses['sr-only'] : ''} ${classes['label']} ${className ?? ''}`}
+    >
+      {children}
+    </label>
+  );
+};

package/src/Form/Radio/Radio.module.scss

@@ -0,0 +1,100 @@
+.radio-wrapper {
+  position: relative;
+
+  + .radio-wrapper {
+    margin-top: 1.25rem;
+  }
+}
+
+.error {
+  color: var(--error);
+}
+
+.helper-text {
+  margin-top: 0.25rem;
+  margin-left: 1.75rem;
+}
+
+.error-message {
+  margin-top: 1.25rem;
+  display: flex;
+  align-items: bottom;
+}
+
+.error-icon {
+  margin-right: 0.5rem;
+  font-size: 1.25rem;
+}
+
+.radio-container {
+  display: flex;
+  align-items: center;
+
+  label {
+    display: inline-block;
+    margin-left: 0.5rem;
+    user-select: none;
+    font-size: var(--font-size);
+
+    .disabled & {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.radio-list {
+  padding: 0;
+  margin: 1.25rem 0 0 1.75rem;
+  list-style: none;
+
+  li + li {
+    margin-top: 1.75rem;
+  }
+}
+
+.native-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  margin: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+
+  &:not(.error):not(:disabled):focus,
+  &:not(.error):not(:disabled):active {
+    + * {
+      color: var(--color-primary);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    + * {
+      border-radius: 2px;
+      outline: 1px solid var(--color-primary);
+      outline-offset: 1px;
+    }
+  }
+
+  &.error:focus-visible {
+    + * {
+      outline-color: var(--color-error);
+    }
+  }
+}
+
+.input {
+  font-size: 1.25rem;
+  pointer-events: none;
+  width: 1.25rem;
+  height: 1.25rem;
+
+  /** The & behind disabled means parent selector (so in reality this means .disabled .input) */
+  .disabled & {
+    color: var(--disabled);
+  }
+}

package/src/Form/Radio/Radio.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Radio, Props } from './Radio';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const onChangeHandeler = jest.fn();
+
+const defaultParams: Props = {
+  value: 'test',
+  children: 'Label',
+  checked: false,
+  error: false,
+  errorMessage: 'errormessage',
+  disabled: false,
+  wrapperProps: { 'data-testid': 'radiowrapper' },
+  helperText: 'helpertext',
+  onChange: onChangeHandeler,
+};
+
+const createRadio = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Radio {...parameters} data-testid="radio" />);
+  const radio = queries.getByTestId('radio');
+  const radiowrapper = queries.getByTestId('radiowrapper');
+
+  return {
+    ...queries,
+    radio,
+    radiowrapper,
+  };
+};
+
+describe('Radio should render', () => {
+  it('renders without crashing and has proper attributes/values', () => {
+    const { radio } = createRadio();
+
+    expect((radio as HTMLInputElement).value).toBe('test');
+    expect((radio as HTMLInputElement).checked).toBe(false);
+    expect(radio).toBeTruthy();
+  });
+
+  it('it is checked', () => {
+    const { radio } = createRadio((defaultParams) => ({ ...defaultParams, checked: true }));
+
+    expect((radio as HTMLInputElement).checked).toBe(true);
+  });
+
+  it('it is disabled', () => {
+    const { radio, radiowrapper } = createRadio((defaultParams) => ({
+      ...defaultParams,
+      disabled: true,
+    }));
+
+    expect((radio as HTMLInputElement).disabled).toBe(true);
+    expect(radiowrapper).toHaveClass('disabled');
+  });
+
+  it('has the correct describedby value when theres no error', async () => {
+    const { radio, findByText } = createRadio((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+    }));
+
+    const error = await findByText('errormessage');
+
+    expect(radio).toHaveAttribute('aria-describedby', error.id);
+  });
+});
+
+describe('Radio should be interactive', () => {
+  it('should call onChange when clicked', () => {
+    const { radio } = createRadio();
+
+    expect(onChangeHandeler).not.toBeCalled();
+    userEvent.click(radio);
+    expect(onChangeHandeler).toBeCalledTimes(1);
+  });
+
+  it('should not call onChange when disabled', () => {
+    const { radio } = createRadio((defaultParams) => ({ ...defaultParams, disabled: true }));
+
+    userEvent.click(radio);
+    expect(onChangeHandeler).not.toBeCalled();
+  });
+});

package/src/Form/Radio/Radio.tsx

@@ -0,0 +1,98 @@
+import React 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';
+
+export interface Props extends FormSelector<HTMLInputElement> {
+  children: string;
+  value: string;
+  wrapperProps?: HTMLProps<HTMLDivElement>;
+  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,
+  });
+
+  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 },
+    });
+
+    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}
+        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} />}
+
+      <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
+        {children}
+      </label>
+    </FormSelectorWrapper>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Option } from './Option';
+import { render } from '@testing-library/react';
+
+describe('Option should render', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = render(
+      <Option value="option" data-testid="component">
+        Option
+      </Option>
+    );
+    const component = getByTestId('component');
+    expect(component).toBeDefined();
+  });
+});

package/src/Form/Select/Option.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import classes from './Select.module.scss';
+import { HTMLProps } from '../../interfaces';
+
+export interface Props extends HTMLProps<HTMLLIElement> {
+  children: string;
+  value: string;
+  disabled?: boolean;
+  selected?: boolean;
+  label?: string;
+  filter?: string;
+  onOptionSelect?: (event: React.SyntheticEvent<HTMLLIElement>) => void;
+}
+
+export const Option = ({
+  children,
+  className,
+  selected = false,
+  onOptionSelect,
+  disabled,
+  filter,
+  ...rest
+}: Props) => {
+  const [showOption, setShowOption] = useState(true);
+
+  const onSelectHandler = (event: React.SyntheticEvent<HTMLLIElement>) => {
+    if (onOptionSelect) onOptionSelect(event);
+  };
+
+  useEffect(() => {
+    if (filter) {
+      setShowOption(children.toLowerCase().match(filter.toLowerCase()) !== null);
+    } else {
+      setShowOption(true);
+    }
+  }, [filter]);
+
+  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>
+  );
+};

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

@@ -0,0 +1,189 @@
+@import '../../readyclasses.module.scss';
+
+$listItemHeight: 2.125rem;
+
+.select {
+  border-color: var(--input-border-color);
+  border-style: var(--input-border-style);
+  border-width: var(--input-border-width);
+  border-radius: var(--input-border-radius);
+  position: relative;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  background-color: #fff;
+  font-size: var(--font-size);
+
+  &.expanded {
+    border: var(--input-border-width) solid transparent;
+
+    .list-wrapper {
+      background: #fff;
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &:not(.expanded) {
+    button:focus-visible {
+      outline: 1px solid var(--color-primary);
+    }
+  }
+
+  &:hover:not(.disabled):not(.expanded) {
+    border-color: var(--default);
+  }
+
+  button {
+    width: 100%;
+    min-height: 4rem;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    padding: 0 1.25rem;
+    position: relative;
+    font-size: var(--font-size);
+    border-radius: var(--input-border-radius);
+
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+
+  .list-wrapper {
+    border-color: var(--input-border-color);
+    border-style: var(--input-border-style);
+    border-width: var(--input-border-width);
+    border-radius: var(--input-border-radius);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.29);
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  ul {
+    box-sizing: border-box;
+    padding: 0.25rem 0;
+    width: 100%;
+    margin: 0;
+    list-style: none;
+    background-color: #fff;
+    border-radius: var(--input-border-radius);
+    color: var(--default);
+    text-align: left;
+    overflow: auto;
+    max-height: calc($listItemHeight * 10);
+
+    li {
+      padding: 0.5rem 1rem;
+      font-size: var(--font-size);
+      margin: 0;
+      position: relative;
+      line-height: 1;
+      cursor: pointer;
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        opacity: 0.05;
+      }
+
+      &:focus-visible {
+        outline: 1px solid var(--color-primary);
+        outline-offset: -1px;
+      }
+
+      &:hover:after {
+        background-color: var(--color-primary);
+      }
+
+      &.disabled {
+        color: var(--greyed-out);
+        background-color: var(--disabled);
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.selected-option {
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--color-primary);
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+  }
+}
+
+.selected {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 1.25rem;
+  pointer-events: none;
+}
+
+.status {
+  position: absolute;
+  top: 50%;
+  right: 1.625rem;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+
+  .warning {
+    color: var(--error);
+    font-size: 1.25rem;
+  }
+
+  .triangle-down {
+    color: var(--default);
+    font-size: 0.625rem;
+  }
+
+  * + * {
+    margin-left: 1.25rem;
+  }
+}
+
+.placeholder {
+  color: var(--greyed-out);
+}
+
+.error {
+  border-color: var(--error);
+  color: var(--error);
+}
+
+.select-search-wrapper + ul {
+  border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
+}
+
+.select-search {
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.disabled {
+  cursor: not-allowed;
+  color: var(--greyed-out);
+  background-color: var(--disabled);
+
+  > * {
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,96 @@
+import React, { ReactElement } from 'react';
+import { Select, 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');
+
+  if (button) {
+    userEvent.click(button);
+  }
+
+  const list = select.querySelector('ul[role="listbox"]');
+  const dropdownWrapper = select.querySelector('.list-wrapper');
+
+  return {
+    ...queries,
+    select,
+    button,
+    list,
+    dropdownWrapper,
+  };
+};
+
+describe('Select should render', () => {
+  it('renders with 5 options and proper attributes', () => {
+    const { select, button, list } = createSelect(5);
+
+    expect(select).toBeDefined();
+    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);
+  });
+});
+
+describe('Select should render with search', () => {
+  it('shows the search and filtering works', () => {
+    const { select, list, dropdownWrapper } = createSelect(20);
+
+    const search = dropdownWrapper?.querySelector('input');
+
+    expect(select).toBeTruthy();
+    expect(search).toBeTruthy();
+    expect(list?.querySelectorAll("li[role='option']").length).toBe(20);
+
+    if (search) {
+      userEvent.type(search, '19');
+    }
+
+    expect(list?.querySelectorAll("li[role='option']").length).toBe(1);
+    expect(list?.querySelector("li[role='option']")?.innerHTML).toBe('Option19');
+  });
+});
+
+describe('Selecting options using keyboard', () => {
+  it('should focus through list items and select on enterpress', () => {
+    const { select, list } = createSelect(7);
+
+    userEvent.tab();
+    expect(list?.querySelectorAll('li')[0]).toHaveFocus();
+    userEvent.tab();
+    expect(list?.querySelectorAll('li')[1]).toHaveFocus();
+    userEvent.tab();
+    expect(list?.querySelectorAll('li')[2]).toHaveFocus();
+    userEvent.tab();
+    expect(list?.querySelectorAll('li')[3]).toHaveFocus();
+    userEvent.tab();
+    expect(list?.querySelectorAll('li')[4]).toHaveFocus();
+    userEvent.tab();
+    expect(list?.querySelectorAll('li')[5]).toHaveFocus();
+
+    userEvent.keyboard('{enter}');
+
+    setTimeout(() => {
+      expect(select.querySelector('button > span > span')?.innerHTML).toBe('Option5');
+    }, 50);
+  });
+});