@onewelcome/react-lib-components 0.1.0-alpha

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { InputWrapper, Props } from './InputWrapper';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  label: 'Example label',
+  type: 'text',
+  name: 'Example input',
+  helperText: 'this is helpertext',
+  errorMessage: 'This is an error',
+  error: false,
+  value: 'value',
+  onChange: jest.fn(),
+};
+
+const createInputWrapper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<InputWrapper {...parameters} data-testid="inputwrapper" />);
+  const inputwrapper = queries.getByTestId('inputwrapper');
+
+  return {
+    ...queries,
+    inputwrapper,
+  };
+};
+
+describe('InputWrapper should render', () => {
+  it('renders without crashing', () => {
+    const { inputwrapper } = createInputWrapper();
+
+    expect(inputwrapper).toBeTruthy();
+  });
+
+  it('has helpertext', () => {
+    const { getByTestId } = createInputWrapper((defaultParams) => ({
+      ...defaultParams,
+      helperProps: { 'data-testid': 'helper_text' },
+    }));
+
+    const helperText = getByTestId('helper_text');
+
+    expect(helperText).toBeTruthy();
+  });
+
+  it('is described by the helpertext', () => {
+    const { getByTestId } = createInputWrapper((defaultParams) => ({
+      ...defaultParams,
+      inputProps: { 'data-testid': 'input' },
+      helperProps: { 'data-testid': 'helper_text' },
+    }));
+
+    const input = getByTestId('input');
+    const helperId = getByTestId('helper_text').getAttribute('id');
+
+    expect(input).toHaveAttribute('aria-describedby', helperId);
+  });
+});
+
+describe('InputWrapper should be interactive', () => {
+  it('executes the eventlisteners', () => {
+    const onFocusHandler = jest.fn();
+    const onChangeHandler = jest.fn();
+    const onBlurHandler = jest.fn();
+
+    const { getByTestId } = createInputWrapper((defaultParams) => ({
+      ...defaultParams,
+      inputProps: {
+        'data-testid': 'input',
+      },
+      onChange: onChangeHandler,
+      onFocus: onFocusHandler,
+      onBlur: onBlurHandler,
+      value: '',
+    }));
+
+    const input = getByTestId('input');
+
+    userEvent.tab();
+    userEvent.keyboard('test');
+
+    expect(input).toHaveFocus();
+    expect(onChangeHandler).toHaveBeenCalled();
+    expect(onFocusHandler).toHaveBeenCalled();
+
+    userEvent.tab();
+
+    expect(onBlurHandler).toHaveBeenCalled();
+  });
+});

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Input, Type, Props as InputProps } from '../../Input/Input';
+import classes from './InputWrapper.module.scss';
+import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
+import { useWrapper } from '../../../hooks/useWrapper';
+
+interface OptionalInputProps extends Omit<InputProps, 'type'> {}
+
+export interface Props extends WrapperProps {
+  label: string;
+  type: Type;
+  name: string;
+  inputProps?: OptionalInputProps;
+  value: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+export const InputWrapper = ({
+  type,
+  name,
+  inputProps,
+  helperText,
+  helperProps,
+  value,
+  error,
+  onChange,
+  onBlur,
+  onFocus,
+  ...rest
+}: Props) => {
+  const {
+    errorId,
+    floatingLabelActive,
+    setFloatingLabelActive,
+    hasFocus,
+    setHasFocus,
+    helperId,
+    labelId,
+  } = useWrapper(value, inputProps?.placeholder, type);
+
+  return (
+    <Wrapper
+      {...rest}
+      name={name}
+      className={classes['input-wrapper']}
+      labelProps={{
+        id: labelId,
+        className: `${classes['input-label']} ${hasFocus ? classes['focus'] : ''}`,
+      }}
+      floatingLabelActive={floatingLabelActive}
+      errorId={errorId}
+      error={error}
+      helperId={helperId}
+      helperText={helperText}
+      helperProps={{
+        ...helperProps,
+        className: `${classes['input-wrapper-helper']} ${helperProps?.className ?? ''} `,
+      }}
+      helperIndent={20}
+    >
+      <Input
+        {...inputProps}
+        aria-labelledby={labelId}
+        aria-describedby={error ? errorId : helperId}
+        onChange={onChange}
+        onFocus={(e) => {
+          onFocus && onFocus(e);
+          setHasFocus(true);
+          setFloatingLabelActive(true);
+        }}
+        onBlur={(e) => {
+          onBlur && onBlur(e);
+          setHasFocus(false);
+          e.target.value ||
+          inputProps?.placeholder?.length ||
+          type === 'datetime-local' ||
+          type === 'time'
+            ? setFloatingLabelActive(true)
+            : setFloatingLabelActive(false);
+        }}
+        className={floatingLabelActive ? classes['floating-label'] : ''}
+        name={name}
+        error={error}
+        id={name}
+        value={value}
+        type={type}
+      />
+    </Wrapper>
+  );
+};

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

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

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { RadioWrapper, Props } from './RadioWrapper';
+import { Radio } from '../../Radio/Radio';
+import { render } from '@testing-library/react';
+
+const onChangeHandler = jest.fn();
+const checkedOptionValue = 'option1';
+
+const defaultParams: Props = {
+  label: 'Label',
+  errorMessage: 'Error message',
+  helperText: 'Helper text',
+  error: false,
+  onChange: onChangeHandler,
+  fieldsetProps: { title: 'Example title' },
+  value: checkedOptionValue,
+  name: 'my-group',
+  children: [
+    <Radio helperText="This is helpertext" value="option1">
+      Option 1
+    </Radio>,
+    <Radio value="option2">Option 2</Radio>,
+    <Radio value="option3">Option 3</Radio>,
+  ],
+};
+
+const createRadioWrapper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<RadioWrapper {...parameters} data-testid="radiowrapper" />);
+  const radiowrapper = queries.getByTestId('radiowrapper');
+
+  return {
+    ...queries,
+    radiowrapper,
+  };
+};
+
+describe('RadioWrapper should render', () => {
+  it('renders without crashing', () => {
+    const { radiowrapper } = createRadioWrapper();
+
+    expect(radiowrapper).toBeTruthy();
+  });
+
+  it('has option 1 properly linked with aria-describedby to its helpertext', () => {
+    const { radiowrapper } = createRadioWrapper();
+
+    const option1RadioWrapper = radiowrapper
+      ?.querySelector('input[value="option1"]')
+      ?.closest('.radio-wrapper');
+    const option1 = radiowrapper?.querySelector('input[value="option1"]');
+    const option1helper = option1RadioWrapper?.querySelector('.helper-text');
+
+    if (option1helper && option1) {
+      expect(`${option1helper.getAttribute('id')}-radio`).toBe(`${option1.getAttribute('id')}`);
+      expect(option1).toHaveAccessibleDescription();
+      expect(option1).toHaveAttribute('aria-describedby', option1helper.getAttribute('id'));
+    }
+  });
+
+  it("has all option's aria-describedby linked with the error message ID", () => {
+    const { radiowrapper } = createRadioWrapper((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+      errorMessage: 'This is an error message',
+    }));
+
+    const errorMessage = radiowrapper?.querySelector('.error-message .message');
+    const option1 = radiowrapper?.querySelector('input[value="option1"]');
+
+    expect(errorMessage).toBeTruthy();
+    if (errorMessage) {
+      expect(option1).toHaveAttribute('aria-describedby', errorMessage.id);
+    }
+  });
+});
+
+describe('RadioWrapper selection', () => {
+  it('has option 2 selected, the rest is unselected', () => {
+    const { radiowrapper } = createRadioWrapper((defaultParams) => ({
+      ...defaultParams,
+      value: 'option2',
+    }));
+
+    expect(radiowrapper?.querySelector('input[value="option1"]')).toHaveAttribute(
+      'aria-checked',
+      'false'
+    );
+    expect(radiowrapper?.querySelector('input[value="option2"]')).toHaveAttribute(
+      'aria-checked',
+      'true'
+    );
+    expect(radiowrapper?.querySelector('input[value="option3"]')).toHaveAttribute(
+      'aria-checked',
+      'false'
+    );
+  });
+});

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -0,0 +1,74 @@
+import React, { ReactElement, useEffect } from 'react';
+import classes from './RadioWrapper.module.scss';
+import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
+import { useWrapper } from '../../../hooks/useWrapper';
+import { Icons } from '../../../Icon/Icon';
+import { Fieldset, Props as FieldsetProps } from '../../../Form/Fieldset/Fieldset';
+
+export interface Props extends WrapperProps {
+  children: ReactElement | ReactElement[];
+  fieldsetProps: FieldsetProps;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const RadioWrapper = ({
+  children,
+  error,
+  name,
+  helperText,
+  helperProps,
+  fieldsetProps,
+  value,
+  onChange,
+  disabled,
+  ...rest
+}: Props) => {
+  const { errorId, helperId } = useWrapper(value);
+
+  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 RadioWrapper. 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,
+        checked: child.props.value === value,
+        name: name,
+        parentHelperId: helperText ? helperId : false,
+        onChange: onChange,
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
+      })
+    );
+
+  return (
+    <Fieldset {...fieldsetProps}>
+      <Wrapper
+        {...rest}
+        disabled={disabled}
+        name={name}
+        label=""
+        helperId={helperId}
+        helperText={helperText}
+        helperProps={{
+          ...helperProps,
+          className: `${classes['radio-wrapper-helper']} ${
+            error ? classes['radio-wrapper-error'] : ''
+          } ${helperProps?.className ?? ''}`,
+        }}
+        error={error}
+        errorId={errorId}
+        errorMessageIcon={Icons.Warning}
+        floatingLabel={false}
+      >
+        {renderChildren()}
+      </Wrapper>
+    </Fieldset>
+  );
+};

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

