@manuscripts/style-guide 2.0.26-LEAN-4186.0 → 2.0.26

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.
@@ -50,7 +50,6 @@ const AvatarContainer = styled_components_1.default.div `
50
50
  align-items: center;
51
51
  justify-content: center;
52
52
  position: relative;
53
- opacity: ${(props) => props.opacity};
54
53
  `;
55
54
  const RoundedImage = styled_components_1.default.img `
56
55
  width: ${(props) => props.size}px;
@@ -73,6 +72,6 @@ const Avatar = (props) => {
73
72
  const handleSrcError = (0, react_1.useCallback)(() => {
74
73
  setSrcError(true);
75
74
  }, []);
76
- return (react_1.default.createElement(AvatarContainer, { opacity: props.opacity || 1 }, props.src && !srcError ? (react_1.default.createElement(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (react_1.default.createElement(StyledAvatar, { height: props.size, width: props.size, color: props.color }))));
75
+ return (react_1.default.createElement(AvatarContainer, null, props.src && !srcError ? (react_1.default.createElement(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (react_1.default.createElement(StyledAvatar, { height: props.size, width: props.size, color: props.color }))));
77
76
  };
78
77
  exports.Avatar = Avatar;
@@ -292,10 +292,7 @@ exports.IconButtonGroup = styled_components_1.default.div `
292
292
  flex-direction: row;
293
293
  justify-content: flex-start;
294
294
  align-items: center;
