@manuscripts/style-guide 1.2.0 → 1.2.1-LEAN-2669

package/dist/cjs/components/EditorHeader/EditorHeader.js

@@ -48,13 +48,13 @@ var DialogState;
     DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
     DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
 })(DialogState = exports.DialogState || (exports.DialogState = {}));
-const Editing = { label: 'Editing...', icon: __1.EditIcon };
+const Editing = { label: 'Editing', icon: __1.EditIcon };
 const MapUserRole = {
     Editor: Editing,
     Owner: Editing,
     Writer: Editing,
-    Annotator: { label: 'Suggesting...', icon: __1.AnnotatorIcon },
-    Viewer: { label: 'Reading...', icon: __1.ReadingIcon },
+    Annotator: { label: 'Suggesting', icon: __1.AnnotatorIcon },
+    Viewer: { label: 'Reading', icon: __1.ReadingIcon },
     Proofer: { label: 'Proofing', icon: __1.AnnotatorIcon },
 };
 const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {

package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js

@@ -26,11 +26,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileDescription = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileInfo = void 0;
+exports.FileDescription = exports.FileDate = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileDateContainer = exports.FileInfo = void 0;
+const date_fns_1 = require("date-fns");
 const react_1 = __importStar(require("react"));
+const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FileManager_1 = require("../FileManager");
-const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, }) => {
+const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
     const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
     const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
     return (react_1.default.createElement(exports.FileInfoContainer, null,
@@ -42,9 +44,20 @@ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension
                 react_1.default.createElement(exports.FileName, null, fileName),
                 react_1.default.createElement("div", null,
                     ".",
-                    fileExtension))))));
+                    fileExtension))),
+            fileCreatedDate && (react_1.default.createElement(exports.FileDateContainer, { "data-tip": "tooltip-content" },
+                react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(fileCreatedDate), 'M/d/yy, HH:mm')),
+                react_1.default.createElement(react_tooltip_1.default, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))))));
 };
 exports.FileInfo = FileInfo;
+exports.FileDateContainer = styled_components_1.default.div `
+  line-height: 20px;
+  overflow: hidden;
+  width: 100%;
+  display: none;
+  display: flex;
+  justify-content: flex-end;
+`;
 exports.FileInfoContainer = styled_components_1.default.div `
   margin-left: 8px;
   overflow: hidden;
@@ -53,10 +66,15 @@ exports.FileInfoContainer = styled_components_1.default.div `
   justify-content: center;
   align-items: start;
   width: 100%;
+
+  &:hover ${exports.FileDateContainer} {
+    display: flex;
+  }
 `;
 exports.FileNameTitleContainer = styled_components_1.default.div `
   display: flex;
   width: 100%;
+  align-items: baseline;
 `;
 exports.FileTitle = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.primary};
@@ -79,6 +97,10 @@ exports.FileName = styled_components_1.default.div `
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  width: 50px;
+`;
+exports.FileDate = styled_components_1.default.div `
+  font-size: font-size: ${(props) => props.theme.font.size.small};
 `;
 exports.FileDescription = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.secondary};

package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js

@@ -27,7 +27,7 @@ const FileSectionItem = ({ fileSection, externalFile, title, showAttachmentName
                 }
             } },
             react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
-            react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
+            react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, fileCreatedDate: externalFile.createdDate, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
         onClose && (react_1.default.createElement(IconCloseButton, { onClick: (e) => {
                 e.preventDefault();
                 onClose();

package/dist/cjs/components/FileManager/InlineFilesSection.js

@@ -26,8 +26,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InlineFilesSection = void 0;
+exports.FileDate = exports.FileDateContainer = exports.InlineFilesSection = void 0;
+const date_fns_1 = require("date-fns");
 const react_1 = __importStar(require("react"));
+const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const use_dropdown_1 = require("../../hooks/use-dropdown");
 const dots_icon_1 = __importDefault(require("../icons/dots-icon"));
@@ -52,7 +54,8 @@ const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline,
     return (react_1.default.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (react_1.default.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
+            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch }))))),
             react_1.default.createElement(Element, { className: 'element' },
                 util_1.fileTypesWithIconMap.get(file.type),
                 react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
@@ -71,6 +74,9 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
         react_1.default.createElement(Container, null,
             util_1.fileTypesWithIconMap.get(util_1.extensionsWithFileTypesMap.get(fileExtension)),
             react_1.default.createElement(FileReferenceName, null, attachment.name)),
+        attachment.createdDate && (react_1.default.createElement(exports.FileDateContainer, { "data-tip": "tooltip-content" },
+            react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(attachment.createdDate), 'M/d/yy, HH:mm')),
+            react_1.default.createElement(react_tooltip_1.default, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))),
         handleDownload && handleReplace && (react_1.default.createElement(DropdownContainer, { ref: wrapperRef },
             react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
                 react_1.default.createElement(dots_icon_1.default, null)),
@@ -80,6 +86,12 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
                     attachment.modelId &&
                     handleDetachFile(attachment.id, attachment.modelId), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
+exports.FileDateContainer = styled_components_1.default.div `
+  overflow: hidden;
+  display: none;
+  width: 100%;
+  justify-content: flex-end;
+`;
 const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
   display: flex;
   // this will allow us to select the previous sibling node,
@@ -94,6 +106,9 @@ const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
   .refItems:hover ~ .element {
     background: white !important;
   }
+  &:hover ${exports.FileDateContainer} {
+    display: flex;
+  }
 
   .refItems:hover {
     background: white !important;
@@ -107,18 +122,24 @@ const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
 `;
 const Container = styled_components_1.default.div `
   display: flex;
+  width: 100%;
 `;
 const Element = styled_components_1.default.div `
   display: flex;
   padding: 20px 15px;
 `;
