@manuscripts/style-guide 2.0.25 → 2.0.26-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.
- package/dist/cjs/components/Avatar.js +2 -1
- package/dist/cjs/components/Button.js +4 -1
- package/dist/cjs/components/ContextMenu.js +1 -0
- package/dist/cjs/components/icons/add-outline.js +11 -0
- package/dist/cjs/components/icons/circle-tick-animation.js +77 -0
- package/dist/cjs/components/icons/draggable-icon.js +16 -0
- package/dist/cjs/components/icons/index.js +8 -2
- package/dist/es/components/Avatar.js +2 -1
- package/dist/es/components/Button.js +4 -1
- package/dist/es/components/ContextMenu.js +2 -1
- package/dist/es/components/icons/add-outline.js +6 -0
- package/dist/es/components/icons/circle-tick-animation.js +49 -0
- package/dist/es/components/icons/draggable-icon.js +11 -0
- package/dist/es/components/icons/index.js +3 -0
- package/dist/types/components/Avatar.d.ts +1 -0
- package/dist/types/components/Dialog.d.ts +1 -1
- package/dist/types/components/icons/add-outline.d.ts +4 -0
- package/dist/types/components/icons/circle-tick-animation.d.ts +7 -0
- package/dist/types/components/icons/draggable-icon.d.ts +4 -0
- package/dist/types/components/icons/index.d.ts +3 -0
- package/package.json +1 -1
|
@@ -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;
|
|
@@ -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,
|
|
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
|
};
|
|
40
41
|
const ContextMenu = ({ actions }) => (react_1.default.createElement(Button_1.IconButtonGroup, { size: 32 }, actions.map((action) => {
|
|
41
42
|
const Icon = icons[action.icon];
|
|
@@ -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.
|
|
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.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.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;
|
|
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");
|
|
@@ -188,3 +192,5 @@ var upload_1 = require("./upload");
|
|
|
188
192
|
Object.defineProperty(exports, "UploadIcon", { enumerable: true, get: function () { return __importDefault(upload_1).default; } });
|
|
189
193
|
var vertical_ellipsis_1 = require("./vertical-ellipsis");
|
|
190
194
|
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; } });
|
|
@@ -21,6 +21,7 @@ const AvatarContainer = styled.div `
|
|
|
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;
|
|
@@ -43,5 +44,5 @@ export const Avatar = (props) => {
|
|
|
43
44
|
const handleSrcError = useCallback(() => {
|
|
44
45
|
setSrcError(true);
|
|
45
46
|
}, []);
|
|
46
|
-
return (React.createElement(AvatarContainer,
|
|
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 } from './icons';
|
|
19
|
+
import { AddCommentIcon, AddOutlineIcon, EditIcon } 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
|
};
|
|
34
35
|
export const ContextMenu = ({ actions }) => (React.createElement(IconButtonGroup, { size: 32 }, actions.map((action) => {
|
|
35
36
|
const Icon = icons[action.icon];
|
|
@@ -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';
|
|
@@ -97,3 +99,4 @@ export { default as TriangleCollapsedIcon } from './triangle-collapsed';
|
|
|
97
99
|
export { default as TriangleExpandedIcon } from './triangle-expanded';
|
|
98
100
|
export { default as UploadIcon } from './upload';
|
|
99
101
|
export { default as VerticalEllipsisIcon } from './vertical-ellipsis';
|
|
102
|
+
export { default as CrclTickAnimation } from './circle-tick-animation';
|
|
@@ -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';
|
|
@@ -97,3 +99,4 @@ export { default as TriangleCollapsedIcon } from './triangle-collapsed';
|
|
|
97
99
|
export { default as TriangleExpandedIcon } from './triangle-expanded';
|
|
98
100
|
export { default as UploadIcon } from './upload';
|
|
99
101
|
export { default as VerticalEllipsisIcon } from './vertical-ellipsis';
|
|
102
|
+
export { default as CrclTickAnimation } from './circle-tick-animation';
|
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.
|
|
4
|
+
"version": "2.0.26-LEAN-4186.0",
|
|
5
5
|
"repository": "github:Atypon-OpenSource/manuscripts-style-guide",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "dist/cjs",
|