@manuscripts/style-guide 2.0.27 → 2.0.28-LEAN-4186.0

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,6 +50,7 @@ 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};
53
54
  `;
54
55
  const RoundedImage = styled_components_1.default.img `
55
56
  width: ${(props) => props.size}px;
@@ -58,7 +59,7 @@ const RoundedImage = styled_components_1.default.img `
58
59
  align-items: center;
59
60
  justify-content: center;
60
61
  `;
61
- const StyledAvatar = (0, styled_components_1.default)(icons_1.AvatarIcon) `
62
+ const StyledAvatar = (0, styled_components_1.default)(icons_1.ProfileIcon) `
62
63
  path {
63
64
  fill: ${(props) => props.color || props.theme.colors.text.secondary};
64
65
  }
@@ -72,6 +73,6 @@ const Avatar = (props) => {
72
73
  const handleSrcError = (0, react_1.useCallback)(() => {
73
74
  setSrcError(true);
74
75
  }, []);
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 }))));
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 }))));
76
77
  };
77
78
  exports.Avatar = Avatar;
@@ -292,7 +292,10 @@ exports.IconButtonGroup = styled_components_1.default.div `
292
292
  flex-direction: row;
293
293
  justify-content: flex-start;
294
294
  align-items: center;
295
-
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);
296
299
  button {
297
300
  width: ${(props) => props.size || 28}px;
298
301
  height: ${(props) => props.size || 28}px;
@@ -36,6 +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
40
  Scroll: icons_1.ScrollIcon,
40
41
  };
41
42
  const ContextMenu = ({ actions }) => (react_1.default.createElement(Button_1.IconButtonGroup, { size: 32 }, actions.map((action) => {
@@ -0,0 +1,11 @@
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;
@@ -0,0 +1,77 @@
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;
@@ -0,0 +1,16 @@
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;
@@ -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.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;
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.ProfileIcon = 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.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 = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = 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,6 +28,8 @@ 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; } });
31
33
  var add_1 = require("./add");
32
34
  Object.defineProperty(exports, "AddIcon", { enumerable: true, get: function () { return __importDefault(add_1).default; } });
33
35
  var arrow_down_1 = require("./arrow-down");
@@ -68,6 +70,8 @@ var deleted_1 = require("./deleted");
68
70
  Object.defineProperty(exports, "DeleteIcon", { enumerable: true, get: function () { return __importDefault(deleted_1).default; } });
69
71
  var dots_1 = require("./dots");
70
72
  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; } });
71
75
  var edit_1 = require("./edit");
72
76
  Object.defineProperty(exports, "EditIcon", { enumerable: true, get: function () { return __importDefault(edit_1).default; } });
73
77
  var edit_attrs_tracking_1 = require("./edit-attrs-tracking");
@@ -190,3 +194,7 @@ var upload_1 = require("./upload");
190
194
  Object.defineProperty(exports, "UploadIcon", { enumerable: true, get: function () { return __importDefault(upload_1).default; } });
191
195
  var vertical_ellipsis_1 = require("./vertical-ellipsis");
192
196
  Object.defineProperty(exports, "VerticalEllipsisIcon", { enumerable: true, get: function () { return __importDefault(vertical_ellipsis_1).default; } });
197
+ var circle_tick_animation_1 = require("./circle-tick-animation");
198
+ Object.defineProperty(exports, "CrclTickAnimation", { enumerable: true, get: function () { return __importDefault(circle_tick_animation_1).default; } });
199
+ var profile_avatar_1 = require("./profile-avatar");
200
+ Object.defineProperty(exports, "ProfileIcon", { enumerable: true, get: function () { return __importDefault(profile_avatar_1).default; } });
@@ -0,0 +1,9 @@
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 ProfileAvatarIcon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 32 32", fill: "none" }, props),
8
+ react_1.default.createElement("path", { d: "M16 0C24.837 0 32 7.163 32 16C32 24.837 24.837 32 16 32C7.163 32 0 24.837 0 16C0 7.163 7.163 0 16 0ZM16 17.585C14.7258 17.585 13.4651 17.8457 12.2954 18.351C11.1257 18.8563 10.0718 19.5956 9.19841 20.5234C8.32504 21.4512 7.65073 22.5478 7.21694 23.7459C6.78315 24.944 6.59907 26.2181 6.676 27.49C9.31009 29.6338 12.6038 30.802 16 30.797C19.396 30.802 22.6896 29.6342 25.324 27.491C25.4009 26.2191 25.2168 24.945 24.7831 23.7469C24.3493 22.5488 23.675 21.4522 22.8016 20.5244C21.9282 19.5966 20.8743 18.8573 19.7046 18.352C18.5349 17.8467 17.2742 17.586 16 17.586V17.585ZM16 1.203C7.828 1.203 1.203 7.828 1.203 16C1.203 20.03 2.815 23.685 5.429 26.354C5.672 21.779 8.82 17.976 13.062 16.753C12.0228 16.1131 11.2209 15.1516 10.778 14.0145C10.3351 12.8773 10.2754 11.6267 10.608 10.4526C10.9406 9.27843 11.6473 8.24491 12.6208 7.509C13.5943 6.7731 14.7814 6.37501 16.0018 6.37522C17.2221 6.37543 18.4091 6.77391 19.3823 7.51015C20.3556 8.24639 21.0619 9.28015 21.3941 10.4544C21.7263 11.6287 21.6662 12.8793 21.2229 14.0163C20.7796 15.1533 19.9774 16.1145 18.938 16.754C23.18 17.976 26.328 21.779 26.571 26.354C29.2842 23.5912 30.802 19.8723 30.797 16C30.797 7.828 24.172 1.203 16 1.203ZM16 7.621C15.4219 7.61225 14.8479 7.71854 14.3113 7.93369C13.7747 8.14885 13.2863 8.46857 12.8744 8.87426C12.4625 9.27994 12.1355 9.76349 11.9122 10.2968C11.6889 10.83 11.574 11.4024 11.574 11.9805C11.574 12.5586 11.6889 13.131 11.9122 13.6642C12.1355 14.1975 12.4625 14.6811 12.8744 15.0867C13.2863 15.4924 13.7747 15.8122 14.3113 16.0273C14.8479 16.2425 15.4219 16.3488 16 16.34C17.1448 16.3227 18.2368 15.8557 19.0402 15.0401C19.8436 14.2244 20.294 13.1254 20.294 11.9805C20.294 10.8356 19.8436 9.73663 19.0402 8.92095C18.2368 8.10527 17.1448 7.63834 16 7.621Z", fill: "#6E6E6E" })));
9
+ exports.default = ProfileAvatarIcon;
@@ -15,12 +15,13 @@
15
15
  */
16
16
  import React, { useCallback, useState } from 'react';
17
17
  import styled from 'styled-components';
18
- import { AvatarIcon } from './icons';
18
+ import { ProfileIcon } from './icons';
19
19
  const AvatarContainer = styled.div `
