@onewelcome/react-lib-components 6.6.0 → 6.7.0

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

@@ -20,7 +20,8 @@ import { Typography } from "../../../Typography/Typography";
 import { Icon, Icons } from "../../../Icon/Icon";
 import { ProgressBar } from "../../../ProgressBar/ProgressBar";
 import { FileType } from "../FileUpload";
-
+import { Button } from "../../../Button/Button";
+import { Link } from "../../../Link/Link";
 export type UploadProgress = "uploading" | "completed" | "error" | "readonly" | "retry";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
@@ -28,61 +29,96 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   status?: UploadProgress;
   progress?: number;
   error?: string;
+  downloadFileLink?: string;
+  totalPercentage?: number;
   onRequestedFileAction?: (action: FILE_ACTION, name: FileType["name"]) => void;
 }
 interface FileItemIcons {
   fileIcon: Icons;
-  actionIcon?: { type: Icons; action: FILE_ACTION };
+  actionIcons?: { type: Icons; action: FILE_ACTION }[];
 }
 
 export enum FILE_ACTION {
   DELETE = "delete",
+  DOWNLOAD = "download",
   REMOVE = "remove",
   ABORT = "abort",
   RETRY = "retry"
 }
 
+export enum ACTION_STATUS {
+  COMPLETED = "completed",
+  UPLOADING = "uploading",
+  ERROR = "error",
+  RETRY = "retry",
+  READONLY = "readonly"
+}
+
 const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { name, status, error, progress, onRequestedFileAction }: Props,
+  {
+    name,
+    status,
+    error,
+    progress,
+    downloadFileLink,
+    totalPercentage,
+    onRequestedFileAction
+  }: Props,
   ref
 ) => {
   const determineIcons = (status?: UploadProgress): FileItemIcons => {
     switch (status) {
-      case "completed":
+      case ACTION_STATUS.COMPLETED:
         return {
-          fileIcon: Icons.FileOutline,
-          actionIcon: {
-            type: Icons.Trash,
-            action: FILE_ACTION.DELETE
-          }
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.Trash,
+              action: FILE_ACTION.DELETE
+            },
+            {
+              type: Icons.DownloadFile,
+              action: FILE_ACTION.DOWNLOAD
+            }
+          ]
         };
-      case "error":
+      case ACTION_STATUS.ERROR:
         return {
-          fileIcon: Icons.InfoCircle,
-          actionIcon: {
-            type: Icons.Times,
-            action: FILE_ACTION.REMOVE
-          }
+          fileIcon: Icons.Error,
+          actionIcons: [
+            {
+              type: Icons.Times,
+              action: FILE_ACTION.REMOVE
+            }
+          ]
         };
-      case "uploading":
+      case ACTION_STATUS.UPLOADING:
         return {
-          fileIcon: Icons.FileUpload,
-          actionIcon: {
-            type: Icons.Times,
-            action: FILE_ACTION.ABORT
-          }
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.AbortFile,
+              action: FILE_ACTION.ABORT
+            }
+          ]
         };
-      case "retry":
+      case ACTION_STATUS.RETRY:
         return {
-          fileIcon: Icons.InfoCircle,
-          actionIcon: {
-            type: Icons.Refresh,
-            action: FILE_ACTION.RETRY
-          }
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.Refresh,
+              action: FILE_ACTION.RETRY
+            },
+            {
+              type: Icons.Trash,
+              action: FILE_ACTION.REMOVE
+            }
+          ]
         };
-      case "readonly":
+      case ACTION_STATUS.READONLY:
       default:
-        return { fileIcon: Icons.FileOutline };
+        return { fileIcon: Icons.FileAltIcon };
     }
   };
 
@@ -95,28 +131,104 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 
   const { friendlyName, extension } = getFriendlyNameAndExtension(name);
 
