@onewelcome/react-lib-components 0.1.0-alpha

package/src/Form/FormControl/FormControl.tsx

@@ -0,0 +1,47 @@
+import React, { ReactElement } from 'react';
+import classes from './FormControl.module.scss';
+import { HTMLProps } from '../../interfaces';
+
+export interface Props extends HTMLProps<HTMLDivElement> {
+  children: ReactElement | ReactElement[];
+  grid?: 1 | 2 | 3;
+  align?: 'top' | 'start' | 'middle' | 'center' | 'bottom' | 'end' | 'stretch';
+}
+
+export const FormControl = ({
+  children,
+  disabled,
+  className,
+  grid,
+  align = 'center',
+  ...rest
+}: Props) => {
+  const renderChildren = () =>
+    React.Children.map(children, (child) => {
+      if (!child) {
+        return null;
+      }
+
+      const childElement = React.cloneElement(child, {
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
+      });
+
+      if (grid && grid > 1) {
+        return <div className={`${classes['col-' + grid]} ${classes.column}`}>{childElement}</div>;
+      }
+
+      return childElement;
+    });
+
+  return (
+    <div
+      {...rest}
+      data-formcontrol
+      className={`${classes['form-control']} ${className ? className : ''} ${
+        grid && grid > 1 ? `${classes.grid} ${classes['grid-' + grid]}` : ''
+      } ${classes[align]}`}
+    >
+      {renderChildren()}
+    </div>
+  );
+};

package/src/Form/FormGroup/FormGroup.module.scss

@@ -0,0 +1,29 @@
+.form-group {
+  position: relative;
+}
+
+.error {
+  color: var(--error);
+}
+
+.error-message {
+  display: flex;
+  align-items: flex-end;
+}
+
+.error-icon {
+  margin-right: 0.5rem;
+  font-size: 1.25rem;
+
+  &-before {
+    margin-right: 0.5rem;
+  }
+
+  &-after {
+    margin-left: 0.5rem;
+  }
+}
+
+.default-helper {
+  font-size: 0.75rem;
+}

package/src/Form/FormGroup/FormGroup.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { FormGroup, Props } from './FormGroup';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  children: 'Formcontent here',
+  helperId: 'helper_id',
+  helperText: 'example helper text',
+  errorMessage: 'example error message',
+  errorId: 'error_id',
+};
+
+const createFormGroup = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<FormGroup {...parameters} data-testid="formgroup"></FormGroup>);
+  const formgroup = queries.getByTestId('formgroup');
+
+  return {
+    ...queries,
+    formgroup,
+  };
+};
+
+describe('FormSelectorGroup should render', () => {
+  it('renders without crashing', () => {
+    const { formgroup } = createFormGroup();
+
+    expect(formgroup).toBeDefined();
+  });
+
+  it('has the correct values and attributes', () => {
+    const { getByTestId } = createFormGroup((defaultParams) => ({
+      ...defaultParams,
+      helperProps: { 'data-testid': 'helper_text' },
+    }));
+
+    const helperText = getByTestId('helper_text');
+
+    expect(helperText).toHaveAttribute('id', 'helper_id');
+    expect(helperText).toHaveTextContent('example helper text');
+  });
+});
+
+describe('Correct error state', () => {
+  it('has the correct state', () => {
+    const { formgroup } = createFormGroup((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+      errorMessage: 'example error message',
+      errorId: 'error_id',
+    }));
+    const errorMessage = formgroup.querySelector('.error-message');
+
+    expect(errorMessage).toBeTruthy();
+    expect(errorMessage?.querySelector('#error_id')).toBeTruthy();
+    expect(errorMessage?.querySelector('#error_id')).toHaveTextContent('example error message');
+  });
+});

package/src/Form/FormGroup/FormGroup.tsx

