@onewelcome/react-lib-components 1.6.0 → 1.8.0

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

@@ -0,0 +1,374 @@
+/*
+ * 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, { useEffect, useRef } from "react";
+import { FileType, FileUpload, Props } from "./FileUpload";
+import { createEvent, fireEvent, render, waitFor } from "@testing-library/react";
+
+import user from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
+
+const defaultParams: Props = {
+  accept: ".pdf, .jpg, .txt",
+  title: "File Upload test",
+  multiple: false,
+  fileList: []
+};
+
+const createComponent = (params?: (defaultParams: Props) => Props, dataTesId?: string) => {
+  let parameters: Props = defaultParams;
+  const id = dataTesId || "file-upload";
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<FileUpload {...parameters} data-testid={id} />);
+  const component = queries.getByTestId(id);
+  const container = queries.container;
+
+  return {
+    ...queries,
+    container,
+    component
+  };
+};
+
+describe("component should render", () => {
+  it("renders without crashing", () => {
+    const { component } = createComponent();
+
+    expect(component).toBeDefined();
+  });
+});
+
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
+    const ExampleComponent = ({
+      propagateRef
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <FileUpload {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe("File upload properties", () => {
+  it("is disabled", () => {
+    const { container } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        disabled: true
+      }),
+      "file-upload-1"
+    );
+    const dropZone = container.querySelector(".file-dropzone");
+    expect(dropZone).toHaveClass("disabled");
+  });
+
+  it("shows success", () => {
+    const { container } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        success: true
+      }),
+      "file-upload-2"
+    );
+
+    const dropZone = container.querySelector(".file-dropzone");
+    expect(dropZone).toHaveClass("success");
+    const icon = container.querySelector("[data-icon-status='success']");
+    expect(icon).toBeDefined();
+  });
+
+  it("shows error", () => {
+    const { container } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        error: true
+      }),
+      "file-upload-3"
+    );
+
+    const dropZone = container.querySelector(".file-dropzone");
+    expect(dropZone).toHaveClass("error");
+    const icon = container.querySelector("[data-icon-status='error']");
+    expect(icon).toBeDefined();
+  });
+
+  it("has multiple attribute setup on the input", () => {
+    const { component } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        multiple: true
+      }),
+      "file-upload-4"
+    );
+
+    expect(component).toHaveAttribute("multiple");
+  });
+
+  it("has the correct drag and drop label", () => {
+    const text = "test drag and drop text";
+    const { container } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        dragAndDropText: text
+      }),
+      "file-upload-5"
+    );
+
+    expect(container.querySelector(".drag-and-drop-text")).toHaveTextContent(text);
+  });
+
+  it("has the correct button label", () => {
+    const text = "Test";
+    const { container } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        selectButtonText: text
+      }),
+      "file-upload-6"
+    );
+
+    expect(container.querySelector("button")).toHaveTextContent(text);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});
+
+describe("File Upload should display items based on file list", () => {
+  it("should display the file list with each status", () => {
+    const file: FileType = {
+      name: "test",
+      size: 2,
+      type: "text",
+      status: "completed"
+    };
+    const { container } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        fileList: [file]
+      }),
+      "file-upload-10"
+    );
+
+    const fileEl = container.querySelector(`#${file.name}`);
+    expect(fileEl).toBeDefined();
+    expect(fileEl).toHaveClass(file.status as string);
+  });
+});
+
+describe("file drag and drop properties", () => {
+  it("should call all the drag and drop callback provided", async () => {
+    const onDrop = jest.fn();
+    const onDragOver = jest.fn();
+    const onDragLeave = jest.fn();
+    const { container } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        accept: ".png",
+        onDrop,
+        onDragOver,
+        onDragLeave,
+        fileList: []
+      }),
+      "file-upload-6"
+    );
+
+    const file = new File([""], "test.png", {
+      type: "image/png"
+    });
+
+    const eventData = {
+      dataTransfer: {
+        files: [file]
+      }
+    };
+
+    const dropZone = container.querySelector(".file-dropzone") as Element;
+    const dragEnterEvent = createEvent.dragEnter(dropZone, eventData);
+    const dragOverEvent = createEvent.dragOver(dropZone, eventData);
+    const dropEvent = createEvent.drop(dropZone, eventData);
+    const dragLeaveEvent = createEvent.dragLeave(dropZone, eventData);
+
+    await waitFor(() => {
+      fireEvent(dropZone, dragEnterEvent);
+    });
+
+    await waitFor(() => {
+      fireEvent(dropZone, dragLeaveEvent);
+    });
+
+    expect(onDragLeave).toHaveBeenCalled();
+
+    await waitFor(() => {
+      fireEvent(dropZone, dragOverEvent);
+    });
+
+    expect(dropZone).toHaveClass("drag-active");
+
+    expect(onDragOver).toHaveBeenCalled();
+
+    await waitFor(() => {
+      fireEvent(dropZone, dropEvent);
+    });
+
+    expect(onDrop).toHaveBeenCalled();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});
+
+describe("upload action", () => {
+  it("shows accepts only files that follow the type rules", async () => {
+    const onChange = jest.fn();
+    const { component } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        onChange,
+        fileList: [],
+        accept: ".pdf"
+      }),
+      "file-upload-7"
+    );
+    const str = "test";
+    const blob = new Blob([str]);
+    const file = new File([blob], "test.pdf", {
+      type: "application/pdf"
+    });
+    File.prototype.text = jest.fn().mockResolvedValueOnce(str);
+    await act(async () => {
+      await waitFor(() => {
+        user.upload(component, file);
+      });
+    });
+
+    const file2 = new File([blob], "test.jpg", {
+      type: "application/jpg"
+    });
+
+    await act(async () => {
+      await waitFor(() => {
+        user.upload(component, file2);
+      });
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("doesn't upload a file two times", async () => {
+    const onChange = jest.fn();
+    const { component } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        maxFileSize: 1024 * 1024,
+        onChange,
+        fileList: []
+      }),
+      "file-upload-9"
+    );
+    const value = "test";
+    const blob = new Blob([value]);
+    const file = new File([blob], "test.pdf", {
+      type: "application/pdf"
+    });
+    Object.defineProperty(file, "size", { value: 1024 * 1024 * 2 });
+    File.prototype.text = jest.fn().mockResolvedValueOnce(value);
+    await act(async () => {
+      await waitFor(() => {
+        user.upload(component, file);
+      });
+    });
+    await act(async () => {
+      await waitFor(() => {
+        user.upload(component, file);
+      });
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("doesn't allows files to be dropped according to the accepted file types", async () => {
+    const onDrop = jest.fn();
+    const { container } = createComponent(
+      defaultParams => ({
+        ...defaultParams,
+        accept: ".jpg",
+        onDrop,
+        fileList: []
+      }),
+      "file-upload-10"
+    );
+
+    const file = new File([""], "test.png", {
+      type: "image/png"
+    });
+
+    const eventData = {
+      dataTransfer: {
+        files: [file]
+      }
+    };
+    const dropZone = container.querySelector(".file-dropzone") as Element;
+    const dropEvent = createEvent.drop(dropZone, eventData);
+    await waitFor(() => {
+      fireEvent(dropZone, dropEvent);
+    });
+
+    expect(onDrop).toHaveBeenCalledTimes(0);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});
+
+describe("FileUpload should validate files on first render", () => {
+  const onChange = jest.fn();
+  const { component } = createComponent(
+    defaultParams => ({
+      ...defaultParams,
+      onChange,
+      fileList: [
+        {
+          name: "test",
+          type: "text/txt",
+          size: 1024 * 1024
+        }
+      ]
+    }),
+    "file-upload-8"
+  );
+
+  expect(component).toBeDefined();
+  expect(onChange).toHaveBeenCalled();
+});

package/src/Form/FileUpload/FileUpload.tsx

@@ -0,0 +1,251 @@
+/*
+ * 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, {
+  DragEvent,
+  DragEventHandler,
+  ForwardRefRenderFunction,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Button } from "../../Button/Button";
+import { FILE_ACTION, FileItem, Props as FileConfig } from "./FileItem/FileItem";
+import { Props as InputProps } from "../Input/Input";
+import { Typography } from "../../Typography/Typography";
+import classes from "./FileUpload.module.scss";
+import { Icon, Icons } from "../../Icon/Icon";
+import { useDetermineStatusIcon } from "../../hooks/useDetermineStatusIcon";
+
+type FileUploadType = Omit<InputProps, "onDrop" | "type" | "onChange" | "suffix" | "prefix">;
+export type FileType = Omit<FileConfig, "onRequestedFileAction"> &
+  Pick<File, "size" | "type"> & { data?: any };
+
+export interface Props extends FileUploadType {
+  accept: string;
+  title: string;
+  multiple: boolean;
+  fileList: FileType[];
+  exceedingMaxSizeErrorText?: string;
+  maxFileSize?: number;
+  selectButtonText?: string;
+  dragAndDropText?: string;
+  subText?: string;
+  onDragOver?: DragEventHandler;
+  onDragEnter?: DragEventHandler;
+  onDragLeave?: DragEventHandler;
+  onDrop?: (e: FileType[]) => void;
+  onChange?: (e: FileType[]) => void;
+  onRequestedFileAction?: (action: FILE_ACTION, name: FileType["name"]) => void;
+}
+
+const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    name,
+    accept,
+    error,
+    success,
+    maxFileSize,
+    multiple,
+    id,
+    title,
+    labeledBy,
+    disabled = false,
+    onChange,
+    dragAndDropText = "Drop file here or",
+    selectButtonText = "Select file",
+    onDragOver,
+    onDragLeave,
+    wrapperProps,
+    onDrop,
+    subText,
+    onRequestedFileAction,
+    exceedingMaxSizeErrorText,
+    fileList,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const labelRef = useRef(null);
+  const [dragActive, setDragActive] = useState(false);
+  const [inputError, setInputError] = useState(false);
+  const icon = useDetermineStatusIcon({ success, error });
+  let dropzoneClassNames = [classes["file-dropzone"]];
+  let subTextClass = [classes["file-selector-sub-text"]];
+  dragActive && dropzoneClassNames.push(classes["drag-active"]);
+  inputError ||
+    (error && dropzoneClassNames.push(classes["error"]) && subTextClass.push(classes["error"]));
+  disabled && dropzoneClassNames.push(classes["disabled"]);
+  success && !error && dropzoneClassNames.push(classes["success"]);
+
+  const getFileList = (files: FileList | null): FileType[] => {
+    let savedFiles = fileList ? [...fileList] : [];
+    const fileNames = fileList.map(el => el.name);
+    files?.length &&
+      Array.from(files as ArrayLike<File>).forEach(el => {
+        if (!fileNames.includes(el.name)) {
+          savedFiles = multiple
+            ? [
+                ...savedFiles,
+                {
+                  ...validateUpload(el),
+                  data: el
+                }
+              ]
+            : [
+                {
+                  ...validateUpload(el),
+                  data: el
+                }
+              ];
+        }
+      });
+    return savedFiles;
+  };
+  const onInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    let files = getFileList(e.target.files);
+    files.length && verifyExtensionValidity(files[files.length - 1]) && onChange && onChange(files);
+  };
+
+  const verifyExtensionValidity = (file: FileType) => {
+    const extension = file.name.split(".").pop();
+    return extension && accept.includes(extension);
+  };
+
+  const validateUpload = (file: FileType) => {
+    const result: FileType = {
+      name: file.name,
+      size: file.size,
+      type: file.type
+    };
+
+    let err = false;
+    if (maxFileSize && file.size && file.size >= maxFileSize) {
+      const mb = (file.size / (1024 * 1024)).toFixed(2);
+      result.error =
+        exceedingMaxSizeErrorText ||
+        `The maximum allowed file size is ${mb}MB. Upload a smaller file.`;
+      result.status = "error";
+      err = true;
+    }
+    setInputError(err);
+    return result;
+  };
+
+  useEffect(() => {
+    if (fileList.length) {
+      const validatedFiles = fileList.map(file => validateUpload(file));
+      onChange && onChange(validatedFiles);
+    }
+  }, []);
+
+  const handleOnDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(true);
+    onDragOver && onDragOver(e);
+  };
+
+  const handleOnDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const target = e.target as HTMLElement;
+    if (target?.classList.contains(classes["file-dropzone"])) {
+      setDragActive(false);
+    }
+    onDragLeave && onDragLeave(e);
+  };
+
+  const handleOnDrop = async (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e?.dataTransfer?.files && e.dataTransfer.files.length) {
+      const extension = e?.dataTransfer?.files[0].name.split(".").pop();
+      if (extension && accept && !accept.includes(extension)) {
+        setDragActive(false);
+        return;
+      }
+      const validatedFiles = getFileList(e.dataTransfer.files);
+      onDrop && onDrop(validatedFiles);
+    }
+    setDragActive(false);
+  };
+
+  return (
+    <div className={classes["file-upload-wrapper"]} {...wrapperProps}>
+      <div
+        className={dropzoneClassNames.join(" ")}
+        onDragOver={e => !disabled && handleOnDragOver(e)}
+        onDragLeave={e => !disabled && handleOnDragLeave(e)}
+        onDrop={e => !disabled && handleOnDrop(e)}
+      >
+        <Typography variant="body-bold" className={classes["file-upload-title"]} ref={labelRef}>
+          {title}
+        </Typography>
+        <div className={classes["file-select"]}>
+          <Icon className={"drop-file-icon"} icon={Icons.FileUpload} />
+          <Typography variant="body" className={"drag-and-drop-text"}>
+            {dragAndDropText}
+          </Typography>
+          <div className={classes["file-upload-btn"]}>
+            <Button variant="outline" disabled={disabled}>
+              {selectButtonText}
+            </Button>
+            <input
+              className={classes["upload-input"]}
+              {...rest}
+              ref={ref}
+              aria-labelledby={labeledBy}
+              type="file"
+              name={name}
+              {...(multiple && { multiple: true })}
+              disabled={disabled}
+              accept={accept}
+              onChange={onInputChange}
+              spellCheck={rest.spellCheck || false}
+            />
+          </div>
+          {!disabled && icon}
+          <span className={classes["outline"]}></span>
+        </div>
+        {subText && (
+          <Typography variant={"sub-text"} className={subTextClass.join(" ")}>
+            {subText}
+          </Typography>
+        )}
+      </div>
+      {fileList?.length > 0 && (
+        <ul className={classes["file-list"]}>
+          {fileList.map(({ name, status, progress, error }) => (
+            <li key={name} className={status} id={name}>
+              <FileItem
+                name={name}
+                status={status}
+                progress={progress}
+                error={error}
+                onRequestedFileAction={onRequestedFileAction}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export const FileUpload = React.forwardRef(FileUploadComponent);

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

@@ -14,7 +14,8 @@
  *    limitations under the License.
  */
 
