@onewelcome/react-lib-components 1.3.0 → 1.4.0

package/src/Form/Fieldset/Fieldset.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactNode, ReactElement } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactNode,
+  ReactElement
+} from "react";
 import readyclasses from "../../readyclasses.module.scss";
 import classes from "./Fieldset.module.scss";
 import { Typography, Variant } from "../../Typography/Typography";
@@ -45,87 +50,85 @@ export interface Props extends ComponentPropsWithRef<"fieldset"> {
   disablePropagation?: boolean;
 }
 
-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;
-      }
+const FieldsetComponent: ForwardRefRenderFunction<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;
+    }
 
-      /* All right, so the issue is that whenever we try to add disabled and error to a component that doesn't accept it,
+    /* 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
-      ];
+    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 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 child;
+    });
+  };
 
-        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>
+  );
+};
 
-    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>
-    );
-  }
-);
+export const Fieldset = React.forwardRef(FieldsetComponent);

package/src/Form/Form.tsx

@@ -14,17 +14,22 @@
  *    limitations under the License.
  */
 
-import React, { HTMLProps, ReactNode } from "react";
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactNode } from "react";
 import classes from "./Form.module.scss";
 
-export interface Props extends HTMLProps<HTMLFormElement> {
+export interface Props extends ComponentPropsWithRef<"form"> {
   children?: ReactNode;
 }
 
-export const Form = ({ children, className, ...rest }: Props) => {
+const FormComponent: ForwardRefRenderFunction<HTMLFormElement, Props> = (
+  { children, className, ...rest }: Props,
+  ref
+) => {
   return (
-    <form className={`${classes.form} ${className ?? ""}`} {...rest}>
+    <form ref={ref} className={`${classes.form} ${className ?? ""}`} {...rest}>
       {children}
     </form>
   );
 };
+
+export const Form = React.forwardRef(FormComponent);

package/src/Form/FormControl/FormControl.module.scss

@@ -22,6 +22,7 @@
   &.grid {
     display: flex;
     flex-wrap: wrap;
+    gap: 1rem;
 
     &.center,
     &.middle {
@@ -54,26 +55,6 @@
   flex-shrink: 0;
 }
 
-.grid-2 {
-  .column:nth-child(even) {
-    margin-left: 1rem;
-  }
-
-  .column:nth-child(n + 3) {
-    margin-top: 1rem;
-  }
-}
-
-.grid-3 {
-  .column:not(:nth-child(3n + 1)) {
-    margin-left: 1rem;
-  }
-
-  .column:nth-child(n + 4) {
-    margin-top: 1rem;
-  }
-}
-
 .col-2 {
   flex-basis: calc(calc(100% - 1rem) / 2);
 }

package/src/Form/FormControl/FormControl.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactElement } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
 import classes from "./FormControl.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
@@ -25,39 +25,40 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   disabled?: boolean;
 }
 
-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
-        });
-
-        if (grid && grid > 1) {
-          return (
-            <div className={`${classes["col-" + grid]} ${classes.column}`}>{childElement}</div>
-          );
-        }
-
-        return childElement;
+const FormControlComponent: ForwardRefRenderFunction<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
       });
 
-    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>
-    );
-  }
-);
+      if (grid && grid > 1) {
+        return <div className={`${classes["col-" + grid]} ${classes.column}`}>{childElement}</div>;
+      }
+
+      return childElement;
+    });
+
+  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>
+  );
+};
+
+export const FormControl = React.forwardRef(FormControlComponent);

package/src/Form/FormGroup/FormGroup.tsx

@@ -16,7 +16,7 @@
 
 /** 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, { ComponentPropsWithRef, ReactChild } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactChild } from "react";
 import classes from "./FormGroup.module.scss";
 import { FormHelperText, Props as HelperProps } from "../FormHelperText/FormHelperText";
 import { Icon, Icons } from "../../Icon/Icon";
@@ -35,66 +35,66 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   disabled?: boolean;
 }
 
-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}
+const FormGroupComponent: ForwardRefRenderFunction<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 && error)) && (
-          <div
-            style={{ marginLeft: `${helperIndent}px` }}
-            className={`${classes["default-helper"]} ${
-              helperProps?.className ? helperProps.className : ""
-            }`}
-          >
-            {((helperText && !error) || (helperText && error && !errorMessage)) && (
-              <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>
+      {(helperText || (errorMessage && error)) && (
+        <div
+          style={{ marginLeft: `${helperIndent}px` }}
+          className={`${classes["default-helper"]} ${
+            helperProps?.className ? helperProps.className : ""
+          }`}
+        >
+          {((helperText && !error) || (helperText && error && !errorMessage)) && (
+            <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>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const FormGroup = React.forwardRef(FormGroupComponent);

package/src/Form/FormHelperText/FormHelperText.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactNode } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from "react";
 import classes from "./FormHelperText.module.scss";
 import { Typography } from "../../Typography/Typography";
 import { FormElement } from "../form.interfaces";
@@ -23,20 +23,21 @@ export interface Props extends ComponentPropsWithRef<"div">, FormElement {
   children?: ReactNode;
 }
 
-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>
-    );
-  }
-);
+const FormHelperTextComponent: ForwardRefRenderFunction<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>
+  );
+};
+
+export const FormHelperText = React.forwardRef(FormHelperTextComponent);

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, createRef, ReactNode } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  createRef,
+  ReactNode
+} from "react";
 import { Icon, Icons } from "../../Icon/Icon";
 import { KeyValuePair } from "../../interfaces";
 import { FormSelector } from "../form.interfaces";
@@ -31,57 +36,57 @@ export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
   identifier?: string;
 }
 
-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();
+const FormSelectorWrapperComponent: ForwardRefRenderFunction<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>
+  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>
         )}
-        {nestedChildren}
-      </div>
-    );
-  }
-);
+      {errorMessage && !parentErrorId && error && (
+        <span className={classes["error-message"]}>
+          <Icon className={classes["error-icon"]} icon={Icons.Error} />
+          <span id={errorId}>{errorMessage}</span>
+        </span>
+      )}
+      {nestedChildren}
+    </div>
+  );
+};
+
+export const FormSelectorWrapper = React.forwardRef(FormSelectorWrapperComponent);