@@ -0,0 +1,78 @@
+/** The empty className property on FormHelperText is on purpose! We want to basically "filter" out the className from helperProps because we're adding this to the surrounding div. This makes it so also the errormessage receives this styling. */
+
+import React, { ReactChild } from 'react';
+import classes from './FormGroup.module.scss';
+import { FormHelperText, Props as HelperProps } from '../FormHelperText/FormHelperText';
+import { Icon, Icons } from '../../Icon/Icon';
+import { HTMLProps } from '../../interfaces';
+
+export interface Props extends HTMLProps<HTMLDivElement> {
+  children: ReactChild[] | ReactChild;
+  error?: boolean;
+  errorMessageIcon?: Icons;
+  errorMessageIconPosition?: 'before' | 'after';
+  errorMessage?: string;
+  errorId?: string;
+  helperIndent?: number;
+  helperText?: string;
+  helperId?: string;
+  helperProps?: HelperProps;
+}
+
+export const FormGroup = ({
+  children,
+  className,
+  error,
+  errorMessage,
+  errorId,
+  errorMessageIcon,
+  errorMessageIconPosition = 'before',
+  helperText,
+  helperId,
+  helperProps,
+  helperIndent,
+  ...rest
+}: Props) => {
+  return (
+    <div
+      {...rest}
+      className={`${classes['form-group']} ${error ? classes.error : ''} ${className ?? ''}`}
+    >
+      {children}
+
+      {(helperText || errorMessage) && (
+        <div
+          style={{ marginLeft: `${helperIndent}px` }}
+          className={`${classes['default-helper']} ${
+            helperProps?.className ? helperProps.className : ''
+          }`}
+        >
+          {helperText && !error && (
+            <FormHelperText {...helperProps} className={''} id={helperId}>
+              {helperText}
+            </FormHelperText>
+          )}
+          {error && errorMessage && (
+            <span className={classes['error-message']}>
+              <span className={classes.message} id={errorId}>
+                {errorMessageIcon && errorMessageIconPosition === 'before' && (
+                  <Icon
+                    className={`${classes['error-icon']} ${classes['error-icon-before']}`}
+                    icon={errorMessageIcon}
+                  />
+                )}
+                {errorMessage}
+                {errorMessageIcon && errorMessageIconPosition === 'after' && (
+                  <Icon
+                    className={`${classes['error-icon']} ${classes['error-icon-after']}`}
+                    icon={errorMessageIcon}
+                  />
+                )}
+              </span>
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Form/FormHelperText/FormHelperText.module.scss

@@ -0,0 +1,8 @@
+.form-helper-text {
+  margin: 0;
+  color: var(--greyed-out);
+}
+
+.error {
+  color: var(--error);
+}

package/src/Form/FormHelperText/FormHelperText.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FormHelperText, Props } from './FormHelperText';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  error: false,
+  children: 'This is a field description',
+};
+
+const createFormHelperText = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<FormHelperText {...parameters} data-testid="formhelpertext" />);
+  const formhelpertext = queries.getByTestId('formhelpertext');
+
+  return {
+    ...queries,
+    formhelpertext,
+  };
+};
+
+describe('FormHelperText should render', () => {
+  it('renders without crashing', () => {
+    const { formhelpertext } = createFormHelperText();
+
+    expect(formhelpertext).toBeTruthy();
+  });
+});
+
+describe('Attributes', () => {
+  it('contains the error class', () => {
+    const { formhelpertext } = createFormHelperText((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+    }));
+
+    expect(formhelpertext).toHaveClass('error');
+    expect(formhelpertext).toHaveStyle({ color: 'rgb(226, 42, 29);' });
+  });
+});

package/src/Form/FormHelperText/FormHelperText.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import classes from './FormHelperText.module.scss';
+import { HTMLProps } from '../../interfaces';
+import { Typography } from '../../Typography/Typography';
+
+export interface Props extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  error?: boolean;
+}
+
+export const FormHelperText = ({ children, error, className, ...rest }: Props) => {
+  return (
+    <Typography
+      {...rest}
+      variant="sub-text"
+      tag="div"
+      className={`${classes['form-helper-text']} ${error ? classes.error : ''} ${className ?? ''}`}
+    >
+      {children}
+    </Typography>
+  );
+};

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.module.scss

