@onewelcome/react-lib-components 1.6.0 → 1.8.0

package/dist/util/helper.d.ts

@@ -5,4 +5,11 @@ export declare const generateID: (length?: number, stringToWeaveIn?: string) =>
 export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => KeyValuePair;
 export declare const debounce: (fn: (...args: unknown[]) => unknown, delay: number) => (...args: unknown[]) => void;
 export declare const throttle: (fn: (...args: unknown[]) => unknown, delay: number) => () => void;
+export declare const isEqual: (x: any, y: any) => boolean;
+export declare const areArraysDifferent: (arr1: Record<string, any>[], arr2: Record<string, any>[], key: string) => boolean;
+export declare const getValueByPath: (obj: {
+    [key: string]: any;
+}, path: string) => any;
+/** Source: https://stackoverflow.com/a/42769683/5084110 */
+export declare const remToPx: (rem: number) => number;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -22,6 +22,7 @@
     "analyze": "size-limit --why",
     "build": "dts build",
     "build-storybook": "build-storybook",
+    "chromatic": "chromatic --exit-zero-on-changes",
     "dev": "npm-run-all -p start test:watch storybook",
     "lint": "eslint '**/*.{ts,tsx}'",
     "prepare": "husky install && dts build",
@@ -52,20 +53,20 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.0",
     "@mdx-js/react": "^1.6.22",
     "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
-    "@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",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addons": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
+    "@size-limit/preset-small-lib": "^8.2.4",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addons": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.15",
-    "@storybook/theming": "^6.5.15",
+    "@storybook/react": "^6.5.16",
+    "@storybook/theming": "^6.5.16",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
@@ -79,11 +80,12 @@
     "@types/react-dom": "^17.0.18",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
     "babel-loader": "^9.1.2",
+    "chromatic": "^6.17.1",
     "dts-cli": "^1.6.3",
-    "eslint": "^8.32.0",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^27.2.1",
@@ -93,19 +95,20 @@
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-junit": "^15.0.0",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.1.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
     "react-router": "^6.6.2",
-    "react-router-dom": "^6.7.0",
+    "react-router-dom": "^6.8.2",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.3",
     "size-limit": "^8.1.1",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.4"
+    "style-loader": "^3.3.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   }
 }

package/src/Breadcrumbs/Breadcrumbs.module.scss

@@ -16,12 +16,12 @@
 
 .breadcrumbs {
   .last {
-    color: var(--greyed-out);
+    color: var(--color-primary);
     margin: 0;
   }
 
   .icon {
-    color: var(--greyed-out);
+    color: var(--color-primary);
     font-size: 0.75rem;
     line-height: 1.5rem;
     margin-left: 0.375rem;

package/src/Button/Button.module.scss

@@ -33,13 +33,13 @@
   align-items: center;
 
   &.start-icon {
-    padding-left: 1rem;
+    padding-left: 0.75rem;
     padding-right: 1.25rem;
   }
 
   &.end-icon {
     padding-left: 1.25rem;
-    padding-right: 1rem;
+    padding-right: 0.75rem;
   }
 
   i {
@@ -51,3 +51,15 @@
     margin-right: 0.25rem;
   }
 }
+
+@media only screen and (min-width: 30em) {
+  .has-icon {
+    &.start-icon {
+      padding-left: 1rem;
+    }
+
+    &.end-icon {
+      padding-right: 1rem;
+    }
+  }
+}

package/src/ContextMenu/ContextMenuItem.module.scss

@@ -22,6 +22,7 @@
     border: 0;
     font-family: var(--font-family);
     font-size: var(--font-size);
+    line-height: var(--default-line-height);
     cursor: pointer;
     width: 100%;
     height: 100%;

package/src/DataGrid/DataGridHeader/DataGridHeader.module.scss

@@ -20,7 +20,7 @@
     position: absolute;
     width: calc(100% - 2rem);
     left: 1rem;
-    border-bottom: 1px solid var(--grey);
+    border-bottom: 2px solid var(--light-grey-border);
   }
 }
 

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.module.scss

@@ -45,7 +45,7 @@
 .headline {
   font-family: var(--font-family);
   font-size: var(--font-size);
-  line-height: 1.5;
+  line-height: var(--default-line-height);
   font-weight: 700;
   color: var(--default);
 }

package/src/Form/Fieldset/Fieldset.module.scss

@@ -14,9 +14,11 @@
  *    limitations under the License.
  */
 
+@use "src/variables";
+
 .fieldset {
   border: 0;
-  padding: 1rem 1.25rem;
+  padding: 1rem variables.$form-element-horizontal-padding-mobile;
   border-radius: 0.5rem;
   margin: 0;
 
@@ -43,3 +45,8 @@
     }
   }
 }
