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

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

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

@@ -1,7 +1,7 @@
 .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.
+  ); // 2px is for offset of the selectwrapper border. It's relative to the parent div which doesn't have a border.
 }
 
 .select-helper-text {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SelectWrapper, Props } from './SelectWrapper';
 import { render } from '@testing-library/react';
 import { Option } from '../../Select/Option';
@@ -55,6 +55,48 @@ describe('SelectWrapper 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 (
+        <SelectWrapper
+          {...defaultParams}
+          selectProps={{ 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!.nodeName).toBe('SELECT');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('SelectWrapper & Select have the right attributes', () => {
   it('select has aria values', async () => {
     const { select, getByTestId, findByText } = createSelectWrapper();

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

@@ -1,60 +1,70 @@
-import React, { ReactChild, ReactElement } from 'react';
+import React, { ComponentPropsWithRef, 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' | 'error'> {
+interface PartialSelectProps extends Partial<SelectProps> {}
+
+export interface Props
+  extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>,
+    Omit<WrapperProps, 'onChange' | 'error'> {
   children: ReactChild | ReactChild[];
   placeholder?: string;
   value: string;
   error?: boolean;
-  selectProps?: SelectProps;
+  selectProps?: PartialSelectProps;
   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);
+export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      error,
+      value,
+      placeholder,
+      selectProps,
+      helperProps,
+      onChange,
+      onClear,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    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}
+    return (
+      <Wrapper
+        {...rest}
+        ref={ref}
+        floatingLabelActive={floatingLabelActive}
+        errorId={errorId}
+        helperId={helperId}
+        labelProps={{ id: labelId, className: classes['select-label'] }}
+        helperProps={{
+          ...helperProps,
+          className: `${classes['select-helper-text']} ${helperProps?.className ?? ''}`,
+        }}
         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>
-  );
-};
+        <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

@@ -1,7 +1,7 @@
 .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.
+    1.25rem + 1px
+  ); // 1px 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);
@@ -9,16 +9,14 @@
 }
 
 .textarea {
-  border: 0;
-  padding-top: 0;
-  padding-right: 0;
+  padding-top: 1.625rem;
 
   &:active:not(:disabled) {
-    border-color: white;
+    border-color: var(--color-primary);
   }
 
   &:hover:not(:disabled) {
-    border-color: white;
+    border-color: var(--default);
   }
 
   &:focus:not(:disabled) {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { TextareaWrapper, Props } from './TextareaWrapper';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -39,6 +39,48 @@ describe('TextareaWrapper 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 (
+        <TextareaWrapper
+          {...defaultParams}
+          textareaProps={{ 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('TextareaWrapper & Textarea have the right attributes', () => {
   it('textarea has aria values', async () => {
     const { textarea, getByTestId, findByText } = createTextareaWrapper();

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.tsx

@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
+import React, { ComponentPropsWithRef, useState } from 'react';
 import classes from './TextareaWrapper.module.scss';
 import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
 import { Textarea, Props as TextareaProps } from '../../Textarea/Textarea';
 import { useWrapper } from '../../../hooks/useWrapper';
 
 export interface Props
-  extends Omit<WrapperProps, 'onFocus' | 'onChange' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
+  extends Omit<
+      ComponentPropsWithRef<'div'>,
+      'onFocus' | 'onChange' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'
+    >,
+    Omit<WrapperProps, 'onFocus' | 'onChange' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
   placeholder?: string;
   textareaProps?: TextareaProps;
   value: string;
@@ -16,90 +20,101 @@ export interface Props
   onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
 }
 
-export const TextareaWrapper = ({
-  name,
-  error,
-  value,
-  label,
-  placeholder,
-  textareaProps,
-  helperProps,
-  onChange,
-  onFocus,
-  onBlur,
-  onMouseEnter,
-  onMouseLeave,
-  disabled,
-  ...rest
-}: Props) => {
-  const {
-    errorId,
-    floatingLabelActive,
-    setFloatingLabelActive,
-    hasFocus,
-    setHasFocus,
-    helperId,
-    labelId,
-  } = useWrapper(value, placeholder);
+export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      name,
+      error,
+      value,
+      label,
+      placeholder,
+      textareaProps,
+      helperProps,
+      onChange,
+      onFocus,
+      onBlur,
+      onMouseEnter,
+      onMouseLeave,
+      disabled,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const {
+      errorId,
+      floatingLabelActive,
+      setFloatingLabelActive,
+      hasFocus,
+      setHasFocus,
+      helperId,
+      labelId,
+    } = useWrapper(value, placeholder);
+    const [hover, setHover] = useState(false);
 
-  const [focus, setFocus] = useState(false);
-  const [hover, setHover] = useState(false);
+    const optionalClasses: string[] = [];
 
-  return (
-    <Wrapper
-      {...rest}
-      disabled={disabled}
-      labelProps={{
-        id: labelId,
-        className: `${classes['textarea-label']} ${hasFocus ? classes['focus'] : ''}`,
-      }}
-      name={name}
-      label={label}
-      helperId={helperId}
-      helperProps={{
-        ...helperProps,
-        className: classes['textarea-helper-text'],
-      }}
-      error={error}
-      floatingLabelActive={floatingLabelActive}
-      errorId={errorId}
-    >
-      <Textarea
-        {...textareaProps}
-        error={error}
-        aria-labelledby={label && labelId}
-        aria-describedby={error ? errorId : helperId}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        onFocus={(e) => {
-          onFocus && onFocus(e);
-          setHasFocus(true);
-          setFloatingLabelActive(true);
-          setFocus(true);
-        }}
-        onBlur={(e) => {
-          onBlur && onBlur(e);
-          setHasFocus(false);
-          setFocus(false);
-          e.target.value || textareaProps?.placeholder?.length
-            ? setFloatingLabelActive(true)
-            : setFloatingLabelActive(false);
-        }}
-        onMouseEnter={(e) => {
-          onMouseEnter && onMouseEnter(e);
-          setHover(true);
+    hasFocus && optionalClasses.push(classes['focus']);
+    hover && optionalClasses.push(classes['hover']);
+    disabled && optionalClasses.push(classes['disabled']);
+    error && optionalClasses.push(classes['error']);
+
+    return (
+      <Wrapper
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        labelProps={{
+          id: labelId,
+          className: `${classes['textarea-label']} ${hasFocus ? classes['focus'] : ''}`,
         }}
-        onMouseLeave={(e) => {
-          onMouseLeave && onMouseLeave(e);
-          setHover(false);
+        name={name}
+        label={label}
+        helperId={helperId}
+        helperProps={{
+          ...helperProps,
+          className: classes['textarea-helper-text'],
         }}
-        className={classes['textarea']}
-        wrapperClassName={`${classes['textarea-wrapper']} ${focus ? classes['focus'] : ''} ${
-          hover ? classes['hover'] : ''
-        } ${disabled ? classes['disabled'] : ''} ${error ? classes['error'] : ''}`}
-        errorClassName={classes['error-icon']}
-      />
-    </Wrapper>
-  );
-};
+        error={error}
+        floatingLabelActive={floatingLabelActive}
+        errorId={errorId}
+      >
+        <Textarea
+          {...textareaProps}
+          error={error}
+          aria-labelledby={label && labelId}
+          aria-describedby={error ? errorId : helperId}
+          placeholder={placeholder}
+          name={name}
+          id={name}
+          value={value}
+          onChange={onChange}
+          onFocus={(e) => {
+            onFocus && onFocus(e);
+            setHasFocus(true);
+            setFloatingLabelActive(true);
+          }}
+          onBlur={(e) => {
+            onBlur && onBlur(e);
+            setHasFocus(false);
+            e.target.value || e.target.placeholder || textareaProps?.placeholder?.length
+              ? setFloatingLabelActive(true)
+              : setFloatingLabelActive(false);
+          }}
+          onMouseEnter={(e) => {
+            onMouseEnter && onMouseEnter(e);
+            setHover(true);
+          }}
+          onMouseLeave={(e) => {
+            onMouseLeave && onMouseLeave(e);
+            setHover(false);
+          }}
+          className={classes['textarea']}
+          wrapperProps={{
+            className: `${classes['textarea-wrapper']}} ${optionalClasses.join(' ')}`,
+          }}
+          errorProps={{ className: classes['error-icon'] }}
+        />
+      </Wrapper>
+    );
+  }
+);

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

@@ -7,7 +7,7 @@
   position: absolute;
   z-index: 1;
   top: 1.3125rem;
-  left: 1.25rem;
+  left: 1.35rem;
   transform-origin: left top;
   transition: all 0.2s ease-in-out;
   pointer-events: none;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Wrapper } from './Wrapper';
 import { render } from '@testing-library/react';
 import { Input } from '../../Input/Input';
@@ -15,3 +15,29 @@ describe('Wrapper should render', () => {
     expect(wrapper).toBeDefined();
   });
 });
+
+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 <Wrapper name="wrapper" children={<div></div>} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});