@onewelcome/react-lib-components 1.5.0 → 1.7.0

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,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;
 
@@ -85,7 +111,6 @@
   }
 
   &:disabled {
-    background-color: var(--disabled);
     cursor: not-allowed;
   }
 
@@ -93,41 +118,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;

package/src/Form/Textarea/Textarea.module.scss

@@ -14,14 +14,30 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 .textarea-wrapper {
   position: relative;
   box-sizing: border-box;
   width: 100%;
+  [data-icon-status="success"],
+  [data-icon-status="error"] {
+    position: absolute;
+    right: 1.25rem;
+    z-index: 1;
+    top: 0.85rem;
+    font-size: 1.25rem;
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+  }
 
-  @include outlineStates;
+  @include mixins.outlineStates();
 }
 
 .textarea {
@@ -29,7 +45,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);
   font-family: var(--font-family);
   font-size: var(--font-size);
   color: var(--greyed-out);
@@ -42,20 +58,12 @@
     cursor: not-allowed;
   }
 
-  @include browserOutlineDisabled;
+  @include mixins.browserOutlineDisabled();
 }
 
-@include outline;
+@include mixins.outline();
 
 .error {
   border-color: var(--error);
   color: var(--error);
 }
-
-.warning {
-  color: var(--error);
-  position: absolute;
-  right: 1.25rem;
-  top: 0.75rem;
-  font-size: 1.25rem;
-}

package/src/Form/Textarea/Textarea.test.tsx

@@ -116,3 +116,11 @@ describe("Error status", () => {
     expect(textarea.nextElementSibling).toHaveClass("icon-error-circle");
   });
 });
+
+describe("Success status", () => {
+  it("success icon should be visible", () => {
+    const { textarea } = createTextarea({ success: true });
+    const icon = textarea.parentElement?.querySelector(".icon-checkmark-circle-breakout");
+    expect(icon).toBeDefined();
+  });
+});