+@media only screen and (min-width: 30em) {
+  .fieldset {
+    padding: 1rem variables.$form-element-horizontal-padding-desktop;
+  }
+}

package/src/Form/FileUpload/FileItem/FileItem.modules.scss

@@ -0,0 +1,75 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@import "../../../mixins.module.scss";
+
+.file-item-wrapper {
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  @include transition(all, 0.2s, ease-in-out);
+
+  [class*="icon"] {
+    font-size: 1.25rem;
+  }
+
+  .progress-bar {
+    background-color: var(--light-pink);
+  }
+
+  span[class*="bar--"] {
+    border-radius: var(--input-border-radius);
+    height: 1rem;
+  }
+
+  .file-name {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    .friendly-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .action-icon {
+    margin-left: auto;
+    color: var(--color-primary);
+    cursor: pointer;
+    padding-left: 1.25rem;
+  }
+
+  .file-icon {
+    margin-right: 0.5rem;
+  }
+
+  .file-subtitle,
+  .progress-bar {
+    display: block;
+    margin: 0.3125rem 1.75rem;
+    padding: 0;
+  }
+
+  .error,
+  .retry {
+    color: var(--error);
+  }
+
+  .readonly {
+    color: var(--greyed-out);
+  }
+}

package/src/Form/FileUpload/FileItem/FileItem.test.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { FILE_ACTION, FileItem, Props } from "./FileItem";
+import { render } from "@testing-library/react";
+import user from "@testing-library/user-event";
+
+const defaultParams: Props = {
+  name: "Test.txt"
+};
+
+const createFileItem = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<FileItem {...parameters} />);
+  const component = queries.getByLabelText(`${parameters.name}-wrapper`);
+  const title = component.querySelector(".file-name");
+  const fileIcon = component.querySelector(".file-icon");
+  const actionIcon = component.querySelector(".action-icon");
+  const errorSubtitle = component.querySelector(".file-subtitle");
+  const progressBar = component.querySelector(".progress-bar");
+
+  return {
+    ...queries,
+    component,
+    title,
+    fileIcon,
+    actionIcon,
+    errorSubtitle,
+    progressBar
+  };
+};
+
+describe("component should render", () => {
+  it("renders without crashing", () => {
+    const { component } = createFileItem();
+
+    expect(component).toBeDefined();
+  });
+});
+
+describe("component should change display the correct style and elements according to the status", () => {
+  it("should show the correct details for completed", () => {
+    const { actionIcon, title } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "completed"
+    }));
+    expect(title).toHaveClass("completed");
+    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.DELETE);
+  });
+
+  it("should show the correct details for uploading", () => {
+    const { actionIcon, title, progressBar } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "uploading"
+    }));
+    expect(title).toHaveClass("uploading");
+    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.ABORT);
+    expect(progressBar).toBeDefined();
+  });
+
+  it("should show the correct details for readonly", () => {
+    const { actionIcon, title } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "readonly"
+    }));
+    expect(title).toHaveClass("readonly");
+    expect(actionIcon).toBeNull();
+  });
+
+  it("should show the correct details for error", () => {
+    const { actionIcon, title, errorSubtitle } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "error"
+    }));
+    expect(title).toHaveClass("error");
+    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.REMOVE);
+    expect(errorSubtitle).toBeDefined();
+  });
+
+  it("should show the correct details for retry", () => {
+    const { actionIcon, title } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "retry"
+    }));
+    expect(title).toHaveClass("retry");
+    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.RETRY);
+  });
+});
+
+describe("component should transmit the correct message upwards when a file action icon is clicked", () => {
+  it("should call retry action", () => {
+    const onRequestedFileAction = jest.fn();
+    const { actionIcon } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "retry",
+      onRequestedFileAction
+    }));
+
+    user.click(actionIcon as Element);
+    expect(onRequestedFileAction).toHaveBeenNthCalledWith(1, FILE_ACTION.RETRY, defaultParams.name);
+  });
+});

