@onewelcome/react-lib-components 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, Fragment, ReactElement } from "react";
+import React, {
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction,
+  Fragment,
+  ReactElement
+} from "react";
 import { Icon, Icons } from "../Icon/Icon";
 import { Link, Props as LinkProps } from "../Link/Link";
 import { Typography } from "../Typography/Typography";
@@ -27,40 +32,43 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   ariaLabel: string;
 }
 
-export const Breadcrumbs = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, ariaLabel, className = "", ...rest }: Props, ref) => {
-    const items = React.Children.map(children, (child, index) => {
-      const isLastElement = Array.isArray(children) ? index === children.length - 1 : true;
-      if (isLastElement) {
-        return (
-          <Typography
-            key={child.key}
-            variant="body"
-            tag="span"
-            className={classes["last"]}
-            aria-current="page"
-          >
-            {child.props.children}
-          </Typography>
-        );
-      } else {
-        return (
-          <Fragment key={child.key}>
-            {React.cloneElement(child)}
-            <Icon icon={Icons.ChevronRight} className={classes["icon"]} />
-          </Fragment>
-        );
-      }
-    });
-    return (
-      <nav
-        {...rest}
-        ref={ref}
-        aria-label={ariaLabel}
-        className={`${classes["breadcrumbs"]} ${className}`}
-      >
-        {items}
-      </nav>
-    );
-  }
-);
+const BreadcrumbsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, ariaLabel, className = "", ...rest }: Props,
+  ref
+) => {
+  const items = React.Children.map(children, (child, index) => {
+    const isLastElement = Array.isArray(children) ? index === children.length - 1 : true;
+    if (isLastElement) {
+      return (
+        <Typography
+          key={child.key}
+          variant="body"
+          tag="span"
+          className={classes["last"]}
+          aria-current="page"
+        >
+          {child.props.children}
+        </Typography>
+      );
+    } else {
+      return (
+        <Fragment key={child.key}>
+          {React.cloneElement(child)}
+          <Icon icon={Icons.ChevronRight} className={classes["icon"]} />
+        </Fragment>
+      );
+    }
+  });
+  return (
+    <nav
+      {...rest}
+      ref={ref}
+      aria-label={ariaLabel}
+      className={`${classes["breadcrumbs"]} ${className}`}
+    >
+      {items}
+    </nav>
+  );
+};
+
+export const Breadcrumbs = React.forwardRef(BreadcrumbsComponent);

package/src/Button/BaseButton.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import classes from "./BaseButton.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
@@ -23,24 +23,27 @@ export interface Props extends ComponentPropsWithRef<"button"> {
   color?: "primary" | "secondary" | "tertiary" | "default";
 }
 
