@onewelcome/react-lib-components 1.5.0 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -55,7 +55,7 @@
     "@babel/core": "^7.20.12",
     "@mdx-js/react": "^1.6.22",
     "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
-    "@size-limit/preset-small-lib": "^7.0.8",
+    "@size-limit/preset-small-lib": "^8.1.2",
     "@storybook/addon-a11y": "^6.5.15",
     "@storybook/addon-docs": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
@@ -66,24 +66,24 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.15",
     "@storybook/theming": "^6.5.15",
-    "@testing-library/dom": "^8.19.1",
+    "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@tsconfig/create-react-app": "^1.0.3",
-    "@tsconfig/recommended": "^1.0.1",
+    "@tsconfig/recommended": "^1.0.2",
     "@types/color-convert": "^2.0.0",
     "@types/mdx": "^2.0.3",
     "@types/react": "^17.0.52",
     "@types/react-dom": "^17.0.18",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "babel-loader": "^9.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "babel-loader": "^9.1.2",
     "dts-cli": "^1.6.3",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^27.2.1",
@@ -95,16 +95,16 @@
     "jest-junit": "^15.0.0",
     "lint-staged": "^13.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
     "react-router": "^6.6.2",
-    "react-router-dom": "^6.6.2",
+    "react-router-dom": "^6.7.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
     "sass": "^1.57.1",
-    "size-limit": "^7.0.8",
+    "size-limit": "^8.1.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4"
   }

package/src/Button/BaseButton.module.scss

@@ -14,8 +14,8 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .button {
-  @include buttonBase();
+  @include mixins.buttonBase();
 }

package/src/Button/Button.module.scss

@@ -14,19 +14,18 @@
  *    limitations under the License.
  */
 
-@import "../readyclasses.module.scss";
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .fill {
-  @include button("fill");
+  @include mixins.button("fill");
 }
 
 .outline {
-  @include button("outline");
+  @include mixins.button("outline");
 }
 
 .text {
-  @include button("text");
+  @include mixins.button("text");
 }
 
 .has-icon {

package/src/Button/Button.tsx

@@ -21,7 +21,6 @@ import classes from "./Button.module.scss";
 export interface Props extends BaseButtonProps {
   startIcon?: React.ReactNode | false;
   endIcon?: React.ReactNode | false;
-  children?: React.ReactNode;
   variant?: "text" | "fill" | "outline";
 }
 

package/src/Button/IconButton.module.scss

@@ -14,8 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../readyclasses.module.scss";
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .icon-button {
   border: var(--button-border-width) var(--button-border-style) transparent;
@@ -57,14 +56,14 @@
   }
 
   &.fill {
-    @include button("fill", "icon");
+    @include mixins.button("fill", "icon");
   }
 
   &.text {
-    @include button("text", "icon");
+    @include mixins.button("text", "icon");
   }
 
   &.outline {
-    @include button("outline", "icon");
+    @include mixins.button("outline", "icon");
   }
 }

package/src/DataGrid/DataGrid.tsx

