@pareto-engineering/design-system 4.3.0 → 4.3.2

package/dist/cjs/f/fields/FileUpload/FileUpload.js

@@ -127,20 +127,16 @@ const FileUpload = _ref => {
     className: "attached-files"
   }, /*#__PURE__*/React.createElement("p", null, "Attached files:"), /*#__PURE__*/React.createElement("div", {
     className: "files"
-  }, value.map((file, indx) => {
-    const isFileObject = file instanceof File;
-    return /*#__PURE__*/React.createElement(_common.FilePreview, {
-      file: file,
-      key: isFileObject ? file.name : file,
-      disabled: disabled,
-      handleDelete: () => handleDelete({
-        fileIndex: indx,
-        identifier: isFileObject ? file.name : file?.id
-      }),
-      uploadStatus: uploadStatus?.[file?.name],
-      viewOnly: viewOnly
-    });
-  }))));
+  }, value.map((file, indx) => /*#__PURE__*/React.createElement(_common.Preview, {
+    file: file,
+    key: file.name,
+    writeOnly: !disabled,
+    handleDelete: () => handleDelete({
+      fileIndex: indx,
+      identifier: file?.id || file.name
+    }),
+    uploadStatus: uploadStatus?.[file?.name]
+  })))));
 };
 FileUpload.propTypes = {
   /**
@@ -231,4 +227,5 @@ FileUpload.defaultProps = {
   filePreviewAlignment: 'bottom',
   viewOnly: false
 };
+FileUpload.Preview = _common.Preview;
 var _default = exports.default = FileUpload;

package/dist/cjs/f/fields/FileUpload/common/{FilePreview/FilePreview.js → Preview/Preview.js}

@@ -30,17 +30,17 @@ const FILE_UPLOAD_COMPLETE_PROGRESS = 100;
 /**
  * This is the component description.
  */
-const FilePreview = _ref => {
+const Preview = _ref => {
   let {
     id,
     className: userClassName,
     style,
     file,
-    disabled,
     handleDelete,
     uploadStatus,
     color,
-    uploadProgress
+    uploadProgress,
+    writeOnly
     // ...otherProps
   } = _ref;
   const isFileObject = file instanceof File;
@@ -56,6 +56,7 @@ const FilePreview = _ref => {
     }
   };
   const canDelete = file?.isPreview || isFileObject;
+  const isFileBroken = !writeOnly && !file?.url;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -67,13 +68,19 @@ const FilePreview = _ref => {
   }, type), /*#__PURE__*/React.createElement("span", {
     title: file.name,
     className: "name"
-  }, file.name), /*#__PURE__*/React.createElement(_b.Button, {
+  }, file.name), isFileBroken ? /*#__PURE__*/React.createElement(_a.Tooltip, {
+    description: "bulk-updates-text",
+    content: /*#__PURE__*/React.createElement("p", null, "This file doesn't have a link or the link is invalid.")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "h")) : /*#__PURE__*/React.createElement(_b.Button, {
+    color: "ui-icons",
     isCompact: true,
     isSimple: true,
     onClick: () => canDelete ? handleDelete() : handlePreview()
   }, /*#__PURE__*/React.createElement("span", {
-    className: "icon x-ui-icons c-x"
-  }, canDelete ? 'Y' : '9'))), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "icon"
+  }, canDelete ? 'Y' : '9'))), writeOnly && /*#__PURE__*/React.createElement("div", {
     className: `progress-status x-${statusColor}`
   }, /*#__PURE__*/React.createElement("div", {
     className: "status"
@@ -89,7 +96,7 @@ const FilePreview = _ref => {
     height: "3px"
   })));
 };
