@onewelcome/react-lib-components 2.0.0 → 2.2.0

package/dist/esm/components/Form/Input/Input.d.ts

@@ -1,12 +1,13 @@
-import React, { ComponentPropsWithRef } from "react";
+import React, { ComponentPropsWithRef, ReactNode } from "react";
 import { FormElement } from "../form.interfaces";
+import { MergeElementProps } from "../../../interfaces";
 export declare const dateTypes: readonly ["date", "time", "datetime-local"];
 export type Type = "text" | "email" | "file" | "number" | "password" | "search" | "tel" | "url" | "hidden" | (typeof dateTypes)[number];
-export interface Props extends ComponentPropsWithRef<"input">, FormElement {
+export type Props = MergeElementProps<"input", FormElement & {
     wrapperProps?: ComponentPropsWithRef<"div">;
     labeledBy?: string;
     type: Type;
-    suffix?: string;
-    prefix?: string;
-}
+    suffix?: ReactNode;
+    prefix?: ReactNode;
+}>;
 export declare const Input: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Form/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithRef } from "react";
 import { Props as CheckboxProps } from "../Checkbox/Checkbox";
-export interface Props extends ComponentPropsWithRef<"input">, Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "children" | "label"> {
-    children: string;
+export interface Props extends ComponentPropsWithRef<"input">, Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "label"> {
+    label?: string | React.ReactElement;
 }
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Icon/Icon.d.ts

@@ -25,6 +25,7 @@ export declare enum Icons {
     Equal = "equal",
     Error = "error-circle",
     Eye = "eye",
+    EyeBlocked = "eye-blocked",
     Filter = "filter",
     FilterAlt = "filter-alt",
     FilterAltArrow = "filter-alt-arrow",

package/dist/esm/interfaces.d.ts

@@ -1,4 +1,6 @@
+import React from "react";
 export type DataAttributeKey = `data-${string}`;
 export interface KeyValuePair {
     [dataAttribute: DataAttributeKey]: unknown;
 }
+export type MergeElementProps<T extends React.ElementType, P> = Omit<React.ComponentPropsWithRef<T>, keyof P> & P;

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",

package/src/components/Button/IconButton.tsx

@@ -47,7 +47,7 @@ export const IconButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Pr
   }
 
   return (
-    <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(" ")}>
+    <BaseButton {...rest} ref={ref} title={title} className={iconButtonClasses.join(" ")}>
       <Fragment>
         {children}
         <span className={readyclasses["sr-only"]}>{title}</span>

package/src/components/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -58,9 +58,8 @@ const DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, P
       name={item.name}
       checked={!item.hidden}
       onChange={() => onToggleClicked(item.name)}
-    >
-      {item.headline}
-    </Toggle>
+      label={item.headline}
+    />
   ));
 
   const handleBackdropClick = () => onClose();

package/src/components/DataGrid/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
             class="button  icon-button text default button-m"
             id="consent_menu_Paweł"
             tabindex="0"
+            title="Actions for Paweł"
             type="button"
           >
             <span
@@ -111,6 +112,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
             class="button  icon-button text default button-m"
             id="consent_menu_Michał"
             tabindex="0"
+            title="Actions for Michał"
             type="button"
           >
             <span
@@ -174,6 +176,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
             class="button  icon-button text default button-m"
             id="consent_menu_Daniel"
             tabindex="0"
+            title="Actions for Daniel"
             type="button"
           >
             <span
@@ -237,6 +240,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
             class="button  icon-button text default button-m"
             id="consent_menu_Jasha"
             tabindex="0"
+            title="Actions for Jasha"
             type="button"
           >
             <span

package/src/components/Form/Checkbox/Checkbox.test.tsx