@@ -144,14 +144,15 @@ const DataGridInner = <T extends {}>(
             spacing={styleWithSpacing}
           />
           <DataGridBody
-            children={children}
             data={data}
             headers={internalHeaders}
             isLoading={isLoading}
             disableContextMenuColumn={disableContextMenuColumn}
             emptyLabel={emptyLabel}
             spacing={styleWithSpacing}
-          />
+          >
+            {children}
+          </DataGridBody>
         </table>
       </div>
       {paginationProps && !isLoading && (

package/src/DataGrid/DataGridActions/DataGridActions.tsx

@@ -52,6 +52,7 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     searchIconBtnProps = {},
     headers,
     onColumnToggled,
+    children,
     ...rest
   }: Props,
   ref
@@ -59,6 +60,9 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
   const [showColsPopover, setShowColsPopover] = useState(false);
   const showColumnBtn = useRef<HTMLButtonElement>(null);
+  const { children: addBtnChildren, ...restAddBtnProps } = addBtnProps;
+  const { children: columnsBtnChildren, ...restColumnsBtnProps } = columnsBtnProps;
+  const { children: searchBtnChildren, ...restSearchBtnProps } = searchBtnProps;
 
   return isHidden ? null : (
     <div {...rest} ref={ref} className={`${classes["actions"]} ${className ?? ""}`}>
@@ -70,9 +74,10 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
             title="Add item"
             type="button"
             variant="outline"
-            children="Add item"
-            {...addBtnProps}
-          />
+            {...restAddBtnProps}
+          >
+            {addBtnChildren ?? "Add item"}
+          </Button>
         )}
       </div>
       <div className={classes["right-actions"]}>
@@ -82,12 +87,13 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
               startIcon={<Icon icon={Icons.Change} />}
               title="Show/hide columns"
               variant="text"
-              children="Columns"
-              {...columnsBtnProps}
+              {...restColumnsBtnProps}
               className={`${classes["desktop"]} ${columnsBtnProps?.className ?? ""}`}
               ref={showColumnBtn}
               onClick={() => setShowColsPopover(true)}
-            />
+            >
+              {columnsBtnChildren ?? "Columns"}
+            </Button>
             <IconButton
               title="Show/hide columns"
               {...columnsBtnProps}
@@ -112,10 +118,11 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
               startIcon={<Icon icon={Icons.TableSearch} />}
               title="Search"
               variant="text"
-              children="Search"
-              {...searchBtnProps}
+              {...restSearchBtnProps}
               className={`${classes["desktop"]} ${searchBtnProps?.className ?? ""}`}
-            />
+            >
+              {searchBtnChildren ?? "Search"}
+            </Button>
             <IconButton
               title="Search"
               {...searchIconBtnProps}

package/src/DataGrid/DataGridBody/DataGridCell.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 .cell {
   min-height: 3.5rem;
@@ -29,7 +29,7 @@
   }
 
   .loading {
-    @include skeletonLoading();
+    @include mixins.skeletonLoading();
     border-radius: 0.5rem;
     height: 1.25rem;
     margin: 0.625rem 0;

package/src/DataGrid/DataGridHeader/DataGridHeader.test.tsx

@@ -21,8 +21,8 @@ import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
   headers: [
-    { name: "firstName", headline: "First name" },
-    { name: "lastName", headline: "Last name" }
+    { name: "firstName", headline: "First name", align: "center" },
+    { name: "lastName", headline: "Last name", align: "right" }
   ]
 };
 
@@ -36,7 +36,6 @@ const createDataGridHeader = (params?: (defaultParams: Props) => Props) => {
     container
   });
   const dataGridHeader = queries.getByTestId("dataGridHeader");
-
   return {
     ...queries,
     dataGridHeader
@@ -51,6 +50,12 @@ describe("DataGridHeader should render", () => {
     expect(getAllByRole("columnheader")).toHaveLength(2);
     expect(getByRole("cell")).toBeDefined(); //context-menu empty cell
 
+    const headerCells = dataGridHeader.querySelectorAll("th");
+
+    expect(headerCells).toHaveLength(2);
+    expect(headerCells[0]).toHaveStyle({ textAlign: "center" });
+    expect(headerCells[1]).toHaveStyle({ textAlign: "right" });
+
     expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
   });
 

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -77,7 +77,9 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
       return null;
     }
 
-    let headerStyle: React.CSSProperties = {};
+    let headerStyle: React.CSSProperties = {
+      textAlign: header.align || "left"
+    };
 
     if (index === 0) {
       headerStyle.paddingLeft = spacing?.paddingLeft;

package/src/DataGrid/datagrid.interfaces.ts

@@ -27,4 +27,5 @@ export interface HeaderCell {
   headline: string;
   disableSorting?: boolean;
   hidden?: boolean;
+  align?: "left" | "right" | "center";
 }

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 .input-wrapper {
   position: relative;
@@ -25,7 +25,7 @@
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   padding: 0 1.25rem;
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
 
   // General autofill styles
   input:-webkit-autofill,
@@ -64,7 +64,33 @@
     }
   }
 
-  @include outlineStates;
+  @include mixins.outlineStates;
+
+  [data-icon-status="success"],
+  [data-icon-status="error"] {
+    height: 100%;
+    width: 1.25rem;
+    box-sizing: border-box;
+    padding-top: calc(1rem - (1.25rem - 1rem));
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+
+    &:before {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+  }
 }
 
 .input {
@@ -76,7 +102,7 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
   background-color: transparent;
   z-index: 1;
 
@@ -93,41 +119,26 @@
     width: auto;
   }
 
