@manuscripts/style-guide 1.1.16-LEAN-2669 → 1.1.16-LEAN-2669-v2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js +4 -8
  2. package/dist/cjs/components/FileManager/InlineFilesSection.js +5 -11
  3. package/dist/es/components/FileManager/FileSectionItem/FileInfo.js +4 -8
  4. package/dist/es/components/FileManager/InlineFilesSection.js +5 -11
  5. package/package.json +1 -1
package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js CHANGED
@@ -27,17 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.FileDescription = exports.FileDate = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileDateContainer = exports.FileInfo = void 0;
30
+ const date_fns_1 = require("date-fns");
30
31
  const react_1 = __importStar(require("react"));
31
32
  const styled_components_1 = __importDefault(require("styled-components"));
32
33
  const FileManager_1 = require("../FileManager");
33
34
  const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
34
35
  const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
35
36
  const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
36
- const date = new Date(fileCreatedDate);
37
- const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date
38
- .getFullYear()
39
- .toString()
40
- .slice(2)}, ${date.getHours()}:${date.getMinutes()}`;
41
37
  return (react_1.default.createElement(exports.FileInfoContainer, null,
42
38
  react_1.default.createElement(exports.FileNameTitleContainer, null,
43
39
  react_1.default.createElement(exports.FileTitle, null,
@@ -49,7 +45,7 @@ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension
49
45
  ".",
50
46
  fileExtension))),
51
47
  fileCreatedDate && (react_1.default.createElement(exports.FileDateContainer, null,
52
- react_1.default.createElement(exports.FileDate, null, formattedDate))))));
48
+ react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(fileCreatedDate, 'd MMMM, EEEE')))))));
53
49
  };
54
50
  exports.FileInfo = FileInfo;
55
51
  exports.FileDateContainer = styled_components_1.default.div `
@@ -57,6 +53,7 @@ exports.FileDateContainer = styled_components_1.default.div `
57
53
  overflow: hidden;
58
54
  width: 100%;
59
55
  display: none;
56
+ margin-left: 10px;
60
57
  `;
61
58
  exports.FileInfoContainer = styled_components_1.default.div `
62
59
  margin-left: 8px;
@@ -100,8 +97,7 @@ exports.FileName = styled_components_1.default.div `
100
97
  width: 50px;
101
98
  `;
102
99
  exports.FileDate = styled_components_1.default.div `
103
- color: '#6E6E6E';
104
- font-size: 12px;
100
+ font-size: font-size: ${(props) => props.theme.font.size.small};
105
101
  `;
106
102
  exports.FileDescription = styled_components_1.default.div `
107
103
  color: ${(props) => props.theme.colors.text.secondary};
package/dist/cjs/components/FileManager/InlineFilesSection.js CHANGED
@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.FileDate = exports.FileDateContainer = exports.InlineFilesSection = void 0;
30
+ const date_fns_1 = require("date-fns");
30
31
  const react_1 = __importStar(require("react"));
31
32
  const styled_components_1 = __importDefault(require("styled-components"));
32
33
  const use_dropdown_1 = require("../../hooks/use-dropdown");
@@ -36,14 +37,6 @@ const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
36
37
  const ItemActions_1 = require("./FileSectionItem/ItemActions");
37
38
  const util_1 = require("./util");
38
39
  const trackedJoint = ':dataTracked:';
39
- function formatDate(inputDate) {
40
- const date = new Date(inputDate);
41
- const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date
42
- .getFullYear()
43
- .toString()
44
- .slice(2)}, ${date.getHours()}:${date.getMinutes()}`;
45
- return formattedDate;
46
- }
47
40
  const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, handleDetachFile, inlineFiles, isEditor, dispatch, }) => {
48
41
  const onElementClick = (0, react_1.useCallback)((e) => {
49
42
  if (!isEditor) {
@@ -81,7 +74,7 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
81
74
  util_1.fileTypesWithIconMap.get(util_1.extensionsWithFileTypesMap.get(fileExtension)),
82
75
  react_1.default.createElement(FileReferenceName, null, attachment.name)),
83
76
  attachment.createdDate && (react_1.default.createElement(exports.FileDateContainer, null,
84
- react_1.default.createElement(exports.FileDate, null, formatDate(attachment.createdDate)))),
77
+ react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(attachment.createdDate, 'd MMMM, EEEE')))),
85
78
  handleDownload && handleReplace && (react_1.default.createElement(DropdownContainer, { ref: wrapperRef },
86
79
  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 },
87
80
  react_1.default.createElement(dots_icon_1.default, null)),
@@ -94,6 +87,7 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
94
87
  exports.FileDateContainer = styled_components_1.default.div `
95
88
  overflow: hidden;
96
89
  display: none;
90
+ width: 50%;
97
91
  `;
98
92
  const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
99
93
  display: flex;
@@ -186,6 +180,6 @@ const DropdownContainer = styled_components_1.default.div `
186
180
  position: relative;