-FilePreview.propTypes = {
+Preview.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -109,10 +116,14 @@ FilePreview.propTypes = {
   /**
    * The upload progress of the file
    */
-  uploadProgress: _propTypes.default.number
+  uploadProgress: _propTypes.default.number,
+  /**
+   * Whether the preview is used in a context where the user can upload new files
+   */
+  writeOnly: _propTypes.default.bool
 };
-FilePreview.defaultProps = {
+Preview.defaultProps = {
   color: 'green',
   uploadProgress: 45
 };
-var _default = exports.default = FilePreview;
+var _default = exports.default = Preview;

package/dist/cjs/f/fields/FileUpload/common/{FilePreview → Preview}/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FilePreview", {
+Object.defineProperty(exports, "Preview", {
   enumerable: true,
   get: function () {
-    return _FilePreview.default;
+    return _Preview.default;
   }
 });
-var _FilePreview = _interopRequireDefault(require("./FilePreview"));
+var _Preview = _interopRequireDefault(require("./Preview"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/{es/f/fields/FileUpload/common/FilePreview → cjs/f/fields/FileUpload/common/Preview}/styles.scss

@@ -23,13 +23,16 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     align-items: center;
     display: flex;
     gap: calc(var(--gap) / 2);
+    justify-content: space-between;
 
     > .type {
       padding-block: calc($default-padding / 4);
       padding-inline: calc($default-padding / 2);
 
       // TODO: update the colors to use variables. These are colors from the new DS
-      &.pdf {
+      &.pdf,
+      &.broken,
+      &.unknown {
         background-color: #fdead7;
         color: #b93814;
       }
@@ -68,7 +71,6 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     }
 
     > .#{bem.$base}.button {
-      cursor: pointer;
       margin-left: auto;
     }
   }

package/dist/cjs/f/fields/FileUpload/common/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FilePreview", {
+Object.defineProperty(exports, "Preview", {
   enumerable: true,
   get: function () {
-    return _FilePreview.FilePreview;
+    return _Preview.Preview;
   }
 });
-var _FilePreview = require("./FilePreview");
+var _Preview = require("./Preview");

package/dist/cjs/f/fields/FileUpload/utils.js

@@ -37,9 +37,12 @@ const getFileType = file => {
 };
 exports.getFileType = getFileType;
 const getFileTypeFromUrl = url => {
+  if (!url) {
+    return 'BROKEN';
+  }
   const urlWithoutParams = url.split('?')[0];
   const extension = urlWithoutParams.split('.').pop().toLowerCase();
   const fileType = fileUploadOptions.find(option => option.value.includes(extension));
-  return fileType ? fileType.key : 'unknown';
+  return fileType ? fileType.key : 'UNKNOWN';
 };
 exports.getFileTypeFromUrl = getFileTypeFromUrl;

package/dist/es/f/fields/FileUpload/FileUpload.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useField } from 'formik';
 import styleNames from '@pareto-engineering/bem/exports';
 import "./styles.scss";
-import { FilePreview } from "./common";
+import { Preview } from "./common";
 import { FormLabel, FormDescription } from "../../common";
 
 // Local Definitions
@@ -116,20 +116,16 @@ const FileUpload = ({
     className: "attached-files"
   }, /*#__PURE__*/React.createElement("p", null, "Attached files:"), /*#__PURE__*/React.createElement("div", {
     className: "files"
-  }, value.map((file, indx) => {
-    const isFileObject = file instanceof File;
-    return /*#__PURE__*/React.createElement(FilePreview, {
-      file: file,
-      key: isFileObject ? file.name : file,
-      disabled: disabled,
-      handleDelete: () => handleDelete({
-        fileIndex: indx,
-        identifier: isFileObject ? file.name : file?.id
-      }),
-      uploadStatus: uploadStatus?.[file?.name],
-      viewOnly: viewOnly
-    });
-  }))));
+  }, value.map((file, indx) => /*#__PURE__*/React.createElement(Preview, {
+    file: file,
+    key: file.name,
+    writeOnly: !disabled,
+    handleDelete: () => handleDelete({
+      fileIndex: indx,
+      identifier: file?.id || file.name
+    }),
+    uploadStatus: uploadStatus?.[file?.name]
+  })))));
 };
 FileUpload.propTypes = {
   /**
@@ -220,4 +216,5 @@ FileUpload.defaultProps = {
   filePreviewAlignment: 'bottom',
   viewOnly: false
 };
+FileUpload.Preview = Preview;
 export default FileUpload;

package/dist/es/f/fields/FileUpload/common/{FilePreview/FilePreview.js → Preview/Preview.js}

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { LoadingCircle, ProgressBar } from "../../../../../a";
+import { LoadingCircle, ProgressBar, Tooltip } from "../../../../../a";
 
 // Local Definitions
 
@@ -21,16 +21,16 @@ const FILE_UPLOAD_COMPLETE_PROGRESS = 100;
 /**
  * This is the component description.
  */
-const FilePreview = ({
+const Preview = ({
   id,
   className: userClassName,
   style,
   file,
-  disabled,
   handleDelete,
   uploadStatus,
   color,
-  uploadProgress
+  uploadProgress,
+  writeOnly
   // ...otherProps
 }) => {
   const isFileObject = file instanceof File;
@@ -46,6 +46,7 @@ const FilePreview = ({
     }
   };
   const canDelete = file?.isPreview || isFileObject;
+  const isFileBroken = !writeOnly && !file?.url;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -57,13 +58,19 @@ const FilePreview = ({
   }, type), /*#__PURE__*/React.createElement("span", {
     title: file.name,
     className: "name"
-  }, file.name), /*#__PURE__*/React.createElement(Button, {
+  }, file.name), isFileBroken ? /*#__PURE__*/React.createElement(Tooltip, {
+    description: "bulk-updates-text",
+    content: /*#__PURE__*/React.createElement("p", null, "This file doesn't have a link or the link is invalid.")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "h")) : /*#__PURE__*/React.createElement(Button, {
+    color: "ui-icons",
     isCompact: true,
     isSimple: true,
     onClick: () => canDelete ? handleDelete() : handlePreview()
   }, /*#__PURE__*/React.createElement("span", {
-    className: "icon x-ui-icons c-x"
-  }, canDelete ? 'Y' : '9'))), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "icon"
+  }, canDelete ? 'Y' : '9'))), writeOnly && /*#__PURE__*/React.createElement("div", {
     className: `progress-status x-${statusColor}`
   }, /*#__PURE__*/React.createElement("div", {
     className: "status"
@@ -79,7 +86,7 @@ const FilePreview = ({
     height: "3px"
   })));
 };
