@onewelcome/react-lib-components 6.5.0 → 6.7.0

package/src/components/DataGrid/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Paweł
       </span>
@@ -18,7 +18,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Napieracz
       </span>
@@ -27,7 +27,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         12.12.1990
       </span>
@@ -36,7 +36,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         <div
           class="context-menu"
@@ -73,7 +73,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Michał
       </span>
@@ -82,7 +82,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Górski
       </span>
@@ -91,7 +91,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         12.12.1994
       </span>
@@ -100,7 +100,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         <div
           class="context-menu"
@@ -137,7 +137,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Daniel
       </span>
@@ -146,7 +146,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Velden
       </span>
@@ -155,7 +155,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         12.12.199x
       </span>
@@ -164,7 +164,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         <div
           class="context-menu"
@@ -201,7 +201,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Jasha
       </span>
@@ -210,7 +210,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         Joachimsthal
       </span>
@@ -219,7 +219,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         12.12.198x
       </span>
@@ -228,7 +228,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
       class="cell "
     >
       <span
-        class="typography_style_body "
+        class="typography_style_body text"
       >
         <div
           class="context-menu"

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

@@ -14,16 +14,6 @@
  *    limitations under the License.
  */
 
-.thead {
-  &::after {
-    content: "";
-    position: absolute;
-    width: calc(100% - 2rem);
-    left: 1rem;
-    border-bottom: 2px solid var(--light-grey-border);
-  }
-}
-
 .row {
   height: 2.5rem;
 }

package/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -103,7 +103,7 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
   });
 
   return (
-    <thead {...rest} ref={ref} className={classes["thead"]}>
+    <thead {...rest} ref={ref}>
       <tr className={classes["row"]}>
         {headerCells}
         {!disableContextMenuColumn && (

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

@@ -17,7 +17,7 @@
 .header-cell {
   font-weight: normal;
   text-align: left;
-  padding: 0 0.625rem;
+  padding: 0.625rem 0.75rem;
 
   &:first-child {
     padding-left: 1rem;
@@ -44,8 +44,8 @@
 
 .headline {
   font-family: var(--font-family);
-  font-size: var(--font-size);
-  line-height: var(--default-line-height);
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
   font-weight: 700;
   color: var(--default);
 }

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

@@ -13,19 +13,96 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-
+@use "../../../../mixins.module.scss";
 @import "../../../../mixins.module.scss";
 
 .file-item-wrapper {
-  padding: 0.5rem 1.25rem;
+  padding: 0;
   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;
   }
 
+  & .file-list-container {
+    background-color: var(--color-blue-grey25);
+    padding: 0.25rem 0.75rem;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    min-height: 2.875rem;
+
+    .action-button-wrapper {
+      margin: 0.25rem 0;
+      display: flex;
+
+      button {
+        margin-left: 0.5rem;
+
+        span {
+          font-size: 0.875rem;
+          text-transform: capitalize;
+        }
+      }
+
+      a {
+        padding-left: 0.75rem;
+        padding-right: 1.25rem;
+        font-weight: 500;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        margin-left: 0.5rem;
+
+        span.action-icon {
+          display: flex;
+          justify-content: center;
+          width: 1.5rem;
+          margin-right: 0.25rem;
+          font-size: 0.875rem;
+          padding-left: 0;
+        }
+
+        span {
+          font-size: 0.875rem;
+          text-transform: capitalize;
+        }
+
+        &:hover {
+          color: var(--button-primary-hover-color);
+          background-color: var(--color-black10);
+        }
+
+        &:focus {
+          @include mixins.focusVisibleOutline($outlineOffset: 2px, $selectors: null);
+        }
+      }
+    }
+
+    .progress-with-action {
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .progress-bar {
+        height: 3rem;
+        width: 100%;
+        background: transparent;
+
+        > span {
+          height: 0.3rem;
+          border-radius: var(--input-border-radius);
+        }
+
+        p {
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+
   .progress-bar {
     background-color: var(--color-black10);
   }
@@ -39,11 +116,21 @@
     margin: 0;
     display: flex;
     align-items: center;
+    font-size: 0.875rem;
+
     .friendly-name {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    &.error {
+      & span {
+        &::before {
+          color: var(--error);
+        }
+      }
+    }
   }
 
   .action-icon {
@@ -51,10 +138,30 @@
     color: var(--color-primary);
     cursor: pointer;
     padding-left: 1.25rem;
+    margin-right: 1rem;
+
+    & label,
+    & a {
+      text-transform: capitalize;
+      padding-left: 0.5rem;
+      cursor: pointer;
+      color: var(--color-primary);
+      text-decoration: none;
+    }
   }
 
   .file-icon {
     margin-right: 0.5rem;
+
+    &::before {
+      color: var(--color-primary500);
+    }
+
+    &.retry {
+      &::before {
+        color: var(--error);
+      }
+    }
   }
 
   .file-subtitle,
@@ -72,4 +179,8 @@
   .readonly {
     color: var(--greyed-out);
   }
+
+  .file-subtitle {
+    margin-left: 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>
   );
 };