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

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

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

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

@@ -1,31 +1,44 @@
 .input-wrapper {
   position: relative;
-}
-
-.input {
-  height: 4rem;
+  display: flex;
+  align-items: center;
   padding: 0 1.25rem;
+  background-color: var(--input-background-color);
   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);
+  &:hover:not(:disabled) {
+    border-color: var(--default);
+  }
+
+  &.disabled,
+  &.disabled input {
     background-color: var(--disabled);
     border-color: #fff;
     cursor: not-allowed;
   }
 
-  &:hover:not(:disabled) {
-    border-color: var(--default);
+  &.error {
+    border-color: var(--error);
+  }
+
+  &.focus {
+    border-color: var(--color-primary);
   }
+}
+
+.input {
+  height: 4rem;
+  border: 0;
+  color: var(--greyed-out);
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
 
   &:focus:not(:disabled) {
     outline: none;
@@ -33,8 +46,7 @@
   }
 }
 
-.error {
-  border-color: var(--error);
+.error input {
   color: var(--error);
   padding-right: 3.75rem;
 
@@ -63,3 +75,10 @@
     right: 3.75rem;
   }
 }
+
+.input-wrapper [data-prefix],
+.input-wrapper [data-suffix] {
+  transition: all 0.2s ease-in-out;
+  display: block;
+  z-index: 1;
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Input, Props } from './Input';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -29,6 +29,32 @@ describe('Input 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 <Input {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('Should have the appropriate attributes', () => {
   it('is disabled and has a class', () => {
     const { input } = createInput((defaultParams) => ({

package/src/Form/Input/Input.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React, { ComponentPropsWithRef, Ref, useEffect, useState } from 'react';
 import classes from './Input.module.scss';
 import readyclasses from '../../readyclasses.module.scss';
 import { Icon, Icons } from '../../Icon/Icon';
-import { HTMLProps } from '../../interfaces';
+import { FormElement } from '../form.interfaces';
 
 const dateTypes = ['date', 'time', 'datetime-local'] as const;
 
@@ -18,55 +18,96 @@ export type Type =
   | 'hidden'
   | typeof dateTypes[number];
 
-export interface Props extends HTMLProps<HTMLInputElement> {
-  wrapperProps?: HTMLProps<HTMLInputElement>;
+export interface Props extends ComponentPropsWithRef<'input'>, FormElement {
+  wrapperProps?: ComponentPropsWithRef<'div'>;
   labeledBy?: string;
   type: Type;
-  error?: boolean;
+  suffix?: string;
+  prefix?: string;
 }
 
-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");
-    }
-  }, []);
+export const Input = React.forwardRef(
+  (
+    {
+      error = false,
+      className,
+      name,
+      style,
+      wrapperProps,
+      type,
+      labeledBy,
+      prefix,
+      suffix,
+      disabled,
+      onFocus,
+      onBlur,
+      ...rest
+    }: Props,
+    ref: Ref<HTMLInputElement>
+  ) => {
+    const [focus, setFocus] = useState(false);
 
-  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);
+    useEffect(() => {
+      if (name === undefined) {
+        throw new Error("Please give your <Input /> component a 'name' attribute");
+      }
+    }, []);
 
-  const iconClassNames = [classes['warning']];
-  (dateTypes as ReadonlyArray<string>).includes(type) &&
-    iconClassNames.push(classes['extra-indent']);
+    const inputClassNames = [classes['input']];
 
-  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>
-  );
-};
+    (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']);
+
+    const wrapperClasses = [classes['input-wrapper']];
+
+    wrapperProps?.className && wrapperClasses.push(wrapperProps.className);
+    type === 'hidden' && wrapperClasses.push(readyclasses['hidden']);
+    prefix && wrapperClasses.push(classes['prefix']);
+    suffix && wrapperClasses.push(classes['suffix']);
+    disabled && wrapperClasses.push(classes['disabled']);
+    error && wrapperClasses.push(classes['error']);
+    focus && wrapperClasses.push(classes['focus']);
+
+    return (
+      <div
+        {...wrapperProps}
+        style={{ ...style }}
+        className={`${classes['input-wrapper']} ${wrapperClasses.join(' ')}`}
+      >
+        {prefix && (
+          <div data-prefix className={classes['prefix']}>
+            <span>{prefix}</span>
+          </div>
+        )}
+        <input
+          {...rest}
+          ref={ref}
+          onFocus={(event) => {
+            setFocus(true);
+            onFocus && onFocus(event);
+          }}
+          onBlur={(event) => {
+            setFocus(false);
+            onBlur && onBlur(event);
+          }}
+          aria-labelledby={labeledBy}
+          type={type}
+          name={name}
+          disabled={disabled}
+          className={inputClassNames.join(' ')}
+        />
+        {suffix && (
+          <div data-suffix className={classes['suffix']}>
+            <span>{suffix}</span>
+          </div>
+        )}
+        {error && <Icon className={iconClassNames.join(' ')} icon={Icons.Error} />}
+      </div>
+    );
+  }
+);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Label } from './Label';
 import { render } from '@testing-library/react';
 
@@ -24,3 +24,29 @@ describe('Label should render', () => {
     expect(component.getAttribute('for')).toBe('input-name');
   });
 });
+
+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 <Label data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Form/Label/Label.tsx

@@ -1,19 +1,23 @@
-import React from 'react';
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
 import classes from './Label.module.scss';
 import readyclasses from '../../readyclasses.module.scss';
-import { HTMLProps } from '../../interfaces';
 
-export interface Props extends HTMLProps<HTMLLabelElement> {
-  children?: string;
+export interface Props extends ComponentPropsWithRef<'label'> {
+  children?: ReactNode;
 }
 
-export const Label = ({ children, className, hidden = false, ...rest }: Props) => {
-  return (
-    <label
-      {...rest}
-      className={`${hidden ? readyclasses['sr-only'] : ''} ${classes['label']} ${className ?? ''}`}
-    >
-      {children}
-    </label>
-  );
-};
+export const Label = React.forwardRef<HTMLLabelElement, Props>(
+  ({ children, className, hidden = false, ...rest }: Props, ref) => {
+    return (
+      <label
+        {...rest}
+        ref={ref}
+        className={`${hidden ? readyclasses['sr-only'] : ''} ${classes['label']} ${
+          className ?? ''
+        }`}
+      >
+        {children}
+      </label>
+    );
+  }
+);

package/src/Form/Radio/Radio.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Radio, Props } from './Radio';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -12,7 +12,7 @@ const defaultParams: Props = {
   error: false,
   errorMessage: 'errormessage',
   disabled: false,
-  wrapperProps: { 'data-testid': 'radiowrapper' },
+  formSelectorWrapperProps: { 'data-testid': 'radiowrapper' },
   helperText: 'helpertext',
   onChange: onChangeHandeler,
 };
@@ -70,6 +70,32 @@ describe('Radio 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 <Radio {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('Radio should be interactive', () => {
   it('should call onChange when clicked', () => {
     const { radio } = createRadio();