20
20
  display: flex;
21
21
  align-items: center;
22
22
  justify-content: center;
23
23
  position: relative;
24
+ opacity: ${(props) => props.opacity};
24
25
  `;
25
26
  const RoundedImage = styled.img `
26
27
  width: ${(props) => props.size}px;
@@ -29,7 +30,7 @@ const RoundedImage = styled.img `
29
30
  align-items: center;
30
31
  justify-content: center;
31
32
  `;
32
- const StyledAvatar = styled(AvatarIcon) `
33
+ const StyledAvatar = styled(ProfileIcon) `
33
34
  path {
34
35
  fill: ${(props) => props.color || props.theme.colors.text.secondary};
35
36
  }
@@ -43,5 +44,5 @@ export const Avatar = (props) => {
43
44
  const handleSrcError = useCallback(() => {
44
45
  setSrcError(true);
45
46
  }, []);
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 }))));
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 }))));
47
48
  };
@@ -266,7 +266,10 @@ export const IconButtonGroup = styled.div `
266
266
  flex-direction: row;
267
267
  justify-content: flex-start;
268
268
  align-items: center;
269
-
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);
270
273
  button {
271
274
  width: ${(props) => props.size || 28}px;
272
275
  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, EditIcon, ScrollIcon } from './icons';
19
+ import { AddCommentIcon, AddOutlineIcon, EditIcon, ScrollIcon } from './icons';
20
20
  import { Tooltip } from './Tooltip';
21
21
  const ContextMenuIconButton = styled(IconButton) `