@@ -0,0 +1,14 @@
+.select-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.
+}
+
+.select-helper-text {
+  margin-top: 0.25rem;
+  margin-left: 1.25rem;
+}
+
+.floating-label-active [data-display] {
+  top: calc(50% + 0.5rem);
+}

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { SelectWrapper, Props } from './SelectWrapper';
+import { render } from '@testing-library/react';
+import { Option } from '../../Select/Option';
+import userEvent from '@testing-library/user-event';
+
+const onChangeHandler = jest.fn();
+
+const defaultParams: Props = {
+  children: [
+    <Option key="1" value="option1">
+      Option 1
+    </Option>,
+    <Option key="2" value="option2">
+      Option 2
+    </Option>,
+    <Option key="3" value="option3">
+      Option 3
+    </Option>,
+    <Option key="4" value="option4">
+      Option 4
+    </Option>,
+  ],
+  label: 'select_label',
+  name: 'select',
+  helperText: 'helpertext',
+  helperProps: { 'data-testid': 'helpertext' },
+  errorMessage: 'errormessage',
+  error: false,
+  value: 'option1',
+  onChange: onChangeHandler,
+};
+
+const createSelectWrapper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<SelectWrapper {...parameters} data-testid="selectwrapper" />);
+  const selectwrapper = queries.getByTestId('selectwrapper');
+  const select = selectwrapper.querySelector('button');
+
+  return {
+    ...queries,
+    selectwrapper,
+    select,
+  };
+};
+
+describe('SelectWrapper should render', () => {
+  it('renders without crashing', () => {
+    const { selectwrapper } = createSelectWrapper();
+
+    expect(selectwrapper).toBeDefined();
+  });
+});
+
+describe('SelectWrapper & Select have the right attributes', () => {
+  it('select has aria values', async () => {
+    const { select, getByTestId, findByText } = createSelectWrapper();
+
+    const helpertext = getByTestId('helpertext');
+    const label = await findByText('select_label');
+
+    expect(select).toHaveAttribute('aria-describedby', helpertext.id);
+    expect(select).toHaveAttribute('aria-labelledby', label.id);
+  });
+
+  it('SelectWrapper has the right helpertext', () => {
+    const { getByTestId } = createSelectWrapper();
+
+    const helpertext = getByTestId('helpertext');
+
+    expect(helpertext).toBeTruthy();
+    expect(helpertext).toHaveTextContent('helpertext');
+  });
+
+  it('SelectWrapper has the right errormessage', async () => {
+    const { findByText, select } = createSelectWrapper((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+    }));
+
+    const errorMessage = await findByText('errormessage');
+
+    expect(errorMessage).toBeTruthy();
+    expect(select).toHaveAttribute('aria-describedby', errorMessage.id);
+  });
+
+  it('Fires the onChange event', async () => {
+    const { select, findByText } = createSelectWrapper();
+
+    userEvent.click(select as Element);
+
+    const option3 = await findByText('Option 3');
+
+    userEvent.click(option3 as Element);
+
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+});

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -0,0 +1,59 @@
+import React, { ReactChild, ReactElement } from 'react';
+import classes from './SelectWrapper.module.scss';
+import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
+import { Select, Props as SelectProps } from '../../Select/Select';
+import { useWrapper } from '../../../hooks/useWrapper';
+
+export interface Props extends Omit<WrapperProps, 'onChange'> {
+  children: ReactChild | ReactChild[];
+  placeholder?: string;
+  value: string;
+  selectProps?: SelectProps;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  onClear?: () => void;
+}
+
+export const SelectWrapper = ({
+  children,
+  error,
+  value,
+  placeholder,
+  selectProps,
+  helperProps,
+  onChange,
+  onClear,
+  ...rest
+}: Props) => {
+  const { errorId, floatingLabelActive, helperId, labelId } = useWrapper(value, placeholder);
+
+  return (
+    <Wrapper
+      {...rest}
+      floatingLabelActive={floatingLabelActive}
+      errorId={errorId}
+      helperId={helperId}
+      labelProps={{ id: labelId, className: classes['select-label'] }}
+      helperProps={{
+        ...helperProps,
+        className: `${classes['select-helper-text']} ${helperProps?.className ?? ''}`,
+      }}
+      error={error}
+    >
+      <Select
+        {...selectProps}
+        value={value}
+        labeledBy={labelId}
+        error={error}
+        describedBy={error ? errorId : helperId}
+        onChange={onChange}
+        onClear={onClear}
+        placeholder={placeholder}
+        className={`${floatingLabelActive ? classes['floating-label-active'] : ''} ${
+          selectProps?.className ?? ''
+        }`}
+      >
+        {children as ReactElement[]}
+      </Select>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,65 @@
+.textarea-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);
+  }
+}
+
+.textarea {
+  border: 0;
+  padding-top: 0;
+  padding-right: 0;
+
+  &:active:not(:disabled) {
+    border-color: white;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: white;
+  }
+
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+}
+
+.textarea-helper-text {
+  margin-top: 0.25rem;
+  margin-left: 1.25rem;
+}
+
+.textarea-wrapper {
+  padding-top: 1.75rem;
+  padding-right: 3.75rem;
+  padding-bottom: 0.75rem;
+  border-color: var(--input-border-color);
+  border-style: var(--input-border-style);
+  border-width: var(--input-border-width);
+  border-radius: var(--input-border-radius);
+
+  &.error {
+    border-color: var(--error);
+  }
+
+  &.hover {
+    border-color: var(--default);
+  }
+
+  &.focus {
+    border-color: var(--color-primary);
+  }
+
+  &.disabled {
+    color: var(--greyed-out);
+    background-color: var(--disabled);
+    border-color: #fff;
+    cursor: not-allowed;
+  }
+}
+
+.error-icon {
+  top: 1.75rem;
+}