-export const BaseButton = React.forwardRef<HTMLButtonElement, Props>(
-  ({ children, type = "button", className, ...rest }, ref) => {
-    const validTypes = ["submit", "button", "reset"];
+const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, type = "button", className, ...rest },
+  ref
+) => {
+  const validTypes = ["submit", "button", "reset"];
 
-    if (!validTypes.includes(type))
-      throw new Error(
-        `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
-      );
-
-    return (
-      <button
-        {...rest}
-        ref={ref}
-        type={type}
-        className={`${classes.button} ${className ? className : ""}`}
-      >
-        {children}
-      </button>
+  if (!validTypes.includes(type))
+    throw new Error(
+      `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
     );
-  }
-);
+
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      type={type}
+      className={`${classes.button} ${className ? className : ""}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const BaseButton = React.forwardRef(BaseButtonComponent);

package/src/Button/Button.module.scss

@@ -42,4 +42,13 @@
     padding-left: 1.25rem;
     padding-right: 1rem;
   }
+
+  i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.5rem;
+    margin-right: 0.25rem;
+  }
 }

package/src/Button/Button.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React from "react";
+import React, { ForwardRefRenderFunction } from "react";
 import { BaseButton, Props as BaseButtonProps } from "./BaseButton";
 import classes from "./Button.module.scss";
 
@@ -25,47 +25,47 @@ export interface Props extends BaseButtonProps {
   variant?: "text" | "fill" | "outline";
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      children,
-      variant = "fill",
-      color = "primary",
-      startIcon = false,
-      endIcon = false,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const additionalClasses = [];
+const ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  {
+    children,
+    variant = "fill",
+    color = "primary",
+    startIcon = false,
+    endIcon = false,
+    className,
+    ...rest
+  },
+  ref
+) => {
+  const additionalClasses = [];
 
-    if (startIcon || endIcon) {
-      additionalClasses.push(classes["has-icon"]);
-    }
-
-    if (startIcon) {
-      additionalClasses.push(classes["start-icon"]);
-    }
+  if (startIcon || endIcon) {
+    additionalClasses.push(classes["has-icon"]);
+  }
 
-    if (endIcon) {
-      additionalClasses.push(classes["end-icon"]);
-    }
+  if (startIcon) {
+    additionalClasses.push(classes["start-icon"]);
+  }
 
-    if (className) {
-      additionalClasses.push(className);
-    }
+  if (endIcon) {
+    additionalClasses.push(classes["end-icon"]);
+  }
 
-    return (
-      <BaseButton
-        {...rest}
-        ref={ref}
-        className={`${classes[color]} ${classes[variant]} ${additionalClasses.join(" ")}`}
-      >
-        {startIcon && <i>{startIcon}&nbsp;</i>}
-        <span>{children}</span>
-        {endIcon && <i>&nbsp;{endIcon}</i>}
-      </BaseButton>
-    );
+  if (className) {
+    additionalClasses.push(className);
   }
-);
+
+  return (
+    <BaseButton
+      {...rest}
+      ref={ref}
+      className={`${classes[color]} ${classes[variant]} ${additionalClasses.join(" ")}`}
+    >
+      {startIcon && <i>{startIcon}</i>}
+      <span>{children}</span>
+      {endIcon && <i>&nbsp;{endIcon}</i>}
+    </BaseButton>
+  );
+};
+
+export const Button = React.forwardRef(ButtonComponent);

package/src/Button/IconButton.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { Fragment } from "react";
+import React, { ForwardRefRenderFunction, Fragment } from "react";
 import { BaseButton, Props as BaseButtonProps } from "./BaseButton";
 import classes from "./IconButton.module.scss";
 import readyclasses from "../readyclasses.module.scss";
@@ -27,33 +27,33 @@ export interface Props extends BaseButtonProps {
   title?: string;
 }
 
-export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
-  (
-    { children, color = "primary", variant = "text", iconSize = "m", title, className, ...rest },
-    ref
-  ) => {
-    if (!title) {
-      console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
-    }
-
-    const iconButtonClasses = [
-      classes["icon-button"],
-      classes[variant],
-      classes[color],
-      classes["button-" + iconSize]
-    ];
+export const IconButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, color = "primary", variant = "text", iconSize = "m", title, className, ...rest },
+  ref
+) => {
+  if (!title) {
+    console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
+  }
 
-    if (className) {
-      iconButtonClasses.push(className);
-    }
+  const iconButtonClasses = [
+    classes["icon-button"],
+    classes[variant],
+    classes[color],
+    classes["button-" + iconSize]
+  ];
 
-    return (
-      <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(" ")}>
-        <Fragment>
-          {children}
-          <span className={readyclasses["sr-only"]}>{title}</span>
-        </Fragment>
-      </BaseButton>
-    );
+  if (className) {
+    iconButtonClasses.push(className);
   }
-);
+
+  return (
+    <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(" ")}>
+      <Fragment>
+        {children}
+        <span className={readyclasses["sr-only"]}>{title}</span>
+      </Fragment>
+    </BaseButton>
+  );
+};
+
+export const IconButton = React.forwardRef(IconButtonComponent);