187
181
  `;
188
182
  exports.FileDate = styled_components_1.default.div `
189
- color: '#6E6E6E';
190
- font-size: 12px;
183
+ font-size: ${(props) => props.theme.font.size.small};
184
+ line-height: 27px;
191
185
  `;
package/dist/es/components/FileManager/FileSectionItem/FileInfo.js CHANGED
@@ -1,14 +1,10 @@
1
+ import { format } from 'date-fns';
1
2
  import React, { useContext } from 'react';
2
3
  import styled from 'styled-components';
3
4
  import { PermissionsContext } from '../FileManager';
4
5
  export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
5
6
  const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
6
7
  const can = useContext(PermissionsContext);
7
- const date = new Date(fileCreatedDate);
8
- const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date
9
- .getFullYear()
10
- .toString()
11
- .slice(2)}, ${date.getHours()}:${date.getMinutes()}`;
12
8
  return (React.createElement(FileInfoContainer, null,
13
9
  React.createElement(FileNameTitleContainer, null,
14
10
  React.createElement(FileTitle, null,
@@ -20,13 +16,14 @@ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileEx
20
16
  ".",
21
17
  fileExtension))),
22
18
  fileCreatedDate && (React.createElement(FileDateContainer, null,
23
- React.createElement(FileDate, null, formattedDate))))));
19
+ React.createElement(FileDate, null, format(fileCreatedDate, 'd MMMM, EEEE')))))));
24
20
  };
25
21
  export const FileDateContainer = styled.div `
26
22
  line-height: 20px;
27
23
  overflow: hidden;
28
24
  width: 100%;
29
25
  display: none;
26
+ margin-left: 10px;
30
27
  `;
31
28
  export const FileInfoContainer = styled.div `
32
29
  margin-left: 8px;
@@ -70,8 +67,7 @@ export const FileName = styled.div `
70
67
  width: 50px;
71
68
  `;
72
69
  export const FileDate = styled.div `
73
- color: '#6E6E6E';
74
- font-size: 12px;
70
+ font-size: font-size: ${(props) => props.theme.font.size.small};
75
71
  `;
76
72
  export const FileDescription = styled.div `
77
73
  color: ${(props) => props.theme.colors.text.secondary};
package/dist/es/components/FileManager/InlineFilesSection.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { format } from 'date-fns';
1
2
  import React, { useCallback } from 'react';
2
3
  import styled from 'styled-components';
3
4
  import { useDropdown } from '../../hooks/use-dropdown';
@@ -7,14 +8,6 @@ import { ActionsIcon, Item, } from './FileSectionItem/FileSectionItem';
7
8
  import { ItemActions } from './FileSectionItem/ItemActions';
8
9
  import { extensionsWithFileTypesMap, FileSectionType, fileTypesWithIconMap, } from './util';
9
10
  const trackedJoint = ':dataTracked:';
10
- function formatDate(inputDate) {
11
- const date = new Date(inputDate);
12
- const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date
13
- .getFullYear()
14
- .toString()
15
- .slice(2)}, ${date.getHours()}:${date.getMinutes()}`;
16
- return formattedDate;
17
- }
18
11
  export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, handleDetachFile, inlineFiles, isEditor, dispatch, }) => {
19
12
  const onElementClick = useCallback((e) => {
20
13
  if (!isEditor) {
@@ -51,7 +44,7 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
51
44
  fileTypesWithIconMap.get(extensionsWithFileTypesMap.get(fileExtension)),
52
45
  React.createElement(FileReferenceName, null, attachment.name)),
53
46
  attachment.createdDate && (React.createElement(FileDateContainer, null,
54
- React.createElement(FileDate, null, formatDate(attachment.createdDate)))),
47
+ React.createElement(FileDate, null, format(attachment.createdDate, 'd MMMM, EEEE')))),
55
48
  handleDownload && handleReplace && (React.createElement(DropdownContainer, { ref: wrapperRef },
56
49
  React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
57
50
  React.createElement(DotsIcon, null)),
@@ -64,6 +57,7 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
64
57
  export const FileDateContainer = styled.div `
65
58
  overflow: hidden;
66
59
  display: none;
60
+ width: 50%;
67
61
  `;
68
62
  const ElementItem = styled(Item) `
69
63
  display: flex;
@@ -156,6 +150,6 @@ const DropdownContainer = styled.div `
156
150
  position: relative;
157
151
  `;
158
152
  export const FileDate = styled.div `
159
- color: '#6E6E6E';
160
- font-size: 12px;
153
+ font-size: ${(props) => props.theme.font.size.small};
154
+ line-height: 27px;
161
155
  `;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.1.16-LEAN-2669",
4
+ "version": "1.1.16-LEAN-2669-v2",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",