-FilePreview.propTypes = {
+Preview.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -99,10 +106,14 @@ FilePreview.propTypes = {
   /**
    * The upload progress of the file
    */
-  uploadProgress: PropTypes.number
+  uploadProgress: PropTypes.number,
+  /**
+   * Whether the preview is used in a context where the user can upload new files
+   */
+  writeOnly: PropTypes.bool
 };
-FilePreview.defaultProps = {
+Preview.defaultProps = {
   color: 'green',
   uploadProgress: 45
 };
-export default FilePreview;
+export default Preview;

package/dist/es/f/fields/FileUpload/common/{FilePreview → Preview}/index.js

@@ -1,2 +1,2 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as FilePreview } from "./FilePreview";
+export { default as Preview } from "./Preview";

package/dist/{cjs/f/fields/FileUpload/common/FilePreview → es/f/fields/FileUpload/common/Preview}/styles.scss

@@ -23,13 +23,16 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     align-items: center;
     display: flex;
     gap: calc(var(--gap) / 2);
+    justify-content: space-between;
 
     > .type {
       padding-block: calc($default-padding / 4);
       padding-inline: calc($default-padding / 2);
 
       // TODO: update the colors to use variables. These are colors from the new DS
-      &.pdf {
+      &.pdf,
+      &.broken,
+      &.unknown {
         background-color: #fdead7;
         color: #b93814;
       }
@@ -68,7 +71,6 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     }
 
     > .#{bem.$base}.button {
-      cursor: pointer;
       margin-left: auto;
     }
   }

package/dist/es/f/fields/FileUpload/common/index.js

@@ -1,2 +1,2 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { FilePreview } from "./FilePreview";
+export { Preview } from "./Preview";

package/dist/es/f/fields/FileUpload/utils.js

@@ -30,8 +30,11 @@ export const getFileType = file => {
   return fileType ? fileType.key : 'unknown';
 };
 export const getFileTypeFromUrl = url => {
+  if (!url) {
+    return 'BROKEN';
+  }
   const urlWithoutParams = url.split('?')[0];
   const extension = urlWithoutParams.split('.').pop().toLowerCase();
   const fileType = fileUploadOptions.find(option => option.value.includes(extension));
-  return fileType ? fileType.key : 'unknown';
+  return fileType ? fileType.key : 'UNKNOWN';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "f9d0eb4bf3a4d825b2da863d3a27c8d4d25ee818"
+  "gitHead": "6e334c8fc47b8d7fc8448c25a587a5b059085a32"
 }

