@onewelcome/react-lib-components 1.2.0 → 1.4.0

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, useState } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useState } from "react";
 import classes from "./TextareaWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Textarea, Props as TextareaProps } from "../../Textarea/Textarea";
@@ -36,101 +36,101 @@ export interface Props
   onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
 }
 
-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 TextareaWrapperComponent: ForwardRefRenderFunction<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 wrapperClasses: string[] = [];
+  const wrapperClasses: string[] = [];
 
-    hasFocus && wrapperClasses.push(classes["focus"]);
-    hover && wrapperClasses.push(classes["hover"]);
-    disabled && wrapperClasses.push(classes["disabled"]);
-    error && wrapperClasses.push(classes["error"]);
+  hasFocus && wrapperClasses.push(classes["focus"]);
+  hover && wrapperClasses.push(classes["hover"]);
+  disabled && wrapperClasses.push(classes["disabled"]);
+  error && wrapperClasses.push(classes["error"]);
 
-    return (
-      <Wrapper
-        {...rest}
-        ref={ref}
-        disabled={disabled}
-        labelProps={{
-          id: labelId,
-          className: `${classes["textarea-label"]} ${wrapperClasses.join(" ")}`
-        }}
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      disabled={disabled}
+      labelProps={{
+        id: labelId,
+        className: `${classes["textarea-label"]} ${wrapperClasses.join(" ")}`
+      }}
+      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}
         name={name}
-        label={label}
-        helperId={helperId}
-        helperProps={{
-          ...helperProps,
-          className: classes["textarea-helper-text"]
+        id={name}
+        value={value}
+        onChange={onChange}
+        onFocus={e => {
+          onFocus && onFocus(e);
+          setHasFocus(true);
+          setFloatingLabelActive(true);
         }}
-        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"]} ${error ? classes["error"] : ""}`}
-          wrapperProps={{
-            className: `${wrapperClasses.join(" ")} ${classes["textarea-wrapper"]}`
-          }}
-          errorProps={{ className: classes["error-icon"] }}
-        />
-      </Wrapper>
-    );
-  }
-);
+        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"]} ${error ? classes["error"] : ""}`}
+        wrapperProps={{
+          className: `${wrapperClasses.join(" ")} ${classes["textarea-wrapper"]}`
+        }}
+        errorProps={{ className: classes["error-icon"] }}
+      />
+    </Wrapper>
+  );
+};
+
+export const TextareaWrapper = React.forwardRef(TextareaWrapperComponent);

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactElement } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
 import { FormGroup, Props as FormGroupProps } from "../../FormGroup/FormGroup";
 import { Label, Props as LabelProps } from "../../Label/Label";
 import classes from "./Wrapper.module.scss";
@@ -45,79 +45,79 @@ export interface WrapperProps extends FormElement {
   disabled?: boolean;
 }
 
-export const Wrapper = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      children,
-      className,
-      error,
-      errorMessage,
-      errorId,
-      errorMessageIcon,
-      errorMessageIconPosition,
-      helperText,
-      helperId,
-      floatingLabel = true,
-      floatingLabelActive,
-      required,
-      helperProps,
-      helperIndent,
-      labelProps,
-      label,
-      disabled,
-      name,
-      innerClassName,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const renderChildren = () =>
-      React.Children.map(children, child =>
-        React.cloneElement(child, {
-          disabled
-        })
-      );
+const WrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    className,
+    error,
+    errorMessage,
+    errorId,
+    errorMessageIcon,
+    errorMessageIconPosition,
+    helperText,
+    helperId,
+    floatingLabel = true,
+    floatingLabelActive,
+    required,
+    helperProps,
+    helperIndent,
+    labelProps,
+    label,
+    disabled,
+    name,
+    innerClassName,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const renderChildren = () =>
+    React.Children.map(children, child =>
+      React.cloneElement(child, {
+        disabled
+      })
+    );
 
-    const labelClasses = [];
+  const labelClasses = [];
 
-    floatingLabel && labelClasses.push(classes["floating-label"]);
-    floatingLabel && floatingLabelActive && labelClasses.push(classes["floating-label-active"]);
-    labelProps?.className && labelClasses.push(labelProps.className);
-    required && labelClasses.push(classes["required"]);
-    error && labelClasses.push(classes["error"]);
-    disabled && labelClasses.push(classes["disabled"]);
+  floatingLabel && labelClasses.push(classes["floating-label"]);
+  floatingLabel && floatingLabelActive && labelClasses.push(classes["floating-label-active"]);
+  labelProps?.className && labelClasses.push(labelProps.className);
+  required && labelClasses.push(classes["required"]);
+  error && labelClasses.push(classes["error"]);
+  disabled && labelClasses.push(classes["disabled"]);
 
-    return (
-      <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? ""}`}>
-        <FormGroup
-          error={error}
-          errorMessage={errorMessage}
-          errorId={errorId}
-          errorMessageIcon={errorMessageIcon}
-          errorMessageIconPosition={errorMessageIconPosition}
-          helperText={helperText}
-          helperId={helperId}
-          helperProps={helperProps}
-          helperIndent={helperIndent}
+  return (
+    <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? ""}`}>
+      <FormGroup
+        error={error}
+        errorMessage={errorMessage}
+        errorId={errorId}
+        errorMessageIcon={errorMessageIcon}
+        errorMessageIconPosition={errorMessageIconPosition}
+        helperText={helperText}
+        helperId={helperId}
+        helperProps={helperProps}
+        helperIndent={helperIndent}
+      >
+        <div
+          className={`${floatingLabel ? classes["floating-wrapper"] : ""} ${
+            innerClassName ? innerClassName : ""
+          }`}
         >