-@use "../../mixins.module.scss";
+@use "src/mixins.module";
+@use "src/variables";
 
 .input-wrapper {
   position: relative;
@@ -24,7 +25,7 @@
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
-  padding: 0 1.25rem;
+  padding: 0 variables.$form-element-horizontal-padding-mobile;
   @include mixins.transition(all, 0.2s, ease-in-out);
 
   // General autofill styles
@@ -111,7 +112,6 @@
   }
 
   &:disabled {
-    background-color: var(--disabled);
     cursor: not-allowed;
   }
 
@@ -142,3 +142,9 @@
   display: block;
   z-index: 1;
 }
+
+@media only screen and (min-width: 30em) {
+  .input-wrapper {
+    padding: 0 variables.$form-element-horizontal-padding-desktop;
+  }
+}

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

@@ -14,7 +14,8 @@
  *    limitations under the License.
  */
 
-@use "../../mixins.module.scss";
+@use "src/mixins.module";
+@use "src/variables";
 
 $listItemHeight: 2.125rem;
 
@@ -41,7 +42,11 @@ $listItemHeight: 2.125rem;
   &:not(.expanded) {
     button:focus:not(.error) {
       border: var(--input-border-width-focus) solid var(--color-focus);
-      padding: 0 calc(1.25rem - var(--input-border-width-focus) + var(--input-border-width));
+      padding: 0
+        calc(
+          variables.$form-element-horizontal-padding-mobile - var(--input-border-width-focus) +
+            var(--input-border-width)
+        );
     }
   }
 
@@ -56,7 +61,7 @@ $listItemHeight: 2.125rem;
     position: relative;
     width: 100%;
     min-height: calc(4rem - (2 * var(--input-border-width)));
-    padding: 0 1.25rem;
+    padding: 0 variables.$form-element-horizontal-padding-mobile;
     background-color: transparent;
     border-color: var(--light-grey-border);
     border-style: var(--input-border-style);
@@ -215,3 +220,21 @@ $listItemHeight: 2.125rem;
     pointer-events: none;
   }
 }
+
+@media only screen and (min-width: 30em) {
+  .select {
+    .custom-select {
+      padding: 0 variables.$form-element-horizontal-padding-desktop;
+    }
+
+    &:not(.expanded) {
+      button:focus:not(.error) {
+        padding: 0
+          calc(
+            variables.$form-element-horizontal-padding-desktop - var(--input-border-width-focus) +
+              var(--input-border-width)
+          );
+      }
+    }
+  }
+}