@onewelcome/react-lib-components 0.1.1-alpha → 0.1.2-alpha

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Toggle } from './Toggle';
 import { render } from '@testing-library/react';
 
@@ -14,6 +14,32 @@ describe('Toggle should render', () => {
   });
 });
 
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Toggle name="test" children="test" data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('Toggle attributes', () => {
   it('should be checked', () => {
     const { getByTestId } = render(

package/src/Form/Toggle/Toggle.tsx

@@ -1,20 +1,33 @@
-import React from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import { Checkbox, CheckboxProps } from '../Checkbox/Checkbox';
 import classes from './Toggle.module.scss';
 
 export interface Props
-  extends Omit<CheckboxProps, 'indeterminate' | 'errorMessage' | 'error' | 'children'> {
+  extends ComponentPropsWithRef<'input'>,
+    Omit<CheckboxProps, 'indeterminate' | 'errorMessage' | 'error' | 'children' | 'label'> {
   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>
+export const Toggle = React.forwardRef<HTMLInputElement, Props>(
+  ({ children, checked, disabled, ...rest }: Props, ref) => (
+    <div className={classes['toggle-wrapper']}>
+      <Checkbox
+        {...rest}
+        ref={ref}
+        checked={checked}
+        className={classes['checkbox']}
+        helperProps={{ className: classes['toggle-helper'] }}
+        disabled={disabled}
+        label={children}
+      >
+        <span
+          data-toggle
+          aria-hidden="true"
+          className={`${classes['toggle']} ${checked ? classes['checked'] : ''} ${
+            disabled ? classes['disabled'] : ''
+          } `}
+        ></span>
+      </Checkbox>
+    </div>
+  )
 );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { CheckboxWrapper, Props } from './CheckboxWrapper';
 import { Checkbox, CheckboxProps } from '../../Checkbox/Checkbox';
 import { render } from '@testing-library/react';
@@ -63,6 +63,32 @@ describe('checkboxwrapper should render', () => {
   });
 });
 
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <CheckboxWrapper {...defaultParams} name="test" data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 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) => ({

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

@@ -1,62 +1,59 @@
-import React, { ReactElement, useEffect } from 'react';
+import React, { ComponentPropsWithRef, 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 {
+export interface Props extends ComponentPropsWithRef<'div'>, WrapperProps {
   children: ReactElement[] | ReactElement;
   fieldsetProps: FieldsetProps;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const CheckboxWrapper = ({
-  children,
-  error = false,
-  helperText,
-  helperProps,
-  fieldsetProps,
-  ...rest
-}: Props) => {
-  const { errorId, helperId } = useWrapper();
+export const CheckboxWrapper = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, error = false, helperText, helperProps, fieldsetProps, ...rest }: Props, ref) => {
+    const { errorId, helperId } = useWrapper();
 
-  useEffect(() => {
-    if (fieldsetProps.legend === 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" }})`
+    useEffect(() => {
+      if (fieldsetProps.legend === undefined) {
+        console.error(
+          `You should give your Fieldset component a legend prop so a legend element is rendered. This error was thrown in CheckboxWrapper. You can add this legend prop through the fieldsetProps prop by passing an object (fieldsetProps={{ legend: "legend here" }})`
+        );
+      }
+    }, []);
+
+    const renderChildren = () =>
+      React.Children.map(children, (child) =>
+        React.cloneElement(child, {
+          parentErrorId: errorId,
+          error: error,
+          parentHelperId: helperText ? helperId : false,
+          disabled: rest.disabled,
+        })
       );
-    }
-  }, []);
 
-  const renderChildren = () =>
-    React.Children.map(children, (child) =>
-      React.cloneElement(child, {
-        parentErrorId: errorId,
-        error: error,
-        parentHelperId: helperText ? helperId : false,
-        disabled: rest.disabled,
-      })
+    return (
+      <Fieldset {...fieldsetProps} error={error} required={rest.required}>
+        <Wrapper
+          {...rest}
+          ref={ref}
+          label=""
+          helperId={helperId}
+          helperText={helperText}
+          helperProps={{
+            ...helperProps,
+            className: `${classes['checkbox-wrapper-helper']} ${
+              error ? classes['checkbox-wrapper-error'] : ''
+            } ${helperProps?.className ?? ''}`,
+          }}
+          error={error}
+          errorMessageIcon={Icons.Error}
+          errorId={errorId}
+        >
+          {renderChildren()}
+        </Wrapper>
+      </Fieldset>
     );
-
-  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

@@ -22,3 +22,14 @@ input {
   transform: translateY(5px);
   font-size: 1.125rem;
 }
+
+.input-wrapper [data-prefix],
+.input-wrapper [data-suffix] {
+  transform: translateY(-0.125rem);
+}
+
+.floating-label-active [data-prefix],
+.floating-label-active [data-suffix] {
+  padding-top: 0.5rem;
+  transform: translateY(0);
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { InputWrapper, Props } from './InputWrapper';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -60,6 +60,48 @@ describe('InputWrapper should render', () => {
   });
 });
 
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (
+        ref: React.RefObject<HTMLElement>,
+        innerRef: React.RefObject<HTMLInputElement>
+      ) => void;
+    }) => {
+      const ref = useRef(null);
+      const innerRef = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref, innerRef);
+        }
+      }, [ref]);
+
+      return (
+        <InputWrapper
+          {...defaultParams}
+          inputProps={{ ref: innerRef, 'data-ref': 'inner-testing' }}
+          name="test"
+          data-ref="testing"
+          ref={ref}
+        />
+      );
+    };
+
+    const refCheck = (
+      ref: React.RefObject<HTMLElement>,
+      innerRef: React.RefObject<HTMLElement>
+    ) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(innerRef.current).toHaveAttribute('data-ref', 'inner-testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('InputWrapper should be interactive', () => {
   it('executes the eventlisteners', () => {
     const onFocusHandler = jest.fn();
@@ -91,3 +133,49 @@ describe('InputWrapper should be interactive', () => {
     expect(onBlurHandler).toHaveBeenCalled();
   });
 });
+
+describe('InputWrapper should support prefix and suffix', () => {
+  const prefix = 'prefix';
+  const suffix = 'suffix';
+
+  const hasPrefixAndSuffixDefined = (container: HTMLElement) => {
+    expect(container.querySelector('[data-prefix]')).toHaveTextContent(prefix);
+    expect(container.querySelector('[data-suffix]')).toHaveTextContent(suffix);
+  };
+
+  it('renders prefix and sufix when input has focus', () => {
+    const { container, getByTestId } = createInputWrapper((defaultParams) => ({
+      ...defaultParams,
+      value: '',
+      inputProps: { 'data-testid': 'input', prefix, suffix },
+    }));
+
+    const input = getByTestId('input');
+
+    expect(container.querySelector('[data-prefix]')).toBeNull();
+    expect(container.querySelector('[data-suffix]')).toBeNull();
+
+    userEvent.tab();
+    expect(input).toHaveFocus();
+    hasPrefixAndSuffixDefined(container);
+  });
+
+  it('renders prefix and sufix when input has value', () => {
+    const { container, getByTestId } = createInputWrapper((defaultParams) => ({
+      ...defaultParams,
+      inputProps: { 'data-testid': 'input', prefix, suffix },
+    }));
+
+    const input = getByTestId('input');
+
+    hasPrefixAndSuffixDefined(container);
+
+    userEvent.tab();
+    expect(input).toHaveFocus();
+    hasPrefixAndSuffixDefined(container);
+
+    userEvent.tab();
+    expect(input).not.toHaveFocus();
+    hasPrefixAndSuffixDefined(container);
+  });
+});

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

@@ -1,92 +1,145 @@
-import React from 'react';
+import React, { ComponentPropsWithRef, useEffect, useRef, useState } 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'> {}
+interface PartialInputProps extends Partial<InputProps> {}
 
-export interface Props extends WrapperProps {
+export interface Props extends ComponentPropsWithRef<'div'>, WrapperProps {
   label: string;
   type: Type;
   name: string;
-  inputProps?: OptionalInputProps;
+  inputProps?: PartialInputProps;
   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);
+const useLabelOffset = (
+  wrapper: React.RefObject<HTMLDivElement>,
+  input: React.RefObject<HTMLInputElement>,
+  floatingLabelActive: boolean,
+  prefix?: string
+) => {
+  const [labelOffset, setLabelOffset] = useState({});
 
-  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'] : ''}
+  const resetLabelOffset = () => setLabelOffset({ left: undefined });
+
+  useEffect(() => {
+    if (wrapper.current && input.current && prefix) {
+      if (floatingLabelActive) {
+        resetLabelOffset();
+      } else {
+        const prefixDifference =
+          input.current.getBoundingClientRect().left -
+          wrapper.current.getBoundingClientRect().left +
+          4;
+
+        setLabelOffset({ left: `${prefixDifference}px` });
+      }
+    }
+  }, [wrapper.current, input.current, prefix, floatingLabelActive]);
+
+  return { labelOffset };
+};
+
+export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      type,
+      name,
+      inputProps,
+      helperText,
+      helperProps,
+      value,
+      error,
+      onChange,
+      onBlur,
+      onFocus,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const {
+      errorId,
+      floatingLabelActive,
+      setFloatingLabelActive,
+      hasFocus,
+      setHasFocus,
+      helperId,
+      labelId,
+    } = useWrapper(value, inputProps?.placeholder, type);
+    const { prefix, suffix } = inputProps || {};
+    const wrapper = useRef<HTMLDivElement>(null);
+    const input = useRef<HTMLInputElement>(null);
+    const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
+    const labelClasses = [classes['input-label']];
+    const { labelOffset } = useLabelOffset(
+      (ref as React.RefObject<HTMLDivElement>) || wrapper,
+      (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
+      floatingLabelActive,
+      prefix
+    );
+
+    hasFocus && labelClasses.push(classes['focus']);
+
+    return (
+      <Wrapper
+        {...rest}
+        ref={ref || wrapper}
         name={name}
+        className={classes['input-wrapper']}
+        labelProps={{
+          id: labelId,
+          className: labelClasses.join(' '),
+          style: { ...labelOffset },
+        }}
+        floatingLabelActive={floatingLabelActive}
+        errorId={errorId}
         error={error}
-        id={name}
-        value={value}
-        type={type}
-      />
-    </Wrapper>
-  );
-};
+        helperId={helperId}
+        helperText={helperText}
+        helperProps={{
+          ...helperProps,
+          className: `${classes['input-wrapper-helper']} ${helperProps?.className ?? ''} `,
+        }}
+        helperIndent={20}
+      >
+        <Input
+          {...inputProps}
+          prefix={hasValueOrActiveFloatingLabel ? prefix : ''}
+          suffix={hasValueOrActiveFloatingLabel ? suffix : ''}
+          wrapperProps={{ className: floatingLabelActive ? classes['floating-label-active'] : '' }}
+          ref={(inputProps && inputProps.ref) || input}
+          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 ||
+            e.target.placeholder ||
+            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>
+    );
+  }
+);