package/src/stories/f/FileUpload.stories.jsx

@@ -53,3 +53,16 @@ export const WithLimitedCount = {
     maxCount:2,
   },
 }
+
+const file = {
+  id       :'101568dad8544564901830661183e281',
+  name     :'test.tar',
+  url      :'https://forte-development-assets.pareto.ai/task/73/101568dad8544564901830661183e281.tar?Expires=1725387927&Signature=D8wIYnCQKyS6kkZbumgHHJ8fXnciwz1f31YGpKUH47InfPFDqGTDpEDub4xsjDPlxlDWomNj05xJs~uiaef49ZuRnPKRgcUFzw86Pn9A81Rw5gawfmuIpJPaUIkhG6VpsmH5pKnnEX2jWb0t5OqD~jMiL1aQU8f7HS241E9qdLy1kG9BHAHYR8IxSz9mHeZD3k~cjVW3I4QtB1PuN3nOgLH1ebBHI0Y1bk6kyVT1Bihz0bpbdg6o5KkoV6DKqLUGbsxvYliWOX8XCjkoDujtl8hDnTFS6Hix75a9idf3qVbTA7IDhoGodzVRw8MbyIHashxQ5-5XRF0mAblJr~2QTQ__&Key-Pair-Id=K3IY7IU3GPUR0N',
+  writeOnly:false,
+}
+
+export const Preview = {
+  render:() => (
+    <FileUpload.Preview file={file} />
+  ),
+}

package/src/ui/f/fields/FileUpload/FileUpload.jsx

@@ -9,7 +9,7 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import './styles.scss'
 
-import { FilePreview } from './common'
+import { Preview } from './common'
 
 import { FormLabel, FormDescription } from '../../common'
 
@@ -143,23 +143,18 @@ const FileUpload = ({
         <div className="attached-files">
           <p>Attached files:</p>
           <div className="files">
-            {value.map((file, indx) => {
-              const isFileObject = file instanceof File
-
-              return (
-                <FilePreview
-                  file={file}
-                  key={isFileObject ? file.name : file}
-                  disabled={disabled}
-                  handleDelete={() => handleDelete({
-                    fileIndex :indx,
-                    identifier:isFileObject ? file.name : file?.id,
-                  })}
-                  uploadStatus={uploadStatus?.[file?.name]}
-                  viewOnly={viewOnly}
-                />
-              )
-            })}
+            {value.map((file, indx) => (
+              <Preview
+                file={file}
+                key={file.name}
+                writeOnly={!disabled}
+                handleDelete={() => handleDelete({
+                  fileIndex :indx,
+                  identifier:file?.id || file.name,
+                })}
+                uploadStatus={uploadStatus?.[file?.name]}
+              />
+            ))}
           </div>
         </div>
       )}
@@ -276,4 +271,6 @@ FileUpload.defaultProps = {
   viewOnly            :false,
 }
 
+FileUpload.Preview = Preview
+
 export default FileUpload

package/src/ui/f/fields/FileUpload/common/{FilePreview/FilePreview.jsx → Preview/Preview.jsx}

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { LoadingCircle, ProgressBar } from 'ui/a'
+import { LoadingCircle, ProgressBar, Tooltip } from 'ui/a'
 
 // Local Definitions
 
@@ -30,16 +30,16 @@ const FILE_UPLOAD_COMPLETE_PROGRESS = 100
 /**
  * This is the component description.
  */