295
- border-radius: 4px;
296
- border: 1px solid #c9c9c9;
297
- background: ${(props) => props.theme.colors.background.primary};
298
- box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.3);
295
+
299
296
  button {
300
297
  width: ${(props) => props.size || 28}px;
301
298
  height: ${(props) => props.size || 28}px;
@@ -36,7 +36,7 @@ const ContextMenuIconButton = (0, styled_components_1.default)(Button_1.IconButt
36
36
  const icons = {
37
37
  AddComment: icons_1.AddCommentIcon,
38
38
  Edit: icons_1.EditIcon,
39
- AddOutline: icons_1.AddOutlineIcon,
39
+ Scroll: icons_1.ScrollIcon,
40
40
  };
41
41
  const ContextMenu = ({ actions }) => (react_1.default.createElement(Button_1.IconButtonGroup, { size: 32 }, actions.map((action) => {
42
42
  const Icon = icons[action.icon];
@@ -18,8 +18,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.LogoutIcon = exports.LinkIcon = exports.HelpIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
22
- exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoldIcon = exports.TaskStepDoneIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = void 0;
21
+ exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.LogoutIcon = exports.LinkIcon = exports.HelpIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
22
+ exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoldIcon = exports.TaskStepDoneIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = void 0;
23
23
  var add_author_1 = require("./add-author");
24
24
  Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
25
25
  var add_comment_1 = require("./add-comment");
@@ -28,8 +28,6 @@ var added_1 = require("./added");
28
28
  Object.defineProperty(exports, "AddedIcon", { enumerable: true, get: function () { return __importDefault(added_1).default; } });
29
29
  var add_new_1 = require("./add-new");
30
30
  Object.defineProperty(exports, "AddNewIcon", { enumerable: true, get: function () { return __importDefault(add_new_1).default; } });
31
- var add_outline_1 = require("./add-outline");
32
- Object.defineProperty(exports, "AddOutlineIcon", { enumerable: true, get: function () { return __importDefault(add_outline_1).default; } });
33
31
  var add_1 = require("./add");
34
32
  Object.defineProperty(exports, "AddIcon", { enumerable: true, get: function () { return __importDefault(add_1).default; } });
35
33
  var arrow_down_1 = require("./arrow-down");
@@ -70,8 +68,6 @@ var deleted_1 = require("./deleted");
70
68
  Object.defineProperty(exports, "DeleteIcon", { enumerable: true, get: function () { return __importDefault(deleted_1).default; } });
71
69
  var dots_1 = require("./dots");
72
70
  Object.defineProperty(exports, "DotsIcon", { enumerable: true, get: function () { return __importDefault(dots_1).default; } });
73
- var draggable_icon_1 = require("./draggable-icon");
74
- Object.defineProperty(exports, "DraggableIcon", { enumerable: true, get: function () { return __importDefault(draggable_icon_1).default; } });
75
71
  var edit_1 = require("./edit");
76
72
  Object.defineProperty(exports, "EditIcon", { enumerable: true, get: function () { return __importDefault(edit_1).default; } });
77
73
  var edit_attrs_tracking_1 = require("./edit-attrs-tracking");
@@ -148,6 +144,8 @@ var save_status_saved_1 = require("./save-status-saved");
148
144
  Object.defineProperty(exports, "SaveStatusSavedIcon", { enumerable: true, get: function () { return __importDefault(save_status_saved_1).default; } });
149
145
  var save_status_saving_1 = require("./save-status-saving");
150
146
  Object.defineProperty(exports, "SaveStatusSavingIcon", { enumerable: true, get: function () { return __importDefault(save_status_saving_1).default; } });
147
+ var scroll_1 = require("./scroll");
148
+ Object.defineProperty(exports, "ScrollIcon", { enumerable: true, get: function () { return __importDefault(scroll_1).default; } });
151
149
  var search_1 = require("./search");
152
150
  Object.defineProperty(exports, "SearchIcon", { enumerable: true, get: function () { return __importDefault(search_1).default; } });
153
151
  var section_category_1 = require("./section-category");
@@ -192,5 +190,3 @@ var upload_1 = require("./upload");
192
190
  Object.defineProperty(exports, "UploadIcon", { enumerable: true, get: function () { return __importDefault(upload_1).default; } });
193
191
  var vertical_ellipsis_1 = require("./vertical-ellipsis");
194
192
  Object.defineProperty(exports, "VerticalEllipsisIcon", { enumerable: true, get: function () { return __importDefault(vertical_ellipsis_1).default; } });
195
- var circle_tick_animation_1 = require("./circle-tick-animation");
196
- Object.defineProperty(exports, "CrclTickAnimation", { enumerable: true, get: function () { return __importDefault(circle_tick_animation_1).default; } });
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const ScrollIcon = () => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
8
+ react_1.default.createElement("rect", { x: "14.5", y: "1.5", width: "13", height: "13", transform: "rotate(90 14.5 1.5)" }),
9
+ react_1.default.createElement("rect", { x: "14.5", y: "1.5", width: "13", height: "13", transform: "rotate(90 14.5 1.5)" }),
10
+ react_1.default.createElement("path", { d: "M15 12.5161V3.48387C15 2.82511 14.7383 2.19332 14.2725 1.72751C13.8067 1.26169 13.1749 1 12.5161 1H3.48387C2.82511 1 2.19333 1.26169 1.72751 1.72751C1.26169 2.19332 1 2.82511 1 3.48387V12.5161C1 13.1749 1.26169 13.8067 1.72751 14.2725C2.19333 14.7383 2.82511 15 3.48387 15H12.5161C13.1749 15 13.8067 14.7383 14.2725 14.2725C14.7383 13.8067 15 13.1749 15 12.5161ZM3.48387 13.6452C3.18443 13.6452 2.89726 13.5262 2.68552 13.3145C2.47379 13.1027 2.35484 12.8156 2.35484 12.5161V3.48387C2.35484 3.18443 2.47379 2.89726 2.68552 2.68552C2.89726 2.47379 3.18443 2.35484 3.48387 2.35484H12.5161C12.8156 2.35484 13.1027 2.47379 13.3145 2.68552C13.5262 2.89726 13.6452 3.18443 13.6452 3.48387V12.5161C13.6452 12.8156 13.5262 13.1027 13.3145 13.3145C13.1027 13.5262 12.8156 13.6452 12.5161 13.6452H3.48387Z", fill: "#6E6E6E" }),
11
+ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.1786 11.1966C10.9227 11.4511 10.5089 11.45 10.2543 11.1941L5.03979 5.95182C4.78524 5.69592 4.78634 5.28211 5.04224 5.02756C5.29815 4.77301 5.71196 4.77411 5.9665 5.03002L11.181 10.2723C11.4356 10.5282 11.4345 10.942 11.1786 11.1966Z", fill: "#6E6E6E" }),
12
+ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.7311 5.99911C10.3702 5.99811 10.0768 6.2899 10.0758 6.65084L10.0662 10.0778L6.6399 10.0688C6.27896 10.0679 5.98558 10.3597 5.98464 10.7207C5.98369 11.0816 6.27553 11.375 6.63647 11.3759L10.7162 11.3866C11.0771 11.3876 11.3705 11.0958 11.3715 10.7349L11.3829 6.65449C11.3839 6.29354 11.0921 6.00012 10.7311 5.99911Z", fill: "#6E6E6E" })));
13
+ exports.default = ScrollIcon;
@@ -21,7 +21,6 @@ const AvatarContainer = styled.div `
21
21
  align-items: center;
22
22
  justify-content: center;
23
23
  position: relative;
24
- opacity: ${(props) => props.opacity};
25
24
  `;
26
25
  const RoundedImage = styled.img `
27
26
  width: ${(props) => props.size}px;
@@ -44,5 +43,5 @@ export const Avatar = (props) => {
44
43
  const handleSrcError = useCallback(() => {
45
44
  setSrcError(true);
46
45
  }, []);
47
- return (React.createElement(AvatarContainer, { opacity: props.opacity || 1 }, props.src && !srcError ? (React.createElement(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (React.createElement(StyledAvatar, { height: props.size, width: props.size, color: props.color }))));
46
+ return (React.createElement(AvatarContainer, null, props.src && !srcError ? (React.createElement(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (React.createElement(StyledAvatar, { height: props.size, width: props.size, color: props.color }))));
48
47
  };
@@ -266,10 +266,7 @@ export const IconButtonGroup = styled.div `
266
266
  flex-direction: row;
267
267
  justify-content: flex-start;
268
268
  align-items: center;
269
- border-radius: 4px;
270
- border: 1px solid #c9c9c9;
271
- background: ${(props) => props.theme.colors.background.primary};
272
- box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.3);
269
+
273
270
  button {
274
271
  width: ${(props) => props.size || 28}px;
275
272
  height: ${(props) => props.size || 28}px;
@@ -16,7 +16,7 @@
16
16
  import React from 'react';
17
17
  import styled from 'styled-components';
18
18
  import { IconButton, IconButtonGroup } from './Button';
19
- import { AddCommentIcon, AddOutlineIcon, EditIcon } from './icons';
19
+ import { AddCommentIcon, EditIcon, ScrollIcon } from './icons';
20
20
  import { Tooltip } from './Tooltip';
21
21
  const ContextMenuIconButton = styled(IconButton) `
22
22
  color: #6e6e6e;
@@ -30,7 +30,7 @@ const ContextMenuIconButton = styled(IconButton) `
30
30
  const icons = {
31
31
  AddComment: AddCommentIcon,
32
32
  Edit: EditIcon,
33
- AddOutline: AddOutlineIcon,
33
+ Scroll: ScrollIcon,
34
34
  };
35
35
  export const ContextMenu = ({ actions }) => (React.createElement(IconButtonGroup, { size: 32 }, actions.map((action) => {
36
36
  const Icon = icons[action.icon];
@@ -17,7 +17,6 @@ export { default as AddAuthorIcon } from './add-author';
17
17
  export { default as AddCommentIcon } from './add-comment';
18
18
  export { default as AddedIcon } from './added';
19
19
  export { default as AddNewIcon } from './add-new';
20
- export { default as AddOutlineIcon } from './add-outline';
21
20
  export { default as AddIcon } from './add';
22
21
  export { default as ArrowDownIcon } from './arrow-down';
23
22
  export { default as ArrowDownCircleIcon } from './arrow-down-circle';
@@ -38,7 +37,6 @@ export { default as CorrespondingAuthorIcon } from './corresponding-author';
38
37
  export { default as DeleteSolidIcon } from './delete-solid';
39
38
  export { default as DeleteIcon } from './deleted';
40
39
  export { default as DotsIcon } from './dots';
41
- export { default as DraggableIcon } from './draggable-icon';
42
40
  export { default as EditIcon } from './edit';
43
41
  export { default as EditAttrsTrackingIcon } from './edit-attrs-tracking';
44
42
  export { default as FileAudioIcon } from './file-audio';
@@ -77,6 +75,7 @@ export { default as RoleReadingIcon } from './role-reading';
77
75
  export { default as SaveStatusOfflineIcon } from './save-status-offline';
78
76
  export { default as SaveStatusSavedIcon } from './save-status-saved';
79
77
  export { default as SaveStatusSavingIcon } from './save-status-saving';
78
+ export { default as ScrollIcon } from './scroll';
80
79
  export { default as SearchIcon } from './search';
81
80
  export { default as SectionCategoryIcon } from './section-category';
82
81
  export { default as SliderOffIcon } from './slider-off';
@@ -99,4 +98,3 @@ export { default as TriangleCollapsedIcon } from './triangle-collapsed';
99
98
  export { default as TriangleExpandedIcon } from './triangle-expanded';
100
99
  export { default as UploadIcon } from './upload';
101
100
  export { default as VerticalEllipsisIcon } from './vertical-ellipsis';
102
- export { default as CrclTickAnimation } from './circle-tick-animation';
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ const ScrollIcon = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
3
+ React.createElement("rect", { x: "14.5", y: "1.5", width: "13", height: "13", transform: "rotate(90 14.5 1.5)" }),
4
+ React.createElement("rect", { x: "14.5", y: "1.5", width: "13", height: "13", transform: "rotate(90 14.5 1.5)" }),
5
+ React.createElement("path", { d: "M15 12.5161V3.48387C15 2.82511 14.7383 2.19332 14.2725 1.72751C13.8067 1.26169 13.1749 1 12.5161 1H3.48387C2.82511 1 2.19333 1.26169 1.72751 1.72751C1.26169 2.19332 1 2.82511 1 3.48387V12.5161C1 13.1749 1.26169 13.8067 1.72751 14.2725C2.19333 14.7383 2.82511 15 3.48387 15H12.5161C13.1749 15 13.8067 14.7383 14.2725 14.2725C14.7383 13.8067 15 13.1749 15 12.5161ZM3.48387 13.6452C3.18443 13.6452 2.89726 13.5262 2.68552 13.3145C2.47379 13.1027 2.35484 12.8156 2.35484 12.5161V3.48387C2.35484 3.18443 2.47379 2.89726 2.68552 2.68552C2.89726 2.47379 3.18443 2.35484 3.48387 2.35484H12.5161C12.8156 2.35484 13.1027 2.47379 13.3145 2.68552C13.5262 2.89726 13.6452 3.18443 13.6452 3.48387V12.5161C13.6452 12.8156 13.5262 13.1027 13.3145 13.3145C13.1027 13.5262 12.8156 13.6452 12.5161 13.6452H3.48387Z", fill: "#6E6E6E" }),
6
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.1786 11.1966C10.9227 11.4511 10.5089 11.45 10.2543 11.1941L5.03979 5.95182C4.78524 5.69592 4.78634 5.28211 5.04224 5.02756C5.29815 4.77301 5.71196 4.77411 5.9665 5.03002L11.181 10.2723C11.4356 10.5282 11.4345 10.942 11.1786 11.1966Z", fill: "#6E6E6E" }),
7
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.7311 5.99911C10.3702 5.99811 10.0768 6.2899 10.0758 6.65084L10.0662 10.0778L6.6399 10.0688C6.27896 10.0679 5.98558 10.3597 5.98464 10.7207C5.98369 11.0816 6.27553 11.375 6.63647 11.3759L10.7162 11.3866C11.0771 11.3876 11.3705 11.0958 11.3715 10.7349L11.3829 6.65449C11.3839 6.29354 11.0921 6.00012 10.7311 5.99911Z", fill: "#6E6E6E" })));
8
+ export default ScrollIcon;
@@ -18,7 +18,6 @@ interface AvatarProps {
18
18
  src?: string;
19
19
  size: number;
20
20
  color?: string;
21
- opacity?: number;
22
21
  }
23
22
  export declare const Avatar: React.FC<AvatarProps>;
24
23
  export {};
@@ -35,7 +35,7 @@ interface DialogProps {
35
35
  };
36
36
  confirmFieldText?: string;
37
37
  category: Category;
38
- header: string | React.ReactElement;
38
+ header: string;
39
39
  message: string | React.ReactElement;
40
40
  className?: string;
41
41
  children?: React.ReactNode;
@@ -17,7 +17,6 @@ export { default as AddAuthorIcon } from './add-author';
17
17
  export { default as AddCommentIcon } from './add-comment';
18
18
  export { default as AddedIcon } from './added';
19
19
  export { default as AddNewIcon } from './add-new';
20
- export { default as AddOutlineIcon } from './add-outline';
21
20
  export { default as AddIcon } from './add';
22
21
  export { default as ArrowDownIcon } from './arrow-down';
23
22
  export { default as ArrowDownCircleIcon } from './arrow-down-circle';
@@ -38,7 +37,6 @@ export { default as CorrespondingAuthorIcon } from './corresponding-author';
38
37
  export { default as DeleteSolidIcon } from './delete-solid';
39
38
  export { default as DeleteIcon } from './deleted';
40
39
  export { default as DotsIcon } from './dots';
41
- export { default as DraggableIcon } from './draggable-icon';
42
40
  export { default as EditIcon } from './edit';
43
41
  export { default as EditAttrsTrackingIcon } from './edit-attrs-tracking';
44
42
  export { default as FileAudioIcon } from './file-audio';
@@ -77,6 +75,7 @@ export { default as RoleReadingIcon } from './role-reading';
77
75
  export { default as SaveStatusOfflineIcon } from './save-status-offline';
78
76
  export { default as SaveStatusSavedIcon } from './save-status-saved';
79
77
  export { default as SaveStatusSavingIcon } from './save-status-saving';
78
+ export { default as ScrollIcon } from './scroll';
80
79
  export { default as SearchIcon } from './search';
81
80
  export { default as SectionCategoryIcon } from './section-category';
82
81
  export { default as SliderOffIcon } from './slider-off';
@@ -99,4 +98,3 @@ export { default as TriangleCollapsedIcon } from './triangle-collapsed';
99
98
  export { default as TriangleExpandedIcon } from './triangle-expanded';
100
99
  export { default as UploadIcon } from './upload';
101
100
  export { default as VerticalEllipsisIcon } from './vertical-ellipsis';
102
- export { default as CrclTickAnimation } from './circle-tick-animation';
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const ScrollIcon: React.FC<IconProps>;
4
+ export default ScrollIcon;
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": "2.0.26-LEAN-4186.0",
4
+ "version": "2.0.26",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -1,11 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const AddOutlineIcon = (props) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none" },
8
- react_1.default.createElement("path", { d: "M6.875 1.27794C7.57115 0.876016 8.42885 0.876016 9.125 1.27794L14.125 4.16469C14.8212 4.56662 15.25 5.3094 15.25 6.11325V11.8868C15.25 12.6906 14.8212 13.4334 14.125 13.8353L9.125 16.7221C8.42885 17.124 7.57115 17.124 6.875 16.7221L1.875 13.8353C1.17885 13.4334 0.75 12.6906 0.75 11.8868V6.11325C0.75 5.3094 1.17885 4.56662 1.875 4.16469L6.875 1.27794Z", stroke: "#353535", strokeWidth: "1.5" }),
9
- react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.00244 4.70996C7.78153 4.70996 7.60244 4.88905 7.60244 5.10996V8.30996H4.40244C4.18153 8.30996 4.00244 8.48905 4.00244 8.70996C4.00244 8.93087 4.18153 9.10996 4.40244 9.10996H7.60244V12.31C7.60244 12.5309 7.78153 12.71 8.00244 12.71C8.22336 12.71 8.40244 12.5309 8.40244 12.31V9.10996H11.6024C11.8234 9.10996 12.0024 8.93087 12.0024 8.70996C12.0024 8.48905 11.8234 8.30996 11.6024 8.30996H8.40244V5.10996C8.40244 4.88905 8.22336 4.70996 8.00244 4.70996Z", fill: "#353535" }),
10
- react_1.default.createElement("path", { d: "M7.60244 8.30996V8.80996H8.10244V8.30996H7.60244ZM7.60244 9.10996H8.10244V8.60996H7.60244V9.10996ZM8.40244 9.10996V8.60996H7.90244V9.10996H8.40244ZM8.40244 8.30996H7.90244V8.80996H8.40244V8.30996ZM8.10244 5.10996C8.10244 5.16519 8.05767 5.20996 8.00244 5.20996V4.20996C7.50539 4.20996 7.10244 4.6129 7.10244 5.10996H8.10244ZM8.10244 8.30996V5.10996H7.10244V8.30996H8.10244ZM4.40244 8.80996H7.60244V7.80996H4.40244V8.80996ZM4.50244 8.70996C4.50244 8.76519 4.45767 8.80996 4.40244 8.80996V7.80996C3.90538 7.80996 3.50244 8.2129 3.50244 8.70996H4.50244ZM4.40244 8.60996C4.45767 8.60996 4.50244 8.65473 4.50244 8.70996H3.50244C3.50244 9.20702 3.90538 9.60996 4.40244 9.60996V8.60996ZM7.60244 8.60996H4.40244V9.60996H7.60244V8.60996ZM8.10244 12.31V9.10996H7.10244V12.31H8.10244ZM8.00244 12.21C8.05767 12.21 8.10244 12.2547 8.10244 12.31H7.10244C7.10244 12.807 7.50539 13.21 8.00244 13.21V12.21ZM7.90244 12.31C7.90244 12.2547 7.94721 12.21 8.00244 12.21V13.21C8.4995 13.21 8.90244 12.807 8.90244 12.31H7.90244ZM7.90244 9.10996V12.31H8.90244V9.10996H7.90244ZM11.6024 8.60996H8.40244V9.60996H11.6024V8.60996ZM11.5024 8.70996C11.5024 8.65473 11.5472 8.60996 11.6024 8.60996V9.60996C12.0995 9.60996 12.5024 9.20702 12.5024 8.70996H11.5024ZM11.6024 8.80996C11.5472 8.80996 11.5024 8.76519 11.5024 8.70996H12.5024C12.5024 8.21291 12.0995 7.80996 11.6024 7.80996V8.80996ZM8.40244 8.80996H11.6024V7.80996H8.40244V8.80996ZM7.90244 5.10996V8.30996H8.90244V5.10996H7.90244ZM8.00244 5.20996C7.94721 5.20996 7.90244 5.16519 7.90244 5.10996H8.90244C8.90244 4.6129 8.4995 4.20996 8.00244 4.20996V5.20996Z", fill: "#353535" })));
11
- exports.default = AddOutlineIcon;
@@ -1,77 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- const react_1 = __importDefault(require("react"));
30
- const styled_components_1 = __importStar(require("styled-components"));
31
- const fillCircle = (0, styled_components_1.keyframes) `
32
- from {
33
- stroke-dashoffset: 283; /* Full circumference */
34
- }
35
- to {
36
- stroke-dashoffset: 0;
37
- }
38
- `;
39
- const Svg = styled_components_1.default.svg `
40
- position: absolute;
41
- `;
42
- const drawTick = (0, styled_components_1.keyframes) `
43
- from {
44
- stroke-dasharray: 0 100;
45
- opacity: 0;
46
- }
47
- to {
48
- stroke-dasharray: 100 0;
49
- opacity: 1;
50
- }
51
- `;
52
- const Circle = styled_components_1.default.circle `
53
- stroke-dasharray: 283;
54
- stroke-dashoffset: 283;
55
- animation: ${fillCircle} 2s linear forwards;
56
- stroke: ${(props) => props.color || '#4CAF50'};
57
- fill: none;
58
- transform-origin: center;
59
- transform: rotate(-90deg);
60
- `;
61
- const Tick = styled_components_1.default.polyline `
62
- stroke-dasharray: 100;
63
- stroke-dashoffset: 100;
64
- animation: ${drawTick} 1s ease-in-out 2s forwards;
65
- stroke: ${(props) => props.color || '#4CAF50'};
66
- fill: none;
67
- stroke-width: 5;
68
- stroke-linecap: round;
69
- stroke-linejoin: round;
70
- opacity: 0;
71
- `;
72
- const CircleTickAnimation = ({ color, size, }) => {
73
- return (react_1.default.createElement(Svg, { width: size, height: size, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
74
- react_1.default.createElement(Circle, { cx: "50", cy: "50", r: "45", strokeWidth: "5", color: color }),
75
- react_1.default.createElement(Tick, { points: "30,50 45,65 70,40", color: color })));
76
- };
77
- exports.default = CircleTickAnimation;
@@ -1,16 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const DraggableIcon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 32 32", fill: "none" }, props),
8
- react_1.default.createElement("path", { d: "M14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z", fill: "#6E6E6E" }),
9
- react_1.default.createElement("path", { d: "M22 4C22 5.10457 21.1046 6 20 6C18.8954 6 18 5.10457 18 4C18 2.89543 18.8954 2 20 2C21.1046 2 22 2.89543 22 4Z", fill: "#6E6E6E" }),
10
- react_1.default.createElement("path", { d: "M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z", fill: "#6E6E6E" }),
11
- react_1.default.createElement("path", { d: "M22 12C22 13.1046 21.1046 14 20 14C18.8954 14 18 13.1046 18 12C18 10.8954 18.8954 10 20 10C21.1046 10 22 10.8954 22 12Z", fill: "#6E6E6E" }),
12
- react_1.default.createElement("path", { d: "M14 20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20C10 18.8954 10.8954 18 12 18C13.1046 18 14 18.8954 14 20Z", fill: "#6E6E6E" }),
13
- react_1.default.createElement("path", { d: "M14 28C14 29.1046 13.1046 30 12 30C10.8954 30 10 29.1046 10 28C10 26.8954 10.8954 26 12 26C13.1046 26 14 26.8954 14 28Z", fill: "#6E6E6E" }),
14
- react_1.default.createElement("path", { d: "M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 18.8954 18 20 18C21.1046 18 22 18.8954 22 20Z", fill: "#6E6E6E" }),
15
- react_1.default.createElement("path", { d: "M22 28C22 29.1046 21.1046 30 20 30C18.8954 30 18 29.1046 18 28C18 26.8954 18.8954 26 20 26C21.1046 26 22 26.8954 22 28Z", fill: "#6E6E6E" })));
16
- exports.default = DraggableIcon;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- const AddOutlineIcon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none" },
3
- React.createElement("path", { d: "M6.875 1.27794C7.57115 0.876016 8.42885 0.876016 9.125 1.27794L14.125 4.16469C14.8212 4.56662 15.25 5.3094 15.25 6.11325V11.8868C15.25 12.6906 14.8212 13.4334 14.125 13.8353L9.125 16.7221C8.42885 17.124 7.57115 17.124 6.875 16.7221L1.875 13.8353C1.17885 13.4334 0.75 12.6906 0.75 11.8868V6.11325C0.75 5.3094 1.17885 4.56662 1.875 4.16469L6.875 1.27794Z", stroke: "#353535", strokeWidth: "1.5" }),
4
- React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.00244 4.70996C7.78153 4.70996 7.60244 4.88905 7.60244 5.10996V8.30996H4.40244C4.18153 8.30996 4.00244 8.48905 4.00244 8.70996C4.00244 8.93087 4.18153 9.10996 4.40244 9.10996H7.60244V12.31C7.60244 12.5309 7.78153 12.71 8.00244 12.71C8.22336 12.71 8.40244 12.5309 8.40244 12.31V9.10996H11.6024C11.8234 9.10996 12.0024 8.93087 12.0024 8.70996C12.0024 8.48905 11.8234 8.30996 11.6024 8.30996H8.40244V5.10996C8.40244 4.88905 8.22336 4.70996 8.00244 4.70996Z", fill: "#353535" }),
5
- React.createElement("path", { d: "M7.60244 8.30996V8.80996H8.10244V8.30996H7.60244ZM7.60244 9.10996H8.10244V8.60996H7.60244V9.10996ZM8.40244 9.10996V8.60996H7.90244V9.10996H8.40244ZM8.40244 8.30996H7.90244V8.80996H8.40244V8.30996ZM8.10244 5.10996C8.10244 5.16519 8.05767 5.20996 8.00244 5.20996V4.20996C7.50539 4.20996 7.10244 4.6129 7.10244 5.10996H8.10244ZM8.10244 8.30996V5.10996H7.10244V8.30996H8.10244ZM4.40244 8.80996H7.60244V7.80996H4.40244V8.80996ZM4.50244 8.70996C4.50244 8.76519 4.45767 8.80996 4.40244 8.80996V7.80996C3.90538 7.80996 3.50244 8.2129 3.50244 8.70996H4.50244ZM4.40244 8.60996C4.45767 8.60996 4.50244 8.65473 4.50244 8.70996H3.50244C3.50244 9.20702 3.90538 9.60996 4.40244 9.60996V8.60996ZM7.60244 8.60996H4.40244V9.60996H7.60244V8.60996ZM8.10244 12.31V9.10996H7.10244V12.31H8.10244ZM8.00244 12.21C8.05767 12.21 8.10244 12.2547 8.10244 12.31H7.10244C7.10244 12.807 7.50539 13.21 8.00244 13.21V12.21ZM7.90244 12.31C7.90244 12.2547 7.94721 12.21 8.00244 12.21V13.21C8.4995 13.21 8.90244 12.807 8.90244 12.31H7.90244ZM7.90244 9.10996V12.31H8.90244V9.10996H7.90244ZM11.6024 8.60996H8.40244V9.60996H11.6024V8.60996ZM11.5024 8.70996C11.5024 8.65473 11.5472 8.60996 11.6024 8.60996V9.60996C12.0995 9.60996 12.5024 9.20702 12.5024 8.70996H11.5024ZM11.6024 8.80996C11.5472 8.80996 11.5024 8.76519 11.5024 8.70996H12.5024C12.5024 8.21291 12.0995 7.80996 11.6024 7.80996V8.80996ZM8.40244 8.80996H11.6024V7.80996H8.40244V8.80996ZM7.90244 5.10996V8.30996H8.90244V5.10996H7.90244ZM8.00244 5.20996C7.94721 5.20996 7.90244 5.16519 7.90244 5.10996H8.90244C8.90244 4.6129 8.4995 4.20996 8.00244 4.20996V5.20996Z", fill: "#353535" })));
6
- export default AddOutlineIcon;
@@ -1,49 +0,0 @@
1
- import React from 'react';
2
- import styled, { keyframes } from 'styled-components';
3
- const fillCircle = keyframes `
4
- from {
5
- stroke-dashoffset: 283; /* Full circumference */
6
- }
7
- to {
8
- stroke-dashoffset: 0;
9
- }
10
- `;
11
- const Svg = styled.svg `
12
- position: absolute;
13
- `;
14
- const drawTick = keyframes `
15
- from {
16
- stroke-dasharray: 0 100;
17
- opacity: 0;
18
- }
19
- to {
20
- stroke-dasharray: 100 0;
21
- opacity: 1;
22
- }
23
- `;
24
- const Circle = styled.circle `
25
- stroke-dasharray: 283;
26
- stroke-dashoffset: 283;
27
- animation: ${fillCircle} 2s linear forwards;
28
- stroke: ${(props) => props.color || '#4CAF50'};
29
- fill: none;
30
- transform-origin: center;
31
- transform: rotate(-90deg);
32
- `;
33
- const Tick = styled.polyline `
34
- stroke-dasharray: 100;
35
- stroke-dashoffset: 100;
36
- animation: ${drawTick} 1s ease-in-out 2s forwards;
37
- stroke: ${(props) => props.color || '#4CAF50'};
38
- fill: none;
39
- stroke-width: 5;
40
- stroke-linecap: round;
41
- stroke-linejoin: round;
42
- opacity: 0;
43
- `;
44
- const CircleTickAnimation = ({ color, size, }) => {
45
- return (React.createElement(Svg, { width: size, height: size, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
46
- React.createElement(Circle, { cx: "50", cy: "50", r: "45", strokeWidth: "5", color: color }),
47
- React.createElement(Tick, { points: "30,50 45,65 70,40", color: color })));
48
- };
49
- export default CircleTickAnimation;
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- const DraggableIcon = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 32 32", fill: "none" }, props),
3
- React.createElement("path", { d: "M14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z", fill: "#6E6E6E" }),
4
- React.createElement("path", { d: "M22 4C22 5.10457 21.1046 6 20 6C18.8954 6 18 5.10457 18 4C18 2.89543 18.8954 2 20 2C21.1046 2 22 2.89543 22 4Z", fill: "#6E6E6E" }),
5
- React.createElement("path", { d: "M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z", fill: "#6E6E6E" }),
6
- React.createElement("path", { d: "M22 12C22 13.1046 21.1046 14 20 14C18.8954 14 18 13.1046 18 12C18 10.8954 18.8954 10 20 10C21.1046 10 22 10.8954 22 12Z", fill: "#6E6E6E" }),
7
- React.createElement("path", { d: "M14 20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20C10 18.8954 10.8954 18 12 18C13.1046 18 14 18.8954 14 20Z", fill: "#6E6E6E" }),
8
- React.createElement("path", { d: "M14 28C14 29.1046 13.1046 30 12 30C10.8954 30 10 29.1046 10 28C10 26.8954 10.8954 26 12 26C13.1046 26 14 26.8954 14 28Z", fill: "#6E6E6E" }),
9
- React.createElement("path", { d: "M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 18.8954 18 20 18C21.1046 18 22 18.8954 22 20Z", fill: "#6E6E6E" }),
10
- React.createElement("path", { d: "M22 28C22 29.1046 21.1046 30 20 30C18.8954 30 18 29.1046 18 28C18 26.8954 18.8954 26 20 26C21.1046 26 22 26.8954 22 28Z", fill: "#6E6E6E" })));
11
- export default DraggableIcon;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { IconProps } from './types';
3
- declare const AddOutlineIcon: React.FC<IconProps>;
4
- export default AddOutlineIcon;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- interface CircleTickAnimationProps {
3
- size: number;
4
- color?: string;
5
- }
6
- declare const CircleTickAnimation: React.FC<CircleTickAnimationProps>;
7
- export default CircleTickAnimation;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { IconProps } from './types';
3
- declare const DraggableIcon: React.FC<IconProps>;
4
- export default DraggableIcon;