-const FileReferences = styled_components_1.default.div ``;
-const FileReferenceItem = styled_components_1.default.div `
+const FileReferences = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
-
-  svg {
+  width: 100%;
+`;
+const FileReferenceItem = styled_components_1.default.div `
+  display: flex;
+  width: 100%;
+  align-items: space;
+  justify-content: space-between;
+  width: 100% svg {
     width: 14px;
     height: 17px;
   }
@@ -161,3 +182,7 @@ const FileReferenceName = styled_components_1.default.div `
 const DropdownContainer = styled_components_1.default.div `
   position: relative;
 `;
+exports.FileDate = styled_components_1.default.div `
+  font-size: ${(props) => props.theme.font.size.small};
+  line-height: 27px;
+`;

package/dist/es/components/EditorHeader/EditorHeader.js

@@ -19,13 +19,13 @@ export var DialogState;
     DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
     DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
 })(DialogState || (DialogState = {}));
-const Editing = { label: 'Editing...', icon: EditIcon };
+const Editing = { label: 'Editing', icon: EditIcon };
 const MapUserRole = {
     Editor: Editing,
     Owner: Editing,
     Writer: Editing,
-    Annotator: { label: 'Suggesting...', icon: AnnotatorIcon },
-    Viewer: { label: 'Reading...', icon: ReadingIcon },
+    Annotator: { label: 'Suggesting', icon: AnnotatorIcon },
+    Viewer: { label: 'Reading', icon: ReadingIcon },
     Proofer: { label: 'Proofing', icon: AnnotatorIcon },
 };
 export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {

package/dist/es/components/FileManager/FileSectionItem/FileInfo.js

@@ -1,7 +1,9 @@
+import { format } from 'date-fns';
 import React, { useContext } from 'react';
+import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 import { PermissionsContext } from '../FileManager';
-export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, }) => {
+export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
     const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
     const can = useContext(PermissionsContext);
     return (React.createElement(FileInfoContainer, null,
@@ -13,8 +15,19 @@ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileEx
                 React.createElement(FileName, null, fileName),
                 React.createElement("div", null,
                     ".",
-                    fileExtension))))));
+                    fileExtension))),
+            fileCreatedDate && (React.createElement(FileDateContainer, { "data-tip": "tooltip-content" },
+                React.createElement(FileDate, null, format(new Date(fileCreatedDate), 'M/d/yy, HH:mm')),
+                React.createElement(ReactTooltip, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))))));
 };
+export const FileDateContainer = styled.div `
+  line-height: 20px;
+  overflow: hidden;
+  width: 100%;
+  display: none;
+  display: flex;
+  justify-content: flex-end;
+`;
 export const FileInfoContainer = styled.div `
   margin-left: 8px;
   overflow: hidden;
@@ -23,10 +36,15 @@ export const FileInfoContainer = styled.div `
   justify-content: center;
   align-items: start;
   width: 100%;
+
+  &:hover ${FileDateContainer} {
+    display: flex;
+  }
 `;
 export const FileNameTitleContainer = styled.div `
   display: flex;
   width: 100%;
+  align-items: baseline;
 `;
 export const FileTitle = styled.div `
   color: ${(props) => props.theme.colors.text.primary};