-const FilePreview = ({
+const Preview = ({
   id,
   className:userClassName,
   style,
   file,
-  disabled,
   handleDelete,
   uploadStatus,
   color,
   uploadProgress,
+  writeOnly,
   // ...otherProps
 }) => {
   const isFileObject = file instanceof File
@@ -60,6 +60,8 @@ const FilePreview = ({
 
   const canDelete = file?.isPreview || isFileObject
 
+  const isFileBroken = !writeOnly && !file?.url
+
   return (
     <div
       id={id}
@@ -88,15 +90,33 @@ const FilePreview = ({
           {type}
         </span>
         <span title={file.name} className="name">{file.name}</span>
-        <Button
-          isCompact
-          isSimple
-          onClick={() => (canDelete ? handleDelete() : handlePreview())}
-        >
-          <span className="icon x-ui-icons c-x">{canDelete ? 'Y' : '9'}</span>
-        </Button>
+        {isFileBroken
+          ? (
+            <Tooltip
+              description="bulk-updates-text"
+              content={(
+                <p>
+                  This file doesn&apos;t have a link or the link is invalid.
+                </p>
+              )}
+            >
+              <span className="icon x-ui-icons c-x">
+                h
+              </span>
+            </Tooltip>
+          )
+          : (
+            <Button
+              color="ui-icons"
+              isCompact
+              isSimple
+              onClick={() => (canDelete ? handleDelete() : handlePreview())}
+            >
+              <span className="icon">{canDelete ? 'Y' : '9'}</span>
+            </Button>
+          )}
       </div>
-      {!disabled && (
+      {writeOnly && (
         <div className={`progress-status x-${statusColor}`}>
           <div className="status">
             {isPending ? (
@@ -125,7 +145,7 @@ const FilePreview = ({
   )
 }
 
-FilePreview.propTypes = {
+Preview.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -150,11 +170,16 @@ FilePreview.propTypes = {
    * The upload progress of the file
    */
   uploadProgress:PropTypes.number,
+
+  /**
+   * Whether the preview is used in a context where the user can upload new files
+   */
+  writeOnly:PropTypes.bool,
 }
 
-FilePreview.defaultProps = {
+Preview.defaultProps = {
   color         :'green',
   uploadProgress:45,
 }
 
-export default FilePreview
+export default Preview

package/src/ui/f/fields/FileUpload/common/{FilePreview → Preview}/index.js

@@ -1,2 +1,2 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as FilePreview } from './FilePreview'
+export { default as Preview } from './Preview'

package/src/ui/f/fields/FileUpload/common/{FilePreview → Preview}/styles.scss

@@ -23,13 +23,16 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     align-items: center;
     display: flex;
     gap: calc(var(--gap) / 2);
+    justify-content: space-between;
 
     > .type {
       padding-block: calc($default-padding / 4);
       padding-inline: calc($default-padding / 2);
 
       // TODO: update the colors to use variables. These are colors from the new DS
-      &.pdf {
+      &.pdf,
+      &.broken,
+      &.unknown {
         background-color: #fdead7;
         color: #b93814;
       }
@@ -68,7 +71,6 @@ $default-file-width: calc($width-without-gaps / $files-per-row);
     }
 
     > .#{bem.$base}.button {
-      cursor: pointer;
       margin-left: auto;
     }
   }

package/src/ui/f/fields/FileUpload/common/index.js

@@ -1,2 +1,2 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { FilePreview } from './FilePreview'
+export { Preview } from './Preview'

package/src/ui/f/fields/FileUpload/utils.js

@@ -41,9 +41,12 @@ export const getFileType = (file) => {
 }
 
 export const getFileTypeFromUrl = (url) => {
+  if (!url) {
+    return 'BROKEN'
+  }
   const urlWithoutParams = url.split('?')[0]
   const extension = urlWithoutParams.split('.').pop().toLowerCase()
   const fileType = fileUploadOptions.find((option) => option.value.includes(extension))
 
-  return fileType ? fileType.key : 'unknown'
+  return fileType ? fileType.key : 'UNKNOWN'
 }

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -27553,6 +27553,49 @@ exports[`Storyshots f/fields/FileUpload Multiple 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/FileUpload Preview 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base file-preview"
+  >
+    <div
+      className="identity"
+    >
+      <span
+        className="type unknown"
+      >
+        UNKNOWN
+      </span>
+      <span
+        className="name"
+        title="test.tar"
+      >
+        test.tar
+      </span>
+      <button
+        className="base button x-ui-icons modifierCompact modifierSimple"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="modifierUnderlined"
+        >
+          <span
+            className="icon"
+          >
+            9
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/FileUpload With Limited Count 1`] = `
 <form
   action="#"