-  return (
-    <div ref={ref} className={classes["file-item-wrapper"]} aria-label={`${name}-wrapper`}>
+  const getStartIcon = (icon: { type: Icons; action: FILE_ACTION }) => (
+    <Icon
+      key={icon.action}
+      title={icon.action}
+      icon={icon.type}
+      className={classes["action-icon"]}
+    ></Icon>
+  );
+
+  const renderActionIcons = (
+    actionIcons: { type: Icons; action: FILE_ACTION }[],
+    status: UploadProgress = ACTION_STATUS.UPLOADING
+  ) => {
+    return actionIcons.map(icon => (
+      <>
+        {icon.action !== FILE_ACTION.DOWNLOAD && (
+          <Button
+            color="primary"
+            startIcon={getStartIcon(icon)}
+            title={icon.action !== FILE_ACTION.ABORT ? icon.action : ""}
+            type="button"
+            variant="text"
+            onClick={() =>
+              icon && onRequestedFileAction && onRequestedFileAction(icon.action, name)
+            }
+          >
+            {icon.action !== FILE_ACTION.ABORT ? icon.action : ""}
+          </Button>
+        )}
+
+        {icon.action === FILE_ACTION.DOWNLOAD && downloadFileLink && (
+          <Link
+            color="primary"
+            display="link"
+            to={downloadFileLink}
+            type="download"
+            target="_blank"
+            prefixIcon={
+              <Icon
+                key={icon.action}
+                className={classes["action-icon"]}
+                title={icon.action}
+                icon={icon.type}
+              ></Icon>
+            }
+          >
+            {icon.action}
+          </Link>
+        )}
+      </>
+    ));
+  };
+
+  const getUploadedFileInfo = () => {
+    return (
       <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 && (
+        {status === "retry" && (
           <Icon
-            title={icons.actionIcon.action}
-            icon={icons.actionIcon.type}
-            className={classes["action-icon"]}
-            onClick={() =>
-              icons.actionIcon &&
-              onRequestedFileAction &&
-              onRequestedFileAction(icons.actionIcon.action, name)
-            }
+            icon={Icons.Error}
+            className={`${classes["file-icon"]} ${status ? classes[status] : ""}`}
           />
         )}
+        <Icon icon={icons.fileIcon} className={classes["file-icon"]} />
+        <span className={classes["friendly-name"]}>{friendlyName}</span>.<span>{extension}</span>
       </Typography>
+    );
+  };
+
+  const getProgressBar = () => {
+    return (
+      <ProgressBar
+        className={classes["progress-bar"]}
+        completed={progress}
+        label={`${friendlyName}.${extension}`}
+        percentage={totalPercentage}
+      />
+    );
+  };
+
+  return (
+    <div ref={ref} className={classes["file-item-wrapper"]} aria-label={`${name}-wrapper`}>
+      <div className={classes["file-list-container"]}>
+        {status !== ACTION_STATUS.UPLOADING && getUploadedFileInfo()}
+
+        <div
+          className={`${status === ACTION_STATUS.UPLOADING ? classes["progress-with-action"] : ""}`}
+        >
+          {status === ACTION_STATUS.UPLOADING && getProgressBar()}
+
+          <div className={classes["action-button-wrapper"]}>
+            {icons.actionIcons && renderActionIcons(icons.actionIcons, status)}
+          </div>
+        </div>
+      </div>
       {error && (
         <Typography
           variant={"sub-text"}
@@ -125,11 +237,6 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           {error}
         </Typography>
       )}
-      {status === "uploading" ? (
-        <ProgressBar className={classes["progress-bar"]} completed={progress} />
-      ) : (
-        ""
-      )}
     </div>
   );
 };

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

@@ -24,25 +24,27 @@
 .file-dropzone {
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
-  padding: 1.25rem;
+  padding: 0.25rem 1.25rem;
   position: relative;
-  @include transition(all, 0.2s, ease-in-out);
-  &.drag-active {
-    @include outline(
-      var(--color-blue-grey500),
-      var(--drag-border-style),
-      var(--input-border-width),
-      var(--input-border-radius),
-      var(--drag-background-color)
-    );
-    @include outlineStates;
+
+  .file-upload-title {
+    margin: 0 0 0.25rem 0;
+    font-size: 0.875rem;
+    font-weight: 400;
   }
+
+  @include transition(all, 0.2s, ease-in-out);
   &.error {
     span[data-icon-status],
     .file-upload-title {
       color: var(--error);
     }
+
+    .file-select {
+      border-color: var(--error);
+    }
   }
+
   &.success {
     span[data-icon-status] {
       color: var(--success);
@@ -54,11 +56,58 @@
     background-color: var(--disabled);
     color: var(--greyed-out);
   }
+
   span[data-icon-status] {
     font-size: 1.25rem;
     position: absolute;
-    top: 2.74rem;
-    right: 1.375rem;
+    top: auto;
+    right: 2rem;
+  }
+
+  .file-upload-title-mandatory {
+    color: var(--color-red500);
+  }
+}
+
+.upload-button-wrapper {
+  background: var(--color-blue-grey25);
+  padding: 4px;
+
+  &.drag-active {
+    .outline {
+      pointer-events: none;
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      inset: 0;
+      border: var(--file-upload-border-width) var(--drag-drop-border-style)
+        var(--color-blue-grey500);
+      border-radius: var(--input-border-radius);
+      background-color: var(--color-primary-light);
+
+      @include transition(all, 0.2s, ease-in-out);
+      &::before {
+        content: "Drop here";
+        text-align: center;
+        display: block;
+        color: var(--color-primary);
+        padding-top: 2rem;
+      }
+    }
+
+    &:hover .outline {
+      background-color: var(--color-primary-light);
+    }
+
+    & .file-select {
+      position: relative;
+    }
+
+    .error {
+      .outline {
+        border-color: var(--error);
+      }
+    }
   }
 }
 
@@ -73,12 +122,18 @@
 .file-select {
   display: flex;
   align-items: center;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
+  border: var(--file-upload-border-width) var(--drag-drop-border-style) var(--color-blue-grey100);
+  padding: 1.25rem;
+
   [class*="file"] {
     font-size: 1.25rem;
+    margin-left: 0.5rem;
   }
+
   [class*="typography"] {
-    margin-bottom: 0.625rem;
+    margin-bottom: 0;
   }
 }
 
@@ -94,6 +149,7 @@
   bottom: 0;
   opacity: 0;
   cursor: pointer;
+
   &:focus {
     outline: none;
   }
@@ -106,7 +162,8 @@
 .file-list {
   list-style: none;
   padding: 0;
-  margin: 0.75rem 0;
+  margin: 0.25rem 0;
+
   li:not(:last-child) {
     margin-bottom: 0.5rem;
   }

package/src/components/Form/FileUpload/FileUpload.tsx

@@ -27,7 +27,6 @@ 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">;
@@ -50,6 +49,9 @@ export interface Props extends FileUploadType {
   onDrop?: (e: FileType[]) => void;
   onChange?: (e: FileType[]) => void;
   onRequestedFileAction?: (action: FILE_ACTION, name: FileType["name"]) => void;
+  downloadFileLink?: string;
+  isRequired?: boolean;
+  invalidDropErrorMessage?: string;
 }
 
 const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
@@ -65,8 +67,8 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     labeledBy,
     disabled = false,
     onChange,
-    dragAndDropText = "Drop file here or",
-    selectButtonText = "Select file",
+    dragAndDropText = "Drag and drop or",
+    selectButtonText = "Browse file",
     onDragOver,
     onDragLeave,
     wrapperProps,
@@ -75,19 +77,30 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onRequestedFileAction,
     exceedingMaxSizeErrorText,
     fileList,
+    downloadFileLink,
+    isRequired = true,
+    invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
     ...rest
   }: Props,
   ref
 ) => {
   const labelRef = useRef(null);
   const [dragActive, setDragActive] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
   const [inputError, setInputError] = useState(false);
   const icon = useDetermineStatusIcon({ success, error });
   let dropzoneClassNames = [classes["file-dropzone"]];
+  let dropzoneContainerClassNames = [classes["upload-button-wrapper"]];
   let subTextClass = [classes["file-selector-sub-text"]];
-  dragActive && dropzoneClassNames.push(classes["drag-active"]);
-  inputError ||
-    (error && dropzoneClassNames.push(classes["error"]) && subTextClass.push(classes["error"]));
+  let errorTextClass = [classes["file-selector-sub-text"]];
+  dragActive && dropzoneContainerClassNames.push(classes["drag-active"]);
+  const hasError = inputError || error || errorMsg;
+  if (hasError) {
+    const errorClass = classes["error"];
+    dropzoneClassNames.push(errorClass);
+    subTextClass.push(errorClass);
+    errorTextClass.push(errorClass);
+  }
   disabled && dropzoneClassNames.push(classes["disabled"]);
   success && !error && dropzoneClassNames.push(classes["success"]);
 
@@ -177,10 +190,13 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     e.preventDefault();
     e.stopPropagation();
     if (e?.dataTransfer?.files && e.dataTransfer.files.length) {
-      const extension = e?.dataTransfer?.files[0].name.split(".").pop();
+      const extension = e?.dataTransfer?.files[0]?.name.split(".").pop();
       if (extension && accept && !accept.includes(extension)) {
+        setErrorMsg(invalidDropErrorMessage.replace("$accept", accept));
         setDragActive(false);
         return;
+      } else {
+        setErrorMsg("");
       }
       const validatedFiles = getFileList(e.dataTransfer.files);
       onDrop?.(validatedFiles);
@@ -191,40 +207,62 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   return (
     <div className={classes["file-upload-wrapper"]} {...wrapperProps}>
       <div className={classes["dropzone-wrapper"]}>
-        <div
-          className={dropzoneClassNames.join(" ")}
-          onDragOver={e => !disabled && handleOnDragOver(e)}
-          onDragLeave={e => !disabled && handleOnDragLeave(e)}
-          onDrop={e => !disabled && handleOnDrop(e)}
-        >
+        <div className={dropzoneClassNames.join(" ")}>
           <Typography variant="body-bold" className={classes["file-upload-title"]} ref={labelRef}>
-            {title}
+            {title}{" "}
+            {isRequired && <span className={classes["file-upload-title-mandatory"]}>*</span>}
           </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}
-                <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}
-                />
-              </Button>
+
+          {fileList?.length > 0 && (
+            <ul className={classes["file-list"]}>
+              {fileList.map(({ name, status, progress, error }) => (
+                <li key={name} className={status} id={name}>
+                  <FileItem
+                    name={name}
+                    key={`${name}_${status}`}
+                    status={status}
+                    progress={progress}
+                    error={error}
+                    downloadFileLink={downloadFileLink}
+                    onRequestedFileAction={onRequestedFileAction}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <div
+            className={dropzoneContainerClassNames.join(" ")}
+            onDragOver={e => !disabled && handleOnDragOver(e)}
+            onDragLeave={e => !disabled && handleOnDragLeave(e)}
+            onDrop={e => !disabled && handleOnDrop(e)}
+          >
+            <div className={classes["file-select"]}>
+              <Typography variant="body" className={"drag-and-drop-text"}>
+                {dragAndDropText}
+              </Typography>
+
+              <div className={classes["file-upload-btn"]}>
+                <Button variant="outline" disabled={disabled}>
+                  {selectButtonText}
+                  <input
+                    {...rest}
+                    className={`${classes["upload-input"]} ${rest.className}`}
+                    ref={ref}
+                    aria-labelledby={labeledBy}
+                    type="file"
+                    name={name}
+                    multiple={multiple}
+                    disabled={disabled}
+                    accept={accept}
+                    onChange={onInputChange}
+                    spellCheck={false}
+                  />
+                </Button>
+              </div>
+              {!disabled && icon}
+              <span className={classes["outline"]}></span>
             </div>
-            {!disabled && icon}
-            <span className={classes["outline"]}></span>
           </div>
         </div>
         {subText && (
@@ -232,22 +270,13 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             {subText}
           </Typography>
         )}
+
+        {errorMsg && (
+          <Typography variant={"sub-text"} className={errorTextClass.join(" ")}>
+            {errorMsg}
+          </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>
   );
 };

package/src/components/Form/FormSection/FormSection.module.scss

@@ -0,0 +1,12 @@
+.section-wrapper {
+  padding-bottom: 4rem;
+}
+
+.section-header-wrapper {
+  margin-bottom: 1rem;
+}
+
+.section-header {
+  line-height: 2rem;
+  color: var(--color-primary500);
+}

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

@@ -337,8 +337,23 @@
   content: "\e9d1";
   @include fontProperties();
 }
-
 .icon-warning-filled:before {
   content: "\e948";
   @include fontProperties();
 }
+.icon-download-file-outline:before {
+  content: "\e945";
+  @include fontProperties();
+}
+.icon-retry:before {
+  content: "\e949";
+  @include fontProperties();
+}
+.icon-cancel:before {
+  content: "\e94a";
+  @include fontProperties();
+}
+.icon-file-alt:before {
+  content: "\e94b";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -91,7 +91,11 @@ export enum Icons {
   FileDownload = "file-download-outline",
   UploadOutline = "upload-outline",
   ReplyOutline = "reply-outline",
-  SaveOutline = "save-outline"
+  SaveOutline = "save-outline",
+  DownloadFile = "download-file-outline",
+  RetryFile = "retry",
+  AbortFile = "cancel",
+  FileAltIcon = "file-alt"
 }
 
 type Tag = "span" | "div" | "i";