@@ -0,0 +1,33 @@
+.error {
+  color: var(--error);
+}
+
+.helper-text {
+  margin-top: 0.25rem;
+  margin-left: 1.75rem;
+}
+
+.error-message {
+  margin-top: 1.25rem;
+  display: flex;
+  align-items: flex-end;
+}
+
+.error-icon {
+  margin-right: 0.5rem;
+  font-size: 1.25rem;
+}
+
+.disabled {
+  input {
+    color: var(--disabled);
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  label {
+    cursor: not-allowed;
+  }
+}

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import { Icon, Icons } from '../../Icon/Icon';
+import { HTMLProps } from '../../interfaces';
+import { FormHelperText, Props as FormHelperTextProps } from '../FormHelperText/FormHelperText';
+import classes from './FormSelectorWrapper.module.scss';
+
+export interface Props extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  nestedChildren?: ReactNode;
+  containerProps: HTMLProps<HTMLDivElement>;
+  helperProps?: FormHelperTextProps;
+  error?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  errorMessage?: string;
+  parentHelperId?: string;
+  parentErrorId?: string;
+  errorId: string;
+  identifier: string;
+}
+
+export const FormSelectorWrapper = ({
+  children,
+  className,
+  nestedChildren,
+  containerProps,
+  helperProps,
+  error,
+  disabled,
+  helperText,
+  errorMessage,
+  parentErrorId,
+  errorId,
+  identifier,
+  ...rest
+}: Props) => {
+  return (
+    <div
+      {...rest}
+      className={`${error ? classes['error'] : ''} ${disabled ? classes['disabled'] : ''} ${
+        className ?? ''
+      }`}
+    >
+      <div {...containerProps}>{children}</div>
+      {helperText && (!error || parentErrorId || !errorMessage) && (
+        <FormHelperText
+          {...helperProps}
+          id={`${identifier}`}
+          className={`${classes['helper-text']} ${helperProps?.className ?? ''} ${
+            error ? classes['error'] : ''
+          }`}
+        >
+          {helperText}
+        </FormHelperText>
+      )}
+      {errorMessage && !parentErrorId && error && (
+        <span className={classes['error-message']}>
+          <Icon className={classes['error-icon']} icon={Icons.Warning} />
+          <span id={errorId}>{errorMessage}</span>
+        </span>
+      )}
+      {nestedChildren}
+    </div>
+  );
+};

package/src/Form/Input/Input.module.scss

@@ -0,0 +1,65 @@
+.input-wrapper {
+  position: relative;
+}
+
+.input {
+  height: 4rem;
+  padding: 0 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;
+  color: var(--greyed-out);
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  width: 100%;
+  box-sizing: border-box;
+
+  &:disabled {
+    color: var(--greyed-out);
+    background-color: var(--disabled);
+    border-color: #fff;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--default);
+  }
+
+  &:focus:not(:disabled) {
+    outline: none;
+    border-color: var(--color-primary);
+  }
+}
+
+.error {
+  border-color: var(--error);
+  color: var(--error);
+  padding-right: 3.75rem;
+
+  &.remove-extra-indent {
+    padding-right: 1.25rem;
+  }
+}
+
+.warning {
+  color: var(--error);
+  position: absolute;
+  height: 100%;
+  width: 1.25rem;
+  right: 1.25rem;
+  top: 0px;
+  font-size: 1.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:before {
+    height: 1.3125rem;
+  }
+
+  &.extra-indent {
+    right: 3.75rem;
+  }
+}

