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

package/src/Form/Fieldset/Fieldset.tsx

@@ -1,10 +1,22 @@
-import React, { ReactElement } from 'react';
+import React, { ComponentPropsWithRef, ReactNode, 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';
+import { Input } from '../Input/Input';
+import { Select } from '../Select/Select';
+import { Radio } from '../Radio/Radio';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Textarea } from '../Textarea/Textarea';
+import { Toggle } from '../Toggle/Toggle';
+import { Label } from '../Label/Label';
+import { FormControl } from '../FormControl/FormControl';
+import { FormSelectorWrapper } from '../FormSelectorWrapper/FormSelectorWrapper';
+import { FormHelperText } from '../FormHelperText/FormHelperText';
+import { InputWrapper } from '../Wrapper/InputWrapper/InputWrapper';
+import { SelectWrapper } from '../Wrapper/SelectWrapper/SelectWrapper';
+import { TextareaWrapper } from '../Wrapper/TextareaWrapper/TextareaWrapper';
 
-export interface Props extends HTMLProps<HTMLFieldSetElement> {
+export interface Props extends ComponentPropsWithRef<'fieldset'> {
   children?: ReactElement | ReactElement[];
   legend: string;
   legendStyle?: Variant;
@@ -14,54 +26,88 @@ export interface Props extends HTMLProps<HTMLFieldSetElement> {
   noBackground?: boolean;
   required?: boolean;
   error?: boolean;
+  disablePropagation?: boolean;
 }
 
-export const Fieldset = ({
-  children,
-  className,
-  legend,
-  legendStyle = 'body',
-  hideLegend = false,
-  noBackground,
-  background = noBackground ? '' : '#FFF',
-  noPadding = false,
-  disabled = false,
-  required = false,
-  error = false,
-  ...rest
-}: Props) => {
-  const renderChildren = () => {
-    if (!children) return;
+export const Fieldset = React.forwardRef<HTMLFieldSetElement, Props>(
+  (
+    {
+      children,
+      className,
+      legend,
+      legendStyle = 'body',
+      hideLegend = false,
+      noBackground,
+      background = noBackground ? '' : '#FFF',
+      noPadding = false,
+      disabled = false,
+      required = false,
+      error = false,
+      disablePropagation = false,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const renderChildren = () => {
+      if (!children) return;
 
-    return React.Children.map(children, (child: ReactElement) =>
-      React.cloneElement(child, {
-        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
-        error: child.props.error !== undefined ? child.props.error : error,
-      })
-    );
-  };
+      /* All right, so the issue is that whenever we try to add disabled and error to a component that doesn't accept it, 
+    React will throw an error. However, it might occur that we want a component inside of Fieldset because of aesthetic purposes 
+    (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
+    So instead we supply an array of components that we want to add the disabled and error prop to and check if child.type equals one of these. */
+      const allowedComponents: ReactNode[] = [
+        Input,
+        Select,
+        Radio,
+        Checkbox,
+        Textarea,
+        Toggle,
+        Label,
+        FormControl,
+        FormSelectorWrapper,
+        FormHelperText,
+        InputWrapper,
+        SelectWrapper,
+        TextareaWrapper,
+      ];
+
+      return React.Children.map(children, (child: ReactElement) => {
+        if (allowedComponents.includes(child.type) && !disablePropagation) {
+          return React.cloneElement(child, {
+            disabled: child.props.disabled ?? disabled,
+            error: child.props.error ?? error,
+          });
+        }
 
-  return (
-    <fieldset
-      {...rest}
-      disabled={disabled}
-      style={{ backgroundColor: background, ...rest.style }}
-      className={`${classes.fieldset} ${noPadding ? classes['no-padding'] : ''} ${className ?? ''}`}
-    >
-      {legend && <legend className={readyclasses['sr-only']}>{legend}</legend>}
-      {legend && !hideLegend && (
-        <Typography
-          variant={legendStyle}
-          tag="span"
-          aria-hidden="true"
-          className={`${classes['legend']} ${required ? classes['required'] : ''} ${
-            error ? classes['error'] : ''
-          }`}
-        >
-          {legend}
-        </Typography>
-      )}
-      {renderChildren()}
-    </fieldset>
-  );
-};
+        return child;
+      });
+    };
+
+    return (
+      <fieldset
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        style={{ backgroundColor: background, ...rest.style }}
+        className={`${classes.fieldset} ${noPadding ? classes['no-padding'] : ''} ${
+          className ?? ''
+        }`}
+      >
+        {legend && <legend className={readyclasses['sr-only']}>{legend}</legend>}
+        {legend && !hideLegend && (
+          <Typography
+            variant={legendStyle}
+            tag="span"
+            aria-hidden="true"
+            className={`${classes['legend']} ${required ? classes['required'] : ''} ${
+              error ? classes['error'] : ''
+            }`}
+          >
+            {legend}
+          </Typography>
+        )}
+        {renderChildren()}
+      </fieldset>
+    );
+  }
+);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormControl, Props } from './FormControl';
 import { render } from '@testing-library/react';
 import { Input } from '../Input/Input';
@@ -35,6 +35,32 @@ describe('FormControl 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 <FormControl {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('FormControl attributes should be working correctly', () => {
   it('has the right classes and attributes', () => {
     const { formcontrol } = createFormControl();

package/src/Form/FormControl/FormControl.tsx

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormGroup, Props } from './FormGroup';
 import { render } from '@testing-library/react';
 
@@ -44,6 +44,32 @@ describe('FormSelectorGroup 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 <FormGroup {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('Correct error state', () => {
   it('has the correct state', () => {
     const { formgroup } = createFormGroup((defaultParams) => ({
@@ -59,3 +85,27 @@ describe('Correct error state', () => {
     expect(errorMessage?.querySelector('#error_id')).toHaveTextContent('example error message');
   });
 });
+
+describe('no helpertext, but errorMessage is defined', () => {
+  it("doesn't show the div with 'default-helper' class when there's no error and no helpertext defined", () => {
+    const { formgroup } = createFormGroup((defaultParams) => ({
+      ...defaultParams,
+      error: false,
+      helperText: undefined,
+      errorMessage: 'example error message',
+    }));
+
+    expect(formgroup.querySelector('.default-helper')).toBeFalsy();
+  });
+
+  it("does show the div with 'default-helper' class when there's an error and no helpertext defined", () => {
+    const { formgroup } = createFormGroup((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+      helperText: undefined,
+      errorMessage: 'example error message',
+    }));
+
+    expect(formgroup.querySelector('.default-helper')).toBeTruthy();
+  });
+});

package/src/Form/FormGroup/FormGroup.tsx

@@ -1,12 +1,11 @@
 /** 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 React, { ComponentPropsWithRef, 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> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   children: ReactChild[] | ReactChild;
   error?: boolean;
   errorMessageIcon?: Icons;
@@ -17,62 +16,69 @@ export interface Props extends HTMLProps<HTMLDivElement> {
   helperText?: string;
   helperId?: string;
   helperProps?: HelperProps;
+  disabled?: boolean;
 }
 
-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}
+export const FormGroup = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      className,
+      error,
+      errorMessage,
+      errorId,
+      errorMessageIcon,
+      errorMessageIconPosition = 'before',
+      helperText,
+      helperId,
+      helperProps,
+      helperIndent,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        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}
-                  />
-                )}
+        {(helperText || (errorMessage && error)) && (
+          <div
+            style={{ marginLeft: `${helperIndent}px` }}
+            className={`${classes['default-helper']} ${
+              helperProps?.className ? helperProps.className : ''
+            }`}
+          >
+            {helperText && !error && (
+              <FormHelperText {...helperProps} className={''} id={helperId}>
+                {(helperProps && helperProps.children) || 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>
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormHelperText, Props } from './FormHelperText';
 import { render } from '@testing-library/react';
 
@@ -29,6 +29,32 @@ describe('FormHelperText 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 <FormHelperText {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('Attributes', () => {
   it('contains the error class', () => {
     const { formhelpertext } = createFormHelperText((defaultParams) => ({

package/src/Form/FormHelperText/FormHelperText.tsx

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

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.test.tsx

@@ -0,0 +1,78 @@
+import React, { useRef, useEffect } from 'react';
+import { FormSelectorWrapper, Props } from './FormSelectorWrapper';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {};
+
+const createFormSelectorWrapper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <FormSelectorWrapper {...parameters} data-testid="formSelectorWrapper">
+      formSelectorWrapper content
+    </FormSelectorWrapper>
+  );
+  const formSelectorWrapper = queries.getByTestId('formSelectorWrapper');
+
+  return {
+    ...queries,
+    formSelectorWrapper,
+  };
+};
+
+describe('FormSelectorWrapper should render', () => {
+  it('renders without crashing', () => {
+    const { formSelectorWrapper } = createFormSelectorWrapper();
+
+    expect(formSelectorWrapper).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>,
+        ref2: React.RefObject<HTMLElement>,
+        ref3: React.RefObject<HTMLElement>
+      ) => void;
+    }) => {
+      const ref = useRef(null);
+      const helperRef = useRef(null);
+      const containerRef = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref, helperRef, containerRef);
+        }
+      }, [ref]);
+
+      return (
+        <FormSelectorWrapper
+          {...defaultParams}
+          containerProps={{ 'data-ref': 'testing', ref: containerRef }}
+          helperText="helpertext"
+          helperProps={{ 'data-ref': 'testing', ref: helperRef }}
+          data-ref="testing"
+          ref={ref}
+        />
+      );
+    };
+
+    const refCheck = (
+      ref: React.RefObject<HTMLElement>,
+      ref2: React.RefObject<HTMLElement>,
+      ref3: React.RefObject<HTMLElement>
+    ) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref2.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref3.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});