-          <div
-            className={`${floatingLabel ? classes["floating-wrapper"] : ""} ${
-              innerClassName ? innerClassName : ""
-            }`}
-          >
-            {label && (
-              <Label
-                {...labelProps}
-                className={`${classes.label} ${labelClasses.join(" ")}`}
-                htmlFor={name}
-              >
-                {label}
-              </Label>
-            )}
-            {renderChildren()}
-          </div>
-        </FormGroup>
-      </div>
-    );
-  }
-);
+          {label && (
+            <Label
+              {...labelProps}
+              className={`${classes.label} ${labelClasses.join(" ")}`}
+              htmlFor={name}
+            >
+              {label}
+            </Label>
+          )}
+          {renderChildren()}
+        </div>
+      </FormGroup>
+    </div>
+  );
+};
+
+export const Wrapper = React.forwardRef(WrapperComponent);

package/src/Icon/Icon.module.scss

@@ -42,6 +42,7 @@
 
 .icon {
   line-height: 0;
+  font-size: 0.875rem;
 }
 
 .icon-image:before {

package/src/Icon/Icon.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import classes from "./Icon.module.scss";
 
 export enum Icons {
@@ -93,19 +93,22 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   tag?: Tag;
 }
 
-export const Icon = React.forwardRef<HTMLDivElement, Props>(
-  ({ icon, color, className, style, size, tag = "span", ...rest }: Props, ref) => {
-    const Component = tag;
+const IconComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { icon, color, className, style, size, tag = "span", ...rest }: Props,
+  ref
+) => {
+  const Component = tag;
 
-    return (
-      <Component
-        {...rest}
-        ref={ref}
-        style={{ color: color, ...style, fontSize: size }}
-        data-icon
-        aria-hidden="true"
-        className={`${classes["icon"]} ${classes["icon-" + icon]} ${className ? className : ""}`}
-      />
-    );
-  }
-);
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      style={{ color: color, ...style, fontSize: size }}
+      data-icon
+      aria-hidden="true"
+      className={`${classes["icon"]} ${classes["icon-" + icon]} ${className ? className : ""}`}
+    />
+  );
+};
+
+export const Icon = React.forwardRef(IconComponent);

package/src/Link/Link.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ForwardRefExoticComponent, ReactNode } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ForwardRefExoticComponent,
+  ReactNode
+} from "react";
 import classes from "./Link.module.scss";
 
 export type AnchorType = "external" | "internal" | "download";
@@ -30,70 +35,70 @@ export interface Props extends ComponentPropsWithRef<"a"> {
   component?: ForwardRefExoticComponent<any>;
 }
 
-export const Link = React.forwardRef<HTMLAnchorElement, Props>(
-  (
-    {
-      children,
-      className,
-      disabled = false,
-      to,
-      color = "primary",
-      type = "internal",
-      display = "link",
-      buttonVariant = "fill",
-      component,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const determineTarget = () => {
-      if (rest.target) {
-        return rest.target;
-      }
-
-      if (type === "external") {
-        return "_blank";
-      }
+const LinkComponent: ForwardRefRenderFunction<HTMLAnchorElement, Props> = (
+  {
+    children,
+    className,
+    disabled = false,
+    to,
+    color = "primary",
+    type = "internal",
+    display = "link",
+    buttonVariant = "fill",
+    component,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const determineTarget = () => {
+    if (rest.target) {
+      return rest.target;
+    }
 
-      return "";
-    };
+    if (type === "external") {
+      return "_blank";
+    }
 
-    const classNames = [classes[color]];
-    display === "link" && classNames.push(classes["link"]);
-    display === "button" && classNames.push(classes["button"], classes[buttonVariant]);
-    disabled && classNames.push(classes["disabled"]);
-    className && classNames.push(className);
+    return "";
+  };
 
-    if (component) {
-      return React.createElement(component, {
-        ...rest,
-        ref: ref,
-        to: to,
-        className: classNames.join(" "),
-        "aria-disabled": disabled,
-        style: {
-          ...rest.style
-        },
-        children: children
-      });
-    }
+  const classNames = [classes[color]];
+  display === "link" && classNames.push(classes["link"]);
+  display === "button" && classNames.push(classes["button"], classes[buttonVariant]);
+  disabled && classNames.push(classes["disabled"]);
+  className && classNames.push(className);
 
-    return (
-      <a
-        {...rest}
-        ref={ref}
-        download={type === "download"}
-        rel={type === "external" ? "noopener noreferer" : undefined}
-        href={!disabled ? to : undefined}
-        className={classNames.join(" ")}
-        aria-disabled={disabled}
-        target={determineTarget()}
-        style={{
-          ...rest.style
-        }}
-      >
-        {children}
-      </a>
-    );
+  if (component) {
+    return React.createElement(component, {
+      ...rest,
+      ref: ref,
+      to: to,
+      className: classNames.join(" "),
+      "aria-disabled": disabled,
+      style: {
+        ...rest.style
+      },
+      children: children
+    });
   }
-);
+
+  return (
+    <a
+      {...rest}
+      ref={ref}
+      download={type === "download"}
+      rel={type === "external" ? "noopener noreferer" : undefined}
+      href={!disabled ? to : undefined}
+      className={classNames.join(" ")}
+      aria-disabled={disabled}
+      target={determineTarget()}
+      style={{
+        ...rest.style
+      }}
+    >
+      {children}
+    </a>
+  );
+};
+
+export const Link = React.forwardRef(LinkComponent);