-  @include browserOutlineDisabled;
+  @include mixins.browserOutlineDisabled;
 }
 
-@include outline;
+@include mixins.outline;
 
 .error input {
   color: var(--error);
-  padding-right: 3.5rem;
+  padding-right: 1.25rem;
 
   &.remove-extra-indent {
     padding-right: 0;
   }
 }
-
-.warning {
-  color: var(--error);
-  position: absolute;
-  height: 100%;
-  width: 1.25rem;
-  right: 1.25rem;
-  top: 0;
-  font-size: 1.125rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-
-  &:before {
-    height: 1.3125rem;
-  }
+.success input {
+  padding-right: 1.25rem;
 }
 
 .input-wrapper [data-prefix],
 .input-wrapper [data-suffix] {
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
   display: block;
   z-index: 1;
 }

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

@@ -234,4 +234,14 @@ describe("It should render prefix and suffix ", () => {
     expect(input.querySelector("icon-warning")).toBeDefined();
     expect(getByText(suffix)).toBeDefined();
   });
+
+  it("success icon should be visible", () => {
+    const { input } = createInput(defaultParams => ({
+      ...defaultParams,
+      success: true
+    }));
+    const icon = input.querySelector(".icon-checkmark-circle-breakout");
+    expect(input.querySelector(".success")).toBeDefined();
+    expect(icon).toBeDefined();
+  });
 });

package/src/Form/Input/Input.tsx

@@ -24,8 +24,8 @@ import React, {
 } from "react";
 import classes from "./Input.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
-import { Icon, Icons } from "../../Icon/Icon";
 import { FormElement } from "../form.interfaces";
+import { useDetermineStatusIcon } from "../../hooks/useDetermineStatusIcon";
 
 export const dateTypes = ["date", "time", "datetime-local"] as const;
 
@@ -39,7 +39,7 @@ export type Type =
   | "tel"
   | "url"
   | "hidden"