22
22
  color: #6e6e6e;
@@ -30,6 +30,7 @@ const ContextMenuIconButton = styled(IconButton) `
30
30
  const icons = {
31
31
  AddComment: AddCommentIcon,
32
32
  Edit: EditIcon,
33
+ AddOutline: AddOutlineIcon,
33
34
  Scroll: ScrollIcon,
34
35
  };
35
36
  export const ContextMenu = ({ actions }) => (React.createElement(IconButtonGroup, { size: 32 }, actions.map((action) => {
@@ -0,0 +1,6 @@
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;
@@ -0,0 +1,49 @@
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;
@@ -0,0 +1,11 @@
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;
@@ -17,6 +17,7 @@ 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';
20
21
  export { default as AddIcon } from './add';
21
22
  export { default as ArrowDownIcon } from './arrow-down';
22
23
  export { default as ArrowDownCircleIcon } from './arrow-down-circle';
@@ -37,6 +38,7 @@ export { default as CorrespondingAuthorIcon } from './corresponding-author';
37
38
  export { default as DeleteSolidIcon } from './delete-solid';
38
39
  export { default as DeleteIcon } from './deleted';
39
40
  export { default as DotsIcon } from './dots';
41
+ export { default as DraggableIcon } from './draggable-icon';
40
42
  export { default as EditIcon } from './edit';
41
43
  export { default as EditAttrsTrackingIcon } from './edit-attrs-tracking';
42
44
  export { default as FileAudioIcon } from './file-audio';
@@ -98,3 +100,5 @@ export { default as TriangleCollapsedIcon } from './triangle-collapsed';
98
100
  export { default as TriangleExpandedIcon } from './triangle-expanded';
99
101
  export { default as UploadIcon } from './upload';
100
102
  export { default as VerticalEllipsisIcon } from './vertical-ellipsis';
103
+ export { default as CrclTickAnimation } from './circle-tick-animation';
104
+ export { default as ProfileIcon } from './profile-avatar';
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ const ProfileAvatarIcon = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 32 32", fill: "none" }, props),
3
+ React.createElement("path", { d: "M16 0C24.837 0 32 7.163 32 16C32 24.837 24.837 32 16 32C7.163 32 0 24.837 0 16C0 7.163 7.163 0 16 0ZM16 17.585C14.7258 17.585 13.4651 17.8457 12.2954 18.351C11.1257 18.8563 10.0718 19.5956 9.19841 20.5234C8.32504 21.4512 7.65073 22.5478 7.21694 23.7459C6.78315 24.944 6.59907 26.2181 6.676 27.49C9.31009 29.6338 12.6038 30.802 16 30.797C19.396 30.802 22.6896 29.6342 25.324 27.491C25.4009 26.2191 25.2168 24.945 24.7831 23.7469C24.3493 22.5488 23.675 21.4522 22.8016 20.5244C21.9282 19.5966 20.8743 18.8573 19.7046 18.352C18.5349 17.8467 17.2742 17.586 16 17.586V17.585ZM16 1.203C7.828 1.203 1.203 7.828 1.203 16C1.203 20.03 2.815 23.685 5.429 26.354C5.672 21.779 8.82 17.976 13.062 16.753C12.0228 16.1131 11.2209 15.1516 10.778 14.0145C10.3351 12.8773 10.2754 11.6267 10.608 10.4526C10.9406 9.27843 11.6473 8.24491 12.6208 7.509C13.5943 6.7731 14.7814 6.37501 16.0018 6.37522C17.2221 6.37543 18.4091 6.77391 19.3823 7.51015C20.3556 8.24639 21.0619 9.28015 21.3941 10.4544C21.7263 11.6287 21.6662 12.8793 21.2229 14.0163C20.7796 15.1533 19.9774 16.1145 18.938 16.754C23.18 17.976 26.328 21.779 26.571 26.354C29.2842 23.5912 30.802 19.8723 30.797 16C30.797 7.828 24.172 1.203 16 1.203ZM16 7.621C15.4219 7.61225 14.8479 7.71854 14.3113 7.93369C13.7747 8.14885 13.2863 8.46857 12.8744 8.87426C12.4625 9.27994 12.1355 9.76349 11.9122 10.2968C11.6889 10.83 11.574 11.4024 11.574 11.9805C11.574 12.5586 11.6889 13.131 11.9122 13.6642C12.1355 14.1975 12.4625 14.6811 12.8744 15.0867C13.2863 15.4924 13.7747 15.8122 14.3113 16.0273C14.8479 16.2425 15.4219 16.3488 16 16.34C17.1448 16.3227 18.2368 15.8557 19.0402 15.0401C19.8436 14.2244 20.294 13.1254 20.294 11.9805C20.294 10.8356 19.8436 9.73663 19.0402 8.92095C18.2368 8.10527 17.1448 7.63834 16 7.621Z", fill: "#6E6E6E" })));
4
+ export default ProfileAvatarIcon;
@@ -18,6 +18,7 @@ interface AvatarProps {
18
18
  src?: string;
19
19
  size: number;
20
20
  color?: string;
21
+ opacity?: number;
21
22
  }
22
23
  export declare const Avatar: React.FC<AvatarProps>;
23
24
  export {};
@@ -35,7 +35,7 @@ interface DialogProps {
35
35
  };
36
36
  confirmFieldText?: string;
37
37
  category: Category;
38
- header: string;
38
+ header: string | React.ReactElement;
39
39
  message: string | React.ReactElement;
40
40
  className?: string;
41
41
  children?: React.ReactNode;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const AddOutlineIcon: React.FC<IconProps>;
4
+ export default AddOutlineIcon;
@@ -0,0 +1,7 @@
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;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const DraggableIcon: React.FC<IconProps>;
4
+ export default DraggableIcon;
@@ -17,6 +17,7 @@ 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';
20
21
  export { default as AddIcon } from './add';
21
22
  export { default as ArrowDownIcon } from './arrow-down';
22
23
  export { default as ArrowDownCircleIcon } from './arrow-down-circle';
@@ -37,6 +38,7 @@ export { default as CorrespondingAuthorIcon } from './corresponding-author';
37
38
  export { default as DeleteSolidIcon } from './delete-solid';
38
39
  export { default as DeleteIcon } from './deleted';
39
40
  export { default as DotsIcon } from './dots';
41
+ export { default as DraggableIcon } from './draggable-icon';
40
42
  export { default as EditIcon } from './edit';
41
43
  export { default as EditAttrsTrackingIcon } from './edit-attrs-tracking';
42
44
  export { default as FileAudioIcon } from './file-audio';
@@ -98,3 +100,5 @@ export { default as TriangleCollapsedIcon } from './triangle-collapsed';
98
100
  export { default as TriangleExpandedIcon } from './triangle-expanded';
99
101
  export { default as UploadIcon } from './upload';
100
102
  export { default as VerticalEllipsisIcon } from './vertical-ellipsis';
103
+ export { default as CrclTickAnimation } from './circle-tick-animation';
104
+ export { default as ProfileIcon } from './profile-avatar';
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const ProfileAvatarIcon: React.FC<IconProps>;
4
+ export default ProfileAvatarIcon;
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.27",
4
+ "version": "2.0.28-LEAN-4186.0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",