package/src/Form/FileUpload/FileItem/FileItem.tsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import classes from "./FileItem.modules.scss";
+import { Typography } from "../../../Typography/Typography";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { ProgressBar } from "../../../ProgressBar/ProgressBar";
+import { FileType } from "../FileUpload";
+
+export type UploadProgress = "uploading" | "completed" | "error" | "readonly" | "retry";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  name: string;
+  status?: UploadProgress;
+  progress?: number;
+  error?: string;
+  onRequestedFileAction?: (action: FILE_ACTION, name: FileType["name"]) => void;
+}
+interface FileItemIcons {
+  fileIcon: Icons;
+  actionIcon?: { type: Icons; action: FILE_ACTION };
+}
+
+export enum FILE_ACTION {
+  DELETE = "delete",
+  REMOVE = "remove",
+  ABORT = "abort",
+  RETRY = "retry"
+}
+
+const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { name, status, error, progress, onRequestedFileAction }: Props,
+  ref
+) => {
+  const determineIcons = (status?: UploadProgress): FileItemIcons => {
+    switch (status) {
+      case "completed":
+        return {
+          fileIcon: Icons.FileOutline,
+          actionIcon: {
+            type: Icons.Trash,
+            action: FILE_ACTION.DELETE
+          }
+        };
+      case "error":
+        return {
+          fileIcon: Icons.InfoCircle,
+          actionIcon: {
+            type: Icons.Times,
+            action: FILE_ACTION.REMOVE
+          }
+        };
+      case "uploading":
+        return {
+          fileIcon: Icons.FileUpload,
+          actionIcon: {
+            type: Icons.Times,
+            action: FILE_ACTION.ABORT
+          }
+        };
+      case "retry":
+        return {
+          fileIcon: Icons.InfoCircle,
+          actionIcon: {
+            type: Icons.Refresh,
+            action: FILE_ACTION.RETRY
+          }
+        };
+      case "readonly":
+      default:
+        return { fileIcon: Icons.FileOutline };
+    }
+  };
+
+  const icons = determineIcons(status);
+
+  const getFriendlyNameAndExtension = (name: string) => {
+    const index = name.indexOf(".");
+    return { friendlyName: name.slice(0, index), extension: name.slice(index + 1) };
+  };
+
+  const { friendlyName, extension } = getFriendlyNameAndExtension(name);
+
+  return (
+    <div ref={ref} className={classes["file-item-wrapper"]} aria-label={`${name}-wrapper`}>
+      <Typography
+        variant={"body"}
+        title={name}
+        className={`${classes["file-name"]} ${status ? classes[status] : ""}`}
+      >
+        <Icon icon={icons.fileIcon} className={classes["file-icon"]} />
+        <span className={classes["friendly-name"]}>{friendlyName}</span>.<span>{extension}</span>
+        {icons.actionIcon && (
+          <Icon
+            title={icons.actionIcon.action}
+            icon={icons.actionIcon.type}
+            className={classes["action-icon"]}
+            onClick={() =>
+              icons.actionIcon &&
+              onRequestedFileAction &&
+              onRequestedFileAction(icons.actionIcon.action, name)
+            }
+          />
+        )}
+      </Typography>
+      {error && (
+        <Typography
+          variant={"sub-text"}
+          className={`${classes["file-subtitle"]} ${status ? classes[status] : ""}`}
+        >
+          {error}
+        </Typography>
+      )}
+      {status === "uploading" ? (
+        <ProgressBar
+          className={classes["progress-bar"]}
+          placeholderText={""}
+          completed={progress}
+        />
+      ) : (
+        ""
+      )}
+    </div>
+  );
+};
+
+export const FileItem = React.forwardRef(FileItemComponent);

package/src/Form/FileUpload/FileUpload.module.scss

@@ -0,0 +1,106 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@import "../../mixins.module.scss";
+
+.file-upload-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.file-dropzone {
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  padding: 1.25rem;
+  position: relative;
+  @include transition(all, 0.2s, ease-in-out);
+  &.drag-active {
+    @include outline(
+      var(--color-primary),
+      var(--drag-border-style),
+      var(--input-border-width),
+      var(--input-border-radius),
+      var(--drag-background-color)
+    );
+    @include outlineStates;
+  }
+  &.error {
+    span[data-icon-status],
+    .file-upload-title,
+    .file-selector-sub-text {
+      color: var(--error);
+    }
+  }
+  &.success {
+    span[data-icon-status] {
+      color: var(--success);
+    }
+  }
+
+  &.disabled {
+    pointer-events: none;
+    background-color: var(--disabled);
+    color: var(--greyed-out);
+  }
+  span[data-icon-status] {
+    font-size: 1.25rem;
+    position: absolute;
+    top: 2.74rem;
+    right: 1.375rem;
+  }
+}
+
+.file-select {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  [class*="file"] {
+    font-size: 1.25rem;
+  }
+  [class*="typography"] {
+    margin-bottom: 0.625rem;
+  }
+}
+
+.upload-input {
+  display: block;
+  width: 100%;
+  border: none;
+  text-transform: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  cursor: pointer;
+  &:focus {
+    outline: none;
+  }
+}
+
+.file-upload-btn {
+  position: relative;
+}
+
+.file-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.75rem 0;
+  li:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}