@@ -159,7 +159,7 @@ describe("Checkbox should have proper attributes", () => {
   it("should have a correctly linked label element", () => {
     const { checkbox, container } = createCheckbox(defaultParams => ({
       ...defaultParams,
-      children: "Label"
+      label: "Label"
     }));
 
     const id = checkbox.getAttribute("id");
@@ -168,6 +168,19 @@ describe("Checkbox should have proper attributes", () => {
     expect(label).toBeTruthy();
     expect(label).toHaveTextContent("Label");
   });
+
+  it("should have a react element as label", () => {
+    const { checkbox, container } = createCheckbox(defaultParams => ({
+      ...defaultParams,
+      label: <span>Label element</span>
+    }));
+
+    const id = checkbox.getAttribute("id");
+    const label = container.querySelector(`label[for=${id}]`);
+
+    expect(label).toBeTruthy();
+    expect(label).toHaveTextContent("Label element");
+  });
 });
 
 describe("Checkbox should be interactive", () => {
@@ -207,7 +220,6 @@ describe("missing attributes gets us errors", () => {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
       createCheckbox(defaultParams => ({
         ...defaultParams,
-        name: "testing",
         children: <Checkbox name="test">Test</Checkbox>
       }));
     } catch (e: any) {
@@ -215,7 +227,7 @@ describe("missing attributes gets us errors", () => {
     }
 
     const expected =
-      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.";
+      "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.";
 
     expect(actual).toEqual(expected);
 
@@ -264,8 +276,7 @@ describe("missing attributes gets us errors", () => {
       actual = e.message;
     }
 
-    const expected =
-      "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.";
+    const expected = "Please pass a 'name' prop to your <Checkbox> component.";
 
     expect(actual).toEqual(expected);
 

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -31,11 +31,10 @@ import {
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
 
-const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.["data-toggle"];
+const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
 export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
-  children: ReactNode;
-  label?: string;
+  label?: string | React.ReactElement;
   indeterminate?: boolean;
   helperProps?: FormHelperTextProps;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
@@ -85,24 +84,13 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   }, []);
 
   const determineLabel = () => {
+    // this should be temporary, for backwards compatibility;
+    // once the components implementing checkboxes in microfrontends are updated, only label should be returned
     if (label) {
       return label;
-    } else if (children === undefined) {
-      throw new Error(
-        "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component."
-      );
-    }
-
-    if (
-      typeof children === "string" ||
-      (typeof children === "object" && (children as ReactElement).type === "span")
-    ) {
+    } else if (typeof children === "string") {
       return children;
     }
-
-    throw new Error(
-      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox."
-    );
   };
 
   const renderNestedCheckboxes = () => (

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

@@ -227,6 +227,22 @@ describe("It should render prefix and suffix ", () => {
     expect(getByText(suffix)).toBeDefined();
   });
 
+  it("renders prefix and suffix when they are elements", () => {
+    const prefix = <span data-testid="prefix">http://</span>;
+    const suffix = <span data-testid="suffix">.com</span>;
+    const { getByTestId } = createInput(defaultParams => ({
+      ...defaultParams,
+      prefix,
+      suffix
+    }));
+
+    const prefixElement = getByTestId("prefix");
+    const suffixElement = getByTestId("suffix");
+
+    expect(prefixElement).toBeInTheDocument();
+    expect(suffixElement).toBeInTheDocument();
+  });
+
   it("error icon should be visible with suffix", () => {
     const suffix = ".com";
     const { input, getByText } = createInput(defaultParams => ({

package/src/components/Form/Input/Input.tsx

@@ -20,12 +20,14 @@ import React, {
   Ref,
   useEffect,
   useRef,
-  useState
+  useState,
+  ReactNode
 } from "react";
 import classes from "./Input.module.scss";
 import readyclasses from "../../../readyclasses.module.scss";
 import { FormElement } from "../form.interfaces";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+import { MergeElementProps } from "../../../interfaces";
 
 export const dateTypes = ["date", "time", "datetime-local"] as const;
 
@@ -41,13 +43,16 @@ export type Type =
   | "hidden"
   | (typeof dateTypes)[number];
 
-export interface Props extends ComponentPropsWithRef<"input">, FormElement {
-  wrapperProps?: ComponentPropsWithRef<"div">;
-  labeledBy?: string;
-  type: Type;
-  suffix?: string;
-  prefix?: string;
-}
+export type Props = MergeElementProps<
+  "input",
+  FormElement & {
+    wrapperProps?: ComponentPropsWithRef<"div">;
+    labeledBy?: string;
+    type: Type;
+    suffix?: ReactNode;
+    prefix?: ReactNode;
+  }
+>;
 
 const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   {
@@ -80,6 +85,10 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
 
   const inputClassNames = [classes["input"]];
 
+  const renderElement = (el: ReactNode) => {
+    return typeof el === "string" ? <span>{el}</span> : el;
+  };
+
   (dateTypes as ReadonlyArray<string>).includes(type) &&
     inputClassNames.push(classes["shrink-width-for-date-icon"]);
   className && inputClassNames.push(className);
@@ -107,7 +116,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     >
       {prefix && (
         <div data-prefix className={classes["prefix"]}>
-          <span>{prefix}</span>
+          {renderElement(prefix)}
         </div>
       )}
       <input
@@ -131,9 +140,10 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       {icon}
       {suffix && (
         <div ref={suffixRef} data-suffix className={classes["suffix"]}>
-          <span>{suffix}</span>
+          {renderElement(suffix)}
         </div>
       )}
+
       <span className={outlineClasses.join(" ")}></span>
     </div>
   );

package/src/components/Form/Toggle/Toggle.test.tsx

@@ -17,10 +17,12 @@
 import React, { useRef, useEffect } from "react";
 import { Toggle, Props } from "./Toggle";
 import { render } from "@testing-library/react";
+import { Checkbox } from "../Checkbox/Checkbox";
 
 const defaultParams: Props = {
-  children: "label",
-  name: "example toggle"
+  children: "Helper text",
+  name: "example toggle",
+  label: "Label"
 };
 
 const createToggle = (params?: (defaultParams: Props) => Props) => {
@@ -28,11 +30,7 @@ const createToggle = (params?: (defaultParams: Props) => Props) => {
   if (params) {
     parameters = params(defaultParams);
   }
-  const queries = render(
-    <Toggle {...parameters} data-testid="toggle">
-      toggle content
-    </Toggle>
-  );
+  const queries = render(<Toggle {...parameters} data-testid="toggle"></Toggle>);
   const toggle = queries.getByTestId("toggle");
 
   return {
@@ -72,7 +70,11 @@ describe("ref should work", () => {
         }
       }, [ref]);
 
-      return <Toggle {...defaultParams} data-ref="testing" ref={ref} />;
+      return (
+        <Toggle {...defaultParams} data-ref="testing" ref={ref}>
+          test label
+        </Toggle>
+      );
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {

package/src/components/Form/Toggle/Toggle.tsx

@@ -20,33 +20,37 @@ import classes from "./Toggle.module.scss";
 
 export interface Props
   extends ComponentPropsWithRef<"input">,
-    Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "children" | "label"> {
-  children: string;
+    Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "label"> {
+  label?: string | React.ReactElement;
 }
 
 const ToggleComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
-  { children, checked, disabled, helperProps, ...rest }: Props,
+  { checked, disabled, helperProps, className, label, ...rest }: Props,
   ref
-) => (
-  <div className={classes["toggle-wrapper"]}>
-    <Checkbox
-      {...rest}
-      ref={ref}
-      checked={checked}
-      className={classes["checkbox"]}
-      helperProps={{ className: classes["toggle-helper"], ...helperProps }}
-      disabled={disabled}
-      label={children}
-    >
-      <span
-        data-toggle
-        aria-hidden="true"
-        className={`${classes["toggle"]} ${checked ? classes["checked"] : ""} ${
-          disabled ? classes["disabled"] : ""
-        } `}
-      ></span>
-    </Checkbox>
-  </div>
-);
+) => {
+  const classNames = [classes["toggle-wrapper"]];
+  className && classNames.push(className);
+  return (
+    <div className={classNames.join(" ")}>
+      <Checkbox
+        {...rest}
+        ref={ref}
+        checked={checked}
+        className={classes["checkbox"]}
+        helperProps={{ className: classes["toggle-helper"], ...helperProps }}
+        disabled={disabled}
+        label={label}
+      >
+        <span
+          data-toggle="true"
+          aria-hidden="true"
+          className={`${classes["toggle"]} ${checked ? classes["checked"] : ""} ${
+            disabled ? classes["disabled"] : ""
+          } `}
+        ></span>
+      </Checkbox>
+    </div>
+  );
+};
 
 export const Toggle = React.forwardRef(ToggleComponent);

package/src/components/Icon/Icon.module.scss

@@ -16,10 +16,10 @@
 
 @font-face {
   font-family: "icomoon";
-  src: url("../../font/icomoon.eot?9c63pa");
-  src: url("../../font/icomoon.eot?9c63pa#iefix") format("embedded-opentype"),
-    url("../../font/icomoon.ttf?9c63pa") format("truetype"),
-    url("../../font/icomoon.woff?9c63pa") format("woff");
+  src: url("../../font/icomoon.eot?ywvhmn");
+  src: url("../../font/icomoon.eot?ywvhmn#iefix") format("embedded-opentype"),
+    url("../../font/icomoon.ttf?ywvhmn") format("truetype"),
+    url("../../font/icomoon.woff?ywvhmn") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -312,3 +312,8 @@
   content: "\e93f";
   @include fontProperties();
 }
+
+.icon-eye-blocked:before {
+  content: "\e9d1";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -43,6 +43,7 @@ export enum Icons {
   Equal = "equal",
   Error = "error-circle",
   Eye = "eye",
+  EyeBlocked = "eye-blocked",
   Filter = "filter",
   FilterAlt = "filter-alt",
   FilterAltArrow = "filter-alt-arrow",

package/src/font/icomoon.svg

@@ -74,4 +74,5 @@
 <glyph unicode="&#xe941;" glyph-name="file-outline" d="M597.333 874.667h-341.333c-46.933 0-85.333-38.4-85.333-85.333v-682.667c0-46.933 38.4-85.333 85.333-85.333h512c46.933 0 85.333 38.4 85.333 85.333v512l-256 256zM768 106.667h-512v682.667h298.667v-213.333h213.333v-469.333z" />
 <glyph unicode="&#xe942;" glyph-name="file-upload-outline" d="M597.333 874.667l256-256v-512c0-47.128-38.205-85.333-85.333-85.333v0h-512c-47.128 0-85.333 38.205-85.333 85.333v0 682.667c0 47.128 38.205 85.333 85.333 85.333v0h341.333zM768 106.667v469.333h-213.333v213.333h-298.667v-682.667h512zM512 448l170.667-170.667h-106.667v-128h-128v128h-106.667l170.667 170.667z" />
 <glyph unicode="&#xe943;" glyph-name="file-download-outline" d="M597.333 874.667l256-256v-512c0-47.128-38.205-85.333-85.333-85.333v0h-512c-47.128 0-85.333 38.205-85.333 85.333v0 682.667c0 47.128 38.205 85.333 85.333 85.333v0h341.333zM768 106.667v469.333h-213.333v213.333h-298.667v-682.667h512zM512 149.333l-170.667 170.667h106.667v128h128v-128h106.667l-170.667-170.667z" />
+<glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>