@@ -49,6 +67,10 @@ export const FileName = styled.div `
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  width: 50px;
+`;
+export const FileDate = styled.div `
+  font-size: font-size: ${(props) => props.theme.font.size.small};
 `;
 export const FileDescription = styled.div `
   color: ${(props) => props.theme.colors.text.secondary};

package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js

@@ -21,7 +21,7 @@ export const FileSectionItem = ({ fileSection, externalFile, title, showAttachme
                 }
             } },
             React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
-            React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
+            React.createElement(FileInfo, { fileExtension: fileExtension, fileCreatedDate: externalFile.createdDate, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
         onClose && (React.createElement(IconCloseButton, { onClick: (e) => {
                 e.preventDefault();
                 onClose();

package/dist/es/components/FileManager/InlineFilesSection.js

@@ -1,4 +1,6 @@
+import { format } from 'date-fns';
 import React, { useCallback } from 'react';
+import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 import { useDropdown } from '../../hooks/use-dropdown';
 import DotsIcon from '../icons/dots-icon';
@@ -23,7 +25,8 @@ export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdate
     return (React.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (React.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
+            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(React.Fragment, null,
+                React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch }))))),
             React.createElement(Element, { className: 'element' },
                 fileTypesWithIconMap.get(file.type),
                 React.createElement(FileInfoContainer, null,
@@ -41,6 +44,9 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
         React.createElement(Container, null,
             fileTypesWithIconMap.get(extensionsWithFileTypesMap.get(fileExtension)),
             React.createElement(FileReferenceName, null, attachment.name)),
+        attachment.createdDate && (React.createElement(FileDateContainer, { "data-tip": "tooltip-content" },
+            React.createElement(FileDate, null, format(new Date(attachment.createdDate), 'M/d/yy, HH:mm')),
+            React.createElement(ReactTooltip, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))),
         handleDownload && handleReplace && (React.createElement(DropdownContainer, { ref: wrapperRef },
             React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
                 React.createElement(DotsIcon, null)),
@@ -50,6 +56,12 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
                     attachment.modelId &&
                     handleDetachFile(attachment.id, attachment.modelId), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
+export const FileDateContainer = styled.div `
+  overflow: hidden;
+  display: none;
+  width: 100%;
+  justify-content: flex-end;
+`;
 const ElementItem = styled(Item) `
   display: flex;
   // this will allow us to select the previous sibling node,
@@ -64,6 +76,9 @@ const ElementItem = styled(Item) `
   .refItems:hover ~ .element {
     background: white !important;
   }
+  &:hover ${FileDateContainer} {
+    display: flex;
+  }
 
   .refItems:hover {
     background: white !important;
@@ -77,18 +92,24 @@ const ElementItem = styled(Item) `
 `;
 const Container = styled.div `
   display: flex;
+  width: 100%;
 `;
 const Element = styled.div `
   display: flex;
   padding: 20px 15px;
 `;
-const FileReferences = styled.div ``;
-const FileReferenceItem = styled.div `
+const FileReferences = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
-
-  svg {
+  width: 100%;
+`;
+const FileReferenceItem = styled.div `
+  display: flex;
+  width: 100%;
+  align-items: space;
+  justify-content: space-between;
+  width: 100% svg {
     width: 14px;
     height: 17px;
   }
@@ -131,3 +152,7 @@ const FileReferenceName = styled.div `
 const DropdownContainer = styled.div `
   position: relative;
 `;
+export const FileDate = styled.div `
+  font-size: ${(props) => props.theme.font.size.small};
+  line-height: 27px;
+`;

package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts

@@ -6,11 +6,14 @@ export declare const FileInfo: React.FC<{
     fileAttachmentName: string;
     fileExtension: string;
     attachmentId: string;
+    fileCreatedDate: Date;
     dispatch?: Dispatch<Action>;
 }>;
+export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FileInfoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FileNameTitleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FileTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FileNameContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FileName: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FileDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts

@@ -9,6 +9,7 @@ export type FileAttachment = {
     name: string;
     type: FileAttachmentType;
     link: string;
+    createdDate: Date;
 };
 export type FileAttachmentType = {
     id: string;

package/dist/types/components/FileManager/InlineFilesSection.d.ts

@@ -18,3 +18,5 @@ export declare const InlineFilesSection: React.FC<{
     isEditor: boolean;
     dispatch: Dispatch<Action>;
 }>;
+export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.2.0",
+  "version": "1.2.1-LEAN-2669",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -141,4 +141,4 @@
   "resolutions": {
     "@types/react": "^17.0.2"
   }
-}
+}