@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

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

@@ -0,0 +1,271 @@
+/*
+ * 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, Fragment } from "react";
+import classes from "./FileItem.module.scss";
+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";
+import { withReadOnly } from "../../../withReadOnly";
+export type UploadProgress = "uploading" | "completed" | "error" | "readonly" | "retry";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  name: string;
+  status?: UploadProgress;
+  progress?: number;
+  error?: string;
+  downloadFileLink?: string;
+  onDownloadFile?: () => void;
+  totalPercentage?: number;
+  onRequestedFileAction?: (action: FILE_ACTION, name: FileType["name"]) => void;
+}
+interface FileItemIcons {
+  fileIcon: Icons;
+  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,
+    onDownloadFile,
+    downloadFileLink,
+    totalPercentage,
+    onRequestedFileAction,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const determineIcons = (status?: UploadProgress): FileItemIcons => {
+    switch (status) {
+      case ACTION_STATUS.COMPLETED:
+        return {
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.Trash,
+              action: FILE_ACTION.DELETE
+            },
+            {
+              type: Icons.DownloadFile,
+              action: FILE_ACTION.DOWNLOAD
+            }
+          ]
+        };
+      case ACTION_STATUS.ERROR:
+        return {
+          fileIcon: Icons.Error,
+          actionIcons: [
+            {
+              type: Icons.Times,
+              action: FILE_ACTION.REMOVE
+            }
+          ]
+        };
+      case ACTION_STATUS.UPLOADING:
+        return {
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.AbortFile,
+              action: FILE_ACTION.ABORT
+            }
+          ]
+        };
+      case ACTION_STATUS.RETRY:
+        return {
+          fileIcon: Icons.FileAltIcon,
+          actionIcons: [
+            {
+              type: Icons.Refresh,
+              action: FILE_ACTION.RETRY
+            },
+            {
+              type: Icons.Trash,
+              action: FILE_ACTION.REMOVE
+            }
+          ]
+        };
+      case ACTION_STATUS.READONLY:
+      default:
+        return { fileIcon: Icons.FileAltIcon };
+    }
+  };
+
+  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);
+
+  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 }[]) => {
+    return actionIcons.map(icon => (
+      <Fragment key={icon.action}>
+        {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 && !onDownloadFile && (
+          <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>
+        )}
+
+        {icon.action === FILE_ACTION.DOWNLOAD && onDownloadFile && (
+          <Button
+            color="primary"
+            onClick={onDownloadFile}
+            type="button"
+            variant="text"
+            startIcon={getStartIcon(icon)}
+          >
+            {icon.action}
+          </Button>
+        )}
+      </Fragment>
+    ));
+  };
+
+  const getUploadedFileInfo = () => {
+    return (
+      <Typography
+        variant={"body"}
+        title={name}
+        className={`${classes["file-name"]} ${status ? classes[status] : ""}`}
+      >
+        {status === "retry" && (
+          <Icon
+            icon={Icons.Error}
+            className={`${classes["file-icon"]} ${status ? classes[status] : ""}`}
+          />
+        )}
+        <Icon icon={icons.fileIcon} className={classes["file-icon"]} />
+        <span className={classes["friendly-name"]}>
+          {friendlyName}.{extension}
+        </span>
+      </Typography>
+    );
+  };
+
+  const getProgressBar = () => {
+    return (
+      <ProgressBar
+        className={classes["progress-bar"]}
+        completed={progress}
+        label={`${friendlyName}.${extension}`}
+        percentage={totalPercentage}
+      />
+    );
+  };
+
+  const restPropsWithoutPointerEvents = () => {
+    const props = rest;
+    delete rest?.style?.pointerEvents;
+    return props;
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={classes["file-item-wrapper"]}
+      aria-label={`${name}-wrapper`}
+      tabIndex={0}
+      {...restPropsWithoutPointerEvents()}
+    >
+      <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)}
+          </div>
+        </div>
+      </div>
+      {error && (
+        <Typography
+          variant={"sub-text"}
+          className={`${classes["file-subtitle"]} ${status ? classes[status] : ""}`}
+        >
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export const FileItem = withReadOnly(React.forwardRef(FileItemComponent));

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

@@ -0,0 +1,241 @@
+/*!
+ * 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.
+ */
+
+@use "../../../mixins.module.scss" as *;
+
+.file-upload-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.file-dropzone {
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  position: relative;
+
+  .file-upload-title {
+    margin: 0 0 0.25rem 0;
+    font-family: var(--font-family);
+    font-size: var(--form-control-font-size);
+    line-height: var(--default-line-height);
+    color: var(--color-blue-grey900);
+    font-weight: 400;
+    display: block;
+
+    &.required {
+      &:after {
+        content: " *";
+        color: var(--error);
+      }
+    }
+  }
+
+  &.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);
+    }
+  }
+
+  .upload-button-wrapper {
+    &.disabled {
+      pointer-events: none;
+
+      p {
+        color: var(--color-blue-grey400);
+      }
+    }
+  }
+
+  span[data-icon-status] {
+    font-size: var(--font-size-big);
+    position: absolute;
+    top: auto;
+    right: 2rem;
+  }
+
+  & {
+    @include transition(all, 0.2s, ease-in-out);
+  }
+
+  &[data-readonlyview="true"]:has(.file-list) {
+    .required {
+      &:after {
+        display: none;
+      }
+    }
+
+    ul {
+      li {
+        p {
+          span[data-icon] {
+            &:before {
+              color: var(--color-blue-grey900);
+            }
+          }
+        }
+
+        button {
+          visibility: hidden;
+        }
+      }
+    }
+
+    .upload-button-wrapper {
+      display: none;
+    }
+  }
+
+  &[data-readonlyview="true"]:not(:has(.file-list)) {
+    .upload-button-wrapper {
+      min-height: 4.5rem;
+
+      & .file-select {
+        border: 0;
+
+        & p {
+          color: var(--read-only-text-color);
+        }
+      }
+
+      & .file-upload-btn {
+        display: none;
+      }
+    }
+
+    .required {
+      &:after {
+        display: none;
+      }
+    }
+  }
+}
+
+.upload-button-wrapper {
+  background: var(--color-blue-grey25);
+  padding: 4px;
+
+  &.drag-active {
+    .outline {
+      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-primary50);
+
+      @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-primary50);
+    }
+
+    & .file-select {
+      position: relative;
+    }
+
+    .error {
+      .outline {
+        border-color: var(--error);
+      }
+    }
+  }
+}
+
+.file-selector-sub-text {
+  color: var(--greyed-out);
+
+  &.error {
+    color: var(--error);
+    display: block;
+  }
+}
+
+.file-selector-helper-text {
+  color: var(--greyed-out);
+  display: block;
+}
+
+.file-select {
+  display: flex;
+  align-items: center;
+  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: var(--font-size-big);
+    margin-left: 0.5rem;
+  }
+
+  [class*="typography"] {
+    margin-bottom: 0;
+  }
+}
+
+.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.25rem 0;
+
+  li:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}