@manuscripts/style-guide 2.0.5 → 2.0.6
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/SystemUserAvatar.js +77 -0
- package/dist/cjs/components/icons/avatar.js +4 -2
- package/dist/cjs/components/icons/index.js +4 -2
- package/dist/cjs/components/icons/system-user-avatar.js +12 -0
- package/dist/es/components/SystemUserAvatar.js +47 -0
- package/dist/es/components/icons/avatar.js +4 -2
- package/dist/es/components/icons/index.js +1 -0
- package/dist/es/components/icons/system-user-avatar.js +7 -0
- package/dist/types/components/SystemUserAvatar.d.ts +23 -0
- package/dist/types/components/icons/index.d.ts +1 -0
- package/dist/types/components/icons/system-user-avatar.d.ts +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/*!
|
|
3
|
+
* © 2019 Atypon Systems LLC
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
41
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
42
|
+
};
|
|
43
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
44
|
+
exports.Avatar = void 0;
|
|
45
|
+
const react_1 = __importStar(require("react"));
|
|
46
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
47
|
+
const icons_1 = require("./icons");
|
|
48
|
+
const SystemUserAvatarContainer = styled_components_1.default.div `
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
position: relative;
|
|
53
|
+
`;
|
|
54
|
+
const RoundedImage = styled_components_1.default.img `
|
|
55
|
+
width: ${(props) => props.size}px;
|
|
56
|
+
height: ${(props) => props.size}px;
|
|
57
|
+
border-radius: 50%;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
`;
|
|
61
|
+
const StyledAvatar = (0, styled_components_1.default)(icons_1.SystemUserAvatarIcon) `
|
|
62
|
+
path {
|
|
63
|
+
fill: ${(props) => props.color || props.theme.colors.text.secondary};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:hover path {
|
|
67
|
+
fill: ${(props) => props.color || props.theme.colors.text.info};
|
|
68
|
+
}
|
|
69
|
+
`;
|
|
70
|
+
const Avatar = (props) => {
|
|
71
|
+
const [srcError, setSrcError] = (0, react_1.useState)(false);
|
|
72
|
+
const handleSrcError = (0, react_1.useCallback)(() => {
|
|
73
|
+
setSrcError(true);
|
|
74
|
+
}, []);
|
|
75
|
+
return (react_1.default.createElement(SystemUserAvatarContainer, 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
|
+
};
|
|
77
|
+
exports.Avatar = Avatar;
|
|
@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const AvatarIcon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "
|
|
8
|
-
react_1.default.createElement("path", { d: "
|
|
7
|
+
const AvatarIcon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
8
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M26.9862 21.4873C27.2694 21.0132 27.8833 20.8583 28.3575 21.1414C30.1323 22.2011 31.1794 22.6419 31.9682 22.9739C32.034 23.0015 32.0979 23.0285 32.1603 23.0549C33.0486 23.4313 33.7019 23.7479 34.6165 24.6815C35.2075 25.2847 35.518 26.1508 35.6977 26.9473C35.8839 27.7727 35.9622 28.6777 35.9887 29.4955C36.0154 30.3188 35.9904 31.0847 35.9592 31.6427C35.9435 31.9226 35.9261 32.1524 35.9125 32.3134C35.9057 32.394 35.8999 32.4575 35.8956 32.5017L35.8905 32.5531L35.8891 32.5675L35.8886 32.5717L35.8885 32.5731C35.8885 32.5733 35.8884 32.5739 34.894 32.4678L35.8885 32.5731C35.8775 32.6756 35.8507 32.7768 35.8091 32.8712C35.4529 33.6792 34.5926 34.174 33.7912 34.5021C32.9244 34.857 31.8215 35.1359 30.5958 35.3528C28.1361 35.788 25.021 36.0005 21.9357 36C18.8507 35.9995 15.7456 35.786 13.3064 35.3502C12.0914 35.1332 10.9995 34.8537 10.1462 34.4974C9.71919 34.3191 9.32064 34.1087 8.98894 33.8549C8.6608 33.6039 8.34607 33.2703 8.17468 32.8321C8.14227 32.7492 8.12106 32.6624 8.11162 32.5739L9.10598 32.4678C8.11162 32.5739 8.11164 32.5741 8.11162 32.5739L8.11094 32.5675L8.10947 32.5531L8.10439 32.5017C8.10014 32.4575 8.09428 32.394 8.08748 32.3134C8.07389 32.1524 8.05652 31.9226 8.04084 31.6427C8.00959 31.0847 7.98461 30.3188 8.0113 29.4955C8.03781 28.6777 8.11614 27.7727 8.30234 26.9473C8.482 26.1508 8.7925 25.2847 9.38351 24.6815C10.2981 23.7479 10.9514 23.4313 11.8397 23.0549C11.9021 23.0285 11.966 23.0015 12.0318 22.9739C12.8206 22.6419 13.8677 22.2011 15.6425 21.1414C16.1167 20.8583 16.7306 21.0132 17.0138 21.4873C17.2969 21.9615 17.142 22.5755 16.6678 22.8586C14.7744 23.9892 13.6294 24.4712 12.8103 24.8161C12.7449 24.8436 12.6815 24.8703 12.6201 24.8964C11.8656 25.2161 11.4739 25.4057 10.8121 26.0811C10.615 26.2824 10.4074 26.7043 10.2533 27.3874C10.1058 28.0415 10.0346 28.8077 10.0102 29.5603C9.98602 30.3076 10.0086 31.0117 10.0377 31.5309C10.0522 31.7897 10.0682 32.0005 10.0804 32.1452C10.0808 32.1496 10.0811 32.154 10.0815 32.1582C10.1071 32.1855 10.1461 32.222 10.2042 32.2665C10.3547 32.3816 10.5866 32.5139 10.917 32.6519C11.5787 32.9283 12.5101 33.1763 13.6581 33.3814C15.9451 33.79 18.9252 33.9995 21.936 34C24.9467 34.0005 27.9381 33.792 30.2473 33.3834C31.4061 33.1784 32.3531 32.9297 33.0334 32.6512C33.373 32.5122 33.6169 32.3774 33.7797 32.2573C33.845 32.209 33.8899 32.1687 33.9202 32.1376C33.9324 31.9931 33.948 31.7851 33.9623 31.5309C33.9914 31.0117 34.014 30.3076 33.9898 29.5603C33.9653 28.8077 33.8942 28.0415 33.7467 27.3874C33.5926 26.7043 33.385 26.2824 33.1879 26.0811C32.5261 25.4057 32.1344 25.2161 31.38 24.8964C31.3185 24.8703 31.2551 24.8436 31.1897 24.8161C30.3706 24.4712 29.2256 23.9892 27.3322 22.8586C26.858 22.5755 26.7031 21.9615 26.9862 21.4873Z", fill: "#6E6E6E" }),
|
|
9
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 20C25.3137 20 28 17.3137 28 14C28 10.6863 25.3137 8 22 8C18.6863 8 16 10.6863 16 14C16 17.3137 18.6863 20 22 20ZM22 22C26.4183 22 30 18.4183 30 14C30 9.58172 26.4183 6 22 6C17.5817 6 14 9.58172 14 14C14 18.4183 17.5817 22 22 22Z", fill: "#6E6E6E" }),
|
|
10
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 42.087C33.0937 42.087 42.087 33.0937 42.087 22C42.087 10.9063 33.0937 1.91304 22 1.91304C10.9063 1.91304 1.91304 10.9063 1.91304 22C1.91304 33.0937 10.9063 42.087 22 42.087ZM22 44C34.1503 44 44 34.1503 44 22C44 9.84974 34.1503 0 22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44Z", fill: "#6E6E6E" })));
|
|
9
11
|
exports.default = AvatarIcon;
|
|
@@ -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.SearchIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = void 0;
|
|
21
|
+
exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.LinkIcon = 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.EditIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = 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.SearchIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = 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");
|
|
@@ -50,6 +50,8 @@ var attention_red_1 = require("./attention-red");
|
|
|
50
50
|
Object.defineProperty(exports, "AttentionRedIcon", { enumerable: true, get: function () { return __importDefault(attention_red_1).default; } });
|
|
51
51
|
var avatar_1 = require("./avatar");
|
|
52
52
|
Object.defineProperty(exports, "AvatarIcon", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
|
|
53
|
+
var system_user_avatar_1 = require("./system-user-avatar");
|
|
54
|
+
Object.defineProperty(exports, "SystemUserAvatarIcon", { enumerable: true, get: function () { return __importDefault(system_user_avatar_1).default; } });
|
|
53
55
|
var citation_count_1 = require("./citation-count");
|
|
54
56
|
Object.defineProperty(exports, "CitationCountIcon", { enumerable: true, get: function () { return __importDefault(citation_count_1).default; } });
|
|
55
57
|
var comment_reply_1 = require("./comment-reply");
|
|
@@ -0,0 +1,12 @@
|
|
|
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 SystemUserAvatarIcon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
8
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M35.437 30.3453L34.6649 30.2143C34.5844 29.9547 34.481 29.7042 34.3547 29.4652L34.8096 28.8287C35.0027 28.5576 34.9728 28.1876 34.7361 27.9532L34.0513 27.2684C33.9227 27.1398 33.7526 27.0685 33.5711 27.0685C33.4286 27.0685 33.293 27.1122 33.1781 27.1949L32.5393 27.6499C32.2912 27.5189 32.0315 27.4109 31.7627 27.3305L31.634 26.5676C31.5788 26.239 31.2962 26 30.963 26H29.9956C29.6624 26 29.3798 26.239 29.3246 26.5676L29.1913 27.3489C28.934 27.4293 28.6835 27.535 28.4445 27.6637L27.8126 27.2087C27.6977 27.126 27.5598 27.0823 27.4174 27.0823C27.2358 27.0823 27.0635 27.1535 26.9371 27.2822L26.25 27.967C26.0157 28.2014 25.9835 28.5713 26.1765 28.8425L26.6361 29.4882C26.5097 29.7295 26.4086 29.9799 26.3305 30.2396L25.5676 30.3683C25.239 30.4234 25 30.7061 25 31.0393V32.0067C25 32.3399 25.239 32.6225 25.5676 32.6777L26.3489 32.8109C26.4293 33.0683 26.535 33.3188 26.6637 33.5578L26.211 34.1874C26.018 34.4585 26.0478 34.8285 26.2845 35.0629L26.9693 35.7477C27.098 35.8763 27.268 35.9476 27.4495 35.9476C27.592 35.9476 27.7276 35.9039 27.8425 35.8212L28.4882 35.3616C28.7203 35.4834 28.9638 35.5822 29.2143 35.6603L29.343 36.4324C29.3981 36.761 29.6808 37 30.014 37H30.9837C31.3169 37 31.5995 36.761 31.6547 36.4324L31.7856 35.6603C32.0453 35.5799 32.2958 35.4765 32.5347 35.3501L33.1712 35.8051C33.2861 35.8878 33.424 35.9315 33.5665 35.9315C33.748 35.9315 33.9181 35.8602 34.0467 35.7316L34.7315 35.0468C34.9659 34.8124 34.9981 34.4424 34.805 34.1713L34.3501 33.5325C34.4764 33.2912 34.5821 33.0407 34.6603 32.7834L35.4324 32.6547C35.761 32.5995 35.9999 32.3169 35.9999 31.9837V31.0163C36.0045 30.6831 35.7656 30.4005 35.437 30.3453ZM28.1274 31.4989C28.1274 30.1891 29.1913 29.1251 30.5011 29.1251C31.8109 29.1251 32.8748 30.1891 32.8748 31.4989C32.8748 32.8087 31.8109 33.8726 30.5011 33.8726C29.1913 33.8726 28.1274 32.8087 28.1274 31.4989Z", fill: "#6E6E6E" }),
|
|
9
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.0138 21.4873C17.2969 21.9615 17.142 22.5755 16.6678 22.8586C14.7744 23.9892 13.6294 24.4712 12.8103 24.8161C12.7449 24.8436 12.6815 24.8703 12.6201 24.8964C11.8656 25.2161 11.4739 25.4057 10.8121 26.0811C10.615 26.2824 10.4074 26.7043 10.2533 27.3874C10.1058 28.0415 10.0346 28.8077 10.0102 29.5603C9.98602 30.3076 10.0086 31.0117 10.0377 31.5309C10.0522 31.7897 10.0682 32.0005 10.0804 32.1452C10.0808 32.1496 10.0811 32.154 10.0815 32.1582C10.1142 32.1931 10.1687 32.243 10.257 32.3052C10.45 32.4411 10.7422 32.5914 11.1489 32.7435C11.9617 33.0475 13.0936 33.3084 14.4579 33.5121C17.177 33.918 20.655 34.0729 23.9685 33.9684C24.5205 33.951 24.9821 34.3843 24.9995 34.9363C25.0169 35.4884 24.5835 35.95 24.0315 35.9674C20.6304 36.0746 17.0284 35.918 14.1627 35.4902C12.7346 35.277 11.4478 34.9906 10.4483 34.6167C9.9489 34.43 9.48654 34.2087 9.10561 33.9405C8.73164 33.6772 8.36481 33.3182 8.17468 32.8321C8.14227 32.7492 8.12106 32.6624 8.11162 32.5739L9.10598 32.4678C8.11162 32.5739 8.11164 32.5741 8.11162 32.5739L8.11094 32.5675L8.10947 32.5531L8.10439 32.5017C8.10014 32.4575 8.09428 32.394 8.08748 32.3134C8.07389 32.1524 8.05652 31.9226 8.04084 31.6427C8.00959 31.0847 7.98461 30.3188 8.0113 29.4955C8.03781 28.6777 8.11614 27.7727 8.30234 26.9473C8.482 26.1508 8.7925 25.2847 9.38351 24.6815C10.2981 23.7479 10.9514 23.4313 11.8397 23.0549C11.9021 23.0285 11.966 23.0015 12.0318 22.9739C12.8206 22.6419 13.8677 22.2011 15.6425 21.1414C16.1167 20.8583 16.7306 21.0132 17.0138 21.4873ZM26.9862 21.4873C27.2694 21.0132 27.8833 20.8583 28.3575 21.1414C29.7486 21.972 30.6922 22.4217 31.4007 22.7316C31.9067 22.9529 32.1375 23.5426 31.9162 24.0485C31.6949 24.5545 31.1053 24.7853 30.5993 24.564C29.8197 24.223 28.8008 23.7355 27.3322 22.8586C26.858 22.5755 26.7031 21.9615 26.9862 21.4873Z", fill: "#6E6E6E" }),
|
|
10
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 20C25.3137 20 28 17.3137 28 14C28 10.6863 25.3137 8 22 8C18.6863 8 16 10.6863 16 14C16 17.3137 18.6863 20 22 20ZM22 22C26.4183 22 30 18.4183 30 14C30 9.58172 26.4183 6 22 6C17.5817 6 14 9.58172 14 14C14 18.4183 17.5817 22 22 22Z", fill: "#6E6E6E" }),
|
|
11
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 42C33.0457 42 42 33.0457 42 22C42 10.9543 33.0457 2 22 2C10.9543 2 2 10.9543 2 22C2 33.0457 10.9543 42 22 42ZM22 44C34.1503 44 44 34.1503 44 22C44 9.84974 34.1503 0 22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44Z", fill: "#6E6E6E" })));
|
|
12
|
+
exports.default = SystemUserAvatarIcon;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* © 2019 Atypon Systems LLC
|
|
3
|
+
*
|
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
* you may not use this file except in compliance with the License.
|
|
6
|
+
* You may obtain a copy of the License at
|
|
7
|
+
*
|
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
* See the License for the specific language governing permissions and
|
|
14
|
+
* limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
import React, { useCallback, useState } from 'react';
|
|
17
|
+
import styled from 'styled-components';
|
|
18
|
+
import { SystemUserAvatarIcon } from './icons';
|
|
19
|
+
const SystemUserAvatarContainer = styled.div `
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
position: relative;
|
|
24
|
+
`;
|
|
25
|
+
const RoundedImage = styled.img `
|
|
26
|
+
width: ${(props) => props.size}px;
|
|
27
|
+
height: ${(props) => props.size}px;
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
`;
|
|
32
|
+
const StyledAvatar = styled(SystemUserAvatarIcon) `
|
|
33
|
+
path {
|
|
34
|
+
fill: ${(props) => props.color || props.theme.colors.text.secondary};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&:hover path {
|
|
38
|
+
fill: ${(props) => props.color || props.theme.colors.text.info};
|
|
39
|
+
}
|
|
40
|
+
`;
|
|
41
|
+
export const Avatar = (props) => {
|
|
42
|
+
const [srcError, setSrcError] = useState(false);
|
|
43
|
+
const handleSrcError = useCallback(() => {
|
|
44
|
+
setSrcError(true);
|
|
45
|
+
}, []);
|
|
46
|
+
return (React.createElement(SystemUserAvatarContainer, 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
|
+
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
const AvatarIcon = (props) => (React.createElement("svg", Object.assign({ width: "
|
|
3
|
-
React.createElement("path", { d: "
|
|
2
|
+
const AvatarIcon = (props) => (React.createElement("svg", Object.assign({ width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
3
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M26.9862 21.4873C27.2694 21.0132 27.8833 20.8583 28.3575 21.1414C30.1323 22.2011 31.1794 22.6419 31.9682 22.9739C32.034 23.0015 32.0979 23.0285 32.1603 23.0549C33.0486 23.4313 33.7019 23.7479 34.6165 24.6815C35.2075 25.2847 35.518 26.1508 35.6977 26.9473C35.8839 27.7727 35.9622 28.6777 35.9887 29.4955C36.0154 30.3188 35.9904 31.0847 35.9592 31.6427C35.9435 31.9226 35.9261 32.1524 35.9125 32.3134C35.9057 32.394 35.8999 32.4575 35.8956 32.5017L35.8905 32.5531L35.8891 32.5675L35.8886 32.5717L35.8885 32.5731C35.8885 32.5733 35.8884 32.5739 34.894 32.4678L35.8885 32.5731C35.8775 32.6756 35.8507 32.7768 35.8091 32.8712C35.4529 33.6792 34.5926 34.174 33.7912 34.5021C32.9244 34.857 31.8215 35.1359 30.5958 35.3528C28.1361 35.788 25.021 36.0005 21.9357 36C18.8507 35.9995 15.7456 35.786 13.3064 35.3502C12.0914 35.1332 10.9995 34.8537 10.1462 34.4974C9.71919 34.3191 9.32064 34.1087 8.98894 33.8549C8.6608 33.6039 8.34607 33.2703 8.17468 32.8321C8.14227 32.7492 8.12106 32.6624 8.11162 32.5739L9.10598 32.4678C8.11162 32.5739 8.11164 32.5741 8.11162 32.5739L8.11094 32.5675L8.10947 32.5531L8.10439 32.5017C8.10014 32.4575 8.09428 32.394 8.08748 32.3134C8.07389 32.1524 8.05652 31.9226 8.04084 31.6427C8.00959 31.0847 7.98461 30.3188 8.0113 29.4955C8.03781 28.6777 8.11614 27.7727 8.30234 26.9473C8.482 26.1508 8.7925 25.2847 9.38351 24.6815C10.2981 23.7479 10.9514 23.4313 11.8397 23.0549C11.9021 23.0285 11.966 23.0015 12.0318 22.9739C12.8206 22.6419 13.8677 22.2011 15.6425 21.1414C16.1167 20.8583 16.7306 21.0132 17.0138 21.4873C17.2969 21.9615 17.142 22.5755 16.6678 22.8586C14.7744 23.9892 13.6294 24.4712 12.8103 24.8161C12.7449 24.8436 12.6815 24.8703 12.6201 24.8964C11.8656 25.2161 11.4739 25.4057 10.8121 26.0811C10.615 26.2824 10.4074 26.7043 10.2533 27.3874C10.1058 28.0415 10.0346 28.8077 10.0102 29.5603C9.98602 30.3076 10.0086 31.0117 10.0377 31.5309C10.0522 31.7897 10.0682 32.0005 10.0804 32.1452C10.0808 32.1496 10.0811 32.154 10.0815 32.1582C10.1071 32.1855 10.1461 32.222 10.2042 32.2665C10.3547 32.3816 10.5866 32.5139 10.917 32.6519C11.5787 32.9283 12.5101 33.1763 13.6581 33.3814C15.9451 33.79 18.9252 33.9995 21.936 34C24.9467 34.0005 27.9381 33.792 30.2473 33.3834C31.4061 33.1784 32.3531 32.9297 33.0334 32.6512C33.373 32.5122 33.6169 32.3774 33.7797 32.2573C33.845 32.209 33.8899 32.1687 33.9202 32.1376C33.9324 31.9931 33.948 31.7851 33.9623 31.5309C33.9914 31.0117 34.014 30.3076 33.9898 29.5603C33.9653 28.8077 33.8942 28.0415 33.7467 27.3874C33.5926 26.7043 33.385 26.2824 33.1879 26.0811C32.5261 25.4057 32.1344 25.2161 31.38 24.8964C31.3185 24.8703 31.2551 24.8436 31.1897 24.8161C30.3706 24.4712 29.2256 23.9892 27.3322 22.8586C26.858 22.5755 26.7031 21.9615 26.9862 21.4873Z", fill: "#6E6E6E" }),
|
|
4
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 20C25.3137 20 28 17.3137 28 14C28 10.6863 25.3137 8 22 8C18.6863 8 16 10.6863 16 14C16 17.3137 18.6863 20 22 20ZM22 22C26.4183 22 30 18.4183 30 14C30 9.58172 26.4183 6 22 6C17.5817 6 14 9.58172 14 14C14 18.4183 17.5817 22 22 22Z", fill: "#6E6E6E" }),
|
|
5
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 42.087C33.0937 42.087 42.087 33.0937 42.087 22C42.087 10.9063 33.0937 1.91304 22 1.91304C10.9063 1.91304 1.91304 10.9063 1.91304 22C1.91304 33.0937 10.9063 42.087 22 42.087ZM22 44C34.1503 44 44 34.1503 44 22C44 9.84974 34.1503 0 22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44Z", fill: "#6E6E6E" })));
|
|
4
6
|
export default AvatarIcon;
|
|
@@ -28,6 +28,7 @@ export { default as AttentionGreenIcon } from './attention-green';
|
|
|
28
28
|
export { default as AttentionOrangeIcon } from './attention-orange';
|
|
29
29
|
export { default as AttentionRedIcon } from './attention-red';
|
|
30
30
|
export { default as AvatarIcon } from './avatar';
|
|
31
|
+
export { default as SystemUserAvatarIcon } from './system-user-avatar';
|
|
31
32
|
export { default as CitationCountIcon } from './citation-count';
|
|
32
33
|
export { default as CommentReplyIcon } from './comment-reply';
|
|
33
34
|
export { default as CommentResolveIcon } from './comment-resolve';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
const SystemUserAvatarIcon = (props) => (React.createElement("svg", Object.assign({ width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
3
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M35.437 30.3453L34.6649 30.2143C34.5844 29.9547 34.481 29.7042 34.3547 29.4652L34.8096 28.8287C35.0027 28.5576 34.9728 28.1876 34.7361 27.9532L34.0513 27.2684C33.9227 27.1398 33.7526 27.0685 33.5711 27.0685C33.4286 27.0685 33.293 27.1122 33.1781 27.1949L32.5393 27.6499C32.2912 27.5189 32.0315 27.4109 31.7627 27.3305L31.634 26.5676C31.5788 26.239 31.2962 26 30.963 26H29.9956C29.6624 26 29.3798 26.239 29.3246 26.5676L29.1913 27.3489C28.934 27.4293 28.6835 27.535 28.4445 27.6637L27.8126 27.2087C27.6977 27.126 27.5598 27.0823 27.4174 27.0823C27.2358 27.0823 27.0635 27.1535 26.9371 27.2822L26.25 27.967C26.0157 28.2014 25.9835 28.5713 26.1765 28.8425L26.6361 29.4882C26.5097 29.7295 26.4086 29.9799 26.3305 30.2396L25.5676 30.3683C25.239 30.4234 25 30.7061 25 31.0393V32.0067C25 32.3399 25.239 32.6225 25.5676 32.6777L26.3489 32.8109C26.4293 33.0683 26.535 33.3188 26.6637 33.5578L26.211 34.1874C26.018 34.4585 26.0478 34.8285 26.2845 35.0629L26.9693 35.7477C27.098 35.8763 27.268 35.9476 27.4495 35.9476C27.592 35.9476 27.7276 35.9039 27.8425 35.8212L28.4882 35.3616C28.7203 35.4834 28.9638 35.5822 29.2143 35.6603L29.343 36.4324C29.3981 36.761 29.6808 37 30.014 37H30.9837C31.3169 37 31.5995 36.761 31.6547 36.4324L31.7856 35.6603C32.0453 35.5799 32.2958 35.4765 32.5347 35.3501L33.1712 35.8051C33.2861 35.8878 33.424 35.9315 33.5665 35.9315C33.748 35.9315 33.9181 35.8602 34.0467 35.7316L34.7315 35.0468C34.9659 34.8124 34.9981 34.4424 34.805 34.1713L34.3501 33.5325C34.4764 33.2912 34.5821 33.0407 34.6603 32.7834L35.4324 32.6547C35.761 32.5995 35.9999 32.3169 35.9999 31.9837V31.0163C36.0045 30.6831 35.7656 30.4005 35.437 30.3453ZM28.1274 31.4989C28.1274 30.1891 29.1913 29.1251 30.5011 29.1251C31.8109 29.1251 32.8748 30.1891 32.8748 31.4989C32.8748 32.8087 31.8109 33.8726 30.5011 33.8726C29.1913 33.8726 28.1274 32.8087 28.1274 31.4989Z", fill: "#6E6E6E" }),
|
|
4
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.0138 21.4873C17.2969 21.9615 17.142 22.5755 16.6678 22.8586C14.7744 23.9892 13.6294 24.4712 12.8103 24.8161C12.7449 24.8436 12.6815 24.8703 12.6201 24.8964C11.8656 25.2161 11.4739 25.4057 10.8121 26.0811C10.615 26.2824 10.4074 26.7043 10.2533 27.3874C10.1058 28.0415 10.0346 28.8077 10.0102 29.5603C9.98602 30.3076 10.0086 31.0117 10.0377 31.5309C10.0522 31.7897 10.0682 32.0005 10.0804 32.1452C10.0808 32.1496 10.0811 32.154 10.0815 32.1582C10.1142 32.1931 10.1687 32.243 10.257 32.3052C10.45 32.4411 10.7422 32.5914 11.1489 32.7435C11.9617 33.0475 13.0936 33.3084 14.4579 33.5121C17.177 33.918 20.655 34.0729 23.9685 33.9684C24.5205 33.951 24.9821 34.3843 24.9995 34.9363C25.0169 35.4884 24.5835 35.95 24.0315 35.9674C20.6304 36.0746 17.0284 35.918 14.1627 35.4902C12.7346 35.277 11.4478 34.9906 10.4483 34.6167C9.9489 34.43 9.48654 34.2087 9.10561 33.9405C8.73164 33.6772 8.36481 33.3182 8.17468 32.8321C8.14227 32.7492 8.12106 32.6624 8.11162 32.5739L9.10598 32.4678C8.11162 32.5739 8.11164 32.5741 8.11162 32.5739L8.11094 32.5675L8.10947 32.5531L8.10439 32.5017C8.10014 32.4575 8.09428 32.394 8.08748 32.3134C8.07389 32.1524 8.05652 31.9226 8.04084 31.6427C8.00959 31.0847 7.98461 30.3188 8.0113 29.4955C8.03781 28.6777 8.11614 27.7727 8.30234 26.9473C8.482 26.1508 8.7925 25.2847 9.38351 24.6815C10.2981 23.7479 10.9514 23.4313 11.8397 23.0549C11.9021 23.0285 11.966 23.0015 12.0318 22.9739C12.8206 22.6419 13.8677 22.2011 15.6425 21.1414C16.1167 20.8583 16.7306 21.0132 17.0138 21.4873ZM26.9862 21.4873C27.2694 21.0132 27.8833 20.8583 28.3575 21.1414C29.7486 21.972 30.6922 22.4217 31.4007 22.7316C31.9067 22.9529 32.1375 23.5426 31.9162 24.0485C31.6949 24.5545 31.1053 24.7853 30.5993 24.564C29.8197 24.223 28.8008 23.7355 27.3322 22.8586C26.858 22.5755 26.7031 21.9615 26.9862 21.4873Z", fill: "#6E6E6E" }),
|
|
5
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 20C25.3137 20 28 17.3137 28 14C28 10.6863 25.3137 8 22 8C18.6863 8 16 10.6863 16 14C16 17.3137 18.6863 20 22 20ZM22 22C26.4183 22 30 18.4183 30 14C30 9.58172 26.4183 6 22 6C17.5817 6 14 9.58172 14 14C14 18.4183 17.5817 22 22 22Z", fill: "#6E6E6E" }),
|
|
6
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 42C33.0457 42 42 33.0457 42 22C42 10.9543 33.0457 2 22 2C10.9543 2 2 10.9543 2 22C2 33.0457 10.9543 42 22 42ZM22 44C34.1503 44 44 34.1503 44 22C44 9.84974 34.1503 0 22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44Z", fill: "#6E6E6E" })));
|
|
7
|
+
export default SystemUserAvatarIcon;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* © 2019 Atypon Systems LLC
|
|
3
|
+
*
|
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
* you may not use this file except in compliance with the License.
|
|
6
|
+
* You may obtain a copy of the License at
|
|
7
|
+
*
|
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
* See the License for the specific language governing permissions and
|
|
14
|
+
* limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
import React from 'react';
|
|
17
|
+
interface SystemUserAvatarProps {
|
|
18
|
+
src?: string;
|
|
19
|
+
size: number;
|
|
20
|
+
color?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare const Avatar: React.FC<SystemUserAvatarProps>;
|
|
23
|
+
export {};
|
|
@@ -28,6 +28,7 @@ export { default as AttentionGreenIcon } from './attention-green';
|
|
|
28
28
|
export { default as AttentionOrangeIcon } from './attention-orange';
|
|
29
29
|
export { default as AttentionRedIcon } from './attention-red';
|
|
30
30
|
export { default as AvatarIcon } from './avatar';
|
|
31
|
+
export { default as SystemUserAvatarIcon } from './system-user-avatar';
|
|
31
32
|
export { default as CitationCountIcon } from './citation-count';
|
|
32
33
|
export { default as CommentReplyIcon } from './comment-reply';
|
|
33
34
|
export { default as CommentResolveIcon } from './comment-resolve';
|
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.6",
|
|
5
5
|
"repository": "github:Atypon-OpenSource/manuscripts-style-guide",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "dist/cjs",
|