-  | typeof dateTypes[number];
+  | (typeof dateTypes)[number];
 
 export interface Props extends ComponentPropsWithRef<"input">, FormElement {
   wrapperProps?: ComponentPropsWithRef<"div">;
@@ -52,6 +52,7 @@ export interface Props extends ComponentPropsWithRef<"input">, FormElement {
 const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   {
     error = false,
+    success = false,
     className,
     name,
     style,
@@ -69,7 +70,6 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
 ) => {
   const [focus, setFocus] = useState(false);
   const inputWrapperRef = useRef<HTMLDivElement>(null);
-  const errorIconRef = useRef<HTMLDivElement>(null);
   const suffixRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -84,7 +84,6 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     inputClassNames.push(classes["shrink-width-for-date-icon"]);
   className && inputClassNames.push(className);
 
-  const iconClassNames = [classes["warning"]];
   const wrapperClasses = [classes["input-wrapper"]];
   const outlineClasses = [classes["outline"]];
 
@@ -95,6 +94,9 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   disabled && wrapperClasses.push(classes["disabled"]) && outlineClasses.push(classes["disabled"]);
   error && wrapperClasses.push(classes["error"]) && outlineClasses.push(classes["error"]);
   focus && wrapperClasses.push(classes["focus"]) && outlineClasses.push(classes["focus"]);
+  success && wrapperClasses.push(classes["success"]);
+
+  const icon = useDetermineStatusIcon({ success, error });
 
   return (
     <div
@@ -126,12 +128,12 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         className={inputClassNames.join(" ")}
         spellCheck={rest.spellCheck || false}
       />
+      {icon}
       {suffix && (
         <div ref={suffixRef} data-suffix className={classes["suffix"]}>
           <span>{suffix}</span>
         </div>
       )}
-      {error && <Icon ref={errorIconRef} className={iconClassNames.join(" ")} icon={Icons.Error} />}
       <span className={outlineClasses.join(" ")}></span>
     </div>
   );

package/src/Form/Select/Select.module.scss

@@ -14,15 +14,14 @@
  *    limitations under the License.
  */
 
-@import "../../readyclasses.module.scss";
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 $listItemHeight: 2.125rem;
 
 .select {
   position: relative;
   box-sizing: border-box;
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
@@ -57,7 +56,6 @@ $listItemHeight: 2.125rem;
     position: relative;
     width: 100%;
     min-height: calc(4rem - (2 * var(--input-border-width)));
-    border: 0;
     padding: 0 1.25rem;
     background-color: transparent;
     border-color: var(--light-grey-border);
@@ -66,7 +64,7 @@ $listItemHeight: 2.125rem;
     border-radius: var(--input-border-radius);
     font-size: var(--font-size);
     cursor: pointer;
-    @include transition(all, 0.2s, ease-in-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
 
     &:focus {
       outline: 0;
@@ -173,7 +171,12 @@ $listItemHeight: 2.125rem;
   display: flex;
   align-items: center;
 
-  .warning {
+  [data-icon-status="success"] {
+    color: var(--success);
+    font-size: 1.25rem;
+  }
+
+  [data-icon-status="error"] {
     color: var(--error);
     font-size: 1.25rem;
   }

package/src/Form/Select/Select.test.tsx

@@ -119,6 +119,17 @@ describe("Select should render", () => {
     expect(button).toHaveAttribute("aria-invalid", "true");
     expect(select.querySelector("[data-clear]")).not.toBeInTheDocument();
   });
+
+  it("should have a success icon when success state", () => {
+    const { button } = createSelect(defaultParams => ({
+      ...defaultParams,
+      success: true
+    }));
+
+    const icon = button.querySelector("[class*='icon-checkmark-circle-breakout']");
+    expect(button).toHaveClass("success");
+    expect(icon).toBeDefined();
+  });
 });
 
 describe("ref should work", () => {

package/src/Form/Select/Select.tsx

@@ -33,6 +33,7 @@ import { useBodyClick } from "../../hooks/useBodyClick";
 import readyclasses from "../../readyclasses.module.scss";
 import { filterProps } from "../../util/helper";
 import { useArrowNavigation, useSelectPositionList } from "./SelectService";
+import { useDetermineStatusIcon } from "../../hooks/useDetermineStatusIcon";
 
 type PartialInputProps = Partial<InputProps>;
 
@@ -67,6 +68,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     selectButtonProps,
     className,
     error = false,
+    success = false,
     value,
     clearLabel = "Clear selection",
     onChange,
@@ -90,7 +92,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
   const searchInputRef = useRef<HTMLInputElement>(null);
   const customSelectButtonRef = useRef<HTMLButtonElement>(null);
-
   const { onArrowNavigation } = useArrowNavigation({
     expanded,
     setExpanded,
@@ -183,13 +184,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     setFilter(event.currentTarget.value);
   };
 
-  const statusIcon = () => {
-    if (error) {
-      return <Icon className={classes["warning"]} icon={Icons.Warning} />;
-    }
-
-    return null;
-  };
+  const icon = useDetermineStatusIcon({ success, error });
 
   const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
     onChange && onChange(event);
@@ -214,6 +209,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
   error && additionalClasses.push(classes.error);
   disabled && additionalClasses.push(classes.disabled);
   className && additionalClasses.push(className);
+  success && additionalClasses.push(classes.success);
 
   /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */
   return (
@@ -262,7 +258,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
             {value?.length > 0 && <span data-display-inner>{display}</span>}
           </div>
           <div className={classes["status"]}>
-            {statusIcon()}
+            {icon}
             <Icon className={classes["triangle-down"]} icon={Icons.TriangleDown} />
           </div>
         </button>

package/src/Form/Select/SelectService.ts

@@ -174,7 +174,7 @@ export const useSelectPositionList = ({
 
   const calculateOptionListMaxHeight = (position: Position) => {
     // Calculate max height if there's more space below the select
-    const listHeight = optionListReference.current!.getBoundingClientRect().height;
+    const listHeight = optionListReference.current?.getBoundingClientRect().height;
     const transformOrigin = position.top !== "initial" ? "top" : "bottom";
 
     const availableSpace =
@@ -184,7 +184,7 @@ export const useSelectPositionList = ({
           16
         : containerReference.current!.getBoundingClientRect()[transformOrigin] - 16;
 
-    if (availableSpace < listHeight) {
+    if (listHeight && availableSpace < listHeight) {
       setOptionsListMaxHeight(`${availableSpace}px`);
       setOpacity(100);
       return;