@manuscripts/style-guide 1.1.16-LEAN-2669-v1 → 1.1.16-LEAN-2669-v22

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

@@ -27,17 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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 styled_components_1 = __importDefault(require("styled-components"));
 const FileManager_1 = require("../FileManager");
 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);
-    const date = new Date(fileCreatedDate);
-    const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date
-        .getFullYear()
-        .toString()
-        .slice(2)}, ${date.getHours()}:${date.getMinutes()}`;
     return (react_1.default.createElement(exports.FileInfoContainer, null,
         react_1.default.createElement(exports.FileNameTitleContainer, null,
             react_1.default.createElement(exports.FileTitle, null,
@@ -49,7 +45,7 @@ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension
                     ".",
                     fileExtension))),
             fileCreatedDate && (react_1.default.createElement(exports.FileDateContainer, null,
-                react_1.default.createElement(exports.FileDate, null, formattedDate))))));
+                react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(fileCreatedDate), 'M/d/yy HH:mm')))))));
 };
 exports.FileInfo = FileInfo;
 exports.FileDateContainer = styled_components_1.default.div `
@@ -101,8 +97,7 @@ exports.FileName = styled_components_1.default.div `
   width: 50px;
 `;
 exports.FileDate = styled_components_1.default.div `
-  color: '#6E6E6E';
-  font-size: 12px;
+  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/InlineFilesSection.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileDate = exports.FileDateContainer = exports.InlineFilesSection = void 0;
+const date_fns_1 = require("date-fns");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const use_dropdown_1 = require("../../hooks/use-dropdown");
@@ -36,14 +37,6 @@ const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
 const ItemActions_1 = require("./FileSectionItem/ItemActions");
 const util_1 = require("./util");
 const trackedJoint = ':dataTracked:';
-function formatDate(inputDate) {
-    const date = new Date(inputDate);
-    const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date
-        .getFullYear()
-        .toString()
-        .slice(2)}, ${date.getHours()}:${date.getMinutes()}`;
-    return formattedDate;
-}
 const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, handleDetachFile, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = (0, react_1.useCallback)((e) => {
         if (!isEditor) {
@@ -81,7 +74,7 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
             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, null,
-            react_1.default.createElement(exports.FileDate, null, formatDate(attachment.createdDate)))),
+            react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(attachment.createdDate), 'M/d/yy HH:mm')))),
         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)),
@@ -95,6 +88,7 @@ exports.FileDateContainer = styled_components_1.default.div `
   overflow: hidden;
   display: none;
   width: 50%;
+  line-height: 27px;
 `;
 const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
   display: flex;
@@ -187,7 +181,6 @@ const DropdownContainer = styled_components_1.default.div `
   position: relative;
 `;
 exports.FileDate = styled_components_1.default.div `
-  color: #6e6e6e;
-  font-size: 12px;
+  font-size: ${(props) => props.theme.font.size.small};
   line-height: 27px;
 `;

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

@@ -1,14 +1,10 @@
+import { format } from 'date-fns';
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { PermissionsContext } from '../FileManager';
 export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
     const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
     const can = useContext(PermissionsContext);
-    const date = new Date(fileCreatedDate);
-    const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date
-        .getFullYear()
-        .toString()
-        .slice(2)}, ${date.getHours()}:${date.getMinutes()}`;
     return (React.createElement(FileInfoContainer, null,
         React.createElement(FileNameTitleContainer, null,
             React.createElement(FileTitle, null,
@@ -20,7 +16,7 @@ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileEx
                     ".",
                     fileExtension))),
             fileCreatedDate && (React.createElement(FileDateContainer, null,
-                React.createElement(FileDate, null, formattedDate))))));
+                React.createElement(FileDate, null, format(new Date(fileCreatedDate), 'M/d/yy HH:mm')))))));
 };
 export const FileDateContainer = styled.div `
   line-height: 20px;
@@ -71,8 +67,7 @@ export const FileName = styled.div `
   width: 50px;
 `;
 export const FileDate = styled.div `
-  color: '#6E6E6E';
-  font-size: 12px;
+  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/InlineFilesSection.js

@@ -1,3 +1,4 @@
+import { format } from 'date-fns';
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import { useDropdown } from '../../hooks/use-dropdown';
@@ -7,14 +8,6 @@ import { ActionsIcon, Item, } from './FileSectionItem/FileSectionItem';
 import { ItemActions } from './FileSectionItem/ItemActions';
 import { extensionsWithFileTypesMap, FileSectionType, fileTypesWithIconMap, } from './util';
 const trackedJoint = ':dataTracked:';
-function formatDate(inputDate) {
-    const date = new Date(inputDate);
-    const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date
-        .getFullYear()
-        .toString()
-        .slice(2)}, ${date.getHours()}:${date.getMinutes()}`;
-    return formattedDate;
-}
 export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, handleDetachFile, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = useCallback((e) => {
         if (!isEditor) {
@@ -51,7 +44,7 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
             fileTypesWithIconMap.get(extensionsWithFileTypesMap.get(fileExtension)),
             React.createElement(FileReferenceName, null, attachment.name)),
         attachment.createdDate && (React.createElement(FileDateContainer, null,
-            React.createElement(FileDate, null, formatDate(attachment.createdDate)))),
+            React.createElement(FileDate, null, format(new Date(attachment.createdDate), 'M/d/yy HH:mm')))),
         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)),
@@ -65,6 +58,7 @@ export const FileDateContainer = styled.div `
   overflow: hidden;
   display: none;
   width: 50%;
+  line-height: 27px;
 `;
 const ElementItem = styled(Item) `
   display: flex;
@@ -157,7 +151,6 @@ const DropdownContainer = styled.div `
   position: relative;
 `;
 export const FileDate = styled.div `
-  color: #6e6e6e;
-  font-size: 12px;
+  font-size: ${(props) => props.theme.font.size.small};
   line-height: 27px;
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.1.16-LEAN-2669-v1",
+  "version": "1.1.16-LEAN-2669-v22",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",