@onewelcome/react-lib-components 0.1.0-alpha

package/src/Form/Checkbox/Checkbox.module.scss

@@ -0,0 +1,65 @@
+.checkbox-wrapper {
+  position: relative;
+
+  + .checkbox-wrapper {
+    margin-top: 1.25rem;
+  }
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+
+  label {
+    display: inline-block;
+    margin-left: 0.5rem;
+    user-select: none;
+    font-size: var(--font-size);
+  }
+}
+
+.checkbox-list {
+  padding: 0;
+  margin: 1.25rem 0 0 1.75rem;
+  list-style: none;
+
+  li + li {
+    margin-top: 1.25rem;
+  }
+}
+
+.native-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  margin: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+
+  &:not(.error):not(:disabled):focus,
+  &:not(.error):not(:disabled):active {
+    + * {
+      color: var(--color-primary);
+    }
+  }
+
+  &: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;
+}

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Checkbox, CheckboxProps as Props } from './Checkbox';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const onChangeHandeler = jest.fn();
+
+const defaultParams: Props = {
+  name: 'Testing',
+  children: 'checkbox content',
+  helperText: 'example helper',
+  onChange: onChangeHandeler,
+};
+
+const createCheckbox = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Checkbox {...parameters} data-testid="checkbox" />);
+  const checkbox = queries.getByTestId('checkbox');
+
+  return {
+    ...queries,
+    checkbox,
+  };
+};
+
+describe('Checkbox should render', () => {
+  it('renders without crashing', () => {
+    const { checkbox } = createCheckbox();
+    expect(checkbox).toBeTruthy();
+  });
+});
+
+describe('Checkbox should have proper attributes', () => {
+  it('should be unchecked', () => {
+    const { checkbox } = createCheckbox();
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('should be checked', () => {
+    const { checkbox } = createCheckbox((defaultParams) => ({ ...defaultParams, checked: true }));
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('should call the onChange function', () => {
+    const onChangeHandler = jest.fn();
+    const { checkbox } = createCheckbox((defaultParams) => ({
+      ...defaultParams,
+      onChange: onChangeHandler,
+    }));
+    userEvent.click(checkbox);
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+
+  it('should be disabled', () => {
+    const { checkbox } = createCheckbox((defaultParams) => ({ ...defaultParams, disabled: true }));
+
+    expect(checkbox).toHaveAttribute('disabled');
+  });
+
+  it('should have helpertext rendered', () => {
+    const { getByText } = createCheckbox();
+
+    const helperText = getByText('example helper');
+
+    expect(helperText).toBeTruthy();
+  });
+
+  it('should have the error state enabled', () => {
+    const { checkbox, container, getByTestId } = createCheckbox((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+      errorMessage: 'This is an error',
+      wrapperProps: { 'data-testid': 'checkbox-wrapper' },
+    }));
+
+    expect(checkbox).toHaveAttribute(
+      'aria-describedby',
+      container.querySelector('.error-message span:last-of-type')!.id
+    );
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+    expect(getByTestId('checkbox-wrapper')).toHaveClass('error');
+  });
+
+  it('should have a correctly linked label element', () => {
+    const { checkbox, container } = createCheckbox((defaultParams) => ({
+      ...defaultParams,
+      children: 'Label',
+    }));
+
+    const id = checkbox.getAttribute('id');
+    const label = container.querySelector(`label[for=${id}]`);
+
+    expect(label).toBeTruthy();
+    expect(label).toHaveTextContent('Label');
+  });
+});
+
+describe('Checkbox should be interactive', () => {
+  it('should call onChange when clicked', () => {
+    const { checkbox } = createCheckbox();
+
+    expect(onChangeHandeler).not.toBeCalled();
+    userEvent.click(checkbox);
+    expect(onChangeHandeler).toBeCalledTimes(1);
+  });
+
+  it('should not call onChange when disabled', () => {
+    const { checkbox } = createCheckbox((defaultParams) => ({ ...defaultParams, disabled: true }));
+
+    userEvent.click(checkbox);
+    expect(onChangeHandeler).not.toBeCalled();
+  });
+});

package/src/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,145 @@
+import React, { ReactElement, ReactNode, useEffect } from 'react';
+import { Icon, Icons } from '../../Icon/Icon';
+import { Props as FormHelperTextProps } from '../FormHelperText/FormHelperText';
+import classes from './Checkbox.module.scss';
+import { useFormSelector } from '../../hooks/useFormSelector';
+import { FormSelector } from '../form.interfaces';
+import { HTMLProps } from '../../interfaces';
+import { FormSelectorWrapper } from '../FormSelectorWrapper/FormSelectorWrapper';
+
+const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.['data-toggle'];
+
+export interface CheckboxProps extends FormSelector<HTMLInputElement> {
+  children: ReactNode;
+  label?: string;
+  indeterminate?: boolean;
+  helperProps?: FormHelperTextProps;
+  wrapperProps?: HTMLProps<HTMLDivElement>;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Checkbox = ({
+  children,
+  name,
+  helperText,
+  helperProps,
+  indeterminate,
+  parentErrorId,
+  errorMessage,
+  disabled,
+  label,
+  parentHelperId,
+  className,
+  error,
+  checked = false,
+  wrapperProps,
+  onChange,
+  ...rest
+}: CheckboxProps) => {
+  const { errorId, identifier, describedBy } = useFormSelector({
+    name,
+    helperText,
+    parentErrorId,
+    errorMessage,
+    error,
+    parentHelperId,
+  });
+
+  useEffect(() => {
+    if (!name) {
+      console.error("Please pass a 'name' prop to your <Checkbox> component.");
+    }
+
+    if (typeof children === 'object' && !isToggle(children) && indeterminate === undefined) {
+      throw new Error(
+        'If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.'
+      );
+    }
+  }, []);
+
+  const determineLabel = () => {
+    if (label) {
+      return label;
+    } else if (children === undefined) {
+      throw new Error(
+        'Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.'
+      );
+    }
+
+    if (typeof children === 'string') {
+      return children;
+    }
+
+    throw new Error(
+      'If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.'
+    );
+  };
+
+  const renderNestedCheckboxes = () => (
+    <ul className={classes['checkbox-list']}>
+      {React.Children.map(children as ReactElement[], (child) => {
+        return (
+          <li>
+            <Checkbox
+              {...child.props}
+              parentHelperId={parentHelperId}
+              parentErrorId={parentErrorId}
+              error={error}
+            >
+              {child.props.children}
+            </Checkbox>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return;
+    }
+    onChange && onChange(event);
+  };
+
+  const renderToggle = () => React.Children.toArray(children).filter(isToggle);
+
+  /** Default return value is the default checkbox */
+  return (
+    <FormSelectorWrapper
+      {...wrapperProps}
+      className={`${classes['checkbox-wrapper']} ${className ? className : ''}`}
+      containerProps={{ className: classes['checkbox-container'] }}
+      helperText={helperText}
+      helperProps={helperProps}
+      parentErrorId={parentErrorId}
+      errorId={errorId}
+      errorMessage={errorMessage}
+      error={error}
+      disabled={disabled}
+      identifier={identifier}
+      nestedChildren={
+        typeof children === 'object' && !isToggle(children) && renderNestedCheckboxes()
+      }
+    >
+      <input
+        {...rest}
+        disabled={disabled}
+        className={`${classes['native-input']} ${error ? classes['error'] : ''}`}
+        checked={checked}
+        onChange={onChangeHandler}
+        aria-invalid={error as boolean}
+        aria-checked={indeterminate ? 'mixed' : checked}
+        aria-describedby={describedBy}
+        id={`${identifier}-checkbox`}
+        name={name}
+        type="checkbox"
+      />
+      {renderToggle()}
+
+      {indeterminate && <Icon className={classes.input} icon={Icons.MinusSquare} />}
+      {checked && !indeterminate && <Icon className={classes.input} icon={Icons.CheckmarkSquare} />}
+      {!checked && !indeterminate && <Icon className={classes.input} icon={Icons.Square} />}
+      <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
+    </FormSelectorWrapper>
+  );
+};

package/src/Form/Fieldset/Fieldset.module.scss

@@ -0,0 +1,19 @@
+.fieldset {
+  border: 0;
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  margin: 0;
+
+  &.no-padding {
+    padding: 0;
+  }
+
+  + .wrapper,
+  + .fieldset {
+    margin-top: 1rem;
+  }
+
+  .title {
+    display: block;
+  }
+}

package/src/Form/Fieldset/Fieldset.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Fieldset, Props } from './Fieldset';
+import { render } from '@testing-library/react';
+import { FormControl } from '../FormControl/FormControl';
+import { Input } from '../Input/Input';
+import { Select } from '../Select/Select';
+import { Option } from '../Select/Option';
+
+const defaultParams: Props = {
+  title: 'Example',
+  titleVariant: 'h2',
+  children: [
+    <FormControl data-testid="form-control">
+      <Input placeholder="This is a placeholder" name="example" type="text" />
+    </FormControl>,
+    <FormControl data-testid="form-control">
+      <Select value="placeholder" onChange={jest.fn}>
+        <Option value="option1">Option1</Option>
+        <Option value="option2">Option2</Option>
+        <Option value="option3">Option3</Option>
+      </Select>
+    </FormControl>,
+  ],
+};
+
+const createFieldset = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Fieldset {...parameters} data-testid="fieldset" />);
+  const fieldset = queries.getByTestId('fieldset');
+
+  return {
+    ...queries,
+    fieldset,
+  };
+};
+
+describe('Fieldset should render', () => {
+  it('renders without crashing', () => {
+    const { fieldset } = createFieldset();
+
+    expect(fieldset).toBeTruthy();
+  });
+});
+
+describe('Fieldset should get proper attributes and classes', () => {
+  it('has no padding class', () => {
+    const { fieldset } = createFieldset((defaultParams) => ({ ...defaultParams, noPadding: true }));
+
+    expect(fieldset).toHaveClass('no-padding');
+  });
+
+  it('has no background styling', () => {
+    const { fieldset } = createFieldset((defaultParams) => ({
+      ...defaultParams,
+      noBackground: true,
+    }));
+
+    expect(fieldset.style.backgroundColor).toBe('');
+  });
+
+  it('has a correct legend and title <span> element', () => {
+    const { getByText } = createFieldset();
+
+    const legend = getByText(/example/i, { selector: 'legend' });
+    const title = getByText(/example/i, { selector: 'span' });
+
+    expect(legend).toHaveTextContent('Example');
+    expect(legend).toBeTruthy();
+    expect(title).toHaveClass('typography_style_h2');
+    expect(title).toBeTruthy();
+    expect(title).toHaveTextContent('Example');
+  });
+
+  it('renders its children correctly', () => {
+    const { getAllByTestId } = createFieldset();
+
+    const formcontrols = getAllByTestId('form-control');
+
+    expect(formcontrols).toBeTruthy();
+    expect(formcontrols).toHaveLength(2);
+  });
+});

package/src/Form/Fieldset/Fieldset.tsx

@@ -0,0 +1,55 @@
+import React, { ReactElement } from 'react';
+import readyclasses from '../../readyclasses.module.scss';
+import classes from './Fieldset.module.scss';
+import { HTMLProps } from '../../interfaces';
+import { Typography, Variant } from '../../Typography/Typography';
+
+export interface Props extends HTMLProps<HTMLFieldSetElement> {
+  children?: ReactElement | ReactElement[];
+  title: string;
+  titleVariant?: Variant;
+  hideTitle?: boolean;
+  background?: string;
+  noPadding?: boolean;
+  noBackground?: boolean;
+}
+
+export const Fieldset = ({
+  children,
+  className,
+  title,
+  titleVariant = 'body',
+  hideTitle = false,
+  noBackground,
+  background = noBackground ? '' : '#FFF',
+  noPadding = false,
+  disabled = false,
+  ...rest
+}: Props) => {
+  const renderChildren = () => {
+    if (!children) return;
+
+    return React.Children.map(children, (child: ReactElement) =>
+      React.cloneElement(child, {
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
+      })
+    );
+  };
+
+  return (
+    <fieldset
+      {...rest}
+      disabled={disabled}
+      style={{ backgroundColor: background, ...rest.style }}
+      className={`${classes.fieldset} ${noPadding ? classes['no-padding'] : ''} ${className ?? ''}`}
+    >
+      {title && <legend className={readyclasses['sr-only']}>{title}</legend>}
+      {title && !hideTitle && (
+        <Typography variant={titleVariant} tag="span" aria-hidden="true" className={classes.title}>
+          {title}
+        </Typography>
+      )}
+      {renderChildren()}
+    </fieldset>
+  );
+};

package/src/Form/Form.module.scss

@@ -0,0 +1,3 @@
+.form {
+  font-family: var(--font-family);
+}

package/src/Form/Form.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form } from './Form';
+import { render } from '@testing-library/react';
+import { Button } from '../Button/Button';
+import userEvent from '@testing-library/user-event';
+
+describe('Form should render', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = render(<Form data-testid="component">Content</Form>);
+    const component = getByTestId('component');
+    expect(component).toBeDefined();
+  });
+});
+
+describe('Event should fire', () => {
+  it('should fire the onSubmitHandler function', () => {
+    const onSubmitHandler = jest.fn();
+
+    onSubmitHandler.mockImplementation((event) => {
+      event.preventDefault();
+    });
+
+    const { getByTestId } = render(
+      <Form onSubmit={onSubmitHandler}>
+        <Button data-testid="submit-button" type="submit"></Button>
+      </Form>
+    );
+
+    const button = getByTestId('submit-button');
+    userEvent.click(button);
+    expect(onSubmitHandler).toHaveBeenCalled();
+  });
+});
+
+describe('Should be able to set some default form properties', () => {
+  const { getByTestId } = render(
+    <Form data-testid="form" method="POST" action="./test.php">
+      Test
+    </Form>
+  );
+
+  const form = getByTestId('form');
+
+  expect(form.getAttribute('method')).toBe('POST');
+  expect(form.getAttribute('action')).toBe('./test.php');
+  expect(form.innerHTML).toBe('Test');
+});

package/src/Form/Form.tsx

@@ -0,0 +1,14 @@
+import React, { HTMLProps, ReactNode } from 'react';
+import classes from './Form.module.scss';
+
+export interface Props extends HTMLProps<HTMLFormElement> {
+  children?: ReactNode;
+}
+
+export const Form = ({ children, className, ...rest }: Props) => {
+  return (
+    <form className={`${classes.form} ${className ?? ''}`} {...rest}>
+      {children}
+    </form>
+  );
+};

package/src/Form/FormControl/FormControl.module.scss

@@ -0,0 +1,67 @@
+.form-control {
+  + .form-control {
+    margin-top: 1rem;
+  }
+
+  &.grid {
+    display: flex;
+    flex-wrap: wrap;
+
+    &.center,
+    &.middle {
+      align-items: center;
+    }
+
+    &.start,
+    &.top {
+      align-items: flex-start;
+    }
+
+    &.end,
+    &.bottom {
+      align-items: flex-end;
+    }
+
+    &.stretch {
+      align-items: stretch;
+
+      > * > * {
+        box-sizing: border-box;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.column {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.grid-2 {
+  .column:nth-child(even) {
+    margin-left: 1rem;
+  }
+
+  .column:nth-child(n + 3) {
+    margin-top: 1rem;
+  }
+}
+
+.grid-3 {
+  .column:not(:nth-child(3n + 1)) {
+    margin-left: 1rem;
+  }
+
+  .column:nth-child(n + 4) {
+    margin-top: 1rem;
+  }
+}
+
+.col-2 {
+  flex-basis: calc(calc(100% - 1rem) / 2);
+}
+
+.col-3 {
+  flex-basis: calc(calc(100% - 2rem) / 3);
+}

package/src/Form/FormControl/FormControl.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { FormControl, Props } from './FormControl';
+import { render } from '@testing-library/react';
+import { Input } from '../Input/Input';
+
+const defaultParams: Props = {
+  grid: 3,
+  align: 'center',
+  children: [
+    <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />,
+    <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />,
+    <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />,
+  ],
+};
+
+const createFormControl = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<FormControl {...parameters} data-testid="formcontrol" />);
+  const formcontrol = queries.getByTestId('formcontrol');
+
+  return {
+    ...queries,
+    formcontrol,
+  };
+};
+
+describe('FormControl should render', () => {
+  it('renders without crashing', () => {
+    const { formcontrol } = createFormControl();
+
+    expect(formcontrol).toBeTruthy();
+  });
+});
+
+describe('FormControl attributes should be working correctly', () => {
+  it('has the right classes and attributes', () => {
+    const { formcontrol } = createFormControl();
+
+    expect(formcontrol).toHaveClass('grid');
+    expect(formcontrol.firstChild).toHaveClass('col-3');
+  });
+});
+
+describe('FormControl children should render properly', () => {
+  it('renders children', () => {
+    const { getAllByTestId } = createFormControl();
+
+    const inputs = getAllByTestId('input');
+
+    expect(inputs).toBeTruthy();
+    expect(inputs).toHaveLength(3);
+  });
+});