package/src/Form/Input/Input.test.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Input, Props } from './Input';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  name: 'input',
+  type: 'text',
+};
+
+const createInput = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Input {...parameters} data-testid="input" />);
+  const input = queries.getByTestId('input');
+
+  return {
+    ...queries,
+    input,
+  };
+};
+
+describe('Input should render', () => {
+  it('renders without crashing and has a name and type', () => {
+    const { input } = createInput();
+    expect(input).toBeTruthy();
+  });
+});
+
+describe('Should have the appropriate attributes', () => {
+  it('is disabled and has a class', () => {
+    const { input } = createInput((defaultParams) => ({
+      ...defaultParams,
+      disabled: true,
+      className: 'classname',
+    }));
+
+    expect(input).toHaveAttribute('disabled');
+    expect(input).toHaveClass('classname');
+  });
+});
+
+describe('Should render all different types of inputs', () => {
+  it('should render a text input', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'text' }));
+
+    expect(input).toHaveAttribute('type', 'text');
+  });
+
+  it('should render a email input', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'email' }));
+
+    expect(input).toHaveAttribute('type', 'email');
+  });
+
+  it('should render a tel input', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'tel' }));
+
+    expect(input).toHaveAttribute('type', 'tel');
+  });
+
+  it('should render a number input', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'number' }));
+
+    expect(input).toHaveAttribute('type', 'number');
+  });
+
+  it('should render a password input', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'password' }));
+
+    expect(input).toHaveAttribute('type', 'password');
+  });
+
+  it('should render a search input', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'search' }));
+
+    expect(input).toHaveAttribute('type', 'search');
+  });
+
+  it('should render a time input', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'time' }));
+
+    expect(input).toHaveAttribute('type', 'time');
+  });
+
+  it('should render a url input', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'url' }));
+
+    expect(input).toHaveAttribute('type', 'url');
+  });
+
+  it('should render a datetime input', () => {
+    const { input } = createInput((defaultParams) => ({
+      ...defaultParams,
+      type: 'datetime-local',
+    }));
+
+    expect(input).toHaveAttribute('type', 'datetime-local');
+  });
+
+  it('should be hidden', () => {
+    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'hidden' }));
+
+    expect(input.parentElement).toHaveClass('hidden');
+    expect(input).toHaveAttribute('type', 'hidden');
+  });
+});
+
+describe('It should execute the listeners', () => {
+  it('fires event handlers', () => {
+    const onChangeHandler = jest.fn();
+    const onKeyUpHandler = jest.fn();
+    const onKeyDownHandler = jest.fn();
+
+    const { input } = createInput((defaultParams) => ({
+      ...defaultParams,
+      type: 'text',
+      onKeyUp: onKeyUpHandler,
+      onKeyDown: onKeyDownHandler,
+      onChange: onChangeHandler,
+    }));
+
+    input.focus();
+
+    expect(input).toHaveFocus();
+
+    userEvent.keyboard('test');
+
+    expect(onKeyUpHandler).toHaveBeenCalled();
+    expect(onKeyDownHandler).toHaveBeenCalled();
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+});

package/src/Form/Input/Input.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import classes from './Input.module.scss';
+import readyclasses from '../../readyclasses.module.scss';
+import { Icon, Icons } from '../../Icon/Icon';
+import { HTMLProps } from '../../interfaces';
+
+const dateTypes = ['date', 'time', 'datetime-local'] as const;
+
+export type Type =
+  | 'text'
+  | 'email'
+  | 'file'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'url'
+  | 'hidden'
+  | typeof dateTypes[number];
+
+export interface Props extends HTMLProps<HTMLInputElement> {
+  wrapperProps?: HTMLProps<HTMLInputElement>;
+  labeledBy?: string;
+  type: Type;
+  error?: boolean;
+}
+
+export const Input = ({
+  error = false,
+  className,
+  name,
+  style,
+  wrapperProps,
+  type,
+  labeledBy,
+  ...rest
+}: Props) => {
+  useEffect(() => {
+    if (name === undefined) {
+      throw new Error("Please give your <Input /> component a 'name' attribute");
+    }
+  }, []);
+
+  const inputClassNames = [classes['input']];
+  error && inputClassNames.push(classes['error']);
+  (dateTypes as ReadonlyArray<string>).includes(type) &&
+    inputClassNames.push(classes['remove-extra-indent']);
+  className && inputClassNames.push(className);
+
+  const iconClassNames = [classes['warning']];
+  (dateTypes as ReadonlyArray<string>).includes(type) &&
+    iconClassNames.push(classes['extra-indent']);
+
+  return (
+    <div
+      {...wrapperProps}
+      style={{ ...style }}
+      className={`${classes['input-wrapper']} ${wrapperProps?.className ?? ''} ${
+        type === 'hidden' ? readyclasses['hidden'] : ''
+      }`}
+    >
+      <input
+        {...rest}
+        aria-labelledby={labeledBy}
+        type={type}
+        name={name}
+        className={inputClassNames.join(' ')}
+      />
+      {error && <Icon className={iconClassNames.join(' ')} icon={Icons.Warning} />}
+    </div>
+  );
+};

package/src/Form/Label/Label.module.scss

@@ -0,0 +1,5 @@
+.label {
+  cursor: text;
+  color: var(--greyed-out);
+  font-size: var(--font-size);
+}

package/src/Form/Label/Label.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Label } from './Label';
+import { render } from '@testing-library/react';
+
+describe('Label should render', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = render(
+      <Label htmlFor="input-name" data-testid="component">
+        Label
+      </Label>
+    );
+    const component = getByTestId('component');
+    expect(component).toBeDefined();
+  });
+
+  it('adds htmlFor attribute', () => {
+    const { getByTestId } = render(
+      <Label htmlFor="input-name" data-testid="component">
+        Label
+      </Label>
+    );
+
+    const component = getByTestId('component');
+    expect(component.getAttribute('for')).toBe('input-name');
+  });
+});